/* ============================================================
   Askpilot V8 — cinematic centered skin.
   Inspiration: Mercury (atmosphere, product inside a world),
   Attio (giant centred type, radical whitespace),
   Gojiberry (warm cream, craft details, product as a stage).
   The #FFA7FF family lives in the atmosphere, not the chrome.
   ============================================================ */

:root {
    --cream: #FCF9F7;
    --surface: #FFFFFF;
    --ink: #16121A;
    --body: #4E4854;
    --muted: #8B8492;
    --line: #EAE3E1;
    --soft: #F4EFED;

    --brand-orange: #E6763B;
    --brand-blue: #4C6BEE;
    --brand-magenta: #D53BD5;

    --pink-wash: #FFF3FF;
    --pink-surface: #FFD9FF;
    --pink-core: #FFA7FF;
    --pink-deep: var(--brand-magenta);
    --pink-strong: #D96FD9;

    --ok-fg: #1F6B49; --ok-bg: #E3F5EA;

    --font-sans: "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;

    --r-input: 12px;
    --r-panel: 16px;
    --r-stage: 34px;

    --shadow-desk: 0 40px 90px -30px rgba(38, 20, 40, 0.28), 0 4px 14px rgba(38, 20, 40, 0.06);
    --shadow-low: 0 8px 30px rgba(38, 20, 40, 0.08);

    --t-fast: 160ms;
    --t-ui: 240ms;
    --t-state: 420ms;
    --ease-state: ease-in-out;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--body);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 767px) { .wrap, .wrap-wide { padding: 0 16px; } }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--ink); color: #fff; padding: 10px 16px;
    border-radius: 10px; text-decoration: none; font-size: 0.9375rem;
    transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--pink-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 18px;
    border-radius: 16px; border: 1px solid transparent;
    font-size: 0.9375rem; font-weight: 500; text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2B2430; transform: translateY(-1px); box-shadow: var(--shadow-low); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--soft); }
.btn-lg { min-height: 42px; padding: 0 20px; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn-nav { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }

.icon-btn {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    color: var(--ink);
}
.icon-btn:hover { background: var(--soft); }
.icon-btn svg { width: 15px; height: 15px; fill: currentColor; }
.icon-btn svg[fill="none"] { fill: none; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 68px; }
.nav-logo img { height: 23px; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links > a {
    font-size: 0.9375rem; font-weight: 600; color: var(--body);
    text-decoration: none; padding: 8px 14px; border-radius: 999px;
}
.nav-links > a:hover { color: var(--ink); background: var(--soft); }

/* primary CTA arrow nudges right on hover, exactly like index */
.btn-arrow { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-arrow { transition: none; } .btn:hover .btn-arrow { transform: none; } }

/* burger + slide-in menu (mobile only) */
.nav-burger {
    display: none; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 10px; color: var(--ink);
}
.nav-burger svg { width: 24px; height: 24px; }
.nav-burger:hover { background: var(--soft); }
.nav-menu { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; background: transparent; }
.nav-menu::backdrop { background: rgba(22, 18, 26, 0.24); }
.nav-menu-panel {
    position: fixed; inset: 0 0 0 auto; width: min(100%, 360px);
    background: var(--cream); padding: 14px 20px 24px;
    display: flex; flex-direction: column;
    box-shadow: -20px 0 60px rgba(22, 18, 26, 0.18);
}
.nav-menu-head { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.nav-menu-head img { height: 23px; }
.nav-menu-links { display: flex; flex-direction: column; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; gap: 2px; }
.nav-menu-links a {
    font-size: 1.0625rem; font-weight: 650; color: var(--ink);
    text-decoration: none; padding: 12px 10px; border-radius: 12px;
}
.nav-menu-links a:hover { background: var(--soft); }

/* mobile menu accordion for Use cases (native <details>) */
.nav-menu-acc { border-radius: 14px; }
.nav-menu-acc > summary {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1.0625rem; font-weight: 650; color: var(--ink);
    padding: 12px 10px; border-radius: 12px;
    cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.nav-menu-acc > summary::-webkit-details-marker { display: none; }
.nav-menu-acc > summary:hover { background: var(--soft); }
/* no default blue ring on tap; keep a visible ring for keyboard users */
.nav-menu-acc > summary:focus { outline: none; }
.nav-menu-acc > summary:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.nav-menu-acc-chev { width: 15px; height: 15px; color: var(--muted); transition: transform 0.2s ease; }
.nav-menu-acc[open] > summary .nav-menu-acc-chev { transform: rotate(180deg); }
/* open: the whole group becomes one soft container, links are white cards */
.nav-menu-acc[open] { background: var(--soft); padding-bottom: 8px; }
.nav-menu-acc[open] > summary { background: transparent; }
.nav-menu-acc-item {
    display: flex; flex-direction: column; gap: 2px;
    margin: 0 8px; padding: 11px 13px;
    border-radius: 10px; text-decoration: none;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04);
}
.nav-menu-acc-item + .nav-menu-acc-item { margin-top: 6px; }
.nav-menu-acc-item:hover { background: var(--pink-wash); border-color: var(--pink-surface); }
.nav-menu-acc-title { font-size: 0.9688rem; font-weight: 650; color: var(--ink); }
.nav-menu-acc-sub { font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }
.nav-menu-cta { margin-top: 22px; }
@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-in { gap: 12px; }
    .nav-logo img { height: 20px; }
    /* the nav CTA stays visible on mobile (logo, CTA, burger) */
    .nav .btn-nav {
        margin-left: auto; padding: 0 13px; font-size: 0.78rem;
        min-height: 36px; white-space: nowrap;
    }
    .nav .btn-nav .btn-arrow { display: none; }
    .nav-burger { display: inline-flex; margin-left: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .nav .btn-nav { transition: none; } }

/* ---------- hero copy (centred, huge) ---------- */
.hero { padding: 72px 0 110px; }
@media (max-width: 767px) { .hero { padding: 40px 0 72px; } }

.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 700; color: var(--body);
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px;
}
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-core); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-core) 30%, transparent); }
.hero-title {
    margin-top: 26px;
    font-size: 6rem;   /* matches subpage h1 (text-8xl) */
    font-weight: 800; line-height: 0.99; letter-spacing: -0.035em;
    color: var(--ink);
}
.hero-desc {
    margin-top: 24px;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 450; color: var(--body); max-width: 36em;
}
.hero-cta-row {
    margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    opacity: 0; transform: translateY(8px);
    animation: thesis-up 480ms cubic-bezier(0.16, 1, 0.3, 1) 2900ms forwards;
}
.hero-reassure { margin-top: 20px; font-size: 0.8125rem; color: var(--muted); max-width: 44em; }


/* ============================================================
   The thesis line and the living board
   ============================================================ */

