/* ══ THE PHONE APP ═════════════════════════════════════════════════════════
   Loaded last and scoped to phone widths, so nothing here can touch the
   desktop. One screen per section, a glass top bar and tab bar, sheets that
   slide up. Type is set for reading at arm's length: 16px body, 13px floor. */
@media (max-width:760px){

:root{
  --m-gut:16px;
  --m-card:#fffdf9;
  --m-line:rgba(36,26,16,.09);
  --m-line2:rgba(36,26,16,.14);
  --m-soft:rgba(36,26,16,.045);
  --m-r:20px;
  --m-shadow:0 1px 0 rgba(36,26,16,.04),0 10px 28px -22px rgba(36,26,16,.45);
  --m-top:calc(58px + env(safe-area-inset-top,0px));
  --m-bot:calc(70px + env(safe-area-inset-bottom,0px));
  --m-ease:cubic-bezier(.2,.8,.2,1);
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--m-top) + 10px)}
html.m-lock,html.m-lock body{overflow:hidden}
body.m-app{background:#f5efe4;padding-top:var(--m-top);padding-bottom:calc(var(--m-bot) + 8px);
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body.m-app .side,body.m-app .topbar,body.m-app .snav,body.m-app .metastrip{display:none !important}
body.m-app .main{margin:0 !important;padding:0 !important}
body.m-app .wrap{padding:0 var(--m-gut) !important;max-width:none !important}

/* ── one screen at a time ────────────────────────────────────────────── */
body.m-app .wrap > section{display:none !important;margin:0 !important;padding:18px 0 8px !important}
body.m-app .wrap > section.m-on{display:block !important}
body.m-app section.m-enter{animation:m-in .34s var(--m-ease) both}
@keyframes m-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ body.m-app section.m-enter{animation:none} }

/* the screen's title: a large title, like the platform's own apps */
body.m-app .wrap > section > .shead{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 16px !important;padding:0 !important;border:0 !important}
body.m-app .wrap > section > .shead h2{font:700 34px/1.05 var(--display) !important;letter-spacing:-.035em !important;color:var(--ink);margin:0 !important}
body.m-app .wrap > section > .shead .smeta{font-size:14px !important;color:var(--body) !important;margin:0 !important;text-align:left !important}

/* ── top bar ──────────────────────────────────────────────────────────── */
#mbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--m-top);padding:env(safe-area-inset-top,0px) var(--m-gut) 0;
  display:flex;align-items:center;gap:12px;
  background:rgba(245,239,228,.78);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
body.m-scrolled #mbar{border-bottom-color:var(--m-line2);background:rgba(250,246,238,.86)}
.mb-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.mb-who img{width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--m-line2);flex:none;object-fit:contain}
.mb-who div{display:flex;flex-direction:column;min-width:0}
.mb-who b{font:700 16px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.mb-who span{font-size:12.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-filter{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;border-radius:999px;border:0;
  background:var(--ink);color:#fff;font:600 14px/1 var(--sans,inherit);flex:none;box-shadow:0 6px 16px -10px rgba(36,26,16,.8)}
.mb-filter svg{width:17px;height:17px}
.mb-filter:active{transform:scale(.96)}
.mb-filter i{position:absolute;top:-5px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);
  color:#fff;font:700 11px/19px var(--sans,inherit);font-style:normal;text-align:center;box-shadow:0 0 0 2px #f5efe4}

/* ── tab bar ──────────────────────────────────────────────────────────── */
#mtabs{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:60;height:62px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 4px;border-radius:22px;
  background:rgba(255,253,249,.82);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px var(--m-line),0 14px 34px -14px rgba(36,26,16,.45)}
#mtabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border:0;background:none;
  color:rgba(36,26,16,.5);font:600 11px/1 var(--sans,inherit);letter-spacing:-.005em;border-radius:16px;transition:color .2s,background .2s}
#mtabs button svg{width:23px;height:23px;transition:transform .25s var(--m-ease)}
#mtabs button.on{color:var(--ink);background:rgba(36,26,16,.06)}
#mtabs button.on svg{transform:translateY(-1px) scale(1.06)}
#mtabs button:active svg{transform:scale(.9)}

/* ── the next screen, at the end of every screen ─────────────────────── */
.m-next{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;width:100%;margin:26px 0 6px;
  padding:16px 18px;border:0;border-radius:var(--m-r);background:var(--ink);color:#fff;text-align:left;box-shadow:0 18px 34px -22px rgba(36,26,16,.9)}
.m-next:active{transform:scale(.985)}
.mn-k{grid-column:1;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.02em}
.mn-t{grid-column:1;display:flex;align-items:center;gap:9px;margin-top:4px}
.mn-t svg{width:20px;height:20px;opacity:.85}
.mn-t b{font:700 21px/1.1 var(--display);letter-spacing:-.02em}
.mn-a{grid-column:2;grid-row:1/3;width:26px;height:26px}

/* ── sheets: Filters and More ─────────────────────────────────────────── */
#msheet{position:fixed;inset:0;z-index:80}
#msheet .ms-back{position:absolute;inset:0;background:rgba(24,16,8,.38);opacity:0;transition:opacity .26s}
#msheet.open .ms-back{opacity:1}
#msheet .ms-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
  background:#fbf8f2;border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -20px rgba(24,16,8,.45);
  transform:translateY(100%);transition:transform .32s var(--m-ease);padding-bottom:env(safe-area-inset-bottom,0px)}
#msheet.open .ms-panel{transform:none}
.ms-grab{width:40px;height:5px;border-radius:3px;background:rgba(36,26,16,.18);margin:9px auto 4px;flex:none}
.ms-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 20px;overscroll-behavior:contain}
.ms-head{display:flex;align-items:center;justify-content:space-between}
.ms-title{font:700 24px/1.1 var(--display);letter-spacing:-.025em;color:var(--ink);margin:6px 0 12px}
.ms-reset{border:0;background:none;color:var(--accent);font:600 15px var(--sans,inherit);padding:8px 0}
.ms-done{position:sticky;bottom:0;width:100%;height:52px;margin-top:16px;border:0;border-radius:16px;background:var(--ink);color:#fff;
  font:650 16px var(--sans,inherit);box-shadow:0 -12px 18px 6px #fbf8f2}
.mf-g{margin:0 0 18px}
.mf-h{font-size:13px;font-weight:650;color:var(--body);margin:0 0 8px;letter-spacing:.01em}
.mf-seg{display:flex;padding:3px;border-radius:14px;background:rgba(36,26,16,.06);gap:2px}
.mf-seg .mf-o{flex:1;height:40px;border:0;border-radius:11px;background:none;font:600 14px var(--sans,inherit);color:var(--body);padding:0 6px}
.mf-seg .mf-o.on{background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(36,26,16,.06),0 4px 12px -6px rgba(36,26,16,.35)}
.mf-seg .mf-tick{display:none}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mf-grid .mf-o{display:flex;align-items:center;gap:9px;height:52px;padding:0 12px;border-radius:14px;border:0;background:#fff;
  box-shadow:inset 0 0 0 1px var(--m-line2);font:600 14.5px var(--sans,inherit);color:var(--ink);text-align:left}
.mf-grid .mf-o img,.mf-grid .mf-o .lg{width:24px !important;height:24px !important;border-radius:6px}
.mf-grid .mf-o.on{box-shadow:inset 0 0 0 2px var(--ink)}
.mf-grid .mf-tick{margin-left:auto;font-style:normal;font-weight:700}
.mf-list{display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--m-line2);overflow:hidden}
.mf-list .mf-o{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;border:0;background:none;text-align:left;
  font:500 15.5px var(--sans,inherit);color:var(--ink);border-bottom:1px solid var(--m-line)}
