/* m-index.css — phone/tablet parity with the desktop design (index.html).
   Loaded after styles.css/pages.css/m-shared.css. Desktop (1440) must stay unchanged:
   every rule below sits inside a max-width query, the 1240-1300 laptop band, or the 1301-1439 easing block
   (the identity from 1332px up). The [data-fit] containers are scaled by the
   fit helper in js/main.js; the rules scoped to them restore the desktop layout inside the scaled box
   (identical to the desktop values, so they neutralise the tablet/phone rules of styles.css). */

/* ═══════════ laptop band (1240-1300) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. The 1440 layout was drawn on a 1240px column; here the column is W = 1192-1240,
   so fixed widths become fractions of 1240 (every rule is the identity at W = 1240). The two mockups are shrunk by the fit
   helper, which zooms a [data-fit] element to its parent's content width: extra padding narrows that width, nothing moves. */
@media (min-width:1240px) and (max-width:1300px){
  /* ── about: text (520) and globe (440) keep their size; the 80px insets and 120px gap shrink by the same ratio ── */
  .about-inner{width:calc(42.857% + 548.57px)}                                  /* W - (W - 960) * 160/280 */

  /* ── pillars: the list keeps 456px (same line breaks); the modules panel is zoomed to the rest, (W - 486) / 754.
     The chart card overhangs 12px instead of 28px to stay on screen (24px gutter); the modules column narrows by the
     same 16px so the card keeps its 16px clearance from them ── */
  .pillars-body{padding-left:486px;min-height:643px}                            /* list + gap; 1440 height, no jump on click */
  .pillars-list{flex:none;margin-left:-486px}
  .pillars-panel{align-self:stretch;height:auto}                                /* the zoomed panel still spans the list's 643px, as at 1440 */
  .pillars-panel .panel-head{width:303px}
  .pillars-panel .panel-card{right:-12px}

  /* ── trust: heading (522) and sub (423) keep their size; the 69.5px insets and 156px gap shrink by the same ratio;
     the stat row stays 28.5px inside, gaps 28/1044 ── */
  .trust-inner{width:calc(52.881% + 445.27px)}                                  /* W - (W - 945) * 139/295 */
  .stats{width:calc(100% - 57px);gap:2.682%}
  .stat-card{padding-right:16px}                                                /* left-aligned text: only the box changes */
  .stat-desc{max-width:152.3px}                                                 /* the 1440 text width, same line breaks */

  /* ── verifiable: 60px insets and the 559px checks column as fractions of 1240; heading and paragraph keep 505px;
     the confidence mockup is zoomed to the rest (16px from the paragraph), (0.8903W - 505) / 599 ── */
  .verifiable{padding-right:calc(min(1240px, 100% - 48px) * .10968 + 505px)}   /* all children are absolute */
  .verif-head,.verif-para{left:4.839%}                                          /* 60 / 1240 */
  .verif-checks{right:4.839%;width:45.081%}                                     /* 559 / 1240 */
  .vcheck p{width:auto;flex:1}
  .verif-panel{right:4.839%;top:max(45.477%, calc(100% - 456px))}               /* 367 / 807 (percent insets ignore the zoom); moves down
                                                                                    only while the zoomed panel would show its third reason card */

  /* ── sectors: the staggered brick stays 2 per row (styles.css:474 wraps it): 529px cards, 30px gap, 152px offset ── */
  .sector-row{flex-wrap:nowrap}
  .flip{width:calc(43.871% - 15px)}                                             /* (87.742% - 30px) / 2 */
  .sector-row-offset{padding-left:12.258%}
  .sector-row-offset .flip{width:calc(50% - 15px)}
}
/* just above the band (1301-1331, and 1301-1305 with a classic scrollbar) the gutter is still too narrow for the full
   28px chart-card overhang and the column can still be a px or two under 1240: ease the overhang back to 28px instead of
   jumping, and keep the sector brick from wrapping (styles.css:474). Both are the identity from 1332px up. */
