/* =============================================================================
   report-v2 mobile overrides (live)
   Edit build/{helpers,sections-*,app}.jsx — live index.php.
   Desktop / tablet (≥761px) are unchanged.
   ============================================================================= */

/* Desktop: footer accordion chrome is inert; panel always open. */
.foot-acc-tog{
  display:contents;
}
.foot-acc-tog h5{ margin:0; }
.foot-acc-tog svg{ display:none; }
.foot-acc-panel{ display:block; }
.rt-pub-head{ display:none; }
.mnav,
.mnav-scrim,
.mnav-panel{ display:none; }
body.pm .mnav,
body.pm .mnav-scrim,
body.pm .mnav-panel{ display:none !important; }
body.pm .sort-menu{ display:none !important; }

/* Desktop: keep filter grouping transparent so layout matches the original. */
.filter-pills,
.filter-tools{
  display:contents;
}

/* Callout copy wrapper is a no-op on desktop for stacked cards. */
.callout:not(.wide) .co-copy{ display:contents; }

/* Custom sort dropdown (all viewports) — replaces the native <select>. */
.sort-wrap{ position:relative; display:inline-flex; }
.sort-tog{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .9rem;
  background:#fff;
  background-image:none;
  -webkit-appearance:none;
  appearance:none;
}
.sort-tog svg{ flex:none; color:var(--n-400); }
.sort-tog.open,
.sort-tog:hover{ border-color:var(--n-300); }
.sort-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:100%;
  width:max-content;
  background:#fff;
  border:1px solid var(--n-200);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  z-index:var(--z-dropdown);
  padding:.35rem;
  transform-origin:top left;
  animation:pop .16s var(--ease-out);
}
.sort-item{
  display:block;
  width:100%;
  text-align:left;
  padding:.6rem .8rem;
  border:none;
  background:transparent;
  border-radius:var(--r-md);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--n-700);
  cursor:pointer;
  white-space:nowrap;
}
.sort-item:hover{ background:var(--color-surface-2); }
.sort-item.on{
  background:var(--color-surface-2);
  color:var(--ink);
  font-weight:700;
}

