/* ==========================================================================
   Sector page layout v3
   --------------------------------------------------------------------------
   Loaded only on a singular `sector` post whose `sector_layout_v3` meta holds
   a valid JSON object (see terrier_sector_v3() in inc/template-functions.php
   and the enqueue in functions.php). Every other page on the site is
   untouched, so removing the meta removes this stylesheet with it.

   Built on the tokens declared in style.css. Prefix: .sv3-
   Source of truth: mockups/dental-sector.html, with its later review-pass
   overrides consolidated into the single set of rules that were approved.
   ========================================================================== */

:root {
    --sv3-body: #C5CAD3;
    --sv3-panel: #101018;
    --sv3-panel-2: #14141D;
    --sv3-measure: 720px;
}

/* The theme footer opens with its own "Ready to Grow?" banner. A v3 page
   closes on its own final CTA, so the generic one is hidden here rather than
   edited out of footer.php, which every other page still uses. */
body.sv3-page .footer-cta-section { display: none; }

/* Section rhythm -------------------------------------------------------- */
.sv3-section { padding: 72px 0; }
.sv3-section--tight { padding: 56px 0; }
.sv3-section--panel { background: var(--sv3-panel); }
.sv3-section--panel-2 { background: var(--sv3-panel-2); }

.sv3-measure { max-width: var(--sv3-measure); }
.sv3-measure p {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--sv3-body);
    margin-bottom: var(--space-6);
}
.sv3-measure p:last-child { margin-bottom: 0; }

.sv3-h2 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-8);
    letter-spacing: -0.01em;
}
.sv3-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

/* Hero ------------------------------------------------------------------ */
.sv3-hero {
    position: relative;
    padding: 64px 0 0;
    background: var(--color-dark);
    background-image:
        radial-gradient(ellipse at 18% 120%, rgba(0, 255, 136, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 10%, rgba(0, 255, 136, 0.07) 0%, transparent 45%);
    overflow: hidden;
}
.sv3-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: var(--space-16);
    align-items: end;
}
/* No hero visual: the copy column runs the full width. */
.sv3-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.sv3-hero--solo { padding-bottom: 72px; }
.sv3-hero__title {
    font-size: var(--text-5xl);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
}
.sv3-hero__desc {
    font-size: var(--text-xl);
    line-height: 1.55;
    color: var(--sv3-body);
    max-width: 620px;
    margin-bottom: var(--space-8);
}
.sv3-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Stats strip ----------------------------------------------------------- */
.sv3-stats { display: grid; gap: var(--space-4); }
.sv3-stat {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.sv3-stat:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.sv3-stat__figure {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.sv3-stat__label { font-size: var(--text-sm); color: var(--color-gray-600); line-height: 1.5; }
.sv3-stat__label strong { color: var(--color-white); font-weight: var(--font-semibold); }

.sv3-stats-strip {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-secondary);
    padding: var(--space-8) 0;
}
.sv3-stats-strip .sv3-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv3-stats-strip .sv3-stat {
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    padding: 0 var(--space-6);
}
.sv3-stats-strip .sv3-stat:first-child { border-left: none; padding-left: 0; }
.sv3-stats-strip .sv3-stat:hover { transform: none; }

/* Two-column text ------------------------------------------------------- */
.sv3-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}
.sv3-two-col p {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--sv3-body);
}
.sv3-two-col p:last-child { margin-bottom: 0; }
.sv3-pull {
    border-left: 3px solid var(--color-primary);
    padding: var(--space-5) 0 var(--space-5) var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    color: var(--color-white);
    margin: var(--space-10) 0 0;
}

/* Feature cards --------------------------------------------------------- */
.sv3-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.sv3-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.sv3-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.sv3-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: rgba(0, 255, 136, 0.09);
    color: var(--color-primary);
    margin-bottom: 14px;
}
.sv3-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.sv3-card__text { font-size: 15px; line-height: 1.6; color: var(--sv3-body); margin: 0; }

/* Search panels --------------------------------------------------------- */
.sv3-alt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: stretch;
}
/* Review pass: the two panels read as plain columns split by a rule rather
   than as two heavy boxes. */
.sv3-panel-box { background: none; border: 0; border-radius: 0; padding: 0; }
.sv3-panel-box + .sv3-panel-box { border-left: 1px solid var(--color-border); padding-left: 48px; }
.sv3-panel-box p { color: var(--sv3-body); font-size: var(--text-base); line-height: 1.7; margin-bottom: 0; }
.sv3-panel-box .sv3-h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }

