/* BLUEGANGES.AI — mobile edits.
   Phones only: every rule sits inside the max-width:700px query, so desktop never reads this file.
   Loads after site.css; Rishi's original styles and scripts stay unchanged.
   Before deploying, run the desktop guard (BLUEGANGES-AI-Source-v14/tools/desktop-guard). */
@media (max-width: 700px) {
  /* Header (same as OPCO.AI's mobile edit): no pause button, and the menu button is just a three-line icon
     (its "Menu" text stays in the button for screen readers, at zero size). */
  /* Solid header, so the page text no longer shows through it while scrolling underneath. */
  .masthead { background: var(--green) }
  .utility-controls .motion-control { display: none }
  .masthead .nav-toggle { justify-content: flex-end; min-width: 44px; gap: 0; font-size: 0 }
  .masthead .nav-toggle svg { display: none }
  .masthead .nav-toggle::after {
    content: ""; flex: none; width: 22px; height: 15px;
    background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
  }

  /* Section 01: centre the Target and its caption (the base phone layout pushed them right). */
  .question-panel .question-art { justify-content: center }
  /* Section 03: centre the Target the same way (the macaws land either side of it; see bg-first-scenes-v4.js). */
  .bg-hero .answer-art { justify-content: center }

  /* Section 04 network: use the full, centred column (it was 295px wide and sat 20px left of centre). */
  .bg-why .bg-network { width: 100%; max-width: none; margin-inline: auto }
  /* Place each domain by its dot, not its label, so the dots sit in level rows: one-line and two-line labels
     no longer zig-zag. The middle row lines up with the centre Target; the lines follow the dots automatically. */
  .bg-why .bg-network .bg-domain { transform: translate(-50%, -15px) }
  /* Spread the words out to the column edges, mirrored: the middle row at the edges, the rows above and below
     just inside them. Measured from the edges, so the text stays inside the margins on every phone width. */
  .bg-why .bg-network .bg-domain-0 { left: 52px; top: 14% }
  .bg-why .bg-network .bg-domain-1 { left: calc(100% - 52px); top: 14% }
  .bg-why .bg-network .bg-domain-2 { left: 40px }
  .bg-why .bg-network .bg-domain-3 { left: calc(100% - 40px) }
  .bg-why .bg-network .bg-domain-4 { left: 52px; top: 72% }
  .bg-why .bg-network .bg-domain-5 { left: calc(100% - 52px); top: 72% }
  .bg-why .bg-network .bg-domain-6 { top: 88% }

  /* Section 07 (#lineage): "The experience behind the work ↓" comes after the Full AI Stack, where it leads on to Section 08.
     The intro's heading and links join the column so the link can follow the stack; spacing kept as before
     (22px heading to first link, 43px to the stack), then 22px from the stack to the moved link. */
  #lineage .stack-layout { row-gap: 0 }
  #lineage .stack-intro { display: contents }
  #lineage .stack-figure { order: 1; margin-top: 43px }
  #lineage .stack-intro > .stack-next { order: 2; margin-top: 22px; justify-self: start }
  /* The footer's copy of that link sits right below it now, so phones show it once; the IP link keeps the footer. */
  #lineage .panel-bottom a[href="#experience"] { display: none }
  #lineage .panel-bottom > a:first-child { grid-column: 1 / -1 }

  /* Section 11 (Experience): no "Stay connected ↓" link at the end on phones; the next section follows straight on. */
  #experience .experience-next { display: none }
  /* Section 12: no "Start a conversation ↓" between the heading and the Target on phones; the Stay connected form it points
     to starts just below the Target. Desktop keeps it. */
  #closing .closing-conversation { display: none }
  /* Section 12: centre the Target (the base phone layout lined it up to the right, like Sections 01 and 03). */
  #closing .closing-target-wrap { justify-self: center }

  /* Intellectual Property page (same as OPCO.AI's mobile edit): the flock scene measures this marker and draws nothing
     when it has no height, which left its perch band above "The sequence matters" empty on phones. */
  #ip .ip-flock-destination { height: 1px }
  /* The three invention cards stack together (the base phone layout left a 110px gap before card 3). Blueganges has no
     trogons perching under card 3, so OPCO's extra room below it isn't needed. */
  #ip .ip-stage[data-ip-step="3"] { margin-top: 0 }

  /* Section 06 product cards: one coloured line above each card and none below (the base phone layout mixed both, so
     TURBINE's title sat on its line, TURBINE and DELTA got two lines between them, and VOYAGER had none). Every card gets
     the same space under its line. */
  .bg-systems .bg-product, .bg-systems .bg-product:last-child { border-top: 1px solid color-mix(in srgb, var(--product-color) 32%, transparent); border-bottom: 0 }
  .bg-systems .bg-product:first-child { padding-top: 25px !important }

  /* Section 09 Predictive worked example, base phone sizes (ported from Rishi's OPCO.AI mobile patch, opco-mobile-v50.css;
     the active-step underline uses Blueganges' pale blue instead of OPCO's lime). */
  .predictive-example-caption { font-size: 27px; line-height: 1.2 }
  .predictive-sample-label { margin-top: 15px; font-size: 11px; line-height: 1.7; letter-spacing: .045em }
  .pi-workflow { margin-top: 31px }
  .pi-zone-label { margin-bottom: 19px; font-size: 11px; line-height: 1.7; letter-spacing: .08em }
  .pi-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px }
  .pi-system { min-height: 86px; padding-top: 14px }
  .pi-system > span { font-size: 13px; line-height: 1.5; letter-spacing: .025em }
  .pi-system small { font-size: 11px; line-height: 1.6; margin-top: 8px }
  .pi-layer { margin: 44px 0 42px }
  .pi-layer::before { top: -30px }
  .pi-layer::after { bottom: -29px }
  .pi-layer .pi-zone-label { font-size: 12px; letter-spacing: .06em; margin-bottom: 15px }
  .pi-layer-target { width: 112px }
  .pi-layer-note { margin-top: 12px; font-size: 12px; line-height: 1.7 }
  .pi-forecast-heading { display: block; padding-left: 0 }
  .pi-forecast-heading h3 { font-size: 29px; line-height: 1.13; max-width: 19ch }
  .pi-range { font-size: 23px; line-height: 1.5; margin-top: 13px }
  .pi-range > span:last-child { display: inline-block; font-size: 12px }
  .pi-confidence { font-size: 11px; line-height: 1.6; margin-top: 13px; padding: 5px 10px; letter-spacing: .04em }
  .pi-chart { width: calc(100% + 24px); margin: 22px 0 0 -12px }
  .pi-chart-ticks { font-size: clamp(14px, calc(40px - 4vw), 28px) }
  .pi-chart-legend { gap: 10px 18px; margin: 14px 0 0; font-size: 12px; line-height: 1.7 }
  .pi-chart-legend > span { gap: 8px }
  .pi-chart-legend i { width: 17px }
  .pi-example-navigation { margin-top: 27px; padding-top: 15px }
  .pi-stage-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 18px }
  .pi-stage-controls button { display: flex; align-items: center; min-width: 0; min-height: 46px; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; white-space: normal }
  .pi-stage-controls button > span { flex: none; font-size: 11px; margin: 0; letter-spacing: .025em }
  .pi-stage-controls button[aria-pressed=true] { border-bottom-color: #9eb4d599 }
  .pi-stage-controls button:focus-visible, .pi-replay:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px }
  .pi-replay { width: fit-content; min-height: 44px; margin-top: 15px; padding: 8px 0; font-size: 13px; gap: 18px }
  .pi-stage-description { min-height: 0; margin-top: 22px; font-size: 25px; line-height: 1.28 }
  .predictive-example-note { font-size: 12px; line-height: 1.85; margin-top: 18px }

  /* Section 09 Predictive worked example (same as OPCO.AI's mobile edit): desktop's left half in miniature (the three
     systems stacked, curved lines with travelling dots into the Intelligence Layer), then a short line down into the chart,
     which fits the screen. The five steps sit in one row right under the chart, so each one plays in view.
     Lines: predictive-panel.js (mobile fix 07). */
  .predictive-example-caption { max-width: none }
  #predictive-example-title { display: block; max-width: 25ch }
  .predictive-sample-label { margin-top: 10px; font-size: 8px; letter-spacing: .09em; text-align: right }
  .pi-workflow { grid-template-columns: minmax(0, 132px) minmax(40px, 1fr) auto; row-gap: 46px; margin-top: 26px }
  .pi-inputs { grid-column: 1; grid-row: 1 }
  .pi-inputs .pi-zone-label { margin-bottom: 10px; font-size: 10px }
  .pi-system-grid { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .pi-system { min-height: 0; padding-top: 8px }
  .pi-system > span { font-size: 12px }
  .pi-system small { font-size: 10.5px; margin-top: 2px }
  .pi-source-connections, .pi-forecast-connection { display: block }
  .pi-layer { grid-column: 3; grid-row: 1; align-self: center; margin: 0; z-index: 1 }
  .pi-layer::before, .pi-layer::after { content: none }
  .pi-layer .pi-zone-label { font-size: 10px; letter-spacing: .06em; margin-bottom: 10px }
  .pi-layer-target { width: 72px }
  .pi-layer-note { font-size: 10.5px; line-height: 1.5; margin-top: 8px; max-width: 13ch }
  .pi-forecast { grid-column: 1 / -1; grid-row: 2 }
  .pi-forecast-heading h3 { font-size: 24px }
  .pi-range { font-size: 20px; margin-top: 8px }
  .pi-confidence { margin-top: 10px }
  .pi-chart { width: 100%; margin: 16px 0 0 }
  .pi-chart-legend { gap: 8px 12px; margin-top: 8px; font-size: 10.5px }
  .pi-chart-legend i { width: 12px }
  .pi-example-navigation { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 16px; padding-top: 6px }
  .pi-stage-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px clamp(8px, 3.4vw, 14px); min-width: 0 }
  .pi-stage-controls button { min-height: 44px; padding: 8px 0; border-bottom-width: 1px; font-size: 0; gap: 7px; white-space: nowrap }
  .pi-stage-controls button > span { font-size: 12px }
  .pi-stage-controls button[aria-pressed=true] { font-size: 13px }
  .pi-replay { min-width: 44px; justify-content: center; margin-top: 0; font-size: 0; gap: 0 }
  .pi-replay > span { font-size: 17px }
  .pi-stage-description { min-height: 2.56em; margin-top: 12px; font-size: 22px }

  /* Section 05 Intelligence Layer diagram, base phone grid (ported from Rishi's OPCO.AI mobile patch, opco-mobile-v50.css):
     the desktop's absolute positions become a grid whose height comes from its content; the lines measure these boxes. */
  .layer-public .layer-public-figure { margin-top: 38px }
  .layer-public .layer-public-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 26px; height: auto; min-width: 0; padding: 0 0 10px; isolation: isolate }
  .layer-public .layer-public-wires { z-index: -1 }
  .layer-public .layer-public-context-bank { position: relative; grid-column: 1 / -1; grid-row: 1; left: auto; top: auto; width: 100%; max-width: none }
  .layer-public .layer-public-context-bank > .layer-public-zone-title { font-size: 28px; line-height: 1.14 }
  .layer-public .layer-public-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; row-gap: 14px; margin-top: 23px }
  .layer-public .layer-public-controls li { min-width: 0; gap: 8px; font-size: 12px; line-height: 1.6 }
  .layer-public .layer-public-controls li > span { background: var(--green); padding-right: 3px }
  .layer-public .layer-public-controls i { order: 0; width: 17px; margin: 0 0 0 auto; opacity: 1 }
  .layer-public .layer-public-records { display: table; position: relative; z-index: 1; margin-top: 21px; padding: 3px 8px 3px 0; background: var(--green); font-size: 11px; line-height: 1.7 }
  .layer-public .layer-public-center { position: relative; grid-column: 1; grid-row: 3; left: auto; top: auto; width: auto; min-width: 0; transform: none; align-self: start }
  .layer-public .layer-public-center > .layer-public-zone-title { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; max-width: 100%; padding: 0 2px; font-size: 20px; line-height: 1.16; white-space: normal }
  .layer-public .layer-public-target { width: 88px; height: 88px; margin-top: 26px }
  .layer-public .layer-public-center-note { width: auto; max-width: 100%; padding: 4px 2px; margin-top: 17px; font-size: 12px; line-height: 1.65; text-wrap: balance }
  .layer-public .layer-public-model { position: relative; grid-column: 2; grid-row: 3; top: auto; right: auto; width: 100%; padding-top: 16px; align-self: start }
  .layer-public .layer-public-model-boundary { position: relative; z-index: 1; width: fit-content; margin: 0 auto 22px; padding: 0 3px; background: var(--green); font-size: 11px; line-height: 18px; letter-spacing: .045em }
  .layer-public .layer-public-model-shape { width: min(124px, 100%); height: auto; aspect-ratio: 1; gap: 11px; padding: 10px }
  .layer-public .layer-public-model-shape > p { font-size: 26px; line-height: 1.06 }
  .layer-public .layer-public-model-shape > span:not(.layer-public-inlet) { max-width: 12ch; font-size: 11px; line-height: 1.5; letter-spacing: 0 }
  .layer-public .layer-public-wire-label { position: relative; grid-column: 1 / -1; justify-self: center; left: auto; top: auto; width: fit-content; max-width: 100%; padding: 6px 14px; transform: none; background: var(--green); font-size: 12px; line-height: 1.65; color: #c2d2e7 }
  .layer-public .layer-public-outbound-label { grid-row: 2 }
  .layer-public .layer-public-return-label { grid-row: 4 }
  .layer-public .layer-public-action { position: relative; grid-column: 1 / -1; grid-row: 5; justify-self: center; left: auto; top: auto; width: 100%; min-width: 0; padding-top: 12px; transform: none }
  .layer-public .layer-public-action-target { width: 22px; height: 22px }
  .layer-public .layer-public-action > p { display: table; margin: 17px auto 0; padding: 3px 8px; background: var(--green); font-size: 27px; line-height: 1.15 }
  .layer-public .layer-public-action > span:last-child { font-size: 12px; line-height: 1.7; margin-top: 8px }
  .layer-public .layer-public-closing { margin-top: 37px }

  /* Section 05 Intelligence Layer diagram (same as OPCO.AI's mobile edit): the desktop diagram turned upright. Your firm's
     context runs across the top and funnels down into the layer; Policy-approved action sits to its right; the models sit
     below, with the exchange running down and back up. The lines are drawn by chapters-interactions.js from these positions. */
  .layer-public .layer-public-map { grid-template-columns: minmax(0, 1fr) clamp(64px, 22vw, 88px) minmax(0, 1fr); column-gap: 14px; row-gap: 0 }
  .layer-public .layer-public-context-bank { display: flex; flex-direction: column; margin-bottom: 96px }
  .layer-public .layer-public-records { order: 1; margin-top: 6px; padding: 0 }
  .layer-public .layer-public-controls { order: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; margin-top: 26px }
  .layer-public .layer-public-controls li { flex-direction: column; justify-content: flex-end; gap: 9px; text-align: center; font-size: clamp(10px, 3vw, 12px); line-height: 1.35 }
  .layer-public .layer-public-controls li > span { padding: 0 }
  .layer-public .layer-public-controls i { width: 1px; height: 14px; margin: 0 }

  .layer-public .layer-public-center { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 22vw, 88px); grid-template-rows: 1fr 1fr; column-gap: 14px; align-self: stretch }
  .layer-public .layer-public-center > .layer-public-zone-title { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; display: block; min-height: 0; width: auto; margin: 0; padding: 0; text-align: right; font-size: clamp(16px, 5vw, 20px) }
  .layer-public .layer-public-target { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; height: auto; margin: 0 }
  .layer-public .layer-public-center-note { grid-column: 1; grid-row: 2; align-self: start; justify-self: end; width: auto; margin: 6px 0 0; padding: 0; text-align: right; font-size: 11px; line-height: 1.5 }
  .layer-public .layer-public-action { grid-column: 3; grid-row: 2; align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: 0; text-align: center }
  .layer-public .layer-public-action-target { grid-row: 2 }
  .layer-public .layer-public-action > p { grid-row: 1; align-self: end; margin: 0 0 10px; padding: 0; font-size: clamp(16px, 5vw, 20px) }
  .layer-public .layer-public-action > span:last-child { grid-row: 3; align-self: start; font-size: 10.5px; line-height: 1.5; margin-top: 8px }

  .layer-public .layer-public-wire-label { grid-row: 3; align-self: center; margin: 30px 0; padding: 0; font-size: 11px; line-height: 1.5 }
  .layer-public .layer-public-outbound-label { grid-column: 1; justify-self: end; text-align: right }
  .layer-public .layer-public-return-label { grid-column: 3; justify-self: start; text-align: left }
  .layer-public .layer-public-model { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: column-reverse; align-items: center; padding: 0 }
  .layer-public .layer-public-model-shape { width: clamp(110px, 34vw, 132px) }
  .layer-public .layer-public-model-boundary { margin: 14px auto 0 }
}

