/* Round 7 (2026-10-22): page templates for pricing, renewal, contact and installation guides. Loaded last. */

/* ---------- Page hero ---------- */
.page5-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--b-line); background: radial-gradient(60% 90% at 100% 0%, rgba(220, 38, 38, 0.16), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(127, 29, 29, 0.18), transparent 60%); }
.page5-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .page5-hero.has-aside .page5-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.page5-crumbs { display: flex; gap: 0.6rem; font-size: 0.875rem; color: var(--b-muted); margin-bottom: 1.5rem; }
.page5-crumbs a { color: var(--b-muted); }
.page5-crumbs a:hover { color: #fff; }
.page5-hero h1 { margin: 0.75rem 0 0; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 780; color: #fff; max-width: 15em; }
.page5-hero h1 em { font-style: normal; background: linear-gradient(90deg, #f87171, #dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page5-lead { margin: 1.25rem 0 0; max-width: 38rem; color: var(--b-soft); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.65; }
.page5-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.page5-actions > * { min-height: 52px; }
.page5-chips { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.page5-chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--b-line-strong); background: rgba(255, 255, 255, 0.03); font-size: 0.92rem; color: #e4e4e7; }
.page5-chips svg { width: 1rem; height: 1rem; color: var(--b-crimson-bright); }

/* ---------- Sections ---------- */
.page5-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.page5-section-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.page5-h2 { margin: 0.5rem 0 0; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 750; color: #fff; }
.page5-sub { margin: 0.85rem 0 0; color: var(--b-soft); line-height: 1.65; }
.page5-note { margin: 1rem 0 0; font-size: 0.92rem; color: var(--b-muted); }
.page5-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.page5-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 900px) { .page5-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page5-steps li { position: relative; padding: 1.6rem; border-radius: 1.25rem; border: 1px solid var(--b-line); background: var(--b-grad-panel); }
.page5-step-num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; background: var(--b-grad-crimson); color: #fff; font-weight: 800; box-shadow: 0 10px 24px -12px rgba(220, 38, 38, 0.9); }
.page5-steps h3 { margin: 1rem 0 0.4rem; font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.page5-steps p { margin: 0; color: var(--b-soft); line-height: 1.65; font-size: 0.98rem; }
.page5-steps a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.page5-card { padding: 1.6rem; border-radius: 1.4rem; border: 1px solid var(--b-line-strong); background: rgba(12, 12, 16, 0.8); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
.page5-card-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; color: #fff; }
.page5-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.page5-ticks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--b-soft); line-height: 1.55; font-size: 0.98rem; }
.page5-ticks li strong { color: #fff; }
.page5-ticks svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; color: #4ade80; }
.page5-ticks li.is-warn svg { color: var(--b-crimson-bright); }

/* ---------- Price matrix ---------- */
.page5-table-wrap { overflow-x: auto; border: 1px solid var(--b-line); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.015); }
.page5-matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
.page5-matrix th, .page5-matrix td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--b-line); vertical-align: top; }
.page5-matrix thead th { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-muted); font-weight: 800; background: rgba(255, 255, 255, 0.02); }
.page5-matrix thead th small { display: block; margin-top: 0.2rem; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; color: #4ade80; font-weight: 700; }
.page5-matrix tbody th { color: #fff; font-weight: 700; white-space: nowrap; }
.page5-matrix tbody tr:last-child > * { border-bottom: 0; }
.page5-matrix td a { display: grid; gap: 0.15rem; color: inherit; }
.page5-matrix td strong { font-size: 1.25rem; color: #fff; letter-spacing: -0.02em; }
.page5-matrix td small { font-size: 0.85rem; color: var(--b-muted); }
.page5-matrix td small.page5-up { color: #fca5a5; }
.page5-matrix td.is-best { background: rgba(220, 38, 38, 0.08); }
.page5-matrix td a:hover strong { color: var(--b-crimson-bright); }
.page5-formats td { color: var(--b-soft); line-height: 1.55; }

/* ---------- Every plan includes ---------- */
.plan-includes { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.4rem; border: 1px solid var(--b-line); background: var(--b-grad-panel); }
.plan-includes-head h3 { margin: 0.4rem 0 1.25rem; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); color: #fff; letter-spacing: -0.025em; }
.plan-includes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.plan-includes li { display: flex; gap: 0.55rem; align-items: flex-start; color: #e4e4e7; font-size: 0.98rem; }
.plan-includes svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: #4ade80; }
.price-card-v3-features { margin-bottom: 0.25rem; }

/* ---------- Contact ---------- */
.contact5-channels { display: grid; gap: 1rem; }
.contact5-channel { padding: 1.5rem; border-radius: 1.3rem; border: 1px solid var(--b-line-strong); background: rgba(12, 12, 16, 0.8); }
.contact5-channel.is-primary { border-color: rgba(74, 222, 128, 0.35); background: linear-gradient(160deg, rgba(22, 163, 74, 0.14), rgba(12, 12, 16, 0.85) 60%); }
.contact5-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; background: rgba(255, 255, 255, 0.06); color: #fff; }
.contact5-channel.is-primary .contact5-icon { background: #16a34a; }
.contact5-icon svg { width: 1.25rem; height: 1.25rem; }
.contact5-label { margin: 1rem 0 0.2rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--b-muted); }
.contact5-value { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: 750; color: #fff; letter-spacing: -0.02em; word-break: break-word; }
.contact5-value a { color: #fff; }
.contact5-channel > p:not(.contact5-label):not(.contact5-value) { margin: 0 0 1.1rem; color: var(--b-soft); line-height: 1.55; font-size: 0.96rem; }
.contact5-channel .button-primary, .contact5-channel .button-secondary { min-height: 48px; width: 100%; justify-content: center; }
.contact5-routes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.contact5-route { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem; border-radius: 1.2rem; border: 1px solid var(--b-line); background: var(--b-grad-panel); color: #fff; transition: border-color 0.18s, transform 0.18s; }
.contact5-route:hover { border-color: rgba(248, 113, 113, 0.45); transform: translateY(-2px); }
.contact5-route-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; background: rgba(220, 38, 38, 0.15); color: var(--b-crimson-bright); margin-bottom: 0.35rem; }
.contact5-route-icon svg { width: 1.2rem; height: 1.2rem; }
.contact5-route strong { font-size: 1.12rem; letter-spacing: -0.015em; }
.contact5-route > span:not(.contact5-route-icon) { color: var(--b-soft); line-height: 1.55; font-size: 0.96rem; }
.contact5-route em { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem; font-style: normal; font-weight: 700; font-size: 0.92rem; color: var(--b-crimson-bright); }
.contact5-route em svg { width: 1rem; height: 1rem; }
.contact5-ready { display: grid; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.5rem; border: 1px solid var(--b-line); background: var(--b-grad-panel); }
@media (min-width: 900px) { .contact5-ready { grid-template-columns: 1fr 1.1fr; align-items: center; } }

/* ---------- Installation guides ---------- */
.guide5-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.guide5-chips a { padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--b-line-strong); color: #e4e4e7; font-size: 0.9rem; font-weight: 600; }
.guide5-chips a:hover { border-color: rgba(248, 113, 113, 0.5); color: #fff; }
.guide5-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.guide5-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--b-line); background: #111116; color: #fff; scroll-margin-top: 7rem; transition: border-color 0.2s, transform 0.2s; }
.guide5-card:hover { border-color: rgba(248, 113, 113, 0.45); transform: translateY(-3px); }
.guide5-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #18181d; }
.guide5-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.guide5-card:hover .guide5-cover img { transform: scale(1.05); }
.guide5-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.2rem 1.25rem 1.3rem; flex: 1; }
.guide5-body strong { font-size: 1.15rem; letter-spacing: -0.02em; }
.guide5-body > span { color: var(--b-soft); line-height: 1.55; font-size: 0.96rem; }
.guide5-body small { margin-top: auto; padding-top: 0.6rem; display: flex; justify-content: space-between; align-items: center; color: var(--b-muted); font-size: 0.85rem; }
.guide5-body small em { display: inline-flex; align-items: center; gap: 0.3rem; font-style: normal; font-weight: 700; color: var(--b-crimson-bright); }
.guide5-body small svg { width: 0.95rem; height: 0.95rem; }

/* ---------- Link row ---------- */
.page5-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 1.25rem 1.4rem; border-radius: 1.1rem; border: 1px solid var(--b-line); }
.page5-linkrow p { margin: 0; font-weight: 700; color: #fff; }
.page5-linkrow ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page5-linkrow a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--b-line); color: #e4e4e7; font-size: 0.92rem; }
.page5-linkrow a:hover { color: #fff; border-color: rgba(248, 113, 113, 0.45); }
.page5-linkrow svg { width: 0.9rem; height: 0.9rem; }

/* Pricing page: the standalone table follows the hero directly */
.page-template-default .pricing-stage-standalone { padding-top: clamp(1.5rem, 3vw, 2.5rem); }


/* ---------- Typography floor (round 7 audit): nothing a buyer reads drops below 14px, labels never below 12px ---------- */
.hero-v3-eyebrow, .hero-v3-card-kicker, .price-card-v3-ribbon, .plan-label, .hero-v3-badge, .connection-tabs span, .pricing-v3-tabs button span { font-size: 0.75rem !important; }
.hero-v3-micro, .hero-v3-card-note, .hero-v3-rise, .sports-note, .pricing-v3-help, .pricing-promo p, .price-card-v3-rise, .price-card-v3-guarantee, .price-card-v3-trust, .price-card-ask, .pricing-guidance p, .pricing-guidance .text-link, .footer-language a, .hero-v3-card dt, .hero-v3-card small, .price-card-v3-math span { font-size: 0.875rem !important; line-height: 1.5 !important; }
.pricing-disclosure, .price-card-v3-save, .plan-price-v2 small, .news-card time, .blog-index-card time { font-size: 0.8125rem !important; }
.promo-countdown strong { font-size: 0.875rem; }
.footer-copyright, .footer-bottom-v3 p { color: #a1a1aa !important; }
.sport-tile-live { background: #15803d !important; color: #fff !important; }
@media (max-width: 640px) {
  .hero-v3-lead, .page5-lead, .cta5-lead { font-size: 1.0625rem !important; }
  .price-card-v3-features li, .plan-includes li { font-size: 1rem !important; }
}

.access-ribbon p, .price-card-v3-access p { font-size: 0.875rem !important; }
.pricing-v3-assurances small, .metric-strip small, .footer-trust-row small { font-size: 0.8125rem !important; }
.single article ~ * .text-xs, .single .text-xs, .single .text-\[11px\], .single .text-\[12px\] { font-size: 0.8125rem !important; }

/* Mobile polish for the receipt and footer help card */
.cta5-badge, .cta5-receipt dd, .footer5-help-actions > * { white-space: nowrap; }
.cta5-receipt-top { flex-wrap: wrap; }
.cta5-countdown { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }
@media (max-width: 420px) { .cta5-receipt { padding: 1.25rem; } .cta5-price { font-size: 3.4rem; } .footer5-help-actions { grid-template-columns: 1fr; } .cta5-receipt dl > div { font-size: 0.9rem; } }


/* ---------- FAQ hub (/faqs) ---------- */
.faqhub-hero h1 { max-width: 18em; }
.faqhub-search { position: relative; margin-top: 1.75rem; max-width: 40rem; }
.faqhub-search > svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; color: var(--b-muted); pointer-events: none; }
.faqhub-search input { width: 100%; min-height: 58px; padding: 0 3.25rem 0 3.1rem; border-radius: 1rem; border: 1px solid var(--b-line-strong); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 1.05rem; }
.faqhub-search input::placeholder { color: #8b8b95; }
.faqhub-search input:focus { outline: none; border-color: var(--b-crimson-bright); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25); }
.faqhub-search input::-webkit-search-cancel-button { display: none; }
.faqhub-clear { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 0.7rem; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.faqhub-clear svg { width: 1rem; height: 1rem; }
.faqhub-clear:focus-visible, .faqhub-toggle-all:focus-visible, .faqhub-suggest button:focus-visible, .faqhub-topics a:focus-visible, .faq5-item summary:focus-visible, .faq5-index a:focus-visible { outline: 2px solid var(--b-crimson-bright); outline-offset: 3px; }
.faqhub-count { margin: 0.7rem 0 0; font-size: 0.92rem; color: var(--b-muted); }
.faqhub-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.faqhub-topics a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--b-line-strong); background: rgba(255, 255, 255, 0.03); color: #e4e4e7; font-size: 0.92rem; font-weight: 600; }
.faqhub-topics a svg { width: 1rem; height: 1rem; color: var(--b-crimson-bright); }
.faqhub-topics a small { font-size: 0.8rem; color: var(--b-muted); font-variant-numeric: tabular-nums; }
.faqhub-topics a:hover { border-color: rgba(248, 113, 113, 0.5); color: #fff; }
.faqhub-body { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); max-width: 980px; }
.faqhub-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.faqhub-toggle-all { min-height: 44px; padding: 0 1rem; border-radius: 0.7rem; border: 1px solid var(--b-line-strong); background: transparent; color: #e4e4e7; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.faqhub-toggle-all:hover { color: #fff; border-color: rgba(248, 113, 113, 0.5); }
.faqhub-group { scroll-margin-top: 6.5rem; }
.faqhub-group + .faqhub-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faqhub-group-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.faqhub-group-icon { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 0.9rem; background: rgba(220, 38, 38, 0.15); color: var(--b-crimson-bright); }
.faqhub-group-icon svg { width: 1.3rem; height: 1.3rem; }
.faqhub-group-head h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); letter-spacing: -0.025em; color: #fff; }
.faqhub-group-head p { margin: 0.2rem 0 0; color: var(--b-muted); font-size: 0.95rem; }
.faqhub-group .faq5-item:last-of-type { border-bottom: 1px solid var(--b-line); }
.faqhub-group .faq5-item { scroll-margin-top: 7rem; }
.faqhub-group .faq5-item:target summary h3 { color: var(--b-crimson-bright); }
.faqhub-empty { margin-top: 1rem; padding: 1.5rem; border-radius: 1.2rem; border: 1px dashed var(--b-line-strong); color: var(--b-soft); }
.faqhub-empty-title { margin: 0 0 0.3rem; font-size: 1.15rem; font-weight: 700; color: #fff; }
.faqhub-empty p { margin: 0.4rem 0; }
.faqhub-suggest { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.faqhub-suggest button { min-height: 40px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--b-line-strong); background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 0.92rem; cursor: pointer; }
.faqhub-suggest button:hover { border-color: rgba(248, 113, 113, 0.5); }
.faqhub-help { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.5rem; border: 1px solid rgba(248, 113, 113, 0.22); background: linear-gradient(160deg, rgba(220, 38, 38, 0.14), rgba(20, 20, 24, 0.6) 60%); display: grid; gap: 1.25rem; }
.faqhub-help h2 { margin: 0.4rem 0 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: #fff; letter-spacing: -0.03em; }
.faqhub-help p { margin: 0; color: var(--b-soft); line-height: 1.6; }
.faqhub-help-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.faqhub-help-actions > * { min-height: 50px; }
.faqhub-help-actions .button-secondary { word-break: break-all; }
.faq5-more { margin: 1.75rem 0 0; }
.faq5-more .button-secondary { min-height: 50px; }
.faq5-answer a { overflow-wrap: anywhere; }