/* ==========================================================
   Xinnace — Marketing Site Stylesheet
   Fresh public-marketing CSS. Tokens reproduced from the app's
   design system (never imported). Reference variables everywhere.
   ========================================================== */

/* ---------------------------
   1) DESIGN TOKENS
---------------------------- */
:root {
    /* Brand */
    --brand: #3493a7;
    --brand-2: #2a818c;

    /* Surfaces */
    --ink-darkest: #06111d;
    --bg: #f0f5f9;
    --surface: #ffffff;
    --surface-2: #f7fafb;
    --border: rgba(52, 147, 167, 0.15);

    /* Text */
    --text: #0d1c2b;
    --text-muted: rgba(13, 28, 43, 0.60);
    --text-invert: #ffffff;
    --text-invert-muted: rgba(255, 255, 255, 0.66);

    /* States */
    --success: #16a34a;
    --danger: #ef4444;
    --warning: #f59e0b;

    /* Categorical accents */
    --c1: #12B5AB;
    --c2: #F59331;
    --c3: #1FAE6B;
    --c4: #2C8FD6;
    --c5: #E54B6F;
    --c6: #6E56F0;

    /* Radii */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(6, 17, 29, 0.06), 0 1px 2px rgba(6, 17, 29, 0.04);
    --shadow-md: 0 12px 30px rgba(6, 17, 29, 0.08), 0 4px 10px rgba(6, 17, 29, 0.05);
    --shadow-lg: 0 30px 60px rgba(6, 17, 29, 0.14), 0 10px 24px rgba(6, 17, 29, 0.08);
    --shadow-brand: 0 18px 40px rgba(52, 147, 167, 0.28);

    /* Layout */
    --maxw: 1180px;
    --gutter: clamp(20px, 5vw, 40px);
    --header-h: 72px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------
   2) RESET + BASE
---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 800;
}

p { margin: 0; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 2000;
    background: var(--brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    font-weight: 700;
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------
   3) LAYOUT UTILITIES
---------------------------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: clamp(56px, 9vw, 110px);
    position: relative;
}
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--dark {
    background: var(--ink-darkest);
    color: var(--text-invert);
}

.section-head {
    max-width: 720px;
    margin: 0 auto clamp(36px, 5vw, 60px);
    text-align: center;
}
.section-head--left {
    margin-inline: 0;
    text-align: left;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand);
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    margin-bottom: 18px;
}
.section--dark .eyebrow {
    color: var(--c1);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.section-title {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.section-sub {
    margin-top: 16px;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    color: var(--text-muted);
    line-height: 1.65;
}
.section--dark .section-sub { color: var(--text-invert-muted); }

.text-grad {
    background: linear-gradient(120deg, var(--brand) 0%, var(--c1) 60%, var(--c4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------------
   4) BUTTONS
---------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 14px 24px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease),
                background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn--sm { padding: 10px 16px; font-size: 0.86rem; }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(52, 147, 167, 0.34);
}

.btn--accent {
    background: var(--c1);
    border-color: var(--c1);
    color: #05221f;
    box-shadow: 0 16px 36px rgba(18, 181, 171, 0.3);
}
.btn--accent:hover { transform: translateY(-2px); filter: brightness(1.04); }

.btn--outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.btn--outline:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text);
}
.btn--ghost:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }

/* Buttons on dark surfaces */
.on-dark .btn--outline,
.btn--outline-light {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.on-dark .btn--outline:hover,
.btn--outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.on-dark .btn--ghost { color: rgba(255, 255, 255, 0.85); }
.on-dark .btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------------------------
   5) HEADER / NAV
---------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: var(--maxw);
}
/* Solid blur state — toggled by JS */
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}
/* On dark-masthead pages, start transparent w/ light text until scrolled.
   Covers the home hero (.hero) AND inner pages with a dark .about-hero.on-dark
   banner (Features / Pricing / About). :has() auto-covers any future dark page. */
