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

:root {
    --bg: #EDE8DF;
    --bg-card: #FFFCF7;
    --bg-soft: #F5F0E8;
    --surface-blue: #EEF4F8;
    --surface-green: #EEF5F1;
    --surface-amber: #F8F0E5;
    --bg-dark: #1A1A1A;
    --accent: #C4956A;
    --accent-deep: #7D5630;
    --accent-blue: #2F5F8F;
    --accent-green: #1F755B;
    --text: #1A1A1A;
    --text-sec: #5A5650;
    --text-muted: #8A8177;
    --divider: #DDD6CB;
    --dark-text: #F5F0E8;
    --dark-muted: #BDB6AD;
    --radius: 8px;
    --shadow-soft: 0 18px 48px rgba(26, 26, 26, 0.08);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.48) 0, rgba(237, 232, 223, 0) 420px),
        var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { line-height: 1.68; }

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(237, 232, 223, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(221, 214, 203, 0.75);
}

.navbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.logo-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.logo-group img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0;
}

.logo-text span { color: var(--accent-deep); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--text-sec);
    font-size: 0.92rem;
    font-weight: 750;
    text-decoration: none;
}

.nav-links a:hover { color: var(--accent-deep); }

.nav-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
    margin: -8px 0;
}

.nav-menu::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 14px;
}

.nav-menu-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 230px;
    transform: translateX(-50%) translateY(4px);
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(221, 214, 203, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.98);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    z-index: 70;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-menu-panel a {
    display: block;
    padding: 10px 11px;
    border-radius: var(--radius);
    color: var(--text-sec);
    line-height: 1.25;
}

.nav-menu-panel a:hover {
    background: var(--bg-soft);
    color: var(--accent-deep);
}

.nav-cta,
.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-weight: 850;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}

.nav-cta,
.button-primary {
    background: var(--bg-dark);
    color: #FFFCF7;
}

.nav-links .nav-cta {
    color: #FFFCF7;
}

.button-primary:hover,
.nav-cta:hover { background: #000; }

.button-secondary {
    border: 1px solid rgba(125, 86, 48, 0.34);
    color: var(--accent-deep);
    background: rgba(255, 252, 247, 0.74);
}

.button-secondary:hover {
    border-color: rgba(125, 86, 48, 0.7);
    background: var(--bg-card);
}

.hero {
    padding: 74px 0 70px;
    border-bottom: 1px solid var(--divider);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.82fr);
    gap: 52px;
    align-items: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover { color: var(--accent-deep); }

.eyebrow {
    margin-bottom: 16px;
    color: var(--accent-deep);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1 {
    max-width: 760px;
    font-size: 3.7rem;
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.dek {
    max-width: 700px;
    margin-top: 22px;
    color: var(--text-sec);
    font-size: 1.18rem;
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.proof-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(47, 95, 143, 0.24);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.72);
    color: var(--accent-blue);
    font-size: 0.84rem;
    font-weight: 850;
}

.feature-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.feature-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(221, 214, 203, 0.94);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.78);
    color: var(--text-sec);
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
}

.feature-tabs a:hover {
    border-color: rgba(47, 95, 143, 0.48);
    color: var(--accent-blue);
}

.feature-tabs a[aria-current="page"] {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
    color: #FFFCF7;
}

.hero-panel {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-soft);
    min-width: 0;
}

.hero-panel img {
    width: 100%;
    border: 1px solid rgba(221, 214, 203, 0.8);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.panel-caption {
    margin-top: 16px;
    color: var(--text-sec);
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 700;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
}

.trust-label {
    width: 100%;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(221, 214, 203, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.82);
    color: var(--text-sec);
    font-size: 0.82rem;
    font-weight: 850;
}

.product-status {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.status-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius);
    background: rgba(245, 240, 232, 0.86);
    border: 1px solid rgba(221, 214, 203, 0.76);
}

.status-dot {
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(31, 117, 91, 0.12);
    flex: 0 0 auto;
}

.status-row strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: 0.88rem;
}

.status-row span {
    color: var(--text-sec);
    font-size: 0.84rem;
    line-height: 1.45;
}

.mini-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.mini-flow span {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: #EEF4F1;
    color: var(--accent-green);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.25;
    padding: 8px;
}

.section {
    padding: 82px 0;
    border-bottom: 1px solid rgba(221, 214, 203, 0.76);
}

.section-soft {
    background: rgba(255, 252, 247, 0.54);
}

.section-dark {
    background: var(--bg-dark);
    color: var(--dark-text);
}