@media (max-width:760px){

  /* ---------- Mobile sticky navbar ---------- */
  .masthead-desk{ display:none; }
  .mnav{
    display:block;
    position:absolute;
    top:0; left:0; right:0;
    z-index:90;
    pointer-events:none;
  }
  .mnav.is-open{
    position:fixed;
    background:var(--bp-indigo);
    transform:none;
  }
  .mnav-bar{
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem var(--rp-gut);
    max-width:var(--rp-maxw);
    margin-inline:auto;
  }
  .mnav-logo{ display:flex; align-items:center; min-width:0; }
  .mnav-logo .brandlogo,
  .mnav-logo .brandlogo-wl-img{ height:24px; width:auto; max-width:160px; }
  .mnav-burger{
    flex:none;
    width:42px; height:42px;
    border:none;
    border-radius:0;
    background:transparent;
    display:grid;
    place-content:center;
    gap:5px;
    padding:0;
    cursor:pointer;
    box-shadow:none;
  }
  .mnav-burger span{
    display:block;
    width:18px; height:2px;
    border-radius:2px;
    background:#fff;
    transition:transform .22s ease, opacity .18s ease;
  }
  .mnav-burger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mnav-burger.on span:nth-child(2){ opacity:0; }
  .mnav-burger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Once past the hero, pin and slide. */
  .mnav.is-pinned{
    position:fixed;
    background:var(--bp-indigo);
    box-shadow:0 10px 28px -16px rgba(0,0,0,.55);
    transform:translateY(0);
    transition:transform .28s var(--ease-out, cubic-bezier(.2,.8,.2,1)), background .2s ease;
  }
  .mnav.is-pinned.is-hidden{
    transform:translateY(-110%);
  }
  .mnav.is-pinned .mnav-bar{ padding-block:.85rem; }

  body.wl.wl-header-light .mnav.is-pinned{ background:var(--bp-indigo); }
  body.wl.wl-header-light .mnav-burger{
    border:none;
    background:transparent;
  }
  body.wl.wl-header-light .mnav-burger span{ background:var(--n-700); }
  body.wl.wl-header-light .mnav.is-pinned .mnav-burger,
  body.wl.wl-header-light .mnav.is-open .mnav-burger{
    border:none;
    background:transparent;
  }
  body.wl.wl-header-light .mnav.is-pinned .mnav-burger span,
  body.wl.wl-header-light .mnav.is-open .mnav-burger span{ background:#fff; }
  body.wl.wl-header-light .mnav.is-open{
    background:var(--bp-indigo);
  }

  .mnav-scrim{
    display:block;
    position:fixed; inset:0;
    z-index:70;
    background:rgba(12,14,34,.46);
  }
  .mnav-panel{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    position:fixed;
    top:0; left:0; right:0;
    z-index:80;
    width:100%;
    height:auto;
    max-height:min(85vh, 100%);
    padding:4.6rem 1.15rem 1.25rem;
    background:#fff;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
    transform:translateY(-105%);
    transition:transform .28s var(--ease-out, cubic-bezier(.2,.8,.2,1));
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 18px 18px;
  }
  .mnav-panel.open{ transform:translateY(0); }
  .mnav-links{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    margin-top:.75rem;
  }
  .mnav-link{
    display:block; width:100%;
    text-align:left;
    padding:.85rem .9rem;
    border-radius:12px;
    font-size:1.02rem; font-weight:700;
    color:var(--ink);
    background:transparent; border:none;
  }
  .mnav-link:active{ background:var(--color-surface-2); }
  .mnav-export{
    margin-top:.5rem;
    border-top:1px solid var(--n-150);
    padding-top:.5rem;
  }
  .mnav-export-tog{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem;
    padding:.85rem .9rem;
    border:none; background:transparent;
    font-size:1.02rem; font-weight:700; color:var(--ink);
    border-radius:12px;
  }
  .mnav-export-tog > span{ display:inline-flex; align-items:center; gap:.5rem; }
  .mnav-export-panel{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .28s var(--ease-out, cubic-bezier(.2,.8,.2,1)), opacity .22s ease;
  }
  .mnav-export.open .mnav-export-panel{
    grid-template-rows:1fr;
    opacity:1;
  }
  .mnav-export-list{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:0 .2rem;
    overflow:hidden;
    min-height:0;
  }
  .mnav-export.open .mnav-export-list{
    padding-bottom:.4rem;
  }
  .mnav-export-item{
    width:100%;
    display:flex; align-items:center; gap:.75rem;
    padding:.7rem .75rem;
    border:none; background:transparent;
    border-radius:12px; text-align:left;
  }
  .mnav-export-item:active{ background:var(--color-surface-2); }
  .mnav-cta{
    margin-top:.75rem;
    width:100%;
    justify-content:center;
  }
html.mnav-lock,html.mnav-lock body{ overflow:hidden; }

  /* Give the hero breathing room under the absolute mobile bar. */
  .report{ position:relative; }
  .hero > .inner{ padding-top:3.6rem; }

  /* When sitting at the top, paint the nav over the hero band so it reads as
     part of the masthead rather than a separate chrome strip. Keep a dark bar
     while the menu is open so the logo stays readable over the white panel. */
  .mnav:not(.is-pinned):not(.is-open){
    background:transparent;
  }

  /* ---------- Hero: single card, As Seen On above names ---------- */
  .card-stack .stk.s2,
  .card-stack .stk.s3{ display:none; }
  .card-stack .stk.s1{
    position:static;
    transform:none;
  }
  .hero-eyebrow{
    margin-bottom:.55rem;
  }
  .asseen-strip{
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
  }
  .asseen-strip .as-logos{
    flex-wrap:wrap;
    width:100%;
  }

  /* ---------- Story: hide news outlet cards ---------- */
  #story .feat-grid{ display:none; }

  /* ---------- Upsell: +N left of copy, full-width CTA below ---------- */
  .upsell-card-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "n copy"
      "cta cta";
    align-items:start;
    column-gap:.85rem;
    row-gap:.85rem;
  }
  .upsell-card-n{
    grid-area:n;
    align-self:start;
    line-height:1;
  }
  .upsell-card-copy{ grid-area:copy; }
  .upsell-card-cta{
    grid-area:cta;
    margin-left:0;
    align-self:stretch;
    width:100%;
  }

  /* ---------- Review: hide trust card, aside below form ---------- */
  .review-trust{ display:none; }
  .review-grid{
    display:flex;
    flex-direction:column;
  }
  .review-card{ order:1; }
  .review-aside{ order:2; }
  .field-writer .flab{
    flex-direction:column;
    align-items:flex-start;
    gap:.2rem;
  }

  /* ---------- Trust badge proof ---------- */
  .tb-proof{ display:none; }

  /* ---------- Rank / AI KPI cards: number on the left, aligned columns ---------- */
  .callout.callout-kpi{
    display:flex;
    align-items:center;
    gap:.65rem;
  }
  .callout.callout-kpi .co-num{
    flex:none;
    margin:0;
    width:1.5em;
    text-align:left;
    font-variant-numeric:tabular-nums;
  }
  .callout.callout-kpi .co-copy{
    display:block;
    min-width:0;
  }
  .callout.callout-kpi .co-lab{ margin-top:0; }
  .callout.wide{ grid-column:span 1; }

  /* ---------- AI filter pills: single-line horizontal scroll + edge fade ---------- */
  .ai-filters{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:.45rem;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.15rem;
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 2.4rem), transparent 100%);
    mask-image:linear-gradient(90deg, #000 0%, #000 calc(100% - 2.4rem), transparent 100%);
  }
  .ai-filters::-webkit-scrollbar{ display:none; }
  .ai-filters .fbtn{
    flex:none;
    white-space:nowrap;
  }

  /* ---------- First-page rankings: full-width search + lighter headline ---------- */
  #rankings .tc-head{
    flex-direction:column;
    align-items:stretch;
  }
  #rankings .tc-head .controls{
    width:100%;
    flex-wrap:wrap;
  }
  #rankings .tc-head .searchbox{
    width:100%;
    flex:1 1 100%;
  }
  #rankings .tc-head .searchbox input{
    width:100%;
    max-width:none;
  }

  /* ---------- Rankings table: search-result card layout ---------- */
  .rt-head{ display:none; }
  .rt-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "kw kw"
      "pub pos";
    gap:.75rem .9rem;
    align-items:center;
    padding:1rem clamp(.9rem, 3vw, 1.2rem);
  }
  .rt-row .rt-kw{
    display:block;
    grid-area:kw;
  }
  .rt-row .rt-pub{
    grid-area:pub;
    min-width:0;
    align-items:flex-start;
  }
  .rt-row .rt-pos{
    grid-area:pos;
    align-self:center;
  }
  .rt-pub .mono{
    width:36px; height:36px;
    flex:none;
  }
  .rt-pub-dom{ display:none; }
  .rt-pub-head{
    display:block;
    margin-top:.15rem;
    font-size:var(--text-sm);
    line-height:1.35;
    font-weight:600;
    color:var(--n-400);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .rt-pub-name{
    font-size:var(--text-sm);
    line-height:1.25;
  }

  /* ---------- Every Placement toolbar + hide tier pills in table ---------- */
  .pubtable .put-name > .oc-tier{ display:none; }

  .pub-toolbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
  }
  .pub-toolbar .searchbox{ width:100%; }
  .pub-toolbar .searchbox input{
    width:100%;
    max-width:none;
  }
  .pub-toolbar .filters{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.65rem;
    width:100%;
  }
  .filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
  }
  .filter-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.65rem;
    width:100%;
  }
  .filter-tools .sort-wrap{
    flex:1;
    min-width:0;
  }
  .filter-tools .sort-tog{
    width:100%;
    justify-content:space-between;
  }
  .filter-tools .viewtoggle{ flex:none; }

  /* ---------- Footer accordion ---------- */
  .foot-acc-tog{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    width:100%;
    padding:.15rem 0;
    border:none;
    background:transparent;
    color:inherit;
    cursor:pointer;
    text-align:left;
  }
  .foot-acc-tog h5{
    margin:0;
  }
  .foot-acc-tog svg{
    display:block;
    flex:none;
    color:var(--on-dark-soft);
    transition:transform .22s ease;
  }
  .foot-links.is-open .foot-acc-tog svg{
    transform:rotate(90deg);
  }
  .foot-acc-panel{
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .32s var(--ease-out, cubic-bezier(.2,.8,.2,1)), opacity .22s ease;
  }
  .foot-links.is-open .foot-acc-panel{
    max-height:18rem;
    opacity:1;
  }
  .foot-links{
    border-top:1px solid var(--on-dark-line);
    padding-block:.85rem 0;
  }
  .foot-acc-panel a,
  .foot-acc-panel .foot-linkbtn{
    display:block;
    font-size:var(--text-sm);
    color:var(--on-dark);
    padding-block:.4rem;
    background:none;
    border:none;
    text-align:left;
    width:100%;
    cursor:pointer;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .mnav.is-pinned,
  .mnav-panel,
  .mnav-export-panel,
  .foot-acc-panel,
  .foot-acc-tog svg{
    transition:none;
  }
}