body.page--home .site-header:not(.is-scrolled) .site-nav__link,
body.page--home .site-header:not(.is-scrolled) .brand__word,
body.page--home .site-header:not(.is-scrolled) .btn--sign-in,
body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .site-nav__link,
body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .brand__word,
body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .btn--sign-in {
    color: #fff;
}
body.page--home .site-header:not(.is-scrolled) .nav-toggle__bar,
body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .nav-toggle__bar { background: #fff; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.brand__word {
    font-size: 1.28rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.3s var(--ease);
}
.brand__word-accent {
    color: var(--brand-2);
    transition: color 0.3s var(--ease);
}
.brand__mark { flex-shrink: 0; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
}
.site-nav__link {
    display: inline-block;
    padding: 9px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--r-sm);
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.site-nav__link:hover { color: var(--brand); }
.site-nav__link.is-active { color: var(--brand); font-weight: 700; }

.site-nav__cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--r-sm);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav-toggle__bar {
    width: 22px; height: 2.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), background 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.site-main { display: block; }

/* ---------------------------
   6) HERO
---------------------------- */
.hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
    padding-bottom: clamp(60px, 9vw, 120px);
    background:
        radial-gradient(1200px 600px at 78% -10%, rgba(52, 147, 167, 0.45), transparent 60%),
        radial-gradient(900px 500px at 8% 20%, rgba(18, 181, 171, 0.22), transparent 55%),
        linear-gradient(165deg, var(--ink-darkest) 0%, #0a1d2e 48%, #103a45 100%);
    color: var(--text-invert);
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hero__copy { max-width: 600px; }
.hero__title {
    font-size: clamp(2.4rem, 5.4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
}
.hero__title .text-grad {
    background: linear-gradient(110deg, #fff 0%, var(--c1) 55%, #7fe6dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__sub {
    margin-top: 22px;
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 540px;
}
.hero__cta {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.hero__meta {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.88rem;
    font-weight: 500;
}
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 16px; height: 16px; color: var(--c1); }

/* ---------------------------
   7) BROWSER-FRAME MOCKUP
---------------------------- */
.mock {
    position: relative;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.mock--float { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); }
.mock__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.mock__dot { width: 11px; height: 11px; border-radius: 50%; background: #d6dee2; }
.mock__dot:nth-child(1) { background: #ef6b5e; }
.mock__dot:nth-child(2) { background: #f6c350; }
.mock__dot:nth-child(3) { background: #61c454; }
.mock__url {
    margin-left: 10px;
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    text-align: center;
    max-width: 260px;
}
.mock__body { padding: 16px; background: var(--bg); }

/* faux dashboard */
.dash {
    display: grid;
    grid-template-columns: 0.7fr 2fr;
    gap: 12px;
}
.dash__side {
    background: var(--ink-darkest);
    border-radius: var(--r-md);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dash__logo {
    height: 9px; width: 60%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--c1));
    margin-bottom: 8px;
}
.dash__navitem {
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
}
.dash__navitem--active { background: var(--c1); width: 85%; }
.dash__navitem:nth-child(3) { width: 70%; }
.dash__navitem:nth-child(4) { width: 80%; }
.dash__navitem:nth-child(5) { width: 60%; }
.dash__navitem:nth-child(6) { width: 75%; }
.dash__main { display: flex; flex-direction: column; gap: 12px; }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash__kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 11px;
    box-shadow: var(--shadow-sm);
}
.dash__kpi span {
    display: block;
    height: 6px; width: 60%;
    border-radius: 3px;
    background: rgba(13, 28, 43, 0.14);
    margin-bottom: 9px;
}
.dash__kpi b {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.dash__kpi:nth-child(1) b { color: var(--c1); }
.dash__kpi:nth-child(2) b { color: var(--c2); }
.dash__kpi:nth-child(3) b { color: var(--c4); }
.dash__chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}
.dash__chart-head {
    height: 7px; width: 38%;
    border-radius: 3px;
    background: rgba(13, 28, 43, 0.16);
    margin-bottom: 14px;
}
.dash__bars {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    height: 92px;
}
.dash__bar {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 40%, var(--surface)));
    animation: barGrow 1.1s var(--ease) both;
}
.dash__bar:nth-child(2) { background: linear-gradient(180deg, var(--c4), color-mix(in srgb, var(--c4) 40%, var(--surface))); animation-delay: 0.08s; }
.dash__bar:nth-child(3) { background: linear-gradient(180deg, var(--c3), color-mix(in srgb, var(--c3) 40%, var(--surface))); animation-delay: 0.16s; }
.dash__bar:nth-child(4) { background: linear-gradient(180deg, var(--c2), color-mix(in srgb, var(--c2) 40%, var(--surface))); animation-delay: 0.24s; }
.dash__bar:nth-child(5) { background: linear-gradient(180deg, var(--c6), color-mix(in srgb, var(--c6) 40%, var(--surface))); animation-delay: 0.32s; }
.dash__bar:nth-child(6) { background: linear-gradient(180deg, var(--c5), color-mix(in srgb, var(--c5) 40%, var(--surface))); animation-delay: 0.40s; }
@keyframes barGrow { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.dash__rows { display: flex; flex-direction: column; gap: 7px; }
.dash__row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 9px 11px;
    box-shadow: var(--shadow-sm);
}
.dash__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--c4)); flex-shrink: 0; }
.dash__row span { height: 6px; border-radius: 3px; background: rgba(13, 28, 43, 0.13); flex: 1; }
.dash__pill {
    height: 16px; width: 50px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--success) 18%, var(--surface));
    flex-shrink: 0;
}
.dash__pill--warn { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); }