.section-header {
    max-width: 760px;
    margin-bottom: 34px;
}

.section-kicker {
    margin-bottom: 12px;
    color: var(--accent-deep);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.section-dark .section-kicker { color: var(--accent); }

h2 {
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.section-header p {
    margin-top: 14px;
    color: var(--text-sec);
    font-size: 1.05rem;
}

.section-dark .section-header p { color: var(--dark-muted); }

.feature-grid,
.intent-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.feature-card,
.intent-card,
.related-card {
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 10px 26px rgba(26, 26, 26, 0.03);
}

.feature-card small,
.intent-card small,
.related-card small {
    display: inline-flex;
    margin-bottom: 13px;
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.feature-card strong,
.intent-card strong,
.related-card strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 9px;
}

.feature-card p,
.intent-card p,
.related-card p {
    color: var(--text-sec);
    font-size: 0.96rem;
}

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.outcome-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(221, 214, 203, 0.86);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.035);
}

.outcome-card:nth-child(3n + 1) { background: linear-gradient(180deg, #FFFCF7, var(--surface-green)); }
.outcome-card:nth-child(3n + 2) { background: linear-gradient(180deg, #FFFCF7, var(--surface-blue)); }
.outcome-card:nth-child(3n) { background: linear-gradient(180deg, #FFFCF7, var(--surface-amber)); }

.outcome-card small {
    display: block;
    margin-bottom: 28px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.outcome-card strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.28;
    margin-bottom: 9px;
}

.outcome-card p {
    color: var(--text-sec);
    font-size: 0.94rem;
}

.product-tour {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: stretch;
}

.tour-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 30px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-dark);
    color: var(--dark-text);
}

.tour-copy .section-kicker { color: var(--accent); }

.tour-copy h2 {
    color: var(--dark-text);
    font-size: 2.18rem;
}

.tour-copy p {
    margin-top: 14px;
    color: var(--dark-muted);
    font-size: 1.03rem;
}

.tour-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tour-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.1);
    color: var(--dark-text);
    font-size: 0.78rem;
    font-weight: 850;
}

.tour-panel {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
}

.tour-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(221, 214, 203, 0.82);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.76);
}

.tour-step-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--surface-blue);
    color: var(--accent-blue);
    font-weight: 900;
}

.tour-step:nth-child(2) .tour-step-icon {
    background: var(--surface-green);
    color: var(--accent-green);
}

.tour-step:nth-child(3) .tour-step-icon {
    background: var(--surface-amber);
    color: var(--accent-deep);
}

.tour-step h3 {
    margin-bottom: 6px;
    font-size: 1.02rem;
    line-height: 1.35;
}

.tour-step p {
    color: var(--text-sec);
    font-size: 0.94rem;
}

.decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

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

.decision-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: 0 10px 26px rgba(26, 26, 26, 0.03);
}

.decision-card.is-primary {
    border-color: rgba(47, 95, 143, 0.32);
    background: linear-gradient(180deg, #FFFCF7 0%, var(--surface-blue) 100%);
}

.decision-card.is-muted {
    background: rgba(255, 252, 247, 0.62);
}

.decision-card small {
    display: block;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.decision-card h3 {
    margin-bottom: 12px;
    font-size: 1.28rem;
    line-height: 1.22;
}

.decision-card p {
    color: var(--text-sec);
    font-size: 0.98rem;
}

.decision-list {
    display: grid;
    gap: 9px;
    margin: 18px 0 0;
    padding-left: 0;
}

.decision-list li {
    list-style: none;
    color: var(--text-sec);
    font-size: 0.94rem;
    line-height: 1.45;
    padding-left: 18px;
    position: relative;
}

.decision-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.64em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
}

.integration-row {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 20px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.integration-row h2 {
    font-size: 1.72rem;
}

.integration-row p {
    margin-top: 10px;
    color: var(--text-sec);
}

.integration-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.integration-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(221, 214, 203, 0.9);
    border-radius: var(--radius);
    background: var(--surface-green);
    color: var(--accent-green);
    font-size: 0.84rem;
    font-weight: 850;
}

.next-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}

.next-copy {
    align-self: start;
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.next-copy h2 {
    font-size: 1.82rem;
}

.next-copy p {
    margin-top: 12px;
    color: var(--text-sec);
}

.next-grid .related-grid {
    grid-template-columns: 1fr;
}

.feature-console {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(221, 214, 203, 0.88);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #FFFCF7 0%, #F4EFE7 100%);
}

.console-row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(221, 214, 203, 0.78);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.78);
}

