/**
 * Homepage pricing: template-parts/home-pricing.php. Matches the sections above it: dark by default, light under
 * html[data-theme="light"]. Scoped to .spr.
 */

.spr {
    --spr-bg: #0a0a0a;
    --spr-text: #f5f5f2;
    --spr-text2: #d3d8e0;
    --spr-muted: #a3aab6;
    --spr-gold: #f5c518;
    --spr-gold-text: #f5c518;
    --spr-green: #34d399;
    --spr-red: #f87171;
    --spr-line: #232c3b;
    --spr-line2: #3d3d3d;
    --spr-card: linear-gradient(180deg, #1a2231 0%, #111827 100%);
    --spr-card-border: rgba(245, 197, 24, 0.35);
    --spr-track: #0b1220;
    --spr-thumb: #1f2937;
    --spr-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    padding: 80px 0 88px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--spr-bg);
    color: var(--spr-text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .spr {
    --spr-bg: #f5f5f5;
    --spr-text: #1a1a1a;
    --spr-text2: #3f444c;
    --spr-muted: #5f646d;
    --spr-gold-text: #8a6606;
    --spr-green: #047857;
    --spr-red: #b91c1c;
    --spr-line: #e2e5ea;
    --spr-line2: #cfd3d9;
    --spr-card: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    --spr-card-border: rgba(180, 140, 10, 0.45);
    --spr-track: #eef0f3;
    --spr-thumb: #ffffff;
    --spr-shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
    border-top-color: rgba(0, 0, 0, 0.06);
}
.spr *, .spr *::before, .spr *::after { box-sizing: border-box; }
.spr :where(h2, h3, p, ul, li) { margin: 0; padding: 0; }
.spr ul { list-style: none; }
.spr :where(p, span, div, h2, h3, b, li) { color: inherit; font-size: inherit; }
.spr [hidden] { display: none !important; }
.spr :focus-visible { outline: 3px solid var(--spr-gold); outline-offset: 3px; border-radius: 6px; }
.spr .spr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spr-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; }

.spr .spr-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spr-gold-text); }
.spr .spr-h2 { margin-top: 14px; font-size: 64px; line-height: 1.02; font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; color: var(--spr-text); }
.spr .spr-h2 em { font-style: italic; color: var(--spr-gold-text); }
.spr .spr-sub { margin-top: 14px; font-size: 19px; color: var(--spr-text2); }
.spr .spr-banner { margin-top: 28px; padding: 14px 22px; border-radius: 12px; border: 1px solid rgba(245, 197, 24, 0.3); background: linear-gradient(135deg, rgba(245, 197, 24, 0.15), rgba(245, 197, 24, 0.05)); font-size: 15px; font-weight: 700; color: var(--spr-gold-text); }
html[data-theme="light"] .spr .spr-banner { border-color: #e6a817; background: #fff8e1; color: #7a5000; }

/* One membership card: the offer on the left, what it includes on the right */
.spr-card { display: grid; grid-template-columns: 480px 1fr; margin-top: 44px; border-radius: 24px; border: 1px solid var(--spr-card-border); background: var(--spr-card); box-shadow: var(--spr-shadow); }
.spr-banner + .spr-card { margin-top: 16px; }
.spr-offer { padding: 36px 40px 34px; }
.spr .spr-plan b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--spr-text); }
.spr .spr-plan span { display: block; margin-top: 4px; font-size: 15px; color: var(--spr-text2); }

.spr-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 12px; border: 1px solid var(--spr-line); background: var(--spr-track); }
.spr .spr-toggle button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--spr-text2); font: 600 15px/1 'DM Sans', system-ui, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; }
.spr .spr-toggle button:hover { color: var(--spr-text); background: transparent; }
.spr .spr-toggle button[aria-pressed="true"] { background: var(--spr-thumb); color: var(--spr-text); box-shadow: 0 0 0 1px var(--spr-line2); }
.spr .spr-save { padding: 3px 8px; border-radius: 999px; background: rgba(52, 211, 153, 0.16); color: var(--spr-green); font-size: 12px; font-weight: 700; line-height: 1.2; }
.spr .spr-only { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--spr-line); font-size: 16px; font-weight: 700; color: var(--spr-text); }

/* The price and the button read as one group */
.spr .spr-was { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; font-size: 16px; color: var(--spr-muted); }
.spr .spr-was s { text-decoration-thickness: 1.5px; }
.spr .spr-promo { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #e53e3e, #c53030); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.spr .spr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 22px; }
.spr .spr-was + .spr-price { margin-top: 4px; }
.spr .spr-price b { font-family: 'Instrument Serif', Georgia, serif; font-size: 72px; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; color: var(--spr-text); }
.spr .spr-price span { font-size: 19px; color: var(--spr-text2); }
.spr .spr-terms { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--spr-text2); }
.spr .spr-terms b { font-weight: 600; color: var(--spr-text); }
.spr a.spr-cta, .spr a.spr-cta:hover, .spr a.spr-cta:visited { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 20px; padding: 0 16px; border-radius: 12px; background: #f5c518; color: #111; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; }
.spr a.spr-cta:hover { background: #ffd43b; }

.spr-guar { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; }
.spr-guar svg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--spr-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spr .spr-guar b { display: block; font-size: 16px; font-weight: 700; color: var(--spr-text); }
.spr .spr-guar p { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--spr-text2); }
.spr .spr-renew { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--spr-line); font-size: 14px; line-height: 1.5; color: var(--spr-muted); }

