/**
 * Block-level styles. Loaded only when a Serpify block is on the page.
 */

/* ------------------------------------------------------------ hero CTA */
.sf-cta { margin-block: 22px; }
.sf-cta .sf-badge { margin: 0 0 16px; }
.sf-cta__text { margin: 0 0 18px; }
.sf-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sf-cta .sf-hint { margin-top: 12px; }

.sf-cta--inline .sf-badge { margin-bottom: 12px; }
.sf-cta--inline .sf-cta__text { max-width: 54ch; }

.sf-cta--panel {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh-lg);
  padding: 26px 28px;
}
.sf-cta--panel .sf-badge { box-shadow: none; }

/* --------------------------------------------------- answer summary box */
.sf-answer {
  border: var(--sf-bw) solid var(--sf-line);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-acc2);
  background: var(--sf-card);
  box-shadow: var(--sf-sh);
  padding: 18px 22px;
  margin-block: 26px;
}
.sf-answer__label {
  display: block;
  font-family: var(--sf-fmono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sf-ink3-tx);
  margin-bottom: 8px;
}
.sf-answer p { margin: 0; font-size: 16.5px; }

/* ------------------------------------------------------- catalogue grid */
.sf-catalogue .sf-grid { grid-template-columns: repeat(var(--sf-cols, 3), minmax(0, 1fr)); }
@media (max-width: 980px) { .sf-catalogue .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sf-catalogue .sf-grid { grid-template-columns: minmax(0, 1fr); } }
.sf-catalogue.is-list .sf-grid { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------- article tab subrows */
.sf-tab.is-sub .t { opacity: .78; padding-inline-start: 10px; }
.sf-tab.is-sub .n { display: none; }

/* --------------------------------------------- core block style variants */
.is-style-sf-panel-ink {
  background: var(--sf-ink);
  color: #EAF0F5;
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  padding: 26px;
}
.is-style-sf-panel-ink :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.is-style-sf-panel-ink p { color: #A9BACA; }

.is-style-sf-hard-cols > .wp-block-column {
  border: var(--sf-bw) solid var(--sf-line);
  background: var(--sf-card);
  box-shadow: var(--sf-sh);
  padding: 20px;
}

.is-style-sf-underline {
  border-bottom: var(--sf-bw) solid var(--sf-line);
  padding-bottom: .3em;
}

.is-style-sf-checklist { list-style: none; padding-inline-start: 0; }
/* These were flex rows. A list item that opens with a link and carries its
   description after it — every item in the contact page's help list — was
   split into two columns, the link stacked word by word on the left and the
   text beside it. The marker is positioned instead, so the item is ordinary
   inline text that wraps as text should. */
.is-style-sf-checklist li {
  position: relative; padding-inline-start: 23px; margin-bottom: 10px;
}
.is-style-sf-checklist li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  width: 10px; height: 10px; box-sizing: border-box;
  background: var(--sf-acc2); border: var(--sf-bw) solid var(--sf-line);
}

/* Avoid list — the checklist's opposite, for "common mistakes" sections. Same
   positioned marker so it wraps as ordinary text, in the accessible red rather
   than the mint, with a cross drawn on it. Marker only, no colour-coded text,
   so it never relies on colour alone to carry the meaning. */
.is-style-sf-avoidlist { list-style: none; padding-inline-start: 0; }
.is-style-sf-avoidlist li {
  position: relative; padding-inline-start: 23px; margin-bottom: 10px;
}
.is-style-sf-avoidlist li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  width: 10px; height: 10px; box-sizing: border-box;
  background: var(--sf-acc-tx); border: var(--sf-bw) solid var(--sf-line);
}
.is-style-sf-avoidlist li::after {
  content: ""; position: absolute; inset-inline-start: 2px; top: calc(.45em + 2px);
  width: 6px; height: 6px;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%);
}

.is-style-sf-framed img {
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
}