.console-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.console-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 0.98rem;
}

.console-row p {
    color: var(--text-sec);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Dedicated feature routes */
.feature-deep {
    background:
        radial-gradient(circle at 18% 8%, rgba(196, 149, 106, 0.14), transparent 28%),
        radial-gradient(circle at 82% 2%, rgba(47, 95, 143, 0.12), transparent 26%),
        var(--bg);
}

.feature-hero {
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--divider);
}

.feature-hero-centered {
    max-width: 930px;
    margin: 0 auto;
    text-align: center;
}

.feature-hero-centered .breadcrumb,
.feature-hero-centered .hero-actions,
.feature-hero-centered .proof-row,
.feature-hero-centered .feature-tabs {
    justify-content: center;
}

.feature-hero h1 {
    margin: 0 auto;
}

.feature-hero .dek {
    margin-left: auto;
    margin-right: auto;
}

.feature-artifact {
    width: 100%;
    max-width: 1120px;
    margin: 38px auto 0;
}

.chat-artifact {
    position: relative;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 390px;
    max-height: 390px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: #FFFCF7;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.chat-artifact::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 38px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0), #FFFCF7);
    pointer-events: none;
}

.chat-sidebar {
    padding: 18px;
    background: #F3EEE6;
    border-right: 1px solid var(--divider);
}

.chat-sidebar small,
.chat-main small,
.task-column small,
.sync-node small,
.mcp-permission small {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.meeting-thread {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.meeting-thread div {
    padding: 12px;
    border: 1px solid rgba(221, 214, 203, 0.8);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.82);
}

.meeting-thread strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.meeting-thread span {
    color: var(--text-sec);
    font-size: 0.8rem;
}

.chat-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 22px;
    gap: 16px;
}

.chat-question {
    padding: 16px 18px;
    border: 1px solid rgba(47, 95, 143, 0.24);
    border-radius: var(--radius);
    background: var(--surface-blue);
    color: var(--accent-blue);
    font-weight: 900;
}

.chat-answer {
    padding: 26px;
    border: 1px solid rgba(221, 214, 203, 0.84);
    border-radius: var(--radius);
    background: #fff;
}

.chat-answer h2 {
    margin: 8px 0 12px;
    font-size: 2rem;
}

.answer-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.answer-list div {
    padding: 14px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--text-sec);
    font-size: 0.9rem;
}

.prompt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prompt-row span {
    padding: 8px 10px;
    border: 1px solid rgba(221, 214, 203, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.86);
    color: var(--text-sec);
    font-size: 0.8rem;
    font-weight: 800;
}

.search-context-band {
    display: grid;
    grid-template-columns: 0.8fr repeat(3, 1fr);
    gap: 12px;
    align-items: stretch;
}

.context-lead,
.context-card {
    padding: 22px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.context-lead {
    background: var(--bg-dark);
    color: var(--dark-text);
}

.context-lead p {
    margin-top: 12px;
    color: var(--dark-muted);
}

.context-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.context-card p {
    color: var(--text-sec);
    font-size: 0.94rem;
}

.capture-stage {
    display: grid;
    grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
    gap: 24px;
    align-items: center;
}

.phone-shell {
    position: relative;
    min-height: 560px;
    padding: 18px;
    border: 10px solid #191919;
    border-radius: 38px;
    background: #FFFCF7;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.phone-shell::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 36px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0), #FFFCF7);
    pointer-events: none;
}

.phone-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    color: var(--text-sec);
    font-size: 0.8rem;
    font-weight: 850;
}

.record-orb {
    width: 134px;
    height: 134px;
    margin: 28px auto;
    border-radius: 50%;
    background: radial-gradient(circle, #D96556 0 34%, #F4C9BF 35% 57%, #F8EFE9 58%);
    border: 1px solid rgba(217, 101, 86, 0.28);
}

.phone-shell h2 {
    font-size: 1.58rem;
    text-align: center;
}

.phone-shell p {
    margin-top: 12px;
    color: var(--text-sec);
    text-align: center;
}

.phone-status-list {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.phone-status-list div {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface-green);
    color: var(--accent-green);
    font-weight: 850;
    font-size: 0.88rem;
}

.field-map {
    display: grid;
    gap: 14px;
}

.route-line {
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(221, 214, 203, 0.7) 1px, transparent 1px),
        linear-gradient(180deg, rgba(221, 214, 203, 0.7) 1px, transparent 1px),
        #FFFCF7;
    background-size: 80px 80px;
}

