/*
 * W3Dock design layer ("refresh")
 * Loaded last in <head> (after header.css, nav.css, footer.css, menu.css and template CSS).
 * Evolution, not a rewrite: tokens, headings font, accessibility utilities, focus
 * states, readable article typography, tables and small polish on existing classes.
 * Brand color stays #2450f1.
 */

/* ===== Fonts: Poppins 600/700 for headings (self-hosted, OFL — see assets/fonts/poppins/LICENSE.txt) ===== */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback so the swap to Poppins does not shift layout (CLS) */
@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    ascent-override: 93.62%;
    descent-override: 31.21%;
    line-gap-override: 8.92%;
    size-adjust: 112.16%;
}

/* ===== Tokens ===== */
:root {
    --font-heading: 'Poppins', 'Poppins Fallback', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --focus-ring: #2450f1;
    /* WCAG AA: #9ca3af on white was 2.5:1; #6b7280 is 4.8:1 */
    --text-muted: #6b7280;
}
body {
    /* Every "DM Serif Display" usage (theme.json global styles) now resolves to Poppins */
    --wp--preset--font-family--dm-serif-display: var(--font-heading);
    --text-muted: #6b7280;
}
body.theme-dark {
    --text-muted: #8f9bb0; /* 5.3:1 on #141b2d */
    --focus-ring: #8aa4ff;
}

/* ===== Headings: one font + one size scale for the whole site ===== */
:root {
    --fs-h1: clamp(28px, 2.4vw + 14px, 38px);
    --fs-h2: clamp(22px, 1.2vw + 15px, 28px);
    --fs-h3: clamp(18px, 0.6vw + 15px, 21px);
    --fs-h4: 17px;
}
h1, h2, h3,
.sn-title,
.feed-card-title,
.news-arc-title {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-h1); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; }

/* ===== Accessibility utilities ===== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: #1e3fd0;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
    transform: translateY(-150%);
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    outline: 3px solid #2450f1;
    outline-offset: 2px;
}

/* Programmatic focus target of the skip link */
#main:focus {
    outline: none;
}

/* Visible keyboard focus everywhere (mouse clicks stay clean) */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    border-radius: 6px;
}
/* On the blue header use a white ring */
.main-header :focus-visible {
    outline-color: #fff;
}
.main-header .w3-mega :focus-visible {
    outline-color: var(--focus-ring);
}
.header-search-input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

/* content-visibility on <img> (header.css, mobile) gave off-screen images 0 height -> layout shifts */
img {
    content-visibility: visible;
}

/* ===== Buttons ===== */
.btn-load-more,
.feed-load-more button,
.sn-referral-btn {
    min-height: 44px;
}