/* floating glass badge over mockup */
.mock-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 11px 14px;
    box-shadow: var(--shadow-md);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.mock-badge svg { width: 20px; height: 20px; }
.mock-badge--tl { top: 8%; left: -8%; }
.mock-badge--br { bottom: 10%; right: -6%; }
.mock-badge__ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid; place-items: center;
    color: #fff;
}
.mock-badge--tl .mock-badge__ico { background: var(--c3); }
.mock-badge--br .mock-badge__ico { background: var(--c2); }
.mock-badge small { display: block; font-weight: 500; color: var(--text-muted); font-size: 0.72rem; }

/* ---------------------------
   8) TRUST STRIP
---------------------------- */
.trust {
    border-block: 1px solid var(--border);
    background: var(--surface);
}
.trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px clamp(24px, 5vw, 56px);
    padding-block: 26px;
}
.trust__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.trust__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}
.trust__item svg { width: 20px; height: 20px; color: var(--brand); }

/* ---------------------------
   9) FEATURE GRID (cards)
---------------------------- */
.grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 24px);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(20px, 2.6vw, 30px);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent, var(--brand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent, var(--brand)) 30%, var(--border));
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-ico {
    width: 52px; height: 52px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
}
.feature-ico svg { width: 26px; height: 26px; }
.feature-card h3 {
    font-size: 1.16rem;
    font-weight: 700;
    margin-bottom: 9px;
}
.feature-card p {
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}
.feature-card__list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.feature-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}
.feature-card__list svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent, var(--brand));
}

/* accent cycle helpers */
.acc-1 { --accent: var(--c1); }
.acc-2 { --accent: var(--c2); }
.acc-3 { --accent: var(--c3); }
.acc-4 { --accent: var(--c4); }
.acc-5 { --accent: var(--c5); }
.acc-6 { --accent: var(--c6); }

/* ---------------------------
   10) HOW IT WORKS
---------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 3vw, 34px);
    counter-reset: step;
}
.step {
    position: relative;
    padding-top: 14px;
}
.step__num {
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: var(--shadow-brand);
    margin-bottom: 18px;
}
.step:nth-child(2) .step__num { background: linear-gradient(135deg, var(--c1), var(--brand)); }
.step:nth-child(3) .step__num { background: linear-gradient(135deg, var(--c4), var(--c6)); }
.step h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 9px; }
.step p { color: var(--text-muted); line-height: 1.6; }

/* ---------------------------
   11) DEEP-DIVE ROWS
---------------------------- */
.deepdive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.deepdive + .deepdive { margin-top: clamp(48px, 7vw, 90px); }
.deepdive--rev .deepdive__media { order: -1; }
.deepdive__copy h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
}
.deepdive__copy p { color: var(--text-muted); line-height: 1.65; font-size: 1.02rem; }
.deepdive__list {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.deepdive__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 500;
}
.deepdive__list .tick {
    width: 24px; height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: #fff;
    background: var(--accent, var(--brand));
}
.deepdive__list .tick svg { width: 14px; height: 14px; }
.deepdive__cta { margin-top: 26px; }

.panelcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(18px, 2.4vw, 26px);
}
.panelcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.panelcard__title { font-size: 1rem; font-weight: 700; }
.panelcard__badge {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
}