.mf-list .mf-o:last-child{border-bottom:0}
.mf-list .mf-o small{margin-left:auto;font-size:13px;color:var(--body);font-variant-numeric:tabular-nums}
.mf-list .mf-o.on{font-weight:650}
.mf-list .mf-tick{font-style:normal;font-weight:700;color:var(--accent);margin-left:10px}
.mf-list .mf-o.on small{margin-left:auto}
.mm-list{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.mm-row{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 14px;border:0;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--m-line2);text-align:left;color:var(--ink)}
.mm-row:active{transform:scale(.985)}
.mm-row.on{box-shadow:inset 0 0 0 2px var(--ink)}
.mm-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--m-soft);flex:none}
.mm-i svg{width:22px;height:22px}
.mm-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mm-t b{font:650 17px/1.2 var(--display);letter-spacing:-.01em}
.mm-t small{font-size:13.5px;color:var(--body)}
.mm-a{width:20px;height:20px;color:rgba(36,26,16,.35)}

/* ── the report's drill-downs become full-height sheets ───────────────── */
body.m-app #mask{background:rgba(24,16,8,.38) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  align-items:flex-end !important;padding:0 !important;z-index:90}
body.m-app #mask .modal{width:100% !important;max-width:none !important;height:calc(100% - 22px - env(safe-area-inset-top,0px)) !important;max-height:none !important;
  margin:0 !important;border-radius:26px 26px 0 0 !important;animation:m-sheet .34s var(--m-ease) both;background:#fbf8f2 !important;
  overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transition:transform .25s var(--m-ease)}
@keyframes m-sheet{from{transform:translateY(100%)}to{transform:none}}
body.m-app #mask .modal::before{content:"";display:block;position:sticky;top:0;z-index:5;width:40px;height:5px;border-radius:3px;
  background:rgba(36,26,16,.18);margin:9px auto -14px}
body.m-app #mask .modal-head{position:sticky;top:0;z-index:4;padding:20px var(--m-gut) 12px !important;background:rgba(251,248,242,.92) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--m-line) !important}
body.m-app #mask .modal-head .crumb{display:none !important}
body.m-app #mask .modal-head h3{font:700 22px/1.15 var(--display) !important;letter-spacing:-.025em !important;margin:0 !important}
/* the head never changes size on a phone: a head that shrinks moves the text
   under the reader's thumb. The title is held to two lines instead. */
