/* ============================================================
   Soofos Plus page — per-page styles
   Enqueued only on the /plus/ page via soofos_enqueue_page_styles().
   Targets the native Gutenberg block DOM produced by the
   inc/public-page-migrations/plus.php definition (core group / columns /
   heading / paragraph / list / image / table / details / buttons), so
   selectors are scoped to .sf-plus-page and override core block-library
   layout (is-layout-flex columns, button/link wrappers, figure margins).
   All colours/spacing reference CSS custom properties from tokens.css
   (rgba() overlays/shadows follow the existing page-CSS convention).
   ============================================================ */

.sf-plus-page,
.sf-plus-page * { box-sizing: border-box; }

.sf-plus-page {
    font-family: var(--font);
    color: var(--body);
}

/* Neutralise core default block margins; each block below owns its spacing.
   :where() keeps this at zero extra specificity so the rules further down win. */
.sf-plus-page :where(p, h1, h2, h3, ul, li, figure, summary) { margin: 0; }
.sf-plus-page :where(.wp-block-image) { margin: 0; }
.sf-plus-page :where(.wp-block-columns) { margin: 0; }
.sf-plus-page > .wp-block-group__inner-container > * { margin-block-start: 0; }

/* Shared eyebrow */
.sf-plus-eyebrow {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--deep-blue);
}

/* ---------- Hero ---------- */
.sf-plus-page .sf-plus-hero {
    background: var(--ink);
    padding: 64px 64px 150px;
    text-align: center;
}

.sf-plus-hero > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sf-plus-hero__logo img {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 0 20px;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.sf-plus-hero__heading {
    font-size: 48px;
    font-weight: 900;
    color: var(--white);
    line-height: 1.1;
    letter-spacing: -1px;
    max-width: 660px;
}

.sf-plus-hero__sub {
    font-size: 17px;
    color: var(--faint);
    line-height: 1.55;
    margin: 16px 0 0;
    max-width: 540px;
}

.sf-plus-hero__trust { margin: 22px 0 0; }

.sf-plus-hero__trust > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sf-plus-hero__trust p {
    font-size: 13px;
    font-weight: 800;
    color: var(--blue-border);
}

/* ---------- Pricing (pulled over hero edge) ---------- */
.sf-plus-page .sf-plus-pricing {
    max-width: 1240px;
    margin: -110px auto 0;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.sf-plus-page .sf-plus-pricing__grid.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.sf-plus-page .sf-plus-pricing__grid .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* Shared card base */
.sf-plus-page .sf-plus-card {
    border-radius: 18px;
    padding: 26px 28px;
    height: 100%;
}

.sf-plus-card > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.sf-plus-card--monthly {
    background: var(--white);
    border: 1px solid var(--card-border);
    box-shadow: 0 14px 40px rgba(33, 52, 75, .12);
}

.sf-plus-card--yearly {
    background: var(--white);
    border: 2.5px solid var(--blue);
    box-shadow: 0 18px 50px rgba(99, 156, 224, .22);
    position: relative;
}

.sf-plus-card--lifetime {
    background: linear-gradient(160deg, var(--ink-2), var(--ink));
    border: 1px solid var(--on-navy-line);
    box-shadow: 0 14px 40px rgba(33, 52, 75, .35);
    color: var(--white);
}

.sf-plus-card__popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yellow);
    color: var(--yellow-ink);
    font-size: 11px;
    font-weight: 900;
    border-radius: var(--r-pill);
    padding: 5px 14px;
    white-space: nowrap;
}

.sf-plus-card__label { font-size: 13px; font-weight: 800; }
.sf-plus-card--monthly .sf-plus-card__label { color: var(--muted-2); }
.sf-plus-card--yearly  .sf-plus-card__label { color: var(--deep-blue); }
.sf-plus-card--lifetime .sf-plus-card__label { color: var(--yellow); }

.sf-plus-card__price { font-size: 32px; font-weight: 900; color: var(--ink); }
.sf-plus-card--lifetime .sf-plus-card__price { color: var(--white); }

.sf-plus-card__price-unit { font-size: 14px; font-weight: 700; color: var(--muted-2); }
.sf-plus-card--lifetime .sf-plus-card__price-unit { color: var(--faint); }

.sf-plus-card__desc { font-size: 13px; line-height: 1.55; color: var(--muted); }
.sf-plus-card--lifetime .sf-plus-card__desc { color: var(--blue-border); }

.sf-plus-card__features {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 10px 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
}
.sf-plus-card--monthly .sf-plus-card__features,
.sf-plus-card--yearly  .sf-plus-card__features { color: var(--body); }
.sf-plus-card--lifetime .sf-plus-card__features { color: var(--blue-border); }

