/* m-shared.css — phone/tablet parity with the desktop design (announce bar, nav, footer, rounded-card chrome, decorative backgrounds on every page).
   Loaded after styles.css/pages.css. Desktop (>=1301px) must stay unchanged: every rule below sits inside a max-width query
   or the 1240-1300 laptop band. */

/* iOS/WebKit inflates the text inside a block far wider than the screen ("text autosizing"), which cancels the
   scale on every [data-fit] composition and pushes the text out of its cards. iOS 13+ autosizing ignores the
   -webkit-text-size-adjust:100% on html (styles.css:34) and honours only none. Desktop browsers ignore this. */
[data-fit],[data-fit] *{-webkit-text-size-adjust:none;text-size-adjust:none}

/* ═══════════ laptop band (1240-1300) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. styles.css:466 (<=1439) trims the chrome; this band keeps the 1440 chrome
   instead, with only the side margins narrower (the content column is min(1240px, 100% - 48px) here). */
@media (min-width:1240px) and (max-width:1300px){
  /* nav: 1440 height; logo and CTA sit on the content column's edges, as at 1440 */
  .topnav{padding:18px 24px}
  .hero{margin-top:36px}                  /* home hero: 1440 gap under the nav (28px at <=1439) */
  /* footer: the CTA keeps its 1440 share of the white panel (1167 / 1294), so the panel's shoulders stay visible
     instead of closing to 12px at 1240; panel padding and copyright bar follow the same 1294px panel */
  .cta{width:calc((100% - 48px) * .9019)}
  .cta-circuit-r-wrap{left:calc(100% - 508.3px)}  /* 1167 - 658.7: the trace keeps its 1440 distance from the CTA's right corner */
  .footer-panel{padding:132px calc((100% - 48px) * .0773) 40px}            /* 100 / 1294 */
  .footer-bottom{width:calc((100% - 48px) * .9892);padding:57px 0 41px}   /* 1280 / 1294 */
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){
  /* rounded cards keep the desktop corner PROPORTION (80px on a 1240px card = 6.45% of the card width).
     --cw is the card's own width, written in viewport units per breakpoint so the radius stays circular. */
  .hero,.page-hero,.about,.trust,.verifiable,.gradbox,.how{--cw:calc(100vw - 48px);border-radius:calc(var(--cw) * .0645)}
  .cta{--cw:calc(100vw - 32px);border-radius:calc(var(--cw) * .0343)}                       /* 40 / 1167 */
  .footer-panel{--cw:calc(100vw - 32px);border-radius:0 0 calc(var(--cw) * .0309) calc(var(--cw) * .0309)} /* 40 / 1294 */

  /* rounded-tile background: same number of tiles across a card as desktop (200px tile on a 1240px card) */
  /* --cw (set on the card above) is the card's real width, so 24px-gutter and 12/8px-gutter cards both get 6.2 tiles */
  .ripple-layer{--tile-s:calc(var(--cw, calc(100vw - 48px)) * .1613);background-size:var(--tile-s) var(--tile-s);animation-name:tiledrift-s}
  .ripple-layer.hero-ripple{min-height:110%}   /* hero cards grow taller once text reflows: keep the tiles edge to edge */

  /* inner-page hero circuits: desktop px boxes re-expressed as fractions of the 1240px card,
     so both traces keep framing the top-left and top-right corners at every width */
  .page-hero .hero-circuit-l{width:42.79%;height:auto;aspect-ratio:530.6/570.7}
  .page-hero .hero-circuit-r-wrap{left:59.78%;top:0;margin-top:.403%;width:45.16%;height:auto;aspect-ratio:560/570}
  .page-hero .hero-circuit-r{width:101.79%;height:auto;aspect-ratio:570/560.4;flex-shrink:0}
  /* why-vaultdef / the-act lift the circuits with inline top:-283px / -278px (desktop coordinates) */
  .ww-hero .hero-circuit-l{top:0 !important;margin-top:-22.82%}
  .ww-hero .hero-circuit-r-wrap{top:0 !important;margin-top:-22.42%}
  /* their float is 14px on a 570px trace: keep it proportional */
  .page-hero .hero-circuit-l,.page-hero .hero-circuit-r-wrap{animation-name:driftY-s}

  /* headings keep the desktop tracking (-0.02em) instead of a fixed px value made for 48px type */
  .cta-content h2{letter-spacing:-.02em}
}
@keyframes tiledrift-s{from{background-position:0 0}to{background-position:var(--tile-s) var(--tile-s)}}
@keyframes driftY-s{from{transform:translateY(0)}to{transform:translateY(-2.45%)}}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){
  .hero,.about,.trust,.verifiable,.ind-hero{--cw:calc(100vw - 24px)}
  /* the tile outline keeps a visible ~1px line once the 200px tile is drawn at 60-120px (1.5px would thin to .45px) */
  .ripple-layer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect x='10' y='10' width='180' height='180' rx='44' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2.2'/%3E%3C/svg%3E")}

  /* industries hero sits on the same 12px gutter as the .container column below it */
  .ind-hero{width:calc(100% - 24px)}
  .page-hero{margin-top:16px}

  /* footer: CTA narrower than the white panel, navy frame around the panel (drawn from the panel,
     since .footer-navy's fixed top cannot follow the phone CTA height) */
  .cta{--cw:calc(100vw - 56px);width:calc(100% - 56px)}
  /* navy starts 34px above the CTA's bottom edge, as on desktop; the panel's own top stays above that line (white on white) */
  .footer-panel{width:calc(100% - 32px);margin-top:-38px;padding-top:72px;box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(4px -100vmax -100vmax)}
  .footer-wrap.no-cta .footer-panel{clip-path:inset(64px -100vmax -100vmax)}
  .footer-bottom{width:calc(100% - 32px);margin:0 auto;background:none;justify-content:space-between;text-align:left;padding:28px 4px}

  /* 40px tap targets without moving anything (padding cancelled by an equal negative margin) */
  .announce-cta,.fb-links a,.fp-link{padding:8px 0;margin:-8px 0}
  /* email / phone links are one 19px line: give each its own 37px row (no overlapping hit areas) */
  .fp-contact a{display:block;padding:9px 0}
  .fp-contact br{display:none}
  .nav-burger{min-width:40px;min-height:40px;justify-content:center;align-items:center}
}

/* ═══════════ small phone (<=480) ═══════════ */
@media (max-width:480px){
  .hero,.about,.trust,.verifiable,.ind-hero{--cw:calc(100vw - 16px)}
  .ind-hero{width:calc(100% - 16px)}
  .ripple-layer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect x='10' y='10' width='180' height='180' rx='44' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2.8'/%3E%3C/svg%3E")}

  /* nav CTA: the phone size from styles.css:616 lost to the later .btn / .btn-sec rules */
  .btn.nav-cta{height:40px;padding:8px 14px;font-size:14px;min-width:0;width:auto}

  /* copyright left, Privacy / Terms right, as on desktop */
  .footer-bottom{flex-direction:row}
}

/* ═══════════ narrow phone (<390) ═══════════ */
@media (max-width:389px){
  /* keep Privacy / Terms reading as one pair on the right, apart from the copyright */
  .fb-links{gap:16px}
}