/*
 * Marketing pages.
 *
 * Uses the design tokens from site.css rather than defining its own palette,
 * so a product page and the signed-in panel look like the same product.
 */

.marketing {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px) 80px;
}

/* Hero */

.marketing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    margin-bottom: clamp(48px, 8vw, 88px);
}

/* Let visitors see and try the live avatar before choosing a use case. */
.marketing-hero-featured {
    position: relative;
    isolation: isolate;
    padding: clamp(28px, 5vw, 60px);
    border-radius: 28px;
    color: white;
    background: radial-gradient(circle at 88% 12%, #495842 0, transparent 38%),
                linear-gradient(135deg, #1f1e30 15%, #343b37 100%);
    box-shadow: 0 24px 60px rgba(31, 30, 48, .18);
}

.marketing-hero-featured .eyebrow { color: var(--lime); }
.marketing-hero-featured h1 { max-width: 11ch; }
.marketing-hero-featured .btn-secondary {
    color: white;
    background: transparent;
    border-color: #a9aea3;
}
.marketing-hero-featured .btn-secondary:hover { background: rgba(255, 255, 255, .12); }
/* The hero paints its buttons for a dark background, but the mock website
   inside it is white, so a button sitting on that card goes back to ink. */
.marketing-hero-featured .widget-preview-chat .btn-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}
.marketing-hero-featured .widget-preview-chat .btn-secondary:hover { background: var(--canvas); border-color: var(--ink); }
.marketing-hero-featured .hero-trust li::before { color: var(--lime); }
.hero-demo-frame {
    min-width: 0;
    padding: clamp(16px, 2.5vw, 30px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 22px;
    background: rgba(255, 255, 255, .1);
}
.hero-demo-label {
    margin: 0 0 14px;
    color: var(--lime);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.marketing-hero-featured .demo-stage { width: min(100%, 340px); }
.marketing-hero-featured .demo-caption,
.marketing-hero-featured .demo-error,
.marketing-hero-featured .demo-note { color: #e4e6df; }
.preview-caption { margin: 16px 0 0; color: #e4e6df; font-size: .8rem; line-height: 1.5; text-align: center; }
/* The whole mock device starts the conversation, so it reads as one target
   rather than a picture with a button in it. Once live it is a screen being
   watched, not something to press. */
[data-demo-surface] { cursor: pointer; transition: transform .15s; }
[data-demo-surface]:hover { transform: translateY(-2px); }
[data-demo-surface]:has(.demo-avatar.is-live) { cursor: default; transform: none; }
.marketing-hero-kiosk { background: radial-gradient(circle at 85% 12%, #555158 0, transparent 40%), linear-gradient(135deg, #1f1e30, #394343); }
.kiosk-preview-device {
    max-width: 335px;
    margin: auto;
    padding: 18px 18px 25px;
    border: 7px solid #15151c;
    border-radius: 28px;
    background: #f3f3ef;
    box-shadow: 0 14px 0 -7px #898c83, 0 25px 36px rgba(0,0,0,.32);
}
.kiosk-preview-top { display: block; margin: 0 0 12px; color: var(--ink); font-size: .78rem; font-weight: 800; text-align: center; }
.kiosk-preview-device .demo-avatar { color: var(--ink); }
.kiosk-preview-device .demo-stage { width: min(100%, 225px); }
.kiosk-preview-device .demo-poster, .kiosk-preview-device .demo-video { border-radius: 16px; }
.kiosk-preview-device .demo-controls button { max-width: 100%; }
.kiosk-preview-device .demo-note, .kiosk-preview-device .demo-caption { color: var(--ink-2); }
.kiosk-preview-device .demo-error { color: var(--muted); }
/* The idle still is a face to tap; after starting, the avatar is the tablet screen. */
.kiosk-preview-device { position: relative; }
.kiosk-preview-device:has(.demo-avatar.is-live) { padding: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.kiosk-preview-device:has(.demo-avatar.is-live) .kiosk-preview-top,
.kiosk-preview-device:has(.demo-avatar.is-live) .demo-note { display: none; }
.kiosk-preview-device .demo-avatar.is-live { height: 100%; display: flex; flex-direction: column; gap: 0; }
.kiosk-preview-device .demo-avatar.is-live .demo-stage { width: 100%; flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.kiosk-preview-device .demo-avatar.is-live .demo-video { border-radius: 0; object-fit: cover; }
.kiosk-preview-device .demo-avatar.is-live .demo-controls { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; padding-inline: 14px; }
.kiosk-preview-device .demo-avatar.is-live .demo-controls .btn-secondary {
    color: var(--ink);
    background: white;
    border-color: white;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.kiosk-preview-device .demo-avatar.is-live .demo-controls .btn-secondary:hover { background: var(--lime); border-color: var(--lime); }
/* The status sits at the foot of its stage by default, which in this layout
   is exactly where the controls are lifted to. It moves to the head of the
   screen instead of sitting under the button. */
.kiosk-preview-device .demo-avatar.is-live .demo-state { top: 12px; right: auto; bottom: auto; left: 12px; }
.kiosk-preview-device .demo-avatar.is-live .demo-caption { position: absolute; bottom: 72px; max-width: 90%; color: white; text-shadow: 0 1px 5px black; }
.marketing-hero-widget { background: radial-gradient(circle at 85% 12%, #424c69 0, transparent 40%), linear-gradient(135deg, #1f1e30, #2a3d47); }
.widget-preview-page { overflow: hidden; max-width: 380px; margin: auto; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 18px 34px rgba(0,0,0,.25); }
.widget-preview-browser { display: flex; gap: 5px; align-items: center; padding: 10px 14px; background: #e9eae8; }
.widget-preview-browser span { width: 7px; height: 7px; border-radius: 50%; background: #a3a8a3; }
.widget-preview-browser strong { margin-left: 10px; color: var(--muted); font-size: .7rem; font-weight: 600; }
.widget-preview-content { display: grid; gap: 9px; padding: 18px; }
.widget-preview-content span { height: 9px; border-radius: 8px; background: #e9eae8; }
.widget-preview-content span:last-child { width: 65%; }
.widget-preview-chat { margin: 0 12px 12px auto; width: min(83%, 260px); padding: 12px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.widget-preview-chat > p { margin: 0 0 8px; font-size: .74rem; font-weight: 800; }
.widget-preview-chat .demo-stage { width: min(100%, 145px); }
.widget-preview-chat .demo-avatar { color: var(--ink); }
.widget-preview-chat .demo-controls button { max-width: 100%; padding-inline: 8px; font-size: .75rem; }
.widget-preview-chat .demo-note, .widget-preview-chat .demo-caption { color: var(--ink-2); }
.widget-preview-chat .demo-error { color: var(--muted); }
.widget-preview-page:has(.demo-avatar.is-live) .widget-preview-content { display: none; }
.widget-preview-page:has(.demo-avatar.is-live) .widget-preview-chat { width: calc(100% - 24px); margin: 12px; }
.widget-preview-chat .demo-avatar.is-live .demo-stage { width: 100%; }

/* A hero carrying the live demo gives it equal width to the copy. */
.marketing-hero.has-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

@media (max-width: 880px) {
    .marketing-hero.has-demo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Keep the headline first on the featured hero; cap its demo below. */
    .marketing-hero.has-demo:not(.marketing-hero-featured) .demo-avatar {
        order: -1;
    }

    .marketing-hero.has-demo:not(.marketing-hero-kiosk):not(.marketing-hero-widget) .demo-stage {
        width: min(240px, 60vw);
    }

    .marketing-hero.has-demo .demo-note {
        display: none;
    }
}

.marketing-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.marketing-hero .hero-lead {
    margin: 0 0 24px;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-2);
}

/* Light marketing pages need dark trust text; the featured dark hero reverses it. */
.marketing .hero-trust { color: var(--muted); }
.marketing .marketing-hero-featured .hero-trust { color: #e4e6df; }
.marketing .marketing-hero-featured .hero-lead { color: #e4e6df; }
.marketing .marketing-hero-featured h1 {
    font-size: clamp(2.5rem, 5.7vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.marketing-hero-aside {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.marketing-hero-aside strong {
    display: block;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.marketing-hero-aside ol,
.marketing-hero-aside ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.7;
}

.marketing-hero-aside .code-sample {
    margin-bottom: 12px;
}

/* Sections */

.marketing-section {
    margin-bottom: clamp(48px, 7vw, 80px);
}

.marketing-section h2 {
    margin: 0 0 16px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.marketing-section .section-intro {
    max-width: 46rem;
    margin: 0 0 28px;
    color: var(--ink-2);
    font-size: 1.02rem;
    line-height: 1.65;
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}


.integration-grid a {
    display: block;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
}
.integration-grid a:hover, .integration-grid a:focus-visible { border-color: var(--focus); box-shadow: var(--shadow); }
.integration-grid a h3 { margin: 0 0 10px; }
.integration-grid a p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.55; }
.integration-grid a span { color: var(--focus); font-weight: 750; }

.marketing-grid article {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.marketing-grid h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.marketing-grid p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.94rem;
    line-height: 1.62;
}

.marketing-footnote { margin: 18px 0 0; color: var(--muted); }
.appliance-section {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 24px;
    color: white;
    background: var(--ink);
}
.appliance-section .eyebrow { color: var(--lime); }
.appliance-section .section-intro, .appliance-section p { color: #e4e6df; }
.appliance-section .btn-secondary { margin-top: 24px; }
.appliance-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.appliance-details > div { padding: 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(255, 255, 255, .07); }
.appliance-details strong { display: block; margin-bottom: 8px; }
.appliance-details p { margin: 0; line-height: 1.55; }
.embed-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 22px;
    align-items: center;
    margin-top: 22px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.embed-example > * { min-width: 0; }
.embed-example p { color: var(--ink-2); }
.embed-example .code-sample { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 880px) {
    .appliance-details, .embed-example { grid-template-columns: minmax(0, 1fr); }
}

/* Product cards on the landing page */

/* Three distinct uses first; the two assistant placements appear together below. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.product-grid.product-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 880px) {
    .product-grid.product-grid-three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .product-grid { grid-template-columns: minmax(0, 1fr); }
}

.product-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.product-card:hover,
.product-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--focus);
    box-shadow: var(--shadow);
}

.product-card h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.product-card p {
    margin: 0 0 18px;
    color: var(--ink-2);
    font-size: 0.94rem;
    line-height: 1.6;
}

.product-card-link {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--focus);
}

.product-card-link::after {
    content: " \2192";
}

/* Closing bands */

.marketing-close {
    padding: clamp(24px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.marketing-close > div {
    max-width: 62ch;
}

.marketing-close h2 {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

.marketing-close p {
    color: var(--ink-2);
    line-height: 1.62;
}

.marketing-close-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}

.marketing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 4vw, 40px);
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius);
}

.marketing-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

.marketing-cta p {
    margin: 0;
    opacity: 0.8;
}

.code-sample {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    /* Wrapped rather than scrolled sideways: a request cut off mid-URL on a
       marketing page reads as broken, and nobody scrolls a code block.
       break-word rather than anywhere, so a long URL moves to its own line
       instead of being split mid-word while there is still room for it. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* On a phone the endpoint URL is a few pixels wider than the card, and
   break-word then splits it mid-word anyway. Tightening the block and the
   card around it buys back more than the shortfall, so the address stays in
   one piece. */
@media (max-width: 480px) {
    .code-sample {
        padding: 12px 10px;
        font-size: 0.72rem;
    }

    .marketing-hero-aside {
        padding: 18px 14px;
    }
}

@media (max-width: 860px) {
    .marketing-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Full-width taps rather than two buttons squeezed onto one line. */
    .marketing-close-actions > .btn-primary,
    .marketing-close-actions > .btn-secondary {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Landing-page demo avatar
 *
 * A still image with a button until the visitor asks for a conversation, at
 * which point the video replaces it in the same box. The stage keeps a fixed
 * aspect ratio so swapping image for video does not shift the page.
 */

.demo-avatar {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.demo-stage {
    position: relative;
    width: min(380px, 100%);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink);
    box-shadow: var(--shadow);
}

.demo-poster-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.demo-poster-button:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: -3px;
}

.demo-poster-button[hidden] {
    display: none;
}

.demo-poster,
.demo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Colour and shape come from the shared .status-badge rules so a state reads
   the same here as on the training page; only the corner differs. The reset of
   top/right matters: .status-badge pins those, and leaving them set alongside
   bottom/left stretches the badge across the whole face. */
.demo-state {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 12px;
    left: 12px;
    margin: 0;
}

.demo-state:empty {
    display: none;
}

.demo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.demo-caption {
    margin: 0;
    max-width: 38ch;
    min-height: 1.4em;
    color: var(--ink-2);
    font-size: 0.92rem;
    text-align: center;
}

.demo-error {
    margin: 0;
    min-height: 1.3em;
    color: var(--muted);
    font-size: 0.86rem;
    text-align: center;
}

.demo-error:empty,
.demo-caption:empty {
    min-height: 0;
}

.demo-note {
    margin: 0;
    max-width: 34ch;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}