.sf-plus-card__features li { display: flex; gap: 9px; align-items: flex-start; }

.sf-plus-card__check { color: var(--green); font-weight: 900; flex-shrink: 0; }
.sf-plus-card__check--pro { color: var(--blue); }
.sf-plus-card--lifetime .sf-plus-card__check--add { color: var(--faint); }

/* CTA buttons — style the anchor, push wrapper to card bottom */
.sf-plus-card .wp-block-buttons { margin-top: auto; }
.sf-plus-card .wp-block-button { width: 100%; }

.sf-plus-page .sf-plus-card__cta .wp-block-button__link {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--r-btn);
    font: 800 14px var(--font);
    text-align: center;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.sf-plus-page .sf-plus-card__cta .wp-block-button__link:hover { transform: translateY(-2px); }

.sf-plus-page .sf-plus-card__cta--ghost .wp-block-button__link {
    border: 2px solid var(--card-border);
    background: var(--white);
    color: var(--ink);
}
.sf-plus-page .sf-plus-card__cta--ghost .wp-block-button__link:hover { border-color: var(--blue); }

.sf-plus-page .sf-plus-card__cta--primary .wp-block-button__link {
    background: var(--blue);
    color: var(--white);
    font-weight: 900;
    font-size: 15px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(99, 156, 224, .35);
}
.sf-plus-page .sf-plus-card__cta--primary .wp-block-button__link:hover {
    background: var(--blue-hover);
    box-shadow: 0 7px 18px rgba(99, 156, 224, .42);
}

.sf-plus-page .sf-plus-card__cta--buy .wp-block-button__link {
    background: var(--red);
    color: var(--white);
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(255, 72, 89, .32);
}
.sf-plus-page .sf-plus-card__cta--buy .wp-block-button__link:hover {
    background: var(--red-hover);
    box-shadow: 0 7px 18px rgba(255, 72, 89, .40);
}

.sf-plus-pricing__guarantee {
    text-align: center;
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 700;
    margin: 14px 0 0;
}

/* ---------- What you get (stats) ---------- */
.sf-plus-page .sf-plus-stats {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 8px;
}

.sf-plus-stats__head { text-align: center; }
.sf-plus-stats__head > .wp-block-group__inner-container { max-width: 620px; margin: 0 auto; }

.sf-plus-stats__heading {
    font-size: 30px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.5px;
    margin: 8px 0 0;
}

.sf-plus-page .sf-plus-stats__grid.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 28px 0 0;
}
.sf-plus-page .sf-plus-stats__grid .wp-block-column { display: flex; }

.sf-plus-stat {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px 26px;
    width: 100%;
    text-align: center;
}

.sf-plus-stat__num { font-size: 34px; font-weight: 900; color: var(--ink); }
.sf-plus-stat__label { font-size: 13px; font-weight: 800; color: var(--deep-blue); margin: 2px 0 0; }
.sf-plus-stat__desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 0; }

/* ---------- Value blocks (image + copy) ---------- */
.sf-plus-page .sf-plus-value {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 8px;
}

.sf-plus-value > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sf-plus-page .sf-plus-value__row.wp-block-columns {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-lg);
    overflow: hidden;
    align-items: stretch;
}

.sf-plus-page .sf-plus-value__row--reverse.wp-block-columns {
    grid-template-columns: 1fr 1.05fr;
}

.sf-plus-page .sf-plus-value__row .wp-block-column { display: flex; }

.sf-plus-value__img {
    width: 100%;
    height: 100%;
}
.sf-plus-value__img img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}
.sf-plus-value__img--contain img {
    object-fit: contain;
    background: var(--page);
    padding: 18px;
}

.sf-plus-value__body { width: 100%; padding: 38px 42px; }

.sf-plus-value__title {
    font-size: 24px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.25;
    margin: 8px 0 0;
}

.sf-plus-value__text {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
    margin: 10px 0 0;
}

.sf-plus-value__link { margin: 14px 0 0; font-size: 13.5px; font-weight: 800; }
.sf-plus-value__link a { color: var(--deep-blue); }
.sf-plus-value__link a:hover { color: var(--blue-hover); }

.sf-plus-value__facts { margin: 14px 0 0; }
.sf-plus-value__facts > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.sf-plus-value__facts p { font-size: 12.5px; font-weight: 800; color: var(--ink); }

/* ---------- What's included (comparison table) ---------- */
.sf-plus-page .sf-plus-table-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 40px 8px;
}