body.m-app #mask .modal-head h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.m-app #mask .modal.scrolled .modal-head{padding:20px var(--m-gut) 12px !important}
body.m-app #mask .modal.scrolled .modal-head h3{font-size:22px !important;line-height:1.15 !important}
body.m-app #mask .modal.scrolled .modal-head .msub{opacity:1 !important;max-height:none !important;margin-top:4px !important}
body.m-app #mask .modal.scrolled .xbtn{width:36px !important;height:36px !important}
body.m-app #mask .modal-head .msub{font-size:13.5px !important;margin-top:4px}
body.m-app #mask .xbtn{width:36px !important;height:36px !important;border-radius:50% !important;background:rgba(36,26,16,.07) !important;font-size:20px !important;flex:none}
body.m-app #mask .modal-body{padding:14px var(--m-gut) calc(28px + env(safe-area-inset-bottom,0px)) !important}

}

/* ══ Shared card language on the phone ══════════════════════════════════ */
@media (max-width:760px){
body.m-app .bx,body.m-app .card,body.m-app .panel,body.m-app .tile,body.m-app .pfcard,body.m-app .clpanel,body.m-app .bscard{
  border-radius:var(--m-r) !important}
body.m-app .bento{display:flex !important;flex-direction:column;gap:12px !important}
body.m-app .bento > .bx{margin:0 !important}

/* ══ HOME ══════════════════════════════════════════════════════════════ */
body.m-app #overview .ov{padding:18px 16px 16px !important}
body.m-app #overview .ov-head{display:none !important}
body.m-app #overview .ov-grid{display:flex !important;flex-direction:column;gap:0 !important;border:0 !important}
body.m-app #overview .ov-cell{width:auto !important;padding:14px 2px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;min-height:0 !important}
body.m-app #overview .ov-cell:first-child{padding-top:2px !important}
body.m-app #overview .ov-labrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
body.m-app #overview .ov-lab{font:650 15px/1.2 var(--sans,inherit) !important;color:var(--ink) !important;letter-spacing:0 !important;text-transform:none !important}
body.m-app #overview .ov-go{font-size:14px !important;font-weight:600;color:var(--accent);padding:6px 0}
body.m-app #overview .ov-big{font-size:56px !important;line-height:1 !important;letter-spacing:-.045em !important;margin:2px 0 6px !important}
body.m-app #overview .ov-big small{font-size:24px !important}
body.m-app #overview .ov-sub{font-size:14.5px !important;line-height:1.45 !important;color:var(--body) !important}
body.m-app #overview .ov-facts{margin-top:10px}
body.m-app #overview .ov-facts span{font-size:14px !important}
body.m-app #overview #t-cite{display:flex !important;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
body.m-app #overview #t-cite .ov-labrow{margin:0}
body.m-app #overview #t-cite .ov-big2{font-size:30px !important;margin:0 !important}
body.m-app #overview #t-cite .ov-sub{flex:1 0 100%;margin:0 !important}

/* the run-by-run line: shorter, the latest-run card under it */
body.m-app #overview .hcard-trend{margin:16px 0 4px !important;padding:0 !important}
body.m-app #overview .tr-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
body.m-app #overview .tr-head .eyebrow{font:650 15px var(--sans,inherit) !important;color:var(--ink) !important;letter-spacing:0 !important;text-transform:none !important}
body.m-app #overview .tr-meta{font-size:12.5px !important}
body.m-app #overview .tr-plot{height:auto !important}
body.m-app #overview .tr-plot svg{height:96px !important}
body.m-app #overview .snapcard{position:static !important;margin:8px 0 0 !important;width:auto !important;display:flex !important;align-items:baseline;gap:10px;
  padding:10px 12px !important;border-radius:14px !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;background:#fff !important}

/* engines: a list, one row each */
body.m-app #overview .ov-eng{display:flex !important;flex-direction:column;gap:0 !important;margin-top:14px !important;
  border-top:1px solid var(--m-line);padding:0 !important}
body.m-app #overview .ov-e{display:grid !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  width:100% !important;min-height:64px;padding:10px 2px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;
  background:none !important;border-radius:0 !important;text-align:left;box-shadow:none !important}
body.m-app #overview .ov-e:last-child{border-bottom:0 !important}
body.m-app #overview .ov-en{grid-row:1/3;grid-column:1/3;display:flex !important;flex-direction:row !important;align-items:center;gap:12px;width:auto !important;height:auto !important}
body.m-app #overview .ov-en img,body.m-app #overview .ov-en .lg{width:32px !important;height:32px !important;border-radius:9px}
body.m-app #overview .ov-en b,body.m-app #overview .ov-en span{font-size:16px !important;font-weight:650;white-space:nowrap}
body.m-app #overview .ov-ev{grid-column:3;grid-row:1;font-size:24px !important;text-align:right;margin:0 !important}
body.m-app #overview .ov-et{display:none !important}
body.m-app #overview .ov-ef{grid-column:3;grid-row:2;text-align:right;font-size:12.5px !important;width:auto !important;height:auto !important;color:var(--body)}
body.m-app #overview .ov-ef > *{display:none}
body.m-app #overview .ov-ef > *:first-child{display:block}