/* EE bar chart mock */
.eebars { display: flex; flex-direction: column; gap: 13px; }
.eebar { display: grid; grid-template-columns: 90px 1fr 42px; gap: 12px; align-items: center; font-size: 0.84rem; }
.eebar__label { font-weight: 600; color: var(--text-muted); }
.eebar__track { height: 12px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.eebar__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent, var(--brand));
    transform-origin: left;
}
.eebar__val { font-weight: 800; text-align: right; color: var(--text); }

/* recruitment funnel mock */
.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--r-md);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: var(--shadow-sm);
}
.funnel__row b { font-size: 1.05rem; }
.funnel__row:nth-child(1) { background: linear-gradient(90deg, var(--c4), color-mix(in srgb, var(--c4) 70%, #fff)); width: 100%; }
.funnel__row:nth-child(2) { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #fff)); width: 86%; }
.funnel__row:nth-child(3) { background: linear-gradient(90deg, var(--c2), color-mix(in srgb, var(--c2) 70%, #fff)); width: 64%; }
.funnel__row:nth-child(4) { background: linear-gradient(90deg, var(--c3), color-mix(in srgb, var(--c3) 70%, #fff)); width: 42%; }
.funnel__qr {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.funnel__qr svg { width: 46px; height: 46px; color: var(--text); }
.funnel__qr span { font-size: 0.84rem; color: var(--text-muted); font-weight: 600; }

/* engagement mock */
.engage { display: grid; gap: 12px; }
.engage__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.engage__cell {
    border-radius: var(--r-md);
    padding: 16px;
    color: #fff;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 700;
}
.engage__stat { display: flex; flex-direction: column; gap: 4px; }
.engage__cell small { font-weight: 500; opacity: 0.85; font-size: 0.78rem; }
.engage__cell b { font-size: 1.3rem; }
.engage__cell:nth-child(1) { background: linear-gradient(135deg, var(--c5), color-mix(in srgb, var(--c5) 60%, var(--c2))); }
.engage__cell:nth-child(2) { background: linear-gradient(135deg, var(--c6), var(--c4)); }
.engage__cell:nth-child(3) { background: linear-gradient(135deg, var(--c1), var(--brand)); }
.engage__cell:nth-child(4) { background: linear-gradient(135deg, var(--c3), color-mix(in srgb, var(--c3) 60%, var(--c1))); }
.engage__ico svg { width: 22px; height: 22px; }

/* ---------------------------
   12) STATS BAND
---------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 3vw, 36px);
    text-align: center;
}
.stat__num {
    font-size: clamp(2.1rem, 4.4vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, var(--c1), #7fe6dd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat__label { margin-top: 8px; color: var(--text-invert-muted); font-weight: 500; }
.placeholder-note {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-invert-muted);
    font-style: italic;
    opacity: 0.7;
}

/* ---------------------------
   13) TESTIMONIALS
---------------------------- */
.quote-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(22px, 2.8vw, 30px);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}
.quote-card__mark { font-size: 2.6rem; line-height: 0.6; color: var(--brand); font-weight: 900; }
.quote-card blockquote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}
.quote-card__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), var(--c4));
    flex-shrink: 0;
}
.quote-card__name { font-weight: 700; font-size: 0.95rem; }
.quote-card__role { font-size: 0.82rem; color: var(--text-muted); }
.ph-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
    padding: 3px 9px;
    border-radius: var(--r-pill);
}

/* ---------------------------
   14) PRICING
---------------------------- */
.price-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 8px auto 0;
    justify-content: center;
}
.price-toggle__opt { font-weight: 700; color: var(--text-muted); font-size: 0.95rem; }
.price-toggle__opt.is-active { color: var(--text); }
.price-toggle__save {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    margin-left: 4px;
}
.switch {
    position: relative;
    width: 52px; height: 28px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--brand);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s var(--ease);
}
.switch__knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.22s var(--ease);
}
.switch[aria-pressed="true"] .switch__knob { transform: translateX(24px); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 26px);
    align-items: stretch;
}
.price-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card--featured {
    border-color: var(--brand);
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}
.price-card--featured:hover { transform: scale(1.02) translateY(-4px); }
.price-card__flag {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-brand);
}
.price-card__name { font-size: 1.25rem; font-weight: 800; }
.price-card__desc { margin-top: 6px; color: var(--text-muted); font-size: 0.92rem; min-height: 42px; }
.price-card__price {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.price-card__amt { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.price-card__per { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.price-card__note { margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }
.price-card .btn { margin-top: 22px; }
.price-card__features {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 22px;
}
.price-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 500;
}
.price-card__features svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--success); }

