/* ════════════════════════════════════════════════════════════════════════
   MONDAi homepage (hp-*)
   Light premium restyle. Self-contained: this page does NOT load
   /styles.css, whose dark body background, starfield and .section
   stacking rules are built for the dark pages and fight this design.
   Recreated from design_handoff_mondai_homepage/ at high fidelity.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --hp-ink:          #121212;
    --hp-page:         #FFFFFF;   /* the page ground; washes and frames track this */
    --hp-page-rgb:     255, 255, 255;
    --hp-cream:        #F6F3EC;   /* warm ground, hero only */
    --hp-white:        #FFFFFF;
    --hp-fill-soft:    #FBF9F4;
    --hp-fill:         #F3EFE6;

    --hp-body:         #555555;
    --hp-body-strong:  #444444;
    --hp-muted:        #666666;
    --hp-faint:        #767676;   /* was #999999 in the design: 2.85:1 on white fails AA */

    --hp-on-dark:      #FFFFFF;
    --hp-on-dark-mid:  #9b9b9b;
    --hp-on-dark-dim:  #9b9b9b;   /* was #6e6e6e in the design: 3.68:1 on #121212 fails AA */
    --hp-panel:        #191919;

    --hp-gold:         #D9C2A3;
    --hp-gold-warm:    #C9A84C;
    --hp-gold-light:   #E8C97A;
    --hp-gold-deep:    #8a6a1e;

    --hp-red:          #991b1b;
    --hp-green:        #3d6b38;

    --hp-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --hp-gold-grad:    linear-gradient(135deg, #D9C2A3, #C9A84C);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: clip;              /* no sideways pan, ever */
    background: var(--hp-page);
    color: var(--hp-ink);
    font-family: 'Geist', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--hp-gold-warm); text-decoration: none; }
a:hover { color: var(--hp-ink); }
::selection { background: rgba(201, 168, 76, 0.25); }
select { font-family: 'Geist', sans-serif; }
details summary::-webkit-details-marker { display: none; }
img { max-width: 100%; height: auto; }

@keyframes hpScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Skip link — keyboard users land here first.
   Parked with a transform on a FIXED element, never at left:-9999px. An
   absolutely positioned element off the left edge adds scrollable area on iOS,
   which lets the whole page pan sideways. document.scrollWidth cannot see it,
   because scrollWidth only measures overflow to the right. */
.hp-skip {
    position: fixed; left: 0; top: 0; z-index: 10000;
    padding: 12px 20px; background: var(--hp-ink); color: var(--hp-white);
    font-size: 13px; font-weight: 700; border-radius: 0 0 10px 0;
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}
.hp-skip:focus { transform: translateY(0); color: var(--hp-white); }

/* Shared type ─────────────────────────────────────────────────────────── */
.hp-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 4px;
    text-transform: uppercase; color: var(--hp-muted);
}
.hp-eyebrow::before,
.hp-eyebrow--rules::after { content: ""; width: 20px; height: 1px; background: var(--hp-gold-warm); }
.hp-eyebrow--dark { color: var(--hp-gold); }
.hp-eyebrow--dark::before { background: var(--hp-gold); }

.hp-gold-text {
    background: linear-gradient(90deg, #B8860B 0%, #C9A84C 55%, #8a6a1e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.hp-gold-text--flat {
    background: linear-gradient(90deg, #B8860B, #8a6a1e);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.hp-mark {
    background: var(--hp-gold-grad); color: var(--hp-ink);
    font-weight: 800; padding: 0.04em 0.4em; border-radius: 6px;
}

/* Buttons ────────────────────────────────────────────────────────────── */
 /* ── BUTTONS ──────────────────────────────────────────────────────────────
   One shape, three weights, nothing outside black, white and transparent.
   The weight is chosen by the ground the button sits on, not by the section it
   happens to be in: --solid on light, --inverse on dark, --ghost on either.
   Width is a separate modifier, so a card's full-bleed button is still the same
   button rather than a fourth design. */
.hp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 38px;
    font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 700;
    border: 1px solid transparent; border-radius: 12px;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.3s var(--hp-ease);
}
.hp-btn:hover { transform: translateY(-2px); }

/* Black on a light ground. */
.hp-btn--solid { background: var(--hp-ink); color: var(--hp-white); border-color: var(--hp-ink); }
.hp-btn--solid:hover { color: var(--hp-white); }

/* White on a dark ground. Black on black is not a button. */
.hp-btn--inverse { background: var(--hp-white); color: var(--hp-ink); border-color: var(--hp-white); }
.hp-btn--inverse:hover { color: var(--hp-ink); }

/* Transparent. Takes its ink from whichever ground it is on. */
.hp-btn--ghost { background: transparent; color: var(--hp-ink); border-color: rgba(18, 18, 18, 0.18); }
.hp-btn--ghost:hover { background: rgba(18, 18, 18, 0.05); color: var(--hp-ink); }
.hp-alma .hp-btn--ghost,
.hp-final .hp-btn--ghost,
.hp-plan--dark .hp-btn--ghost,
.hp-calc-summary .hp-btn--ghost {
    color: var(--hp-on-dark); border-color: rgba(255, 255, 255, 0.35);
}
.hp-alma .hp-btn--ghost:hover,
.hp-final .hp-btn--ghost:hover,
.hp-plan--dark .hp-btn--ghost:hover,
.hp-calc-summary .hp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.09); color: var(--hp-on-dark);
}

/* Fills its card. Width only; the weight above is untouched. */
.hp-btn--full { display: flex; width: 100%; padding: 15px 20px; }
/* Both plan buttons sit on the card floor so they line up across cards. */
.hp-plan .hp-btn { margin-top: auto; }

.hp-reassure { margin: 0; font-size: 12.5px; color: var(--hp-muted); }

/* ── NAV ──────────────────────────────────────────────────────────────── */
.hp-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
    background: rgba(var(--hp-page-rgb), 0.86);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(18, 18, 18, 0.07);
    transition: box-shadow 0.4s ease;
}
.hp-nav.is-scrolled { box-shadow: 0 8px 30px rgba(15, 16, 17, 0.08); }
.hp-nav-inner {
    max-width: 1140px; margin: 0 auto; padding: 0 28px; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hp-nav-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.hp-nav-mark { height: 30px; width: 30px; display: block; flex-shrink: 0; }
/* Wordmark set in Geist beside the 512 mark, matching the treatment the dark
   mn-* nav already used. A logotype is exempt from WCAG contrast, which is why
   the gold "Ai" stays brand gold rather than the darker text gold. */
.hp-nav-wordmark {
    font-family: 'Geist', sans-serif;
    font-size: 16px; font-weight: 400; letter-spacing: 3.5px;
    color: var(--hp-ink); white-space: nowrap; line-height: 1;
}
.hp-nav-wordmark span { color: var(--hp-gold-warm); }
.hp-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.hp-nav-link {
    padding: 8px 14px; font-size: 13.5px; font-weight: 500;
    color: var(--hp-body); border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
.hp-nav-link:hover { background: rgba(18, 18, 18, 0.05); color: var(--hp-ink); }
.hp-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hp-nav-cta {
    display: inline-flex; align-items: center; padding: 10px 22px;
    background: var(--hp-ink); color: var(--hp-white);
    font-size: 13px; font-weight: 700; border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hp-cta-short { display: none; }
.hp-nav-cta:hover {
    color: var(--hp-white);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(18, 18, 18, 0.25);
}

/* Mobile menu — the prototype dropped the desktop links below 860px with no
   replacement. The live site has a mobile menu, so it is kept here (the
   handoff explicitly allows this) and restyled for the light bar. */
/* Bare glyph, no box, after Linear's mobile header. The 44px tap target comes
   from padding rather than a visible chip. */
.hp-nav-burger {
    display: none; width: 44px; height: 44px; padding: 0;
    margin-right: -10px;
    align-items: center; justify-content: center;
    background: none; border: none; border-radius: 0;
    color: var(--hp-ink); cursor: pointer;
    transition: opacity 0.2s ease;
}
.hp-nav-burger:hover { opacity: 0.6; }
.hp-nav-burger .hp-burger-close { display: none; }
.hp-nav-burger[aria-expanded="true"] .hp-burger-open { display: none; }
.hp-nav-burger[aria-expanded="true"] .hp-burger-close { display: block; }
.hp-nav-mobile {
    display: none;
    border-top: 1px solid rgba(18, 18, 18, 0.07);
    background: rgba(var(--hp-page-rgb), 0.98);
    padding: 10px 28px 18px;
}
.hp-nav-mobile.is-open { display: block; }
.hp-nav-mobile a {
    display: block; padding: 14px 2px; font-size: 16px; font-weight: 500;
    color: var(--hp-ink); border-bottom: none;
}
.hp-nav-mobile a:hover { color: var(--hp-gold-deep); }

/* ── SECTION SHELLS ───────────────────────────────────────────────────── */
.hp-section { padding: 104px 28px; }
.hp-section--white { background: var(--hp-white); }
.hp-section--dark { background: var(--hp-ink); }
.hp-anchor { scroll-margin-top: 76px; }
.hp-wrap { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.hp-head {
    text-align: center; display: flex; flex-direction: column;
    gap: 14px; align-items: center;
}
.hp-head p { margin: 0; max-width: 600px; font-size: 16.5px; line-height: 1.7; color: var(--hp-body); }
.hp-h2 {
    margin: 0; font-size: clamp(30px, 4.4vw, 46px); font-weight: 300;
    letter-spacing: -0.02em; line-height: 1.15;
}
.hp-h2 strong { font-weight: 800; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative; padding: 150px 28px 72px; overflow: hidden;
    background: var(--hp-cream);
}
/* Hero bloom, after Linear's. Their hero uses no filter: blur() at all, no
   canvas and no video: it is layered gradients plus a grain tile blended in
   overlay, which is what keeps a soft wash from reading as flat CSS. Ported to
   the light hero, the accent blobs are the six chamber colours from the brand's
   rosette rather than Linear's cool blues. */
.hp-hero-glow {
    position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
    width: min(1500px, 150vw); height: 940px; pointer-events: none;
    background:
        radial-gradient(40% 46% at 50% 58%, rgba(217, 194, 163, 0.40) 0%, rgba(217, 194, 163, 0) 72%),
        radial-gradient(26% 30% at 29% 47%, rgba(196, 152, 152, 0.20) 0%, rgba(196, 152, 152, 0) 72%),
        radial-gradient(24% 29% at 71% 44%, rgba(168, 152, 196, 0.17) 0%, rgba(168, 152, 196, 0) 72%),
        radial-gradient(30% 27% at 63% 71%, rgba(168, 197, 163, 0.15) 0%, rgba(168, 197, 163, 0) 74%),
        radial-gradient(23% 27% at 37% 73%, rgba(136, 173, 196, 0.14) 0%, rgba(136, 173, 196, 0) 74%),
        radial-gradient(34% 22% at 50% 88%, rgba(201, 168, 76, 0.10) 0%, rgba(201, 168, 76, 0) 76%);
}
/* Sits above the bloom and below the copy, so it textures the wash without
   touching the headline. */
.hp-hero-grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("/images/grain.png");
    background-size: 128px 128px;
    opacity: 0.42;
    mix-blend-mode: overlay;
}
.hp-hero-inner {
    position: relative; max-width: 920px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.hp-hero-badge {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px;
    background: var(--hp-white); border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 999px; box-shadow: 0 2px 12px rgba(15, 16, 17, 0.06);
}
.hp-hero-badge span:first-child {
    width: 6px; height: 6px; border-radius: 50%; background: var(--hp-gold-grad);
}
.hp-hero-badge span:last-child {
    font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--hp-muted);
}
.hp-h1 {
    margin: 0; font-size: clamp(40px, 6.2vw, 68px); font-weight: 300;
    line-height: 1.08; letter-spacing: -0.03em; color: var(--hp-ink);
    text-wrap: balance;
}
.hp-h1 strong { font-weight: 800; }
.hp-hero-sub {
    margin: 0; max-width: 620px; font-size: 18px; line-height: 1.7;
    color: var(--hp-body); text-wrap: pretty;
}
.hp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Browser-chrome frame */
.hp-browser { position: relative; max-width: 1040px; margin: 56px auto 0; }
.hp-browser-frame {
    background: var(--hp-white); border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 40px 100px rgba(15, 16, 17, 0.18), 0 8px 24px rgba(15, 16, 17, 0.08);
}
.hp-browser-bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.07); background: var(--hp-fill-soft);
}
.hp-browser-dots { display: flex; gap: 6px; }
.hp-browser-dots span { width: 9px; height: 9px; border-radius: 50%; }
.hp-browser-dots span:nth-child(1) { background: var(--hp-gold-light); }
.hp-browser-dots span:nth-child(2) { background: var(--hp-gold); }
.hp-browser-dots span:nth-child(3) { background: var(--hp-gold-warm); }
.hp-browser-url {
    flex: 1; text-align: center; font-size: 11.5px; color: var(--hp-faint);
    background: var(--hp-fill); border-radius: 6px; padding: 4px 0;
    max-width: 280px; margin: 0 auto;
}
.hp-browser-pad { width: 45px; }
/* The mockup measures itself against this box, so the card is the container. */
.hp-browser-shot { position: relative; container-type: inline-size; }
.hp-browser-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 92%);
    pointer-events: none;
}

