/* Mobile composition. Keep the approved desktop layout and full guide content. */
#sr-landing .sr-copy-compact { display:none; }
#sr-landing .sr-work-preview { grid-template-rows:1fr auto; column-gap:3.5rem; row-gap:0; }
#sr-landing .sr-preview-question { grid-column:1; grid-row:1; align-self:end; }
#sr-landing .sr-preview-result { grid-column:2; grid-row:1 / 3; }
#sr-landing .sr-preview-more { grid-column:1; grid-row:2; justify-self:start; align-self:start; margin-top:1.5rem; }
#sr-landing .sr-capability-details > summary { display:none; }

/* Two strokes, a 48px hit area, and the same control becomes Close. */
@container (max-width:960px) {
  #sr-landing .sr-menu-toggle { display:grid; place-items:center; width:3rem; height:3rem; min-height:3rem; flex-shrink:0; padding:0; border:0; border-radius:50%; background:transparent; }
  #sr-landing .sr-menu-toggle:hover, #sr-landing .sr-menu-toggle[aria-expanded="true"] { background:#ffffff08; }
  #sr-landing .sr-menu-icon { position:relative; display:block; width:22px; height:16px; }
  #sr-landing .sr-menu-icon > span { position:absolute; left:0; width:22px; height:1.5px; background:currentColor; border-radius:1px; transform-origin:center; transition:transform .2s ease; }
  #sr-landing .sr-menu-icon > span:first-child { top:4px; }
  #sr-landing .sr-menu-icon > span:last-child { top:11px; }
  #sr-landing .sr-menu-toggle[aria-expanded="true"] .sr-menu-icon > span:first-child { transform:translateY(3.5px) rotate(45deg); }
  #sr-landing .sr-menu-toggle[aria-expanded="true"] .sr-menu-icon > span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  #sr-landing .sr-nav.is-open { padding-block:.5rem 1.25rem; box-shadow:none; }
}