/* mini pricing teaser cards */
.price-mini {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.price-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-mini__name { font-weight: 800; font-size: 1.1rem; }
.price-mini__amt { margin-top: 10px; font-size: 1.9rem; font-weight: 800; color: var(--brand); }
.price-mini__per { color: var(--text-muted); font-size: 0.84rem; font-weight: 600; }
.price-mini p { margin-top: 8px; color: var(--text-muted); font-size: 0.9rem; }

/* comparison table */
.compare-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.compare {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    min-width: 640px;
}
.compare th, .compare td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.compare thead th {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    background: var(--surface-2);
}
.compare thead th:not(:first-child) { text-align: center; }
.compare td:not(:first-child) { text-align: center; }
.compare tbody td:first-child { font-weight: 600; color: var(--text); }
.compare .grp td {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand);
}
.compare .yes { color: var(--success); }
.compare .no { color: rgba(13, 28, 43, 0.25); }
.compare svg { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }

/* ---------------------------
   15) FAQ ACCORDION
---------------------------- */
.faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.faq__item.is-open { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.faq__q {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}
.faq__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    transition: transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
}
.faq__a-inner { padding: 0 20px 20px; color: var(--text-muted); line-height: 1.65; }

/* ---------------------------
   16) CTA BAND
---------------------------- */
.cta-band {
    position: relative;
    border-radius: var(--r-lg);
    background:
        radial-gradient(800px 400px at 80% 0%, rgba(52, 147, 167, 0.5), transparent 60%),
        linear-gradient(135deg, var(--ink-darkest), #0e2f3a);
    color: #fff;
    padding: clamp(36px, 6vw, 70px);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.cta-band::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
.cta-band p { margin-top: 14px; color: rgba(255, 255, 255, 0.78); font-size: 1.08rem; max-width: 560px; margin-inline: auto; }
.cta-band__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------------------------
   17) FORMS / LEAD PAGES
---------------------------- */
.lead {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: start;
}
.lead__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.lead__aside h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); letter-spacing: -0.03em; }
.lead__aside p { margin-top: 16px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; }
.lead__points { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.lead__point { display: flex; gap: 14px; align-items: flex-start; }
.lead__point-ico {
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    flex-shrink: 0;
    display: grid; place-items: center;
    color: #fff;
}
.lead__point:nth-child(1) .lead__point-ico { background: var(--c1); }
.lead__point:nth-child(2) .lead__point-ico { background: var(--c4); }
.lead__point:nth-child(3) .lead__point-ico { background: var(--c3); }
.lead__point-ico svg { width: 20px; height: 20px; }
.lead__point h3 { font-size: 1rem; font-weight: 700; }
.lead__point p { margin-top: 3px; font-size: 0.92rem; color: var(--text-muted); }

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(24px, 3.4vw, 38px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.field .req { color: var(--danger); }
.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 13px 14px;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.field--error input,
.field--error select,
.field--error textarea {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}
.field__err {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 6px;
}
.field__err svg { width: 14px; height: 14px; flex-shrink: 0; }

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 22px;
}
.form-alert svg { width: 20px; height: 20px; flex-shrink: 0; }

.form-foot {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-fineprint { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.form-fineprint a { color: var(--brand); font-weight: 600; }

/* visually-hidden honeypot */
.hp-field {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* contact details strip */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.contact-cards .feature-card h3 { font-size: 1rem; }
.contact-cards a { color: var(--brand); font-weight: 700; word-break: break-word; }

/* ---------------------------
   18) THANK-YOU / 404
---------------------------- */
.centered-hero {
    min-height: calc(100vh - var(--header-h));
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: clamp(60px, 12vh, 140px);
    background:
        radial-gradient(800px 500px at 50% -10%, rgba(52, 147, 167, 0.18), transparent 60%);
}
.centered-hero__inner { max-width: 620px; margin-inline: auto; }
.centered-hero__badge {
    width: 84px; height: 84px;
    border-radius: 24px;
    display: grid; place-items: center;
    margin: 0 auto 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--success), var(--c1));
    box-shadow: 0 20px 44px rgba(22, 163, 74, 0.32);
}
.centered-hero__badge--info { background: linear-gradient(135deg, var(--brand), var(--c4)); box-shadow: var(--shadow-brand); }
.centered-hero__badge svg { width: 40px; height: 40px; }
.centered-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.03em; }
.centered-hero p { margin-top: 18px; color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; }
.centered-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.error-code {
    font-size: clamp(5rem, 18vw, 11rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
    background: linear-gradient(120deg, var(--brand), var(--c1), var(--c4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------------
   19) ABOUT
---------------------------- */
.about-hero {
    background:
        radial-gradient(900px 480px at 75% -10%, rgba(52, 147, 167, 0.4), transparent 60%),
        linear-gradient(160deg, var(--ink-darkest), #0c2b36);
    color: #fff;
    padding-top: calc(var(--header-h) + clamp(46px, 7vw, 86px));
    padding-bottom: clamp(46px, 7vw, 86px);
}
.about-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.035em; max-width: 720px; }
.about-hero p { margin-top: 20px; color: rgba(255, 255, 255, 0.8); font-size: 1.15rem; max-width: 620px; line-height: 1.6; }

.value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card__ico {
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    margin-bottom: 16px;
    color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
}
.value-card__ico svg { width: 24px; height: 24px; }
.value-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.value-card p { color: var(--text-muted); line-height: 1.6; }

.sa-panel {
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(26px, 4vw, 44px);
    box-shadow: var(--shadow-sm);
}
.sa-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sa-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}
.sa-tag svg { width: 16px; height: 16px; color: var(--brand); }

/* ---------------------------
   20) FEATURES PAGE
---------------------------- */
.feat-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.feat-toc a {
    padding: 9px 16px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.feat-toc a:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }

.feat-group { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 20px); }
.feat-group:first-of-type { border-top: 0; }
.feat-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.feat-group__ico {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    flex-shrink: 0;
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, var(--brand)), color-mix(in srgb, var(--accent, var(--brand)) 55%, var(--ink-darkest)));
    box-shadow: var(--shadow-md);
}
.feat-group__ico svg { width: 28px; height: 28px; }
.feat-group__head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.025em; }
.feat-group__head p { color: var(--text-muted); margin-top: 5px; }