.sf-plus-table-section__heading {
    font-size: 24px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 16px;
    text-align: center;
}

.sf-plus-page .sf-plus-table.wp-block-table {
    max-width: 860px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    overflow: hidden;
    overflow-x: auto;
}

.sf-plus-table table { width: 100%; border-collapse: collapse; min-width: 520px; }

.sf-plus-table thead tr { background: var(--strip); }

.sf-plus-table thead th {
    padding: 14px 26px;
    font-size: 11.5px;
    font-weight: 900;
    color: var(--muted-2);
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    border: none;
}
.sf-plus-table thead th:first-child { text-align: left; }
.sf-plus-table thead th.col-plus { color: var(--deep-blue); }

.sf-plus-table tbody tr { border-bottom: 1px solid var(--strip); }
.sf-plus-table tbody tr:last-child { border-bottom: none; }

.sf-plus-table tbody td {
    padding: 13px 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
    text-align: center;
    vertical-align: middle;
    border: none;
}
.sf-plus-table tbody td:first-child { text-align: left; }

.sf-plus-table .check { color: var(--green); font-weight: 900; }
.sf-plus-table .dash { color: var(--faint); }
.sf-plus-table .highlight { color: var(--deep-blue); font-weight: 900; }
.sf-plus-table .add { color: var(--muted-2); font-weight: 700; }
.sf-plus-table .strong { font-weight: 900; }

.sf-plus-table-note {
    text-align: center;
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 700;
    margin: 12px auto 0;
    max-width: 640px;
    line-height: 1.55;
}

/* ---------- Lifetime deep dive ---------- */
.sf-plus-page .sf-plus-lifetime {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 40px;
}

.sf-plus-lifetime__card {
    background: var(--ink);
    border-radius: 24px;
    padding: 52px 56px;
    color: var(--white);
    overflow: hidden;
}

.sf-plus-page .sf-plus-lifetime__grid.wp-block-columns {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

.sf-plus-lifetime__badge {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(251, 214, 7, .15);
    color: var(--yellow);
    border-radius: var(--r-pill);
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
}

.sf-plus-lifetime__heading {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 14px 0 0;
    color: var(--white);
}

.sf-plus-lifetime__body {
    font-size: 14.5px;
    color: var(--faint);
    line-height: 1.65;
    margin: 12px 0 0;
}
.sf-plus-lifetime__body b { color: var(--white); }

.sf-plus-lifetime__checks {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue-border);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sf-plus-lifetime__checks li { display: flex; gap: 10px; align-items: flex-start; }
.sf-plus-lifetime__check { color: var(--green); font-weight: 900; flex-shrink: 0; }

.sf-plus-lifetime__cta-row { margin: 24px 0 0; }
.sf-plus-lifetime__cta-row > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sf-plus-page .sf-plus-lifetime__cta .wp-block-button__link {
    display: inline-block;
    padding: 15px 32px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--red);
    color: var(--white);
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 72, 89, .32);
    transition: transform .15s, background .15s, box-shadow .15s;
}
.sf-plus-page .sf-plus-lifetime__cta .wp-block-button__link:hover {
    background: var(--red-hover);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(255, 72, 89, .40);
}

.sf-plus-lifetime__note { font-size: 12.5px; color: var(--faint); font-weight: 700; }

.sf-plus-page .sf-plus-lifetime__tiles > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sf-plus-lifetime__tile {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 16px 18px;
}
.sf-plus-lifetime__tile-num { font-size: 20px; font-weight: 900; color: var(--white); }
.sf-plus-lifetime__tile-label { font-size: 12px; font-weight: 800; color: var(--faint); margin: 2px 0 0; }

.sf-plus-lifetime__tiles-note {
    font-size: 11.5px;
    color: var(--muted-2);
    font-weight: 700;
    margin: 10px 0 0;
    text-align: center;
}

/* ---------- Testimonials ---------- */
.sf-plus-page .sf-plus-social {
    max-width: 1000px;
    margin: 56px auto 0;
    padding: 0 40px;
}

.sf-plus-page .sf-plus-testimonials.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.sf-plus-page .sf-plus-testimonials .wp-block-column { display: flex; }

.sf-plus-testimonial {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 22px 24px;
    width: 100%;
}

.sf-plus-testimonial__stars { font-size: 13px; color: var(--yellow); font-weight: 800; margin: 0 0 10px; }
.sf-plus-testimonial__quote { font-size: 14px; color: var(--body); line-height: 1.6; }