.is-style-sf-datatable { border-collapse: collapse; }
.is-style-sf-datatable th,
.is-style-sf-datatable td { border: 1px solid var(--sf-line); padding: 10px 12px; }
.is-style-sf-datatable th {
  background: var(--sf-yel);
  font-family: var(--sf-fmono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.is-style-sf-datatable tbody tr:nth-child(even) { background: var(--sf-bg); }

.is-style-sf-callout {
  border: var(--sf-bw) solid var(--sf-line);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-yel);
  background: var(--sf-card);
  box-shadow: var(--sf-sh);
  padding: 20px 24px;
}

.is-style-sf-faq-item {
  border: var(--sf-bw) solid var(--sf-line);
  background: var(--sf-card);
  box-shadow: var(--sf-sh);
  margin-bottom: 12px;
}
.is-style-sf-faq-item summary {
  font-family: var(--sf-fdisp);
  font-weight: 700;
  padding: 15px 18px;
  cursor: pointer;
}

/* Article headings read better in sentence case than the display uppercase. */
.sf-article :where(h2, h3, h4) { text-transform: none; letter-spacing: -.03em; }

/* =========================================================================
   CONTACT FORM
   Mobile-first. Inputs stay at 16px so iOS never zooms on focus, controls
   clear the 44px touch target, and every error state carries a border change
   and a text label rather than relying on colour alone.
   ========================================================================= */
.sf-contact { margin-block: 26px; }
.sf-contact__intro { max-width: 62ch; margin: 0 0 22px; }

/* ---------------------------------------------------------- error summary */
.sf-contact__summary {
  border: var(--sf-bw) solid var(--sf-line);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-acc);
  background: var(--sf-card);
  box-shadow: var(--sf-sh);
  padding: 18px 22px;
  margin-bottom: 24px;
}
.sf-contact__summary:focus-visible { outline: 3px solid var(--sf-acc); outline-offset: 3px; }
.sf-contact__summarytitle {
  margin: 0 0 10px;
  font-family: var(--sf-fdisp);
  font-weight: 800;
}
.sf-contact__summary ul { margin: 0; padding-inline-start: 20px; }
.sf-contact__summary li { margin-bottom: 6px; font-size: 15px; }
.sf-contact__summary a { color: var(--sf-ink); text-underline-offset: 3px; }

/* ------------------------------------------------------------ the form */
.sf-form {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh-lg);
  border-radius: var(--sf-radius);
  padding: 26px;
}
.sf-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.sf-fld--full { grid-column: 1 / -1; }

.sf-fld__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sf-fmono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-ink2);
  margin-bottom: 7px;
}
.sf-fld__req {
  font-size: 10px;
  letter-spacing: .12em;
  background: var(--sf-yel);
  color: var(--sf-ink);
  border: 1px solid var(--sf-line);
  padding: 1px 6px;
}

.sf-fld__input {
  width: 100%;
  box-sizing: border-box;    /* width:100% plus 14px of padding ran past the form's frame */
  font-family: var(--sf-fbody);
  font-size: 16px;           /* below 16px iOS zooms the viewport on focus */
  line-height: 1.5;
  color: var(--sf-ink);
  background: var(--sf-bg);
  border: var(--sf-bw) solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 12px 14px;
  min-height: 46px;
  appearance: none;
  transition: background-color .12s, box-shadow .12s;
}
.sf-fld__input::placeholder { color: var(--sf-ink3-tx); opacity: 1; }
.sf-fld__input:hover { background: var(--sf-card); }
.sf-fld__input:focus {
  outline: 3px solid var(--sf-acc-tx);
  outline-offset: 2px;
  background: var(--sf-card);
}
.sf-fld__textarea { resize: vertical; min-height: 150px; }

.sf-fld__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sf-ink) 50%),
                    linear-gradient(135deg, var(--sf-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 42px;
}
[dir="rtl"] .sf-fld__select {
  background-position: 20px calc(50% + 2px), 14px calc(50% + 2px);
  background-image: linear-gradient(135deg, transparent 50%, var(--sf-ink) 50%),
                    linear-gradient(45deg, var(--sf-ink) 50%, transparent 50%);
}

.sf-fld__hint {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--sf-ink2);
}
.sf-fld__count { font-family: var(--sf-fmono); font-size: 12px; color: var(--sf-ink3-tx); }
.sf-fld__count.is-near { color: var(--sf-acc-tx); font-weight: 700; }

