/* XPath Labs site — monochrome brand system derived from the logo
   (extended geometric caps, reversed black block, thin outer frame).
   .home = home page, .xl = other public pages (resources) */

.home, .xl {
    --paper: #FFFFFF;
    --paper-deep: #F3F3F1;
    --ink: #000000;
    --ink-soft: #2E2E33;
    --ink-mute: #8A8A93;
    --faint: #D9D9D5;
    --rule: rgba(0, 0, 0, 0.14);
    --rule-light: rgba(255, 255, 255, 0.2);
    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --display-width: 125%;
    color-scheme: light only;
    /* Michroma is reserved for eyebrows (section labels); every other small label uses --readable */
    --label: 'Michroma', 'Archivo', sans-serif;
    --readable: var(--font-primary);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    /* Monochrome overrides for inherited landing tokens */
    --accent: var(--ink);
    --accent-dark: var(--ink);
    --accent-light: var(--paper);
    --gradient-primary: var(--green);
    /* Growth accent: highlights only. Deep evergreen on light, brighter shade on dark */
    --green: #1E5B3F;
    --green-on-dark: #3FA36B;
    background: var(--paper);
    color: var(--ink);
}

.home ::selection, .xl ::selection { background: var(--ink); color: var(--paper); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reset landing-page globals inside the home page */
.home section { padding: 0; }
.home h1, .home h2, .home h3 { margin: 0; color: inherit; }
.home p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

.h-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--space-8);
}

/* Reversed block — the "XPATH" half of the logo */
.h-block {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    padding: 0 0.22em;
}
.h-section--ink .h-block { background: var(--paper); color: var(--ink); }

/* ---------- Nav ---------- */
.home-nav {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
    border-bottom: 1px solid var(--ink);
    padding: var(--space-3) 0;
}
.home-nav .container { max-width: 1240px; padding: 0 var(--space-8); }
.home-nav .nav-menu { gap: var(--space-8); }
.home-nav .nav-menu a {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
}
.home-nav .nav-menu a:hover,
.home-nav .nav-menu a[aria-current="page"] { color: var(--green); }
.home-nav .home-nav-signin {
    color: var(--paper);
    background: var(--ink);
    padding: var(--space-2) var(--space-4);
    outline: 1px solid var(--ink);
    outline-offset: 2px;
    transition: outline-offset var(--transition-fast);
}
/* Beats the generic nav link hover so the button text stays white */
.home-nav .nav-menu a.home-nav-signin,
.home-nav .nav-menu a.home-nav-signin:hover,
.home-nav .nav-menu a.home-nav-signin:focus-visible { color: var(--paper); }
.home-nav .home-nav-signin:hover { outline-offset: 4px; color: var(--paper); }
.home-nav .mobile-menu-toggle { color: var(--ink); }
.xl .nav-menu-mobile a, .home .nav-menu-mobile a { border-radius: 0; font-family: var(--display); font-stretch: var(--display-width); font-weight: 600; }
.xl .nav-menu-mobile .btn-primary-nav, .home .nav-menu-mobile .btn-primary-nav { background: var(--ink); }

/* ---------- Shared type ---------- */
.h-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--label);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.h-kicker { white-space: nowrap; }
.h-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--green);
}
.h-section--ink .h-kicker::before { background: var(--green-on-dark); }
.h-kicker { color: var(--ink); }
.h-section--ink .h-kicker { color: var(--paper); }

.h-heading {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.h-split {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-16);
}

.h-section { padding: var(--space-32) 0 !important; position: relative; }
.h-stack { margin-bottom: var(--space-16); }
.h-stack .h-kicker { margin-bottom: var(--space-6) !important; }
.h-heading--balance { text-wrap: balance; }
.h-heading--xl { font-size: clamp(2.25rem, 5.4vw, 5rem); line-height: 1.06; max-width: 18ch; }

