/* Generated SEO pages use the marketing site's existing tokens and chrome. */
.seo-page { overflow: hidden; }
.seo-shell { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.seo-breadcrumb { display: flex; align-items: center; gap: 9px; padding-top: 30px; color: var(--muted); font-size: 12px; }
.seo-breadcrumb a:hover { color: var(--ink); }
.seo-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr); align-items: center; gap: clamp(48px, 7vw, 104px); min-height: 610px; padding: 74px 0 96px; }
.seo-eyebrow, .seo-kicker { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.seo-eyebrow img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.seo-hero h1 { margin-top: 18px; max-width: 760px; font-size: clamp(43px, 5vw, 72px); line-height: 1.02; letter-spacing: -.036em; }
.seo-hero-lead { max-width: 660px; margin-top: 24px; color: var(--muted); font-size: 17px; line-height: 1.62; }
.seo-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.seo-text-link { color: var(--muted); font-weight: 500; }
.seo-text-link:hover { color: var(--ink); }
.seo-proof-note { max-width: 540px; margin-top: 18px; color: var(--muted); font-size: 12px; }

.seo-work-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); box-shadow: 0 30px 80px -45px rgba(0,0,0,.34); }
.seo-work-panel.is-dark { border-color: var(--ink); background: var(--ink); color: var(--white); box-shadow: 0 38px 90px -40px rgba(0,0,0,.55); }
.seo-work-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.seo-work-panel.is-dark .seo-work-head { border-color: rgba(255,255,255,.13); }
.seo-work-head span:last-child { color: var(--muted); font-size: 11px; font-weight: 500; }
.seo-work-panel.is-dark .seo-work-head span:last-child { color: rgba(255,255,255,.58); }
.seo-journey { padding: 7px 22px 20px; }
.seo-journey-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.seo-journey-row:last-child { border-bottom: 0; }
.seo-work-panel.is-dark .seo-journey-row { border-color: rgba(255,255,255,.13); }
.seo-step-number { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(0,0,0,.14); border-radius: 50%; color: var(--muted); font-size: 11px; font-weight: 600; }
.seo-work-panel.is-dark .seo-step-number { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.64); }
.seo-journey-row.is-active .seo-step-number { border-color: var(--mark); background: var(--mark); color: var(--white); }
.seo-journey-row h3 { font-family: var(--font-text); font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.seo-journey-row p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.seo-work-panel.is-dark .seo-journey-row p { color: rgba(255,255,255,.57); }
.seo-journey-state { padding-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.seo-work-panel.is-dark .seo-journey-state { color: rgba(255,255,255,.48); }

.seo-section { padding: 108px 0; }
.seo-section.seo-tint { background: var(--tile); }
.seo-section-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: clamp(48px, 8vw, 118px); align-items: start; }
.seo-section h2, .seo-directory-head h1 { margin-top: 14px; max-width: 770px; font-size: clamp(31px, 4vw, 52px); line-height: 1.08; letter-spacing: -.032em; }
.seo-section-intro, .seo-directory-head > p:last-child { max-width: 600px; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.62; }
.seo-capability-list { border-top: 1px solid var(--line); }
.seo-capability { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr); gap: 30px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.seo-capability h3, .seo-control-item h3 { font-family: var(--font-text); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.seo-capability p, .seo-control-item p { color: var(--muted); line-height: 1.58; }
.seo-tag { display: block; width: max-content; margin-top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(var(--mark-rgb), .09); color: var(--mark); font-size: 10.5px; font-weight: 600; }
.seo-control-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.seo-control-item { padding-top: 22px; border-top: 1px solid var(--line); }
.seo-control-item p { margin-top: 10px; }
.seo-requirements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.seo-requirement { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--white); }
.seo-requirement strong { font-size: 15px; }
.seo-requirement p { margin-top: 9px; color: var(--muted); line-height: 1.58; }

.seo-related-section { padding-top: 78px; }
.seo-related { margin-top: 42px; border-top: 1px solid var(--line); }
.seo-related a, .seo-directory-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; border-bottom: 1px solid var(--line); font-size: 17px; }
.seo-related a:hover, .seo-directory-row:hover { color: var(--mark); }
.seo-band { width: min(calc(100% - 32px), var(--container)); margin: 36px auto 0; padding: 96px 24px; border-radius: var(--radius-card); background: var(--mark); color: var(--white); text-align: center; }
.seo-band h2 { max-width: 800px; margin-inline: auto; font-size: clamp(32px, 4.3vw, 58px); line-height: 1.06; }
.seo-band p { max-width: 590px; margin: 20px auto 0; font-size: 16px; opacity: .9; }
.seo-band .btn { margin-top: 32px; }

.seo-directory-head { max-width: 790px; padding: 96px 0 56px; }
.seo-directory { padding-bottom: 110px; }
.seo-directory-row span:first-child { display: grid; gap: 5px; }
.seo-directory-row strong { font-size: 18px; font-weight: 500; }
.seo-directory-row small { max-width: 780px; color: var(--muted); font-size: 13px; font-weight: 400; }

@media (max-width: 900px) {
  .seo-hero { grid-template-columns: 1fr; min-height: 0; padding: 64px 0 80px; }
  .seo-work-panel { max-width: 610px; }
  .seo-section { padding: 78px 0; }
  .seo-section-grid { grid-template-columns: 1fr; gap: 42px; }
  .seo-control-list, .seo-requirements { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .seo-breadcrumb { padding-top: 18px; }
  .seo-hero { gap: 42px; padding: 50px 0 64px; }
  .seo-hero h1 { font-size: 39px; }
  .seo-hero-lead { font-size: 15px; }
  .seo-hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .seo-work-head { padding-inline: 18px; }
  .seo-journey { padding-inline: 18px; }
  .seo-journey-row { grid-template-columns: 26px minmax(0,1fr); }
  .seo-journey-state { display: none; }
  .seo-capability { grid-template-columns: 1fr; gap: 8px; }
  .seo-section { padding: 62px 0; }
  .seo-band { padding: 70px 18px; }
  .seo-directory-head { padding: 64px 0 40px; }
  .seo-directory-row { align-items: flex-start; padding: 19px 0; }
}

/* Integrations and Channels (owner, 2026-10-01): logo cards in one grid; a channel's logo is its icon. */
.seo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seo-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .2s ease, transform .2s ease; }
.seo-card:hover { box-shadow: 0 0 0 1px rgba(var(--mark-rgb), .4), 0 12px 30px -16px rgba(0, 0, 0, .3); transform: translateY(-2px); }
.seo-card > span:nth-child(2) { display: grid; gap: 4px; }
.seo-card strong { font-size: 17px; font-weight: 500; }
.seo-card small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.seo-card-logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.seo-card-logo img { width: 24px; height: 24px; object-fit: contain; }
.seo-card-tag { margin-top: auto; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--tile); color: var(--ink-soft); font-size: 12px; }
.seo-card-logo svg { width: 22px; height: 22px; fill: none; stroke: var(--mark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .seo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .seo-cards { grid-template-columns: minmax(0, 1fr); }
}