.sf-fld__err {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #A3122C;
}
.sf-fld__err[hidden] { display: none; }
.sf-fld__err::before {
  content: "!";
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sf-fmono); font-size: 12px;
  background: var(--sf-acc-tx); color: #fff;
  border: 1px solid var(--sf-line);
}

/* The failed state changes the border as well as the colour. */
.sf-fld.is-bad .sf-fld__input {
  border-color: #A3122C;
  box-shadow: inset 0 0 0 1px #A3122C;
  background: #FFF5F6;
}

/* ------------------------------------------------------------- checkbox */
.sf-check { display: flex; align-items: flex-start; gap: 12px; }
.sf-check input[type="checkbox"] {
  flex: none;
  width: 24px; height: 24px;
  margin: 2px 0 0;
  accent-color: var(--sf-acc);
  border: var(--sf-bw) solid var(--sf-line);
  cursor: pointer;
}
.sf-check label {
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.sf-fld--check.is-bad .sf-check { outline: 2px solid #A3122C; outline-offset: 6px; }

/* ----------------------------------------------------------- honeypot */
.sf-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- foot */
.sf-contact__challenge { margin-top: 22px; }
.sf-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: var(--sf-bw) solid var(--sf-line);
}
.sf-form__submit { min-height: 48px; }
.sf-form__submit[aria-disabled="true"] { opacity: .6; cursor: progress; }
.sf-contact__note {
  margin: 0;
  font-family: var(--sf-fmono);
  font-size: 12.5px;
  color: var(--sf-ink2);
  max-width: 46ch;
}
.sf-contact__alt {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--sf-ink2);
}

/* ------------------------------------------------------------ success */
.sf-contact__ok {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-acc2);
  box-shadow: var(--sf-sh-lg);
  padding: 30px 32px;
}
.sf-contact__ok:focus-visible { outline: 3px solid var(--sf-acc); outline-offset: 3px; }
.sf-contact__oklabel {
  display: inline-block;
  margin: 0 0 12px;
  font-family: var(--sf-fmono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--sf-acc2);
  color: #04281C;
  border: var(--sf-bw) solid var(--sf-line);
  padding: 3px 10px;
}
.sf-contact__oktitle { margin: 0 0 10px; }
.sf-contact__ok p { max-width: 58ch; }

/* --------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .sf-cta__buttons > .sf-btn { flex: 1 1 100%; }
  .sf-form { padding: 20px 16px; box-shadow: var(--sf-sh); }
  .sf-form__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sf-form__foot { flex-direction: column; align-items: stretch; }
  .sf-form__submit { justify-content: center; width: 100%; }
  .sf-contact__ok { padding: 22px 18px; }
}

/* =========================================================================
   LEGAL — footer policy row, affiliate disclosure, policy documents
   ========================================================================= */
.sf-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  width: 100%;
}
.sf-legal__copy { margin: 0; color: var(--sf-ink2); }

.sf-legal__nav { max-width: 100%; }
.sf-legal__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-legal__list li { display: inline-flex; align-items: center; gap: 10px; }
.sf-legal__list a {
  color: var(--sf-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;          /* keeps the tap target usable at footer sizes */
}
.sf-legal__list a:hover,
.sf-legal__list a:focus-visible { border-bottom-color: var(--sf-line); }
.sf-legal__list li:last-child .sf-legal__sep { display: none; }
.sf-legal__sep { color: var(--sf-ink3-tx); }

/* ------------------------------------------------ affiliate disclosure */
.sf-afd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-yel);
  box-shadow: var(--sf-sh);
  padding: 16px 20px;
  margin-block: 22px;
}
.sf-afd__tag {
  flex: none;
  font-family: var(--sf-fmono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--sf-yel);
  color: var(--sf-ink);
  border: 1px solid var(--sf-line);
  padding: 3px 9px;
  margin-top: 2px;
}
.sf-afd__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sf-ink2); }
.sf-afd__text a { color: var(--sf-ink); text-underline-offset: 3px; }