/* Dark section grows from inset to full-bleed as it scrolls in (set by home.js) */
.h-inset { clip-path: inset(0 var(--inset, 0px)); }
.h-section--ink { background: var(--ink); color: var(--paper); }
.h-section--tint { background: var(--paper-deep); }
.h-section + .h-section:not(.h-section--ink):not(.h-section--tint) { border-top: 1px solid var(--rule); }

.h-link {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    border-bottom: 2px solid currentColor;
    padding-bottom: 3px;
}
.h-link:hover { color: var(--green); }

/* Buttons: square, with the logo's offset frame */
.h-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-sm);
    font-weight: 600;
    outline: 1px solid var(--ink);
    outline-offset: 3px;
    transition: outline-offset var(--transition-base), background var(--transition-base);
}
.h-btn span { transition: transform var(--transition-base); }
.h-btn:hover { outline-offset: 6px; }
.h-btn:hover span { transform: translateX(4px); }
.h-btn--ink, .h-btn--ink:hover { background: var(--ink); color: var(--paper); }

/* ---------- Hero ---------- */
.h-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-24) 0 0 !important;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.h-hero .h-wrap { width: 100%; position: relative; }

/* Gravity: leads (small squares) are pulled into the "business" block, which widens
   as it absorbs them. White + difference blend draws them black on the page and
   flips headline letters underneath to white, like the logo's reversed block. */
.h-hero { isolation: isolate; background: var(--paper); }
.h-gravity {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: difference;
}

.h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--label);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-10) !important;
}

.h-dot {
    width: 8px;
    height: 8px;
    background: var(--green);
    animation: h-blink 1.2s steps(2, start) infinite;
}
@keyframes h-blink { to { visibility: hidden; } }

.h-hero-title {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.75rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.h-ln {
    display: block;
    overflow: hidden;
    /* room for descenders inside the mask */
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}
.h-ln > span {
    display: inline-block;
    transform: translateY(0);
    transition: transform 1.1s var(--ease-out);
}
.js .h-hero:not(.is-ready) .h-ln > span { transform: translateY(110%); }
.h-ln:nth-child(2) > span { transition-delay: 0.09s; }
.h-ln:nth-child(3) > span { transition-delay: 0.18s; }
.js .h-hero:not(.is-ready) .h-eyebrow,
.js .h-hero:not(.is-ready) .h-hero-foot { opacity: 0; transform: translateY(16px); }
.h-hero .h-eyebrow, .h-hero .h-hero-foot { transition: opacity 0.9s 0.35s var(--ease-out), transform 0.9s 0.35s var(--ease-out); }

.h-hero-title .h-block { line-height: 1.06; padding: 0 var(--pad, 0.16em); transition: padding 0.6s var(--ease-out); }
/* Keep each desktop headline line on one row; the block's growth is capped to fit (home.js) */
@media (min-width: 769px) { .h-ln > span { white-space: nowrap; } }

.h-hero-foot {
    display: grid;
    grid-template-columns: minmax(0, 540px) auto;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.h-lede {
    font-size: var(--text-lg) !important;
    line-height: 1.65 !important;
    color: var(--ink-soft) !important;
}

.h-actions {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    white-space: nowrap;
}

.h-marquee {
    margin-top: var(--space-20);
    background: var(--paper);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    overflow: hidden;
    padding: var(--space-6) 0;
}
.h-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: var(--space-12);
    /* Trailing gap so the track is exactly two copies wide and the loop has no jump */
    padding-right: var(--space-12);
    animation: h-marquee 60s linear infinite;
}
.js .h-marquee-track { animation: none; will-change: transform; }
.h-marquee-logo { display: flex; align-items: center; flex: none; }
.h-marquee-logo img {
    /* Uniform height with per-logo --s to balance visual weight */
    height: calc(28px * var(--s, 1));
    width: auto;
    /* One monochrome treatment for every brand; multiply drops white backgrounds */
    filter: grayscale(1) contrast(1.15);
    mix-blend-mode: multiply;
}
/* Light-colored logos on transparent backgrounds: render as a solid silhouette so nothing washes out */
.h-marquee-logo img[data-tone="solid"] { filter: brightness(0); mix-blend-mode: normal; opacity: 0.82; }
.h-marquee-track i {
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--green);
}

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