@container (max-width:760px) {
  #sr-landing .sr-header { padding-block:.625rem; }
  #sr-landing .sr-copy-wide { display:none; }
  #sr-landing .sr-copy-compact { display:inline; }
  #sr-landing .sr-hero { padding-block:3rem 4rem; }
  #sr-landing .sr-hero-copy > .sr-eyebrow,
  #sr-landing .sr-hero-art { display:none; }
  #sr-landing .sr-hero-copy h1 { margin-bottom:1.5rem; }
  #sr-landing .sr-hero-copy > .sr-lead { font-size:1rem; line-height:1.6; margin-bottom:1.25rem; }
  #sr-landing .sr-hero-foot { display:none; }

  /* One compact story per tab. The result comes before the onward link. */
  #sr-landing .sr-agent-preview .sr-section-intro { margin-bottom:1.25rem; }
  #sr-landing .sr-agent-preview .sr-section-intro > p { display:none; }
  #sr-landing .sr-preview-tabs { gap:0 1.125rem; }
  #sr-landing .sr-preview-tabs button { flex:initial; padding:.625rem 0 .75rem; font-size:.875rem; min-height:3rem; text-align:left; }
  #sr-landing .sr-work-preview { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:1rem; padding-block:1.25rem 0; min-height:0; align-items:start; }
  #sr-landing .sr-preview-question, #sr-landing .sr-preview-result, #sr-landing .sr-preview-more { grid-column:1; grid-row:auto; }
  #sr-landing .sr-preview-question > .sr-mono, #sr-landing .sr-preview-question > p { display:none; }
  #sr-landing .sr-preview-question h3 { margin:0; font-size:clamp(1.375rem,4.8cqw,1.75rem); line-height:1.25; letter-spacing:-.025em; }
  #sr-landing .sr-preview-question h3 br { display:none; }
  #sr-landing .sr-preview-result { padding:1rem 1.125rem; }
  #sr-landing .sr-preview-result > figcaption { font-family:var(--sr-font); font-size:.75rem; line-height:1.4; letter-spacing:0; text-transform:none; }
  #sr-landing .sr-quote-options { margin-block:1rem; gap:.625rem; }
  #sr-landing .sr-quote-options > div { grid-template-columns:1rem minmax(1rem,.6fr) minmax(0,1fr); gap:.75rem; }
  #sr-landing .sr-quote-options span { font-size:1rem; }
  #sr-landing .sr-quote-options small { font-size:.8125rem; line-height:1.4; }
  #sr-landing .sr-result-conclusion { padding-top:.875rem; gap:.625rem; }
  #sr-landing .sr-result-conclusion strong { font-size:.9375rem; line-height:1.4; }
  #sr-landing .sr-result-conclusion div > span { font-size:.8125rem; line-height:1.4; margin-top:.25rem; }
  #sr-landing .sr-result-mark { font-size:1.125rem; }
  #sr-landing .sr-preview-more { margin-top:0; }
  #sr-landing .sr-impact-preview { grid-template-columns:3.5rem minmax(0,1fr); margin-block:1rem; }
  #sr-landing .sr-revision-node { padding:.625rem .375rem; font-size:.75rem; }
  #sr-landing .sr-revision-node strong { font-size:1.75rem; }
  #sr-landing .sr-impact-branches { gap:.625rem; }
  #sr-landing .sr-impact-branches > span { padding-left:.625rem; margin-left:1rem; font-size:.8125rem; }
  #sr-landing .sr-impact-branches > span:before { width:1rem; left:calc(-1rem - 1px); }
  #sr-landing .sr-impact-branches strong { font-size:1.0625rem; }
  #sr-landing .sr-shipment-preview { margin-block:.875rem; }
  #sr-landing .sr-shipment-numbers { gap:1rem; }
  #sr-landing .sr-shipment-numbers span { font-size:.8125rem; line-height:1.4; }
  #sr-landing .sr-shipment-numbers strong { font-size:2rem; }
  #sr-landing .sr-shipment-bar { margin-top:.75rem; height:4px; }
  #sr-landing .sr-shipment-preview > p { margin-top:.5rem; }

  /* Give the supporting illustrations room, without an extra screen of captions. */
  #sr-landing .sr-visual-split { gap:1.5rem; }
  #sr-landing .sr-knowledge-sketch, #sr-landing .sr-review-sketch { padding-block:.5rem; }
  #sr-landing .sr-knowledge-sketch svg { margin-top:.75rem; }
  #sr-landing .sr-knowledge-sketch figcaption { font-size:1.375rem; }
  #sr-landing .sr-knowledge-sketch figcaption > span { display:none; }
  #sr-landing .sr-review-sketch figcaption { font-size:.875rem; }
  #sr-landing .sr-first-steps { margin-top:1.5rem; }
  #sr-landing .sr-contact-grid { gap:1.5rem; }
  #sr-landing .sr-contact-invitation { padding-top:0; }

  /* Overviews: bring the interactive example closer to its introduction. */
  #sr-landing :is(.sr-starter-hero,.sr-enterprise-hero,.sr-topic-hero) { padding-block:2rem; }
  #sr-landing :is(.sr-starter-lead,.sr-enterprise-lead,.sr-topic-lead) { margin-top:1.25rem; font-size:1.0625rem; line-height:1.6; }
  #sr-landing :is(.sr-starter-hero-foot,.sr-enterprise-hero-foot,.sr-topic-hero-foot) { margin-top:1.5rem; padding-top:.875rem; gap:.5rem; flex-direction:column; align-items:flex-start; }
  #sr-landing :is(.sr-topic-hero-foot,.sr-enterprise-hero-foot) > p { display:none; }
  #sr-landing :is(.sr-topic-section-lead,.sr-enterprise-section-lead,.sr-starter-section-lead) { font-size:1rem; line-height:1.6; margin-top:1rem; }
  #sr-landing :is(.sr-kit,.sr-agent-workbench,.sr-architecture-model,.sr-enterprise-system) { margin-top:1.5rem; }

  /* On phones, each full-width choice reveals its explanation in place. */
  #sr-landing .sr-kit > figcaption { display:none; }
  #sr-landing .sr-kit-stage { padding:0; }
  #sr-landing .sr-kit-art { width:100%; max-width:25rem; margin-inline:auto; }
  #sr-landing .sr-kit-explorer { margin-top:.75rem; }
  #sr-landing .sr-kit-controls { display:block; border-top:1px solid #394345; border-bottom:0; }
  #sr-landing .sr-kit-controls button { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; min-height:3.5rem; font-size:1rem; line-height:1.4; text-align:left; padding:1rem 0; margin:0; border-bottom:1px solid #394345; }
  #sr-landing .sr-kit-controls button[aria-expanded="true"] { border-bottom-color:transparent; color:#eac0a2; }
  #sr-landing .sr-kit-controls button:hover { border-bottom-color:#394345; }
  #sr-landing .sr-kit-controls button[aria-expanded="true"]:hover { border-bottom-color:transparent; }
  #sr-landing .sr-kit-caret { display:block; flex:0 0 .5rem; width:.5rem; height:.5rem; margin-right:.25rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
  #sr-landing .sr-kit-controls button[aria-expanded="true"] .sr-kit-caret { transform:translateY(2px) rotate(225deg); }
  #sr-landing .sr-kit[data-kit-layout="accordion"] .sr-kit-detail { display:none; }
  #sr-landing .sr-kit[data-kit-layout="accordion"] .sr-kit-panel { padding:0 0 1.25rem; border-bottom:1px solid #394345; text-align:left; }
  #sr-landing .sr-kit[data-kit-layout="accordion"] .sr-kit-panel p { margin:0; max-width:none; }
  #sr-landing .sr-kit[data-kit-layout="accordion"] .sr-kit-panel .sr-link { margin-top:.5rem; }
  #sr-landing .sr-kit-detail { min-height:0; padding:1.25rem 0 1.5rem; }
  #sr-landing .sr-kit-panel p { font-size:.9375rem; }
  #sr-landing .sr-pilot-questions { margin-top:1.5rem; }
  #sr-landing .sr-pilot-questions li { padding-block:1rem; }
  #sr-landing .sr-pilot-inclusions > div { grid-template-columns:1fr; gap:.375rem; padding-block:1rem; }
  #sr-landing .sr-starter-offer-decision { flex-direction:column; align-items:flex-start; gap:1.5rem; padding-top:1.5rem; }
  #sr-landing .sr-starter-offer .sr-primary { width:100%; justify-content:space-between; }

  /* Agents: the answer is visible first; extra facts remain one tap away. */
  #sr-landing .sr-capability-tabs, #sr-landing .sr-enterprise-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.25rem; }
  #sr-landing .sr-capability-tabs button, #sr-landing .sr-enterprise-tabs button { min-height:3rem; padding:.625rem 0; font-size:.875rem; }
  #sr-landing .sr-capability-canvas { margin:1rem 0 0; padding:0; border:0; background:transparent; }
  #sr-landing .sr-capability-request > .sr-mono, #sr-landing .sr-capability-record-tags { display:none; }
  #sr-landing .sr-capability-request h3 { font-size:1.375rem; margin:0; min-height:0; }
  #sr-landing .sr-capability-document { margin-top:1rem; padding:1rem 1.125rem 0; }
  #sr-landing .sr-capability-document-head > span:last-child { display:none; }
  #sr-landing .sr-capability-document h4 { font-size:1.5rem; margin-top:.75rem; }
  #sr-landing .sr-capability-answer-copy { font-size:.9375rem; line-height:1.6; margin-top:.625rem; }
  #sr-landing .sr-capability-details { border-top:1px solid var(--sr-line); margin-top:1rem; }
  #sr-landing .sr-capability-details > summary, #sr-landing .sr-capability-sources > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; min-height:3rem; padding:.625rem 0; font-size:.875rem; cursor:pointer; }
  #sr-landing .sr-capability-details > summary::-webkit-details-marker { display:none; }
  #sr-landing .sr-capability-details > summary > span { font-size:1.25rem; }
  #sr-landing .sr-capability-details[open] > summary > span { transform:rotate(45deg); }
  #sr-landing .sr-capability-facts { margin:0 0 .75rem; }
  #sr-landing .sr-capability-facts > div { grid-template-columns:1fr; gap:.25rem; padding-block:.625rem; }
  #sr-landing .sr-capability-review { margin-top:0; padding-block:.875rem; font-size:.8125rem; }
  #sr-landing .sr-capability-foot { padding-block:1rem 1.5rem; gap:.5rem; }

  /* Architecture: show an external leg only when the visitor chooses hybrid. */
  #sr-landing .sr-foundation-modes { gap:1.5rem; }
  #sr-landing .sr-foundation-modes button { padding:.625rem 0; font-size:.875rem; }
  #sr-landing .sr-foundation-diagram { grid-template-columns:1fr; margin-block:1.25rem; }
  #sr-landing .sr-foundation-internal { padding:1rem 1.125rem; }
  #sr-landing .sr-foundation-flow { min-height:4.5rem; }
  #sr-landing .sr-foundation-flow > span, #sr-landing .sr-foundation-flow > strong { font-size:1rem; }
  #sr-landing [data-foundation-mode="local"] .sr-foundation-external { display:none; }
  #sr-landing .sr-foundation-external { padding:1rem 0 0 1rem; border-left:1px dashed #48514b; margin-left:1.125rem; }
  #sr-landing .sr-foundation-external > .sr-mono { padding-left:0; }
  #sr-landing .sr-foundation-external .sr-foundation-flow { min-height:3rem; }
  #sr-landing .sr-foundation-external .sr-foundation-flow > span br { display:none; }
  #sr-landing .sr-foundation-explanation h3 { font-size:1.5rem; margin-top:.625rem; }
  #sr-landing .sr-foundation-explanation > p { font-size:1rem; margin-top:.75rem; }
  #sr-landing .sr-foundation-explanation { padding-bottom:1.25rem; }
  #sr-landing .sr-foundation-foot { padding-block:.875rem 1.5rem; gap:.5rem; }
  #sr-landing .sr-enterprise-example { padding-block:1.25rem; }
  #sr-landing .sr-enterprise-example h3 { font-size:1.5rem; margin-top:.75rem; }
  #sr-landing .sr-enterprise-example > p:not(.sr-mono) { font-size:1rem; margin-top:.75rem; }
  #sr-landing .sr-enterprise-example .sr-link { margin-top:1rem; }

  /* Shared reading and navigation, with full-size text and generous tap targets. */
  #sr-landing .sr-breadcrumb { flex-wrap:wrap; row-gap:.25rem; margin-bottom:1.5rem; }
  #sr-landing .sr-topic-reading { margin-top:1.5rem; }
  #sr-landing .sr-topic-reading > a { padding-block:1.25rem; }
  #sr-landing .sr-faq { margin-top:1.5rem; }
  #sr-landing .sr-faq details { padding-block:1rem; }
  #sr-landing .sr-site-footer { grid-template-columns:1fr; gap:1.25rem; }
  #sr-landing .sr-site-footer > div > p { margin-top:.625rem; }
  #sr-landing .sr-site-footer nav { width:100%; justify-self:stretch; gap:.25rem 1rem; }
  #sr-landing .sr-footer-bottom { gap:1rem; }
  #sr-landing .sr-footer-bottom > p { max-width:16rem; }
}

@container (max-width:380px) {
  #sr-landing .sr-preview-tabs { gap:.625rem; justify-content:space-between; }
  #sr-landing .sr-preview-tabs button { font-size:.8125rem; }
  #sr-landing .sr-preview-result { padding:1rem; }
  #sr-landing .sr-source-labels { font-size:.8125rem; gap:.5rem; }
  #sr-landing .sr-starter-hero-foot > p > span { margin-inline:.75rem; }
}