.sf-afd--compact {
  border-width: 0;
  border-inline-start-width: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-block: 12px;
  gap: 10px;
}
.sf-afd--compact .sf-afd__text { font-size: 13px; }

/* -------------------------------------------------- policy documents */
/* Long legal prose reads better a little narrower and a little looser. */
.sf-legaldoc .sf-article > :where(p, ul, ol) { padding-inline-end: max(0px, calc(100% - 68ch)); }
.sf-legaldoc .sf-article :where(p, li) { line-height: 1.72; }
.sf-legaldoc .sf-article > h2 {
  margin-top: 2.4em;
  padding-top: .7em;
  border-top: var(--sf-bw) solid var(--sf-line);
}
.sf-legaldoc .sf-article > h3 { margin-top: 1.8em; }
.sf-legaldoc .sf-article table { font-size: 14.5px; }
.sf-legaldoc .sf-metaline .wp-block-post-date {
  font-family: var(--sf-fmono);
  font-size: 11.5px;
  border: var(--sf-bw) solid var(--sf-line);
  background: var(--sf-yel);
  padding: 5px 11px;
}

@media (max-width: 720px) {
  .sf-legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sf-afd { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .sf-legaldoc .sf-article table { font-size: 13.5px; }
}

/* =========================================================================
   PARTNER PLACEMENTS
   Restrained on purpose. One accent per placement, never a wall of buttons.
   ========================================================================= */

/* The unmistakable stand-in for a link that does not exist yet. */
.sf-aff-ph {
  display: inline-flex;
  align-items: center;
  font-family: var(--sf-fmono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #8a6100;
  background: repeating-linear-gradient(
    45deg, #FFF8E1, #FFF8E1 6px, #FFF3CC 6px, #FFF3CC 12px
  );
  border: 2px dashed #C79A22;
  padding: 10px 14px;
  min-height: 44px;
  word-break: break-word;
}
.sf-aff-empty {
  font-family: var(--sf-fmono);
  font-size: 12.5px;
  color: var(--sf-ink2);
  border: 2px dashed var(--sf-ink3);
  padding: 14px 16px;
  margin-block: 18px;
}

/* ------------------------------------------------------------ partner CTA */
.sf-pcta {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  padding: 22px 24px;
  margin-block: 26px;
}
.sf-pcta__logo { flex: none; width: 56px; }
.sf-pcta__logo img { display: block; width: 100%; height: auto; }
.sf-pcta__body { flex: 1 1 auto; min-width: 0; }
.sf-pcta__kicker {
  margin: 0 0 6px;
  font-family: var(--sf-fmono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sf-ink3-tx);
}
.sf-pcta__title { margin: 0 0 6px; font-size: 20px; }
.sf-pcta__text { margin: 0; font-size: 15px; color: var(--sf-ink2); max-width: 58ch; }
.sf-pcta__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.sf-pcta__action { flex: none; text-align: end; }
.sf-pcta__note {
  margin: 8px 0 0;
  font-family: var(--sf-fmono);
  font-size: 11px;
  color: var(--sf-ink3-tx);
}

.sf-pcta--inline {
  box-shadow: none;
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-sky);
  padding: 18px 20px;
}
.sf-pcta--inline .sf-pcta__title { font-size: 17px; }

.sf-pcta--final {
  box-shadow: var(--sf-sh-lg);
  border-inline-start-width: 10px;
  border-inline-start-color: var(--sf-acc);
  padding: 28px 30px;
}
.sf-pcta--final .sf-pcta__title { font-size: 24px; }

/* ----------------------------------------------------------- partner card */
.sf-pcard {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  padding: 20px;
  margin-block: 22px;
}
.sf-pcard__label {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--sf-fmono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--sf-ink);
  color: #fff;
  padding: 4px 10px;
}
.sf-pcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sf-pcard__logo { width: 36px; height: auto; flex: none; }
.sf-pcard__name { margin: 0; font-size: 18px; }
.sf-pcard__text { margin: 0 0 12px; font-size: 14.5px; color: var(--sf-ink2); }
.sf-pcard__best { margin: 0 0 10px; font-size: 13.5px; color: var(--sf-ink2); }
.sf-pcard__best span {
  font-family: var(--sf-fmono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-ink3-tx);
  margin-inline-end: 6px;
}
.sf-pcard__price { margin: 0 0 16px; font-family: var(--sf-fmono); font-size: 13px; }
.sf-pcard__btn, .sf-pgrid__btn { width: 100%; justify-content: center; }