/* ---------- Mission ---------- */
.h-mission-head { margin-bottom: var(--space-20); }
.h-mission-head .h-kicker { margin-bottom: var(--space-8) !important; }
.h-statement {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: clamp(1.75rem, 3.6vw, 3.25rem) !important;
    font-weight: 600;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 22ch;
    text-wrap: pretty;
}
@media (min-width: 1025px) { .h-statement { max-width: 26ch; } }
.h-word { color: #D4D4D8; transition: color 0.25s linear; }
.h-word.is-on { color: var(--ink); }

.h-principles-label { margin-bottom: var(--space-6) !important; }
.h-principles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--ink);
}
.h-principles li {
    position: relative;
    padding: var(--space-10) var(--space-8);
    transition: background var(--transition-base), color var(--transition-base);
}
.h-principles li + li { border-left: 1px solid var(--ink); }
.h-principles li:hover { background: var(--ink); color: var(--paper); }
.h-principles li:hover p { color: rgba(255, 255, 255, 0.72) !important; }
.h-num {
    display: block;
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--green);
    margin-bottom: var(--space-8);
    transition: color var(--transition-base);
}
.h-principles li:hover .h-num { color: var(--green-on-dark); }
.h-principles h3 {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-3) !important;
}
.h-principles p { color: var(--ink-soft) !important; line-height: 1.7 !important; transition: color var(--transition-base); }

/* ---------- Path (tabs) ---------- */
.h-path {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: stretch;
}

.h-path-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule-light); }
.h-path-col { display: flex; flex-direction: column; gap: var(--space-8); }

.h-path-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-4);
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule-light);
    color: rgba(255, 255, 255, 0.4);
    padding: var(--space-6) 0;
    cursor: pointer;
    font: inherit;
    transition: color var(--transition-base);
}
.h-path-item:hover, .h-path-item.is-active { color: var(--paper); }
.h-path-item:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }

.h-path-num { font-family: var(--readable); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 0.35em; }
.h-path-title {
    display: block;
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.h-path-desc {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
    transition: max-height 0.5s var(--ease-out), opacity 0.4s var(--ease-out), margin 0.5s var(--ease-out);
}
.h-path-item.is-active .h-path-desc { max-height: 8rem; opacity: 1; margin-top: var(--space-3); }

.h-path-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--green-on-dark);
}
.h-path-item.is-active .h-path-progress { animation: h-progress var(--path-duration, 6s) linear forwards; }
.h-path.is-paused .h-path-item.is-active .h-path-progress { animation-play-state: paused; }

@keyframes h-progress { to { width: 100%; } }

/* Stage: framed like the logo */
.h-stage {
    position: relative;
    border: 1px solid var(--paper);
    outline: 1px solid var(--rule-light);
    outline-offset: 8px;
    height: 400px;
    overflow: hidden;
    margin: 8px;
}

.h-panel {
    position: absolute;
    inset: 0;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
}
.h-panel[hidden] { display: none; }
.h-panel-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-3);
}
.h-panel.is-active { animation: h-panel-in 0.6s var(--ease-out); }