.spr-incl { display: flex; flex-direction: column; justify-content: center; padding: 36px 48px; border-left: 1px solid var(--spr-line); }
.spr .spr-incl h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spr-gold-text); }
.spr-incl ul { display: grid; gap: 20px; margin-top: 22px; }
.spr .spr-incl li { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; line-height: 1.4; color: var(--spr-text); }
.spr-incl svg, .spr-fit svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spr-incl svg { stroke: var(--spr-gold); }
html[data-theme="light"] .spr-incl svg { stroke: #b48c0a; }

/* Is it for you: two quiet vertical lists below the card */
.spr-fits { display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; margin-top: 40px; }
.spr-fit { padding-right: 40px; }
.spr-fit + .spr-fit { padding: 0 0 0 40px; border-left: 1px solid var(--spr-line); }
.spr .spr-fit h3 { font-size: 16px; font-weight: 700; color: var(--spr-text); }
.spr-fit ul { display: grid; gap: 10px; margin-top: 14px; }
.spr .spr-fit li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--spr-text2); }
.spr-fit svg { width: 18px; height: 18px; }
.spr-fit-yes svg { stroke: var(--spr-green); }
.spr-fit-no svg { stroke: var(--spr-red); }

/* Tablets */
@media (max-width: 1279px) {
    .spr .spr-h2 { font-size: 54px; }
    .spr-card { grid-template-columns: 440px 1fr; }
    .spr-incl { padding: 32px 36px; }
    .spr .spr-incl li { font-size: 17px; }
}
/* Smaller tablets: the list moves under the offer, inside the same card */
@media (max-width: 960px) {
    .spr-card { grid-template-columns: 1fr; max-width: 620px; }
    .spr-incl { padding: 0 40px 34px; border-left: 0; }
    .spr-incl::before { content: ""; display: block; margin-bottom: 26px; border-top: 1px solid var(--spr-line); }
    .spr-incl ul { gap: 14px; margin-top: 16px; }
}
/* Phones: plan, charge, button and guarantee together; the list follows; the fit lists stack */
@media (max-width: 760px) {
    .spr { padding: 72px 0 80px; font-size: 16px; }
    .spr-wrap { padding: 0 18px; }
    .spr .spr-eyebrow { font-size: 13px; }
    .spr .spr-h2 { margin-top: 12px; font-size: 40px; line-height: 1.05; }
    .spr .spr-sub { margin-top: 12px; font-size: 16px; }
    .spr .spr-banner { margin-top: 20px; padding: 12px 16px; font-size: 14px; }
    .spr-card { margin-top: 24px; border-radius: 18px; box-shadow: none; }
    .spr-banner + .spr-card { margin-top: 12px; }
    .spr-offer { padding: 20px; }
    .spr .spr-plan b { font-size: 19px; }
    .spr .spr-plan span { margin-top: 3px; font-size: 14px; }
    .spr-toggle { margin-top: 16px; }
    .spr .spr-toggle button { gap: 6px; }
    .spr .spr-save { padding: 3px 7px; font-size: 11px; }
    .spr .spr-price { margin-top: 18px; }
    .spr .spr-price b { font-size: 56px; }
    .spr .spr-price span { font-size: 16px; }
    .spr .spr-terms { margin-top: 8px; font-size: 14px; }
    .spr a.spr-cta { min-height: 54px; margin-top: 16px; font-size: 17px; }
    .spr-guar { gap: 12px; margin-top: 16px; }
    .spr-guar svg { width: 22px; height: 22px; }
    .spr .spr-guar b { font-size: 15px; }
    .spr .spr-guar p { margin-top: 2px; font-size: 14px; }
    .spr .spr-renew { margin-top: 12px; padding-top: 0; border-top: 0; font-size: 13px; }
    .spr-incl { padding: 0 20px 20px; }
    .spr-incl::before { margin-bottom: 18px; }
    .spr .spr-incl h3 { font-size: 12px; }
    .spr-incl ul { gap: 12px; margin-top: 14px; }
    .spr .spr-incl li { gap: 10px; font-size: 16px; line-height: 1.45; }
    .spr-incl svg { width: 18px; height: 18px; margin-top: 3px; }
    .spr-fits { grid-template-columns: 1fr; margin-top: 28px; }
    .spr-fit, .spr-fit + .spr-fit { padding: 0; border-left: 0; }
    .spr-fit + .spr-fit { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--spr-line); }
}