/* ── HERO DASHBOARD MOCKUP ────────────────────────────────────────────────
   Hand-built rather than a screenshot, so it stays sharp at any width and any
   pixel density instead of resampling.

   Sizes clamp against cqw, the card's own width, rather than vw. The card is
   capped at 1040px while the viewport runs to 1920, so viewport-sized type
   drifts out of proportion with the box holding it: at 1024 and 768 the value
   outgrew its stat card and pushed the badge onto a second line. Tying both to
   one container fixes every ratio at every width, which is what carrying no
   media query actually requires. Floors sit low on purpose so the panel keeps
   shrinking in proportion on a phone, exactly as the screenshot it replaces
   did, instead of hitting a floor and breaking its own layout. Every size is a clamp() so the whole
   panel scales fluidly and carries no media query of its own. */
.hp-mock {
    background: #FAFBFC; color: #16181D;
    padding: clamp(7px, 3.276cqw, 34px);
    display: flex; flex-direction: column; gap: clamp(4px, 2.119cqw, 22px);
}
.hp-mock-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(3px, 1.541cqw, 16px);
}
.hp-mock-title {
    font-size: clamp(5px, 2.505cqw, 26px); font-weight: 700;
    color: #16181D; letter-spacing: -0.01em;
}
.hp-mock-actions { display: flex; align-items: center; gap: clamp(2px, 0.963cqw, 10px); }
.hp-mock-btn {
    display: inline-flex; align-items: center; gap: clamp(1px, 0.674cqw, 7px);
    padding: clamp(2px, 1.06cqw, 11px) clamp(4px, 1.734cqw, 18px);
    border-radius: 8px; white-space: nowrap;
    font-size: clamp(3px, 1.349cqw, 14px); font-weight: 600;
}
.hp-mock-btn svg { width: clamp(3px, 1.445cqw, 15px); height: clamp(3px, 1.445cqw, 15px); }
.hp-mock-btn--plain { background: #FFFFFF; border: 1px solid #E2E6EB; color: #3A3F47; }
.hp-mock-btn--blue { background: #1D6FF2; border: 1px solid #1D6FF2; color: #FFFFFF; }

.hp-mock-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(3px, 1.541cqw, 16px);
}
.hp-mock-stat {
    min-width: 0; background: #FFFFFF; border: 1px solid #EDF0F3;
    border-radius: 12px; padding: clamp(4px, 2.119cqw, 22px);
    box-shadow: 0 1px 3px rgba(22, 24, 29, 0.04);
    display: flex; flex-direction: column; gap: clamp(2px, 1.06cqw, 11px);
}
.hp-mock-chip {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: clamp(8px, 3.854cqw, 40px); height: clamp(8px, 3.854cqw, 40px);
    border-radius: 50%; background: #DCF2E3; color: #1F9D55;
}
.hp-mock-chip svg { width: clamp(4px, 1.927cqw, 20px); height: clamp(4px, 1.927cqw, 20px); }
.hp-mock-stat-label {
    font-size: clamp(3px, 1.252cqw, 13px); color: #5B6472;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-mock-stat-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: clamp(2px, 0.963cqw, 10px);
}
.hp-mock-stat-value {
    font-size: clamp(4px, 1.83cqw, 19px); font-weight: 800; letter-spacing: -0.02em;
}
.hp-mock-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    background: #DCF2E3; color: #1F9D55; border-radius: 999px;
    padding: clamp(1px, 0.385cqw, 4px) clamp(1px, 0.674cqw, 7px);
    font-size: clamp(2px, 1.06cqw, 11px); font-weight: 700;
}
.hp-mock-stat-foot {
    font-size: clamp(2px, 1.06cqw, 11px); color: #8A93A0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Open at the bottom: the card runs off the frame's edge under the fade. */
.hp-mock-table {
    background: #FFFFFF; border: 1px solid #EDF0F3; border-bottom: none;
    border-radius: 12px 12px 0 0; overflow: hidden;
}
.hp-mock-search-row { display: flex; justify-content: flex-end; padding: clamp(4px, 1.734cqw, 18px); }
.hp-mock-search {
    display: flex; align-items: center; gap: clamp(2px, 0.867cqw, 9px);
    width: min(280px, 45%); min-width: 0;
    border: 1px solid #E2E6EB; border-radius: 8px;
    padding: clamp(2px, 0.963cqw, 10px) clamp(3px, 1.252cqw, 13px);
    color: #8A93A0; font-size: clamp(2px, 1.204cqw, 12.5px);
}
.hp-mock-search svg { width: clamp(3px, 1.349cqw, 14px); height: clamp(3px, 1.349cqw, 14px); flex-shrink: 0; }
.hp-mock-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hp-mock-row {
    display: grid; align-items: center;
    grid-template-columns: 2.1fr 1.3fr 1.5fr 1fr 0.8fr 0.8fr 1.2fr 1.4fr;
    gap: clamp(2px, 1.156cqw, 12px);
    padding: clamp(3px, 1.445cqw, 15px) clamp(4px, 1.734cqw, 18px);
    font-size: clamp(2px, 1.204cqw, 12.5px);
}
/* Every cell truncates rather than widening its column and pushing the grid. */
.hp-mock-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Columns 4 to 8 are numeric. */
.hp-mock-row > span:nth-child(n + 4) { text-align: right; }
.hp-mock-row--head { background: #F7F9FB; font-weight: 700; color: #3A3F47; }
.hp-mock-row--data { border-top: 1px solid #F1F4F7; color: #3A3F47; }

/* ── INTEGRATIONS MARQUEE ─────────────────────────────────────────────── */
.hp-logos {
    background: var(--hp-white); padding: 38px 0;
    border-top: 1px solid rgba(18, 18, 18, 0.06);
    border-bottom: 1px solid rgba(18, 18, 18, 0.06);
}
.hp-logos-label {
    margin: 0 0 26px; text-align: center; font-size: 11px; font-weight: 600;
    letter-spacing: 3.5px; text-transform: uppercase; color: var(--hp-faint);
}
.hp-marquee {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hp-marquee-track {
    display: flex; gap: 56px; width: max-content; align-items: center;
    animation: hpScroll 40s linear infinite;
}
.hp-marquee-track img {
    height: 26px; width: auto; filter: grayscale(1); opacity: 0.55;
}

/* ── PLATFORM TABS ────────────────────────────────────────────────────── */
.hp-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hp-tab {
    font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    white-space: nowrap; transition: all 0.25s ease;
    background: var(--hp-white); color: var(--hp-body);
    border: 1px solid rgba(18, 18, 18, 0.12);
}
.hp-tab:hover { border-color: rgba(18, 18, 18, 0.3); color: var(--hp-ink); }
.hp-tab.is-active { background: var(--hp-ink); color: var(--hp-white); border-color: var(--hp-ink); }
.hp-tab-icon { display: none; }

.hp-showcase {
    background: var(--hp-white); border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 16, 17, 0.12);
}
.hp-showcase .hp-browser-bar { padding: 11px 18px; }
.hp-showcase .hp-browser-dots span { width: 8px; height: 8px; background: #E0DAD0; }
.hp-showcase .hp-browser-url { font-size: 11px; background: none; max-width: none; padding: 0; }
.hp-showcase .hp-browser-pad { width: 40px; }
.hp-showcase-img { aspect-ratio: 2 / 1; background: var(--hp-fill-soft); }
.hp-showcase-img img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top;
}

.hp-feat-detail {
    display: flex; gap: 40px; flex-wrap: wrap;
    align-items: flex-start; justify-content: space-between;
}
.hp-feat-copy { flex: 1.6; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 10px; }
.hp-feat-copy h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.hp-feat-copy p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--hp-body); }
.hp-feat-replaces { flex: 1; min-width: min(260px, 100%); display: flex; flex-direction: column; gap: 10px; }
.hp-feat-replaces > span {
    font-size: 10.5px; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; color: var(--hp-faint);
}
.hp-feat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Desktop keeps the original pill. The drawn rule, the X and the resolve cue
   are mobile-only, so above 600px this renders exactly as it did before. */
.hp-rep {
    padding: 6px 14px; background: var(--hp-white);
    border: 1px solid rgba(18, 18, 18, 0.1); border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--hp-body);
}
.hp-rep-label {
    text-decoration: line-through; text-decoration-color: var(--hp-red);
    text-decoration-thickness: 1.5px;
}
.hp-rep-x, .hp-rep-line, .hp-rep-resolve { display: none; }

/* ── PAIN ─────────────────────────────────────────────────────────────── */
.hp-pain { background: var(--hp-white); padding: 88px 28px; }
.hp-pain-inner {
    max-width: 1080px; margin: 0 auto; display: flex; gap: 52px;
    align-items: center; flex-wrap: wrap;
}
.hp-pain-copy { flex: 1; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 18px; }
.hp-pain-copy h2 {
    margin: 0; font-size: clamp(26px, 3.6vw, 38px); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.hp-pain-lead { margin: 0; font-size: 15.5px; color: var(--hp-body); }
.hp-pain-list { display: flex; flex-direction: column; gap: 8px; }
.hp-pain-list span {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: 14px; line-height: 1.55; color: var(--hp-body-strong);
}
.hp-pain-list span span { color: var(--hp-red); font-weight: 700; flex-shrink: 0; }
.hp-pain-close {
    margin: 6px 0 0; font-size: 17px; line-height: 1.6;
    color: var(--hp-ink); text-wrap: pretty;
}
.hp-pain-close strong { font-weight: 700; }
.hp-pain-art { flex: 1.15; min-width: min(340px, 100%); }
.hp-pain-art img { display: block; width: 100%; height: auto; }

/* ── FOUR JOBS ────────────────────────────────────────────────────────── */
.hp-jobs { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 72px; }
.hp-job { display: flex; flex-direction: column; gap: 34px; }
.hp-job-head {
    display: flex; gap: 40px; align-items: flex-end;
    justify-content: space-between; flex-wrap: wrap;
}
.hp-job-label { display: flex; align-items: center; gap: 10px; }
.hp-job-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; background: var(--hp-ink);
}
.hp-job-label span:last-child {
    font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
}
.hp-job-head p {
    margin: 0; max-width: 460px; font-size: 15.5px;
    line-height: 1.65; color: var(--hp-body);
}
.hp-job-media { position: relative; padding-bottom: 48px; }
.hp-job-frame {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(18, 18, 18, 0.08);
}
.hp-job-frame img { display: block; width: 100%; height: auto; opacity: 0.85; }
.hp-job-wash {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(105deg, rgba(var(--hp-page-rgb),0.92) 0%, rgba(var(--hp-page-rgb),0.35) 34%, rgba(var(--hp-page-rgb),0) 60%),
        linear-gradient(180deg, rgba(var(--hp-page-rgb),0) 55%, rgba(var(--hp-page-rgb),0.75) 100%);
}
.hp-job-wash--right {
    background:
        linear-gradient(255deg, rgba(var(--hp-page-rgb),0.92) 0%, rgba(var(--hp-page-rgb),0.35) 34%, rgba(var(--hp-page-rgb),0) 60%),
        linear-gradient(180deg, rgba(var(--hp-page-rgb),0) 55%, rgba(var(--hp-page-rgb),0.75) 100%);
}