@keyframes h-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.h-panel-cap {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 600;
    font-size: var(--text-lg) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    color: var(--paper);
    margin-bottom: var(--space-5) !important;
}
/* Found: answer card */
.h-answer {
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-6);
}
.h-answer-q {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}
.h-answer-a { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); }
.h-line { display: block; height: 8px; width: var(--w); background: var(--paper-deep); }
.h-answer-hit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--green);
    color: var(--paper);
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-sm);
    font-weight: 600;
    outline: 1px solid var(--green);
    outline-offset: 2px;
}
.h-panel.is-active .h-answer-hit { animation: h-pop 0.6s 0.35s var(--ease-out) both; }
/* Question types in (home.js); the answer appears once it's asked */
.h-answer-q { min-height: 3.2em; }
.h-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: h-blink 1s steps(2, start) infinite;
}
.h-answer.is-answered .h-caret { visibility: hidden; animation: none; }
.h-answer-a > * { transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.h-answer:not(.is-answered) .h-answer-a > * { opacity: 0; transform: translateY(6px); }
.h-answer.is-answered .h-answer-a > :nth-child(2) { transition-delay: 0.08s; }
.h-answer.is-answered .h-answer-a > :nth-child(3) { transition-delay: 0.18s; }
.h-answer.is-answered .h-answer-a > :nth-child(4) { transition-delay: 0.26s; }

@keyframes h-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

/* Reach: the ad goes out, likely buyers light up */
.h-reach {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: var(--space-8);
    align-items: center;
}
.h-ad {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    border: 6px solid var(--paper);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: 5px;
    font-size: 10px;
    line-height: 1.3;
}
.h-ad-head { display: flex; align-items: center; gap: 6px; padding: 4px 2px 6px; }
.h-ad-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: 11px;
}
.h-ad-who { display: flex; flex-direction: column; }
.h-ad-who b { font-weight: 700; font-size: 10px; }
.h-ad-who em { font-style: normal; font-size: 9px; color: var(--ink-soft); }
.h-ad-img {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    padding: 10px;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%),
        repeating-linear-gradient(135deg, #1a1a1a 0 10px, #262626 10px 20px);
    color: var(--paper);
}
.h-ad-img span {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.h-ad-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--rule);
}
.h-ad-cta span { color: var(--ink-soft); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ad-cta b { flex: none; padding: 3px 8px; background: var(--ink); color: var(--paper); font-size: 9px; font-weight: 600; }
.h-ad-react { display: flex; gap: 10px; padding: 6px 2px 2px; font-size: 11px; }
.h-crowd-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.h-crowd { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 300px; }
.h-crowd i { aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.28); }
.h-crowd i.fit { transition: background 0.3s; }
.h-legend { display: flex; gap: var(--space-5); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6); }
.h-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.h-legend b { width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.5); }
.h-legend b.on { background: var(--green-on-dark); border-color: var(--green-on-dark); }
.h-panel.is-active .h-ad { animation: h-slide-in 0.7s var(--ease-out) both; }
.h-panel.is-active .h-crowd i { animation: h-fade 0.6s 0.2s var(--ease-out) both; }
.h-panel.is-active .h-crowd i.fit { animation: h-fade 0.6s 0.2s var(--ease-out) both, h-light 0.4s calc(0.9s + var(--d) * 0.13s) var(--ease-out) forwards; }
@keyframes h-slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes h-light { to { background: var(--green-on-dark); border-color: var(--green-on-dark); } }