.sf-plus-testimonial__author { margin: 14px 0 0; }
.sf-plus-testimonial__author > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sf-plus-testimonial__avatar { flex-shrink: 0; }
.sf-plus-testimonial__avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.sf-plus-testimonial__name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sf-plus-testimonial__role { font-weight: 700; color: var(--muted-2); }

.sf-plus-testimonials__rating {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.sf-plus-testimonials__rating b { color: var(--ink); }
.sf-plus-testimonials__rating a { font-weight: 800; }

/* ---------- FAQ ---------- */
.sf-plus-page .sf-plus-faq {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 40px 8px;
}

.sf-plus-faq__heading {
    font-size: 24px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 16px;
    text-align: center;
}

.sf-plus-page .sf-plus-faq__item {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: 16px 22px;
    margin: 0 0 10px;
}
.sf-plus-page .sf-plus-faq__item[open] { border-width: 1.5px; }
.sf-plus-page .sf-plus-faq__item:last-child { margin-bottom: 0; }

.sf-plus-faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.sf-plus-faq__item[open] summary { font-weight: 900; }
.sf-plus-faq__item summary::-webkit-details-marker { display: none; }
.sf-plus-faq__item summary::after {
    content: '▾';
    color: var(--muted-2);
    font-weight: 800;
    flex-shrink: 0;
    transition: transform .2s;
}
.sf-plus-faq__item[open] summary::after { content: '▴'; }

.sf-plus-faq__answer {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 8px 0 0;
}

/* ---------- Final CTA band ---------- */
.sf-plus-page .sf-plus-cta-band {
    background: var(--ink);
    padding: 52px 64px;
    text-align: center;
    margin: 56px 0 0;
}

.sf-plus-cta-band__heading { font-size: 28px; font-weight: 900; color: var(--white); margin: 0 0 8px; }
.sf-plus-cta-band__sub { font-size: 14px; color: var(--faint); margin: 0 0 20px; }

.sf-plus-cta-band .wp-block-buttons { justify-content: center; }

.sf-plus-page .sf-plus-cta-band__btn .wp-block-button__link {
    display: inline-block;
    padding: 16px 40px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--blue);
    color: var(--white);
    font: 900 16px var(--font);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(99, 156, 224, .40);
    transition: transform .15s, background .15s, box-shadow .15s;
}
.sf-plus-page .sf-plus-cta-band__btn .wp-block-button__link:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 156, 224, .48);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sf-plus-page .sf-plus-hero { padding: 44px 24px 130px; }
    .sf-plus-hero__heading { font-size: 34px; }
    .sf-plus-hero__trust > .wp-block-group__inner-container { gap: 14px 20px; }

    .sf-plus-page .sf-plus-pricing { padding: 0 16px; margin-top: -90px; }
    .sf-plus-page .sf-plus-pricing__grid.wp-block-columns { grid-template-columns: 1fr; }

    .sf-plus-page .sf-plus-stats,
    .sf-plus-page .sf-plus-value,
    .sf-plus-page .sf-plus-table-section,
    .sf-plus-page .sf-plus-faq { padding-left: 16px; padding-right: 16px; }

    .sf-plus-page .sf-plus-stats__grid.wp-block-columns { grid-template-columns: 1fr; }

    .sf-plus-page .sf-plus-value__row.wp-block-columns,
    .sf-plus-page .sf-plus-value__row--reverse.wp-block-columns { grid-template-columns: 1fr; }
    /* keep the image above the copy on the reversed row when stacked */
    .sf-plus-page .sf-plus-value__row--reverse .wp-block-column:first-child { order: 2; }
    .sf-plus-page .sf-plus-value__row--reverse .wp-block-column:last-child { order: 1; }
    .sf-plus-value__img img { min-height: 220px; }
    .sf-plus-value__body { padding: 28px 26px; }

    .sf-plus-page .sf-plus-lifetime { padding: 0 16px; }
    .sf-plus-lifetime__card { padding: 34px 26px; }
    .sf-plus-page .sf-plus-lifetime__grid.wp-block-columns { grid-template-columns: 1fr; gap: 28px; }

    .sf-plus-page .sf-plus-social { padding: 0 16px; }
    .sf-plus-page .sf-plus-testimonials.wp-block-columns { grid-template-columns: 1fr; }

    .sf-plus-page .sf-plus-cta-band { padding: 40px 24px; }
}

/* Responsive (2026-07-28 audit, TASK-446): the comparison table's natural
   width (~520px) overflows phones with no scroll affordance — let the table
   itself scroll inside the section. */
@media (max-width: 640px) {
    .sf-plus-page .sf-plus-table.wp-block-table,
    .sf-plus-page .sf-plus-table-section table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}