/* ============================================================
   SafeComments — responsive.css
   Shared mobile patterns loaded globally after base.css
   Breakpoints: sm ≤639, md ≤767, lg ≤1023, xl ≥1024
   ============================================================ */

/* ---------- scrollable table hint ---------- */
.scroll-hint-wrap{
  position:relative;
}
.scroll-hint-wrap::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  width:28px;
  pointer-events:none;
  background:linear-gradient(to left, var(--surface), transparent);
  opacity:0;
  transition:opacity .2s var(--ease);
}
@media (max-width:767px){
  .scroll-hint-wrap::after{ opacity:1; }
  .scroll-hint-wrap.scrolled-end::after{ opacity:0; }
}

/* ---------- pricing compare: card rows on mobile ---------- */
@media (max-width:767px){
  .compare-wrap{
    overflow-x:visible;
    border:none;
    border-radius:0;
    background:transparent;
  }
  .compare{
    min-width:0;
    display:block;
  }
  .compare thead{ display:none; }
  .compare tbody{ display:flex; flex-direction:column; gap:10px; }
  .compare tr.grp{
    display:block;
    margin-top:8px;
  }
  .compare tr.grp:first-child{ margin-top:0; }
  .compare tr.grp td{
    display:block;
    padding:10px 0 4px;
    background:transparent;
    border:none;
    font-size:11px;
    letter-spacing:.08em;
  }
  .compare tr:not(.grp){
    display:block;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--surface);
    padding:12px 14px;
  }
  .compare tr:not(.grp) td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:7px 0;
    border:none;
    text-align:end;
  }
  .compare tr:not(.grp) td:first-child{
    font-weight:600;
    color:var(--text);
    text-align:start;
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
    margin-bottom:2px;
    justify-content:flex-start;
  }
  .compare tr:not(.grp) td:not(:first-child)::before{
    font-size:12px;
    font-weight:500;
    color:var(--text-3);
    flex:1;
    text-align:start;
  }
  .compare tr:not(.grp) td:nth-child(2)::before{ content:"Free Beta"; }
  .compare tr:not(.grp) td:nth-child(3)::before{ content:"Starter"; }
  .compare tr:not(.grp) td:nth-child(4)::before{ content:"Pro"; }
  .compare tr:not(.grp) td:nth-child(5)::before{ content:"Agency"; }
  .compare tr:not(.grp) td.popcol{ background:transparent; }
  .compare tbody tr:hover td{ background:transparent; }
}

/* ---------- marketing compare: card rows on mobile ---------- */
@media (max-width:767px){
  .mkt-compare-wrap{
    overflow-x:visible;
  }
  .mkt-compare{
    min-width:0;
    display:block;
  }
  .mkt-compare thead{ display:none; }
  .mkt-compare tbody{ display:flex; flex-direction:column; gap:10px; }
  .mkt-compare tbody tr{
    display:block;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--surface);
    padding:12px 14px;
  }
  .mkt-compare tbody th{
    display:block;
    width:auto;
    background:transparent;
    border:none;
    padding:0 0 10px;
    margin-bottom:8px;
    border-bottom:1px solid var(--border);
    font-size:14px;
    font-weight:600;
    color:var(--text);
  }
  .mkt-compare tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:none;
    font-size:14px;
  }
  .mkt-compare tbody td::before{
    font-weight:600;
    color:var(--text-3);
    font-size:12px;
    flex:none;
    min-width:7rem;
  }
  .mkt-compare tbody td:nth-child(2)::before{ content:"SafeComments"; }
  .mkt-compare tbody td:nth-child(3)::before{ content:"Competitor"; }
}

/* ---------- analytics heatmap: compact on mobile ---------- */
@media (max-width:767px){
  .heat-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--pad-x-sm));
    padding-inline:var(--pad-x-sm);
  }
  .heat{
    min-width:480px;
    gap:2px;
  }
  .heat .cell{ height:18px; }
  .heat .rl{ font-size:10px; height:18px; }
  .heat .hh{ font-size:8px; }
}

@media (max-width:639px){
  .heat{ min-width:420px; }
}

/* ---------- marketing page container ---------- */
@media (max-width:639px){
  .mkt-container{ padding-inline:var(--pad-x-sm); }
  .mkt-cta{ padding:28px 20px; }
  .pricing-hero{ padding:56px 0 32px; }
  .compare-section{ padding:32px 0 56px; }
}