/* ------------------------------------------------------ recommended grid */
.sf-pgrid { margin-block: 34px; }
.sf-pgrid__heading { margin: 0 0 8px; }
.sf-pgrid__intro { margin: 0 0 22px; color: var(--sf-ink2); max-width: 62ch; }
.sf-pgrid__list {
  display: grid;
  grid-template-columns: repeat(var(--sf-pcols, 3), minmax(0, 1fr));
  gap: 18px;
}
.sf-pgrid__item {
  display: flex;
  flex-direction: column;
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  padding: 20px;
}
.sf-pgrid__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sf-pgrid__logo { width: 34px; height: auto; flex: none; }
.sf-pgrid__name { margin: 0; font-size: 17px; }
.sf-pgrid__text { margin: 0 0 12px; font-size: 14.5px; color: var(--sf-ink2); }
.sf-pgrid__best { margin: 0 0 10px; font-size: 13.5px; color: var(--sf-ink2); }
.sf-pgrid__best span {
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sf-ink3-tx); margin-inline-end: 6px;
}
.sf-pgrid__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sf-pgrid__item > :last-child { margin-top: auto; }

/* ---------------------------------------------------- comparison table */
.sf-ptable {
  margin-block: 30px;
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  background: var(--sf-card);
  overflow-x: auto;
}
.sf-ptable table { width: 100%; border-collapse: collapse; }
.sf-ptable caption {
  caption-side: bottom;
  padding: 12px 16px;
  font-family: var(--sf-fmono);
  font-size: 11.5px;
  color: var(--sf-ink3-tx);
  text-align: start;
  border-top: 1px solid var(--sf-line);
}
.sf-ptable th, .sf-ptable td {
  border-bottom: 1px solid var(--sf-line);
  padding: 14px 16px;
  vertical-align: top;
  text-align: start;
  font-size: 14.5px;
}
.sf-ptable thead th {
  background: var(--sf-yel);
  font-family: var(--sf-fmono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: var(--sf-bw) solid var(--sf-line);
}
.sf-ptable tbody th {
  font-family: var(--sf-fdisp);
  font-weight: 700;
  white-space: nowrap;
}
.sf-ptable tbody tr:last-child th,
.sf-ptable tbody tr:last-child td { border-bottom: 0; }
.sf-ptable__logo { width: 26px; height: auto; vertical-align: middle; margin-inline-end: 8px; }
.sf-ptable__list { margin: 0; padding-inline-start: 18px; }
.sf-ptable__list li { margin-bottom: 4px; }
.sf-ptable__list--cons { color: var(--sf-ink2); }
.sf-ptable__btn { white-space: nowrap; padding: 10px 18px; }
.sf-ptable__col-action { width: 1%; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .sf-pgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sf-pcta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sf-pcta__action { width: 100%; text-align: start; }
  .sf-pcta__action .sf-btn { width: 100%; justify-content: center; }
  .sf-pgrid__list { grid-template-columns: minmax(0, 1fr); }

  /* The table stops being a table and becomes one card per partner. */
  .sf-ptable { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .sf-ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); }
  .sf-ptable table, .sf-ptable tbody, .sf-ptable tr, .sf-ptable th, .sf-ptable td { display: block; width: auto; }
  .sf-ptable tr {
    background: var(--sf-card);
    border: var(--sf-bw) solid var(--sf-line);
    box-shadow: var(--sf-sh);
    margin-bottom: 16px;
    padding: 4px 0;
  }
  .sf-ptable tbody th { font-size: 18px; white-space: normal; border-bottom: var(--sf-bw) solid var(--sf-line); }
  .sf-ptable td { border-bottom: 1px solid rgba(16,20,24,.12); overflow-wrap: anywhere; }
  .sf-ptable td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sf-fmono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sf-ink3-tx);
    margin-bottom: 5px;
  }
  .sf-ptable__btn { width: 100%; justify-content: center; }
  .sf-ptable caption { border: 0; padding-inline: 0; }
}

