/* Integration directory and detail styles, copied verbatim from the React
   entry's import graph: web/src/features/integrations/integration-detail.css,
   integration-directory.css, and integration-capabilities.css. The shared
   marketing, landing, and search-control sheets live in marketing.css; keep
   class names identical to web/src. */
.integration-detail, .integration-directory { font-size: 1rem; overflow-wrap: anywhere; }
.integration-hero { padding-block: 1.5rem 3rem; }
.integration-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--p2-muted); font-size: .875rem; }
.integration-back svg { flex-shrink: 0; }
.integration-back:hover { text-decoration: underline; text-underline-offset: .25em; }
.integration-hero-grid { display: grid; align-items: center; gap: 2rem; margin-top: 2rem; }
.integration-hero-grid > * { min-width: 0; }
.integration-detail h1 { font-size: 1rem; letter-spacing: 0; line-height: 1.4; color: var(--p2-purple); }
.integration-detail h1 span { display: block; margin-top: 1rem; font-size: clamp(2.375rem, 1.5rem + 2.4vw, 3.5625rem); line-height: 1.08; letter-spacing: -.035em; color: var(--p2-ink); font-weight: 600; }
.integration-intro { margin-top: 1.5rem; color: var(--p2-muted); font-size: 1.0625rem; line-height: 1.75; }
.integration-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.integration-hero-note { color: var(--p2-muted); font-size: .875rem; margin-top: 1rem; }
.integration-example { margin: 0; padding: 1.25rem; border-radius: 24px; }
.integration-app-identity { margin-block: 1.25rem; }
.integration-app-badge { display: inline-flex; align-items: center; gap: .875rem; color: inherit; font-size: 1rem; font-weight: 600; }
.integration-logo-fallback { display: grid; place-items: center; width: 32px; height: 30px; border-radius: 9px; background: var(--ui-surface-selected); color: var(--ui-purple); font-size: .875rem; font-weight: 700; }
.integration-example blockquote { margin: 0; padding: 1rem; border-radius: 16px; background: var(--ui-surface-glass); border: 1px solid var(--ui-edge); color: var(--ui-ink); font-size: 1rem; line-height: 1.65; }
.integration-handoff { display: flex; align-items: center; gap: .75rem; margin-block: 1.5rem 1rem; }
.integration-handoff strong { font-size: 1rem; }
.integration-handoff p { font-size: .875rem; color: var(--p2-muted); margin-top: .25rem; }
.integration-flow { display: grid; gap: .875rem; padding: 0; margin: 0; list-style: none; }
.integration-flow li { position: relative; display: flex; align-items: center; gap: .75rem; background: var(--ui-surface-raised); border: 1px solid var(--ui-edge); border-radius: 10px; padding: .75rem; font-size: .9375rem; }
.integration-flow li > span { flex-shrink: 0; color: var(--p2-purple); font-size: .875rem; font-variant-numeric: tabular-nums; }
.integration-flow li > svg { position: absolute; bottom: -1rem; left: 1rem; color: var(--ui-purple); }
.integration-result { display: flex; align-items: center; gap: .75rem; padding-top: 1.25rem; font-size: .875rem; color: var(--ui-success); }
.integration-result svg { flex-shrink: 0; }
.integration-detail .p2-section-heading { max-width: 48rem; margin-inline: auto; }
.marketing :is(.integration-detail, .integration-directory) h2 { font-size: clamp(2rem, 1.5rem + 1.5vw, 3.1875rem); letter-spacing: -.035em; }
.marketing :is(.integration-detail, .integration-directory) .p2-section-heading > p:last-child { font-size: 1rem; }
.marketing .integration-detail :is(.p2-question-trigger, .p2-faq-answer, .p2-button, .p2-closing-card > p) { font-size: 1rem; }
.integration-setup-grid { display: grid; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.integration-setup-grid li { position: relative; padding-inline-start: 3.5rem; }
.integration-step-number { position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ui-surface-selected); border: 1px solid var(--ui-edge); color: var(--ui-purple); font-size: .875rem; font-variant-numeric: tabular-nums; }
.integration-setup-grid h3 { font-size: 1.125rem; line-height: 1.4; margin: 0 0 .5rem; }
.integration-setup-grid p { font-size: 1rem; line-height: 1.65; color: var(--p2-muted); }
.integration-ideas-grid { display: grid; gap: 2rem; }
.integration-idea { padding-block-start: 1.25rem; border-top: 1px solid var(--ui-edge); color: var(--p2-ink); }
.integration-idea h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em; margin-bottom: .75rem; }
.integration-idea p { color: var(--p2-muted); font-size: 1rem; line-height: 1.65; }
@media (min-width: 48rem) {
  .integration-setup-grid, .integration-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
}
@media (min-width: 64rem) {
  .integration-hero-grid { grid-template-columns: 1.08fr 1fr; gap: 3rem; }
  .integration-example { padding: 1.5rem; }
}
.integration-directory .p2-section-heading { max-width: 48rem; margin-inline: auto; margin-top: 2rem; }
.integration-directory-count { margin-bottom: 1.5rem; color: var(--p2-muted); font-size: .875rem; font-variant-numeric: tabular-nums; scroll-margin-top: 2rem; }
.integration-directory-count:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 5px; }
.integration-directory-controls { display: grid; gap: .875rem; margin-bottom: 1rem; }
.integration-directory-category { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: .5rem; padding: 0 .75rem; border: 1px solid var(--ui-control-edge); border-radius: 12px; background: var(--ui-surface-control); color: var(--p2-muted); font-size: .875rem; }
.integration-category-select { min-width: 0; flex: 1; }
.marketing .integration-directory .integration-category-select .ui-select-trigger { min-height: 44px; padding: .5rem; border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 1rem; }
.integration-directory-grid { display: grid; gap: .75rem; }
.integration-directory-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 17px; align-items: center; gap: .75rem; min-height: 112px; padding: 1rem; border-radius: 18px; color: var(--p2-ink); }
.integration-directory-card .integration-logo-tile { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; }
.integration-directory-card .integration-logo-tile img { width: 32px; height: 32px; object-fit: contain; }
.integration-directory-card .integration-logo-tile:hover, .integration-directory-card .integration-logo-tile:hover img { transform: none; }
.integration-directory-card .integration-logo-fallback { width: 100%; height: 100%; border-radius: inherit; font-size: 1rem; }
/* Catalog marks drawn in white for dark backgrounds render in ink on the light
   page; the homepage cloud colors the same marks through its own assets. */