/* Convert: CRO essentials check off one by one; each lights its part of the wireframe */
.h-cro {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: center;
}
.h-wf { background: var(--paper); outline: 1px solid transparent; outline-offset: 4px; }
.h-wf-bar { display: flex; gap: 5px; padding: 7px 9px; border-bottom: 1px solid var(--rule); }
.h-wf-bar i { width: 6px; height: 6px; border: 1px solid var(--ink-mute); }
.h-wf-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); }
.h-wf-body > span { display: block; background: var(--faint); }
.h-wf-h { height: 12px; width: 88%; }
.h-wf-sub { height: 6px; width: 64%; }
.h-wf-row { display: flex !important; gap: 4px; background: none !important; }
.h-wf-row i { width: 10px; height: 10px; background: var(--faint); }
.h-wf-row--badges i { width: 22px; height: 14px; }
.h-wf-cta { height: 18px; width: 46%; margin-top: 2px; }
.h-wf-field { height: 10px; width: 100%; background: none !important; border: 1px solid var(--faint); }
.h-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.h-checklist li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
}
.h-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 10px;
    color: transparent;
}
.h-cro-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.h-cro-meter span { font-size: var(--text-xs); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.h-cro-meter b { display: block; height: 8px; background: var(--green-on-dark); transform-origin: left; transform: scaleX(0.08); }
/* Timeline: one check every 0.45s from 0.6s; the matching wireframe part turns black as it's checked */
.h-panel.is-active .h-checklist li { animation: h-check-text 0.3s calc(0.6s + var(--n) * 0.45s) forwards; }
.h-panel.is-active .h-check { animation: h-check-box 0.3s calc(0.6s + var(--n) * 0.45s) var(--ease-out) forwards; }
.h-panel.is-active .h-wf-body > [style*="--n"] { animation: h-wf-on 0.35s calc(0.6s + var(--n) * 0.45s) forwards; }
.h-panel.is-active .h-wf-row i { animation: h-wf-on 0.35s calc(0.6s + var(--n) * 0.45s) forwards; }
.h-panel.is-active .h-wf-body > .h-wf-field { animation: h-wf-field 0.35s calc(0.6s + var(--n) * 0.45s) forwards; }
.h-panel.is-active .h-wf { animation: h-fade 0.5s var(--ease-out) both, h-wf-frame 0.4s 2.85s forwards; }
.h-panel.is-active .h-cro-meter b { animation: h-meter 2.8s 0.6s steps(6, end) forwards; }
@keyframes h-check-text { to { color: var(--paper); } }
@keyframes h-check-box { to { background: var(--green-on-dark); border-color: var(--green-on-dark); color: var(--ink); } }
@keyframes h-wf-on { to { background: var(--ink); } }
@keyframes h-wf-field { to { border-color: var(--ink); } }
@keyframes h-wf-frame { to { outline-color: var(--paper); } }
@keyframes h-meter { to { transform: scaleX(1); } }
@keyframes h-press { 50% { transform: scale(0.94); } }
@keyframes h-fade { from { opacity: 0; } to { opacity: 1; } }

/* Learn: a custom client dashboard; counters tick up (home.js), source bars grow */
.h-dash {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    color: var(--ink);
}
.h-dash-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.h-dash-top b { font-family: var(--display); font-stretch: var(--display-width); font-weight: 700; font-size: var(--text-sm); }
.h-dash-top span { font-size: var(--text-xs); padding: 2px 8px; border: 1px solid var(--ink); }
.h-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.h-dash-kpis div { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--paper); }
.h-dash-kpis span { font-size: var(--text-xs); opacity: 0.75; }
.h-dash-kpis b {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: var(--text-xl);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.h-dash .h-dash-label { font-size: var(--text-xs) !important; font-weight: 600; color: var(--ink-soft); }
.h-dash-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.h-dash-row b { display: block; height: 8px; width: var(--w); background: var(--green); transform-origin: left; }
.h-dash .h-dash-note i { color: var(--green); }
.h-dash .h-dash-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2) !important;
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
    font-size: var(--text-xs) !important;
    line-height: 1.4 !important;
}
.h-panel.is-active .h-dash { animation: h-fade 0.5s var(--ease-out) both; }
.h-panel.is-active .h-dash-row b { animation: h-grow-x 0.8s var(--ease-out) both; }
.h-panel.is-active .h-dash-row:nth-of-type(2) b { animation-delay: 0.1s; }
.h-panel.is-active .h-dash-row:nth-of-type(3) b { animation-delay: 0.2s; }
.h-panel.is-active .h-dash-row:nth-of-type(4) b { animation-delay: 0.3s; }
.h-panel.is-active .h-dash .h-dash-note { animation: h-slide-up 0.6s 1.4s var(--ease-out) both; }
@keyframes h-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes h-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Sectors ---------- */
.h-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.h-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1.4fr 1fr;
    gap: var(--space-8);
    align-items: baseline;
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--rule);
    transition: padding var(--transition-base), color var(--transition-base);
}
.h-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
    z-index: 0;
}
.h-row > * { position: relative; z-index: 1; transition: color var(--transition-base); }
.h-row:hover::before { transform: scaleX(1); }
.h-row:hover { padding-left: var(--space-6); padding-right: var(--space-6); color: var(--paper); }
.h-row:hover .h-row-text, .h-row:hover .h-row-tags { color: rgba(255, 255, 255, 0.7); }
.h-row-name {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.h-row-text { color: var(--ink-soft); line-height: 1.6; }
.h-row-tags { font-size: var(--text-sm); color: var(--ink-mute); text-align: right; }

/* ---------- Resources ---------- */
.h-reads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.h-reads a {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: var(--space-8);
    align-items: baseline;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
}
.h-read-cat {
    font-family: var(--readable);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
}
.h-read-title {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.45s var(--ease-out);
}
.h-reads a:hover .h-read-title { background-size: 100% 2px; }
.h-read-meta { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; }
.h-read-meta span { display: inline-block; transition: transform var(--transition-base); }
.h-reads a:hover .h-read-meta span { transform: translateX(4px); color: var(--green); }
.h-link--more { display: inline-block; margin-top: var(--space-10); }

/* ---------- Contact ---------- */
.h-contact-title {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--paper);
    margin: var(--space-10) 0 var(--space-16) !important;
}
.h-contact-title em { font-style: normal; line-height: 1.06; padding: 0 0.16em; }
.h-contact-foot {
    display: grid;
    grid-template-columns: minmax(0, 480px) auto;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--rule-light);
}
.h-contact-foot p { color: rgba(255, 255, 255, 0.7) !important; line-height: 1.7 !important; }
.h-email {
    display: inline-block;
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 600;
    color: var(--paper);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--paper);
    outline: 1px solid var(--rule-light);
    outline-offset: 4px;
    transition: background var(--transition-base), color var(--transition-base), outline-offset var(--transition-base);
}
.h-email:hover { background: var(--paper); color: var(--ink); outline-offset: 7px; }