.sv3-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.sv3-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-white);
    font-size: var(--text-sm);
}
.sv3-chip svg { color: var(--color-primary); flex-shrink: 0; }

/* Proof ----------------------------------------------------------------- */
.sv3-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.sv3-proof {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: border-color var(--transition-fast);
}
.sv3-proof:hover { border-color: var(--color-primary); }
.sv3-proof__figure {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: var(--font-extrabold);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.sv3-proof__figure--text { font-size: 24px; line-height: 1.3; }
.sv3-proof__cap {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-5);
}
.sv3-proof__name { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-white); margin-bottom: var(--space-3); }
.sv3-proof__name a { color: var(--color-white); }
.sv3-proof__name a:hover { color: var(--color-primary); }
.sv3-proof__text { font-size: 15px; line-height: 1.6; color: var(--sv3-body); margin-bottom: 16px; }
.sv3-proof__link { margin-top: auto; font-weight: var(--font-semibold); font-size: var(--text-sm); }

/* Case study cards, landscape, full width, no clipping -------------------- */
.sv3-cs-header h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.sv3-cs-header p { margin: 0; }
.sv3-cs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.sv3-cs-grid .case-study-slide,
.sv3-cs-grid .case-study-slide a { aspect-ratio: 4 / 3; height: auto; }
.sv3-cs-grid .case-study-slide { flex: initial; width: 100%; }
.sv3-cs-grid .case-study-slide a { display: block; }
.sv3-cs-grid .case-study-slide__service { text-transform: uppercase; }
.sv3-cs-grid .case-study-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.sv3-cs-grid .case-study-slide:hover img { transform: scale(1.04); }

/* Free audit band -------------------------------------------------------- */
.sv3-audit-band { padding: 64px 0; background: var(--sv3-panel); }
.sv3-audit-band__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-12);
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(ellipse at 18% 100%, rgba(0, 255, 136, 0.16) 0%, transparent 58%),
        linear-gradient(135deg, rgba(0, 255, 136, 0.06) 0%, transparent 52%),
        var(--color-surface);
    overflow: hidden;
    padding: var(--space-12) var(--space-12) 0;
}
.sv3-audit-band__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 4px 4px;
}
.sv3-audit-band__art {
    position: relative;
    z-index: 1;
    align-self: end;
    display: flex;
    justify-content: center;
    min-height: 240px;
}
.sv3-audit-band__copy { position: relative; z-index: 1; padding-bottom: var(--space-12); }
.sv3-audit-band__copy h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.sv3-audit-band__copy p { font-size: var(--text-lg); color: var(--sv3-body); margin-bottom: var(--space-8); max-width: 560px; }

/* Wireframe phone in the audit band */
.sv3-wire {
    position: relative;
    width: 210px;
    padding: 8px 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.45);
    transform-origin: center top;
}
.sv3-wire__screen {
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.02);
    padding: var(--space-4);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sv3-wire__bar { height: 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.sv3-wire__block { height: 54px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--color-border); }
.sv3-wire__label {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: var(--font-bold);
    color: rgba(255, 255, 255, 0.75);
    padding: var(--space-3) 0;
}
.sv3-wire__badge {
    position: absolute;
    top: -22px; left: -26px;
    width: 72px; height: 72px;
    border-radius: var(--radius-full);
    background: var(--color-dark);
    border: 1px solid rgba(0, 255, 136, 0.45);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transform: translate(14px, 30px) scale(1.35);
}
.sv3-wire__badge::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 20px;
    width: 14px; height: 14px;
    background: var(--color-dark);
    border-right: 1px solid rgba(0, 255, 136, 0.45);
    border-bottom: 1px solid rgba(0, 255, 136, 0.45);
    transform: rotate(35deg);
    border-radius: 0 0 3px 0;
}

/* Timeline -------------------------------------------------------------- */
.sv3-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.sv3-step {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 24px;
}
.sv3-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
}
.sv3-step__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-white); margin-bottom: var(--space-3); }
.sv3-step__text { font-size: 15px; line-height: 1.6; color: var(--sv3-body); margin: 0; }

