/* Shared page system for every page of the site.
   One hero anatomy (lime field, display headline, flat dark button, one product frame), one neutral
   (off-white) with at most one dark band (trust) and one lime band (closing CTA), one section rhythm
   (--gap between sections), one container level. Display caps: hero, home product beats, closing CTA.
   Every other head is the UI sans. */

:root { --gap: 128px; }
section { position: relative; }
.sec { padding: calc(var(--gap) / 2) 0; }
.sec.first { padding-top: var(--gap); }
.sec.last { padding-bottom: var(--gap); }
.head { max-width: 720px; margin-bottom: 48px; }
.head.center { margin-inline: auto; text-align: center; }
.head h2 { font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; }
.head p { font-size: 18px; color: var(--ink-2); max-width: 600px; }
.head.center p { margin-inline: auto; }
.btn-out { border: 1.5px solid rgba(16,49,45,.28); color: var(--jungle); }
.btn-out:hover { border-color: var(--jungle); }

/* ---------- Nav ---------- */
.nav { background: rgba(194,228,118,.97); border-bottom: 1px solid rgba(16,49,45,.08); color: var(--jungle); }

/* ---------- Hero (every page) ---------- */
.hero { padding: 56px 0 0; overflow: clip; color: var(--jungle);
  background: linear-gradient(to bottom, var(--lime) 0, var(--lime) calc(100% - 220px), var(--offwhite) calc(100% - 220px)); }