/* ---------- Footer ---------- */
.h-footer { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: 0 0 var(--space-10); overflow: hidden; }
/* Footer logo: same file and size as the header, original colors */
.h-footer-logo { display: inline-block; margin-bottom: var(--space-4); }
.h-footer-logo img { display: block; height: 32px; width: auto; }
.h-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-8);
    padding-top: var(--space-12);
    border-top: 1px solid var(--rule-light);
}
.h-footer p { font-size: var(--text-sm); }
/* More specific than the phone-size .h-wrap padding reset, so the gap under the divider survives */
.h-footer-inner.h-wrap { padding-top: var(--space-12); }
.h-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.h-footer a {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: var(--text-sm);
    font-weight: 500;
}
.h-footer a:hover { color: var(--paper); }
.h-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-12);
    font-size: var(--text-xs);
}

/* ---------- Touch devices: comfortable tap targets without changing the layout ---------- */
.home-nav .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
}
@media (max-width: 768px) { .home-nav .mobile-menu-toggle { display: inline-flex; } }
@media (pointer: coarse) {
    .h-link, .h-footer a, .home-nav .nav-menu a:not(.home-nav-signin) { position: relative; }
    .h-link::after, .h-footer a::after, .home-nav .nav-menu a:not(.home-nav-signin)::after {
        content: '';
        position: absolute;
        inset: -14px -6px;
    }
    .home-nav .home-nav-signin { padding: 10px 16px; }
    .h-footer-links { row-gap: var(--space-5); }
}