.route-stops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.route-stop {
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(125, 86, 48, 0.28);
    border-radius: var(--radius);
    background: rgba(255, 252, 247, 0.88);
}

.route-stop strong {
    display: block;
    margin-bottom: 8px;
}

.route-stop span {
    color: var(--text-sec);
    font-size: 0.88rem;
}

.capture-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.capture-proof div {
    padding: 20px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.task-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    max-height: 360px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: #252525;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.task-board::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 36px;
    background: linear-gradient(180deg, rgba(37, 37, 37, 0), rgba(37, 37, 37, 0.88) 82%, #252525);
    pointer-events: none;
}

.task-column {
    min-height: 440px;
    padding: 14px;
    border-radius: var(--radius);
    background: #FFFCF7;
}

.task-column h2 {
    margin: 8px 0 14px;
    font-size: 1.3rem;
}

.task-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(221, 214, 203, 0.82);
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--text-sec);
    font-size: 0.9rem;
}

.task-card + .task-card {
    margin-top: 10px;
}

.task-card strong {
    color: var(--text);
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-meta span {
    padding: 5px 7px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--accent-blue);
    font-size: 0.74rem;
    font-weight: 850;
}

.task-review-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.task-review-strip div {
    padding: 18px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.sync-pipeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 22px;
    max-height: 360px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: #FFFCF7;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.sync-pipeline::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 36px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0), #FFFCF7);
    pointer-events: none;
}