/* ── ATTRACT: framed panel replaced by a bleed ────────────────────────────
   Scoped to Attract with its own modifier. .hp-job-frame and .hp-job-wash are
   shared by Convert, Deliver and Operate, and those three still show a bordered
   screenshot, so none of this touches them.

   No border, no radius, no panel: the panel sits on the page itself and is
   dissolved by a mask rather than stopped by an edge. Two mask layers
   intersected, one fading the bottom out and one softening the left entry.
   Padding is left-only by design, so the table runs off the right edge instead
   of being fitted inside a box. */
.hp-job-media--bleed { padding-bottom: 48px; }
.hp-job-canvas {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9.5;
    padding-left: clamp(18px, 2.6vw, 36px);
    container-type: inline-size;
    -webkit-mask-image:
        linear-gradient(180deg, #000 62%, transparent 98%),
        linear-gradient(90deg, transparent 0%, #000 4%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 62%, transparent 98%),
        linear-gradient(90deg, transparent 0%, #000 4%);
    mask-composite: intersect;
}
/* One overlay only. The left wash the framed sections use would sit straight
   over "Campaign" and "Revenue Generated" here, which is the copy the panel
   exists to show. Tracks the page ground rather than a literal, so it stays
   correct if the page tone changes again. */
.hp-job-wash--bleed {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(var(--hp-page-rgb), 0) 55%, rgba(var(--hp-page-rgb), 0.75) 100%);
}
/* Lifted off the floor so the mask's fade reads behind it. */
.hp-job-media--bleed .hp-job-card { bottom: 34px; left: 32px; }

/* The panel itself. Sizes clamp against the container so type and box keep one
   ratio at every width, the same rule the hero panel follows. */
.hp-mk {
    opacity: 0.85;
    display: flex; flex-direction: column; gap: clamp(4px, 1.7cqw, 14px);
    font-size: clamp(4px, 1.2cqw, 12px); color: #16181D;
}
.hp-mk-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(4px, 1.5cqw, 13px); }
.hp-mk-title { font-size: clamp(7px, 2.05cqw, 21px); font-weight: 700; letter-spacing: -0.01em; color: #16181D; }
.hp-mk-actions { display: flex; align-items: center; gap: clamp(2px, 0.85cqw, 8px); }
.hp-mk-btn {
    display: inline-flex; align-items: center; gap: clamp(2px, 0.6cqw, 6px);
    padding: clamp(2px, 0.95cqw, 9px) clamp(4px, 1.5cqw, 15px);
    border-radius: 7px; white-space: nowrap;
    font-size: clamp(4px, 1.2cqw, 12px); font-weight: 600;
}
.hp-mk-btn svg { width: clamp(5px, 1.3cqw, 13px); height: clamp(5px, 1.3cqw, 13px); }
.hp-mk-btn--plain { background: #FFFFFF; border: 1px solid #E2E6EB; color: #3A3F47; }
.hp-mk-btn--blue { background: #1D6FF2; border: 1px solid #1D6FF2; color: #FFFFFF; }

.hp-mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(3px, 1.3cqw, 13px); }
.hp-mk-stat {
    min-width: 0; background: #FFFFFF; border: 1px solid #EDF0F3; border-radius: 10px;
    padding: clamp(4px, 1.6cqw, 16px);
    display: flex; flex-direction: column; gap: clamp(2px, 0.85cqw, 8px);
}
.hp-mk-chip {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: clamp(9px, 3.1cqw, 31px); height: clamp(9px, 3.1cqw, 31px);
    border-radius: 50%; background: #DCF2E3; color: #1F9D55;
}
.hp-mk-chip svg { width: clamp(5px, 1.6cqw, 16px); height: clamp(5px, 1.6cqw, 16px); }
.hp-mk-label {
    font-size: clamp(3px, 1.15cqw, 11.5px); color: #5B6472;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-mk-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(2px, 0.75cqw, 7px); }
.hp-mk-value { font-size: clamp(4px, 1.55cqw, 15.5px); font-weight: 800; letter-spacing: -0.02em; }
.hp-mk-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    background: #DCF2E3; color: #1F9D55; border-radius: 999px;
    padding: clamp(1px, 0.35cqw, 3.5px) clamp(1px, 0.6cqw, 6px);
    font-size: clamp(3px, 0.95cqw, 9.5px); font-weight: 700;
}

.hp-mk-table { background: #FFFFFF; border: 1px solid #EDF0F3; border-bottom: none; border-radius: 10px 10px 0 0; }
.hp-mk-tr {
    display: grid; align-items: center;
    grid-template-columns: 2.1fr 1.3fr 1.5fr 1fr 1.3fr 1.3fr;
    gap: clamp(2px, 1cqw, 10px);
    padding: clamp(2px, 1.35cqw, 13px) clamp(4px, 1.5cqw, 15px);
    font-size: clamp(3px, 1.1cqw, 11px); color: #3A3F47;
}
.hp-mk-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-mk-tr > span:nth-child(n + 4) { text-align: right; }
.hp-mk-tr--head { background: #F7F9FB; font-weight: 700; border-radius: 10px 10px 0 0; }
.hp-mk-tr + .hp-mk-tr { border-top: 1px solid #F1F4F7; }

/* Mirror of the bleed for the two sections whose card sits right: the panel
   crops off the left edge instead, so the composition stays balanced. */
.hp-job-canvas--right {
    padding-left: 0; padding-right: clamp(18px, 2.6vw, 36px);
    -webkit-mask-image:
        linear-gradient(180deg, #000 62%, transparent 98%),
        linear-gradient(270deg, transparent 0%, #000 4%);
    mask-image:
        linear-gradient(180deg, #000 62%, transparent 98%),
        linear-gradient(270deg, transparent 0%, #000 4%);
}
.hp-job-canvas--right > [role="img"] { width: 116%; margin-left: -16%; }
.hp-job-wash--bleed-right {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(var(--hp-page-rgb), 0) 55%, rgba(var(--hp-page-rgb), 0.75) 100%);
}
.hp-job-media--bleed .hp-job-card--right { bottom: 34px; right: 32px; left: auto; }

/* Operate only. Its workflow is the shortest of the four panels and ended at
   about two thirds of a 16/9.5 canvas, so the section carried a wide empty band
   under it. The canvas is trimmed to the content and the card lifted off the
   floor, which closes the gap without touching the other three. */
.hp-jobs > article:nth-of-type(4) .hp-job-canvas { aspect-ratio: 16 / 8.1; }
.hp-jobs > article:nth-of-type(4) .hp-job-card--right { bottom: 58px; }

/* ── CONVERT: opportunities board ─────────────────────────────────────── */
.hp-pb { opacity: 0.85; display: flex; flex-direction: column; gap: clamp(4px, 1.5cqw, 14px); color: #3A3F47; }
.hp-pb-bar { display: flex; align-items: center; gap: clamp(3px, 1.05cqw, 10px); font-size: clamp(3px, 1cqw, 10px); }
.hp-pb-tab, .hp-pb-chip {
    display: inline-flex; align-items: center; gap: clamp(2px, 0.5cqw, 5px);
    padding: clamp(2px, 0.62cqw, 6px) clamp(3px, 0.95cqw, 9px);
    border-radius: 6px; white-space: nowrap; font-weight: 600; color: #5B6472;
}
.hp-pb-tab svg, .hp-pb-chip svg, .hp-pb-search svg { width: clamp(4px, 1.05cqw, 10.5px); height: clamp(4px, 1.05cqw, 10.5px); flex-shrink: 0; }
.hp-pb-tab.is-on { color: #1D6FF2; box-shadow: inset 0 -2px 0 #1D6FF2; border-radius: 0; }
.hp-pb-chip { background: #FFFFFF; border: 1px solid #E2E6EB; }
.hp-pb-chip.is-blue { color: #1D6FF2; border-color: #BFD6FA; background: #F2F7FF; }
.hp-pb-search {
    margin-left: auto; display: inline-flex; align-items: center; min-width: 0;
    gap: clamp(2px, 0.6cqw, 6px); width: min(210px, 26%);
    padding: clamp(2px, 0.62cqw, 6px) clamp(3px, 0.95cqw, 9px);
    background: #FFFFFF; border: 1px solid #E2E6EB; border-radius: 6px; color: #8A93A0;
}
.hp-pb-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pb-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(3px, 1.05cqw, 10px); align-items: start; }
.hp-pb-col { min-width: 0; display: flex; flex-direction: column; gap: clamp(2px, 0.72cqw, 7px); }
.hp-pb-colhead {
    background: #F7F9FB; border: 1px solid #EDF0F3; border-radius: 8px;
    padding: clamp(3px, 1.05cqw, 10px) clamp(3px, 1.05cqw, 10px);
    display: flex; flex-direction: column; gap: clamp(1px, 0.4cqw, 4px); min-width: 0;
}
.hp-pb-colhead b { font-size: clamp(3px, 1.02cqw, 10.2px); font-weight: 700; color: #16181D;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pb-colhead span { font-size: clamp(3px, 0.9cqw, 9px); color: #8A93A0; white-space: nowrap; }
.hp-pb-colhead em { font-style: normal; font-weight: 700; color: #3A3F47; }
.hp-pb-card {
    position: relative; background: #FFFFFF; border: 1px solid #EDF0F3; border-radius: 8px;
    padding: clamp(3px, 1.05cqw, 10px) clamp(3px, 1.05cqw, 10px);
    display: flex; flex-direction: column; gap: clamp(1px, 0.34cqw, 3.4px); min-width: 0;
    box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04);
}
.hp-pb-card b { font-size: clamp(3px, 1cqw, 10px); font-weight: 600; color: #16181D;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pb-card i { font-style: normal; font-size: clamp(3px, 1cqw, 10px); font-weight: 700; color: #16181D; }
.hp-pb-card u { text-decoration: none; font-size: clamp(2px, 0.86cqw, 8.6px); color: #8A93A0; white-space: nowrap; }
.hp-pb-badge {
    align-self: flex-start; border-radius: 4px; font-weight: 700;
    padding: clamp(1px, 0.22cqw, 2.2px) clamp(1px, 0.5cqw, 5px);
    font-size: clamp(2px, 0.8cqw, 8px);
}
.hp-pb-badge.is-won { background: #DCF2E3; color: #1F9D55; }
.hp-pb-badge.is-lost { background: #FDE2E2; color: #B33A3A; }
.hp-pb-av {
    position: absolute; top: clamp(3px, 1.05cqw, 10px); right: clamp(3px, 1.05cqw, 10px);
    display: flex; color: #C3C9D2;
}
.hp-pb-av svg { width: clamp(4px, 1.15cqw, 11.5px); height: clamp(4px, 1.15cqw, 11.5px); }

/* ── DELIVER: course analytics ────────────────────────────────────────── */
.hp-cd { opacity: 0.85; display: flex; flex-direction: column; gap: clamp(4px, 1.5cqw, 14px); color: #3A3F47; }
.hp-cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(3px, 1.3cqw, 13px); }
.hp-cd-card {
    min-width: 0; background: #FFFFFF; border: 1px solid #EDF0F3; border-radius: 10px;
    padding: clamp(4px, 1.6cqw, 16px);
    display: flex; flex-direction: column; gap: clamp(2px, 0.75cqw, 7px);
}
.hp-cd-label { font-size: clamp(3px, 1.05cqw, 10.5px); color: #5B6472;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-cd-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(2px, 0.7cqw, 7px); }
.hp-cd-row b { font-size: clamp(4px, 1.55cqw, 15.5px); font-weight: 800; letter-spacing: -0.02em; color: #16181D; }
.hp-cd-pill {
    background: #DCF2E3; color: #1F9D55; border-radius: 999px; font-weight: 700; white-space: nowrap;
    padding: clamp(1px, 0.32cqw, 3.2px) clamp(1px, 0.58cqw, 5.8px);
    font-size: clamp(2px, 0.9cqw, 9px);
}
.hp-cd-spark { display: block; width: 100%; height: auto; }
.hp-cd-funnel {
    background: #FFFFFF; border: 1px solid #EDF0F3; border-radius: 10px;
    padding: clamp(4px, 1.6cqw, 16px);
    display: flex; flex-direction: column; gap: clamp(3px, 1.1cqw, 11px);
}
.hp-cd-ftitle { font-size: clamp(3px, 1.1cqw, 11px); font-weight: 700; color: #16181D; }
.hp-cd-frow {
    display: grid; align-items: center;
    grid-template-columns: clamp(28px, 9cqw, 90px) clamp(20px, 5cqw, 50px) 1fr clamp(24px, 6cqw, 60px);
    gap: clamp(3px, 1cqw, 10px); font-size: clamp(3px, 0.95cqw, 9.5px);
}
.hp-cd-flab { color: #5B6472; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-cd-fval { font-weight: 700; color: #16181D; text-align: right; }
.hp-cd-ftrack { height: clamp(5px, 1.5cqw, 15px); border-radius: 3px; background: #EDF0F3; overflow: hidden; }
.hp-cd-fbar { display: block; height: 100%; border-radius: 3px; background: #1D6FF2; }
.hp-cd-recent { background: #FFFFFF; border: 1px solid #EDF0F3; border-radius: 10px; overflow: hidden; }
.hp-cd-rrow {
    display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 0.8fr;
    gap: clamp(2px, 1cqw, 10px);
    padding: clamp(3px, 1.25cqw, 12px) clamp(4px, 1.6cqw, 16px);
    font-size: clamp(3px, 1cqw, 10px); color: #3A3F47;
}
.hp-cd-rrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-cd-rrow > span:nth-child(n + 3) { text-align: right; }
.hp-cd-rrow--head { background: #F7F9FB; font-weight: 700; }
.hp-cd-rrow + .hp-cd-rrow { border-top: 1px solid #F1F4F7; }
.hp-cd-fpct {
    justify-self: end; background: #F1F4F7; border-radius: 5px; color: #3A3F47; font-weight: 600;
    padding: clamp(1px, 0.35cqw, 3.5px) clamp(2px, 0.7cqw, 7px);
}

/* ── OPERATE: workflow canvas ─────────────────────────────────────────── */
.hp-wf {
    padding-right: clamp(18px, 2.6vw, 36px);
    margin-right: calc(-1 * clamp(18px, 2.6vw, 36px));
    opacity: 0.85; display: flex; flex-direction: column; align-items: center;
    color: #3A3F47;
    background-image:
        linear-gradient(rgba(18, 24, 40, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 24, 40, 0.045) 1px, transparent 1px);
    background-size: clamp(10px, 3cqw, 30px) clamp(10px, 3cqw, 30px);
}
.hp-wf-top { display: flex; align-items: flex-start; gap: clamp(4px, 1.8cqw, 18px); }
.hp-wf-node {
    display: flex; align-items: center; gap: clamp(3px, 1.1cqw, 11px);
    background: #FFFFFF; border: 1px solid #E7EAEF; border-radius: 8px;
    padding: clamp(4px, 1.25cqw, 12px) clamp(5px, 1.5cqw, 15px);
    box-shadow: 0 1px 3px rgba(22, 24, 29, 0.06); min-width: 0;
}
.hp-wf-node--trigger { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.hp-wf-head {
    display: flex; align-items: center; gap: clamp(3px, 1.1cqw, 11px);
    padding: clamp(4px, 1.25cqw, 12px) clamp(5px, 1.5cqw, 15px);
}
.hp-wf-ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: clamp(9px, 2.9cqw, 29px); height: clamp(9px, 2.9cqw, 29px); border-radius: 7px;
}
.hp-wf-ico svg { width: clamp(5px, 1.6cqw, 16px); height: clamp(5px, 1.6cqw, 16px); }
.hp-wf-ico.is-blue { background: #E7F0FE; color: #1D6FF2; }
.hp-wf-ico.is-violet { background: #ECE9FD; color: #6D4AE0; }
.hp-wf-ico.is-green { background: #DCF2E3; color: #1F9D55; }
.hp-wf-node b { display: block; font-size: clamp(3px, 1.05cqw, 10.5px); font-weight: 600; color: #16181D; white-space: nowrap; }
.hp-wf-head b { color: #1D6FF2; font-weight: 700; }
.hp-wf-head i { display: block; font-style: normal; font-size: clamp(3px, 1.05cqw, 10.5px); color: #3A3F47; white-space: nowrap; }
.hp-wf-cond {
    padding: clamp(4px, 1.25cqw, 12px) clamp(5px, 1.5cqw, 15px);
    border-top: 1px solid #EDF0F3; border-bottom: 1px solid #EDF0F3;
    font-size: clamp(3px, 1.05cqw, 10.5px); color: #3A3F47; white-space: nowrap;
}
.hp-wf-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(3px, 1.05cqw, 10px) clamp(5px, 1.5cqw, 15px);
    font-size: clamp(3px, 1cqw, 10px);
}
.hp-wf-tools { display: flex; gap: clamp(3px, 1cqw, 10px); color: #9AA2AE; }
.hp-wf-tools svg, .hp-wf-stats svg { width: clamp(5px, 1.35cqw, 13.5px); height: clamp(5px, 1.35cqw, 13.5px); }
.hp-wf-stats { display: inline-flex; align-items: center; gap: clamp(2px, 0.6cqw, 6px); color: #1D6FF2; font-weight: 600; }
.hp-wf-add {
    display: inline-flex; align-items: center; gap: clamp(2px, 0.7cqw, 7px);
    align-self: flex-start; white-space: nowrap;
    padding: clamp(6px, 2.1cqw, 21px) clamp(5px, 1.6cqw, 16px);
    border: 1px dashed #A9C6F5; border-radius: 8px; background: #F5F9FF;
    color: #1D6FF2; font-size: clamp(3px, 1.05cqw, 10.5px); font-weight: 600;
}
.hp-wf-add svg { width: clamp(5px, 1.5cqw, 15px); height: clamp(5px, 1.5cqw, 15px); }
.hp-wf-merge { display: block; width: clamp(80px, 24cqw, 240px); height: auto; }
.hp-wf-plus {
    display: flex; align-items: center; justify-content: center; color: #9AA2AE;
    width: clamp(7px, 1.9cqw, 19px); height: clamp(7px, 1.9cqw, 19px);
    border-radius: 50%; border: 1px solid #D4D9E0; background: #FFFFFF;
    margin: clamp(4px, 1.5cqw, 15px) 0;
    position: relative;
}
.hp-wf-plus svg { width: clamp(4px, 1cqw, 10px); height: clamp(4px, 1cqw, 10px); }
/* The line the nodes hang from, drawn behind each connector dot. */
.hp-wf-plus::before {
    content: ""; position: absolute; left: 50%; top: -100%; bottom: -100%;
    width: 1px; margin-left: -0.5px; background: #D4D9E0; z-index: -1;
}

.hp-job-card {
    position: absolute; bottom: 0; left: 32px; width: min(430px, 86%);
    background: var(--hp-white); border: 1px solid rgba(18, 18, 18, 0.09);
    border-radius: 16px; box-shadow: 0 34px 80px rgba(15, 16, 17, 0.24);
    overflow: hidden;
}
.hp-job-card--right { left: auto; right: 32px; }
.hp-job-card-head {
    display: flex; align-items: center; gap: 12px; padding: 15px 22px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.07);
}
.hp-job-badge {
    padding: 4px 11px; background: rgba(201, 168, 76, 0.15); color: var(--hp-gold-deep);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; border-radius: 6px;
}
.hp-job-card-head span:last-child { font-size: 15px; font-weight: 700; }
.hp-job-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.hp-job-foot {
    display: flex; align-items: center; gap: 9px; padding: 14px 22px;
    border-top: 1px solid rgba(18, 18, 18, 0.07);
    font-size: 14px; font-weight: 600; color: var(--hp-green); background: var(--hp-white);
}
.hp-job-foot span { color: var(--hp-green); font-weight: 700; }

/* Ticker-driven rows */
.hp-step { opacity: 0; transform: translateY(9px); transition: opacity 0.3s ease; }
.hp-step.is-on {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s var(--hp-ease);
}

.hp-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.hp-kv span:first-child { color: var(--hp-faint); }
.hp-kv span:last-child { font-weight: 600; }

.hp-sms { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.hp-bubble {
    max-width: 85%; padding: 10px 15px; font-size: 14px; line-height: 1.5;
}
.hp-bubble--them {
    align-self: flex-start; background: var(--hp-fill);
    border-radius: 14px 14px 14px 4px; color: var(--hp-body-strong);
}
.hp-bubble--you {
    align-self: flex-end; background: var(--hp-ink); color: var(--hp-white);
    border-radius: 14px 14px 4px 14px;
}

.hp-metric {
    display: grid; grid-template-columns: 90px 1fr 52px;
    align-items: center; gap: 12px; font-size: 13.5px;
}
.hp-metric > span:first-child { color: var(--hp-faint); }
.hp-metric-track {
    height: 7px; background: var(--hp-fill); border-radius: 4px;
    overflow: hidden; display: block;
}
.hp-metric-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #D9C2A3, #C9A84C);
    transition: width 0.9s var(--hp-ease);
}
.hp-metric-bar.is-on { width: var(--hp-bar); }
.hp-metric > span:last-child { font-weight: 700; text-align: right; }

.hp-checklist {
    padding: 16px 22px; display: flex; flex-direction: column; gap: 12px;
    font-size: 14px; color: var(--hp-body-strong);
}
.hp-checklist > div { display: flex; gap: 12px; align-items: center; }
.hp-checklist span { color: var(--hp-green); font-weight: 700; }
.hp-job-note {
    padding: 14px 22px; border-top: 1px solid rgba(18, 18, 18, 0.07);
    font-size: 13.5px; color: var(--hp-muted); background: var(--hp-white);
}

/* ── ALMA (dark) ──────────────────────────────────────────────────────── */
.hp-alma { background: var(--hp-ink); padding: 110px 28px; }
.hp-alma-inner {
    max-width: 1080px; margin: 0 auto; display: flex; gap: 56px;
    align-items: center; flex-wrap: wrap;
}
.hp-alma-copy { flex: 1; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 18px; }
.hp-alma-copy h2 {
    margin: 0; max-width: 480px; font-size: clamp(28px, 4vw, 42px);
    font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; color: var(--hp-on-dark);
}
.hp-alma-copy h2 strong { font-weight: 800; }
.hp-alma-copy p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--hp-on-dark-mid); }
.hp-alma-copy .hp-alma-small { font-size: 15px; }
.hp-alma-disclaimer { font-size: 11.5px !important; line-height: 1.6; color: var(--hp-on-dark-dim) !important; }
.hp-alma-chips { display: flex; flex-direction: column; gap: 8px; }
.hp-alma-chips span {
    padding: 10px 16px; background: var(--hp-panel);
    border: 1px solid rgba(217, 194, 163, 0.14); border-radius: 10px;
    font-size: 14px; color: var(--hp-on-dark); align-self: flex-start;
}
.hp-alma-video { flex: 1.2; min-width: min(340px, 100%); }
.hp-alma-frame {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 16 / 10; width: 100%;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(217, 194, 163, 0.18);
}
.hp-alma-frame iframe { border: 0; width: 100%; height: 100%; display: block; }
.hp-alma-shield { position: absolute; inset: 0; z-index: 2; cursor: default; }

/* ── BUILT FOR YOU ────────────────────────────────────────────────────── */
.hp-bfy { padding: 104px 0 96px; }
.hp-bfy-head {
    max-width: 1080px; margin: 0 auto 40px; padding: 0 28px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.hp-bfy-head > div:first-child {
    display: flex; flex-direction: column; gap: 12px; max-width: 680px;
}
.hp-bfy-head h2 {
    margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 300;
    letter-spacing: -0.02em; line-height: 1.18;
}
.hp-bfy-head p { margin: 0; font-size: 16px; color: var(--hp-body); }
.hp-bfy-rail {
    display: flex; gap: 18px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding: 8px 28px 24px;
    scrollbar-width: none;
}
.hp-bfy-rail::-webkit-scrollbar { display: none; }
.hp-bfy-card {
    flex: 0 0 310px; scroll-snap-align: start; background: var(--hp-white);
    border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 18px;
    overflow: hidden; box-shadow: 0 2px 16px rgba(15, 16, 17, 0.07);
    display: flex; flex-direction: column;
}
.hp-bfy-card > img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover;
}
.hp-bfy-body {
    padding: 20px 22px 24px; display: flex; flex-direction: column;
    gap: 10px; flex: 1;
}
.hp-bfy-eyebrow {
    font-size: 10.5px; font-weight: 600; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--hp-gold-deep);
}
.hp-bfy-body h3 {
    margin: 0; font-size: 18px; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.3;
}
.hp-bfy-line { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--hp-body-strong); }
.hp-bullets { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hp-bullets span {
    font-size: 12.5px; color: var(--hp-body); display: flex; gap: 8px;
}
.hp-bullets span span { color: var(--hp-gold-warm); }
/* Lucide Diamond replaces the U+25C6 glyph the prototype used as a bullet
   marker: Geist has no such codepoint, so it fell back to a system font and
   rendered differently on every device. */
.hp-dia { width: 9px; height: 9px; flex-shrink: 0; display: block; }
.hp-bullets span span { display: flex; align-items: center; height: 1.35em; }

/* The limits grid carries a dedicated icon per capability, recovered from the
   pre-redesign homepage. Fable's prototype had flattened all twelve to one
   repeated diamond. */
.hp-limit-mark {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px; margin-top: 1px;
    background: rgba(201, 168, 76, 0.12); color: var(--hp-ink);
}
.hp-limit-mark svg { width: 15px; height: 15px; display: block; }

/* ── STACK CALCULATOR ─────────────────────────────────────────────────── */
.hp-calc-wrap { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.hp-calc-head p { max-width: 560px; font-size: 16px; }
.hp-calc-grid { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.hp-calc-list {
    flex: 1.6; min-width: min(300px, 100%); border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 16px; overflow: hidden; background: var(--hp-white);
}
.hp-calc-row {
    display: grid; grid-template-columns: 1.2fr 1.5fr 84px; gap: 14px;
    align-items: center; padding: 11px 18px;
    border-top: 1px solid rgba(18, 18, 18, 0.06);
}
.hp-calc-live + .hp-calc-row { border-top: none; }
.hp-calc-name { font-size: 13.5px; font-weight: 600; }
.hp-calc-live, .hp-calc-icon, .hp-calc-chosen, .hp-calc-chev, .hp-calc-more { display: none; }
.hp-calc-field { position: relative; }
.hp-calc-field select {
    width: 100%; appearance: none; -webkit-appearance: none;
    padding: 8px 30px 8px 12px; background: var(--hp-fill-soft);
    border: 1px solid rgba(18, 18, 18, 0.12); border-radius: 9px;
    font-size: 12.5px; color: var(--hp-ink); cursor: pointer; outline: none;
}
.hp-calc-field select:focus-visible { border-color: var(--hp-gold-warm); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); }
.hp-calc-caret {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    pointer-events: none; font-size: 9px; color: var(--hp-faint);
}
.hp-calc-price { text-align: right; font-size: 13.5px; color: var(--hp-red); font-weight: 700; }
.hp-calc-price.is-off { color: #767676; font-weight: 400; }
.hp-calc-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px; border-top: 1px solid rgba(201, 168, 76, 0.4);
    background: var(--hp-fill-soft);
}
.hp-calc-reset {
    background: none; border: none; padding: 0; font-family: 'Geist', sans-serif;
    font-size: 12px; color: var(--hp-muted); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.hp-calc-reset:hover { color: var(--hp-ink); }
.hp-calc-total { font-size: 13.5px; color: var(--hp-body); }
.hp-calc-total strong { color: var(--hp-red); font-size: 16px; }

.hp-calc-summary {
    flex: 1; min-width: min(300px, 100%); position: sticky; top: 88px;
    background: var(--hp-ink); border-radius: 18px; padding: 30px 30px 26px;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 30px 80px rgba(15, 16, 17, 0.28);
}
.hp-calc-summary-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; color: var(--hp-on-dark-mid);
}
.hp-calc-figure { display: flex; flex-direction: column; gap: 4px; }
.hp-calc-save {
    font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    background: linear-gradient(135deg, #E8D5B5, #C9A84C);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hp-calc-save .hp-calc-per { font-size: 20px; font-weight: 600; }
.hp-calc-year { font-size: 14px; color: var(--hp-on-dark-mid); }
.hp-calc-year strong { color: var(--hp-on-dark); }
.hp-calc-compare {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 0;
    border-top: 1px solid rgba(217, 194, 163, 0.14);
    border-bottom: 1px solid rgba(217, 194, 163, 0.14);
}
.hp-calc-compare > div { display: flex; justify-content: space-between; font-size: 13.5px; }
.hp-calc-compare span:first-child { color: var(--hp-on-dark-mid); }
.hp-calc-compare span:last-child { font-weight: 700; color: var(--hp-on-dark); }
.hp-calc-compare .hp-calc-ours { color: var(--hp-gold); }
.hp-calc-small { text-align: center; font-size: 11.5px; color: var(--hp-on-dark-dim); }
.hp-disclaimer {
    margin: 0; text-align: center; font-size: 11px; line-height: 1.6;
    color: var(--hp-faint); max-width: 640px; align-self: center;
}

/* ── BUILD WITHOUT LIMITS ─────────────────────────────────────────────── */
.hp-limits-head h2 {
    margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em;
}
.hp-limits-head p:nth-of-type(1) { margin: 0; font-size: 16px; color: var(--hp-body); }
.hp-limits-head p:nth-of-type(2) { margin: 0; font-size: 14px; color: var(--hp-muted); }
.hp-limits-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.hp-limit {
    display: flex; gap: 12px; align-items: flex-start; padding: 18px;
    background: var(--hp-white); border: 1px solid rgba(18, 18, 18, 0.08);
    border-radius: 14px;
}
.hp-limit b { display: block; font-size: 14px; font-weight: 600; }
.hp-limit i {
    display: block; font-size: 12.5px; color: var(--hp-muted);
    margin-top: 2px; font-style: normal;
}
.hp-details {
    max-width: 680px; margin: 0 auto; width: 100%; background: var(--hp-white);
    border: 1px solid rgba(18, 18, 18, 0.1); border-radius: 14px; padding: 0 22px;
}
.hp-details summary {
    cursor: pointer; padding: 16px 0; font-size: 14px; font-weight: 600;
    color: var(--hp-body-strong); list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.hp-details summary span { color: var(--hp-gold-warm); }
.hp-details-body {
    padding: 0 0 20px; display: flex; flex-direction: column; gap: 10px;
    font-size: 14px; line-height: 1.7; color: var(--hp-body);
}
.hp-details-body p { margin: 0; }
.hp-details-body p:last-child { font-weight: 600; color: var(--hp-body-strong); }
.hp-textlink {
    align-self: center; font-size: 14px; font-weight: 700; color: var(--hp-gold-deep);
    border-bottom: 1px solid rgba(201, 168, 76, 0.5); padding-bottom: 2px;
}
.hp-textlink:hover { color: var(--hp-ink); }

/* ── CREATOR COVEN ────────────────────────────────────────────────────── */
.hp-coven-head h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 300; letter-spacing: -0.02em; }
.hp-coven-head h2 strong { font-weight: 800; }
.hp-coven-head p { max-width: 640px; font-size: 16px; }
.hp-coven-grid { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hp-coven-media { flex: 1.25; min-width: min(300px, 100%); position: relative; padding-bottom: 40px; }
.hp-coven-frame {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(18, 18, 18, 0.08);
    aspect-ratio: 16 / 9; background: var(--hp-page);
}
/* contain, not cover: product shots must not be cropped by their frame. */
.hp-coven-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Four stacked frames, crossfaded. Absolute so the box never reflows between
   images; the first stays in flow only via the frame's own aspect-ratio. */
.hp-coven-shot {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 0.7s var(--hp-ease);
}
.hp-coven-shot.is-on { opacity: 1; }
.hp-coven-fade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--hp-page-rgb),0) 60%, rgba(var(--hp-page-rgb),0.6) 100%);
}
.hp-coven-badge {
    position: absolute; bottom: 0; left: 28px; display: flex; align-items: center;
    gap: 16px; background: var(--hp-ink); border-radius: 14px; padding: 16px 24px;
    box-shadow: 0 24px 60px rgba(15, 16, 17, 0.28);
}
.hp-coven-zero {
    font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
    background: linear-gradient(135deg, #E8D5B5, #C9A84C);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hp-coven-badge > span:last-child { font-size: 13px; line-height: 1.5; color: var(--hp-on-dark); }
.hp-coven-badge > span:last-child span { color: var(--hp-on-dark-mid); }
.hp-coven-list { flex: 1; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 8px; }
.hp-coven-item {
    display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
    background: var(--hp-white); border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 14px;
}
.hp-coven-icon {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; background: var(--hp-ink);
}
/* Marks which row the frame is currently showing. */
.hp-coven-item.is-current {
    background: var(--hp-white);
    border-color: rgba(201, 168, 76, 0.65);
    box-shadow: 0 2px 14px rgba(15, 16, 17, 0.07);
}
.hp-coven-item b { display: block; font-size: 15px; font-weight: 700; }
.hp-coven-item i {
    display: block; font-size: 13px; line-height: 1.6;
    color: var(--hp-body); margin-top: 3px; font-style: normal;
}
.hp-coven-note {
    margin: 0; text-align: center; font-size: 13px; line-height: 1.7;
    color: var(--hp-muted); max-width: 720px; align-self: center; font-style: italic;
}

/* ── TESTIMONIALS ─────────────────────────────────────────────────────── */
.hp-tl { padding: 104px 0; }
.hp-tl-head {
    max-width: 1040px; margin: 0 auto 40px; padding: 0 28px; text-align: center;
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.hp-tl-head h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 300; letter-spacing: -0.02em; }
.hp-tl-head h2 strong { font-weight: 800; }
.hp-tl-eyebrow { display: flex; align-items: center; gap: 8px; }
.hp-tl-eyebrow span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--hp-gold-warm); }
.hp-tl-eyebrow span:last-child {
    font-size: 11px; font-weight: 600; letter-spacing: 4px;
    text-transform: uppercase; color: var(--hp-muted);
}
.hp-tl-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hp-tl-track {
    display: flex; gap: 20px; width: max-content; padding: 8px 0;
    animation: hpScroll 50s linear infinite;
}
.hp-tl-card {
    width: min(360px, 82vw); padding: 26px 28px; background: var(--hp-white);
    border: 1px solid rgba(18, 18, 18, 0.09); border-radius: 16px;
    box-shadow: 0 2px 16px rgba(15, 16, 17, 0.06);
    display: flex; flex-direction: column; gap: 14px;
}
.hp-tl-stars { color: var(--hp-gold-warm); font-size: 14px; letter-spacing: 2px; }
.hp-tl-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--hp-body-strong); }
.hp-tl-foot {
    display: flex; justify-content: space-between; align-items: center; margin-top: auto;
}
.hp-tl-name { font-size: 13px; font-weight: 600; }
.hp-tl-chip {
    display: flex; align-items: center; gap: 6px; padding: 4px 11px;
    background: var(--hp-cream); border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--hp-body);
}
.hp-tl-chip span { width: 6px; height: 6px; border-radius: 50%; }

/* ── MOBILE APP ───────────────────────────────────────────────────────── */
.hp-app { background: var(--hp-white); padding: 96px 28px; }
.hp-app-inner {
    max-width: 920px; margin: 0 auto; display: flex; flex-direction: column;
    gap: 32px; align-items: center; text-align: center;
}
.hp-app-head { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.hp-app-head h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.hp-app-head p { margin: 0; font-size: 16px; color: var(--hp-body); }
.hp-app-inner > img { display: block; width: 100%; max-width: 760px; height: auto; }
.hp-app-feats {
    display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;
    font-size: 14px; color: var(--hp-body);
}
.hp-app-feats strong { color: var(--hp-ink); }

/* ── API + MCP ────────────────────────────────────────────────────────────
   One execution surface rather than a stack of boxes. The story runs down it in
   four bands separated by hairlines: which agent, what you asked, MONDAi taking
   it over the API, and what actually happened. Nothing is nested in its own
   card, so the request stays the largest thing on screen and the result is the
   only other emphasis. */
.hp-mcp { background: var(--hp-ink); color: var(--hp-on-dark); padding: 112px 28px; }
.hp-mcp-inner {
    max-width: 880px; margin: 0 auto;
    display: flex; flex-direction: column; gap: clamp(34px, 4vw, 52px);
}
.hp-mcp-head {
    display: flex; flex-direction: column; gap: 16px;
    align-items: center; text-align: center;
}
.hp-mcp-head h2 {
    margin: 0; font-size: clamp(30px, 4.2vw, 44px); font-weight: 800;
    letter-spacing: -0.028em; line-height: 1.1; color: var(--hp-on-dark);
}
.hp-mcp-head p {
    margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.65;
    color: var(--hp-on-dark-mid); text-wrap: pretty;
}

/* The surface. A single hairline and one soft lift, no glow. */
.hp-exec {
    --exec-pad: clamp(18px, 2.6vw, 32px);
    --exec-line: rgba(255, 255, 255, 0.075);
    text-align: left; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 70px rgba(0, 0, 0, 0.42);
}

/* Which agent. A real segmented control, not a row of pills. */
.hp-exec-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 14px var(--exec-pad);
}
.hp-exec-agents {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.hp-exec-agent {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 8px; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--hp-on-dark-mid);
}
.hp-exec-agent.is-on {
    background: rgba(255, 255, 255, 0.09); color: var(--hp-on-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hp-exec-mark { display: flex; flex-shrink: 0; }
.hp-exec-mark svg { width: 15px; height: 15px; display: block; }
/* The Claude mark keeps its own colour; the fallback agent takes the row's. */
.hp-exec-agent:first-child .hp-exec-mark { color: #D97757; }
.hp-exec-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; letter-spacing: 0.04em; color: var(--hp-on-dark-dim);
}
.hp-exec-status i {
    width: 6px; height: 6px; border-radius: 50%; background: #4c9c6b;
    box-shadow: 0 0 0 3px rgba(76, 156, 107, 0.16);
}

/* What you asked. The largest thing here, and deliberately unboxed. */
.hp-exec-ask {
    display: flex; flex-direction: column; gap: 14px;
    padding: clamp(22px, 3vw, 34px) var(--exec-pad) clamp(26px, 3.4vw, 38px);
    border-top: 1px solid var(--exec-line);
}
.hp-exec-cap {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--hp-on-dark-dim);
}
/* Dots and message share one cell, so the surface holds the message's height
   from the start and nothing reflows when the request lands. */
.hp-exec-msg { display: grid; align-items: start; justify-items: start; }
.hp-exec-msg > * { grid-area: 1 / 1; }
.hp-exec-ask p {
    margin: 0; max-width: 42ch;
    padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: clamp(17px, 2vw, 23px); font-weight: 400; line-height: 1.45;
    letter-spacing: -0.015em; color: var(--hp-on-dark); text-wrap: pretty;
}
.hp-exec-dots {
    display: none; align-items: center; gap: 6px;
    padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.hp-exec-dots i {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}
/* A quiet breath, not a bounce. Runs only while composing. */
.hp-exec.is-composing:not(.is-asked) .hp-exec-dots { display: inline-flex; }
.hp-exec.is-composing:not(.is-asked) .hp-exec-dots i {
    animation: hp-exec-dot 1.2s ease-in-out infinite;
}
.hp-exec.is-composing:not(.is-asked) .hp-exec-dots i:nth-child(2) { animation-delay: 0.16s; }
.hp-exec.is-composing:not(.is-asked) .hp-exec-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes hp-exec-dot { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }

/* ── The run ──────────────────────────────────────────────────────────────
   One status rail that carries the whole run: a spinner while MCP works, a
   check when it lands, and an elapsed clock that is genuinely counting the
   time on the page rather than printing a number. */
.hp-exec-rail {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px var(--exec-pad);
    border-top: 1px solid var(--exec-line);
    border-bottom: 1px solid var(--exec-line);
    background: rgba(255, 255, 255, 0.022);
}
.hp-exec-state { position: relative; display: grid; }
.hp-exec-state > span {
    grid-area: 1 / 1; font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: opacity 0.4s var(--hp-ease);
}
.hp-exec-state-idle { color: var(--hp-on-dark-dim); }
.hp-exec-state-run,
.hp-exec-state-done { color: var(--hp-on-dark); opacity: 0; }
.hp-exec.is-running .hp-exec-state-idle { opacity: 0; }
.hp-exec.is-running:not(.is-done) .hp-exec-state-run { opacity: 1; }
.hp-exec.is-done .hp-exec-state-done { opacity: 1; }
.hp-exec-node {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 700; color: var(--hp-on-dark-mid);
}
.hp-exec-node img { width: 16px; height: 16px; display: block; }
.hp-exec-arrow { display: none; }
.hp-exec-timer {
    margin-left: auto; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--hp-on-dark-dim);
}

/* Spinner and check share one slot, so the row never reflows as it resolves. */
.hp-exec-tick {
    position: relative; display: grid; place-items: center; flex-shrink: 0;
    width: 20px; height: 20px;
}
.hp-exec-tick--lg { width: 22px; height: 22px; }
.hp-exec-spin, .hp-exec-check { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.hp-exec-spin {
    width: 100%; height: 100%; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.6);
}
.hp-exec-check {
    display: grid; place-items: center; width: 100%; height: 100%;
    border-radius: 50%; opacity: 0;
    background: rgba(76, 156, 107, 0.18); color: #63bd8b;
}
.hp-exec-check svg { width: 11px; height: 11px; }
/* Only spins while the run is live, so nothing loops once the page settles. */
.hp-exec.is-running .hp-exec-spin { animation: hp-exec-spin 0.85s linear infinite; }
.hp-exec.is-running [data-exec-step].is-done .hp-exec-spin,
.hp-exec.is-done .hp-exec-rail .hp-exec-spin { animation: none; opacity: 0; }
[data-exec-step].is-done .hp-exec-check,
.hp-exec.is-done .hp-exec-rail .hp-exec-check { opacity: 1; }
@keyframes hp-exec-spin { to { transform: rotate(360deg); } }

/* What happened. One trace, not three cards. Rows sit pending until their step
   lands, so the sequence reads as work rather than as a reveal. */
.hp-exec-trace { list-style: none; margin: 0; padding: 0; }
.hp-exec-trace li {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 14px;
    padding: 14px var(--exec-pad);
    font-size: 14.5px; line-height: 1.5; color: var(--hp-on-dark-dim);
    transition: color 0.45s var(--hp-ease);
}
.hp-exec-trace li + li { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.hp-exec-trace li.is-done { color: var(--hp-on-dark-mid); }
.hp-exec-act b { font-weight: 600; color: var(--hp-on-dark-dim); transition: color 0.45s var(--hp-ease); }
.hp-exec-trace li.is-done .hp-exec-act b { color: var(--hp-on-dark); }
.hp-exec-tool {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; letter-spacing: -0.01em; color: var(--hp-on-dark-dim);
    white-space: nowrap; opacity: 0.55; transition: opacity 0.45s var(--hp-ease);
}
.hp-exec-trace li.is-done .hp-exec-tool { opacity: 1; }

.hp-exec-result {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: clamp(16px, 2vw, 22px) var(--exec-pad);
    border-top: 1px solid var(--exec-line);
    background: rgba(255, 255, 255, 0.022);
}
.hp-exec-result b {
    font-size: clamp(16px, 1.9vw, 21px); font-weight: 800;
    letter-spacing: -0.02em; color: var(--hp-on-dark);
}
/* The credibility marker. A quiet pill, not a scoreboard. */
.hp-exec-real {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px 5px 9px; border-radius: 999px;
    border: 1px solid rgba(76, 156, 107, 0.32);
    background: rgba(76, 156, 107, 0.1);
    font-size: 11.5px; color: var(--hp-on-dark-mid);
    font-variant-numeric: tabular-nums;
}
.hp-exec-real i {
    width: 6px; height: 6px; border-radius: 50%; background: #63bd8b;
    box-shadow: 0 0 0 3px rgba(76, 156, 107, 0.16);
}
.hp-exec-real em {
    font-style: normal; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #7fd0a2;
}

/* Armed by JS, so no script and no reduced-motion preference both land on the
   finished state rather than an empty surface. */
.hp-exec.is-armed .hp-exec-result { opacity: 0; transform: translateY(10px); }
.hp-exec.is-armed .hp-exec-ask p { opacity: 0; transform: translateY(8px); }
.hp-exec.is-armed.is-asked .hp-exec-ask p {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--hp-ease), transform 0.5s var(--hp-ease);
}
/* Dormant until the run starts, then the trace comes up to weight. */
.hp-exec.is-armed .hp-exec-rail,
.hp-exec.is-armed .hp-exec-trace li { opacity: 0.5; transition: opacity 0.6s var(--hp-ease); }
.hp-exec.is-armed.is-running .hp-exec-rail,
.hp-exec.is-armed.is-running .hp-exec-trace li { opacity: 1; }
.hp-exec.is-armed.is-running .hp-exec-trace li:nth-child(1) { transition-delay: 0.06s; }
.hp-exec.is-armed.is-running .hp-exec-trace li:nth-child(2) { transition-delay: 0.14s; }
.hp-exec.is-armed.is-running .hp-exec-trace li:nth-child(3) { transition-delay: 0.22s; }
.hp-exec.is-armed.is-done .hp-exec-result {
    opacity: 1; transform: none;
    transition: opacity 0.55s var(--hp-ease), transform 0.55s var(--hp-ease);
}

.hp-mcp-foot {
    margin: 0; text-align: center; max-width: 46ch; align-self: center;
    font-size: 14px; line-height: 1.6; color: var(--hp-on-dark-dim);
    text-wrap: pretty;
}

/* ── PRICING ──────────────────────────────────────────────────────────── */
.hp-pricing-wrap { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.hp-pricing-head h2 { line-height: 1.2; }
.hp-pricing-head p { max-width: 620px; font-size: 16px; }
.hp-pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 22px; align-items: stretch;
}
.hp-plan {
    background: var(--hp-white); border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 20px; padding: 36px 32px; display: flex; flex-direction: column;
    gap: 22px; box-shadow: 0 2px 16px rgba(15, 16, 17, 0.07);
}
.hp-plan-head { display: flex; flex-direction: column; gap: 8px; }
.hp-plan-kicker {
    font-size: 10.5px; font-weight: 600; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--hp-faint);
}
.hp-plan-name { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; }
.hp-plan-blurb { font-size: 14px; line-height: 1.6; color: var(--hp-body); }
.hp-plan-price { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; }
.hp-plan-price span { font-size: 16px; font-weight: 500; color: var(--hp-faint); }
.hp-plan-list {
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13.5px; line-height: 1.55; color: var(--hp-body-strong);
}
.hp-plan-list > span { display: flex; gap: 10px; }
.hp-plan-list > span > span:first-child { color: var(--hp-green); font-weight: 700; }
.hp-plan-small { text-align: center; font-size: 11.5px; color: var(--hp-faint); }
.hp-guarantee {
    text-align: center; padding-top: 14px; border-top: 1px solid rgba(18, 18, 18, 0.07);
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.hp-guarantee b { font-size: 13px; font-weight: 700; }
.hp-guarantee i { font-size: 11.5px; line-height: 1.6; color: var(--hp-muted); font-style: normal; }
.hp-guarantee a { font-size: 10.5px; color: var(--hp-gold-deep); border-bottom: 1px solid rgba(201, 168, 76, 0.4); }

.hp-plan--dark {
    position: relative; background: var(--hp-ink);
    border: 1px solid rgba(217, 194, 163, 0.3);
    box-shadow: 0 30px 80px rgba(15, 16, 17, 0.25);
}
.hp-ribbon {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    padding: 6px 18px; background: var(--hp-gold-grad); color: var(--hp-ink);
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; border-radius: 999px; white-space: nowrap;
}
.hp-plan--dark .hp-plan-kicker { color: var(--hp-on-dark-mid); }
.hp-plan--dark .hp-plan-name { color: var(--hp-on-dark); }
.hp-plan--dark .hp-plan-blurb { color: var(--hp-on-dark-mid); }
.hp-plan--dark .hp-plan-price { color: var(--hp-on-dark); }
.hp-plan--dark .hp-plan-price span { color: var(--hp-on-dark-mid); }
.hp-plan-note { font-size: 13px; color: var(--hp-gold); margin-top: 4px; }
.hp-plan--dark .hp-plan-list { color: var(--hp-on-dark); }
.hp-plan--dark .hp-plan-list > span > span:first-child { color: var(--hp-gold); }
.hp-plan-listhead {
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: var(--hp-on-dark-mid);
}
.hp-plan--dark .hp-plan-small { color: var(--hp-on-dark-mid); }
.hp-plan-terms { text-align: center; font-size: 10.5px; line-height: 1.6; color: var(--hp-on-dark-dim); }
.hp-pricing-link {
    align-self: center; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--hp-gold-deep);
}
.hp-pricing-link:hover { color: var(--hp-ink); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.hp-faq-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.hp-faq-wrap > h2 {
    margin: 0; text-align: center; font-size: clamp(28px, 4vw, 40px);
    font-weight: 800; letter-spacing: -0.02em;
}
.hp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.hp-faq-item {
    border: 1px solid rgba(18, 18, 18, 0.1); border-radius: 14px;
    background: var(--hp-white); overflow: hidden;
}
.hp-faq-q {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    width: 100%; padding: 17px 20px; background: none; border: none;
    font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--hp-ink); text-align: left; cursor: pointer;
}
.hp-faq-icon {
    flex-shrink: 0; font-size: 19px; font-weight: 300; color: var(--hp-gold-warm);
    transform: rotate(0deg); transition: transform 0.3s ease;
}
.hp-faq-q[aria-expanded="true"] .hp-faq-icon { transform: rotate(45deg); }
.hp-faq-a {
    overflow: hidden; max-height: 0; visibility: hidden;
    transition: max-height 0.45s var(--hp-ease), visibility 0s linear 0.45s;
}
.hp-faq-a.is-open {
    visibility: visible;
    transition: max-height 0.45s var(--hp-ease), visibility 0s;
}
.hp-faq-a > div { padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: var(--hp-body); }

/* ── FINAL CTA ────────────────────────────────────────────────────────── */
.hp-final { background: var(--hp-ink); padding: 120px 28px; }
.hp-final-inner {
    max-width: 760px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; gap: 22px; align-items: center;
}
.hp-final-inner h2 {
    margin: 0; font-size: clamp(30px, 4.6vw, 48px); font-weight: 300;
    letter-spacing: -0.02em; line-height: 1.2; color: var(--hp-on-dark);
    text-wrap: balance;
}
.hp-final-inner p {
    margin: 0; font-size: 16.5px; line-height: 1.75;
    color: var(--hp-on-dark-mid); text-wrap: pretty;
}
.hp-final-ctas {
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
.hp-final-small { margin: 0; font-size: 12.5px; color: var(--hp-on-dark-dim); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.hp-footer {
    background: var(--hp-ink); border-top: 1px solid rgba(217, 194, 163, 0.12);
    padding: 56px 28px 40px;
}
.hp-footer-inner {
    max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column;
    gap: 32px; align-items: center;
}
.hp-footer-brand { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hp-footer-brand img { height: 33px; width: auto; display: block; }
.hp-footer-brand span { font-size: 13px; color: var(--hp-on-dark-mid); }
.hp-footer-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hp-footer-nav a {
    padding: 8px 18px; border: 1px solid rgba(217, 194, 163, 0.18);
    border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--hp-on-dark-mid);
}
.hp-footer-nav a:hover { color: var(--hp-on-dark); }
.hp-footer-legal {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
    align-items: center; font-size: 12px; color: var(--hp-on-dark-dim);
}
.hp-footer-legal > span:last-child { display: flex; gap: 12px; }
.hp-footer-legal a { color: var(--hp-on-dark-mid); }
.hp-footer-legal a:hover { color: var(--hp-on-dark); }

/* ── STICKY CTA ───────────────────────────────────────────────────────── */
.hp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    box-shadow: 0 -10px 40px rgba(15, 16, 17, 0.08);
    transform: translateY(110%);
    transition: transform 0.5s var(--hp-ease);
}
.hp-sticky.is-up { transform: translateY(0); }
.hp-sticky-inner {
    max-width: 1040px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 20px; padding: 12px 24px;
}
.hp-sticky-msg { font-size: 14px; color: var(--hp-body-strong); }
.hp-sticky-msg strong { color: var(--hp-ink); }
.hp-sticky-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; padding: 11px 26px;
    background: var(--hp-ink); color: var(--hp-white);
    font-size: 13px; font-weight: 700; border-radius: 12px;
}
.hp-sticky-cta:hover { color: var(--hp-white); }

/* ── FOCUS ────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--hp-gold-warm); outline-offset: 3px; }
.hp-section--dark :focus-visible,
.hp-alma :focus-visible,
.hp-mcp :focus-visible,
.hp-final :focus-visible,
.hp-footer :focus-visible { outline-color: var(--hp-gold); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .hp-nav-links,
    .hp-nav-login { display: none; }        /* Login moves into the menu */
    .hp-nav-burger { display: flex; }
    .hp-cta-long { display: none; }
    .hp-cta-short { display: inline; }
    .hp-job-media { padding-bottom: 0; }
    .hp-job-card { position: static; width: 100%; margin-top: 14px; }
    .hp-job-card--right { right: auto; }
    .hp-coven-media { padding-bottom: 0; }
    .hp-coven-badge { position: static; margin-top: 14px; }
    .hp-sticky-msg { display: none; }
    .hp-sticky-inner { justify-content: center; }
}

/* The three-column row squeezes the tool <select> below a readable width
   once the panel narrows, so the category name moves to its own line. */
@media (max-width: 960px) {
    .hp-calc-row { grid-template-columns: 1fr 84px; row-gap: 8px; }
    .hp-calc-name { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .hp-hero { padding: 128px 20px 56px; }
    .hp-section { padding: 76px 20px; }
    .hp-pain,
    .hp-app,
    .hp-mcp,
    .hp-alma { padding: 76px 20px; }

    /* Phone: the control row breaks to its own line and the tool name drops
       under its action rather than squeezing the sentence into a column. */
    .hp-exec-bar { gap: 12px; }
    .hp-exec-agents { width: 100%; }
    .hp-exec-agent { flex: 1; justify-content: center; padding: 8px 10px; }
    .hp-exec-trace li {
        grid-template-columns: auto 1fr; gap: 4px 12px; padding: 13px var(--exec-pad);
        font-size: 14px;
    }
    .hp-exec-tool { grid-column: 2; }
    /* The rail keeps the state and the clock on one line and drops the MONDAi
       node, so the run still reads at a glance without wrapping to three rows. */
    .hp-exec-rail { gap: 10px; }
    .hp-exec-state > span { font-size: 12.5px; }
    .hp-exec-node { font-size: 12px; }
    .hp-exec-result { gap: 10px; align-items: flex-start; flex-direction: column; }
    .hp-exec-result b { font-size: 17px; }
    .hp-exec-ask p { font-size: 16.5px; border-radius: 16px; }
    .hp-exec-dots { border-radius: 16px; }
    .hp-mcp-foot { font-size: 13.5px; }
    .hp-final { padding: 88px 20px; }
    .hp-jobs { gap: 56px; }
    .hp-calc-summary { position: static; }
    .hp-pricing-grid { grid-template-columns: 1fr; }
    .hp-plan { padding: 30px 22px; }
    .hp-app-feats { flex-direction: column; gap: 12px; }
}

/* Very narrow phones: the name and price share the first line so the
   <select> gets the full row width. */
@media (max-width: 420px) {
    .hp-calc-row { grid-template-columns: 1fr auto; }
    .hp-calc-name { grid-column: 1; grid-row: 1; }
    .hp-calc-price { grid-column: 2; grid-row: 1; }
    .hp-calc-field { grid-column: 1 / -1; grid-row: 2; }
}

@media print {
    .hp-nav, .hp-sticky { display: none; }
    .hp-marquee, .hp-tl-mask { display: none; }
    .hp-bfy-rail { flex-wrap: wrap; overflow: visible; }
    .hp-bfy-card { flex: 1 1 240px; }
    .hp-hero { padding-top: 40px; }
}

/* Mobile "The Platform": the wrapping pill cloud reads as a tag cloud and eats
   vertical space, so below 600px the same ten tabs become a two-column
   capability grid. Same buttons, same data-tab wiring, so tapping still swaps
   the product screenshot. */
@media (max-width: 600px) {
    #platform .hp-wrap { gap: 26px; }

    /* Horizontal strip: icon tile with its label beneath, active marked by a
       gold rule. Scrolls rather than wrapping, so ten capabilities cost one
       band instead of five rows. */
    .hp-tabs {
        display: flex; flex-wrap: nowrap; justify-content: flex-start;
        gap: 2px; overflow-x: auto; scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 16px 14px 12px;
        background: var(--hp-white);
        border: 1px solid rgba(18, 18, 18, 0.07);
        border-radius: 20px;
        box-shadow: 0 1px 2px rgba(15, 16, 17, 0.04);
    }
    .hp-tabs::-webkit-scrollbar { display: none; }
    /* Icon and label sit on one line. Stacking them made every card 104px and
       turned ten capabilities into a full screen of mostly empty card. */
    .hp-tab {
        position: relative; flex: 0 0 auto; scroll-snap-align: start;
        display: flex; flex-direction: column; align-items: center; gap: 9px;
        min-height: 0; padding: 0 10px 11px;
        background: none; border: none; border-radius: 0; box-shadow: none;
        white-space: nowrap;
    }
    .hp-tab:hover { border: none; }
    .hp-tab.is-active { background: none; }
    .hp-tab.is-active .hp-tab-icon { background: rgba(201, 168, 76, 0.22); }
    .hp-tab.is-active .hp-tab-label { color: var(--hp-ink); font-weight: 700; }
    .hp-tab.is-active::after {
        content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
        height: 3px; border-radius: 2px; background: var(--hp-gold-warm);
    }
    .hp-tab-icon {
        display: flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
        background: rgba(201, 168, 76, 0.12);
        color: var(--hp-ink);
        transition: background 0.25s ease, color 0.25s ease;
    }
    .hp-tab-icon svg { width: 23px; height: 23px; }
    .hp-tab-label {
        font-size: 13px; font-weight: 500; line-height: 1.2;
        letter-spacing: -0.01em; color: var(--hp-body);
        transition: color 0.2s ease;
    }
}

/* Mobile "REPLACES": a 2-column chip grid whose tools are struck out one at a
   time. A hairline through white pills is invisible on a phone, so the rule is
   a drawn 2px bar in deep gold, and the chip subdues as it resolves. The grid
   is fixed at two columns because the slides carry 3, 4 and 5 tools, and only a
   fixed column count keeps chip width consistent between them. */
@media (max-width: 600px) {
    .hp-feat-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .hp-rep {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; min-height: 46px; padding: 11px 12px;
        border-radius: 13px; border: 1px solid rgba(18, 18, 18, 0.1);
        background: var(--hp-white);
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    .hp-rep-label {
        position: relative; font-size: 13px; font-weight: 600;
        line-height: 1.25; color: var(--hp-ink);
        text-decoration: none;
        transition: color 0.35s ease;
    }
    .hp-rep-line {
        display: block; position: absolute; left: 0; top: 50%;
        width: 100%; height: 2px; border-radius: 2px;
        background: var(--hp-red);
        transform: scaleX(0) translateY(-50%); transform-origin: left center;
        transition: transform 0.34s var(--hp-ease);
    }
    .hp-rep-x {
        display: block; width: 15px; height: 15px; flex-shrink: 0;
        color: var(--hp-red);
        opacity: 0; transform: scale(0.7);
        transition: opacity 0.25s ease 0.16s, transform 0.25s var(--hp-ease) 0.16s;
    }

    .hp-rep.is-out { background: var(--hp-fill-soft); border-color: rgba(18, 18, 18, 0.07); }
    .hp-rep.is-out .hp-rep-label { color: #767676; }
    .hp-rep.is-out .hp-rep-line { transform: scaleX(1) translateY(-50%); }
    .hp-rep.is-out .hp-rep-x { opacity: 1; transform: scale(1); }

    .hp-rep-resolve {
        display: flex; align-items: center; gap: 8px;
        grid-column: 1 / -1; margin-top: 2px;
        font-size: 12px; font-weight: 600; color: var(--hp-gold-deep);
        opacity: 0; transform: translateY(4px);
        transition: opacity 0.4s ease, transform 0.4s var(--hp-ease);
    }
    .hp-rep-resolve.is-in { opacity: 1; transform: translateY(0); }
    .hp-rep-connector {
        width: 18px; height: 2px; border-radius: 2px; flex-shrink: 0;
        background: var(--hp-gold-grad);
    }
}

/* ── Mobile story sections (Attract / Convert / Deliver / Operate) ───────
   Desktop composes these wide: full dashboard, card overhanging one corner.
   Shrunk to 390px that becomes a washed-out thumbnail with a tall card
   stacked under it, so the screenshot stops reading as software and the
   story costs two screens. Below 600px the frame becomes a cropped window
   zoomed on the part of the UI each section is about, and the outcome card
   goes back to overlapping it. Desktop rules are untouched. */
@media (max-width: 600px) {
    .hp-jobs { gap: 44px; }
    .hp-job { gap: 16px; }
    .hp-job-head { gap: 12px; }
    .hp-job-head p { font-size: 14.5px; line-height: 1.6; }
    .hp-job-label { gap: 9px; }
    .hp-job-icon { width: 34px; height: 34px; border-radius: 9px; }
    .hp-job-label span:last-child { font-size: 12px; letter-spacing: 2.4px; }

    /* Crop, do not scale. object-position picks the focal point per section. */
    /* The card is anchored to the media box's bottom, so the reserved space
       below the frame is what sets the overlap. The four cards are different
       heights (the SMS thread is the tallest), so each reserves its own,
       landing every section at roughly a quarter of the frame. */
    .hp-job-media { position: relative; padding-bottom: 104px; }
    .hp-jobs > article:nth-of-type(2) .hp-job-media { padding-bottom: 178px; }
    .hp-jobs > article:nth-of-type(3) .hp-job-media { padding-bottom: 102px; }
    .hp-jobs > article:nth-of-type(4) .hp-job-media { padding-bottom: 130px; }
    /* Uncropped: the dashboard at its own aspect. */
    .hp-job-frame { overflow: hidden; border-radius: 16px; }
    .hp-job-frame img {
        width: 100%; height: auto;
        opacity: 1;                      /* 0.85 + the wash read as texture, not UI */
    }
    /* Wash retreats to a bottom fade so the card has something to sit on. */
    .hp-job-wash,
    .hp-job-wash--right {
        background: linear-gradient(180deg,
            rgba(var(--hp-page-rgb),0) 58%, rgba(var(--hp-page-rgb),0.55) 100%);
    }

    /* Card overlaps the frame again: one system, not two stacked blocks. */
    .hp-job-card,
    .hp-job-card--right,
    .hp-job-media--bleed .hp-job-card {
        position: absolute; bottom: 0; left: 12px; right: 12px;
        width: auto; margin-top: 0; border-radius: 16px;
        box-shadow: 0 18px 44px rgba(15, 16, 17, 0.22);
    }
    /* The desktop trim and lift for Operate are 0,3,1 and would otherwise beat
       the rule above, burying its workflow under the card on a phone. */
    .hp-jobs > article:nth-of-type(4) .hp-job-canvas { aspect-ratio: 16 / 9.5; }
    .hp-jobs > article:nth-of-type(4) .hp-job-card--right { bottom: 0; }
    /* Armed by JS, so a script failure leaves the card visible rather than at
       opacity 0. */
    .hp-job-card.is-armed {
        opacity: 0; transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s var(--hp-ease);
    }
    .hp-job-card.is-armed.is-in { opacity: 1; transform: translateY(0); }

    .hp-job-card-head { padding: 11px 15px; gap: 10px; }
    .hp-job-card-head span:last-child { font-size: 14px; }
    .hp-job-badge { font-size: 9.5px; padding: 3px 8px; letter-spacing: 0.8px; }
    .hp-job-body { padding: 12px 15px; gap: 7px; }
    .hp-job-foot { padding: 11px 15px; font-size: 13px; gap: 8px; }
    .hp-job-note { padding: 10px 15px; font-size: 12.5px; }

    /* Attract: the three key/value rows become a compact identity block. */
    .hp-kv { display: block; font-size: 13px; }
    .hp-kv span:first-child { display: none; }
    .hp-kv span:last-child { font-weight: 500; color: var(--hp-body); }
    .hp-job-body > .hp-kv:first-child span:last-child {
        font-size: 15px; font-weight: 700; color: var(--hp-ink);
    }

    .hp-sms { padding: 12px 15px; gap: 8px; }
    .hp-bubble { font-size: 13px; padding: 8px 12px; max-width: 88%; }
    .hp-metric { grid-template-columns: 72px 1fr 44px; gap: 10px; font-size: 12.5px; }
    .hp-checklist { padding: 12px 15px; gap: 9px; font-size: 13px; }
}

/* ── Mobile stack builder ───────────────────────────────────────────────
   Desktop can afford a row per category with a visible select. On a phone
   that is nine tall form rows before the payoff, which is the one thing the
   section exists to show. Below 600px each category becomes a ~72px tappable
   row, the running total pins to the top of the list, and the categories past
   the fifth fold away, so the black savings card arrives in about a screen.
   All prices, options and maths are the existing ones. */
@media (max-width: 600px) {
    #calculator { padding: 56px 20px; }
    .hp-calc-wrap { gap: 22px; }

    /* One intentional line break instead of the highlight fragmenting into
       two rectangles with an orphaned "You?". */
    #calculator .hp-h2 .hp-mark {
        display: block; width: fit-content; margin: 6px auto 0;
    }

    .hp-calc-grid { gap: 16px; }
    .hp-calc-list { border-radius: 18px; overflow: visible; }

    .hp-calc-live {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: 2px 12px;
        position: sticky; top: 64px; z-index: 3;
        padding: 12px 16px;
        background: var(--hp-fill-soft);
        border-bottom: 1px solid rgba(201, 168, 76, 0.4);
        border-radius: 18px 18px 0 0;
    }
    .hp-calc-live-label {
        font-size: 10.5px; font-weight: 600; letter-spacing: 2px;
        text-transform: uppercase; color: var(--hp-muted);
    }
    .hp-calc-live-total {
        grid-row: 1 / span 2; grid-column: 2;
        align-self: center;
        font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
        color: var(--hp-ink);
    }
    .hp-calc-live-meta { font-size: 11.5px; color: var(--hp-faint); }

    .hp-calc-row {
        position: relative;
        grid-template-columns: 38px 1fr auto 14px;
        grid-template-areas:
            "icon name   price chev"
            "icon chosen price chev";
        align-items: center;
        column-gap: 12px; row-gap: 1px;
        padding: 13px 16px;
        min-height: 72px;
    }
    .hp-calc-icon {
        grid-area: icon;
        display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 10px;
        background: rgba(201, 168, 76, 0.12); color: var(--hp-ink);
    }
    .hp-calc-icon svg { width: 18px; height: 18px; }
    .hp-calc-name { grid-area: name; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
    .hp-calc-chosen {
        grid-area: chosen; display: block;
        font-size: 12px; color: var(--hp-faint); line-height: 1.3;
    }
    .hp-calc-price {
        grid-area: price; font-size: 15px; font-weight: 700; text-align: right;
    }
    .hp-calc-price-per { display: none; }
    .hp-calc-chev {
        grid-area: chev; display: flex; align-items: center;
        color: #b9b3a7;
    }
    .hp-calc-chev svg { width: 14px; height: 14px; }

    /* The whole row is the control: the native select covers it invisibly, so
       a tap anywhere opens the system picker. */
    .hp-calc-field { position: static; }
    .hp-calc-field select {
        position: absolute; inset: 0; width: 100%; height: 100%;
        padding: 0; margin: 0; border: 0; border-radius: 0;
        background: transparent; opacity: 0; z-index: 2;
        font-size: 16px;                       /* stops iOS zooming on focus */
    }
    .hp-calc-field select:focus-visible { outline: none; }
    .hp-calc-row:focus-within {
        background: rgba(201, 168, 76, 0.07);
        box-shadow: inset 0 0 0 2px rgba(201, 168, 76, 0.55);
    }
    .hp-calc-caret { display: none; }

    .hp-calc-row--extra { display: none; }
    .hp-calc-list.is-expanded .hp-calc-row--extra { display: grid; }

    .hp-calc-more {
        display: block; width: 100%;
        padding: 14px 16px; min-height: 48px;
        background: none; border: none;
        border-top: 1px solid rgba(18, 18, 18, 0.06);
        font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600;
        color: var(--hp-gold-deep); text-align: center; cursor: pointer;
    }

    .hp-calc-foot { padding: 12px 16px; }
    .hp-calc-summary { padding: 24px 22px 22px; border-radius: 18px; }
    .hp-calc-save { font-size: 44px; }
}

@media (max-width: 600px) {
    .hp-hero-glow { top: -180px; height: 700px; }
    .hp-hero-grain { opacity: 0.3; }
}

/* Mobile header, modelled on Linear: mark and wordmark, a plain-text Log in, a
   filled pill, then a bare menu glyph. Their "Sign up" is 60px where ours is a
   151px price CTA, so the pill and wordmark tighten to buy the room, and the
   wordmark steps out entirely on the narrowest phones. */
@media (max-width: 860px) {
    .hp-nav-inner { padding: 0 20px; gap: 14px; }
    .hp-nav-right { gap: 14px; }
}
@media (max-width: 600px) {
    .hp-nav-inner { padding: 0 18px; gap: 10px; }
    .hp-nav-right { gap: 12px; }
    .hp-nav-logo { gap: 8px; }
    .hp-nav-wordmark { font-size: 15px; letter-spacing: 2.4px; }
    .hp-nav-cta { padding: 9px 15px; font-size: 12.5px; }
    .hp-nav-mobile { padding: 6px 18px 20px; }
}
@media (max-width: 380px) {
    .hp-nav-wordmark { display: none; }
}

/* ── Mobile hero and product proof ──────────────────────────────────────
   The phone was getting the desktop composition scaled down: a headline that
   wrapped wherever the browser felt like, unequal stacked CTAs, and a 1760px
   dashboard rendered 354px wide, where the KPI numbers land near 6px and the
   screenshot stops proving anything. Below 600px the headline breaks on its
   own clauses, the CTAs match, and the frame becomes a camera cropped into the
   top-left of the real asset at ~1.55x. Same screenshot, same copy, no
   fade. Desktop untouched. */
@media (max-width: 600px) {
    .hp-hero { padding: 96px 20px 40px; }
    .hp-hero-inner { gap: 18px; }

    .hp-hero-badge { padding: 7px 15px; gap: 8px; }
    .hp-hero-badge span:last-child { font-size: 10px; letter-spacing: 2.2px; }

    /* Emphasis comes from weight and colour, never a filled rectangle. Each
       clause takes its own line instead of wrapping wherever it lands. */
    .hp-h1 {
        font-size: clamp(34px, 9.2vw, 44px);
        line-height: 1.06;
        letter-spacing: -0.035em;
    }
    .hp-h1 strong,
    .hp-h1 .hp-gold-text { display: block; }

    .hp-hero-sub { font-size: 15.5px; line-height: 1.6; max-width: 340px; }

    .hp-hero-ctas {
        flex-direction: column; gap: 12px;
        width: 100%; max-width: 320px;
    }
    .hp-hero-ctas .hp-btn { width: 100%; padding: 15px 20px; }

    .hp-reassure { font-size: 11.5px; line-height: 1.5; }
    .hp-dot { color: var(--hp-gold-warm); }

    /* Camera into the software: the frame crops, the asset is never downscaled
       to fit. Overflow hides the source's cut-off bottom edge, so the wash the
       desktop composition needed is not required here. */
    .hp-browser { margin-top: 28px; }
    .hp-browser-frame { border-radius: 18px; }
    .hp-browser-bar { padding: 10px 14px; }
    /* The mockup carries its own shape and its own fade at every width. */
    .hp-browser-shot { position: relative; }

    .hp-logos { padding: 26px 0 28px; }
    .hp-logos-label { margin-bottom: 18px; font-size: 10px; letter-spacing: 3px; }
    .hp-marquee-track { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hp-marquee-track,
    .hp-tl-track { animation: none; }
    .hp-step,
    .hp-metric-bar { transition: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}