/* brands named: big marks, tap-sized rows */
body.m-app #overview .tile.field{padding:18px 16px 12px !important}
body.m-app #overview .t-head .eyebrow{font:650 17px/1.2 var(--display) !important;letter-spacing:-.01em !important;text-transform:none !important;color:var(--ink) !important}
body.m-app #overview .fd-top{display:flex !important;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px}
body.m-app #overview .fd-many{font-size:26px !important;line-height:1.1 !important}
body.m-app #overview .fd-lab{font-size:14px !important;text-transform:none !important;letter-spacing:0 !important}
body.m-app #overview .sov-ring{width:96px !important;height:96px !important;flex:none}
body.m-app #overview .sov-ring svg{width:96px !important;height:96px !important}
body.m-app #overview .fd-list li{min-height:48px;grid-template-columns:18px 30px minmax(0,1fr) 54px 50px !important;gap:10px !important;border-bottom:1px solid var(--m-line)}
body.m-app #overview .fd-list li:last-child{border-bottom:0}
body.m-app #overview .fd-logo{width:30px !important;height:30px !important;border-radius:8px}
body.m-app #overview .fd-nm{font-size:15px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.m-app #overview .fd-v{font-size:15px !important;text-align:right}
body.m-app #overview .fd-n{font-size:13px !important;color:var(--body)}
}

/* ══ BRAND SEARCHES ═════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the four figures: one card, two by two */
body.m-app .pfstats{display:grid !important;grid-template-columns:1fr 1fr !important;background:var(--m-card);border:0 !important;
  border-radius:var(--m-r);box-shadow:var(--m-shadow);margin:0 0 12px !important;overflow:hidden}
body.m-app .pfst{padding:14px 16px !important;border:0 !important;border-left:0 !important;border-top:0 !important}
body.m-app .pfst:nth-child(2n){border-left:1px solid var(--m-line) !important}
body.m-app .pfst:nth-child(n+3){border-top:1px solid var(--m-line) !important}
body.m-app .pfst:first-child{padding-left:16px !important}
body.m-app .pfst>span{font-size:13px !important;line-height:1.3}
body.m-app .pfst>b{font-size:30px !important;margin:4px 0 2px}
body.m-app .pfst>em{font-size:12.5px !important;line-height:1.35}

body.m-app #brand .bscard{padding:16px 14px !important;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;margin:0 0 12px !important}
body.m-app #brand .bsch .nxttl{font:650 18px/1.2 var(--display) !important;letter-spacing:-.015em}
body.m-app #brand .bsgrid{display:flex !important;flex-direction:column;gap:10px !important;margin-top:10px}
body.m-app #brand .bsgrid .bsgr{border-radius:16px !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;
  padding:14px 14px 10px !important;gap:0 !important;border:0 !important}
body.m-app #brand .bsgrid .bsq{font:650 16px/1.35 var(--sans,inherit) !important;color:var(--ink);margin-bottom:6px}
body.m-app #brand .bsgrid .bscell{display:grid !important;grid-template-columns:24px 1fr auto;align-items:center;column-gap:12px;
  padding:10px 0 !important;border:0 !important;border-top:1px solid var(--m-line) !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
body.m-app #brand .bsgrid .bscell .bsc-k{white-space:nowrap;width:auto !important;font-size:14px !important}
body.m-app #brand .bsgrid .bscell .bsc-k:last-child{justify-self:end;color:var(--body)}
body.m-app #brand .bsgrid .bscell.empty .bsc-l{grid-column:2/4;color:var(--body);font-size:14px !important;text-align:left !important}
body.m-app #brand .bsgrid .bsopen{align-self:stretch !important;justify-content:center;margin-top:6px;height:40px;border-radius:12px;
  background:var(--m-soft);font-size:14px !important;font-weight:650;color:var(--ink)}
body.m-app #brand .bsfx2{gap:0 !important}
body.m-app #brand .bsg2-h{font-size:13px !important;padding-top:16px}
body.m-app #brand .bsf2{min-height:52px}
body.m-app #brand .bsf2-n{font-size:15.5px !important}
}

/* ══ SOURCES ════════════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the rail: the same two-by-two card as every screen */
body.m-app .srail{display:grid !important;grid-template-columns:1fr 1fr !important;gap:0 !important;padding:0 !important;margin:0 0 12px !important;
  background:var(--m-card) !important;border:0 !important;border-radius:var(--m-r) !important;box-shadow:var(--m-shadow) !important;overflow:hidden}
body.m-app .srail > div{padding:14px 16px !important;border:0 !important;min-width:0}
body.m-app .srail > div:nth-child(2n){border-left:1px solid var(--m-line) !important}
body.m-app .srail > div:nth-child(n+3){border-top:1px solid var(--m-line) !important}
body.m-app .srail .k,body.m-app .srail span:first-child{font-size:12.5px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important;color:var(--body) !important}
body.m-app .srail b,body.m-app .srail .v{font-size:19px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}