.hero-copy { text-align: center; max-width: 1200px; margin-inline: auto; }
/* Pagecycle's seal, pressed onto the product window's top-right corner like a seal on a document. */
.hero-stamp { position: absolute; z-index: 4; right: -48px; top: -80px; --size: 150px; }
@media (max-width: 1240px) { .hero-stamp { right: -14px; } }
/* Keep the board's toolbar clear of the seal. */
.stage:has(.hero-stamp) .board-top { padding-right: 112px; }
/* Between 901 and 1240 wide the seal sits further in (right: -14px), so the toolbar keeps more room. */
@media (min-width: 901px) and (max-width: 1240px) { .stage:has(.hero-stamp) .board-top { padding-right: 180px; } }
.bracket { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 22px; border-radius: 999px; border: 1.5px solid currentColor; border-top-color: transparent; border-bottom-color: transparent; font: 800 16px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.bracket img { width: 22px; height: 22px; border-radius: 6px; }
.crumbs { font-size: 13.5px; color: rgba(16,49,45,.6); margin-bottom: 18px; display: flex; gap: 8px; justify-content: center; }
.crumbs a:hover { color: var(--jungle); }
.hero h1 { font-size: clamp(54px, 9vw, 128px); margin: 22px 0 22px; text-wrap: balance; }
.hero .lede { font-size: 20px; line-height: 1.5; max-width: 660px; margin: 0 auto 30px; color: rgba(16,49,45,.86); text-wrap: balance; }
.hero .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.hero .fine { margin-top: 18px; font-size: 14px; color: rgba(16,49,45,.72); }
.hero .fine b { color: var(--jungle); font-weight: 600; }
.stage { position: relative; margin: 52px auto 0; width: min(1120px, 100% - 48px); }
.stage > .cf, .stage > .board { box-shadow: 0 0 0 1px rgba(16,49,45,.12), 0 30px 60px -30px rgba(11,33,31,.4); }

/* Plain facts row (text only, hairline dividers) */
.facts-row { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-top: 1px solid var(--line); }
.facts-row > div { padding: 22px 24px 0 0; }
.facts-row > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts-row b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.facts-row span { display: block; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.hero + .facts { padding-top: 40px; }

/* ---------- Coming soon (PageCheck until it is on the Marketplace) ---------- */
.soon { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--jungle); color: var(--lime); font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.nav-links .soon, .mnav .soon, .foot .soon { height: 18px; padding: 0 7px; font-size: 10px; margin-left: 6px; }
.foot .soon { background: rgba(194,228,118,.14); }

/* ---------- Home product beats ---------- */
.beat { padding: calc(var(--gap) / 2) 0; }
.beat:first-of-type { padding-top: var(--gap); }
.prod-top { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 44px; }
.prod-top .name { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.prod-top .name img { width: 28px; height: 28px; border-radius: 7px; }
.prod-top h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 18px 0 0; }
.prod-top .lede { font-size: 18.5px; color: var(--ink-2); margin-bottom: 22px; }
.prod-top .links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prod-top .price { font-size: 14.5px; color: var(--ink-3); }
.prod-top .price b { color: var(--ink); font-weight: 600; }
.teaser { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; margin-bottom: 28px; }
.teaser .board { box-shadow: none; border-radius: 0; }

/* HTML replicas of product UI (one container level) */
.rep { font-family: var(--ads-font); color: var(--ads-text); border: 1px solid var(--ads-border); border-radius: 12px; background: #fff; }
.rep-moves { padding: 4px 0; }
.rep-row { display: grid; grid-template-columns: 1.1fr 1.5fr 1.2fr; align-items: center; gap: 12px; padding: 11px 18px; font-size: 13.5px; }
.rep-row + .rep-row { border-top: 1px solid #F0F1F2; }
.rep-row .mv { font-weight: 600; }
.rep-row .tr { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rep-row .tr i { font-style: normal; color: var(--ads-subtlest); }
.rep-row .who { color: var(--ads-subtle); font-size: 13px; display: flex; flex-direction: column; }
.rep-row .who b { font-weight: 500; color: var(--ads-text); }
.rep-row .who em { font-style: normal; font-size: 12px; color: #6E5DC6; }
.rep-row .who.auto { color: var(--ads-subtlest); }
.rep-row.hl { background: rgba(194,228,118,.14); }
.rep-hist { padding: 18px 20px 4px; }
.rep-hist .ev { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; color: var(--ads-subtle); margin-bottom: 16px; line-height: 1.5; }
.rep-hist .ic { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #B7BBC2; margin-top: 6px; }
.rep-hist .ic.bolt { border-color: #964AC0; background: #964AC0; }
.rep-hist b { color: var(--ads-text); font-weight: 600; }
.rep-hist small { display: block; font-size: 12.5px; color: var(--ads-subtlest); margin-top: 2px; }
.rep-hist q { display: block; margin-top: 7px; padding: 8px 11px; background: #F4F5F6; border-radius: 6px; color: var(--ads-text); font-size: 13px; quotes: none; }
.rep-pages .pg { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; padding: 18px 24px; }
.rep-pages .pg + .pg { border-top: 1px solid #F0F1F2; }
.rep-pages .pg b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.rep-pages .by { grid-row: 2; font-size: 13px; color: var(--ads-subtle); display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rep-pages .chip { display: inline-flex; align-items: center; gap: 6px; }
.rep-pages .chip img { width: 16px; height: 16px; }
.rep-pages .share { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font: 600 26px/1 var(--body); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rep-pages .share small { display: block; font: 500 11.5px/1.5 var(--body); color: var(--ink-3); letter-spacing: 0; }
.rep-pages .bar { grid-column: 1 / -1; display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 12px; gap: 2px; }
.rep-pages .bar i { background: var(--ai); } .rep-pages .bar i + i { background: var(--human); }

/* ---------- Built for humans and agents ---------- */
.agents { padding: var(--gap) 0 calc(var(--gap) / 2); }
.agents-grid { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-areas: "text panel" "caps panel"; grid-template-rows: auto 1fr; gap: 0 64px; align-items: start; }
.a-text { grid-area: text; } .a-caps { grid-area: caps; } .agents-grid > .apanel { grid-area: panel; }
.agents .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 14px; }
.agents h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 20px; }
.agents .lede { font-size: 18.5px; color: var(--ink-2); margin-bottom: 26px; max-width: 520px; }

/* Agent panel: Rovo in Confluence's own UI first, then Claude Code and Codex */
.apanel { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(11,33,31,.35); }
.apanel-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--offwhite); }
.apanel-tabs button { font: 600 13.5px/1 var(--body); padding: 9px 14px; border-radius: 8px; color: var(--ink-3); }
.apanel-tabs button.on { background: #fff; color: var(--jungle); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16,49,45,.08); }
.apanel-body { min-height: 430px; }
/* Claude Code and Codex are terminals: charcoal, not the brand's jungle. */
.apanel-body.is-claude, .apanel-body.is-codex { background: #1C1D1F; }
.term { padding: 20px 24px 26px; color: #E2E2E4; font: 13.5px/1.6 ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; }
.term-client { font: 600 12.5px/1 var(--body); color: rgba(255,255,255,.45); margin-bottom: 16px; }
.rovo-panel { font-family: var(--ads-font); color: var(--ads-text); }
.rovo-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--ads-border); font-size: 14px; }
.rovo-mark { width: 22px; height: 22px; border-radius: 6px; background: conic-gradient(from 200deg, #1868DB, #6A9A23, #E2B203, #C9372C, #1868DB); }
.rovo-ctx { color: var(--ads-subtlest); font-size: 12.5px; margin-left: auto; }
.rovo-chat { padding: 18px 20px 16px; display: grid; gap: 14px; font-size: 14px; line-height: 1.5; }
.rmsg.me { justify-self: end; max-width: 82%; background: #E9F2FE; color: #123263; padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.rmsg.bot { display: grid; gap: 10px; }
.rmsg.bot p { color: var(--ads-text); }
.rcard { border: 1px solid var(--ads-border); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.rcard-k { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ads-subtlest); }
.rcard-k img { width: 16px; height: 16px; border-radius: 4px; }
.rcard-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ads-subtle); flex-wrap: wrap; }
.rcard-sub { font-size: 12.5px; color: var(--ads-subtlest); }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ads-text); }
.pc-chip img { width: 16px; height: 16px; }
/* A passage that reads as AI-written: the authorship view's purple bar, its heading and length. */
.rpass .rpass-k { width: 3px; align-self: stretch; min-height: 18px; border-radius: 2px; background: var(--ai); }
.rpass b { color: var(--ads-text); font-weight: 500; }
.rovo-where .rpage { font-weight: 500; }
.rcard-bar { display: flex; gap: 3px; height: 5px; } .rcard-bar i { border-radius: 3px; background: var(--ai); } .rcard-bar i + i { background: var(--human); }
.rovo-input { display: flex; justify-content: space-between; margin-top: 4px; padding: 10px 14px; border: 1px solid var(--ads-border); border-radius: 8px; color: var(--ads-subtlest); font-size: 13.5px; }
/* A full conversation (Pagecycle page): fixed height, the chat scrolls inside, the input stays put,
   so the page never moves while it plays. */
.rovo-panel.convo { display: flex; flex-direction: column; height: 560px; }
/* On a product page the panel runs the full height of the text and tool list beside it. That height
   is set by static content, so the page still never moves while the conversation plays. */
@media (min-width: 901px) {
  .agents-grid > .apanel.fill { align-self: stretch; display: flex; flex-direction: column; contain: size; }
  .apanel.fill .apanel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .apanel.fill .rovo-panel.convo { flex: 1; height: auto; min-height: 0; }
}
.rovo-panel.convo .rovo-chat { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; align-content: start; }
.rovo-panel.convo .rovo-chat::-webkit-scrollbar { display: none; }
.rovo-panel.convo .rovo-input { margin: 0 20px 18px; }
.rovo-panel.convo .tl, .term.convo .tl { animation: rovo-in .35s var(--swoop) both; }
.rovo-panel.convo .tl.wait, .term.convo .tl.wait { display: none; }
/* Where the chat is: a Confluence space strip above Rovo, and a page icon on every page title. */
.rovo-where { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: #F8F8F8; border-bottom: 1px solid var(--ads-border); font-size: 13px; font-weight: 600; color: var(--ads-text); }
.rovo-where span:last-child { margin-left: auto; font-weight: 400; color: var(--ads-subtlest); font-size: 12.5px; }
.rovo-space { width: 20px; height: 20px; border-radius: 5px; background: #6E5DC6; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.rpage { display: inline-flex; align-items: center; gap: 5px; color: var(--ads-text); font-weight: 500; }
.rpage svg { width: 14px; height: 14px; color: var(--ads-subtlest); }
/* Terminals that play a whole use case scroll inside the panel. */
.term.convo { overflow-y: auto; scrollbar-width: none; }
.term.convo::-webkit-scrollbar { display: none; }
.apanel.fill .term.convo { flex: 1; min-height: 0; }
/* Phones stack the panel under the text: give a playing terminal the same fixed height as the Rovo
   chat (560px) so lines appearing never push the page down. */
@media (max-width: 900px) { .term.convo { height: 560px; } }
.tl.say { margin-top: 12px; color: #F4F4F5; font-family: var(--body); font-size: 14.5px; line-height: 1.5; }
@keyframes rovo-in { from { opacity: 0; transform: translateY(6px); } }
.rtool { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ads-subtlest); }
.rtool img { width: 14px; height: 14px; border-radius: 3px; }
.rtool code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ads-subtle); }

.surfaces { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.surface { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.surface b { font-weight: 600; }
.surface span { color: var(--ink-2); }

.tl { transition: opacity .35s; }
.tl.prompt { color: #F4F4F5; margin-bottom: 14px; }
.tl.prompt .caret { color: var(--lime); margin-right: 10px; }
.tl.call { display: flex; gap: 10px; margin-top: 8px; }
.tl.call .dot { color: var(--lime); }
.tl.call b { color: var(--lime); font-weight: 600; }
.tl.out { display: flex; gap: 10px; padding-left: 22px; color: rgba(255,255,255,.6); }
.tl.out .elbow { color: rgba(255,255,255,.32); }
.tl.answer { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.14); color: #F4F4F5; font-family: var(--body); font-size: 15px; line-height: 1.55; }

.caps { display: grid; border-bottom: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.cap b { font-size: 15px; font-weight: 600; }
.cap span { font-size: 14px; color: var(--ink-2); }
.cap code { font: 12px/1.4 ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; color: var(--ink-3); }
.caps-more { padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }

/* ---------- Home: the questions people ask ---------- */
.qs { border-top: 1px solid var(--line-2); }
.q { display: grid; grid-template-columns: 1.15fr 1.2fr 200px; gap: 48px; padding: 34px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.q h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.q .asker { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 8px; letter-spacing: 0; }
.q p { font-size: 16px; color: var(--ink-2); padding-top: 26px; }
.q .apps { padding-top: 26px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; font-weight: 600; }
.q .apps a { display: inline-flex; align-items: center; gap: 8px; }
.q .apps img { width: 22px; height: 22px; border-radius: 6px; }

/* ---------- Trust (the one dark band) ---------- */
.data { background: var(--jungle); color: var(--cream); padding: var(--gap) 0; margin: calc(var(--gap) / 2) 0; }
.data .head h2 { color: var(--cream); }
.data .head p { color: var(--on-dark-2); }
.flow-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; }
.flow { border: 1px solid var(--line-dark); border-radius: var(--radius-xl); padding: 32px; }
.flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.flow-head img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-dark); }
.flow-head b { font-size: 18px; font-weight: 600; }
/* The seal overhangs the header and presses onto the site box's top-right corner. */
.flow-head .flow-stamp { margin: -34px -8px -84px auto; --size: 116px; position: relative; z-index: 2; }
.site-box { border: 1.5px solid rgba(194,228,118,.35); border-radius: 16px; padding: 18px; position: relative; }
.site-box > .lbl { position: absolute; top: -10px; left: 16px; background: var(--jungle); padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--lime); letter-spacing: .04em; }
.node { border-radius: 12px; padding: 14px 16px; background: rgba(243,241,232,.06); border: 1px solid var(--line-dark); }
.node b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.node span { font-size: 13px; color: var(--on-dark-2); line-height: 1.45; display: block; }
.node.us { background: rgba(194,228,118,.1); border-color: rgba(194,228,118,.3); }
.node.ext { background: transparent; }
.stack { display: grid; gap: 10px; }
.chain { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; }
.chain.two { grid-template-columns: 1fr 28px 1fr; }
.chain .arr { align-self: center; }
.chain .arr { height: 1.5px; background: rgba(243,241,232,.35); position: relative; }
.chain .arr::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(243,241,232,.6); border-right: 0; }
.return { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--on-dark-2); }
.return svg { flex: none; color: var(--lime); }
.flow-facts { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-dark); list-style: none; display: grid; gap: 10px; }
.flow-facts li { font-size: 14.5px; color: var(--on-dark-2); display: flex; gap: 10px; }
.flow-facts li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-top: 9px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
.faq-wrap .head { position: sticky; top: 120px; }
.qa { border-top: 1px solid var(--line-2); }
.qa:last-child { border-bottom: 1px solid var(--line-2); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; font-weight: 400; font-size: 0; }
.qa summary i::before { content: '+'; font-size: 18px; line-height: 1; }
.qa[open] summary i::before { content: '−'; }
.qa p { padding: 0 52px 24px 0; color: var(--ink-2); font-size: 16px; }

/* ---------- CTA (the one lime band) + footer ---------- */
.cta { background: var(--lime); text-align: center; padding: var(--gap) 0; overflow: hidden; }
.sec.last { padding-bottom: calc(var(--gap) * .75); }
.data + .sec { padding-top: calc(var(--gap) / 2); }
.cta h2 { font-size: clamp(56px, 8.4vw, 120px); color: var(--jungle); margin-bottom: 24px; }
.cta p { font-size: 19px; color: rgba(16,49,45,.82); max-width: 600px; margin: 0 auto 32px; }
.cta .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.foot { background: var(--jungle-dark); color: var(--on-dark-2); padding: 80px 0 40px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
.foot h6 { margin: 0 0 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot a:hover { color: var(--cream); }
.foot .about { max-width: 320px; margin-top: 18px; line-height: 1.55; }
.foot-legal { padding-top: 28px; display: flex; justify-content: space-between; gap: 32px; font-size: 13px; color: var(--on-dark-3); }

@media (max-width: 900px) {
  :root { --gap: 88px; }
  .hero { padding-top: 32px; }
  .hero-stamp { right: -8px; top: -46px; --size: 92px; }
  .flow-head .flow-stamp { margin: -30px -12px -70px auto; --size: 100px; }
  .hero .lede { font-size: 17.5px; }
  .hero .ctas .btn { width: 100%; justify-content: center; }
  .nav-inner > .btn { display: none; }
  .agents-grid { grid-template-columns: 1fr; grid-template-areas: "text" "panel" "caps"; grid-template-rows: auto; gap: 24px; }
  .cap { grid-template-columns: 1fr; gap: 2px; }
  .apanel-body { min-height: 0; }
  .board-legend { display: none; }
  .surface { grid-template-columns: 110px 1fr; }
  .menu-btn { margin-left: auto; }
  .prod-top .name { flex-wrap: wrap; }
  .rep-pages .pg { grid-template-columns: 1fr; padding: 16px 18px; }
  .rep-pages .by { flex-wrap: wrap; gap: 4px 10px; }
  .rep-pages .share { grid-row: auto; grid-column: 1; text-align: left; margin-top: 10px; font-size: 22px; display: flex; align-items: baseline; gap: 8px; }
  .rep-pages .share small { display: inline; }
  .chain .arr { height: 20px; width: 1.5px; margin: 0 auto; }
  .chain .arr::after { right: auto; left: -4.5px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid rgba(243,241,232,.6); border-bottom: 0; }
  .hero h1 br, .prod-top h2 br, .cta h2 br { display: none; }
  .stage { width: calc(100% - 32px); }
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row > div { padding: 18px 12px 0 0 !important; border-left: 0 !important; }
  .prod-top, .flow-grid, .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
  .q { grid-template-columns: 1fr; gap: 0; }
  .q p, .q .apps { padding-top: 12px; }
  .rep-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .rep-row .who { flex-direction: row; gap: 8px; flex-wrap: wrap; }
  .chain { grid-template-columns: 1fr; gap: 10px; }
  .chain .arr { height: 18px; width: 1.5px; margin-left: 24px; }
  .chain .arr::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid rgba(243,241,232,.6); border-bottom: 0; }
  .faq-wrap .head { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-legal { flex-direction: column; }
}