/* Wrapper used by the affiliate placement patterns. */
.sf-affsection { margin-block: 40px; }
.sf-affsection > .sf-kicker { margin-bottom: 12px; }

/* =========================================================================
   INTERNAL LINKING
   Reuses the existing .sf-block surface so the home page looks unchanged.
   ========================================================================= */
.sf-shortlist {
  display: grid;
  grid-template-columns: repeat(var(--sf-slcols, 3), minmax(0, 1fr));
  gap: 18px;
  margin-top: var(--wp--preset--spacing--40, 40px);
}
.sf-shortlist .sf-block__head h3 { margin: 0; font-size: 14.5px; }
.sf-shortlist .sf-block__head h3 a { color: inherit; text-decoration: none; }
.sf-shortlist .sf-block__head h3 a:hover { text-decoration: underline; }
.sf-shortlist .sf-block__head p { margin: 0; }
.sf-block__more a { font-family: var(--sf-fmono); font-size: 12px; color: var(--sf-ink2); }

/* ---------------------------------------------------------- footer links */
.sf-sitelinks__heading {
  margin: 0 0 12px;
  font-family: var(--sf-fdisp);
  font-size: 15px;
  font-weight: 800;
}
.sf-sitelinks__list { list-style: none; margin: 0; padding: 0; }
.sf-sitelinks__list li { margin-bottom: 2px; }
.sf-sitelinks__list a {
  display: inline-block;
  padding: 5px 0;          /* keeps footer links a usable tap target */
  color: var(--sf-ink2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sf-sitelinks__list a:hover,
.sf-sitelinks__list a:focus-visible { color: var(--sf-ink); border-bottom-color: var(--sf-line); }

.sf-social__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.sf-social__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--sf-fmono);
  font-size: 11.5px;
  border: var(--sf-bw) solid var(--sf-line);
  background: var(--sf-card);
  padding: 6px 11px;
  color: var(--sf-ink);
  text-decoration: none;
}
.sf-social__link:hover { background: var(--sf-yel); }

/* -------------------------------------------------------- related content */
.sf-related { margin-block: 36px; }
.sf-related__heading { margin: 0 0 8px; font-size: 22px; }
.sf-related__intro { margin: 0 0 18px; color: var(--sf-ink2); max-width: 62ch; }
.sf-related__list { list-style: none; margin: 0; padding: 0; }

.sf-related--list .sf-related__item {
  border-inline-start: var(--sf-bw) solid var(--sf-line);
  padding: 10px 0 10px 16px;
  margin-bottom: 10px;
}
.sf-related--list .sf-related__item:hover { border-inline-start-color: var(--sf-acc); }
.sf-related__link {
  display: inline-block;
  font-family: var(--sf-fdisp);
  font-weight: 700;
  color: var(--sf-ink);
  text-underline-offset: 3px;
}
.sf-related__text { display: block; margin-top: 4px; font-size: 14.5px; color: var(--sf-ink2); }

.sf-related--grid .sf-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sf-related--grid .sf-related__item {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  padding: 16px 18px;
}

.sf-navcta .sf-btn { padding: 9px 18px; font-size: 13px; }

@media (max-width: 980px) {
  .sf-shortlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-related--grid .sf-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sf-shortlist { grid-template-columns: minmax(0, 1fr); }
  .sf-related--grid .sf-related__list { grid-template-columns: minmax(0, 1fr); }
}