/* the network: a near-square canvas, one compact key */
body.m-app #src-net .tmap{border-radius:var(--m-r) !important;padding:14px 12px 12px !important}
body.m-app #src-net .tmfocus.idle{display:none !important}
body.m-app #src-net .tmbody{height:330px !important}
body.m-app #src-net .tmapf{gap:6px !important;padding-top:8px !important}
body.m-app #src-net .tmapf .smgrp:nth-child(n+2){display:none !important}
body.m-app #src-net .tmapf .smgl{display:none !important}
body.m-app #src-net .tmctl button{width:34px !important;height:34px !important;border-radius:10px !important}
body.m-app #src-net .tmcrumb{font-size:15px !important}

/* the citation map keeps its shape, with room to read */
body.m-app #src-tree > *{border-radius:var(--m-r) !important}

/* the explorer: controls on one swipeable line, breakdowns side by side */
body.m-app #sources .sx{padding:16px 14px !important}
body.m-app #sources .sxh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.m-app #sources .sxh .nxttl{font:650 18px/1.2 var(--display) !important}
body.m-app #sources .sxbar{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:8px !important;margin:12px -14px 4px !important;
  padding:0 14px 4px !important;scrollbar-width:none;scroll-snap-type:x proximity}
body.m-app #sources .sxbar::-webkit-scrollbar{display:none}
body.m-app #sources .sxbar > *{flex:none !important;width:auto !important;scroll-snap-align:start}
body.m-app #sources .sxbar > *:first-child{flex:0 0 100% !important}
body.m-app #sources .sxmixes{display:flex !important;overflow-x:auto;gap:10px !important;margin:6px -14px 8px !important;padding:2px 14px 6px !important;
  scroll-snap-type:x mandatory;scrollbar-width:none}
body.m-app #sources .sxmixes::-webkit-scrollbar{display:none}
body.m-app #sources .sxmixes > *{flex:0 0 86% !important;scroll-snap-align:start;margin:0 !important}
body.m-app #sources .sxd{min-height:64px}
}
@media (max-width:760px){
body.m-app #sources .sxbar{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;overflow:visible !important;margin:12px 0 6px !important;padding:0 !important}
body.m-app #sources .sxbar > *{width:auto !important;min-width:0}
body.m-app #sources .sxbar > .sxsearch,body.m-app #sources .sxbar > .sxcount{grid-column:1/-1}
body.m-app #sources .sxsel{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:1px !important;
  padding:8px 12px !important;border-radius:14px !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;min-height:54px;position:relative}
body.m-app #sources .sxsel span{font-size:11.5px !important;font-weight:650;color:var(--body);text-transform:none !important;letter-spacing:0 !important}
body.m-app #sources .sxsel select{width:100% !important;font:600 15px var(--sans,inherit) !important;color:var(--ink);border:0 !important;background:none !important;padding:0 !important;
  -webkit-appearance:none;appearance:none;min-height:24px}
body.m-app #sources .sxsel::after{content:"";position:absolute;right:12px;bottom:15px;width:7px;height:7px;border-right:1.8px solid var(--body);border-bottom:1.8px solid var(--body);transform:rotate(45deg)}
body.m-app #sources .sxsearch{height:46px;border-radius:14px !important}
body.m-app #sources .sxsearch input{font-size:16px !important}
body.m-app #sources .sxcount{font-size:13px !important;color:var(--body)}
body.m-app #src-net .tmpanel{display:none !important}
}