@media (min-width:1301px) and (max-width:1439px){
  .pillars-panel .panel-card{right:calc(-1 * clamp(12px, (100vw - 1276px) / 2, 28px))}
  .pillars-panel .panel-head{width:calc(291px + clamp(12px, (100vw - 1276px) / 2, 28px))}
  .sector-row{flex-wrap:nowrap}
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){

  /* ── hero: circuit traces re-expressed as fractions of the 1232px desktop card ── */
  .hero .hero-circuit-l{width:42.906%;height:auto;aspect-ratio:528.6/570.7}          /* 528.6 / 1232 */
  .hero .hero-circuit-r-wrap{left:59.873%;top:0;margin-top:.406%;width:45.292%;height:auto;aspect-ratio:558/570} /* (58.33%+19) / 1232, top 5px */
  .hero .hero-circuit-r{width:102.15%;height:auto;aspect-ratio:570/558.4;flex-shrink:0}
  .hero .hero-circuit-l,.hero .hero-circuit-r-wrap{animation-name:driftY-s}           /* 14px float on a 570px trace */

  /* ── hero: soft glows keep their desktop size and anchor (220px, 120/140/420px on the 1232 card).
     Offsets are margins so they scale with the card width: top-left glow from the top,
     the two cluster glows from the card bottom, where the cluster sits. ── */
  .hero .glow{width:17.857%;height:auto;aspect-ratio:1;filter:blur(.8vw)}
  .hero .glow-1{left:9.74%;top:0;margin-top:9.74%}
  .hero .glow-2{right:11.36%;top:auto;bottom:0;margin-bottom:20.6%}                  /* 894-420-220 = 254 */
  .hero .glow-3{left:34.09%;bottom:0;margin-bottom:6.49%}

  /* ── hero: cards-around-orb cluster keeps the desktop composition (data-fit="1169") ── */
  .hero-cluster[data-fit]{display:block;position:relative;height:448px;max-width:none}
  .hero-cluster[data-fit] .conn{display:block}
  .hero-cluster[data-fit] .mini-card{position:absolute}
  .hero-cluster[data-fit] .card-dd,.hero-cluster[data-fit] .card-risk{width:272px}
  .hero-cluster[data-fit] .card-consent{width:262px}
  .hero-cluster[data-fit] .card-rights{width:230px}
  .hero-cluster[data-fit] .hero-orb{position:absolute;left:518px;top:203px;margin:0}
  .hero-cluster[data-fit] .mini-chip{font-size:16px;padding:8px 16px;display: flex;overflow: auto;justify-content: center;}
  .hero-cluster[data-fit] .card-consent .mini-chip{padding-left:14px;padding-right:14px}
  body.loaded .hero-cluster[data-fit] .float-a{animation:bob 5s ease-in-out 2s infinite}
  body.loaded .hero-cluster[data-fit] .float-b{animation:bob 5.5s ease-in-out 2.4s infinite}
  body.loaded .hero-cluster[data-fit] .float-c{animation:bob 6s ease-in-out 2.8s infinite}
  body.loaded .hero-cluster[data-fit] .float-d{animation:bob 5.2s ease-in-out 3.2s infinite}

  /* ── about: text first and left-aligned (as on desktop), no empty band, globe scaled whole (data-fit="440"; its inline 440px width + aspect-ratio keep it square) ── */
  .about-inner{flex-direction:column;text-align:left}
  .about-text{flex:0 0 auto;width:100%;align-items:flex-start;text-align:left}

  /* ── pillars: modules panel + overhanging chart card keep the desktop composition (data-fit="754") ── */
  .pillars-panel[data-fit]{height:643px}
  .pillars-panel[data-fit] .panel-head{position:absolute;left:40px;top:40px;width:319px;padding:0}
  .pillars-panel[data-fit] .panel-card{position:absolute;right:-28px;bottom:-36px;width:407px;height:428.7px;max-width:none;margin:0;padding:20px}
  .pillars-panel[data-fit] .pc-title{font-size:27.8px;line-height:37.1px}
  .pillars-panel[data-fit] .pc-num{font-size:32.9px}
  .pillars-panel[data-fit] :is(.pc-line,.pc-ylabels,.pc-xlabels){font-size:16.2px;line-height:23.2px}
  .pillars-panel[data-fit] .bar{width:26.7px}

  /* ── pillars: room on the right for the chart card's 28px overhang, so it stays on screen on tablets ── */
  .pillars-body{padding-right:28px}
  .pillars-list{width:calc(100% + 28px);margin-right:-28px}

  /* ── compliance path: the 70px scales icon must not be squeezed into the tile's 60px content box ── */
  .tile-comp{flex-shrink:0}

  /* ── verifiable: confidence mockup keeps the desktop composition (data-fit="599") ── */
  .verif-panel[data-fit]{position:relative;inset:auto;height:667px}
  .verif-panel[data-fit] .vp-card{position:absolute;left:44px;top:38.7px;width:511px;margin:0;padding:20.4px;gap:16.4px}
  .verif-panel[data-fit] .vp-rl{width:371px;flex:none;padding-right:0}
  .verif-panel[data-fit] .vp-name{font-size:21.4px}
  .verif-panel[data-fit] .vp-pct{font-size:26.8px}
  .verif-panel[data-fit] .vp-rt b{font-size:24.5px;line-height:38.8px}
  .verif-panel[data-fit] .vp-rl p{font-size:18.4px;line-height:28.6px}
  .verif-panel[data-fit] .vp-delta{font-size:26.8px}
}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){

  /* ── hero: the cluster sits close to the card's bottom edge, as on desktop (39px on the 894px card) ── */
  .hero{padding-bottom:24px}

  /* ── about: same 16px content inset as the trust and verifiable cards below it ── */
  .about-inner{width:100%}

  /* ── pillars: room on the right for the chart card's 28px overhang (scaled), list stays full width ── */
  .pillars-body{padding-right:14px}
  .pillars-list{width:calc(100% + 14px);margin-right:-14px}

  /* ── trust: the thin separators between the stat cards, turned horizontal for the stacked column ── */
  .stats{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:16px}
  .stat-sep{display:block;width:148px;height:1px}
  .stat-card{flex:none;width:100%}

  /* ── compliance path: icon beside text, alternating left/right, joined by the serpentine line.
     Each stage draws its piece of the line (3px pale mint, as the desktop SVG) with ::before:
     icon-left stages are open on the left, icon-right stages open on the right, neighbours overlap by
     one stroke. Stage 01's line dips into its icon; stage 05's right edge curves over to end on stage 06's icon. ── */
  .timeline,.tl-group{gap:0}
  .stage{position:relative;inset:auto!important;flex-direction:row;align-items:center;gap:12px;padding:28px 16px}
  .stage-icon-right{flex-direction:row;padding:28px 16px}          /* icons sit inside the line's lane, as on desktop */
  .stage-text{flex:1;min-width:0}
  .stage-tile{width:80px;height:80px;zoom:.8;flex-shrink:0}              /* the desktop 80px tile, drawn at 64px */
  .stage-tile img,.tile-comp{transform:none}
  .stage::before,.stage::after{content:"";position:absolute;border:3px solid #DAF6ED;pointer-events:none}
  .stage::after{display:none}
  .stage::before{top:0;bottom:0}
  .stage-icon-left::before{left:24px;right:0;border-left:0;border-radius:0 24px 24px 0}
  .stage-icon-right::before{left:0;right:24px;border-right:0;border-radius:24px 0 0 24px}
  .tl-group .stage+.stage,.tl-group+.tl-group .tl-path+.stage{margin-top:-3px}   /* (each group's first child is its hidden SVG) */
  /* stage 01: the line comes down into the top of the icon (tile centre x=16+32, tile top = 50% - 32px) */
  .tl-g1 .stage-icon-left::before{left:56px}
  .tl-g1 .stage-icon-left::after{display:block;top:0;left:46.5px;width:18px;height:calc(50% - 32px);border-right:0;border-bottom:0;border-top-left-radius:12px}
  /* stage 05: no bottom edge; its right edge hooks left at the bottom … */
  .tl-g3 .stage-icon-left::before{bottom:12px;border-bottom:0;border-radius:0 24px 0 0}
  .tl-g3 .stage-icon-left::after{display:block;right:0;bottom:0;width:37.5px;height:18px;border-left:0;border-top:0;border-bottom-right-radius:12px}
  /* … and stage 06 turns it down onto the top of its icon (tile centre x = right - 16 - 32), one smooth S-bend */
  .tl-g3 .stage-icon-right::before{left:auto;right:35.5px;bottom:auto;width:14px;height:calc(50% - 32px);border-right:0;border-bottom:0;border-radius:12px 0 0 0}

  /* ── verifiable: the dark panel bleeds off the card's bottom edge like desktop (227 of 667px cropped) ── */
  .verifiable{padding-bottom:0}
  .verif-panel[data-fit]{margin-bottom:-227px}

  /* ── sectors: the staggered 2-per-row brick, scaled to the column (529x141 cards, 30px gap, 152px offset on 1240) ── */
  .sectors .section-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}
  .sectors .section-head .btn{min-width:120px}
  .sector-rows{gap:12px}
  .sector-row{flex-wrap:nowrap;gap:9px}
  .sector-row-offset{padding-left:12.26%}
  .flip{flex:0 0 42.66%;width:auto;height:56px}
  .sector-row-offset .flip{flex-basis:calc(50% - 4.5px)}
  .flip-front,.flip-back{padding:8px 9px;border-radius:6px;gap:4px}
  .flip-front span{font-size:clamp(13px,3.6vw,14px);line-height:1.25;width:auto;flex:1}   /* 'Pharmaceutical' clears its icon at 360 */
  .flip-front img{width:80px;height:80px;zoom:.4}                        /* all six icons in the same 80px box, as on desktop */
  .fb-text{width:auto;flex:1}
  .fb-text b{font-size:13px}
  .fb-text p{display:none}
  .fb-arrow{width:28px;height:28px;flex-shrink:0}
  .fb-arrow img{width:14px;height:14px}
}