/* =============================================================================
   Demo mode (?demo=1) — simplified sales walkthrough
   ============================================================================= */
body.rv2-demo .rank-hero.demo-kpis{
  grid-template-columns:1fr;
  justify-items:stretch;
}
body.rv2-demo .rank-hero.demo-kpis .rank-callouts{
  width:100%;
  max-width:none;
  grid-template-columns:1fr 1fr;
}
/* Demo Every Placement: Cards/Table left, Sort right (full-width row). */
body.rv2-demo .pub-toolbar.demo-tools{
  justify-content:space-between;
  width:100%;
}
body.rv2-demo .pub-toolbar.demo-tools .filters,
body.rv2-demo .pub-toolbar.demo-tools .filter-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  width:100%;
  margin-left:0;
}

@media (max-width:760px){
  /* No sticky mobile nav in demo — drop the hero top padding reserved for it. */
  body.rv2-demo .hero > .inner{ padding-top:0; }
  /* Keep the two ranking KPI cards side by side on phones too. */
  body.rv2-demo .rank-hero.demo-kpis .rank-callouts{
    grid-template-columns:1fr 1fr;
  }
  body.rv2-demo .pub-toolbar.demo-tools{
    flex-direction:row;
    justify-content:space-between;
  }
  body.rv2-demo .pub-toolbar.demo-tools .filters,
  body.rv2-demo .pub-toolbar.demo-tools .filter-tools{
    width:100%;
    flex-direction:row;
    justify-content:space-between;
  }
  /* Sort stays compact on the right; don't stretch under the view toggle. */
  body.rv2-demo .pub-toolbar.demo-tools .filter-tools .sort-wrap{
    flex:none;
  }
}