/* thesis: the old way types in, gets struck, the new way settles */
.thesis { margin-top: 24px; text-align: center; }
.thesis-old {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 500; color: var(--muted); line-height: 1.3;
    opacity: 0; animation: thesis-in 500ms ease 300ms forwards;
}
.thesis-old span { position: relative; white-space: nowrap; }
.thesis-old span::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 52%;
    height: 2px; background: var(--ink); border-radius: 0;
    transform: scaleX(0); transform-origin: left center;
    animation: thesis-strike 460ms cubic-bezier(0.6, 0, 0.3, 1) 1300ms forwards;
}
.thesis-new {
    margin-top: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.4rem, 2.3vw, 1.875rem);
    font-weight: 700; color: var(--brand-magenta); letter-spacing: -0.015em; line-height: 1.25;
}
/* the winning line gets its tick first, then the words */
.thesis-check {
    flex: none; overflow: hidden;
    display: grid; place-items: center;
    width: 22px; height: 22px; margin-right: 10px;
    border-radius: 50%; background: var(--brand-magenta); color: #fff;
    opacity: 0; transform: scale(0.3);
    /* pop in at 1850ms, hold, then fade + collapse away around 4300ms
       so the pink line slides left to fill the gap */
    animation: thesis-check-pop 460ms cubic-bezier(0.2, 0.9, 0.3, 1.45) 1850ms forwards;
}
.thesis-check svg { width: 62%; height: 62%; }
.thesis-check svg path {
    stroke-dasharray: 14; stroke-dashoffset: 14;
    animation: thesis-check-draw 340ms ease-out 2080ms forwards;
}
.thesis-new-text {
    display: inline-block;
    opacity: 0; transform: translateY(6px);
    animation: thesis-up 520ms cubic-bezier(0.16, 1, 0.3, 1) 2350ms forwards;
}
@keyframes thesis-check-pop {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes thesis-check-draw { to { stroke-dashoffset: 0; } }
/* mobile hero: three-line title, smaller struck line, tighter CTA */
.m-br { display: none; }
/* mobile: hero copy left-aligned (matches the subpage heroes) */
@media (max-width: 640px) {
    .hero-copy { text-align: left; align-items: stretch; }
    .thesis { text-align: left; }
    .thesis-new { justify-content: flex-start; }
    .hero-cta-row { justify-content: flex-start; }
}
@media (max-width: 540px) {
    .m-br { display: inline; }
    .thesis-old span::after { height: 1px; background: var(--ink); }
    .thesis-new { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
    .thesis-check { display: none; }
    .nav .btn-nav { padding: 0 14px; font-size: 0.8125rem; }
}

@keyframes thesis-in { to { opacity: 1; } }
@keyframes thesis-strike { to { transform: scaleX(1); } }
@keyframes thesis-up { to { opacity: 1; transform: none; } }
@keyframes vs-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .thesis-old { animation: none; opacity: 1; }
    .thesis-old span::after { animation: none; transform: scaleX(1); }
    .thesis-new { animation: none; opacity: 1; transform: none; }
    }


/* ============================================================
   The versus module: ChatGPT (one request) vs Askpilot (live
   process activity). Indigo carries activity, pink carries the
   approval moment, the left panel is deliberately flat grey.
   ============================================================ */
.vs {
    margin-top: 44px;
    opacity: 0; transform: translateY(16px);
    animation: vs-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 2850ms forwards;
}
@media (prefers-reduced-motion: reduce) { .vs { animation: none; opacity: 1; transform: none; } }

.vs-head { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vs-hchip {
    font-size: 0.8125rem; font-weight: 700;
    background: var(--soft); color: var(--body);
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.vs-hchip.is-live { background: #EEF0FD; color: #3F3AB6; border-color: #DDE0F8; }
.vs-word { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

.vs-grid {
    margin-top: 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    align-items: start; text-align: left;
}
@media (max-width: 900px) { .vs-grid { grid-template-columns: 1fr; } }

.vs-panel { border-radius: 20px; padding: 20px 22px; }
.vs-left { background: var(--soft); border: 1px solid var(--line); }
.vs-right { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-low); }

.vs-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vs-kicker { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vs-name { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.vs-name img { width: 18px; height: 18px; }
.vs-state {
    flex: none; font-size: 0.75rem; font-weight: 750;
    background: #fff; color: var(--body);
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.vs-state.is-live { background: #EEF0FD; color: #3F3AB6; border-color: #DDE0F8; }
.vs-state.is-appr { background: var(--pink-wash); color: var(--pink-deep); border-color: var(--pink-surface); }
.vs-state.is-done { background: var(--ok-bg); color: var(--ok-fg); border-color: #CBEBD7; }

.vs-label {
    margin-top: 18px;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
}
.vs-caption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 750; color: var(--ink); }
.vs-right .vs-caption { border-top-color: var(--soft); }
.gpt-stage[hidden] { display: none; }

/* left: chat anatomy */
.gpt-prompt {
    margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--line);
    font-size: 1rem; color: var(--ink); font-weight: 550; min-height: 1.6em;
}
.gpt-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -0.15em; margin-left: 1px; animation: gpt-blink 900ms steps(1) infinite; }
@keyframes gpt-blink { 50% { opacity: 0; } }
.gpt-answer {
    margin-top: 8px; padding-left: 12px; border-left: 3px solid #B9B3BE;
    font-size: 0.9375rem; color: var(--body); line-height: 1.6;
}
.gpt-tail { margin-top: 18px; }
.gpt-tail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gpt-tail-head span:first-child { font-size: 1rem; font-weight: 750; color: var(--ink); }
.gpt-tail-note { font-size: 0.75rem; color: var(--muted); }
.gpt-jobs { list-style: none; margin: 6px 0 0; padding: 0; }
.gpt-jobs li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 2px; border-bottom: 1px solid var(--line);
    font-size: 0.9375rem; color: var(--ink); font-weight: 550;
    opacity: 0; transform: translateY(4px);
    transition: opacity 300ms ease, transform 300ms ease;
}
.gpt-jobs li.is-in { opacity: 1; transform: none; }
.gpt-jobs li:last-child { border-bottom: none; }
.gpt-you { flex: none; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }

/* right: live activity */
.ap-when { margin-top: 6px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ap-noprompt { font-weight: 500; color: var(--muted); font-size: 0.875rem; }
.ap-procs { list-style: none; margin: 14px 0 0; padding: 0; }
.ap-proc { border-top: 1px solid var(--soft); padding: 12px 2px; }
.ap-proc-row { display: flex; align-items: center; gap: 12px; }
.ap-proc-main { flex: 1; min-width: 0; }
.ap-proc-name { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 750; color: var(--ink); }
.ap-proc-chip {
    font-size: 0.6875rem; font-weight: 750; border-radius: 999px; padding: 3px 9px;
    background: var(--pink-wash); color: var(--pink-deep); border: 1px solid var(--pink-surface);
}
.ap-proc-chip.is-done { background: var(--ok-bg); color: var(--ok-fg); border-color: #CBEBD7; }
.ap-proc-status { margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.ap-segs { flex: none; display: flex; gap: 4px; }
.ap-seg { width: 20px; height: 5px; border-radius: 3px; background: var(--soft); transition: background 400ms ease; }
.ap-seg.is-on { background: var(--brand-blue); }

/* the inline expansion */
.ap-detail { display: none; margin-top: 12px; }
.ap-proc.is-open .ap-detail { display: block; animation: ap-detail-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ap-detail-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ap-checks { list-style: none; margin: 0; padding: 0; }
.ap-checks li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-top: 1px solid var(--soft);
    font-size: 0.9375rem; color: var(--ink); font-weight: 550;
    opacity: 0; transition: opacity 300ms ease;
}
.ap-checks li.is-in { opacity: 1; }
.ap-check-mark { flex: none; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ap-checks li.is-done .ap-check-mark { background: #10B981; color: #fff; }
.ap-checks li.is-open-item .ap-check-mark { border: 2px solid var(--line); background: #fff; }
.ap-check-mark svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-checks li.is-open-item { color: var(--body); }
.ap-time { margin-left: auto; font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-ask { margin-top: 12px; }
.ap-ask-q { font-size: 1rem; font-weight: 750; color: var(--ink); line-height: 1.45; }
.ap-ask-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ap-approve {
    border: none; background: var(--ink); color: #fff; cursor: pointer;
    border-radius: 999px; padding: 11px 18px; font-size: 0.875rem; font-weight: 750;
}
.ap-approve:hover { background: #2B2430; }
.ap-review {
    border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
    border-radius: 999px; padding: 11px 18px; font-size: 0.875rem; font-weight: 750;
}
.ap-review:hover { background: var(--soft); }
.ap-approved {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.875rem; font-weight: 800; color: var(--ok-fg);
    background: var(--ok-bg); border-radius: 999px; padding: 11px 16px;
}
.ap-approved svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-pulse { animation: ap-pulse 1.6s ease-in-out infinite; }
@keyframes ap-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 167, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 167, 255, 0.35); } }
@media (prefers-reduced-motion: reduce) {
    .gpt-caret { animation: none; }
    .ap-pulse { animation: none; }
    .gpt-jobs li, .ap-checks li { opacity: 1; transform: none; }
}

.vs-reassure {
    margin-top: 14px; text-align: center; margin-left: auto; margin-right: auto;
    opacity: 0; animation: thesis-in 500ms ease 3400ms forwards;
}

/* ============================================================
   Product-led comparison using the real Askpilot app anatomy
   ============================================================ */
.compare-real {
    margin-top: 64px;
    text-align: left;
}

.compare-real-intro {
    max-width: 760px;
    margin: 0 auto 26px;
    text-align: center;
}

.compare-real-eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink-deep);
}

.compare-real-intro h2 {
    margin-top: 9px;
    font-size: clamp(1.8rem, 3.7vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
    color: var(--ink);
}

.compare-real-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
    gap: 18px;
    align-items: stretch;
}

.compare-real-product {
    min-width: 0;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-low);
}

.compare-real-chat {
    display: flex;
    flex-direction: column;
    background: #F7F7F8;
}

.compare-real-chatapp {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
}

.compare-real-chat-sidebar {
    min-width: 0;
    padding: 14px 9px;
    border-right: 1px solid #DEDED9;
    background: #EDEDE9;
}

.compare-real-chat-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 5px 14px;
    color: var(--ink);
    font-size: 0.75rem;
}

.compare-real-chat-sidebar .compare-real-chatmark {
    width: 23px;
    height: 23px;
    font-size: 0.6875rem;
}

.compare-real-chat-nav {
    padding: 7px 6px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 7px;
    color: var(--body);
    font-size: 0.625rem;
    font-weight: 700;
}

.compare-real-chat-nav span {
    width: 13px;
    color: var(--muted);
    text-align: center;
}

.compare-real-chat-history-label {
    margin: 19px 6px 6px;
    color: var(--muted);
    font-size: 0.5625rem;
    font-weight: 800;
}

.compare-real-chat-history {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    list-style: none;
}

.compare-real-chat-history li {
    padding: 7px 6px;
    overflow: hidden;
    border-radius: 7px;
    color: var(--body);
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.compare-real-chat-history li.is-selected {
    background: #DDDDD8;
    color: var(--ink);
}

.compare-real-chat-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.compare-real-threadbar {
    min-height: 54px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    border-bottom: 1px solid var(--line);
}

.compare-real-threadbar strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-real-thread-menu {
    flex: none;
    color: var(--muted);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

.compare-real-chatbar,
.compare-real-apbar {
    min-height: 62px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
}

.compare-real-chatbrand,
.compare-real-apbrand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.compare-real-chatmark,
.compare-real-avatar.is-chat {
    background: #111;
    color: #fff;
}

.compare-real-chatmark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.compare-real-apbrand img {
    width: 22px;
    height: 22px;
}

.compare-real-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--body);
    font-size: 0.6875rem;
    font-weight: 800;
}

.compare-real-chip.is-running {
    border-color: #DDE0F8;
    background: #EEF0FD;
    color: #3F3AB6;
}

.compare-real-chip.is-complete,
.compare-real.is-complete .compare-real-work-status {
    border-color: #CBEBD7;
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.compare-real-run-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5B5CE2;
    box-shadow: 0 0 0 0 rgba(91, 92, 226, 0.28);
    animation: compare-real-pulse 1.8s ease-in-out infinite;
}

@keyframes compare-real-pulse {
    50% { box-shadow: 0 0 0 5px rgba(91, 92, 226, 0); }
}

.compare-real-chatbody {
    flex: 1;
    padding: 26px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.compare-real-message {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

.compare-real-message.is-user-message {
    max-width: 92%;
    margin-left: auto;
    padding: 10px 12px;
    display: block;
    border-radius: 14px;
    background: #F1F1F1;
}

.compare-real-message.is-user-message p {
    color: var(--ink);
    line-height: 1.5;
}

.compare-real-message strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 0.8125rem;
}

.compare-real-message p {
    color: var(--body);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.compare-real-chat-tools {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #99979D;
    font-size: 0.6875rem;
}

.compare-real-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
}

.compare-real-avatar.is-user {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.compare-real-chat-state {
    margin-top: auto;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.compare-real-state-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.compare-real-chat-state span:last-child,
.compare-real-trigger span:last-child,
.compare-real-agent-line span:last-child,
.compare-real-approved span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-real-chat-state strong,
.compare-real-trigger strong,
.compare-real-agent-line strong,
.compare-real-approved strong {
    color: var(--ink);
    font-size: 0.8125rem;
}

.compare-real-chat-state small,
.compare-real-trigger small,
.compare-real-agent-line small,
.compare-real-approved small {
    color: var(--muted);
    font-size: 0.6875rem;
    line-height: 1.35;
}

.compare-real-composer {
    margin: 0 18px 14px;
    min-height: 54px;
    padding: 10px 10px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #D6D6DA;
    border-radius: 18px;
    background: #fff;
    color: #8B8990;
    font-size: 0.8125rem;
    box-shadow: 0 2px 8px rgba(25, 22, 27, 0.05);
}

.compare-real-send {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    font-weight: 800;
}

.compare-real-outcome,
.compare-real-apoutcome {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 800;
}

.compare-real-askpilot {
    display: flex;
    flex-direction: column;
}

.compare-real-apbody {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(124px, 0.8fr) minmax(280px, 2fr) minmax(150px, 0.95fr);
}

.compare-real-queue {
    min-width: 0;
    padding: 16px 10px;
    border-right: 1px solid var(--line);
    background: #F8F9FB;
}

.compare-real-queue-head,
.compare-real-process-head,
.compare-real-work-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.compare-real-queue-head {
    padding: 0 5px 11px;
}

.compare-real-queue-head strong,
.compare-real-process-head strong {
    color: var(--ink);
    font-size: 0.75rem;
}

.compare-real-queue-head span,
.compare-real-process-head span {
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 700;
}

.compare-real-run-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
    list-style: none;
}

.compare-real-run-list li {
    min-width: 0;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.compare-real-run-list li.is-selected {
    border-color: #DCE1E7;
    background: #E9EDF1;
}

.compare-real-property {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-size: 0.6875rem;
    font-weight: 800;
}

.compare-real-run-state {
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.5625rem;
    font-weight: 800;
}

.compare-real-run-state.is-approval {
    background: #DDE4FF;
    color: #3954C5;
}

.compare-real-run-state.is-moving {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EEF0FD;
    color: #3F3AB6;
}

.compare-real-run-state.is-moving span {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.compare-real-run-state.is-complete {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.compare-real-work {
    min-width: 0;
    padding: 17px 16px;
}

.compare-real-work-head {
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.compare-real-work-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-real-work-kicker {
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.compare-real-work-head strong {
    color: var(--ink);
    font-size: 0.9375rem;
}

.compare-real-work-status {
    flex: none;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--pink-wash);
    color: var(--pink-deep);
    font-size: 0.5625rem;
    font-weight: 800;
}

.compare-real-trigger,
.compare-real-agent-line {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.compare-real-trigger {
    margin-top: 14px;
}

.compare-real-trigger-icon,
.compare-real-agent-line img {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.compare-real-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FCEEE4;
    color: var(--brand-orange);
    font-size: 1rem;
    font-weight: 800;
}

.compare-real-agent-line {
    margin-top: 12px;
}

.compare-real-agent-line img {
    padding: 5px;
    border: 1px solid var(--line);
    background: #fff;
}

.compare-real-approval {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(25, 22, 27, 0.07);
}

.compare-real-approval-label {
    color: var(--pink-deep);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.compare-real-approval h3 {
    margin-top: 6px;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.35;
}

.compare-real-approval > p,
.compare-real-review p {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.6875rem;
    line-height: 1.55;
}

.compare-real-review {
    margin-top: 11px;
    padding: 10px;
    border-left: 3px solid var(--pink-core);
    background: var(--pink-wash);
}

.compare-real-review strong {
    color: var(--ink);
    font-size: 0.6875rem;
}

.compare-real-actions {
    margin-top: 12px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.compare-real-approve,
.compare-real-review-button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 800;
}

.compare-real-approve {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(255, 167, 255, 0.32);
    animation: compare-real-approve-pulse 2s ease-in-out infinite;
}

.compare-real-approve:hover {
    background: #2B2430;
}

.compare-real-review-button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.compare-real-review-button:hover {
    background: var(--soft);
}

@keyframes compare-real-approve-pulse {
    50% { box-shadow: 0 0 0 5px rgba(255, 167, 255, 0); }
}

.compare-real-approved {
    margin-top: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 10px;
    background: var(--ok-bg);
}

.compare-real-approved > span:first-child {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ok-fg);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
}

.compare-real-approved strong {
    color: var(--ok-fg);
}

.compare-real-process {
    min-width: 0;
    padding: 17px 12px;
    border-left: 1px solid var(--line);
    background: #FBFBFC;
}

.compare-real-process-head {
    padding: 0 2px 13px;
    border-bottom: 1px solid var(--line);
}

.compare-real-steps {
    margin: 0;
    padding: 12px 0 0;
    display: grid;
    gap: 0;
    list-style: none;
}

.compare-real-steps li {
    position: relative;
    min-width: 0;
    padding: 0 0 16px 25px;
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1.35;
}

.compare-real-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 8px;
    width: 1px;
    background: var(--line);
}

.compare-real-steps li > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    border: 2px solid var(--line);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
}

.compare-real-steps li.is-done {
    color: var(--body);
}

.compare-real-steps li.is-done > span:first-child {
    border-color: #4F68F8;
    background: #4F68F8;
}

.compare-real-steps li.is-current {
    color: var(--ink);
    font-weight: 800;
}

.compare-real-steps li.is-current > span:first-child {
    border-color: var(--pink-strong);
    background: var(--pink-wash);
    box-shadow: inset 0 0 0 4px #fff;
}

.compare-real-apoutcome {
    background: #fff;
}

.compare-real [hidden] {
    display: none !important;
}

@media (max-width: 1080px) {
    .compare-real-grid {
        grid-template-columns: 1fr;
    }

    .compare-real-product {
        min-height: 0;
    }

    .compare-real-chat {
        min-height: 520px;
    }
}

@media (max-width: 720px) {
    .compare-real {
        margin-top: 48px;
    }

    .compare-real-intro h2 br {
        display: none;
    }

    .compare-real-apbody {
        grid-template-columns: 1fr;
    }

    .compare-real-queue {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .compare-real-run-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compare-real-process {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .compare-real-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
    }

    .compare-real-steps li {
        padding-bottom: 0;
    }

    .compare-real-steps li::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .compare-real-run-list,
    .compare-real-steps {
        grid-template-columns: 1fr;
    }

    .compare-real-chatapp {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .compare-real-chat-sidebar {
        padding-left: 6px;
        padding-right: 6px;
    }

    .compare-real-chat-history li:not(.is-selected) {
        display: none;
    }

    .compare-real-chatbody {
        padding-left: 12px;
        padding-right: 12px;
    }

    .compare-real-work {
        padding-left: 13px;
        padding-right: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compare-real-run-dot,
    .compare-real-approve {
        animation: none;
    }
}

/* ============================================================
   How It Works, ported from the homepage: v8 wrappers, the
   stages and their animations stay on css/how-it-works.css.
   ============================================================ */
.hiw-sec { padding: 110px 0 90px; }
@media (max-width: 767px) { .hiw-sec { padding: 72px 0 56px; } }
.sec-eyebrow {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-deep); margin-bottom: 22px; text-align: center;
}
.sec-title {
    font-size: 4.5rem;   /* matches subpage h2 (text-7xl) */
    font-weight: 800; line-height: 1.04; letter-spacing: -0.025em;
    color: var(--ink); text-align: center;
    max-width: 22em; margin: 0 auto;
}
.hiw-steps { margin-top: 70px; display: flex; flex-direction: column; gap: 52px; max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .hiw-steps { margin-top: 44px; gap: 40px; } }
/* the flex gap already separates rows; the connector needs no extra margin */
.hiw-steps .hiw-link { margin-top: 0; margin-bottom: 0; }
.hiw-row {
    display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
    text-align: left;
}
@media (min-width: 880px) { .hiw-row { grid-template-columns: 1fr 1fr; gap: 56px; } }
.hiw-copy { min-width: 0; }
.hiw-h3 {
    margin-top: 12px;
    font-size: clamp(1.625rem, 2.8vw, 2.375rem);
    font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.hiw-p { margin-top: 12px; font-size: 1.125rem; font-weight: 400; color: var(--body); line-height: 1.55; }
@media (min-width: 880px) {
    .hiw-row .hiw-stage-first { order: -1; }
}

/* v8-only re-accenting of the ported How It Works stages:
   index keeps its blue, this page maps the accents to ink and
   the deep pink so the section matches the rest of the design. */
.hiw-step-eyebrow { --hiw-accent: var(--brand-magenta); --hiw-accent-2: var(--brand-magenta); --hiw-soft: #FFF3FF; }
/* connector lines and their travelling dot stay brand blue */
.hiw-link { --hiw-accent: var(--brand-blue); --hiw-accent-2: var(--brand-blue); --hiw-soft: #EEF2FE; }
.hiw-step-eyebrow .hiw-step-num { color: var(--pink-deep); }
.hiw-chip-ico { color: var(--pink-deep); }
.hiw-prompt-create.is-ready {
    background-color: var(--ink); border-color: var(--ink);
    box-shadow: 0 8px 20px -8px rgba(22, 18, 26, 0.45);
}
.hiw-doc-code .chip { background: var(--pink-wash); color: var(--pink-deep); }

/* ============================================================
   Step 02 stage: the trigger playground. Bordered box, no fill,
   blueprint grid, example trigger chips, self-typing process.
   ============================================================ */
.trig-stage {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 28px 26px;
    overflow: hidden;
}

/* index stages framed like the hero duel cards: white window,
   cream ring, 1px ink outline */
.trig-stage,
#how .hiw-panel,
#how .hiw-doc,
#how .hiw-desktop {
    margin: 12px;
    border-radius: 18px;
    box-shadow:
        0 0 0 10px var(--cream),
        0 0 0 11px var(--ink),
        0 30px 60px -30px rgba(38, 20, 40, 0.24);
}
.trig-mark { display: none; position: absolute; width: 13px; height: 13px; color: #C9C2CC; }
.trig-mark::before, .trig-mark::after { content: ""; position: absolute; background: currentColor; }
.trig-mark::before { left: 6px; top: 0; width: 1.5px; height: 13px; }
.trig-mark::after { left: 0; top: 6px; width: 13px; height: 1.5px; }
.trig-mark--tl { top: 12px; left: 12px; }
.trig-mark--tr { top: 12px; right: 12px; }
.trig-mark--bl { bottom: 12px; left: 12px; }
.trig-mark--br { bottom: 12px; right: 12px; }

.trig-label {
    position: relative;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
}
.trig-label-2 { margin-top: 20px; }
.trig-chips { position: relative; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.trig-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: 999px; padding: 8px 13px; min-height: 38px;
    font-size: 0.8125rem; font-weight: 700; cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.trig-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-low); }
.trig-chip img { width: 14px; height: 14px; object-fit: contain; }
.trig-chip svg { width: 13px; height: 13px; fill: none; stroke: var(--brand-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trig-chip[aria-pressed="true"] {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink), var(--shadow-low);
}
.trig-chip[aria-pressed="true"] svg { stroke: var(--brand-blue); }
.trig-chip--any { border-style: dashed; border-color: #C9C2BD; background: transparent; color: var(--body); }
.trig-chip--any svg { stroke: var(--brand-blue); stroke-width: 2.2; }
.trig-chip--any[aria-pressed="true"] { border-style: solid; background: #fff; color: var(--ink); }

.trig-desc {
    position: relative; margin-top: 10px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--cream);
    padding: 14px 16px; min-height: 88px;
    font-size: 0.9375rem; font-weight: 550; color: var(--ink); line-height: 1.55;
}
.trig-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -0.15em; margin-left: 1px; animation: gpt-blink 900ms steps(1) infinite; }
.trig-foot { position: relative; margin-top: 14px; font-size: 0.8125rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .trig-caret { animation: none; } }

/* ============================================================
   The statement: scroll reads the worldview. Words fill from
   paper-grey to ink; the emphasised phrases finish deep pink.
   ============================================================ */
.statement {
    position: relative; padding: 130px 0 140px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.55));
}
/* a quiet dot grid, visible at the edges of the band and fading
   out behind the words themselves */
.statement::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(22, 18, 26, 0.10) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(80% 75% at 50% 50%, transparent 40%, #000 95%);
    mask-image: radial-gradient(80% 75% at 50% 50%, transparent 40%, #000 95%);
}
.statement > .wrap { position: relative; }
@media (max-width: 767px) { .statement { padding: 80px 0 90px; } }
.statement-eyebrow {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-deep); margin-bottom: 22px; text-align: center;
}
.statement-text {
    max-width: 1140px; margin: 0 auto; text-align: center;
    font-size: clamp(1.75rem, 4.1vw, 3.6rem);
    font-weight: 750; line-height: 1.24; letter-spacing: -0.022em;
    color: var(--ink);
}
.statement-text p + p { margin-top: 30px; }
@media (max-width: 767px) { .statement-text { text-align: left; } }
/* words fill from paper grey to pink as the scroll reads them */
.statement-text .sw { color: #DDD7D1; transition: color 300ms ease; }
/* the worldview line reads in ink; the Askpilot payoff reads in magenta */
.statement-text .sw.is-on { color: var(--ink); }
.statement-text p + p .sw.is-on { color: var(--brand-magenta); }
.statement-key { font-style: normal; }
@media (prefers-reduced-motion: reduce) {
    .statement-text .sw { color: var(--ink); transition: none; }
    .statement-text p + p .sw { color: var(--brand-magenta); }
}

/* ============================================================
   The origin story: a month inside The Home Club, and James's
   own words. Story reads left, the quote stands right like a
   framed letter. Everything on this card is real.
   ============================================================ */
.origin {
    position: relative; padding: 140px 0 120px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background:
        radial-gradient(55% 60% at 72% 52%, rgba(255, 167, 255, 0.09), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5));
}
/* the same blueprint grid as the trigger stage: strongest at the
   edges of the band, fading out where the story and quote sit */
.origin::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(22, 18, 26, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22, 18, 26, 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(85% 78% at 50% 48%, transparent 42%, #000 92%);
    mask-image: radial-gradient(85% 78% at 50% 48%, transparent 42%, #000 92%);
}
.origin > .wrap { position: relative; }
.origin-eyebrow {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-deep); margin-bottom: 22px; text-align: center;
}
.origin-title {
    text-align: center;
    font-size: 4.5rem;   /* matches subpage h2 (text-7xl) */
    font-weight: 780; line-height: 1.12; letter-spacing: -0.024em;
    color: var(--ink); margin: 0 auto 64px;
}
.origin-grid {
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px;
    align-items: center; max-width: 1080px; margin: 0 auto;
}
.origin-story p {
    font-size: 1.0625rem; line-height: 1.6; color: var(--body);
    margin: 0 0 22px;
}
.origin-story p:last-child { margin-bottom: 0; }
/* the conclusion reads as a pull-out: accent bar, larger type,
   and the payoff phrase in brand magenta */
.origin-story-close {
    margin-top: 30px; padding-left: 20px;
    border-left: 3px solid var(--brand-blue);
    font-size: 1.1875rem; line-height: 1.5;
    font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}

.origin-quote {
    position: relative; margin: 0;
    background: #fff; border: 1px solid var(--ink); border-radius: 24px;
    padding: 44px 44px 38px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 24px 60px -30px rgba(22, 18, 26, 0.18);
}
.origin-qmark {
    position: absolute; top: -30px; left: 32px;
    font-size: 6rem; line-height: 1; font-weight: 800;
    color: var(--brand-blue); user-select: none;
}
.origin-quote blockquote { margin: 0; }
.origin-quote blockquote p {
    font-size: 0.9875rem; line-height: 1.58; color: var(--body); margin: 0 0 16px;
    font-weight: 600;
}
.origin-quote-lead {
    font-size: 1.25rem !important; line-height: 1.42 !important;
    font-weight: 700; color: var(--ink) !important; letter-spacing: -0.014em;
}
.origin-attrib {
    display: flex; align-items: center; gap: 12px;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.origin-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    object-fit: cover; border: 1px solid var(--line);
}
.origin-attrib-text { display: grid; line-height: 1.35; }
.origin-attrib-text strong { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.origin-attrib-text small { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 900px) {
    .origin { padding: 96px 0 80px; }
    .origin-title { margin-bottom: 44px; }
    .origin-grid { grid-template-columns: 1fr; gap: 44px; max-width: 640px; }
    .origin-quote { padding: 36px 28px 30px; }
    .origin-qmark { left: 24px; }
}

/* ============================================================
   Onboarding: the concierge journey. Four numbered steps we do
   for the agency, then the ongoing promise as a pink-wash card
   with a one-sentence "edit" mock.
   ============================================================ */
.onb {
    padding: 130px 0 130px;
    position: relative;
    background-color: #FBF8F4;
    background-image:
        linear-gradient(rgba(22, 18, 26, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 18, 26, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
}
/* soft magenta glow at the top, same as the integration pages' band */
.onb::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 55% at 50% 22%, rgba(255, 167, 255, 0.10), transparent 70%);
}
.onb > .wrap { position: relative; }
.onb-eyebrow {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-deep); margin-bottom: 22px; text-align: center;
}
.onb-title {
    text-align: center;
    font-size: 4.5rem;   /* matches subpage h2 (text-7xl) */
    font-weight: 780; line-height: 1.12; letter-spacing: -0.024em;
    color: var(--ink); margin: 0 auto 56px;
}
.onb-sub {
    text-align: center; font-size: 1.25rem; color: var(--body);
    max-width: 38em; margin: 0 auto 56px;
}

.onb-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.onb-step {
    background: #fff; border: 1px solid var(--ink); border-radius: 20px;
    padding: 26px 24px 28px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.03);
}
.onb-num {
    display: inline-grid; place-items: center;
    min-width: 40px; height: 40px; border-radius: 999px;
    background: var(--pink-wash); border: 1px solid var(--pink-surface);
    font-size: 0.8125rem; font-weight: 800; color: var(--pink-deep);
    margin-bottom: 18px;
}
.onb-step h3 {
    font-size: 1.25rem; font-weight: 750; color: var(--ink);
    letter-spacing: -0.01em; margin-bottom: 8px;
}
.onb-step p { font-size: 0.9375rem; line-height: 1.55; color: var(--body); }

.onb-after {
    margin-top: 18px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
    background: var(--pink-wash); border: 1px solid var(--ink); border-radius: 24px;
    padding: 44px 48px;
}
.onb-after-label {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pink-deep); margin-bottom: 12px;
}
.onb-after-copy h3 {
    font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 760; line-height: 1.22;
    letter-spacing: -0.018em; color: var(--ink); margin-bottom: 12px;
}
.onb-after-p { font-size: 1rem; line-height: 1.55; color: var(--body); }

.onb-after-demo { display: grid; gap: 12px; justify-items: start; }
.onb-demo-input {
    display: flex; align-items: center; gap: 16px; width: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 16px 16px 16px 20px;
    box-shadow: 0 10px 30px -18px rgba(122, 38, 122, 0.35);
}
.onb-demo-text { font-size: 0.9375rem; font-weight: 550; color: var(--ink); line-height: 1.5; }
.onb-demo-send {
    flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
    background: var(--ink); color: #fff; font-size: 0.9375rem; font-weight: 700;
}
.onb-demo-done {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8125rem; font-weight: 700; color: var(--ok-fg);
    background: var(--ok-bg); border-radius: 999px; padding: 6px 13px;
}
.onb-demo-tick { font-weight: 800; }

.onb-cta { margin-top: 48px; text-align: center; }

@media (max-width: 1000px) {
    .onb-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .onb { padding: 96px 0 96px; }
    .onb-after { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
}
@media (max-width: 560px) {
    .onb-steps { grid-template-columns: 1fr; }
}

/* marker highlight for the no-extra-cost promise in onboarding */
.onb-mark {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 L98 2.5' fill='none' stroke='%23D53BD5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 6px;
    padding-bottom: 5px;
    color: var(--ink); font-weight: 700;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* the human-touch phrase gets a hand-drawn wavy underline */
.origin-touch {
    font-style: normal;
    padding-bottom: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 L98 2.5' fill='none' stroke='%23D53BD5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 7px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* quiet credential line: the team behind AI Number */
.origin-built {
    margin-top: 26px;
    font-size: 0.875rem; color: var(--muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.origin-built a { display: inline-flex; align-items: center; opacity: 0.85; transition: opacity var(--t-fast); }
.origin-built a:hover { opacity: 1; }
.origin-built img { height: 21px; width: auto; display: inline-block; }

/* ============================================================
   Pricing: the key numbers translated into completed process
   runs. Two cards, launch flag on Pro, everything else lives
   on /pricing.html.
   ============================================================ */
.price {
    padding: 110px 0 130px;
    border-top: 1px solid var(--line);
}
.price-title {
    text-align: center;
    font-size: 4.5rem;   /* matches subpage h2 (text-7xl) */
    font-weight: 780; line-height: 1.12; letter-spacing: -0.024em;
    color: var(--ink); margin: 0 auto 18px;
}
.price-sub {
    text-align: center; font-size: 1.25rem; color: var(--body);
    max-width: 42em; margin: 0 auto 56px;
}
.price-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    max-width: 900px; margin: 0 auto;
}
.price-card {
    position: relative;
    background: #fff; border: 1px solid var(--ink); border-radius: 24px;
    padding: 34px 32px 30px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.03);
}
.price-card--pro {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 1px var(--brand-blue), 0 24px 60px -30px rgba(76, 107, 238, 0.28);
}
.price-flag {
    position: absolute; top: -13px; left: 28px;
    background: var(--brand-blue); color: #fff;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.price-name {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
}
.price-amount {
    margin-top: 14px;
    font-size: 2.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.price-cur { font-size: 1.8rem; vertical-align: 6px; margin-right: 2px; }
.price-per { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price-runs {
    margin-top: 18px;
    font-size: 1.125rem; color: var(--body);
}
.price-runs strong { font-weight: 800; color: var(--brand-blue); }
.price-credits { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.price-list {
    list-style: none; margin: 22px 0 0; padding: 18px 0 0;
    border-top: 1px solid var(--line);
    display: grid; gap: 10px;
}
.price-list li {
    position: relative; padding-left: 24px;
    font-size: 0.9375rem; color: var(--body); line-height: 1.45;
}
.price-list li::before {
    content: ""; position: absolute; left: 2px; top: 7px;
    width: 12px; height: 7px;
    border-left: 2.2px solid var(--brand-blue); border-bottom: 2.2px solid var(--brand-blue);
    transform: rotate(-48deg); border-radius: 1px;
}
.price-note {
    max-width: 640px; margin: 36px auto 0; text-align: center;
    font-size: 0.9375rem; color: var(--muted); line-height: 1.6;
}
.price-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink-surface); }
.price-note a:hover { text-decoration-color: var(--brand-magenta); }
.price-cta { margin-top: 44px; text-align: center; }

@media (max-width: 820px) {
    .price { padding: 72px 0 96px; }
    .price-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* secondary call button: white pill with an ink border, no hover fill */
.btn-outline { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-low); }
.btn-phone { width: 18px; height: 18px; flex: none; }
.price-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* currency switcher pill (shared preference with pricing.html) */
.price-currency { display: flex; justify-content: center; margin-bottom: 48px; }
.cur-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.03);
}
.cur-pill button {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent; border-radius: 999px;
    padding: 8px 16px; font-size: 0.875rem; font-weight: 650; color: var(--body);
    cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.cur-pill button svg { width: 15px; height: 15px; }
.cur-pill button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cur-pill button[aria-pressed="false"]:hover { background: var(--soft); color: var(--ink); }
.price-amount--talk { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; padding: 14px 0 12px; }

/* the included-onboarding strip: sits under the cards, pink wash
   so it reads as part of the offer, not small print */
.price-incl {
    max-width: 900px; margin: 20px auto 0;
    display: flex; align-items: center; gap: 14px;
    background: #EEF2FE; border: 1px solid #CBD8FC;
    border-radius: 18px; padding: 18px 22px;
}
.price-incl-badge {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-blue); color: #fff;
}
.price-incl-badge svg { width: 15px; height: 15px; }
.price-incl p { font-size: 0.9875rem; line-height: 1.55; color: var(--body); }
.price-incl strong { color: var(--ink); font-weight: 750; }
/* free-onboarding tag: blue offer pill, matches the pricing strip */
.free-onb-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: #EEF2FE; border: 1px solid #CBD8FC; border-radius: 999px;
    font-size: 0.875rem; font-weight: 750; color: var(--brand-blue);
    text-decoration: none;
}
.free-onb-tag svg { width: 15px; height: 15px; flex: none; }
.free-onb-tag s { font-weight: 600; color: var(--muted); }
.onb-badge-row { margin: -26px 0 46px; text-align: center; }

.price-incl-value {
    flex: none; margin-left: auto;
    display: grid; justify-items: center; gap: 1px; text-align: center;
    background: #fff; border: 1px solid var(--pink-surface); border-radius: 14px;
    padding: 9px 20px;
}
.price-incl-value s { font-size: 0.8125rem; color: var(--muted); }
.price-incl-value b { font-size: 1.375rem; font-weight: 800; color: var(--brand-magenta); line-height: 1.1; }
@media (max-width: 820px) { .price-incl { max-width: 480px; } }
@media (max-width: 560px) {
    .price-incl { flex-wrap: wrap; align-items: flex-start; }
    .price-incl p { flex: 1 1 0; min-width: 0; }
    .price-incl-value {
        flex-basis: 100%; margin-left: 0; margin-top: 4px;
        display: flex; justify-content: center; align-items: baseline; gap: 8px;
    }
}

/* text button: bold link with a drawing underline and sliding arrow */
.price-view { margin-top: 34px; text-align: center; }
.link-btn {
    position: relative; display: inline-flex; align-items: center; gap: 9px;
    font-size: 1.25rem; font-weight: 750; color: var(--ink); letter-spacing: -0.01em;
    text-decoration: none; padding-bottom: 5px;
}
.link-btn .btn-arrow { width: 18px; height: 18px; }
.link-btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--brand-magenta); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.link-btn:hover::after { transform: scaleX(1); }
.link-btn:hover .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-btn::after { transition: none; } }

/* full-width plan buttons inside the pricing cards */
.price-btn { width: 100%; margin-top: 22px; }

/* small screens: let the big section titles wrap naturally instead
   of obeying the desktop line breaks (prevents orphan words) */
@media (max-width: 640px) {
    .origin-title br, .price-title br, .onb-title br { display: none; }
}

/* section titles and eyebrows stay centre-aligned at every width
   (the hero manages its own alignment) */

/* ============================================================
   Footer, ported from index and re-skinned to the v8 palette.
   ============================================================ */
.foot { border-top: 1px solid var(--line); padding: 64px 0 56px; }
.foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.foot-brand img { height: 24px; }
.foot-brand p { margin-top: 16px; font-size: 0.875rem; color: var(--muted); }
.foot-col h3 {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a {
    font-size: 0.9375rem; color: var(--body); text-decoration: none;
}
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink-surface); }
@media (max-width: 820px) {
    .foot { padding: 48px 0 44px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .foot-brand { grid-column: 1 / -1; }
}

/* trial reassurance sits right under the Pro CTA */
.price-trial {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 0.875rem; font-weight: 650; color: var(--brand-magenta);
}
.price-trial svg { width: 14px; height: 14px; flex: none; }

/* Use cases dropdown, ported from index and re-skinned */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; cursor: pointer;
    font-size: 0.9375rem; font-weight: 600; color: var(--body);
    padding: 8px 14px; border-radius: 999px;
}
.nav-dd-btn:hover { color: var(--ink); background: var(--soft); }
.nav-dd-chev { width: 13px; height: 13px; color: var(--muted); transition: transform 0.18s ease; }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-panel {
    position: absolute; top: 100%; left: 50%;
    transform: translate(-50%, 6px); padding-top: 12px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60;
}
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-dd-inner {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 40px -16px rgba(22, 18, 26, 0.22), 0 2px 6px -2px rgba(22, 18, 26, 0.08);
    padding: 6px; min-width: 260px;
}
.nav-dd-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.nav-dd-item:hover { background: var(--pink-wash); }
.nav-dd-title { font-size: 0.9063rem; font-weight: 650; color: var(--ink); }
.nav-dd-sub { font-size: 0.8125rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .nav-dd-chev, .nav-dd-panel { transition: none; } }

/* inline link inside step copy */
.hiw-inline-link {
    color: var(--ink); font-weight: 650;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--pink-surface);
}
.hiw-inline-link:hover { text-decoration-color: var(--brand-magenta); }

/* ============================================================
   The duel stage: two outlined boxes on a blueprint grid,
   brand chips on top, VS in the seam. Focus moves from the
   ChatGPT box to the Askpilot box so the story reads in order.
   ============================================================ */
.duel-stage {
    position: relative;
    padding: 44px 36px 36px;
    border-radius: 28px;
}
.duel-stage::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(22, 18, 26, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22, 18, 26, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 105% at 50% 50%, #000 40%, transparent 96%);
    mask-image: radial-gradient(120% 105% at 50% 50%, #000 40%, transparent 96%);
}
.duel-mark { position: absolute; width: 13px; height: 13px; color: #C9C2CC; z-index: 1; }
.duel-mark::before, .duel-mark::after { content: ""; position: absolute; background: currentColor; }
.duel-mark::before { left: 6px; top: 0; width: 1.5px; height: 13px; }
.duel-mark::after { left: 0; top: 6px; width: 13px; height: 1.5px; }
.duel-mark--tl { top: 14px; left: 14px; }
.duel-mark--tr { top: 14px; right: 14px; }
.duel-mark--bl { bottom: 14px; left: 14px; }
.duel-mark--br { bottom: 14px; right: 14px; }

.duel-stage .compare-real-grid { position: relative; gap: 64px; }

/* the boxes: borders only, the grid breathes behind them */
.duel-stage .compare-real-product {
    position: relative; overflow: visible;
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 24px;
    box-shadow: none;
    transition: opacity 700ms ease, filter 700ms ease, border-color 700ms ease;
}
/* inner app chrome needs its own surface again */
.duel-stage .compare-real-chatapp,
.duel-stage .compare-real-apbar,
.duel-stage .compare-real-apbody { background: #fff; }
.duel-stage .compare-real-product > *:first-of-type { border-top-left-radius: 22px; border-top-right-radius: 22px; }
.duel-stage .compare-real-chatapp,
.duel-stage .compare-real-apbody { overflow: hidden; }
.duel-stage .compare-real-outcome { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.duel-stage .compare-real-chatapp { border-radius: 22px 22px 0 0; }

/* focus states: the idle box waits in the wings */
.duel-stage.focus-left .compare-real-askpilot,
.duel-stage.focus-right .compare-real-chat {
    opacity: 0.35; filter: saturate(0.15);
    border-color: var(--line);
}
.duel-stage.focus-left .duel-chip-right,
.duel-stage.focus-right .duel-chip-left { opacity: 0.4; box-shadow: none; }

/* brand chips riding the top border */
.duel-chip {
    position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid var(--ink); border-radius: 999px;
    padding: 7px 18px;
    font-size: 0.9375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
    z-index: 3; white-space: nowrap;
    transition: opacity 700ms ease, box-shadow 700ms ease;
    box-shadow: 0 0 0 5px var(--cream);
}
.duel-chip img { width: 17px; height: 17px; }
.duel-gpt-mark { font-size: 1rem; line-height: 1; }

/* the VS badge in the seam */
.duel-vs {
    position: absolute; top: 50%; left: -60px; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: grid; place-items: center;
    font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.04em;
    border: 4px solid var(--cream);
    z-index: 4;
}

/* typing caret + answer entrance on the left */
.duel-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -0.15em; margin-left: 1px; animation: gpt-blink 900ms steps(1) infinite; }
#duel-answer { opacity: 1; transform: none; transition: opacity 480ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1); }
#duel-answer.is-hidden { opacity: 0; transform: translateY(8px); }
#duel-answer.is-hidden * { pointer-events: none; }
.compare-real-outcome, .compare-real-apoutcome { transition: color 400ms ease, font-weight 400ms ease; }
.duel-cap-dim { color: var(--muted) !important; font-weight: 500 !important; }

@media (max-width: 900px) {
    .duel-stage { padding: 28px 14px 22px; }
    .duel-stage .compare-real-grid { gap: 56px; }
    .duel-vs { width: 46px; height: 46px; font-size: 0.8125rem; left: 50%; top: -51px; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .duel-caret { animation: none; }
    .duel-stage .compare-real-product, .duel-chip { transition: none; }
    .duel-stage.focus-left .compare-real-askpilot,
    .duel-stage.focus-right .compare-real-chat { opacity: 1; filter: none; border-color: var(--ink); }
}

/* ============================================================
   HERO COMPARISON, V2
   A restrained two-window stage. Only one card takes focus at a
   time, then the finished comparison remains on screen.
   ============================================================ */
.hero-compare {
    margin-top: 88px;
    scroll-margin-top: 96px;
    /* hidden on first paint; rises in once the headline and buttons have landed */
    opacity: 0;
    transform: translateY(26px);
    animation: hero-compare-in 750ms cubic-bezier(0.16, 1, 0.3, 1) 3400ms forwards;
}
@keyframes hero-compare-in {
    to { opacity: 1; transform: translateY(0); }
}

/* the hero enters top to bottom: the title leads; the thesis pair and
   CTA row keep their own authored timings (old line 300ms, strike 1300ms,
   new line 1850ms, buttons 2400ms); the demo box arrives last. */
.hero-title {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-compare-in 500ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;
}

@media (prefers-reduced-motion: reduce) {
    .hero-title, .hero-compare { opacity: 1; transform: none; animation: none; }
    .thesis-old, .thesis-new, .hero-cta-row { opacity: 1; transform: none; animation: none; }
    .thesis-check, .thesis-new-text { opacity: 1; transform: none; animation: none; }
    .thesis-check svg path { stroke-dashoffset: 0; animation: none; }
    .thesis-old span::after { transform: scaleX(1); animation: none; }
}

.hero-compare-stage {
    position: relative;
    overflow: hidden;
    padding: 44px 42px 30px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background-color: rgba(255,255,255,0.36);
    background-image:
        linear-gradient(rgba(22,18,26,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,18,26,0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    isolation: isolate;
}

.hero-compare-stage::before,
.hero-compare-stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transition: opacity 700ms ease, transform 900ms ease;
    pointer-events: none;
}

.hero-compare-stage::before {
    left: -210px;
    top: 0;
    background: rgba(22,18,26,0.08);
}

.hero-compare-stage::after {
    right: -190px;
    top: 10px;
    background: rgba(255,167,255,0.25);
}

.hero-compare-stage[data-phase="chatgpt"]::before,
.hero-compare-stage[data-phase="askpilot"]::after,
.hero-compare-stage[data-phase="done"]::after { opacity: 1; }

.hero-compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 720ms ease, transform 800ms cubic-bezier(0.16,1,0.3,1);
}

.hero-compare-stage.is-resetting .hero-compare-grid {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
}

.hero-compare-stage.is-paused * { animation-play-state: paused !important; }

.hero-compare-card {
    position: relative;
    min-width: 0;
    padding: 10px;
    border: 1px solid #D9D0CE;
    border-radius: 24px;
    background: rgba(252,249,247,0.78);
    box-shadow: 0 10px 28px rgba(38,20,40,0.035);
    opacity: 0.68;
    filter: saturate(0.45);
    transform: translateY(0);
    transition: opacity 600ms ease, filter 600ms ease, transform 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}

.hero-compare-stage[data-phase="chatgpt"] .hero-gpt-card,
.hero-compare-stage[data-phase="askpilot"] .hero-askpilot-card,
.hero-compare-stage[data-phase="done"] .hero-askpilot-card {
    opacity: 1;
    filter: none;
    border-color: var(--ink);
}

.hero-compare-stage[data-phase="chatgpt"] .hero-gpt-card,
.hero-compare-stage[data-phase="askpilot"] .hero-askpilot-card,
.hero-compare-stage[data-phase="done"] .hero-askpilot-card {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px -32px rgba(38,20,40,0.28);
}

.hero-compare-label {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 6px var(--cream);
    font-size: 0.875rem;
    font-weight: 800;
    white-space: nowrap;
}

.hero-compare-label img { width: 17px; height: 17px; }
.hero-gpt-symbol { width: 17px; height: 17px; }

/* static caption at the top of each duel card: three mirrored
   rows per side, crosses on ChatGPT, checks on Askpilot */
.hero-compare-cell { display: flex; flex-direction: column; min-width: 0; }
.hero-compare-cell .hero-compare-card { flex: 1; }

.hero-card-cap {
    margin: 0 10px 56px;
    text-align: center;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 780;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #C4BCC6;
    transition: color 600ms ease;
}
.hero-compare-stage[data-phase="chatgpt"] .hero-card-cap--gpt { color: var(--ink); }
.hero-cap-check {
    display: inline-grid;
    width: 0.92em;
    height: 0.92em;
    margin-right: 0.38em;
    vertical-align: -0.08em;
    color: var(--brand-blue);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 320ms ease, transform 380ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.hero-cap-check svg { width: 100%; height: 100%; display: block; }
.hero-compare-stage[data-phase="askpilot"] .hero-cap-check,
.hero-compare-stage[data-phase="done"] .hero-cap-check {
    opacity: 1;
    transform: scale(1);
}
.hero-compare-stage[data-phase="askpilot"] .hero-card-cap--ap,
.hero-compare-stage[data-phase="done"] .hero-card-cap--ap { color: var(--ink); }

.hero-app-window {
    display: flex;
    flex-direction: column;
    min-height: 472px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.hero-app-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 50px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: #FCFBFB;
    color: var(--ink);
}

.hero-app-bar strong {
    font-size: 0.8125rem;
    font-weight: 750;
}

.hero-window-dots { display: flex; gap: 5px; }
.hero-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D9D4DC; }
.hero-app-menu { justify-self: end; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; }

/* ---- ChatGPT panel: faithful to chatgpt.com ---- */
.hero-gpt-window { padding: 0; }
.hero-gpt-shell { display: flex; flex: 1; min-height: 0; }

/* sidebar: the collapsed icon rail, ChatGPT's default state */
.hero-gpt-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42px;
    padding: 13px 0 11px;
    border-right: 1px solid #ECECEC;
    background: #fff;
}
.hero-gpt-rail-logo { width: 18px; height: 18px; margin-bottom: 16px; }
.hero-gpt-rail-nav { display: grid; gap: 14px; justify-items: center; }
.hero-gpt-rail-nav svg { width: 14px; height: 14px; color: #5D5D5D; display: block; }
.hero-gpt-user-avatar {
    flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    margin-top: auto;
    background: #E6763B; color: #fff;
    font-size: 0.5rem; font-weight: 800;
}

/* main column */
.hero-gpt-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hero-gpt-topbar {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 42px; padding: 0 14px 0 16px;
}
.hero-gpt-topbar-actions {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.6875rem; font-weight: 550; color: #5D5D5D;
}
.hero-gpt-topbar-actions svg { width: 12px; height: 12px; }
.hero-gpt-topbar-dots { color: #5D5D5D; letter-spacing: 0.1em; margin-left: 4px; }

.hero-gpt-conversation {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 10px 18px 10px;
}

.hero-gpt-prompt,
.hero-gpt-answer,
.hero-gpt-thinking {
    transition: opacity 420ms ease, transform 500ms cubic-bezier(0.16,1,0.3,1), visibility 420ms;
}

/* user message: right-aligned grey bubble, no avatar */
.hero-gpt-prompt { display: flex; }
.hero-gpt-prompt p {
    margin-left: auto;
    max-width: 78%;
    padding: 10px 15px;
    border-radius: 18px;
    background: #F1F1F1;
    color: #0D0D0D;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
}

/* thinking shimmer, plain text like the real UI */
.hero-gpt-thinking { min-height: 20px; }
.hero-gpt-thinking-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #B4B4B4;
    background: linear-gradient(90deg, #B4B4B4 30%, #57534E 50%, #B4B4B4 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-thinking-shimmer 1.6s linear infinite;
}
@keyframes hero-thinking-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-gpt-thinking-text { animation: none; -webkit-text-fill-color: #8F8F8F; }
}

/* assistant reply: plain left text, no avatar, no name */
.hero-gpt-answer p { color: #0D0D0D; font-size: 0.8125rem; line-height: 1.6; }

/* action bar: real grey icon row */
.hero-gpt-tools {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    transition: opacity 300ms ease, transform 360ms ease, visibility 300ms;
}
.hero-gpt-tools svg { width: 13px; height: 13px; color: #8F8F8F; }

.hero-process-complete strong { display: block; color: var(--ink); font-size: 0.8125rem; }
.hero-process-complete p { margin-top: 2px; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }

/* caption + composer */
.hero-gpt-caption { margin: 0 0 6px; text-align: center; font-size: 0.5938rem; color: #8F8F8F; }
.hero-chat-composer {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    margin: 0 14px 12px;
    padding: 8px 8px 8px 12px;
    border: 1px solid #E3E3E3;
    border-radius: 24px;
    color: #8F8F8F;
    font-size: 0.75rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(13,13,13,0.04);
    transition: border-color 280ms ease, box-shadow 280ms ease, transform 220ms ease;
}

.hero-chat-composer.is-active {
    border-color: #D4D4D4;
    box-shadow: 0 4px 14px rgba(13,13,13,0.07);
}

.hero-composer-plus {
    flex: none; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 1rem; font-weight: 400; color: #0D0D0D;
}
.hero-composer-mic { flex: none; display: grid; place-items: center; color: #0D0D0D; }
.hero-composer-mic svg { width: 15px; height: 15px; }

.hero-chat-composer-copy {
    display: block;
    flex: 1;
    min-width: 0;
    color: #0D0D0D;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.hero-composer-placeholder { color: #8F8F8F; }

/* the morphing button: voice -> send arrow -> stop -> voice */
.hero-chat-composer button {
    flex: none;
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    transition: transform 160ms ease, background 220ms ease;
}
.hero-chat-composer button svg,
.hero-chat-composer button .hero-send-stop {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 180ms ease, transform 180ms ease;
}
.hero-chat-composer button svg { width: 14px; height: 14px; }
.hero-send-stop { width: 9px; height: 9px; border-radius: 2px; background: #fff; }
.hero-chat-composer button.is-voice .hero-send-voice,
.hero-chat-composer button.is-send .hero-send-arrow,
.hero-chat-composer button.is-stop .hero-send-stop { opacity: 1; transform: scale(1); }
.hero-chat-composer.is-sending button { transform: scale(0.85); }

.hero-type-caret {
    display: inline-block;
    width: 1.5px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -0.12em;
    background: var(--ink);
    animation: hero-caret 850ms steps(1) infinite;
}

.hero-type-caret[hidden] { display: none; }

@keyframes hero-caret { 50% { opacity: 0; } }

.hero-askpilot-bar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.hero-askpilot-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 800;
}

.hero-askpilot-brand img { width: 18px; height: 18px; }

.hero-process-total {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #CDE7D6;
    border-radius: 999px;
    background: #F0FAF4;
    color: var(--ok-fg);
    font-size: 0.625rem;
    font-weight: 800;
    white-space: nowrap;
}

.hero-process-total i,
.hero-parallel-queue span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16A56F;
    box-shadow: 0 0 0 3px rgba(22,165,111,0.12);
    animation: hero-running 1.6s ease-in-out infinite;
}

@keyframes hero-running { 50% { opacity: 0.42; transform: scale(0.78); } }

.hero-askpilot-work {
    position: relative;
    flex: 1;
    min-height: 358px;
    padding: 16px 18px 112px;
}

.hero-process-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 420ms;
}

/* idle hint while no process is running */
.hero-idle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    transition: opacity 360ms ease, visibility 360ms;
}
.hero-idle i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #C9C2CC;
    animation: hero-idle-pulse 1.6s ease-in-out infinite;
}
@keyframes hero-idle-pulse { 50% { opacity: 0.3; } }
.hero-idle.is-concealed { opacity: 0; visibility: hidden; }

.hero-process-title > div { display: flex; flex-direction: column; }
.hero-process-title > div span { color: var(--muted); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; }
.hero-process-title > div strong { margin-top: 2px; color: var(--ink); font-size: 1rem; }

.hero-process-state {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--body);
    font-size: 0.625rem;
    font-weight: 800;
}

.hero-process-state.is-approval { color: #6B4D05; background: #FFF3CA; }
.hero-process-state.is-complete { color: var(--ok-fg); background: var(--ok-bg); }

.hero-process-trigger {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid #DED7F9;
    border-radius: 13px;
    background: #F8F7FF;
    transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16,1,0.3,1), visibility 420ms;
}

.hero-trigger-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #EAE8FF;
    color: var(--brand-blue);
    font-size: 1rem;
    font-weight: 800;
}

.hero-process-trigger strong { display: block; color: var(--ink); font-size: 0.75rem; }
.hero-process-trigger p { margin-top: 1px; color: var(--muted); font-size: 0.6875rem; }

.hero-process-steps {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    position: relative;
}
/* the timeline: each ROW draws its own segment up to the circle
   above. It lives on the li (never rotated or scaled by the circle
   states) and fades in with its row while the todos load. */
.hero-process-steps li {
    position: relative;
}
.hero-process-steps li::before {
    content: "";
    position: absolute;
    left: 7.75px;
    top: -8.5px;
    width: 1.5px;
    height: 17px;
    background: #E5E1EF;
}
.hero-process-steps:not(.hero-parallel-steps) li:first-child::before { display: none; }
.hero-parallel-steps li:first-child::before { top: -10.5px; height: 19px; }

.hero-process-steps li {
    display: grid;
    grid-template-columns: 21px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    color: #A19AA6;
    opacity: 0;
    transform: translateY(7px);
    transition: color 360ms ease, opacity 380ms ease, background 360ms ease,
        transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-process-steps li.is-in { opacity: 1; transform: translateY(0); }

.hero-process-steps li > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid #D8D2DA;
    border-radius: 50%;
    background: #fff;
    transition: background 320ms ease, border-color 320ms ease, transform 320ms ease;
}
/* geometric checkmark, perfectly centred */
.hero-process-steps li > span::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-0.5px, -1px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.hero-process-steps p { font-size: 0.75rem; font-weight: 650; }
.hero-process-steps small { font-size: 0.625rem; color: var(--muted); }
.hero-process-steps li.is-current {
    color: var(--ink);
    background: linear-gradient(90deg, rgba(244, 243, 255, 0) 0%, #F4F3FF 6%, rgba(244, 243, 255, 0) 82%);
}
.hero-process-steps li.is-current p { color: var(--brand-blue); }
.hero-process-steps li.is-current small { color: var(--brand-blue); opacity: 0.7; }
.hero-process-steps li.is-current > span {
    border-color: #D8D4FF;
    border-top-color: var(--brand-blue);
    background: #fff;
    animation: hero-step-spin 950ms linear infinite;
}
.hero-process-steps li.is-done { color: var(--ink); }
.hero-process-steps li.is-done > span {
    border-color: transparent;
    /* the supplied filled-circle tick, painted brand blue; the tick is a
       cut-out in the path, so the span's white base shows through it */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25C6.06294 1.25 1.25 6.06294 1.25 12ZM16.6757 8.26285C17.0828 8.63604 17.1103 9.26861 16.7372 9.67573L11.2372 15.6757C11.0528 15.8768 10.7944 15.9938 10.5217 15.9998C10.249 16.0057 9.98576 15.9 9.79289 15.7071L7.29289 13.2071C6.90237 12.8166 6.90237 12.1834 7.29289 11.7929C7.68342 11.4024 8.31658 11.4024 8.70711 11.7929L10.4686 13.5544L15.2628 8.32428C15.636 7.91716 16.2686 7.88966 16.6757 8.26285Z' fill='%234C6BEE'/%3E%3C/svg%3E") center / 112% 112% no-repeat;
    animation: hero-step-land 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.hero-process-steps li.is-done > span::after { opacity: 0; }
@keyframes hero-step-land {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes hero-step-spin { to { transform: rotate(360deg); } }

.hero-team-approval,
.hero-process-complete {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 40px;
    min-height: 102px;
    border-radius: 14px;
    transition: opacity 380ms ease, transform 420ms cubic-bezier(0.16,1,0.3,1), visibility 380ms;
}

.hero-team-approval {
    overflow: hidden;
    padding: 11px;
    border: 1px solid #E8BCE8;
    background: #FFF7FF;
}

.hero-team-approval.is-reviewing {
    border-color: #D67BD6;
    box-shadow: 0 10px 26px rgba(155,54,155,0.09);
}

.hero-team-approval.is-approved {
    border-color: #A9D8B9;
    background: #F3FBF6;
}

.hero-team-approval-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.hero-team-approval-head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 0.6875rem; font-weight: 800; }
.hero-team-approval-head i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--ink); color: #fff; font-style: normal; font-size: 0.5625rem; }
.hero-team-approval-head b { font-size: inherit; font-weight: inherit; }
.hero-team-approval-head small { color: var(--pink-deep); font-size: 0.625rem; font-weight: 800; }
.hero-team-approval > strong { display: block; color: var(--ink); font-size: 0.75rem; line-height: 1.35; }

.hero-team-approval button {
    width: 100%;
    min-height: 30px;
    margin-top: 7px;
    border: 0;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hero-team-approval.is-human-turn button {
    box-shadow: 0 0 0 5px rgba(213,59,213,0.15);
    transform: translateY(-1px);
}

.hero-team-approval button.is-pressed { transform: scale(0.985); box-shadow: none; }

.hero-approval-pointer {
    position: absolute;
    z-index: 3;
    right: 39px;
    bottom: 1px;
    width: 23px;
    height: 27px;
    fill: #fff;
    stroke: var(--ink);
    stroke-width: 1.6;
    filter: drop-shadow(0 2px 3px rgba(22,18,26,0.2));
    pointer-events: none;
    transition: opacity 240ms ease, visibility 240ms;
}

.hero-approval-pointer.is-moving {
    animation: hero-pointer-arrive 880ms cubic-bezier(0.16,1,0.3,1) both;
}

.hero-approval-pointer.is-clicking { transform: translate(-8px,-11px) scale(0.88); }

/* the mid-process approval popup, same anatomy as the Step 05 one */
.hero-compare .hero-approve-pop {
    position: absolute; left: 50%; top: 46%;
    z-index: 6; width: min(324px, 88%);
    background: #fff; border: 1px solid #E6E8F0; border-radius: 16px;
    box-shadow: 0 40px 80px -28px rgba(17,24,39,0.5), 0 4px 10px -4px rgba(17,24,39,0.14);
    padding: 16px 16px 14px;
    opacity: 1; visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 450ms cubic-bezier(0.22,0.61,0.36,1), transform 500ms cubic-bezier(0.2,0.9,0.3,1.2), visibility 450ms;
}
.hero-compare .hero-approve-pop.is-concealed {
    opacity: 0; visibility: hidden;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.96);
}
.hero-approve-pop-head { display: flex; align-items: center; gap: 10px; }
.hero-approve-pop-mark {
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    background: var(--soft); display: grid; place-items: center;
}
.hero-approve-pop-mark img { width: 17px; height: 17px; }
.hero-approve-pop-titles { display: flex; flex-direction: column; }
.hero-approve-pop-titles b { font-size: 0.84375rem; font-weight: 700; color: var(--ink); }
.hero-approve-pop-titles small { font-size: 0.6875rem; color: var(--muted); }
.hero-approve-pop-msg { margin-top: 12px; font-size: 0.875rem; color: var(--body); }
.hero-approve-pop-msg strong { color: var(--ink); }
.hero-approve-pop-quote {
    margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: #F6F8FC; border: 1px solid #EEF0F5;
    font-size: 0.75rem; line-height: 1.5; color: #4B5563;
}
.hero-approve-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.hero-pop-ghost {
    padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font-family: inherit; font-size: 0.78rem; font-weight: 500; color: var(--body);
}
.hero-pop-approve {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 16px; border: 0; border-radius: 10px;
    background: var(--brand-blue); font-family: inherit; font-size: 0.78rem; font-weight: 600; color: #fff;
    transition: transform 150ms ease, background 300ms ease, color 300ms ease;
}
.hero-pop-approve.is-pressed { transform: scale(0.93); }
.hero-pop-approve .hero-pop-done { display: none; align-items: center; gap: 5px; }
.hero-pop-approve .hero-pop-done svg { width: 12px; height: 12px; flex: none; }
.hero-pop-approve.is-done { background: #ECFDF5; color: var(--ok-fg); box-shadow: inset 0 0 0 1px #A7F3D0; }
.hero-pop-approve.is-done .hero-pop-label { display: none; }
.hero-pop-approve.is-done .hero-pop-done { display: inline-flex; }
.hero-approve-pop .hero-approval-pointer { right: 40px; bottom: 6px; }

/* richer popup bodies, mirroring the live product blocks */
.hero-compare .hero-approve-pop { width: min(340px, 90%); }
.hero-pop-mail {
    margin-top: 8px; border: 1px solid #EEF0F5; border-radius: 10px;
    background: #FBFBFD; overflow: hidden;
}
.hero-pop-mail-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 12px; border-bottom: 1px solid #EEF0F5;
}
.hero-pop-mail-row span { flex: none; width: 46px; font-size: 0.6875rem; color: var(--muted); }
.hero-pop-mail-row b { font-size: 0.71875rem; font-weight: 600; color: var(--ink); }
.hero-pop-mail p { padding: 9px 12px 11px; font-size: 0.75rem; line-height: 1.5; color: #4B5563; }

.hero-pop-opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hero-pop-opts li {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid #EEF0F5; border-radius: 9px;
    padding: 7px 11px; font-size: 0.75rem; font-weight: 600; color: var(--body);
    transition: background 200ms ease, border-color 200ms ease;
}
.hero-pop-opts li i {
    flex: none; font-style: normal; font-size: 0.6875rem; color: var(--muted);
}
.hero-pop-opts li span { flex: 1; }
.hero-pop-opts li svg { flex: none; width: 13px; height: 13px; opacity: 0; transition: opacity 200ms ease; }
.hero-pop-opts li.is-picked { background: #F2F4FF; border-color: #C9D3FB; color: var(--ink); }
.hero-pop-opts li.is-picked svg { opacity: 1; color: var(--ink); }
.hero-pop-opts li.hero-pop-custom { color: var(--muted); font-weight: 500; }
.hero-pop-opts li.hero-pop-custom svg { opacity: 1; width: 12px; height: 12px; color: var(--muted); }

.hero-pop-field { margin-top: 10px; }
.hero-pop-field label {
    display: block; font-size: 0.6875rem; font-weight: 700; color: var(--ink); margin-bottom: 5px;
}
.hero-pop-input {
    position: relative; display: flex; align-items: center;
    border: 1px solid #E3E6EE; border-radius: 9px; background: #fff;
    padding: 8px 11px; min-height: 34px; font-size: 0.75rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hero-pop-input.is-focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(76, 107, 238, 0.14); }
.hero-pop-input span { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hero-pop-input em { font-style: normal; color: #9CA3AF; }
.hero-pop-input.is-focus em, .hero-pop-input.has-text em { display: none; }
.hero-pop-caret {
    width: 1.5px; height: 14px; margin-left: 1px; background: var(--ink);
    animation: gpt-blink 900ms steps(1) infinite;
}

/* full-width blue submit, like the product */
.hero-pop-submit {
    width: 100%; margin-top: 12px; padding: 8px 16px;
    background: var(--brand-blue); border-radius: 9px;
}
.hero-pop-submit.is-done { background: #ECFDF5; }

@keyframes hero-pointer-arrive {
    from { opacity: 0; transform: translate(34px,22px) scale(1.05); }
    to { opacity: 1; transform: translate(-8px,-11px) scale(1); }
}

.hero-team-approval button:hover { background: #2B2430; }

.hero-process-complete {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 15px;
    border: 1px solid #CDE7D6;
    background: #F1FAF5;
}

.hero-process-complete > span {
    flex: none;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #16A56F;
    color: #fff;
    font-weight: 900;
}

.hero-parallel-queue {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: 64px;
    border-top: 1px solid var(--line);
    background: #FCFBFB;
}

.hero-parallel-queue > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 12px 12px;
    border-left: 1px solid var(--line);
}

.hero-parallel-queue > div:first-child { border-left: 0; }
.hero-parallel-queue > div.is-primary { background: #FFF7FF; }
.hero-parallel-queue strong { overflow: hidden; color: var(--ink); font-size: 0.625rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-parallel-queue span { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font-size: 0.5625rem; font-weight: 700; }
.hero-parallel-queue span.is-waiting { color: #76590F; }
.hero-parallel-queue span.is-done { color: var(--ok-fg); }

.hero-compare-vs {
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 0 0 7px rgba(252,249,247,0.92);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.hero-compare-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.hero-compare-progress span {
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: #DCD4D2;
    transition: width 400ms ease, background 400ms ease;
}

.hero-compare-progress span.is-active { width: 52px; background: var(--ink); }
.hero-compare-stage[data-phase="askpilot"] .hero-compare-progress span:first-child,
.hero-compare-stage[data-phase="done"] .hero-compare-progress span:first-child { width: 28px; background: #DCD4D2; }
.hero-compare-stage[data-phase="askpilot"] .hero-compare-progress span:last-child,
.hero-compare-stage[data-phase="done"] .hero-compare-progress span:last-child { width: 52px; background: var(--pink-deep); }

.hero-compare-mark {
    position: absolute;
    width: 17px;
    height: 17px;
    opacity: 0.45;
}
.hero-compare-mark::before,
.hero-compare-mark::after { content: ""; position: absolute; background: var(--body); }
.hero-compare-mark::before { left: 8px; top: 0; width: 1px; height: 17px; }
.hero-compare-mark::after { left: 0; top: 8px; width: 17px; height: 1px; }
.hero-compare-mark.is-tl { top: 15px; left: 15px; }
.hero-compare-mark.is-tr { top: 15px; right: 15px; }
.hero-compare-mark.is-bl { bottom: 15px; left: 15px; }
.hero-compare-mark.is-br { right: 15px; bottom: 15px; }

.hero-compare .is-concealed {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* the thinking line leaves the flow entirely when hidden, so the
   streamed answer starts exactly where "Thinking" sat, matching
   how the real UI replaces it in place */
.hero-gpt-thinking.is-concealed { display: none; }

@media (max-width: 1020px) {
    .hero-compare-stage { padding-inline: 24px; }
    .hero-compare-grid { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr); }
    .hero-gpt-conversation { padding-inline: 18px; }
    .hero-askpilot-work { padding-inline: 18px; }
    .hero-team-approval,
    .hero-process-complete { left: 18px; right: 18px; }
}

@media (max-width: 900px) {
    .hero-compare { margin-top: 70px; }
    .hero-compare-stage { padding: 40px 18px 28px; }
    .hero-compare-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
    .hero-compare-vs { margin: 0 auto; }
    .hero-compare-card { opacity: 1; filter: none; border-color: var(--ink); transform: none !important; }
    .hero-card-cap--gpt { color: var(--ink); }
    .hero-card-cap--ap { color: var(--ink); }
    .hero-app-window { min-height: 520px; }
}

@media (max-width: 620px) {
    .hero-compare { margin-top: 58px; }
    .hero-compare-stage { margin-inline: -2px; padding-inline: 10px; border-radius: 24px; }
    .hero-compare-card { padding: 7px; border-radius: 20px; }
    .hero-compare-label { min-height: 37px; top: -22px; font-size: 0.8125rem; }
    .hero-card-cap { margin: 0 6px 44px; font-size: 1.125rem; }
    .hero-app-window { min-height: 500px; border-radius: 14px; }
    .hero-app-bar { padding-inline: 14px; }
    .hero-gpt-conversation { padding: 22px 16px 18px; }
    .hero-gpt-prompt p { max-width: 86%; }
    .hero-askpilot-work { min-height: 412px; padding: 18px 14px 150px; }
    .hero-team-approval,
    .hero-process-complete { left: 14px; right: 14px; }
    .hero-process-title > div strong { font-size: 0.9375rem; }
    .hero-process-steps p { font-size: 0.6875rem; }
    .hero-parallel-queue > div { padding-inline: 8px; }
    .hero-parallel-queue > div:nth-child(3) { display: none; }
    .hero-parallel-queue { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-compare-stage::before,
    .hero-compare-stage::after,
    .hero-compare-card,
    .hero-compare .is-concealed,
    .hero-process-total i,
    .hero-parallel-queue span i,
    .hero-type-caret,
    .hero-thinking-dots i,
    .hero-process-steps li.is-current > span,
    .hero-approval-pointer { animation: none !important; transition: none !important; }
}

/* ============================================================
   Final CTA: the closing growth ask. Wide centred title, mark,
   dual buttons. Top border ties it to the section rhythm.
   ============================================================ */
.grow-cta {
    border-top: 1px solid var(--line);
    padding: 120px 0 130px;
    text-align: center;
}
.grow-cta-mark { width: 52px; height: 52px; margin: 0 auto 26px; }
.grow-cta-title {
    font-size: 4.5rem;   /* matches subpage h2 (text-7xl) */
    font-weight: 800; line-height: 1.04; letter-spacing: -0.03em;
    color: var(--ink); max-width: 15em; margin: 0 auto;
}
.grow-cta-sub {
    margin: 22px auto 0; max-width: 34em;
    font-size: 1.25rem;   /* matches subpage section descriptions (text-xl) */
    color: var(--body); line-height: 1.5;
}
.grow-cta-row {
    margin-top: 36px;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 767px) {
    .grow-cta { padding: 80px 0 84px; }
}


/* very small screens: even the rail folds away */
@media (max-width: 460px) {
    .hero-gpt-side { display: none; }
}

/* chat title centred in the ChatGPT top bar */
.hero-gpt-topbar { position: relative; }
.hero-gpt-chat-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 0.75rem; font-weight: 650; color: #0D0D0D;
}

/* streamed bullet lines in the reply */
.hero-gpt-bullets {
    margin: 8px 0 0; padding-left: 18px;
    display: grid; gap: 5px;
}
.hero-gpt-bullets li {
    font-size: 0.8125rem; line-height: 1.5; color: #0D0D0D;
    opacity: 0; transform: translateY(4px);
    transition: opacity 260ms ease, transform 300ms ease;
}
.hero-gpt-bullets li.is-in { opacity: 1; transform: none; }

/* the gate divider: terms signed unlocks the parallel burst */
.hero-gate {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0;
    transition: opacity 420ms ease, transform 500ms cubic-bezier(0.16,1,0.3,1), visibility 420ms;
}
.hero-gate i { flex: 1; height: 1px; background: var(--line); }
.hero-gate span {
    flex: none;
    font-size: 0.5938rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brand-blue);
}
.hero-parallel-steps { margin-top: 2px; }

/* The Home Club credentials inside the quote card: the awards and
   rating that make the endorsement carry weight */
.origin-cred {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--line);
}
.origin-cred-badge { height: 58px; width: auto; flex: none; }
.origin-cred-meta { display: grid; gap: 2px; line-height: 1.35; }
.origin-cred-meta strong { font-size: 0.8438rem; font-weight: 750; color: var(--ink); }
.origin-cred-meta small { font-size: 0.75rem; color: var(--muted); }
.origin-cred-stars {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 650; color: var(--body);
    margin-top: 2px;
}
.origin-cred-stars i { color: #FBBC04; font-style: normal; font-size: 0.8125rem; letter-spacing: 1px; }

/* Call us buttons: soft pink wash, no hover overlay */
a.btn-outline[href^="tel:"] { background: #FFF9FF; }
a.btn-outline[href^="tel:"]:hover { background: #FFF9FF; }

/* ============================================================
   Mobile type scale — mirrors the subpages' Tailwind steps
   (h1 text-4xl -> sm:text-8xl, h2 text-3xl -> sm:text-7xl) so
   titles read the same size on every page at every width.
   Also bumps the struck ChatGPT thesis line for legibility.
   ============================================================ */
@media (max-width: 639.98px) {
    .hero-title { font-size: 2.25rem; }   /* text-4xl */
    .sec-title,
    .origin-title,
    .onb-title,
    .price-title,
    .grow-cta-title { font-size: 1.875rem; }   /* text-3xl */
    .thesis-old { font-size: clamp(1.1875rem, 5.2vw, 1.375rem); }
    .thesis-new { font-size: clamp(1.3125rem, 5.8vw, 1.5625rem); }
    /* let the struck line wrap when it can't fit one row; the animated
       ::after can't strike across wrapped lines, so swap it for native
       line-through whose colour fades in on the same 1300ms beat */
    .thesis-old span { white-space: normal; }
    .thesis-old span::after { display: none; }
    .thesis-old span {
        text-decoration: line-through;
        text-decoration-thickness: 1.5px;
        text-decoration-color: transparent;
        animation: thesis-strike-fade 360ms ease 1300ms forwards;
    }
}
@keyframes thesis-strike-fade { to { text-decoration-color: var(--ink); } }
@media (max-width: 639.98px) and (prefers-reduced-motion: reduce) {
    .thesis-old span { animation: none; text-decoration-color: var(--ink); }
}

/* ============================================================
   Stacked hero (<=900px): show only the Askpilot panel under a
   single ink title that says what Askpilot does. The ChatGPT
   window, the VS badge and both duel captions are hidden; the
   thesis lines above still carry the "vs ChatGPT" contrast.
   (js/v8.js skips the ChatGPT beats at this width too.)
   ============================================================ */
.hero-card-cap--mobile { display: none; }
@media (max-width: 900px) {
    .hero-gpt-card,
    .hero-compare-vs,
    .hero-card-cap--gpt,
    .hero-card-cap--ap { display: none; }
    /* the floating Askpilot pill duplicates the window header logo */
    .hero-compare-label { display: none; }
    .hero-card-cap--mobile {
        display: block;
        font-size: clamp(1.375rem, 5.6vw, 1.625rem);
        line-height: 1.25;
    }
    .hero-compare-stage[data-phase] .hero-card-cap--mobile { color: var(--ink); }
    .hero-compare-grid { gap: 0; }
    /* the empty ChatGPT cell collapses; the title sits right on the card */
    .hero-compare-cell:first-child { display: none; }
}

/* phones: the trigger playground shows a curated six (phone, leads,
   maintenance, sales, compliance, any) instead of the full wall */
@media (max-width: 640px) {
    .trig-chip--extra { display: none; }
}