/* Agent Native marketing page */
.agent-native-page { background: var(--cream, #f7f1e8); color: var(--ink, #171615); }
.agent-native-page main { overflow: clip; }
.agent-native-hero { padding: clamp(5rem, 10vw, 8rem) 0 4rem; background: linear-gradient(135deg, #f8f0e7 0%, #eee8ff 52%, #dff0eb 100%); }
.agent-native-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.agent-native-kicker { display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#5f4ba6; }
.agent-native-kicker i { width:.55rem; height:.55rem; border-radius:50%; background:#b77954; box-shadow:0 0 0 .3rem rgba(183,121,84,.14); }
.agent-native-hero h1 { max-width: 760px; margin:.8rem 0 1.25rem; font-size:clamp(3rem, 7vw, 6.3rem); line-height:.95; letter-spacing:-.065em; }
.agent-native-hero .lede { max-width:650px; margin:0; font-size:clamp(1.08rem, 2vw, 1.35rem); line-height:1.55; color:#4c4744; }
.agent-native-hero .button-row { margin-top:2rem; }
.agent-native-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.2rem; max-width:650px; }
.agent-native-proof div { border-top:1px solid rgba(23,22,21,.18); padding-top:.7rem; }
.agent-native-proof strong { display:block; font-size:1.35rem; letter-spacing:-.03em; }
.agent-native-proof span { display:block; margin-top:.25rem; font-size:.8rem; color:#625c58; }
.agent-native-diagram { position:relative; min-height:430px; border:1px solid rgba(23,22,21,.14); border-radius:2rem; background:rgba(255,255,255,.55); box-shadow:0 28px 80px rgba(42,36,69,.13); padding:1.25rem; display:grid; place-items:center; }
.agent-native-diagram:before { content:""; position:absolute; inset:12% 18%; border:1px dashed rgba(95,75,166,.35); border-radius:50%; }
.agent-native-hub { position:relative; z-index:1; width:180px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; padding:1.5rem; background:#26233a; color:#fff; box-shadow:0 18px 36px rgba(38,35,58,.24); }
.agent-native-hub strong { display:block; font-size:1.3rem; letter-spacing:-.04em; }
.agent-native-hub span { display:block; margin-top:.4rem; font-size:.76rem; color:#d9d3ff; }
.agent-native-node { position:absolute; z-index:2; min-width:132px; padding:.8rem 1rem; border:1px solid rgba(23,22,21,.15); border-radius:1rem; background:#fff; box-shadow:0 10px 22px rgba(23,22,21,.08); font-size:.85rem; font-weight:700; text-align:center; }
.agent-native-node small { display:block; margin-top:.2rem; font-size:.68rem; font-weight:500; color:#6d6762; }
.agent-native-node--top { top:8%; left:50%; transform:translateX(-50%); }
.agent-native-node--left { left:5%; top:50%; transform:translateY(-50%); }
.agent-native-node--right { right:5%; top:50%; transform:translateY(-50%); }
.agent-native-node--bottom { bottom:8%; left:50%; transform:translateX(-50%); }
.agent-native-section { padding:clamp(4rem,8vw,7rem) 0; }
.agent-native-section--dark { background:#26233a; color:#fff; }
.agent-native-heading { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2rem; align-items:end; margin-bottom:2rem; }
.agent-native-heading h2 { margin:0; max-width:650px; font-size:clamp(2.1rem,4vw,4rem); line-height:1; letter-spacing:-.055em; }
.agent-native-heading p { margin:0; max-width:560px; color:#6a635d; line-height:1.6; }
.agent-native-section--dark .agent-native-heading p { color:#d4cfee; }
.agent-native-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.agent-native-flow article { min-height:220px; padding:1.5rem; border-radius:1.5rem; background:rgba(255,255,255,.72); border:1px solid rgba(23,22,21,.12); }
.agent-native-flow article:nth-child(2) { background:#e8ddff; }
.agent-native-flow article:nth-child(3) { background:#dff0eb; }
.agent-native-flow span { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#26233a; color:#fff; font-size:.75rem; font-weight:700; }
.agent-native-flow h3 { margin:1rem 0 .55rem; font-size:1.25rem; letter-spacing:-.03em; }
.agent-native-flow p { margin:0; color:#5f5954; line-height:1.55; }
.agent-native-compat { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:2rem; }
.agent-native-compat div { padding:1rem; border-radius:1rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.agent-native-compat strong { display:block; font-size:1rem; }
.agent-native-compat span { display:inline-block; margin-top:.45rem; color:#c7bee9; font-size:.75rem; }
.agent-native-note { margin-top:1.4rem; font-size:.88rem; color:#bfb8dc; line-height:1.55; }
.agent-native-video { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.75fr); gap:2rem; align-items:center; padding:1.5rem; border-radius:1.5rem; background:#fff; border:1px solid rgba(23,22,21,.14); }
.agent-native-video-placeholder { min-height:260px; display:grid; place-items:center; text-align:center; padding:2rem; border-radius:1rem; background:linear-gradient(135deg,#e8ddff,#dff0eb); border:1px dashed rgba(38,35,58,.4); }
.agent-native-video-placeholder strong { display:block; max-width:300px; font-size:1.5rem; line-height:1.05; letter-spacing:-.04em; }
.agent-native-video-placeholder span { display:block; margin-top:.6rem; font-size:.8rem; color:#615a76; }
.agent-native-video-copy h2 { margin:0 0 .8rem; font-size:clamp(1.8rem,3vw,2.8rem); line-height:1; letter-spacing:-.05em; }
.agent-native-video-copy p { margin:0; color:#5f5954; line-height:1.6; }
.agent-native-matrix { overflow-x:auto; border:1px solid rgba(23,22,21,.14); border-radius:1.25rem; background:#fff; }
.agent-native-matrix table { width:100%; min-width:720px; border-collapse:collapse; }
.agent-native-matrix th, .agent-native-matrix td { padding:1rem 1.1rem; border-bottom:1px solid rgba(23,22,21,.1); text-align:left; vertical-align:top; }
.agent-native-matrix th { background:#f0eaf9; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#5b507a; }
.agent-native-matrix tbody tr:last-child td { border-bottom:0; }
.agent-native-matrix td:first-child { font-weight:700; white-space:nowrap; }
.agent-native-status { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700; }
.agent-native-status:before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:#b77954; }
.agent-native-status--both:before { background:#4d9b82; }
.agent-native-status--plugin:before { background:#8e72d6; }
.agent-native-status--sidecar:before { background:#d08f3c; }
.agent-native-status--adapter:before { background:#4d8fb3; }
.agent-native-status--approval:before { background:#bf6c4b; }
.agent-native-status--wizard:before { background:#7f9b4f; }
.agent-native-status--inapp:before { background:#65717d; }
.agent-native-status--neither:before { background:#9b9690; }
.agent-native-matrix small { display:block; margin-top:.3rem; color:#6d6762; font-weight:400; line-height:1.45; }
.agent-native-final { padding:4rem 0 6rem; }
.agent-native-final-panel { padding:clamp(2rem,5vw,4rem); border-radius:2rem; background:#26233a; color:#fff; text-align:center; }
.agent-native-final-panel h2 { margin:.5rem auto .8rem; max-width:800px; font-size:clamp(2.2rem,5vw,4.4rem); line-height:.98; letter-spacing:-.06em; }
.agent-native-final-panel p { max-width:650px; margin:0 auto; color:#d7d1ef; line-height:1.6; }
.agent-native-final-panel .button-row { justify-content:center; margin-top:1.5rem; }
@media (max-width:900px) { .agent-native-hero-grid, .agent-native-heading, .agent-native-video { grid-template-columns:1fr; } .agent-native-flow { grid-template-columns:1fr; } .agent-native-compat { grid-template-columns:repeat(2,1fr); } .agent-native-diagram { min-height:360px; } }
@media (max-width:560px) { .agent-native-hero { padding-top:4rem; } .agent-native-hero h1 { font-size:clamp(2.8rem,14vw,4.5rem); } .agent-native-proof { gap:.6rem; } .agent-native-proof strong { font-size:1.05rem; } .agent-native-diagram { min-height:300px; border-radius:1.3rem; } .agent-native-hub { width:130px; } .agent-native-node { min-width:104px; padding:.65rem .45rem; font-size:.74rem; } .agent-native-node--left { left:0; } .agent-native-node--right { right:0; } .agent-native-compat { grid-template-columns:1fr 1fr; } }
/* Reusable value strips on the existing homepage, pricing, and Pro Max pages. */
.agent-native-home-band, .pricing-agent-native-callout, .spm-agent-native { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #f0eaf9; }
.agent-native-home-band .agent-native-heading, .pricing-agent-native-grid, .spm-agent-native .agent-native-heading { margin-bottom: 1.8rem; }
.agent-native-home-band .agent-native-heading h2, .pricing-agent-native-grid h2, .spm-agent-native .agent-native-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.055em; }
.agent-native-home-band .agent-native-heading p, .pricing-agent-native-grid p, .spm-agent-native .agent-native-heading p { margin: 0; color: #625b70; line-height: 1.6; }
.agent-native-home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.agent-native-home-card { display: block; padding: 1.4rem; border-radius: 1.3rem; background: #fff; color: inherit; border: 1px solid rgba(23,22,21,.12); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.agent-native-home-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(38,35,58,.12); }
.agent-native-home-card span { display: block; color: #8e72d6; font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.agent-native-home-card strong { display: block; margin-top: .7rem; font-size: 1.2rem; letter-spacing: -.03em; }
.agent-native-home-card small { display: block; margin-top: .35rem; color: #6b6460; line-height: 1.4; }
.pricing-agent-native-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .6fr); align-items: center; gap: 2rem; }
.pricing-agent-native-grid p { max-width: 660px; margin-top: .8rem; }
.pricing-agent-native-actions { display: grid; gap: .8rem; justify-items: start; }
.pricing-agent-native-actions small { color: #6b6460; line-height: 1.45; }
.spm-agent-native { background: #e8ddff; }
.spm-agent-native a { color: inherit; font-weight: 700; }
@media (max-width: 760px) { .agent-native-home-cards, .pricing-agent-native-grid { grid-template-columns: 1fr; } .agent-native-home-band .agent-native-heading, .spm-agent-native .agent-native-heading { grid-template-columns: 1fr; gap: 1rem; } }

.agent-native-section--soft { background: #f0eaf9; }
.agent-native-use-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
.agent-native-use-card { display:flex; flex-direction:column; min-height:300px; padding:1.5rem; border:1px solid rgba(23,22,21,.13); border-radius:1.35rem; background:#fff; }
.agent-native-use-card:nth-child(2) { background:#e8ddff; }
.agent-native-use-card:nth-child(3) { background:#dff0eb; }
.agent-native-use-card:nth-child(4) { background:#fff3d8; }
.agent-native-use-card h3 { max-width:24ch; margin:.65rem 0 .6rem; font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.05; letter-spacing:-.045em; }
.agent-native-use-card p { margin:0; color:#5f5954; line-height:1.55; }
.agent-native-use-card code { display:block; margin-top:auto; padding:1rem; border-radius:.85rem; background:rgba(38,35,58,.07); color:#403b55; font:500 .82rem/1.5 "Geist Mono", ui-monospace, monospace; white-space:pre-wrap; }
.agent-native-steps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.8rem; }
.agent-native-steps > div { padding:1.25rem; border:1px solid rgba(23,22,21,.12); border-radius:1.2rem; background:#fff; }
.agent-native-steps span { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#26233a; color:#fff; font-weight:700; }
.agent-native-steps strong { display:block; margin-top:.8rem; font-size:1.15rem; }
.agent-native-steps p { margin:.35rem 0 0; color:#625c58; line-height:1.45; font-size:.9rem; }
@media (max-width:900px) { .agent-native-use-grid { grid-template-columns:1fr; } .agent-native-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .agent-native-steps { grid-template-columns:1fr; } .agent-native-use-card { min-height:0; } }

.agent-native-ecosystem { overflow-x:auto; border:1px solid rgba(23,22,21,.12); border-radius:1.2rem; background:#fff; }
.agent-native-ecosystem table { width:100%; min-width:920px; border-collapse:collapse; text-align:left; }
.agent-native-ecosystem th { padding:1rem 1.1rem; background:#26233a; color:#fff; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; }
.agent-native-ecosystem td { padding:1rem 1.1rem; border-top:1px solid rgba(23,22,21,.1); vertical-align:top; color:#514b48; line-height:1.4; font-size:.9rem; }
.agent-native-ecosystem td:first-child { color:#26233a; font-weight:700; white-space:nowrap; }
.agent-native-ecosystem a { color:#6a4bb5; font-weight:700; text-decoration:underline; text-underline-offset:.15em; }
.agent-native-ecosystem em { font-style:normal; color:#26233a; font-weight:650; }

/* Homepage hero: the suite line sits under the agent-native lede. */
.suite-hero-lede.suite-hero-lede--suite { margin-top: .9rem; font-size: 1rem; color: #64645f; }

/* Homepage section 2: dark Agent Native band. Real boxes only (no :has / display: contents) so .reveal fires. */
.agent-native-home-band.agent-native-home-band--dark { padding: clamp(4.5rem, 9vw, 8rem) 0; color: #fff; background: radial-gradient(1100px 620px at 82% -10%, #4a3f8f 0%, rgba(74,63,143,0) 62%), linear-gradient(120deg, #100f24 0%, #1b1937 48%, #2a2556 100%); overflow-x: clip; }
.an-home-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.an-home-kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9cdf7; }
.an-home-kicker i { width: 9px; height: 9px; border-radius: 50%; background: #ff6f61; }
.agent-native-home-band--dark h2 { margin: 1.1rem 0 0; font-size: clamp(2.7rem, 5.6vw, 5.2rem); line-height: .96; letter-spacing: -.06em; color: #fff; text-wrap: balance; }
.an-home-lede { margin: 1.4rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: #d4cfee; }
.an-home-ways { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .2rem; max-width: 36rem; }
.an-home-ways li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .4rem; padding: .95rem 0; border-top: 1px solid rgba(217,205,247,.2); color: #c9c4e6; line-height: 1.5; }
.an-home-ways li > span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #ff8f84; padding-top: .2rem; }
.an-home-ways strong { color: #fff; }
.an-home-payoff { margin: 1.3rem 0 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.agent-native-home-band--dark .button-row { margin-top: 1.7rem; }
.an-home-cta { min-height: 56px; padding: 15px 26px; font-size: 1.05rem; }
.an-home-shot { display: block; min-width: 0; border-radius: 16px; overflow: hidden; background: #f4f3ee; color: inherit; text-decoration: none; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(217,205,247,.22); transition: transform .25s ease, box-shadow .25s ease; }
.an-home-shot:hover { transform: translateY(-4px); box-shadow: 0 48px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(217,205,247,.4); }
.an-home-shot:focus-visible { outline: 3px solid #ff6f61; outline-offset: 4px; }
.an-home-shot-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; background: #ecebe6; }
.an-home-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c8e6cd; }
.an-home-shot-bar i:first-child { background: #ff6f61; }
.an-home-shot-bar i:nth-child(2) { background: #f3e28a; }
.an-home-shot img { display: block; width: 100%; height: auto; }
.an-home-shot-label { display: block; padding: .8rem 1rem; font-size: .82rem; font-weight: 600; color: #1f1d3d; background: #fff; border-top: 1px solid #e7e7e2; }
@media (max-width: 980px) { .an-home-grid { grid-template-columns: 1fr; } }

/* Homepage section 3: four equal app tiles that link to each app page. */
.home-app-tiles-section { padding: clamp(56px, 7vw, 104px) 0; border-bottom: 1px solid #e7e7e2; background: #f7f7f3; }
.home-app-tiles-head { max-width: 980px; margin: 0 auto clamp(28px, 4vw, 52px); text-align: center; }
.home-app-tiles-head h2 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.055em; }
.home-app-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.home-app-tile { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 20px; border: 1px solid rgba(23,22,21,.12); border-radius: 22px; background: #fff; color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.home-app-tile:hover { transform: translateY(-4px); border-color: rgba(23,22,21,.3); box-shadow: 0 18px 36px rgba(38,35,58,.14); }
.home-app-tile:focus-visible { outline: 3px solid #ff6f61; outline-offset: 3px; }
.home-app-tile-media { display: block; border-radius: 13px; overflow: hidden; aspect-ratio: 16 / 9; background: #1b1937; }
.home-app-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-app-tile strong { display: block; margin: 16px 8px 0; font-size: 1.3rem; letter-spacing: -.035em; }
.home-app-tile-text { display: block; margin: 6px 8px 0; color: #64645f; line-height: 1.45; font-size: .95rem; }
.home-app-tile-go { display: block; margin: auto 8px 0; padding-top: 14px; font-size: .88rem; font-weight: 650; }
.home-app-tile-go i { font-style: normal; display: inline-block; transition: transform .2s ease; }
.home-app-tile:hover .home-app-tile-go i { transform: translateX(4px); }
@media (max-width: 1099px) { .home-app-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .home-app-tiles { grid-template-columns: 1fr; } }

/* Agent Native page: product screenshots. */
.an-shot { margin: clamp(1.8rem, 3.5vw, 3rem) 0 0; }
.an-shot .shot-frame { width: 100%; }
.an-shot-label { margin-top: .8rem; font-size: .9rem; color: #6a635d; }
.agent-native-explainer .an-shot { max-width: 1100px; margin-left: auto; margin-right: auto; text-align: left; }
.an-shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 760px) { .an-shot-pair { grid-template-columns: 1fr; } }
/* Homepage h1 is longer than the old one: size it so "agent-native" and "all-in-one" never split. */
.suite-hero .suite-hero-copy h1 { max-width: 21ch; font-size: clamp(2.4rem, 4.05vw, 3.75rem); line-height: 1; }
.suite-hero .platform-kicker i { flex: none; }
@media (max-width: 520px) { .suite-hero .suite-hero-copy h1 { font-size: clamp(2.15rem, 10.4vw, 2.9rem); } }
.agent-native-steps + .an-shot { max-width: 1100px; margin-left: auto; margin-right: auto; }
.an-shot-pair { margin-top: clamp(1.8rem, 3.5vw, 3rem); }
.an-shot-pair .an-shot { margin-top: 0; }

/* Pricing: large pointer to the dedicated Pro Max page, directly above the FAQ. */
.pricing-promax-more { padding: clamp(4.5rem, 9vw, 8rem) 0; color: #fff; background: radial-gradient(1100px 620px at 12% -10%, #4a3f8f 0%, rgba(74,63,143,0) 62%), linear-gradient(120deg, #100f24 0%, #1b1937 48%, #2a2556 100%); overflow-x: clip; }
.pricing-promax-more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pricing-promax-more-kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9cdf7; }
.pricing-promax-more-kicker i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff6f61; }
.pricing-promax-more h2 { margin: 1.1rem 0 0; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.06em; color: #fff; text-wrap: balance; }
.pricing-promax-more-copy > p { margin: 1.4rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: #d4cfee; }
.pricing-promax-more-cta { margin-top: 1.9rem; min-height: 56px; padding: 15px 26px; font-size: 1.05rem; }
.pricing-promax-more-list { list-style: none; margin: 0; padding: 0; }
.pricing-promax-more-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .4rem; padding: 1.05rem 0; border-top: 1px solid rgba(217,205,247,.2); color: #c9c4e6; line-height: 1.5; }
.pricing-promax-more-list li:last-child { border-bottom: 1px solid rgba(217,205,247,.2); }
.pricing-promax-more-list li > span { padding-top: .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #ff8f84; }
.pricing-promax-more-list strong { color: #fff; }
@media (max-width: 900px) { .pricing-promax-more-grid { grid-template-columns: 1fr; } }