/* Marketing composition only. Existing marketing.css owns type, palette,
   wrap, links and principles; shared guest nav/footer remain untouched.
   The approved Settings setup controller is reused without changing its flow. */
.integration-marketing h1,.integration-marketing h2,.integration-marketing h3{text-wrap:balance}
.integration-marketing main p{text-wrap:pretty}
.integration-intro{padding-top:164px;padding-bottom:56px}
.integration-intro>.eyebrow{margin-bottom:20px}
.integration-intro-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:64px;align-items:end}
.integration-intro h1{font-size:clamp(48px,5.4vw,76px);margin:0;max-width:760px}
.integration-intro .lead{font-size:20px;line-height:1.5;margin:0 0 4px;max-width:360px}
.assistant-surface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;padding:48px;border-radius:24px;background:var(--mk-soft);align-items:start}
.integration-section-copy{display:flex;flex-direction:column;gap:20px}
.integration-section-copy h2{font-size:clamp(32px,3.3vw,44px)}
.integration-section-copy>p:not(.eyebrow){color:var(--mk-muted);max-width:340px}
.integration-section-copy .integration-note{margin-top:12px}
.integration-note{color:var(--mk-muted);font-size:14px;line-height:1.5}
.directory-title{font:400 17px/1.5 STHeroInter,Inter,sans-serif;letter-spacing:0;margin-bottom:16px}
.st_connection_directory{overflow:hidden;background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:16px}
.st_connection_directory_row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;min-height:88px;padding:20px 24px;border:0;background:transparent;text-align:left}
.st_connection_directory_row+.st_connection_directory_row{border-top:1px solid var(--mk-line)}
.st_connection_directory_row img{width:40px;height:40px;object-fit:contain;border-radius:12px}
.st_connection_directory_row:hover{background:var(--mk-soft)}
.st_connection_directory_row:focus-visible{position:relative;outline-offset:-3px;border-radius:12px}
.assistant-name{font-size:20px}
.assistant-action{font-size:16px;color:var(--mk-blue);text-decoration:underline;text-underline-offset:4px}
.directory-note{margin-top:16px;max-width:520px}
.integration-devices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;padding-block:96px}
.device-directory{border-top:1px solid var(--mk-line)}
.device-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:24px;padding-block:28px;border-bottom:1px solid var(--mk-line)}
.device-row>img{width:48px;height:48px;object-fit:contain;border-radius:12px}
.device-row>div{display:flex;flex-direction:column;gap:8px;align-items:start}
.device-row h3{font-size:26px}
.device-row p{color:var(--mk-muted);font-size:16px}
.device-row .text-link{margin-top:4px}
.device-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.integration-arrow,.st_integration_external_icon{width:18px;height:18px;flex:none;fill:none}
.integration-control{background:var(--mk-soft);padding-block:72px}
.integration-control .section-heading{align-items:center;margin-bottom:32px}
.integration-control h2{font-size:clamp(32px,3.4vw,44px)}
.integration-control .principles{gap:40px}
.integration-control .principle{padding-top:24px}
.integration-control .principle h3{font-size:24px;margin-bottom:12px}
.integration-control .principle p{font-size:16px}
.integration-advanced{margin-top:40px}
.integration-advanced summary{min-height:44px;cursor:pointer;width:fit-content;color:var(--mk-ink);text-underline-offset:4px}
.integration-advanced[open] summary{margin-bottom:12px}
.integration-advanced>div{max-width:560px;display:flex;flex-direction:column;align-items:start;gap:8px;color:var(--mk-muted);font-size:16px}
/* Same setup states as Settings, composed with the marketing token system.
   No duplicated provider instructions or separate success/connection logic. */