.sync-node {
    min-height: 154px;
    padding: 16px;
    border: 1px solid rgba(221, 214, 203, 0.86);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.sync-node strong {
    display: block;
    margin: 12px 0 8px;
    font-size: 1rem;
}

.sync-node p {
    color: var(--text-sec);
    font-size: 0.86rem;
}

.destination-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.destination-card {
    padding: 18px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.destination-card strong {
    display: block;
    margin-bottom: 8px;
}

.destination-card p {
    color: var(--text-sec);
    font-size: 0.88rem;
}

.sync-status-panel {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 18px;
    align-items: stretch;
}

.sync-status-panel > div {
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.mcp-console-deep {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 18px;
    padding: 20px;
    max-height: 330px;
    border: 1px solid #2D2D2D;
    border-radius: var(--radius);
    background: #171717;
    color: var(--dark-text);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.mcp-console-deep::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 42px;
    background: linear-gradient(180deg, rgba(23, 23, 23, 0), rgba(23, 23, 23, 0.9) 82%, #171717);
    pointer-events: none;
}

.mcp-terminal {
    min-height: 440px;
    padding: 18px;
    border: 1px solid #3A3A3A;
    border-radius: var(--radius);
    background: #0F0F0F;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.mcp-line {
    margin-bottom: 13px;
    color: #C8D7C8;
    font-size: 0.88rem;
    line-height: 1.55;
}

.mcp-line span {
    color: #C4956A;
}

.mcp-permissions {
    display: grid;
    gap: 12px;
}

.mcp-permission {
    padding: 16px;
    border: 1px solid #3A3A3A;
    border-radius: var(--radius);
    background: #222;
}

.mcp-permission strong {
    display: block;
    margin: 8px 0;
    color: var(--dark-text);
}

.mcp-permission p {
    color: var(--dark-muted);
    font-size: 0.9rem;
}

.permission-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.permission-split > div {
    padding: 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.related-card {
    display: block;
    text-decoration: none;
}

.related-card:hover {
    border-color: rgba(47, 95, 143, 0.52);
    transform: translateY(-1px);
}

.workflow {
    display: grid;
    gap: 12px;
}

.workflow-step {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(26, 26, 26, 0.025);
}

.step-number {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-weight: 900;
}

.workflow-step h3 {
    margin-bottom: 7px;
    font-size: 1.12rem;
}

.workflow-step p {
    color: var(--text-sec);
    font-size: 0.98rem;
}

.comparison-wrap {
    overflow-x: auto;
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    background: var(--bg-card);
}

table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

th, td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(221, 214, 203, 0.82);
    vertical-align: top;
}

th {
    color: var(--text);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

td {
    color: var(--text-sec);
    line-height: 1.55;
    font-size: 0.95rem;
}

td:first-child {
    color: var(--text);
    font-weight: 850;
}

tr:last-child td { border-bottom: 0; }

.split-band {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: start;
}

.quote-panel {
    padding: 26px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-soft);
}

.quote-panel p {
    color: var(--text);
    font-size: 1.24rem;
    font-weight: 850;
    line-height: 1.5;
}

.quote-panel span {
    display: block;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 850px;
}

details {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: 0;
}

summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 20px;
    font-weight: 900;
    line-height: 1.35;
    color: var(--text);
}

summary::-webkit-details-marker { display: none; }

details p {
    padding: 0 20px 18px;
    color: var(--text-sec);
}

.final-cta {
    background: var(--bg-dark);
    color: var(--dark-text);
    padding: 82px 0;
}

.final-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.final-cta p {
    margin-top: 12px;
    color: var(--dark-muted);
    font-size: 1.06rem;
    max-width: 700px;
}

.final-cta .button-primary {
    background: var(--accent);
    color: #fff;
}

.footer {
    background: var(--bg-card);
    border-top: 1px solid var(--divider);
    padding: 34px 0;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
}

.footer-links a:hover { color: var(--accent-deep); }

.footer-copy {
    color: var(--text-muted);
    font-size: 0.88rem;
}

@media (max-width: 920px) {
    .hero-grid,
    .split-band,
    .product-tour,
    .integration-row,
    .next-grid,
    .chat-artifact,
    .capture-stage,
    .sync-status-panel,
    .mcp-console-deep,
    .final-cta-inner {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .intent-grid,
    .related-grid,
    .outcome-grid,
    .decision-grid,
    .decision-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .answer-list,
    .search-context-band,
    .route-stops,
    .capture-proof,
    .task-board,
    .sync-pipeline,
    .destination-grid,
    .permission-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--divider);
    }

    .integration-chips { justify-content: flex-start; }

    h1 { font-size: 3rem; }
    h2 { font-size: 2.05rem; }
}

@media (max-width: 640px) {
    .container { padding: 0 20px; }
    .navbar-inner { padding: 14px 20px; }
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-links .nav-menu { display: none; }
    .nav-cta { min-height: 40px; padding: 10px 12px; font-size: 0.82rem; }
    .hero { padding: 38px 0 42px; }
    .hero-grid { gap: 22px; }
    .breadcrumb { margin-bottom: 20px; font-size: 0.78rem; }
    .eyebrow { margin-bottom: 12px; font-size: 0.76rem; }
    .section, .final-cta { padding: 56px 0; }
    h1 { font-size: 1.98rem; line-height: 1.07; }
    h2 { font-size: 1.72rem; }
    .dek { margin-top: 16px; font-size: 0.98rem; line-height: 1.58; }
    .hero-actions { margin-top: 22px; gap: 10px; }
    .button-primary,
    .button-secondary {
        min-height: 42px;
        padding: 10px 13px;
        font-size: 0.92rem;
    }
    .proof-row { margin-top: 20px; gap: 8px; }
    .feature-tabs { margin-top: 18px; gap: 7px; }
    .feature-tabs a {
        min-height: 32px;
        padding: 7px 9px;
        font-size: 0.76rem;
    }
    .proof-pill {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 0.78rem;
    }
    .hero .trust-strip,
    .hero-panel {
        display: none;
    }
    .feature-grid,
    .intent-grid,
    .related-grid,
    .outcome-grid,
    .decision-grid,
    .decision-grid-three,
    .answer-list,
    .search-context-band,
    .route-stops,
    .capture-proof,
    .task-board,
    .task-review-strip,
    .sync-pipeline,
    .destination-grid,
    .permission-split {
        grid-template-columns: 1fr;
    }
    .feature-hero { padding: 38px 0 42px; }
    .feature-artifact { margin-top: 24px; }
    .chat-artifact,
    .task-board,
    .sync-pipeline,
    .mcp-console-deep {
        padding: 12px;
        max-height: 200px;
        min-height: 0;
    }
    .chat-artifact { min-height: 200px; }
    .chat-main,
    .chat-sidebar,
    .chat-answer {
        padding: 16px;
    }
    .chat-answer h2 { font-size: 1.45rem; }
    .phone-shell {
        min-height: auto;
        max-height: 200px;
        border-width: 7px;
        border-radius: 28px;
    }
    .record-orb {
        width: 96px;
        height: 96px;
        margin: 18px auto;
    }
    .task-column { min-height: auto; }
    .sync-node { min-height: auto; }
    .mcp-terminal { min-height: auto; }
    .mini-flow { grid-template-columns: 1fr; }
    .workflow-step {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tour-copy,
    .decision-card,
    .integration-row,
    .next-copy {
        padding: 20px;
    }
    .console-row { grid-template-columns: 1fr; }
    .tour-step { grid-template-columns: 1fr; }
    .hero-panel { padding: 16px; }
    table { min-width: 620px; }
    th, td { padding: 14px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}