/* ---------- Scroll reveal ---------- */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .h-row.reveal { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), padding var(--transition-base), color var(--transition-base); }
.js .h-principles li.reveal { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), background var(--transition-base), color var(--transition-base); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .h-split { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-12); }
    /* Accordion: flatten the columns so the illustration can sit right under the active step.
       DOM and tab semantics stay the same; only the visual order changes. */
    .h-path { display: flex; flex-direction: column; gap: 0; }
    .h-path-col, .h-path-list { display: contents; }
    .h-path-item:nth-child(1) { order: 1; }
    .h-path-item:nth-child(2) { order: 3; }
    .h-path-item:nth-child(3) { order: 5; }
    .h-path-item:nth-child(4) { order: 7; }
    .h-path-item:first-child { border-top: 1px solid var(--rule-light); }
    .h-stage { order: var(--stage-order, 2); margin: var(--space-4) 8px var(--space-6); }
    /* Inline under a step, the frame fits its content instead of a fixed height */
    .h-stage { height: auto; }
    .h-panel { position: relative; inset: auto; }
    .h-path-progress { display: none; }
    .h-row { grid-template-columns: 1fr 1fr; }
    .h-row-tags { grid-column: 2; text-align: left; }
}

@media (max-width: 768px) {
    .h-wrap, .home-nav .container { padding: 0 var(--space-4); }
    .h-section { padding: var(--space-20) 0 !important; }
    .h-hero { padding-top: var(--space-16) !important; min-height: auto; }
    /* Let the headline wrap naturally on phones instead of forcing three desktop lines */
    .h-hero-title { font-size: 2.25rem; text-wrap: balance; transition: opacity 0.9s var(--ease-out); }
    .h-ln, .h-ln > span { display: inline; }
    .h-ln { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
    .js .h-hero:not(.is-ready) .h-ln > span { transform: none; }
    .js .h-hero:not(.is-ready) .h-hero-title { opacity: 0; }
    .h-hero-foot, .h-contact-foot { grid-template-columns: 1fr; gap: var(--space-8); }
    .h-actions { flex-wrap: wrap; gap: var(--space-8); }
    .h-marquee { margin-top: var(--space-12); }
    .h-principles { grid-template-columns: 1fr; }
    .h-marquee-logo img { height: calc(20px * var(--s, 1)); }
    .h-principles li + li { border-left: none; border-top: 1px solid var(--ink); }
    .h-cro { gap: var(--space-4); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .h-wf-body { padding: var(--space-3); gap: 6px; }
    .h-checklist { gap: var(--space-2); }
    .h-checklist li { font-size: var(--text-xs); gap: var(--space-2); }
    .h-check { width: 15px; height: 15px; font-size: 8px; }
    .h-panel { padding: var(--space-6); }
    .h-reach { gap: var(--space-4); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .h-ad { border-width: 4px; font-size: 9px; }
    .h-ad-img { padding: 6px; }
    .h-ad-img span { font-size: 9px; overflow-wrap: anywhere; }
    .h-ad-cta span { display: none; }
    .h-ad-cta b { flex: 1; text-align: center; }
    .h-crowd { gap: 5px; }
    .h-legend { flex-direction: column; gap: var(--space-1); }
    .h-legend span { white-space: nowrap; }
    .h-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-6) 0; }
    .h-row:hover { padding-left: var(--space-4); padding-right: var(--space-4); }
    .h-row-tags { grid-column: auto; text-align: left; }
    .h-reads a { grid-template-columns: 1fr; gap: var(--space-2); }
    .h-read-title { font-size: var(--text-xl); }
    .h-footer-inner, .h-footer-bottom { flex-direction: column; }
    .h-email { word-break: break-all; }
}

@media (prefers-reduced-motion: reduce) {
    .h-dot { animation: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .js .h-hero:not(.is-ready) .h-ln > span,
    .js .h-hero:not(.is-ready) .h-eyebrow,
    .js .h-hero:not(.is-ready) .h-hero-foot { transform: none; opacity: 1; }
    .h-inset { clip-path: none; }
}