/* ══ QUESTIONS ══════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #rail-prompts,body.m-app #prompts .srail{grid-template-columns:repeat(3,1fr) !important}
body.m-app #prompts .srail > div:nth-child(n+3){border-top:0 !important}
body.m-app #prompts .srail > div + div{border-left:1px solid var(--m-line) !important}
body.m-app #prompts .srail > div{padding:14px 12px !important}
body.m-app #prompts .expbar{display:flex !important;flex-direction:column;gap:10px !important;padding:12px !important;border-radius:var(--m-r) !important;
  background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;margin:0 0 12px !important}
body.m-app #prompts #q{height:46px !important;border-radius:14px !important;font-size:16px !important;padding:0 14px !important;width:100% !important}
body.m-app #prompts #exp-sort{display:flex !important;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap !important;width:100%;padding:3px !important;border-radius:13px !important}
body.m-app #prompts #exp-sort::-webkit-scrollbar{display:none}
body.m-app #prompts #exp-sort button{flex:none;height:36px !important;padding:0 14px !important;font-size:14px !important;border-radius:10px !important;white-space:nowrap}
body.m-app #prompts #expcount{font:500 13px var(--sans,inherit) !important;color:var(--body) !important;letter-spacing:0 !important}
body.m-app #prompts .bars,body.m-app #prompts #exp-list{background:none !important;box-shadow:none !important;padding:0 !important;border:0 !important}
body.m-app #prompts #exp-head{display:none !important}
body.m-app #prompts #exp-list{display:flex !important;flex-direction:column;gap:8px}
body.m-app #prompts #exp-list .pr{position:relative;padding:14px 40px 12px 14px !important;border-radius:16px !important;background:var(--m-card) !important;
  box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #prompts #exp-list .pr:active{transform:scale(.99)}
body.m-app #prompts #exp-list .pr::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-right:2px solid rgba(36,26,16,.3);border-top:2px solid rgba(36,26,16,.3);transform:rotate(45deg)}
body.m-app #prompts #exp-list .prow{gap:8px 10px !important;padding:0 !important;border:0 !important}
body.m-app #prompts #exp-list .pt{font:600 16px/1.35 var(--sans,inherit) !important;color:var(--ink)}
body.m-app #prompts #exp-list .engs{gap:6px !important}
body.m-app #prompts #exp-list .engcell img,body.m-app #prompts #exp-list .engcell .lg{width:22px !important;height:22px !important}
body.m-app #prompts .mmore,body.m-app #prompts .showmore{height:48px;border-radius:14px !important;font-size:15px !important;font-weight:650 !important;
  background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;width:100%;margin-top:4px}
}

/* ══ QUESTION SHEETS ════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #mask .modal{max-height:calc(100% - 14px) !important;height:calc(100% - 14px) !important}
body.m-app #mask .dd-tabs{display:none !important}
body.m-app #mask .qeng.tap{cursor:pointer;transition:box-shadow .2s,transform .15s}
body.m-app #mask .qeng.tap:active{transform:scale(.985)}
body.m-app #mask .qeng.tap.on{box-shadow:inset 0 0 0 2px var(--ink);border-color:transparent}
body.m-app #mask .qeng.tap .qeng-h::after{content:"Answer";margin-left:auto;font-size:12.5px;font-weight:650;color:var(--body)}
body.m-app #mask .qeng.tap.on .qeng-h::after{content:"Showing";color:var(--ink)}
body.m-app #mask .anspane,body.m-app #mask .panel2,body.m-app #mask .bsans,body.m-app #mask .bsa-box,body.m-app #mask .bqfacts{border-radius:18px !important}
body.m-app #mask .ansbody,body.m-app #mask .bsans{font-size:16px !important;line-height:1.6 !important}
body.m-app #mask .ansbody p,body.m-app #mask .ansbody li{font-size:16px !important;line-height:1.6 !important}
body.m-app #mask .mocktbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
body.m-app #mask .mocktbl table{min-width:520px;font-size:14px}
body.m-app #mask .grid2{display:flex !important;flex-direction:column;gap:12px}
body.m-app #mask .qtbl .t td,body.m-app #mask .qtbl .t th{font-size:14.5px !important;padding:10px 8px !important}
body.m-app #mask .bqtabs{display:flex !important;flex-direction:column;gap:8px}
body.m-app #mask .bqtab{width:100% !important;padding:12px 14px !important;border-radius:16px !important}
body.m-app #mask .bsa-cols{display:flex !important;flex-direction:column;gap:12px}
}

/* ══ TOPICS ═════════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #topics .trank{border-radius:var(--m-r) !important;overflow:hidden;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #topics .trow .trmain{display:grid !important;grid-template-columns:14px auto 1fr auto !important;
  grid-template-areas:"c n n v" ". b p p" ". s s s" !important;row-gap:8px !important;column-gap:10px !important;padding:16px 14px !important;align-items:center}
body.m-app #topics .trmain .chev{grid-area:c !important}
body.m-app #topics .trmain .trname{grid-area:n !important;font:650 17px/1.25 var(--display) !important;letter-spacing:-.01em;white-space:normal}
body.m-app #topics .trmain .trbadge{grid-area:b !important;justify-self:start}
body.m-app #topics .trmain .trvis{grid-area:v !important;justify-self:end;font-size:18px !important}
body.m-app #topics .trmain .trvis .trbar,body.m-app #topics .trmain .trvis i{display:none !important}
body.m-app #topics .trmain .trp{grid-area:p !important;display:block !important;justify-self:start;font-size:13.5px !important;color:var(--body)}
body.m-app #topics .trmain .trp::after{content:" questions"}
body.m-app #topics .trmain .trslots{grid-area:s !important;display:flex !important;gap:6px !important;overflow:hidden}
body.m-app #topics .trmain .trslots .slot{width:32px !important;height:32px !important}
body.m-app #topics .trmain .trslots .slot:nth-child(n+8){display:none}
body.m-app #topics .trow{border-bottom:1px solid var(--m-line) !important}
body.m-app #topics .trow:last-child{border-bottom:0 !important}
}

/* ══ RIVALS ═════════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #h2h .shead2,body.m-app #h2h #rivalpick > .eyebrow,body.m-app #h2h .rvtop-h{font-size:13px !important}
/* the rival picker: swipeable cards with their logo, snap to each */
body.m-app #h2h #rivalpick .rvs,body.m-app #h2h #rivalpick > div:last-child{scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--m-gut) * -1) !important;padding:2px var(--m-gut) 8px !important}
body.m-app #h2h #rivalpick [class*="rv"]{scroll-snap-align:start}