#assistant-setup{scroll-margin-top:20px;min-width:0}
.guided-assistants .settings_link_ul{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:transparent;color:var(--mk-blue);font-size:16px;text-decoration:underline;text-underline-offset:4px;text-align:left}
.guided-back{margin-bottom:12px}
.guided-card{background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:24px}
.guided-provider{display:flex;align-items:center;gap:16px}
.guided-provider img{width:40px;height:40px;object-fit:contain;border-radius:12px}
.guided-provider h3{font-size:24px}
.guided-progress{font-size:14px;color:var(--mk-muted);margin-top:4px}
.guided-step{display:flex;flex-direction:column;gap:16px}
.guided-title{font:600 28px/1.15 STDisplay,Inter,sans-serif;letter-spacing:-.035em;margin:0;text-wrap:balance}
.guided-title:focus{outline:none}
.guided-step p{color:var(--mk-muted);font-size:16px;line-height:1.6;margin:0}
.guided-notice,.guided-code{padding:20px;border-radius:12px;background:var(--mk-soft)}
.guided-step .guided-notice{font-size:14px}
.guided-code{display:flex;flex-direction:column;gap:8px;min-width:0}
.guided-code-label{color:var(--mk-muted);font-size:14px}
.guided-code-value{overflow-wrap:anywhere;user-select:text;font-size:16px}
.guided-status{font-size:14px;color:var(--mk-muted)}
.guided-status:empty{display:none}
.guided-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.guided-assistants .st_wc_button_primary{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:48px;border:0;border-radius:999px;padding:12px 24px;background:var(--mk-ink);color:var(--mk-paper);font-size:16px;text-wrap:balance}
.guided-assistants .st_wc_button_primary:hover{opacity:.9}
.guided-help{border-top:1px solid var(--mk-line);padding-top:12px;font-size:14px;color:var(--mk-muted)}
.guided-help summary{cursor:pointer;min-height:44px;display:list-item;width:fit-content;color:var(--mk-ink)}
.guided-help p{margin-block:12px 0}
.guided-help .guided-code{margin-top:12px}
.guided-footer-note{font-size:14px;line-height:1.5;color:var(--mk-muted);margin-top:16px}
@media(max-width:1000px){
  .integration-intro-layout{grid-template-columns:1.7fr 1fr;gap:32px}
  .integration-intro .lead{font-size:18px}
  .assistant-surface{gap:32px;padding:32px}
  .integration-devices{gap:40px}
  .st_connection_directory_row{padding-inline:20px}
}
@media(max-width:767px){
  .integration-intro{padding-top:132px;padding-bottom:36px}
  .integration-intro-layout{grid-template-columns:1fr;gap:24px}
  .integration-intro h1{font-size:clamp(40px,10.8vw,56px);max-width:540px}
  .integration-intro .lead{font-size:18px;max-width:440px;margin:0}
  .assistant-surface{grid-template-columns:1fr;gap:28px;padding:28px 24px}
  .integration-section-copy{gap:16px}
  .integration-section-copy h2{font-size:34px}
  .integration-section-copy h2 br{display:none}
  .integration-section-copy>p:not(.eyebrow){max-width:440px;font-size:16px}
  .integration-section-copy .integration-note{margin-top:0;font-size:14px}
  .integration-section-copy .integration-note br{display:none}
  .directory-title{font-size:16px;margin-bottom:12px}
  .st_connection_directory_row{grid-template-columns:32px minmax(0,1fr) auto;gap:12px;min-height:76px;padding:18px 16px}
  .st_connection_directory_row img{width:32px;height:32px}
  .assistant-name{font-size:18px}
  .assistant-action{font-size:14px}
  .integration-devices{grid-template-columns:1fr;gap:32px;padding-block:56px}
  .device-row{gap:16px;padding-block:24px}
  .device-row h3{font-size:24px}
  .device-title{align-items:start;flex-direction:column;gap:4px}
  .integration-control{padding-block:48px}
  .integration-control .section-heading{display:flex;align-items:start;flex-direction:column;gap:16px;margin-bottom:24px}
  .integration-control .principles{grid-template-columns:1fr;gap:24px}
  .integration-control .principle{padding-top:20px}
  .integration-control .principle h3{font-size:24px}
  .integration-advanced{margin-top:24px}
  #assistant-setup{scroll-margin-top:0}
  .guided-card{padding:20px;gap:20px}
  .guided-title{font-size:26px}
  .guided-notice,.guided-code{padding:16px}
  .guided-assistants .st_wc_button_primary{padding-inline:16px}
}
.assistant-pending:hover{background:var(--mk-paper)}
.assistant-pending-note{display:block;font-size:13px;margin-top:4px}
.assistant-info{display:inline-flex;align-items:center;gap:6px;min-height:44px}
@media(max-width:767px){.assistant-pending .assistant-info{font-size:14px}.assistant-pending .integration-arrow{width:14px;height:14px}}

/* Keep nested setup panels readable on narrow phones. */
@media(max-width:479px){.assistant-surface{padding:24px 12px}.guided-card{padding:16px}.guided-notice,.guided-code{padding:12px}}