/* m-suite.css — laptop/tablet/phone parity with the desktop design (suite.html).
   Loaded after styles.css/pages.css. Desktop (1440) keeps the pages.css layout: the 1240-1300 band (hero) and the
   1240-1439 pillar-row zoom (the identity once the column is 1274) only re-fit it to a narrower column, and every
   other rule sits inside a max-width query.

   SCALE containers (js/main.js data-fit helper):
   - hero graphic: the orb, both chips and the Pillar card each carry data-fit="511". They share one 511x386 design box
     (desktop: orb at 165.4/0, chip 1 at 0/102, chip 2 at 253.4/26, card at 93/180), so the helper gives all four the same
     zoom (hero content width / 511). Offsets below are design px: zoom scales the px part, not the % part, so
     calc(50% + Npx) keeps the box centred and calc(100% - Npx) keeps it anchored to the bottom of the hero.
   - pillar mockups: each .su-visual carries data-fit="593" (the desktop browser-panel width). */

/* ═══════════ laptop band (1240-1300) ═══════════
   The desktop CSS applies here, but the hero card is 1192-1240px (not 1240) and the pillar column 1192-1252px (not 1274). */
@media (min-width:1240px) and (max-width:1300px){
  /* hero: the orb, chips and Pillar card move as one 511px cluster (its 1440 offsets: chip 1 at 0, card at 93, orb at 165.4,
     chip 2 at 253.4). The px the card loses come out of the gap after the heading and the right margin in their 1440 ratio
     (73 : 96), so the cluster keeps its shape instead of the pieces sliding together. Same positions as 1440 at a 1240px card. */
  .chip-pill-1{left:calc(43.27% + 96.8px)}
  .chip-card{left:calc(43.27% + 189.8px)}
  .sh-orbit{left:calc(43.27% + 262.2px)}
  .chip-pill-2{left:calc(43.27% + 350.2px)}
}
/* pillar rows: a rev row needs 609 + 68 + 593 = 1270px, so the text column squeezed, wrapped and broke the .su-mask
   connectors. Each row keeps its 1274px desktop layout and is zoomed to the column (1192 / 1274 = .936 at 1240).
   The column only reaches 1274 at a 1322px viewport (later with a classic scrollbar), so this runs to 1439 and is
   capped at 1 (the identity once the column is full width). tan(atan2()) turns the length ratio into the number zoom
   needs; the row gap moves into the zoomed rows so it scales too. */
@media (min-width:1240px) and (max-width:1439px){
  .suite-sections{container-type:inline-size;gap:0}
  .suite-row{zoom:min(1, tan(atan2(100cqw, 1274px)))}
  .suite-row+.suite-row{margin-top:115px}
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){
  /* consent-table cells: WebKit rounds the zoomed text up, clipping the longest label by ~3px */
  .mt-c{padding-left:10px;padding-right:10px}
  /* hero graphic: back on screen, centred under the heading (pages.css hides it at <=1300) */
  .suite-hero .sh-orbit{display:block}
  .suite-hero .chip-pill{display:inline-flex}
  .suite-hero .chip-card{display:flex}
  /* the helper writes width:511px inline; each piece keeps its own desktop width */
  .suite-hero .sh-orbit[data-fit]{width:328px !important}
  .suite-hero .chip-card[data-fit]{width:405px !important}
  .suite-hero .chip-pill[data-fit]{width:auto !important}
  /* room below the heading: 40px gap + the 386px box + a 64px bottom margin, all scaled with the box */
  .suite-hero{padding-bottom:calc(40px + min(511px, 100% - 96px) * .88063)}   /* 450 / 511 */
  .suite-hero .sh-orbit{left:calc(50% - 90.1px);top:calc(100% - 450px)}
  .suite-hero .chip-pill-1{left:calc(50% - 255.5px);top:calc(100% - 348px)}
  .suite-hero .chip-pill-2{left:calc(50% - 2.1px);top:calc(100% - 424px)}
  .suite-hero .chip-card{left:calc(50% - 162.5px);top:calc(100% - 270px)}

  /* every pillar reads number, title, modules, Deep dive, then its own mockup (the .rev rows put the mockup first) */
  .suite-row.rev{flex-direction:column-reverse}
}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){
  /* hero: 32px under the subline, and a 96-design-px bottom margin (55px at 390) */
  .suite-hero{padding-bottom:calc(32px + min(511px, 100% - 96px) * .94325)}   /* 482 / 511 */
  .suite-hero .sh-orbit{top:calc(100% - 482px)}
  .suite-hero .chip-pill-1{top:calc(100% - 380px)}
  .suite-hero .chip-pill-2{top:calc(100% - 456px)}
  .suite-hero .chip-card{top:calc(100% - 302px)}
  /* the Pillar card's arrow draws at 23px once scaled: keep a 40px+ tap area around it */
  .suite-hero .cc-arrow{position:relative}
  .suite-hero .cc-arrow::after{content:"";position:absolute;inset:-20px;border-radius:50%}

  /* pillar mockups: the desktop panel, scaled. Undo the phone re-layout rules (pages.css <=760) inside it. */
  .su-visual[data-fit] .browser{width:593px;padding:14px 9px}
  .su-visual[data-fit] .mini-stats{flex-wrap:nowrap}
  .su-visual[data-fit] .mtable{flex-direction:row}
  .su-visual[data-fit] .mt-col{flex-direction:column}
  .su-visual[data-fit] .mt-col>div{flex:0 1 auto}
  .su-visual[data-fit] .mt-col.chk{display:flex}
  .su-visual[data-fit] .act-txt{width:305px;flex:0 1 auto}
  .su-visual[data-fit] .cp-rows{width:355px;flex:0 1 auto}
  .su-visual[data-fit] .cp-bar{width:185px}
  .su-visual[data-fit] .class-panel .cp-body{flex-wrap:nowrap}
  .su-visual[data-fit] .inc-card{flex-wrap:nowrap;gap:normal}

  /* pillar connector: the desktop .su-mask snake (#E9EAEB hairline, rounded elbows) redrawn for the stacked rows.
     A leader leaves 18px right of each icon, bends down the right page gutter, turns along the middle of the
     row gap and drops into the next pillar's icon. Pillar 06 has no outgoing line, as on desktop.
     Geometry: 1px lines (Chrome floors 1.5px borders to 1px; an explicit 1px keeps every engine aligned).
     The number row is 56px tall, so each icon sits 10.5px below its row top and the row gap is 80px:
     the row's bottom line (bottom:-41px) and the next icon's incoming line (top:-50.5px) share one band 40px into the gap.
     The leader is border-box so it never makes the number row taller than 56px. */
  .suite-row .su-text{max-width:none !important}
  .su-num-row{align-self:stretch}
  .su-num-row::after{content:"";box-sizing:border-box;flex:1;align-self:flex-start;height:28.5px;margin:27.5px -12px 0 2px;border:solid #E9EAEB;border-width:1px 1px 0 0;border-top-right-radius:14px;pointer-events:none}
  .suite-row:last-child .su-num-row::after{display:none}
  .suite-row:not(:last-child)::after{content:"";position:absolute;left:120px;right:-12px;top:42px;bottom:-41px;border:solid #E9EAEB;border-width:0 1px 1px 0;border-bottom-right-radius:14px;pointer-events:none}
  .suite-row+.suite-row .su-icon{position:relative}
  .suite-row+.suite-row .su-icon::before{content:"";box-sizing:border-box;position:absolute;left:17px;top:-50.5px;width:80px;height:50.5px;border:solid #E9EAEB;border-width:1px 0 0 1px;border-top-left-radius:14px;pointer-events:none}
}