body.m-app #h2h .h2matchup{padding:18px 14px 8px !important;border-radius:var(--m-r) !important;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #h2h .h2head{display:grid !important;grid-template-columns:1fr 1fr !important;grid-template-areas:"gap gap" "me them" !important;gap:12px 10px !important;margin-bottom:14px !important}
body.m-app #h2h .h2gap{grid-area:gap;text-align:center;display:flex;flex-direction:column;align-items:center}
body.m-app #h2h .h2gap b,body.m-app #h2h .h2gap > :first-child{font-size:44px !important;line-height:1 !important}
body.m-app #h2h .h2gap span,body.m-app #h2h .h2gap small,body.m-app #h2h .h2gap em{font-size:12.5px !important;letter-spacing:.02em}
body.m-app #h2h .h2ent{min-width:0;display:flex !important;align-items:center;gap:8px;padding:10px;border-radius:14px;background:var(--m-soft)}
body.m-app #h2h .h2ent.me{grid-area:me}
body.m-app #h2h .h2ent.them{grid-area:them;flex-direction:row-reverse;text-align:right}
body.m-app #h2h .h2ent img,body.m-app #h2h .h2ent .h2logo{width:32px !important;height:32px !important;flex:none}
body.m-app #h2h .h2ent b,body.m-app #h2h .h2ent strong,body.m-app #h2h .h2ent > div > :first-child{font-size:15px !important;line-height:1.2;white-space:normal}
body.m-app #h2h .h2ent .dom,body.m-app #h2h .h2ent small,body.m-app #h2h .h2ent span:last-child{font-size:12px !important}

/* figures down, you and the rival across: the markup is already in that order */
body.m-app #h2h .h2stats{display:grid !important;grid-template-columns:minmax(0,1fr) 92px 92px !important;grid-template-rows:repeat(5,auto) !important;
  grid-auto-flow:column !important;gap:0 !important;border-top:1px solid var(--m-line)}
body.m-app #h2h .h2stats > *{padding:12px 6px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;min-width:0;background:none !important}
body.m-app #h2h .h2stats > *:nth-child(5n){border-bottom:0 !important}
body.m-app #h2h .h2sh{font:600 14px/1.3 var(--sans,inherit) !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:0 !important;padding-left:2px !important}
body.m-app #h2h .h2sh em{display:block;font-size:12px !important;font-style:normal;color:var(--body);font-weight:500}
body.m-app #h2h .h2sn{display:flex !important;align-items:center;justify-content:flex-end;gap:6px;font-size:12.5px !important;font-weight:650;color:var(--body)}
body.m-app #h2h .h2sn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px}
body.m-app #h2h .h2sv{text-align:right;font-size:18px !important;font-weight:650;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
body.m-app #h2h .h2sv .h2d,body.m-app #h2h .h2sv em{font-size:11.5px !important}
body.m-app #h2h .h2sv .na{font-size:12.5px !important;font-weight:500}
body.m-app #h2h .h2sv.win.them,body.m-app #h2h .h2sv.win.me{background:color-mix(in srgb,var(--accent) 6%,transparent) !important}
}
@media (max-width:760px){ body.m-app #h2h .h2stats > *{grid-column:auto !important;grid-row:auto !important;order:0 !important} }
@media (max-width:760px){ body.m-app #h2h .h2sn span{display:none !important} body.m-app #h2h .h2sn img,body.m-app #h2h .h2sn .lg,body.m-app #h2h .h2sn > *:first-child{width:26px !important;height:26px !important} }

/* ══ SOCIAL & PRESS ═════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the logo rail stays under the top bar, so switching platform is always one tap */
body.m-app #pf-body .pfrail{position:sticky !important;top:var(--m-top);z-index:20;margin:0 calc(var(--m-gut) * -1) 10px !important;
  padding:8px var(--m-gut) 10px !important;background:rgba(245,239,228,.86) !important;-webkit-backdrop-filter:blur(16px) !important;backdrop-filter:blur(16px) !important;
  scroll-snap-type:x proximity}
body.m-app #pf-body .pfl{scroll-snap-align:start;width:60px !important;height:60px !important;flex:0 0 60px !important;border-radius:18px !important}
body.m-app #pf-body .pfl .pflogo,body.m-app #pf-body .pfl .pfl-i{width:40px !important;height:40px !important;border-radius:11px !important}
body.m-app #pf-body .pfl[aria-selected="true"]::after{display:none}
body.m-app #pf-body .pfcard{padding:18px 14px 16px !important;border-radius:var(--m-r) !important}
body.m-app #pf-body .pfname{font-size:28px !important}
/* topics: name and count, bar underneath at full width */
body.m-app #pf-body .pfbox .dsb{display:grid !important;grid-template-columns:1fr auto !important;grid-template-areas:"n c" "t t" !important;row-gap:6px !important;padding:8px 0 !important;min-height:0}
body.m-app #pf-body .pfbox .dsb .dsb-n{grid-area:n;font-size:15px !important}
body.m-app #pf-body .pfbox .dsb > b{grid-area:c;font-size:15px !important}
body.m-app #pf-body .pfbox .dsb .dsb-t{grid-area:t;width:100% !important}
body.m-app #pf-body .pfbox .dsn{min-height:52px}
body.m-app #pf-body .pfbox .dsn-n b{font-size:15px !important}
body.m-app #pf-body .pfmix-key{gap:6px 16px !important}
body.m-app #pf-body .pfmix-key b{font-size:14px !important}
body.m-app #pf-body .pfr>summary{padding:12px 6px !important;min-height:64px}
body.m-app #pf-body .pfr-t b{font-size:15px !important;white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:760px){ body.m-app #mask .bqtab{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:4px 14px !important;padding:10px 12px !important} body.m-app #mask .bqtab .bqt-h{flex:1 0 100%} body.m-app #mask .bqt-l{font-size:13.5px !important} }
@media (max-width:760px){
body.m-app #topics .trow .trmain,body.m-app #topics .trprompt{display:grid !important;grid-template-columns:14px auto 1fr auto !important;
  grid-template-areas:"c n n v" ". p r r" ". s s s" !important;row-gap:8px !important;column-gap:10px !important}
body.m-app #topics .trprompt{grid-template-areas:"n n n v" "s s s s" !important;padding:12px 14px !important}
body.m-app #topics .trprompt .trptext{grid-area:n !important;font-size:14.5px !important}
body.m-app #topics .trprompt .trvis{grid-area:v !important}
body.m-app #topics .trprompt .trp,body.m-app #topics .trprompt .trrank{display:none !important}
body.m-app #topics .trprompt .trslots{grid-area:s !important;display:flex !important}
body.m-app #topics .trmain .trp{justify-self:start !important;text-align:left !important}
body.m-app #topics .trmain .trrank{grid-area:r !important;justify-self:start;font-size:13.5px !important;color:var(--body)}
body.m-app #topics .trmain .trrank::before{content:"Avg. rank ";font-weight:500}
body.m-app #topics .trvis .trtrk{display:none !important}
body.m-app #topics .trvis b{min-width:0}
}
@media (max-width:760px){
body.m-app .pfstats.bs3{grid-template-columns:repeat(3,1fr) !important}
body.m-app .pfstats.bs3 .pfst{border-top:0 !important;padding:14px 10px !important}
body.m-app .pfstats.bs3 .pfst + .pfst{border-left:1px solid var(--m-line) !important}
body.m-app .pfstats.bs3 .pfst>b{font-size:24px !important}
body.m-app .pfstats.pfstats4 .pfst>em{display:none}

  /* Brand searches: knowledge-base check */
  body.m-app #brand .kbe-r{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  body.m-app #brand .kbe-e{grid-column:1/-1}
  body.m-app #brand .kbc-r{grid-template-columns:1fr;gap:8px}
  body.m-app #brand .fx2n small{font-size:12.5px}
}