/* Trust panel ----------------------------------------------------------- */
.sv3-trust {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    padding: 28px 32px;
}
.sv3-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: 0; }
.sv3-badge {
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(0, 255, 136, 0.35);
    border-radius: var(--radius-md);
    background: rgba(0, 255, 136, 0.06);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sv3-trust p { font-size: var(--text-base); line-height: 1.7; color: var(--sv3-body); margin: 0; }

/* Pricing --------------------------------------------------------------- */
.sv3-price {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 40px;
    align-items: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
}
.sv3-price__figure {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: var(--font-extrabold);
    line-height: 1.1;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.sv3-price__figure span { color: var(--color-primary); }
.sv3-ticks { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.sv3-ticks li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-white);
    font-size: var(--text-base);
}
.sv3-ticks svg { color: var(--color-primary); flex-shrink: 0; }
.sv3-price p { font-size: var(--text-base); line-height: 1.7; color: var(--sv3-body); margin-bottom: var(--space-6); }

/* FAQ, two independent columns ------------------------------------------- */
/* Two columns rather than a two-column grid of shared rows, so opening one
   answer never stretches the item beside it. The accordion markup and its
   classes are the theme's own, so main.js drives it unchanged. */
.sv3-faq .faq-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    align-items: start;
}
.sv3-faq__col { display: flex; flex-direction: column; min-width: 0; }
.sv3-faq .faq-item__question { gap: var(--space-6); align-items: flex-start; }
.sv3-faq .faq-item.is-open .faq-item__answer { max-height: 900px; }

/* Answer text reads as body copy on a v3 page, not as the theme's smaller,
   dimmer accordion note. Scoped to .sv3-faq so every other accordion on the
   site keeps the styling it has today. */
.sv3-faq .faq-item__answer-inner,
.sv3-faq .faq-item__answer-inner p,
.sv3-faq .faq-item__answer-inner li {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--sv3-body);
}
.sv3-faq .faq-item__answer-inner p:last-child { margin-bottom: 0; }

/* Final CTA ------------------------------------------------------------- */
.sv3-final {
    position: relative;
    padding: 110px 0;
    text-align: center;
    background: var(--color-dark);
    background-image:
        radial-gradient(ellipse at 50% 110%, rgba(0, 255, 136, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 40%, rgba(0, 255, 136, 0.07) 0%, transparent 42%),
        radial-gradient(ellipse at 80% 40%, rgba(0, 255, 136, 0.07) 0%, transparent 42%);
    border-top: 1px solid var(--color-border);
}
.sv3-final__title {
    font-size: var(--text-6xl);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: var(--space-5);
}
.sv3-final__text { font-size: var(--text-lg); color: var(--sv3-body); max-width: 640px; margin: 0 auto var(--space-8); }

/* ==========================================================================
   Hero local pack illustration
   ========================================================================== */
.sv3-phone-panel {
    position: relative;
    height: 520px;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0, 255, 136, 0.13) 0%, transparent 62%),
        linear-gradient(180deg, rgba(0, 255, 136, 0.05) 0%, rgba(10, 10, 15, 0) 85%);
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.sv3-phone-panel::before {
    content: '';
    position: absolute;
    inset: auto 8% 0 8%;
    height: 70%;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border: 1px solid rgba(0, 255, 136, 0.14);
    border-bottom: none;
    background: rgba(0, 255, 136, 0.025);
}
.sv3-phone {
    position: relative;
    z-index: 1;
    width: 292px;
    margin-top: 34px;
    padding: 10px;
    border-radius: 44px;
    background: #16161F;
    border: 1px solid #2E2E3C;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.sv3-phone__screen {
    position: relative;
    background: #FFFFFF;
    border-radius: 36px;
    padding: 10px 12px 0;
    min-height: 560px;
    overflow: visible;
    font-family: var(--font-body);
    color: #202124;
}
.sv3-phone__island {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 86px; height: 22px;
    border-radius: var(--radius-full);
    background: #16161F;
    z-index: 3;
}
.sv3-phone__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #202124;
}
.sv3-phone__status-icons { display: flex; align-items: center; gap: 4px; }