/* ===== Single news: reading layout ===== */
.sn-title {
    font-size: clamp(28px, 3.2vw + 12px, 40px);
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
}
.sn-meta {
    color: var(--text-secondary, #4b5563);
}
.sn-hero-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.sn-body {
    font-size: 18px;
    line-height: 1.7;
}
.sn-body > p,
.sn-body > ul,
.sn-body > ol,
.sn-body > h2,
.sn-body > h3,
.sn-body > h4,
.sn-body > blockquote {
    max-width: 72ch;
}
.sn-body h2 {
    font-size: clamp(22px, 1.2vw + 16px, 27px);
    line-height: 1.3;
    font-weight: 700;
}
.sn-body h3 {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}
.sn-body li + li {
    margin-top: 0.4em;
}
@media (max-width: 768px) {
    .sn-body {
        font-size: 17px;
    }
}

/* ===== Tables in articles and reviews ===== */
.sn-body .wp-block-table,
.desc-body .wp-block-table {
    margin: 24px 0;
    overflow-x: auto;
    /* keep the table's min-width from widening grid/flex ancestors */
    contain: inline-size;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md);
}
.sn-body .wp-block-table table,
.service-description-content .desc-body .wp-block-table table {
    margin: 0;
    border: 0;
    border-radius: 0;
}
.sn-body table,
.service-description-content .desc-body table {
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}
.sn-body thead th,
.service-description-content .desc-body thead th {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #4b5563);
    background: var(--bg-secondary, #eef0f3);
}
.sn-body tbody tr:nth-child(even) td,
.service-description-content .desc-body tbody tr:nth-child(even) td {
    background: rgba(36, 80, 241, 0.025);
}
.sn-body tbody tr:hover td,
.service-description-content .desc-body tbody tr:hover td {
    background: rgba(36, 80, 241, 0.06);
}
.sn-body tr:last-child td,
.service-description-content .desc-body tr:last-child td {
    border-bottom: 0;
}
body.theme-dark .sn-body tbody tr:nth-child(even) td,
body.theme-dark .service-description-content .desc-body tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025);
}
body.theme-dark .sn-body tbody tr:hover td,
body.theme-dark .service-description-content .desc-body tbody tr:hover td {
    background: rgba(99, 132, 255, 0.1);
}
@media (max-width: 640px) {
    /* Fixed layout squeezed columns to a few characters; let the wrapper scroll instead */
    .sn-body table.has-fixed-layout,
    .desc-body table.has-fixed-layout {
        table-layout: auto;
        min-width: 520px;
    }
}

/* ===== Cards: consistent hover/focus feedback ===== */
.feed-card:focus-within,
.news-arc-card:focus-visible,
.exchange-card:focus-visible {
    border-color: rgba(36, 80, 241, 0.35);
}

/* ===== Footer ===== */
.footer-nav-col .footer-nav-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
}
.footer-disclaimer-text {
    opacity: 1;
    color: var(--text-muted);
}
.footer-nav-col li a {
    padding: 2px 0;
}

/* ===== Back to top ===== */
body.theme-dark .vp-back-to-top-button {
    background: #141b2d;
    border-color: rgba(255, 255, 255, 0.1);
    color: #8aa4ff;
}
@media (max-width: 768px) {
    .vp-back-to-top-button {
        right: 16px;
        bottom: 16px;
    }
}

/* ===== Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Contrast fixes found by Lighthouse ===== */
body:not(.theme-dark) .footer-disclaimer-text,
body:not(.theme-dark) .fr-card-all-label {
    color: #5b6472; /* 5.3:1 on #f5f6f8 */
}
body:not(.theme-dark) .fr-round {
    color: #6d3fd9; /* was #8b5cf6 (3.8:1) */
}

/* ==========================================================================
   Follow box (RSS / Feedly / X)
   ========================================================================== */
