/* ==========================================================================
   Search landing pages: /seo-tampa, /web-design-tampa, /med-spa-seo-tampa,
   generated by _seo/build-seo-pages.js. Loaded after style.css and
   industry.css, which supply the hero, facts panel, numbered cards, plan rows,
   FAQ and CTA. This file only adds what those pages have and the industry
   pages do not: the two-column explainer, the comparison table, the source
   notes and the link cards.

   Accent discipline as everywhere: --accent stays on buttons, eyebrows,
   checkmarks and link underlines. Small labels use --text-dim, not --text-mute,
   which measured under 4.5:1 on a card.
   ========================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- explainer: copy on one side, a checklist card on the other --------- */

.sv-copy .lede{margin-top:1.2rem;}
.sv-para{margin-top:1rem;color:var(--text-dim);text-wrap:pretty;}
.sv-card{padding:2.2rem;}
.sv-card .ticks{margin-top:.5rem;}
.seo-page .tier-excl > span{color:var(--text-dim);}
.seo-page .tier-excl p,
.seo-page .ticks--out li{color:var(--text-dim);}

/* ---- running copy links, same treatment as the industry pages ----------- */

.sv-copy a,.sv-note a,.sv-after a,.sv-link p a,.ind-needs p a,.sv-table a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:.22em;
  transition:color var(--t-fast);
}
.sv-copy a:hover,.sv-note a:hover,.sv-after a:hover,.sv-link p a:hover,.ind-needs p a:hover,.sv-table a:hover{color:var(--accent);}

/* ---- notes under a section ---------------------------------------------- */

.sv-note,.sv-after{
  max-width:62rem;margin:1.4rem auto 0;
  font-size:.95rem;color:var(--text-dim);text-wrap:pretty;
}
.sv-after{margin-top:2rem;}

/* ---- comparison table ---------------------------------------------------- */

.sv-table-wrap{
  max-width:62rem;margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.sv-table{width:100%;border-collapse:collapse;font-size:.93rem;}
.sv-table th,.sv-table td{
  padding:1rem 1.2rem;text-align:left;vertical-align:top;
  border-top:1px solid var(--line);
  color:var(--text-dim);line-height:1.5;
}
.sv-table thead th{
  border-top:0;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
  background:var(--surface-2);
}
.sv-table tbody th{
  font-weight:600;color:var(--text);
  width:24%;
}
.sv-table td b{color:var(--text);font-weight:600;}

@media (max-width:760px){
  .sv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .sv-table,.sv-table tbody,.sv-table tr,.sv-table th,.sv-table td{display:block;width:auto;}
  .sv-table tbody th{
    width:auto;padding:1.1rem 1.2rem .4rem;
    border-top:1px solid var(--line);
    background:var(--surface-2);
  }
  .sv-table tbody tr:first-child th{border-top:0;}
  .sv-table td{padding:.6rem 1.2rem;border-top:0;}
  .sv-table td::before{
    content:attr(data-label);
    display:block;
    font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:.1rem;
  }
  .sv-table tbody tr{padding-bottom:.6rem;}
}

/* ---- link cards ---------------------------------------------------------- */

.sv-links{margin:0;padding:0;list-style:none;}
.sv-link h3{margin-bottom:.6rem;font-size:1.2rem;}
.sv-link h3 a{
  display:inline-block;min-height:44px;
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:.22em;
  transition:color var(--t-fast);
}
.sv-link h3 a:hover{color:var(--accent);}
.sv-link p{color:var(--text-dim);font-size:.95rem;text-wrap:pretty;}

@media (max-width:760px){
  .sv-card{padding:1.6rem;}
}