/* ══ AGENT PROMOTER SCORE, on the phone ════════════════════════════════════
   Desktop is untouched: everything here is inside the ≤760px gate the rest of
   this file sits in. Three things have to change and nothing else does.

   1. THE FOUR NODE CARDS GO TWO BY TWO. Four across at 375px is an 80px card
      holding a 34px figure and a two-line label, which is a figure nobody can
      read beside a word nobody can read.
   2. THE BARCODE TURNS ITS LABELS ABOVE IT. The desktop row is a 180px engine
      column beside the bars; at 375px that column eats half the width, so the
      engine name sits over its own bar instead, and the bar keeps the width.
   3. THE LOSS ROWS STACK. The desktop grid is band, question, engine, arrow in
      four columns; on the phone the band and the engine ride together on one
      line above the question. */
@media (max-width:760px){
  .apsnodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
  .apsnode{padding:13px;gap:7px}
  .apsnode-k{font-size:11.5px}
  .apsnode-f{min-height:34px}
  .apsnode-f b{font-size:29px}
  .apsnode-f b.thin{font-size:23px}
  .apscomp{font-size:15px;gap:3px 9px}
  .apscomp b{font-size:23px}
  .apscomp span{flex-basis:100%;font-size:12px}

  .apsmb{grid-template-columns:minmax(0,1fr) 42px;grid-template-areas:"e n" "b b";gap:5px 10px}
  .apsmb-e{grid-area:e}
  .apsmb-bar{grid-area:b;height:18px}
  .apsmb-n{grid-area:n}
  .apsfp-k{gap:6px 14px;font-size:13.5px}
  .apsbd{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"k n" "t t";gap:3px 10px}
  .apsbd-k{grid-area:k}
  .apsbd-t{grid-area:t}
  .apsbd-n{grid-area:n}
  .apsbd-p{display:none}
  .apsex > .apssheet,.apsex > p{padding-left:0}

  .apsloss-r{grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"v a" "b b";gap:8px 10px;padding:14px 2px}
  .apsloss-v{grid-area:v}
  .apsloss-b{grid-area:b}
  .apsloss-e{display:none}
  .apsloss-r > svg{grid-area:a;align-self:center}
  .apsloss-b b{font-size:14.5px}
  .apsloss-b q{font-size:13.5px}

  .apsgap p{font-size:14px}
  .apssheet-r{grid-template-columns:22px minmax(0,1fr);gap:10px}
  .apssheet-r > svg{display:none}
}

/* the score on one question, at 375px: four numbers go two by two, and the
   rail's marks keep their colour spine */
@media (max-width:760px){
  .apsq4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 2px}
  .apsq4-c{padding:10px 12px 9px}
  .apsq4-c b{font-size:24px}
  .apsq4-c.off b{font-size:19px}
  .apsq4-k{font-size:10.5px}
  .ansbody .apsmark{padding-left:10px;margin-left:-10px}
}