/* ---------------------------
   21) FOOTER
---------------------------- */
.site-footer {
    background: var(--ink-darkest);
    color: rgba(255, 255, 255, 0.72);
    padding-top: clamp(48px, 7vw, 80px);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
    gap: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(36px, 5vw, 56px);
}
.site-footer .brand__word { color: #fff; }
.site-footer__tagline {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 30ch;
}
.site-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.site-footer__social a {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.site-footer__social a:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
}
.site-footer__heading {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.site-footer__col a {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.16s var(--ease);
}
.site-footer__col a:hover { color: var(--c1); }
.site-footer__contact .btn { margin-top: 18px; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.site-footer__contact .btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }
.site-footer__muted { color: rgba(255, 255, 255, 0.45); font-size: 0.86rem; }
.site-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------
   22) SCROLL REVEAL
---------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* Lock scroll when the mobile menu is open.
   iOS Safari ignores overflow:hidden on <body>, so the page kept scrolling
   underneath the open panel. position:fixed is the only reliable lock; site.js
   stores the offset in body.style.top and restores it on close so the page does
   not jump back to the top. */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    left: 0;
    width: 100%;
}

/* ---------------------------
   23) RESPONSIVE
---------------------------- */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__media { max-width: 540px; }
    .mock--float { transform: none; }
    .mock-badge--tl { left: 2%; }
    .mock-badge--br { right: 2%; }
    .lead { grid-template-columns: 1fr; }
    .lead__aside { position: static; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    /* The panel is positioned ABSOLUTELY against .site-header, never fixed.
       .site-header.is-scrolled carries a backdrop-filter, and a backdrop-filter
       makes an element the containing block for its position:fixed descendants.
       A fixed panel therefore resolved top/bottom against the 72px header once
       the page was scrolled and collapsed to zero height, so the menu opened as
       an empty sliver. Absolute positioning always resolves against the header
       (which is itself fixed), so the panel behaves the same scrolled or not.
       The wrappers between the two must stay unpositioned or they would become
       the containing block instead and the panel would inherit the 1180px
       max-width and gutters of .container. */
    .site-header__inner { position: static; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 22px var(--gutter) 40px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform 0.3s var(--ease), visibility 0.3s var(--ease);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Off-screen is not the same as gone: without these the closed panel
           still answers taps and screen readers along the right edge. */
        visibility: hidden;
        pointer-events: none;
    }
    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    /* With the panel open the header sits directly on top of a solid white
       sheet, so it has to be solid too. On the home page it was a transparent
       strip of hero with white burger bars that vanished against the menu. */
    body.no-scroll .site-header:not(.is-scrolled) {
        background: var(--surface);
        border-bottom-color: var(--border);
    }
    body.no-scroll .site-header:not(.is-scrolled) .brand__word { color: var(--text); }
    body.no-scroll .site-header:not(.is-scrolled) .nav-toggle__bar { background: var(--text); }
    /* gap:2px left a hairline break between each divider; 0 stacks them into
       one continuous rule down the panel. */
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav__link {
        /* The base rule is display:inline-block, sized for the desktop row, and
           the mobile block never overrode it. The anchor therefore shrink-wrapped
           its text, so each divider stopped at the end of the word instead of
           running across the panel, and only the word itself was tappable. */
        display: block;
        padding: 15px 8px;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        color: var(--text);
    }
    /* No dangling rule left hanging above the Book a demo button. */
    .site-nav__list li:last-child .site-nav__link { border-bottom: 0; }
    .site-nav__cta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
    .site-nav__cta .btn { width: 100%; }
    /* Force dark-text nav on the dark-masthead pages when the menu is open.
       This override already existed but never won a single time: it was written
       as `body.page--home .site-header .site-nav__link` (0,3,1) against the
       dark-masthead rule up in section 5, which carries an extra `:not(.is-scrolled)`
       and so scores (0,4,1). A media query adds no specificity, so the panel
       opened with #fff links on the #fff --surface sheet and read as blank.
       Match the specificity exactly, including the :has() variant for Features,
       About and the other dark banners, so source order decides it. */
    body.page--home .site-header:not(.is-scrolled) .site-nav__link,
    body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .site-nav__link {
        color: var(--text);
    }
    /* .is-active is only (0,2,0) and was buried by the same rule, so the current
       page lost its brand highlight in the panel too. */
    body.page--home .site-header:not(.is-scrolled) .site-nav__link.is-active,
    body:has(.about-hero.on-dark) .site-header:not(.is-scrolled) .site-nav__link.is-active {
        color: var(--brand);
    }
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .deepdive { grid-template-columns: 1fr; }
    .deepdive--rev .deepdive__media { order: 0; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
    .price-card--featured { transform: none; }
    .price-card--featured:hover { transform: translateY(-4px); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .hero__cta .btn, .cta-band__actions .btn, .centered-hero__actions .btn { width: 100%; }
    .stats { grid-template-columns: 1fr 1fr; }
    .engage__cards { grid-template-columns: 1fr; }
    .trust__inner { gap: 12px 24px; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------
   14) LEGAL / POLICY PAGES  (privacy, terms, paia)
   Long-form readable prose; narrower measure than the marketing grid.
---------------------------- */
.legal {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-muted);
}
.legal h2 {
    margin: 40px 0 14px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}
.legal h3 {
    margin: 26px 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.legal p { margin-bottom: 14px; }
.legal ul {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: disc;
}
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); }

/* Pulled-out contact/address blocks */
.legal__block {
    padding: 16px 18px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    line-height: 1.7;
}

/* The operator-vs-responsible-party callout at the top */
.legal__callout {
    padding: 22px 24px;
    margin-bottom: 34px;
    border-radius: var(--r-md, 14px);
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.legal__callout h2 { font-size: 1.15rem; margin-bottom: 10px; }

/* ---------------------------
   21) DEMO BOOKING (/demo)
---------------------------- */
.booking__title { font-size: 1.35rem; letter-spacing: -0.02em; }
.booking__note {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}
/* The Google booking page is its own scrolling document; give it a framed,
   rounded well so it reads as part of the card rather than a bolted-on iframe. */
.booking__frame {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
    background: #fff;
}
.booking__frame iframe { display: block; width: 100%; min-height: 620px; }
.booking__fallback {
    margin-top: 16px;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.booking__fallback a { color: var(--brand); font-weight: 700; }

@media (max-width: 620px) {
    .booking__frame iframe { min-height: 560px; }
}

/* ---------------------------
   22) TRUST / SECURITY (/security)
---------------------------- */
/* Control summary strip: the five things a reviewer checks before deciding
   whether to read the cards. Wraps rather than scrolls, so nothing hides. */
.trust-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(22px, 3vw, 30px);
}
.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.trust-chip svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
    margin-top: clamp(26px, 3.5vw, 40px);
}
.trust-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
    padding: clamp(22px, 2.6vw, 30px);
}
.trust-card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    margin-bottom: 14px;
}
.trust-card__ico svg { width: 21px; height: 21px; }
.trust-card h2 { font-size: 1.12rem; letter-spacing: -0.02em; }
.trust-card p { margin-top: 10px; color: var(--text-muted); line-height: 1.65; font-size: 0.96rem; }
.trust-card ul { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.trust-card li {
    position: relative;
    padding-left: 22px;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}
.trust-card li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
}
.trust-card strong { color: var(--text); font-weight: 700; }