.follow-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 40px 0 8px;
    padding: 22px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(36, 80, 241, .08), rgba(99, 102, 241, .06));
    border: 1px solid rgba(36, 80, 241, .14);
}
.follow-box__title { margin: 0 0 4px; font-size: 18px; color: var(--text-primary, #111827); }
.follow-box__lead { margin: 0; font-size: 14px; color: var(--text-secondary, #4b5563); }
.follow-box__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.follow-box__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.follow-box__btn:hover { border-color: var(--primary-color, #2450f1); color: var(--primary-color, #2450f1); }
.follow-box__btn--rss { background: #f97316; border-color: #f97316; color: #fff; }
.follow-box__btn--rss:hover { background: #ea580c; border-color: #ea580c; color: #fff; }
.follow-box__btn:focus-visible { outline: 2px solid var(--primary-color, #2450f1); outline-offset: 2px; }
body.theme-dark .follow-box { background: linear-gradient(135deg, rgba(96, 130, 255, .12), rgba(99, 102, 241, .08)); border-color: rgba(96, 130, 255, .2); }
body.theme-dark .follow-box__btn { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e5e7eb; }
body.theme-dark .follow-box__btn--rss { background: #f97316; border-color: #f97316; color: #fff; }
@media (max-width: 560px) {
    .follow-box { padding: 18px; }
    .follow-box__actions { width: 100%; }
    .follow-box__btn { flex: 1 1 auto; justify-content: center; }
}
.follow-box__lead a { color: var(--primary-color, #2450f1); font-weight: 600; text-decoration: none; margin-left: 4px; }
.follow-box__lead a:hover { text-decoration: underline; }
body.theme-dark .follow-box__lead a { color: #8aa4ff; }
/* Sidebar: follow row under the newsletter form */
.sb-follow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.sb-follow__label {
    margin-right: 2px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.sb-follow__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-primary, #111827);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.sb-follow__btn:hover { border-color: var(--primary-color, #2450f1); color: var(--primary-color, #2450f1); }
.sb-follow__btn--rss { background: #f97316; border-color: #f97316; color: #fff; }
.sb-follow__btn--rss:hover { background: #ea580c; border-color: #ea580c; color: #fff; }
body.theme-dark .sb-follow { border-top-color: rgba(255, 255, 255, .08); }
body.theme-dark .sb-follow__btn { border-color: rgba(255, 255, 255, .14); color: #e5e7eb; }
body.theme-dark .sb-follow__btn--rss { color: #fff; border-color: #f97316; }

/* ==========================================================================
   BORDERLESS DESIGN LAYER
   Outline borders on cards/sections are replaced by surface contrast and
   soft shadows. --border-color (used by ~500 rules) becomes transparent;
   --hairline is the rare, faint divider where separation is really needed.
   ========================================================================== */
:root,
body {
    /* A faint hairline keeps cards from melting into the near-white page;
       the borderless layer below still uses surface + shadow where it matters. */
    --border-color: rgba(15, 23, 42, .08);
    --hairline: rgba(15, 23, 42, .06);
    --surface-tint: rgba(15, 23, 42, .035);
    --shadow-card: 0 0 0 1px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-card-hover: 0 0 0 1px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .06), 0 16px 36px rgba(15, 23, 42, .10);
}
body.theme-dark {
    --border-color: rgba(255, 255, 255, .10);
    --hairline: rgba(255, 255, 255, .06);
    --surface-tint: rgba(255, 255, 255, .04);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, .09), 0 2px 4px rgba(0, 0, 0, .4), 0 16px 36px rgba(0, 0, 0, .35);
}

/* Surfaces that need to stand off the page background */
.feed-card,
.service-card,
.news-arc-card,
.sn-rn-card,
.mention-card,
.rss-list,
.author-card,
#services-container.services-list,
.inv-table-wrap,
.people-card,
.glossary-card,
.guide-card,
.event-card,
.w3-mega__panel {
    border-color: transparent !important;
    box-shadow: var(--shadow-card);
}
.feed-card:hover,
.service-card:hover,
.news-arc-card:hover,
.sn-rn-card:hover,
.mention-card:hover,
.people-card:hover {
    box-shadow: var(--shadow-card-hover);
}
#services-container.services-list .service-card {
    box-shadow: none !important;
}

/* Rows inside a surface: faint hairline instead of a ruled grid */
#services-container.services-list .service-card,
.rss-feed + .rss-feed,
.sn-latest-list li,
.w3-drawer__list li + li,
.w3-mega__group {
    border-color: var(--hairline) !important;
}

/* Follow box / sidebar follow: filled tints, no outlines */
.follow-box { border: 0; }
.follow-box__btn:not(.follow-box__btn--rss),
.sb-follow__btn:not(.sb-follow__btn--rss),
.rss-btn:not(.rss-btn--rss),
.view-toggle-group {
    border-color: transparent;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.sb-follow__btn:not(.sb-follow__btn--rss),
.rss-btn:not(.rss-btn--rss) {
    background: var(--surface-tint);
    box-shadow: none;
}
.sb-follow { border-top-color: var(--hairline); }

/* Form fields keep a visible edge (usability) */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
    border-color: var(--hairline);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--primary-color, #2450f1);
}
/* Outline buttons → soft filled buttons */
.feed-more-btn {
    border-color: transparent !important;
    background: rgba(36, 80, 241, .08) !important;
    color: var(--primary-color, #2450f1) !important;
}
.feed-more-btn:hover { background: rgba(36, 80, 241, .14) !important; }
body.theme-dark .feed-more-btn { background: rgba(96, 130, 255, .14) !important; color: #aebfff !important; }

/* ==========================================================================
   Breadcrumbs (canonical, see inc/seo-breadcrumbs.php)
   Separators are drawn in CSS so only crumb labels reach screen readers.
   ========================================================================== */
.w3-crumbs {
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.4;
}
.w3-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.w3-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.w3-crumbs li:not(:last-child)::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.4;
}
.w3-crumbs a,
.w3-crumbs [aria-current="page"] {
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w3-crumbs a {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    transition: color 0.2s;
}
.w3-crumbs a:hover { color: var(--primary-color, #2550f0); }
.w3-crumbs [aria-current="page"] {
    color: var(--text-primary, #111827);
    font-weight: 600;
    max-width: 46ch;
}
body.theme-dark .w3-crumbs a { color: var(--text-muted, #94a3b8); }
body.theme-dark .w3-crumbs a:hover { color: #8aa4ff; }
body.theme-dark .w3-crumbs [aria-current="page"] { color: var(--text-primary, #e5e7eb); }

@media (max-width: 480px) {
    .w3-crumbs { font-size: 12px; margin: 16px 0; }
    .w3-crumbs a { max-width: 26vw; }
    .w3-crumbs [aria-current="page"] { max-width: 50vw; }
}

/* ==========================================================================
   FAQ accordion (native <details>, see template-parts/archive-service.php)
   ========================================================================== */
.w3-faq {
    margin: 56px 0 0;
}
.w3-faq-title {
    font-size: var(--fs-h2);
    margin: 0 0 16px;
    color: var(--text-primary);
}
.w3-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.w3-faq-item {
    background: var(--card-bg, #fff);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.w3-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #111827);
    list-style: none;
}
.w3-faq-q::-webkit-details-marker { display: none; }
.w3-faq-q:hover { color: var(--primary-color, #2550f0); }
.w3-faq-q:focus-visible {
    outline: 2px solid var(--focus-ring, #2450f1);
    outline-offset: -2px;
}
.w3-faq-chevron {
    flex: 0 0 auto;
    color: var(--text-muted, #64748b);
    transition: transform 0.2s ease;
}
.w3-faq-item[open] .w3-faq-chevron { transform: rotate(180deg); }
.w3-faq-a {
    padding: 0 20px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary, #4b5563);
}
.w3-faq-a > :first-child { margin-top: 0; }
.w3-faq-a > :last-child { margin-bottom: 0; }

body.theme-dark .w3-faq-q { color: var(--text-primary, #e5e7eb); }
body.theme-dark .w3-faq-q:hover { color: #8aa4ff; }
body.theme-dark .w3-faq-a { color: var(--text-secondary, #cbd5e1); }

@media (max-width: 640px) {
    .w3-faq { margin: 40px 0 0; }
    .w3-faq-q { padding: 14px 16px; font-size: 14px; }
    .w3-faq-a { padding: 0 16px 16px; }
}

/* "How we rank" methodology block (rendered inside the FAQ section) */
.w3-rank {
    margin: 0 0 20px;
    padding: 20px 22px;
    background: var(--bg-secondary, rgba(0, 0, 0, .025));
    border: 1px solid var(--border-color, rgba(15, 23, 42, .08));
    border-radius: var(--radius-md, 12px);
}
.w3-rank__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.w3-rank__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.w3-rank__list li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.w3-rank__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--primary-color, #2550f0);
}
.w3-rank__list strong { color: var(--text-primary); }
.w3-rank__note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}
.w3-rank__note a { color: var(--primary-color, #2550f0); }
body.theme-dark .w3-rank {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

/* Newsletter capture block — SL UI "Matte" (graphite controls) */
@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/instrument-sans/instrument-sans-variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
.w3-nl-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 40px;
    margin: 44px 0;
    padding: 28px 30px;
    background: #f5f4f2;
    border: 1px solid rgba(34, 34, 34, .10);
    border-radius: 16px;
    font-family: 'Instrument Sans', var(--font-body, -apple-system, sans-serif);
}
.w3-nl-cta__intro { min-width: 0; }
.w3-nl-cta__kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.w3-nl-cta__title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #1a1a1a;
}
.w3-nl-cta__text {
    margin: 0;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.6;
    color: #5f5f5f;
}
.w3-nl-form {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* SL UI "Matte" email field */
.w3-nl-cta .sl-field {
    --field-ink: #222;
    --field-hover: #2e2e2e;
    --field-active: #3f3f3f;
    --field-text: #fafafa;
    --field-muted: #bbbbbb;
    --field-focus: #686868;
    --field-ease: cubic-bezier(.4, 0, .2, 1);
    position: relative;
    width: min(300px, 100%);
    color: var(--field-text);
    font-family: 'Instrument Sans', sans-serif;
    text-align: left;
}
.w3-nl-cta .sl-field *,
.w3-nl-cta .sl-field *::before,
.w3-nl-cta .sl-field *::after { box-sizing: border-box; }
.w3-nl-cta .sl-field__control {
    position: relative;
    height: 56px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: var(--field-ink);
    box-shadow: inset 0 1px #ffffff12, 0 1px 2px #0000000d;
    transition: background-color 360ms ease, border-color 360ms ease, box-shadow 420ms var(--field-ease);
}
.w3-nl-cta .sl-field__control:hover { background: var(--field-hover); }
.w3-nl-cta .sl-field__control:focus-within {
    border-color: #b0b0b0;
    box-shadow: 0 0 0 3px #5c5c5c24, inset 0 1px #ffffff12;
}
.w3-nl-cta .sl-field__input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 22px 48px 7px 16px;
    border: 0;
    border-radius: inherit;
    outline: none;
    background: transparent;
    color: var(--field-text);
    caret-color: var(--field-text);
    font: 450 16px/1.25 'Instrument Sans', sans-serif;
    letter-spacing: -.01em;
}
.w3-nl-cta .sl-field__input::placeholder { color: transparent; }
.w3-nl-cta .sl-field__input:focus-visible { outline: none; }
.w3-nl-cta .sl-field__label {
    position: absolute;
    top: 17px;
    left: 16px;
    max-width: calc(100% - 68px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    color: var(--field-muted);
    font: 450 16px/20px 'Instrument Sans', sans-serif;
    letter-spacing: -.01em;
    transform-origin: left top;
    transition: transform 460ms var(--field-ease), color 360ms ease;
}
.w3-nl-cta .sl-field__input:focus ~ .sl-field__label,
.w3-nl-cta .sl-field__input:not(:placeholder-shown) ~ .sl-field__label {
    transform: translateY(-10px) scale(.8);
    color: #cecece;
}
.w3-nl-cta .sl-field__helper {
    min-height: 32px;
    margin: 8px 2px 0;
    color: #5f5f5f;
    font: 400 12px/1.5 'Instrument Sans', sans-serif;
}
.w3-nl-cta .sl-field__validation {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff09;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--field-text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.w3-nl-cta .sl-field__valid-icon,
.w3-nl-cta .sl-field__invalid-icon { opacity: 0; transition: opacity 140ms ease; }
.w3-nl-cta .sl-field__validation path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: opacity 140ms ease, stroke-dashoffset 0s 140ms;
}
.w3-nl-cta .sl-field[data-validation="invalid"] .sl-field__validation,
.w3-nl-cta .sl-field[data-validation="valid"] .sl-field__validation { opacity: 1; }
.w3-nl-cta .sl-field[data-validation="valid"] .sl-field__valid-icon,
.w3-nl-cta .sl-field[data-validation="invalid"] .sl-field__invalid-icon { opacity: 1; transition: opacity 220ms ease 140ms; }
.w3-nl-cta .sl-field[data-validation="valid"] .sl-field__valid-icon { stroke-dashoffset: 0; transition: opacity 220ms ease 140ms, stroke-dashoffset 440ms var(--field-ease) 140ms; }
.w3-nl-cta .sl-field[data-validation="invalid"] .sl-field__invalid-icon path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--field-ease) 140ms; }
.w3-nl-cta .sl-field[data-validation="invalid"] .sl-field__invalid-icon path + path { transition-delay: 240ms; }
.w3-nl-cta .sl-field[data-validation="invalid"] .sl-field__control { border-color: #c5c5c5; }

/* SL UI matte button */
.w3-nl-cta .sl-button {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: #222;
    color: #fafafa;
    font: 600 15px/1 'Instrument Sans', sans-serif;
    letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: inset 0 1px #ffffff12, 0 1px 2px #0000000d;
    transition: background-color 360ms ease, opacity 200ms ease;
}
.w3-nl-cta .sl-button:hover { background: #2e2e2e; }
.w3-nl-cta .sl-button:focus-visible { outline: 2px solid #dbdbdb; outline-offset: 2px; }
.w3-nl-cta .sl-button:disabled { opacity: .55; cursor: not-allowed; }

.w3-nl-msg {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Instrument Sans', var(--font-body, sans-serif);
}
.w3-nl-msg.is-ok { color: #15803d; }
.w3-nl-msg.is-err { color: #dc2626; }

@media (prefers-reduced-motion: reduce) {
    .w3-nl-cta .sl-field *,
    .w3-nl-cta .sl-field *::before,
    .w3-nl-cta .sl-field *::after { transition: none !important; animation: none !important; }
}

body.theme-dark .w3-nl-cta {
    background: #1b1b1b;
    border-color: rgba(255, 255, 255, .10);
}
body.theme-dark .w3-nl-cta__title { color: #f2f2f2; }
body.theme-dark .w3-nl-cta__text { color: #b5b5b5; }
body.theme-dark .w3-nl-cta .sl-field {
    --field-ink: #2e2e2e;
    --field-hover: #383838;
    --field-active: #454545;
}
body.theme-dark .w3-nl-cta .sl-field__helper { color: #9a9a9a; }
body.theme-dark .w3-nl-cta .sl-button { background: #fafafa; color: #1a1a1a; }
body.theme-dark .w3-nl-cta .sl-button:hover { background: #e6e6e6; }
body.theme-dark .w3-nl-msg.is-ok { color: #4ade80; }
body.theme-dark .w3-nl-msg.is-err { color: #f87171; }

@media (max-width: 820px) {
    .w3-nl-cta {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 24px 20px;
        margin: 32px 0;
    }
    .w3-nl-form { width: 100%; }
    .w3-nl-cta .sl-field { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (max-width: 520px) {
    .w3-nl-form { flex-direction: column; align-items: stretch; }
    .w3-nl-cta .sl-button { width: 100%; }
}

/* ==========================================================================
   Sidebar ad placements (AdSense): sticky on reviews, right column on home
   ========================================================================== */
.pp-aside-ad { margin-top: 18px; }
.pp-aside-ad .w3-ad,
.sidebar-ad .w3-ad { margin: 0; }
.sidebar-ad { text-align: center; }
@media (max-width: 1024px) {
    .pp-aside-ad { display: none; }
}

/* ==========================================================================
   Layout stability: .wp-site-blocks is display:flex (row). Without this the
   page <main> sizes to its content and can collapse (e.g. while the news feed
   shows skeletons), shrinking the whole layout. Force it to fill the width.
   ========================================================================== */
.wp-site-blocks > main,
.wp-site-blocks > .main-content,
main.main-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}