/* ---------------------------------------------------------------------------
   Mobile corrections for the content sections.

   Several sections lay out in fixed multi-column grids that were never given a
   stacking rule, so below ~720px the second and third columns run off the right
   edge and are clipped by the section's overflow. Each rule here targets one
   specific grid by its authored template, rather than collapsing every grid on
   the page — label/value pairs like `1fr auto` are meant to stay side by side.
   --------------------------------------------------------------------------- */
@media (max-width: 719px){

  /* The problem — the capture / attribution / decision comparison. Three
     columns at 390px meant only the first was readable. */
  [data-screen-label="The problem"] [style*="grid-template-columns:1fr 1.3fr 1fr"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 28px;
  }

  /* -------------------------------------------------------------------------
     The platform — rebuilt for mobile as two plain stacked modules.

     On desktop this is two panels inside a rounded frame, divided by a vertical
     rule, with a "loop" badge straddling the frame's bottom border. Stacked,
     the divider becomes a stray vertical line beside a block and the badge
     straddles nothing, so both are dropped below 720px and only the content
     stacks. Each module still states its own timing in its "01 · AFTER IT
     POSTS" line, and the section sub carries the loop the badge was closing.
     ------------------------------------------------------------------------- */

  /* the loop badge pinned to the bottom edge of the frame */
  [data-screen-label="The platform"] [style*="bottom:0"][style*="translate(-50%,50%)"]{
    display: none !important;
  }

  /* -------------------------------------------------------------------------
     "Where it sits" — redrawn as a vertical flow.

     The diagram is authored left-to-right: systems on the left, right-aligned
     and tied by a vertical rule to a rail that runs rightward into the Orbit
     box, then out to the outputs on the right. Stacked, every one of those
     cues points the wrong way — the systems are right-aligned against nothing,
     their rule hangs in space, and both rails run left-to-right with an
     arrowhead aimed off the side of a column that now flows downward.

     So on mobile everything left-aligns on one edge, the sideways rails and
     arrowheads go, and each stage caption gets a short vertical tick above it.
     Same five stages, same words, read top to bottom.
     ------------------------------------------------------------------------- */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 14px;
    justify-items: stretch;
  }

  /* systems stop hugging the right edge */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] > *:first-child,
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] > *:first-child > div{
    justify-items: start !important;
    text-align: left !important;
  }
  /* the rules that tethered each list to a sideways rail */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] [style*="border-right:1px solid"]{
    border-right: 0 !important;
    padding-right: 0 !important;
  }
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] [style*="border-left:1px solid"]{
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* the two horizontal rails and their right-pointing arrowheads */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] [style*="width:100%;height:1px"]{
    display: none !important;
  }

  /* the 12px tick beside each row, which reached toward the sideways rail.
     With the rail gone it is a dash pointing at nothing, and on the outputs
     side it also pushes every label 24px off the shared left edge. */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] [style*="width:12px;height:1px"]{
    display: none !important;
  }

  /* the outputs caption was inset to clear the row dashes that are now gone */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] > *:last-child > span:first-child{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* a short vertical tick above each stage caption, so the eye is handed
     downward the way the rails used to hand it rightward */
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] > *:nth-child(2)::before,
  [data-screen-label="The platform"] [style*="grid-template-columns:auto minmax(110px,1fr) 232px"] > *:nth-child(4)::before{
    content: "";
    width: 1px;
    height: 18px;
    background: var(--ice-rule);
    justify-self: center;
    margin-bottom: 4px;
  }

  /* The two module columns stack, and lose the rule that divided them.
     Matched on the exact authored style, not a substring: "1fr 1fr" is also a
     prefix of the "1fr 1fr 1fr" assurance row further down this section, and a
     substring match would sweep it up too. */
  [data-screen-label="The platform"] [style="display:grid;grid-template-columns:1fr 1fr"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 34px;
  }

  /* the assurance row under the "where it sits" diagram */
  [data-screen-label="The platform"] [style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:24px"]{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label="The platform"] [style*="align-content:start"]{
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Dropping that vertical rule leaves the two modules with nothing between
     them but a gap, and stacked they read as one continuous column — module
     02's icon looks like it belongs to module 01's factor list. So the divider
     is redrawn horizontally. Keyed to module 02's padding-left, the only thing
     in this section carrying that value. */
  [data-screen-label="The platform"] [style*="align-content:start"][style*="padding-left:40px"]{
    border-top: 1px solid var(--ice-grid);
    padding-top: 32px !important;
  }

  /* The closing independence line. Its 72px desktop margin is a void on a
     390px screen, where the frame above it has already ended in whitespace. */
  [data-screen-label="The platform"] [style*="margin:72px auto 0"]{
    margin-top: 40px !important;
    padding-top: 26px !important;
  }

  /* the frame stops being a diagram container and becomes a plain surface */
  [data-screen-label="The platform"] [style*="border-radius:24px"]{
    border-radius: 10px;
    padding: 22px 18px !important;
  }

  /* the disclosure header stacks its label and its toggle instead of forcing a
     40px gap between them on a 350px line */
  [data-screen-label="The platform"] summary{
    gap: 12px !important;
    flex-wrap: wrap;
  }

  /* In the systems diagram, this caption hangs below its parent with top:100%.
     Being out of flow, it reserves no space, so on a narrow column it lands on
     top of the text beneath it. In flow it simply follows. */
  [data-screen-label="The platform"] [style*="top:100%"][style*="translateX(-50%)"]{
    position: static !important;
    transform: none !important;
    margin-top: 12px;
    justify-items: center;
    text-align: center;
  }

  /* The questions — the problem/solution comparison, the most visible break:
     the right column was cut off mid-word. */
  [data-screen-label="The questions"] [style*="grid-template-columns:minmax(300px,380px)"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 20px;
  }
  /* and the tabbed tables inside it */
  [data-screen-label="The questions"] [style*="grid-template-columns:1.7fr"],
  [data-screen-label="The questions"] [style*="grid-template-columns:12px 1fr 1.6fr"],
  [data-screen-label="The questions"] [style*="grid-template-columns:1fr 1.4fr auto"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 6px;
  }

  /* How to start — the step rows keep their number beside the text, which reads
     well; only the trailing meta column has nowhere to go, so it wraps under. */
  [data-screen-label="How to start"] [style*="grid-template-columns:56px 1fr 200px"]{
    grid-template-columns: 56px minmax(0, 1fr) !important;
    row-gap: 10px;
  }
  [data-screen-label="How to start"] [style*="grid-template-columns:56px 1fr 200px"] > *:nth-child(n+3){
    grid-column: 1 / -1;
  }
  [data-screen-label="How to start"] [style*="grid-template-columns:minmax(160px,1.4fr)"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px;
  }

  /* Grid and flex children default to min-width:auto and so refuse to shrink
     below their longest unbreakable line, which is what pushes a stacked column
     back off the edge again. */
  [data-screen-label="The problem"] *,
  [data-screen-label="The platform"] *,
  [data-screen-label="The questions"] *,
  [data-screen-label="How to start"] *{
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   FX page — the engagement model becomes a swipe deck.

   Three narrative panels sit side by side at 5fr 3fr 5fr. At 390px that is
   roughly 130px per panel, which breaks the prose to one or two words a line
   and pushes the third panel off the screen entirely. Stacking would work but
   costs enormous height for what is a left-to-right sequence.

   So on mobile it becomes a horizontal snap carousel: each panel is 84% of the
   screen, so the next one always peeks in from the right. That peek is the
   affordance — it needs no instruction text, and it keeps the panels in their
   authored order without inventing any UI.
   --------------------------------------------------------------------------- */
@media (max-width: 719px){
  [data-screen-label*="Engagement model"] [style*="grid-template-columns:5fr 3fr 5fr"]{
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    /* bleed past the section's 20px gutters so panels run to the screen edge */
    margin-inline: -20px !important;
    padding: 0 20px 16px;
    scrollbar-width: none;
  }
  [data-screen-label*="Engagement model"] [style*="grid-template-columns:5fr 3fr 5fr"]::-webkit-scrollbar{
    display: none;
  }
  [data-screen-label*="Engagement model"] [style*="grid-template-columns:5fr 3fr 5fr"] > *{
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   FX page — the dashboard mockup.

   It is meant to read as a dense analyst screen, and that density is part of
   the point, so this keeps the look rather than flattening it. What it does fix
   is the two things that stop it being readable at 390px: five KPI cards across
   a 350px row (about 70px each, with every sub-label truncated to an ellipsis),
   and label text at 7px, which is below what anyone can read on a phone.

   KPIs go to two columns, triage to one, and the smallest sizes come up to
   9.5px — still tight and screen-like, but legible.
   --------------------------------------------------------------------------- */
@media (max-width: 719px){
  .fxdash-scope .dkpis{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important }
  .fxdash-scope .triage{ grid-template-columns: minmax(0,1fr) !important; gap: 10px !important }

  /* the sub-label had nowrap + ellipsis, so in a 70px card it was always cut */
  .fxdash-scope .dkpi-sub{
    font-size: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .fxdash-scope .dkpi-label,
  .fxdash-scope .tcard-label{ font-size: 10px !important; white-space: normal !important }
  .fxdash-scope .dash-period,
  .fxdash-scope .chrome-lock,
  .fxdash-scope .tcard-detail,
  .fxdash-scope .tcard-note,
  .fxdash-scope .chart-sub,
  .fxdash-scope .rh-sec,
  .fxdash-scope .dprov,
  .fxdash-scope .dsec,
  .fxdash-scope .leg,
  .fxdash-scope .dinsight-tag,
  .fxdash-scope .dinsight-act{ font-size: 10px !important }

  /* section headers put a caption on the far right of an 8px line; let it wrap
     under rather than butting against the label */
  .fxdash-scope .dsec{ flex-wrap: wrap; gap: 2px 10px }

  /* chart tick labels sit inside the SVG, where wrapping is not an option, so
     they only get a size floor */
  .fxdash-scope .chart-axis{ font-size: 9px !important }
  .fxdash-scope .fcast-label{ font-size: 9px !important }
}

/* ---------------------------------------------------------------------------
   Cross-page mobile corrections.
   --------------------------------------------------------------------------- */
@media (max-width: 719px){

  /* Advisors: a four-column card at 350px gives each person about 85px, which
     breaks their role and background to two or three characters a line. */
  [data-screen-label="Advisors"] [style*="grid-template-columns"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 18px;
  }

  /* Footer links were 21px tall with no padding — well under a thumb. Padding
     rather than font-size, so the footer keeps its quiet scale. */
  [data-screen-label="Footer"] a{
    padding-block: 11px;
    display: block;
  }
  /* the footer's inline social/legal rows shouldn't gain block padding twice */
  [data-screen-label="Footer"] [style*="display:flex"] a,
  [data-screen-label="Footer"] [style*="display:inline"] a{
    padding-block: 8px;
  }
  /* The social chip authors its own 40px box, which is already a comfortable
     target. The rule above is content-box, so it would stack 22px on top and
     render a 64px slab beside a 14px wordmark. */
  [data-screen-label="Footer"] a.orbit-social{
    padding-block: 0;
  }

  /* A mono line with wide tracking, held on one line, running past the edge. */
  [data-screen-label="01 Volatility"] span[style*="letter-spacing:0.16em"]{
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* The attribution map document reserved 56px of side padding, which on a
     350px card left only 238px for the content it exists to show. Trimming to
     20px gives back 72px — about a third more line length — and the document
     still reads as a page rather than as flush-edge text. */
  [data-screen-label="Case study"] [style*="padding:44px 56px"]{
    padding: 26px 20px 8px !important;
  }
  [data-screen-label="Case study"] [style*="padding:14px 56px"]{
    padding: 14px 20px !important;
  }

  /* Case study: a 63px label column beside a 198px value column broke the
     label to two or three characters a line. */
  [data-screen-label="Case study"] [style*="grid-template-columns"]{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 6px;
  }

  /* How to start: the remaining nested grids are narrower than their content. */
  [data-screen-label="How to start"] [style*="grid-template-columns"]:not([style*="56px 1fr 200px"]){
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* About: seven "LinkedIn →" links at 21px tall, no padding. */
  [data-screen-label="People"] a{
    padding-block: 11px;
    display: inline-block;
  }

  /* Type floor. The generated markup carries inline sizes down to 8px, which is
     below readable on a phone. 10px keeps the dense, technical register while
     staying legible. Scoped to inline sizes so the FX dashboard's own class
     rules, tuned separately above, are untouched. */
  [data-screen-label] [style*="font-size:7px"],
  [data-screen-label] [style*="font-size:7.5px"],
  [data-screen-label] [style*="font-size:8px"],
  [data-screen-label] [style*="font-size:8.5px"],
  [data-screen-label] [style*="font-size:9px"]{
    font-size: 10px !important;
  }
}

/* At 320px a handful of chips and meta lines are held on one line by
   white-space:nowrap and run past the edge. Nothing above 360px needs this. */
@media (max-width: 359px){
  [data-screen-label] [style*="white-space:nowrap"]{
    white-space: normal !important;
  }
  [data-screen-label="Case study"] *,
  [data-screen-label="Advisors"] *{
    min-width: 0;
    overflow-wrap: anywhere;
  }
}