.integration-logo-mark-ink { filter: brightness(0); }
.integration-directory-app-category { display: block; margin-bottom: .375rem; color: var(--p2-muted); font-size: .875rem; }
.marketing .integration-directory-card h2 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.02em; }
.integration-directory-card p { display: -webkit-box; overflow: hidden; margin-top: .375rem; color: var(--p2-muted); font-size: .9375rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.integration-directory-card > svg { color: var(--p2-purple); }
.integration-directory-empty { padding: 3rem 1rem; text-align: center; color: var(--p2-muted); }
.marketing .integration-directory-empty h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.integration-directory-empty p { margin-block: .75rem 1.5rem; }
.integration-directory-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; color: var(--p2-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.integration-directory-pagination button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; border: 1px solid var(--p2-edge); border-radius: 10px; padding: .625rem .875rem; background: var(--p2-glass); color: var(--p2-ink); font: inherit; cursor: pointer; }
.integration-directory-pagination button:hover:not(:disabled) { background: var(--ui-surface-hover); }
.integration-directory-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.integration-route-loading { display: grid; min-height: 48vh; place-content: center; gap: 1rem; padding: 2rem; color: var(--ui-ink); background: var(--ui-screen-background); text-align: center; font-size: 1rem; }
.integration-route-loading a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; color: var(--ui-link); font-size: 1rem; }
@media (min-width: 42rem) {
  .integration-directory-controls { grid-template-columns: minmax(0, 1fr) minmax(15rem, .55fr); }
  .integration-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .integration-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.integration-anchor { display: block; scroll-margin-top: 2rem; }
.integration-capability-explorer { padding: 1rem; }
.integration-explorer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.integration-explorer-toolbar .integration-search { flex: 1 1 16rem; }
.marketing .integration-explorer-toggle { margin: 0; min-height: 44px; padding: .5rem 0; border: 0; background: transparent; font: inherit; font-size: .9375rem; color: var(--ui-link); cursor: pointer; }
.integration-explorer-toggle:disabled { color: var(--ui-muted); opacity: .6; cursor: not-allowed; }
.integration-explorer-summary { margin-block: 1rem 1.5rem; color: var(--ui-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.integration-capability-group { border-top: 1px solid var(--ui-edge); }
.integration-capability-group h3 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.integration-capability-group h3 button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 64px; padding: 1rem .25rem; border: 0; border-radius: 8px; background: transparent; color: var(--ui-ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; transition: color .16s ease-out; }
.integration-capability-group h3 button > span:first-child { flex: 1; min-width: 0; }
.integration-capability-count { color: var(--ui-muted); font-size: .9375rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.integration-capability-group h3 svg { flex-shrink: 0; color: var(--ui-purple); transition: rotate .28s cubic-bezier(.16, 1, .3, 1); }
.integration-capability-group h3 button[aria-expanded="true"] svg { rotate: 180deg; }
.integration-capability-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s cubic-bezier(.16, 1, .3, 1), visibility 0s .28s; }
.integration-capability-panel[data-expanded="true"] { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.integration-capability-panel-inner { min-height: 0; overflow: hidden; }
.integration-operation-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.integration-operation-list li { display: grid; align-items: start; gap: .5rem 1.5rem; padding: 1rem .25rem; border-top: 1px solid var(--ui-edge-soft); }
.integration-operation-list li > div { min-width: 0; }
.integration-operation-list strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.integration-operation-list p { max-width: 70ch; margin-top: .25rem; font-size: .9375rem; color: var(--ui-muted); }
.integration-operation-effect { color: var(--ui-muted); font-size: .875rem; line-height: 1.5; }
.integration-group-effect { margin: -.25rem .25rem .75rem; }
.integration-explorer-empty { padding: 2rem .25rem; }
.integration-explorer-empty h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.integration-explorer-empty p { max-width: 60ch; font-size: 1rem; color: var(--ui-muted); }
@media (hover: hover) {
  .integration-capability-group h3 button:hover { color: var(--ui-link); }
}
@media (min-width: 48rem) {
  .integration-capability-explorer { padding: 1.5rem 2rem; }
  .integration-operation-list li { padding-inline: .75rem; }
  .integration-operation-list li:has(> .integration-operation-effect) { grid-template-columns: minmax(0, 1fr) minmax(8rem, .24fr); }
}
@media (prefers-reduced-motion: reduce) {
  .integration-capability-group h3 button,
  .integration-capability-group h3 svg,
  .integration-capability-panel { transition: none; }
}