/* Version + last-reviewed line. Quiet on purpose: it is evidence the page is
   maintained, not a claim, so it should not compete with the cards. */
.trust-meta {
    margin-top: clamp(20px, 2.4vw, 28px);
    color: var(--text-muted);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
}

@media (max-width: 820px) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* ---------------------------
   23) MEET THE FOUNDER (/about)
---------------------------- */
.founder {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
    margin-top: clamp(26px, 3.5vw, 40px);
}
/* The whole identity block is centred on its column, so the portrait sits
   centred over the name rather than the name hanging off its left edge. */
/* align-self keeps the sticky behaviour: a stretched grid item is already full
   row height, so it would have nothing to scroll against. */
.founder__media {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    text-align: center;
}

/* The bio column stretches to the full row height so the "Why Xinnace?"
   callout can grow to finish level with the COPC badge, instead of leaving the
   left column hanging below it. */
.founder__copy { display: flex; flex-direction: column; }

/* Square crop with a soft brand wash behind it, so a photo shot on a plain
   studio background does not read as a floating cut-out. */
.founder__photo {
    /* <figure> carries a UA default of `margin: 1em 40px`, which inset the
       portrait and left it narrower than, and out of line with, the name
       beneath it. Nothing else in the stylesheet resets figure. */
    margin: 0;
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--brand) 4%, transparent));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
}
.founder__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 22%;   /* keep the face in frame on tall crops */
    display: block;
}
.founder__monogram {
    font-size: clamp(3rem, 7vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--brand) 55%, transparent);
}
.founder__id { margin-top: 18px; }
.founder__id h3 { font-size: 1.22rem; letter-spacing: -0.02em; }
.founder__id > p {
    margin-top: 3px;
    color: var(--brand);
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.founder__creds { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.founder__creds li {
    position: relative;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.founder__creds li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.5em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
}
.founder__copy p {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.72;
}
.founder__copy p + p { margin-top: 16px; }

/* The origin story, set apart so it reads as the "why" rather than more bio. */
.founder__why {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: clamp(24px, 3vw, 34px);
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--r-md, 14px);
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.founder__why h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.founder__why p { margin-top: 12px; }

@media (max-width: 860px) {
    .founder { grid-template-columns: 1fr; }
    .founder__media {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
        gap: 20px;
        align-items: center;
    }
    /* Photo beside the name on tablet, so left-align reads better than the
       centring used in the narrow desktop column. */
    .founder__media { text-align: left; }
    .founder__id { margin-top: 0; }
    .founder__creds,
    .founder__cert { align-items: flex-start; }
}
@media (max-width: 520px) {
    /* Stacked again on phones, so centring is right once more. */
    .founder__media { grid-template-columns: 1fr; text-align: center; }
    .founder__photo { max-width: 220px; margin-inline: auto; }
    .founder__creds,
    .founder__cert { align-items: center; }
}

/* COPC certification badge, sits under the founder credentials. */
/* Stacked rather than side by side: side by side capped the badge at roughly
   a third of the 300px column and squeezed the credential onto three cramped
   lines. Stacking lets the badge be substantial AND gives the text the full
   column width, so it sets on two comfortable lines. */
.founder__cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.founder__cert-badge {
    flex-shrink: 0;
    width: 152px; height: 152px;
    object-fit: contain;
}
.founder__cert-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.founder__cert-text strong {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.founder__cert-text span {
    font-size: 0.94rem;
    color: var(--text-muted);
    line-height: 1.45;
}