/* Opening screen on phones (Rishi, 2026-10-22: "Private Capital Intelligence." landed on top of "Enter BLUEGANGES.AI").
   The caption, invitation and patent lines were pinned to the screen's bottom edge while the Target block needs ~710px,
   so any phone screen shorter than that (every iPhone while Safari's toolbar is expanded on first load) overlapped them.
   They now follow the Target block in the page flow: on tall screens the block still fills the screen and they sit at the
   bottom as before; on short screens they stay 28px below "Enter BLUEGANGES.AI" and the opening scrolls a little.
   Same idea as OPCO.AI's phone opening. The form (contact-open) keeps its own layout. */
@media (max-width: 700px) {
  #entry:not(.contact-open) { flex-direction: column; align-items: stretch; justify-content: flex-start }
  /* 130px above and 28px below centre the block exactly where Rishi's 104px / 145px did on tall screens. */
  #entry:not(.contact-open) .entry-center { flex: 1 0 auto; min-height: 0; padding-top: 130px; padding-bottom: 28px }
  #entry:not(.contact-open) .entry-caption { position: relative; inset: auto; flex: none; align-self: flex-start; margin: 0 var(--edge) 34px }
  #entry:not(.contact-open) .entry-index { position: relative; inset: auto; flex: none; align-self: flex-end; margin: 0 var(--edge) 21px }
  #entry:not(.contact-open) .entry-patent { position: relative; inset: auto; flex: none; align-self: flex-start; margin: 0 var(--edge) 24px }
  /* Opening the form returns them to their pinned spots for the fade-out, which on short screens is on the Target: hide them at once instead. */
  #entry.contact-open .entry-caption, #entry.contact-open .entry-index { visibility: hidden }
}
/* Short phone screens (up to 780px tall): start the opening 80px down, where the overflowing layout used to put it, so more of it fits. */
@media (max-width: 700px) {
  @media (max-height: 780px) {
    #entry:not(.contact-open) .entry-center { padding-top: 80px }
  }
}