.sv3-ui-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #DADCE0;
    border-radius: var(--radius-full);
    font-size: 12px;
    color: #202124;
    background: #fff;
    /* Holds its height while the typing animation empties the query. */
    min-height: 33px;
}
.sv3-ui-search svg { color: #5F6368; flex-shrink: 0; }
.sv3-ui-tabs {
    display: flex;
    gap: 14px;
    padding: 12px 2px 8px;
    border-bottom: 1px solid #EBECEE;
    font-size: 11px;
    color: #5F6368;
}
.sv3-ui-tabs span:first-child { color: #202124; font-weight: 600; position: relative; }
.sv3-ui-tabs span:first-child::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -9px;
    height: 2px;
    background: #202124;
    border-radius: 2px;
}
.sv3-ui-map {
    margin: 12px 0 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #EBECEE;
}
.sv3-ui-map svg { display: block; width: 100%; height: auto; }

.sv3-ui-listing {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #F1F2F4;
}
.sv3-ui-listing__body { flex: 1; min-width: 0; }
.sv3-ui-listing__name { font-size: 13px; font-weight: 600; color: #1A0DAB; margin-bottom: 4px; }
.sv3-ui-listing__meta { font-size: 11px; color: #5F6368; }
.sv3-ui-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: #00FF88;
    color: #06210F;
    font-size: 10px;
    font-weight: 700;
    vertical-align: 1px;
}
.sv3-ui-call {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: var(--radius-full);
    border: 1px solid #DADCE0;
    display: flex; align-items: center; justify-content: center;
    color: #5F6368;
}

/* The highlighted first result, deliberately wider than the phone body */
.sv3-ui-highlight {
    position: relative;
    z-index: 2;
    margin: 10px -26px;
    padding: 12px 24px;
    border: 1px solid #00FF88;
    border-radius: var(--radius-lg);
    background: rgba(0, 255, 136, 0.14);
    box-shadow: 0 8px 26px rgba(0, 255, 136, 0.18);
    /* The entry animation is the .sv3-hv-pop primitive below, sequenced by
       assets/js/sector-v3.js. It used to be an unconditional CSS animation
       here, which would have played twice once the controller took over. */
}
.sv3-ui-highlight .sv3-ui-listing { border-bottom: none; padding: 0; }
.sv3-ui-highlight .sv3-ui-listing__name { color: #0B3D26; }
.sv3-ui-highlight .sv3-ui-listing__meta { color: #2F5344; }
.sv3-ui-highlight .sv3-ui-call { border-color: rgba(11, 61, 38, 0.3); color: #0B3D26; }

.sv3-skel { display: flex; flex-direction: column; gap: 6px; }
.sv3-skel__bar { height: 9px; border-radius: 4px; background: #E4E6E9; }
.sv3-skel__bar--sm { height: 7px; background: #EDEFF1; }

.sv3-phone__caption {
    margin: var(--space-6) 0 0;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    max-width: 480px;
}
.sv3-phone__caption a { color: var(--color-primary); }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .sv3-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
    .sv3-phone-panel { height: 480px; margin-top: var(--space-6); }
    .sv3-two-col { gap: var(--space-10); }
    .sv3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv3-proof-grid { grid-template-columns: 1fr; }
    .sv3-cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
    .sv3-final__title { font-size: var(--text-5xl); }
    .sv3-audit-band__panel {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-8);
        padding: var(--space-8) var(--space-8) 0;
    }
}

@media (max-width: 900px) {
    .sv3-panel-box + .sv3-panel-box {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--color-border);
        padding-top: 32px;
    }
    .sv3-trust { grid-template-columns: 1fr; gap: 20px; }
    .sv3-faq .faq-accordion { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sv3-hero { padding: 40px 0 0; }
    .sv3-hero--solo { padding-bottom: 56px; }
    .sv3-hero__title { font-size: var(--text-3xl); }
    .sv3-hero__desc { font-size: var(--text-lg); }
    .sv3-hero__cta .btn { width: 100%; }
    .sv3-phone-panel { height: 430px; }
    .sv3-phone { width: 262px; margin-top: 24px; }
    .sv3-phone__screen { min-height: 520px; }
    .sv3-ui-highlight { margin-left: -18px; margin-right: -18px; padding-left: 16px; padding-right: 16px; }
    .sv3-stats-strip .sv3-stats { grid-template-columns: 1fr; gap: var(--space-5); }
    .sv3-stats-strip .sv3-stat { border-left: none; border-top: 1px solid var(--color-border); padding: var(--space-4) 0 0; }
    .sv3-stats-strip .sv3-stat:first-child { border-top: none; padding-top: 0; }
    .sv3-two-col, .sv3-alt, .sv3-cards, .sv3-timeline, .sv3-price { grid-template-columns: 1fr; }
    .sv3-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .sv3-cs-grid .case-study-slide__overlay { padding: var(--space-5); }
    .sv3-cs-grid .case-study-slide__title { font-size: var(--text-lg); }
    .sv3-h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
    .sv3-measure p, .sv3-two-col p { font-size: var(--text-base); }
    .sv3-pull { font-size: var(--text-xl); }
    .sv3-price .btn { width: 100%; }
    .sv3-audit-band__panel { grid-template-columns: 1fr; padding: var(--space-6) var(--space-6) 0; gap: var(--space-8); }
    .sv3-audit-band__copy { padding-bottom: var(--space-8); order: 1; }
    .sv3-audit-band__art { order: 2; min-height: 200px; }
    .sv3-audit-band__copy .btn { width: 100%; }
    .sv3-wire { transform: scale(1.15); }
    .sv3-wire__badge { left: -12px; }
    .sv3-final { padding: 72px 0; }
    .sv3-final__title { font-size: var(--text-3xl); }
}

@media (max-width: 560px) {
    .sv3-cs-grid { grid-template-columns: 1fr; }
    .sv3-cs-grid .case-study-slide,
    .sv3-cs-grid .case-study-slide a { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .sv3-ui-highlight { animation: none; }
    .sv3-card, .sv3-stat { transition: none; }
    .sv3-card:hover, .sv3-stat:hover { transform: none; }
    .sv3-cs-grid .case-study-slide img { transition: none; }
    .sv3-cs-grid .case-study-slide:hover img { transform: none; }
}

/* ==========================================================================
   Animated hero visuals
   --------------------------------------------------------------------------
   Four types, all driven by assets/js/sector-v3.js: local-pack and serp sit
   in the phone frame above, reel replaces the phone screen, growth replaces
   the phone panel with a card.

   The controller adds `sv3-hv-on` to a visual only when it is about to run a
   sequence, and everything that starts hidden is scoped to that class. So
   with no JavaScript, a blocked script or prefers-reduced-motion set, every
   element below is already at its final state and the true published figure
   is the one on screen. `sv3-hv-playing` runs the entry sequence,
   `sv3-hv-visible` permits the idle loops, `sv3-hv-idle` marks the sequence
   finished.

   Only transform, opacity and stroke-dashoffset animate, and every animated
   box already occupies its final size, so nothing here moves the layout.
   ========================================================================== */

/* Typed query and caret ---------------------------------------------------- */
.sv3-hv-type { display: inline-flex; align-items: center; min-width: 0; }
.sv3-hv-type__text { white-space: nowrap; overflow: hidden; }
.sv3-hv-caret {
    display: inline-block;
    width: 1px;
    height: 13px;
    margin-left: 1px;
    background: #202124;
    opacity: 0;
    flex-shrink: 0;
}
[data-sv3-visual].sv3-hv-playing .sv3-hv-caret { animation: sv3-hv-blink 900ms steps(1, end) infinite; }
[data-sv3-visual].sv3-hv-typed .sv3-hv-caret { animation: none; opacity: 0; }
@keyframes sv3-hv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Counting figure. The sizer holds the final figure's width, so counting up
   cannot reflow the line; the value sits on top of it in the same grid cell. */
.sv3-hv-count { display: inline-grid; }
.sv3-hv-count > * { grid-area: 1 / 1; }
.sv3-hv-count__sizer { visibility: hidden; }
.sv3-hv-count__value { font-variant-numeric: tabular-nums; }

/* Shared entry primitives -------------------------------------------------- */
[data-sv3-visual].sv3-hv-on .sv3-hv-fade,
[data-sv3-visual].sv3-hv-on .sv3-hv-rise,
[data-sv3-visual].sv3-hv-on .sv3-hv-pop,
[data-sv3-visual].sv3-hv-on .sv3-hv-pin,
[data-sv3-visual].sv3-hv-on .sv3-hv-dot { opacity: 0; }

[data-sv3-visual].sv3-hv-playing .sv3-hv-fade { animation: sv3-hv-fade 420ms ease forwards; }
[data-sv3-visual].sv3-hv-playing .sv3-hv-rise { animation: sv3-hv-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-sv3-visual].sv3-hv-playing .sv3-hv-pop  { animation: sv3-hv-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes sv3-hv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv3-hv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sv3-hv-pop  { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }

/* Once the sequence has finished, entry elements stay at their final state
   even where an idle animation then takes the element over. */
[data-sv3-visual].sv3-hv-idle .sv3-hv-fade,
[data-sv3-visual].sv3-hv-idle .sv3-hv-rise,
[data-sv3-visual].sv3-hv-idle .sv3-hv-pop,
[data-sv3-visual].sv3-hv-idle .sv3-hv-pin,
[data-sv3-visual].sv3-hv-idle .sv3-hv-dot { opacity: 1; }

/* Local pack map pins ------------------------------------------------------ */
.sv3-hv-pin { transform-box: fill-box; transform-origin: 50% 100%; }
[data-sv3-visual].sv3-hv-playing .sv3-hv-pin { animation: sv3-hv-pindrop 560ms cubic-bezier(0.34, 1.5, 0.5, 1) forwards; }
@keyframes sv3-hv-pindrop {
    0%   { opacity: 0; transform: translateY(-18px) scale(0.9); }
    62%  { opacity: 1; transform: translateY(2px) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
[data-sv3-visual].sv3-hv-idle.sv3-hv-visible .sv3-hv-pin--client { animation: sv3-hv-pinpulse 2600ms ease-in-out infinite; }
@keyframes sv3-hv-pinpulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.09); }
}

/* Organic SERP result rows ------------------------------------------------- */
.sv3-ui-result { padding: 13px 0; border-bottom: 1px solid #F1F2F4; }
.sv3-ui-result__site { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sv3-ui-result__fav { width: 16px; height: 16px; border-radius: 50%; background: #E8EAED; flex-shrink: 0; }
.sv3-ui-result__name { font-size: 11px; font-weight: 600; color: #202124; }
.sv3-ui-result__url { font-size: 10px; color: #5F6368; }
.sv3-ui-result__title { font-size: 13px; font-weight: 600; color: #1A0DAB; line-height: 1.35; }
.sv3-ui-highlight--serp { margin-top: 14px; }
.sv3-ui-highlight .sv3-ui-result { border-bottom: none; padding: 0; }
.sv3-ui-highlight .sv3-ui-result__title { color: #0B3D26; }
.sv3-ui-highlight .sv3-ui-result__name,
.sv3-ui-highlight .sv3-ui-result__url { color: #2F5344; }
.sv3-ui-highlight .sv3-ui-result__fav { background: rgba(11, 61, 38, 0.18); }

/* Reel --------------------------------------------------------------------- */
.sv3-phone--reel .sv3-phone__screen {
    padding: 0;
    overflow: hidden;
    background: #0C0C12;
    min-height: 560px;
}
.sv3-hv-reel {
    position: relative;
    height: 560px;
    border-radius: 36px;
    overflow: hidden;
    background: linear-gradient(165deg, #0E2A20 0%, #0A1016 55%, #101020 100%);
}
.sv3-hv-reel__blob { position: absolute; border-radius: 50%; filter: blur(26px); will-change: transform; }
.sv3-hv-reel__blob--a { width: 210px; height: 210px; top: 60px; left: -40px; background: rgba(0, 255, 136, 0.42); }
.sv3-hv-reel__blob--b { width: 180px; height: 180px; top: 230px; right: -50px; background: rgba(0, 204, 106, 0.30); }
.sv3-hv-reel__blob--c { width: 240px; height: 240px; bottom: -60px; left: 30px; background: rgba(46, 46, 110, 0.55); }
[data-sv3-visual].sv3-hv-visible .sv3-hv-reel__blob--a { animation: sv3-hv-blob-a 11s ease-in-out infinite; }
[data-sv3-visual].sv3-hv-visible .sv3-hv-reel__blob--b { animation: sv3-hv-blob-b 13s ease-in-out infinite; }
[data-sv3-visual].sv3-hv-visible .sv3-hv-reel__blob--c { animation: sv3-hv-blob-c 15s ease-in-out infinite; }
@keyframes sv3-hv-blob-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }    50% { transform: translate3d(26px, 34px, 0) scale(1.12); } }
@keyframes sv3-hv-blob-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-30px, -26px, 0) scale(0.92); } }
@keyframes sv3-hv-blob-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }    50% { transform: translate3d(18px, -30px, 0) scale(1.1); } }

.sv3-hv-reel__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.28) 0%, rgba(10, 10, 15, 0.04) 24%, rgba(10, 10, 15, 0.52) 52%, rgba(10, 10, 15, 0.86) 78%, rgba(10, 10, 15, 0.92) 100%);
}
.sv3-hv-reel__rail {
    position: absolute;
    right: 12px;
    top: 140px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    color: rgba(255, 255, 255, 0.88);
}
.sv3-hv-reel__hearts { position: absolute; right: 18px; top: 150px; width: 40px; height: 175px; pointer-events: none; }
.sv3-hv-reel__heart { position: absolute; bottom: 0; left: 12px; opacity: 0; color: var(--color-primary); }
[data-sv3-visual].sv3-hv-visible .sv3-hv-reel__heart { animation: sv3-hv-heart 3400ms ease-out infinite; }
.sv3-hv-reel__heart:nth-child(2) { left: 2px; animation-delay: 900ms; }
.sv3-hv-reel__heart:nth-child(3) { left: 22px; animation-delay: 1900ms; }
@keyframes sv3-hv-heart {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
    12%  { opacity: 0.95; }
    70%  { opacity: 0.45; }
    100% { opacity: 0; transform: translate3d(-10px, -150px, 0) scale(1.05); }
}
.sv3-hv-reel__stat { position: absolute; left: 16px; right: 64px; top: 272px; }
.sv3-hv-reel__figure {
    display: block;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: var(--font-extrabold);
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.sv3-hv-reel__label { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.sv3-hv-reel__client { display: block; margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, 0.68); }

/* Growth card -------------------------------------------------------------- */
.sv3-hv-card-slot {
    position: relative;
    height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--space-12);
}
.sv3-hv-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.sv3-hv-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.sv3-hv-card__cap {
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-500);
}
.sv3-hv-card__range { font-size: 10px; color: var(--color-gray-500); }
.sv3-hv-card__figure {
    display: block;
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: var(--font-extrabold);
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.sv3-hv-card__label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--sv3-body); }
.sv3-hv-card__label strong { color: var(--color-white); font-weight: var(--font-semibold); }
.sv3-hv-card__chart { margin-top: var(--space-5); }
.sv3-hv-card__chart svg { display: block; width: 100%; height: auto; }

.sv3-hv-line { stroke: var(--color-primary); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-sv3-visual].sv3-hv-on .sv3-hv-line { stroke-dasharray: 420; stroke-dashoffset: 420; }
[data-sv3-visual].sv3-hv-playing .sv3-hv-line { animation: sv3-hv-draw 1800ms cubic-bezier(0.33, 0.9, 0.35, 1) 260ms forwards; }
@keyframes sv3-hv-draw { to { stroke-dashoffset: 0; } }

.sv3-hv-dot { transform-box: fill-box; transform-origin: 50% 50%; }
[data-sv3-visual].sv3-hv-playing .sv3-hv-dot { animation: sv3-hv-pop 400ms cubic-bezier(0.22, 1, 0.36, 1) 2000ms forwards; }
.sv3-hv-dot-halo { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
[data-sv3-visual].sv3-hv-idle.sv3-hv-visible .sv3-hv-dot-halo { animation: sv3-hv-halo 2400ms ease-out infinite; }
@keyframes sv3-hv-halo {
    0%   { opacity: 0.55; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(2.4); }
}

/* Stagger delays. A closed set, so a data file can never inject a value. */
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="0"]    { animation-delay: 0ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="700"]  { animation-delay: 700ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="850"]  { animation-delay: 850ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="950"]  { animation-delay: 950ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1050"] { animation-delay: 1050ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1150"] { animation-delay: 1150ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1250"] { animation-delay: 1250ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1400"] { animation-delay: 1400ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1550"] { animation-delay: 1550ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1700"] { animation-delay: 1700ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="1850"] { animation-delay: 1850ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="2000"] { animation-delay: 2000ms; }
[data-sv3-visual].sv3-hv-playing [data-sv3-delay="2150"] { animation-delay: 2150ms; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sv3-hv-card-slot { height: auto; margin-top: var(--space-6); padding-bottom: var(--space-12); }
}

@media (max-width: 768px) {
    .sv3-hv-reel { height: 520px; }
    .sv3-phone--reel .sv3-phone__screen { min-height: 520px; }
    .sv3-hv-reel__stat { top: 248px; }
    .sv3-hv-card-slot { padding-bottom: var(--space-8); }
}

@media (max-width: 480px) {
    .sv3-hv-card { max-width: 100%; }
}

/* Reduced motion: the final state, instantly, with no movement -------------- */
@media (prefers-reduced-motion: reduce) {
    [data-sv3-visual] *,
    [data-sv3-visual] *::before,
    [data-sv3-visual] *::after {
        animation: none !important;
        transition: none !important;
    }
    [data-sv3-visual] .sv3-hv-fade,
    [data-sv3-visual] .sv3-hv-rise,
    [data-sv3-visual] .sv3-hv-pop,
    [data-sv3-visual] .sv3-hv-pin,
    [data-sv3-visual] .sv3-hv-dot { opacity: 1 !important; transform: none !important; }
    [data-sv3-visual] .sv3-hv-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    [data-sv3-visual] .sv3-hv-caret { display: none !important; }
    [data-sv3-visual] .sv3-hv-reel__heart,
    [data-sv3-visual] .sv3-hv-dot-halo { opacity: 0 !important; }
}

/* Free audit modal (ported from the mockup's dm- modal) ----------------- */
.sv3-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    overflow-y: auto;
}
.sv3-modal[hidden] { display: none; }
.sv3-modal__backdrop { position: fixed; inset: 0; background: rgba(4, 4, 8, 0.78); backdrop-filter: blur(3px); }
.sv3-modal__card {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: var(--space-8);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.sv3-modal__close {
    position: absolute;
    top: var(--space-4); right: var(--space-4);
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-gray-600);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sv3-modal__close:hover { color: var(--color-white); border-color: var(--color-primary); }
.sv3-modal__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sv3-modal h2 { font-size: var(--text-2xl); margin: 0 var(--space-10) var(--space-6) 0; }
.sv3-modal [hidden] { display: none !important; }

.sv3-field { margin-bottom: var(--space-4); }
.sv3-field label { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-white); margin-bottom: var(--space-2); }
.sv3-field__opt { color: var(--color-gray-500); font-weight: 400; }
.sv3-field input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
}
.sv3-field input::placeholder { color: #6B7280; }
.sv3-field input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.sv3-field__err { display: none; margin-top: var(--space-2); font-size: var(--text-sm); color: #FF7A7A; }
.sv3-field.has-error input { border-color: #FF7A7A; }
.sv3-field.has-error .sv3-field__err { display: block; }
.sv3-modal .btn { width: 100%; margin-top: var(--space-2); }
.sv3-privacy { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-gray-500); }
.sv3-privacy a { color: inherit; text-decoration: underline; }
body.sv3-locked { overflow: hidden; }

/* Honeypot: off screen, still in the form, so bots fill it and people never see it. */
.sv3-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sv3-audit-busy { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-8) 0; }
.sv3-audit-busy p { margin: 0; color: var(--sv3-body); font-size: var(--text-lg); }
.sv3-spinner {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid #2A2A3A;
    border-top-color: var(--color-primary);
    animation: sv3-spin 900ms linear infinite;
}
@keyframes sv3-spin { to { transform: rotate(360deg); } }

.sv3-audit-result { text-align: center; }
.sv3-audit-result__cap { margin: 0 0 var(--space-2); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-500); }
.sv3-audit-dial svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.sv3-audit-dial__value { margin: var(--space-2) 0 var(--space-6); font-size: var(--text-3xl); font-weight: 700; color: var(--color-white); line-height: 1.1; }
.sv3-audit-dial__of { font-size: var(--text-base); font-weight: 400; color: var(--sv3-body); }
.sv3-audit-arc.is-animating { animation: sv3-arc-in 900ms ease-out both; }
@keyframes sv3-arc-in { from { stroke-dashoffset: 100; } }
.sv3-audit-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
}
.sv3-audit-counts div {
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.02);
}
.sv3-audit-counts dt { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); }
.sv3-audit-counts dd { margin: var(--space-1) 0 0; font-size: var(--text-2xl); font-weight: 700; color: var(--color-white); }
.sv3-audit-error p { color: var(--sv3-body); font-size: var(--text-lg); margin: 0 0 var(--space-4); }

@media (prefers-reduced-motion: reduce) {
    .sv3-audit-arc.is-animating { animation: none; }
    .sv3-spinner { animation-duration: 2400ms; }
}
@media (max-width: 768px) {
    .sv3-modal { padding: var(--space-4); }
    .sv3-modal__card { padding: var(--space-6); }
    .sv3-audit-counts { gap: var(--space-2); }
    .sv3-audit-counts dt { font-size: 10px; letter-spacing: 0.04em; }
}

/* Visually hidden live region for modal announcements. */
.sv3-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}