/* Menu: "Pause motion / Resume motion" sits last, small and set apart (bg-mobile-edits.js adds it at phone widths
   only, as the menu's last item, and it drives the same pause switch as desktop's pause button).
   The menu's last-item rules (flex, arrow at the far end, 8px gap, 5px under 380px) belonged to Access Terminal;
   they are restored on it by name, and the new item gets its own understated style. */
@media (max-width: 700px) {
  .masthead .nav a[data-open="terminal"] { display: flex; align-items: center; justify-content: space-between; gap: 8px }
  .masthead .nav .nav-motion {
    display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; margin-top: 10px; padding: 14px 0 4px;
    border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
    font: 400 14px/1.4 var(--sans); letter-spacing: .02em; color: var(--muted); text-align: left;
  }
  @media (max-width: 380px) {
    .masthead .nav a[data-open="terminal"] { gap: 5px }
  }
}

/* IP cards on phones: the filing lines sit under the description in the text column, and wrap rather than shrink. */
@media (max-width: 700px) {
  .ip-stage-filing { grid-column: 2; grid-row: 4; margin-top: 6px }
  .ip-stage-filing-status { font-size: 10px }
  .ip-stage-filing-number { font-size: 13px; line-height: 1.5 }
  /* The two IP macaws land on the PREDICTIVE card's top line and stand about 50px tall, which reached into the
     DOMAIN card's text (the description before, the wrapped application number now). Extra room under the DOMAIN
     card keeps them clear; the flight code re-measures that line, so the landing spot moves with it. */
  #ip-tab-2.ip-stage { padding-bottom: 58px }

  /* V16 · only phone presentation additions. Existing routes and native motion stay intact. */
  body.bg-page-open .principles-page .fp-expand-hint{top:26px;font-size:12px}
  body.bg-page-open .principles-page .fp-row:first-child>details>summary{padding-top:72px}
  .layer-questions-heading{gap:8px 18px}
  .layer-principles-link{font-size:12px;gap:12px}
  .bg-inventory-group{width:100%}
  .bg-inventory-group .bg-inventory{justify-content:flex-start}
  .bg-systems-heading .bg-domain-identity{margin-top:14px;font-size:23px;line-height:1.2}
  .bg-predictive-question{font-size:25px;line-height:1.2;margin:0 0 24px}
  .bg-predictive-question>span{display:inline}
  #predictive .pi-system-name{gap:5px}
  #predictive .pi-product-mark{width:20px;height:20px;flex-basis:20px}
  #predictive .pi-system small{padding-left:0}
  #ip .ip-brand-mark>.ip-mark-target{width:23px;height:23px}
/* Append only within bg-mobile-edits.css's existing <=700px media-query layer. */
.bg-footer-v16 .opco-footer-nav{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:25px 16px}
/* Old three-column layout made the last group span two columns and become a grid. */
.bg-footer-v16 .opco-footer-nav ul:last-child{grid-column:auto;display:block}
.bg-footer-v16 .opco-footer-nav a>.trademark-label{font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap;margin:0}
.bg-footer-v16 .opco-footer-nav a>.trademark-arrow{margin-left:6px}
.bg-trademark-ownership{max-width:100%;font-size:12px;line-height:1.85}
body.bg-page-open .bg-ip-footer-v16 .bg-trademark-ownership{grid-column:1/-1}
body.bg-page-open .bg-ip-footer-v16 .bg-trademark-ownership>p{font-size:12px;line-height:1.85}

  /* V17 · tighten the Predictive transition while keeping a dedicated quiet crane band. */
  #predictive .predictive-example{padding-bottom:0}
  #predictive .predictive-crane-bay{height:125px;margin-top:10px}
  #predictive{padding-bottom:44px}
  #lineage{padding-top:60px}

  /* V18 · native product mark sizing in the phone footer. */
/* Insert only inside the existing <=700px block in bg-mobile-edits.css. */
#site-footer .bg-footer-products-v18{gap:4px;justify-content:start}
#site-footer .bg-footer-products-v18 .bg-footer-product-link{gap:7px;min-height:44px}
#site-footer .bg-footer-products-v18 .bg-footer-product-logo{width:24px;height:24px;flex-basis:24px}
#site-footer .bg-footer-products-v18 .bg-footer-product-arrow{font-size:14px}

  /* V19 · product names lead; the longer intelligence marks retain the wider phone column. */
  .bg-footer-v19 .opco-footer-nav{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}

/* BLUEGANGES V20: insert inside the existing max-width:700px phone media query. */
#ip-mark-blueganges .ip-product-marks{max-width:280px;gap:10px}
#ip-mark-blueganges .ip-product-link{font-size:10px;gap:7px}
#ip-mark-blueganges .ip-product-logo{width:38px;height:38px}
#ip-mark-blueganges .ip-product-marks+.ip-text-link{grid-column:1;grid-row:3}
/* Keep the full external domain and arrow together on narrow phone columns. */
.bg-footer-architecture a[href="https://theintelligencelayer.org/"]{gap:4px;font-size:clamp(10px,2.85vw,11.5px);white-space:nowrap}
.bg-footer-architecture a[href="https://theintelligencelayer.org/"]>.trademark-arrow{margin-left:0;flex:none}
}