/**
 * EISLAW Results Page Styles
 * Task: MKT-049 (Fixed per Jacob review)
 * Design System: docs/DesignSystem/README.md
 *
 * Fixes applied:
 * - Touch targets minimum 48px (WCAG 2.5.5)
 * - Print styles show CTA info instead of hiding
 * - Accessibility: focus-visible styles, proper contrast
 */

/* ============================================
   Design System Tokens
   ============================================ */
:root {
    /* ============================================================
       Style Tile v1 (Nano Banana) — canonical palette + type stacks
       ============================================================ */
    --st1-surface-paper: #F8F7F2;
    --st1-surface-paper-muted: #E5E3DB;
    --st1-ink-primary: #1D2534;
    --st1-ink-secondary: #232934;
    --st1-ink-muted: #5F6062;
    --st1-border-subtle: #D1C8B7;

    --st1-surface-dossier: #343A41;
    --st1-surface-dossier-alt: #3C424B;
    --st1-ink-on-dark: #F8F7F2;
    --st1-border-on-dark: #7D8186;

    --st1-accent-primary: #A85B1C;
    --st1-accent-deep: #563025;

    --st1-warm-sand: #D1C8B7;
    --st1-warm-sand-deep: #C6B69D;
    --st1-warm-mustard: #A9872A;
    --st1-warm-mustard-soft: #C5AD6F;

    /* SSOT Colors */
    --eislaw-color-brand-petrol: var(--st1-ink-primary);
    --eislaw-color-brand-petrol-hover: var(--st1-ink-secondary);
    --eislaw-color-brand-petrol-active: #161D2A;
    --eislaw-color-accent-copper: var(--st1-accent-primary);
    --eislaw-color-status-accent: var(--st1-warm-mustard);
    --eislaw-color-status-success: #33B27F;
    --eislaw-color-status-warning: var(--st1-warm-mustard-soft);
    --eislaw-color-status-danger: #DC2626;
    --eislaw-color-neutral-bg: var(--st1-surface-paper-muted);
    --eislaw-color-neutral-card: var(--st1-surface-paper);
    --eislaw-color-neutral-surface: var(--st1-surface-paper);
    --eislaw-color-neutral-text: var(--st1-ink-primary);
    --eislaw-color-neutral-text-body: var(--st1-ink-muted);
    --eislaw-color-neutral-muted: var(--st1-ink-muted);
    --eislaw-color-neutral-border: var(--st1-border-subtle);
    --eislaw-color-neutral-border-subtle: var(--st1-border-subtle);
    --eislaw-color-neutral-border-default: var(--st1-border-subtle);
    --eislaw-color-neutral-surface-cream: var(--st1-surface-paper);
    --eislaw-color-neutral-surface-muted: var(--st1-surface-paper-muted);

    /* Tier palette (Style Tile v1 compatible) */
    --eislaw-color-tier-yellow-bg: var(--st1-warm-mustard-soft);
    --eislaw-color-tier-yellow-text: var(--st1-ink-primary);
    --eislaw-color-tier-yellow-border: var(--st1-warm-mustard);
    --eislaw-color-tier-orange-bg: var(--st1-warm-sand-deep);
    --eislaw-color-tier-orange-text: var(--st1-ink-primary);
    --eislaw-color-tier-orange-border: var(--st1-accent-primary);
    --eislaw-color-tier-red-bg: var(--st1-surface-dossier);
    --eislaw-color-tier-red-text: var(--st1-ink-on-dark);
    --eislaw-color-tier-red-border: var(--st1-accent-deep);
    --eislaw-color-priority-low-text: var(--st1-accent-primary);

    /* SSOT Typography */
    --eislaw-font-family-primary: "Noto Sans Hebrew", Heebo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --eislaw-font-family-serif: "Noto Serif Hebrew", "Frank Ruhl Libre", "Times New Roman", serif;
    --eislaw-font-size-title: 2rem;
    --eislaw-font-size-subtitle: 1.5rem;
    --eislaw-font-size-heading: 1.25rem;
    --eislaw-font-size-body: 1rem;
    --eislaw-font-size-button: 1.125rem;
    --eislaw-font-size-caption: 0.875rem;
    --eislaw-font-size-badge: 0.875rem;
    --eislaw-font-size-xs: 0.75rem;
    --eislaw-line-height-tight: 1.25;
    --eislaw-line-height-normal: 1.4;
    --eislaw-line-height-relaxed: 1.6;
    --eislaw-line-height-loose: 1.7;
    --eislaw-letter-spacing-tight: 0.01em;
    --eislaw-letter-spacing-normal: 0.02em;

    /* SSOT Spacing */
    --eislaw-space-0: 0;
    --eislaw-space-0-5: 0.125rem;
    --eislaw-space-1: 0.25rem;
    --eislaw-space-2: 0.5rem;
    --eislaw-space-3: 0.75rem;
    --eislaw-space-4: 1rem;
    --eislaw-space-5: 1.25rem;
    --eislaw-space-6: 1.5rem;
    --eislaw-space-8: 2rem;
    --eislaw-space-10: 2.5rem;
    --eislaw-space-12: 3rem;
    --eislaw-space-16: 4rem;
    --eislaw-space-xs: var(--eislaw-space-1);
    --eislaw-space-sm: var(--eislaw-space-2);
    --eislaw-space-md: var(--eislaw-space-4);
    --eislaw-space-lg: var(--eislaw-space-6);
    --eislaw-space-xl: var(--eislaw-space-8);
    --eislaw-space-2xl: var(--eislaw-space-12);
    --eislaw-space-3xl: var(--eislaw-space-16);

    /* SSOT Borders */
    --eislaw-radius-sm: 0.25rem;
    --eislaw-radius-md: 0.5rem;
    --eislaw-radius-lg: 0.75rem;
    --eislaw-radius-xl: 1rem;
    --eislaw-radius-pill: 1.5rem;
    --eislaw-radius-full: 9999px;

    /* SSOT Shadows */
    --eislaw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --eislaw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --eislaw-shadow-md-alt: 0 4px 8px rgba(209, 213, 219, 0.5);
    --eislaw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --eislaw-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

    /* SSOT Accessibility */
    --eislaw-touch-target-min: 48px;

    /* Derived alpha tokens (SSOT-based) */
    --eislaw-color-neutral-surface-80: rgba(248, 247, 242, 0.8);
    --eislaw-color-neutral-surface-92: rgba(248, 247, 242, 0.92);
    --eislaw-color-neutral-surface-90: rgba(248, 247, 242, 0.9);
    --eislaw-color-neutral-surface-28: rgba(248, 247, 242, 0.28);
    --eislaw-color-neutral-surface-16: rgba(248, 247, 242, 0.16);
    --eislaw-color-neutral-border-default-90: rgba(209, 200, 183, 0.9);
    --eislaw-color-neutral-border-subtle-90: rgba(209, 200, 183, 0.9);
    --eislaw-color-accent-copper-14: rgba(168, 91, 28, 0.14);
    --eislaw-color-accent-copper-15: rgba(168, 91, 28, 0.15);
    --eislaw-color-accent-copper-24: rgba(168, 91, 28, 0.24);
    --eislaw-color-accent-copper-25: rgba(168, 91, 28, 0.25);
    --eislaw-color-accent-copper-28: rgba(168, 91, 28, 0.28);
    --eislaw-color-accent-copper-55: rgba(168, 91, 28, 0.55);
    --eislaw-color-status-accent-95: rgba(169, 135, 42, 0.95);
    --eislaw-color-status-accent-28: rgba(169, 135, 42, 0.28);
    --eislaw-color-brand-petrol-98: rgba(29, 37, 52, 0.98);
    --eislaw-color-brand-petrol-92: rgba(29, 37, 52, 0.92);
    --eislaw-color-brand-petrol-85: rgba(29, 37, 52, 0.85);
    --eislaw-color-brand-petrol-75: rgba(29, 37, 52, 0.75);
    --eislaw-color-brand-petrol-65: rgba(29, 37, 52, 0.65);
    --eislaw-color-brand-petrol-hover-92: rgba(35, 41, 52, 0.92);
    --eislaw-color-tier-yellow-border-65: rgba(169, 135, 42, 0.65);

    /* Legacy aliases (mapped to SSOT tokens) */
    --petrol: var(--eislaw-color-brand-petrol);
    --copper: var(--eislaw-color-accent-copper);
    --text: var(--eislaw-color-neutral-text);
    --text-body: var(--eislaw-color-neutral-text-body);
    --muted: var(--eislaw-color-neutral-text-body);
    --line: var(--eislaw-color-neutral-border-subtle);
    --border: var(--eislaw-color-neutral-border-default);
    --card: var(--eislaw-color-neutral-surface);
    --surface-cream: var(--eislaw-color-neutral-surface-cream);
    --surface-muted: var(--eislaw-color-neutral-surface-muted);

    --tier-yellow-bg: var(--eislaw-color-tier-yellow-bg);
    --tier-yellow-border: var(--eislaw-color-tier-yellow-border);
    --tier-yellow-text: var(--eislaw-color-tier-yellow-text);
    --tier-orange-bg: var(--eislaw-color-tier-orange-bg);
    --tier-orange-border: var(--eislaw-color-tier-orange-border);
    --tier-orange-text: var(--eislaw-color-tier-orange-text);
    --tier-red-bg: var(--eislaw-color-tier-red-bg);
    --tier-red-border: var(--eislaw-color-tier-red-border);
    --tier-red-text: var(--eislaw-color-tier-red-text);

    --font-hebrew: var(--eislaw-font-family-primary);
    --fs-title: var(--eislaw-font-size-title);
    --fs-heading: var(--eislaw-font-size-heading);
    --fs-subtitle: var(--eislaw-font-size-subtitle);
    --fs-body: var(--eislaw-font-size-body);
    --fs-caption: var(--eislaw-font-size-caption);
    --lh-base: var(--eislaw-line-height-relaxed);

    --space-1: var(--eislaw-space-1);
    --space-2: var(--eislaw-space-2);
    --space-3: var(--eislaw-space-3);
    --space-4: var(--eislaw-space-4);
    --space-5: var(--eislaw-space-5);
    --space-6: var(--eislaw-space-6);
    --space-8: var(--eislaw-space-8);
    --space-10: var(--eislaw-space-10);
    --space-12: var(--eislaw-space-12);
    --space-16: var(--eislaw-space-16);
    --space-xs: var(--eislaw-space-xs);
    --space-sm: var(--eislaw-space-sm);
    --space-md: var(--eislaw-space-md);
    --space-lg: var(--eislaw-space-lg);
    --space-xl: var(--eislaw-space-xl);
    --space-2xl: var(--eislaw-space-2xl);
    --space-3xl: var(--eislaw-space-3xl);

    --radius-sm: var(--eislaw-radius-sm);
    --radius-md: var(--eislaw-radius-md);
    --radius-lg: var(--eislaw-radius-lg);
    --radius-xl: var(--eislaw-radius-xl);
    --radius-pill: var(--eislaw-radius-pill);
    --radius-full: var(--eislaw-radius-full);

    --shadow-sm: var(--eislaw-shadow-sm);
    --shadow-md: var(--eislaw-shadow-md);
    --shadow-lg: var(--eislaw-shadow-lg);
    --shadow-xl: var(--eislaw-shadow-xl);

    --touch-target-min: var(--eislaw-touch-target-min);
}

/* ============================================
   Base Styles
   ============================================ */
#results-app,
body {
    font-family: var(--font-hebrew);
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(1000px 520px at 50% -180px, var(--eislaw-color-accent-copper-15), transparent 65%),
        linear-gradient(180deg, var(--st1-surface-paper) 0%, var(--st1-surface-paper-muted) 60%, var(--st1-surface-paper) 100%);
}

#results-app {
    color: var(--text);
    line-height: var(--lh-base);
    direction: rtl;
    text-align: right;
}

.results-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ============================================
   Screen Reader Only (for accessibility)
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Focus Styles (Accessibility)
   ============================================ */
:focus-visible {
    outline: 3px solid var(--eislaw-color-tier-yellow-border-65);
    outline-offset: 4px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--eislaw-color-tier-yellow-border-65);
    outline-offset: 4px;
}

/* ============================================
   Skeleton Loading
   ============================================ */
.results-skeleton {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.skeleton-badge,
.skeleton-headline,
.skeleton-subline,
.skeleton-video,
.skeleton-bullet,
.skeleton-cta {
    background: linear-gradient(90deg, var(--eislaw-color-neutral-bg) 25%, var(--eislaw-color-neutral-border-subtle) 50%, var(--eislaw-color-neutral-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-badge {
    width: 200px;
    height: 40px;
    margin: 0 auto var(--space-6);
}

.skeleton-headline {
    width: 80%;
    height: 32px;
    margin: 0 auto var(--space-4);
}

.skeleton-subline {
    width: 60%;
    height: 24px;
    margin: 0 auto var(--space-6);
}

.skeleton-video {
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: var(--space-6);
}

.skeleton-bullets {
    margin-bottom: var(--space-6);
}

.skeleton-bullet {
    width: 90%;
    height: 20px;
    margin-bottom: var(--space-3);
}

.skeleton-cta {
    width: 280px;
    height: 56px;
    margin: 0 auto;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   Error State
   ============================================ */
.results-error {
    text-align: center;
    padding: var(--space-8);
    max-width: 500px;
    margin: 0 auto;
}

.error-icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
}

.results-error h2 {
    font-size: var(--fs-heading);
    margin-bottom: var(--space-3);
}

.results-error p {
    color: var(--muted);
    margin-bottom: var(--space-6);
}

.results-empty {
    text-align: center;
    padding: var(--space-8);
    max-width: 520px;
    margin: 0 auto;
    background: var(--eislaw-color-neutral-surface-92);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.results-empty h2 {
    font-size: var(--fs-heading);
    margin-bottom: var(--space-3);
    color: var(--text);
}

.results-empty p {
    margin: 0;
    color: var(--text-body);
    line-height: var(--eislaw-line-height-relaxed);
}

.retry-btn {
    background: var(--petrol);
    color: white;
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    cursor: pointer;
    font-family: var(--font-hebrew);
    min-height: var(--touch-target-min); /* WCAG touch target */
    min-width: var(--touch-target-min);
}

.retry-btn:hover {
    background: var(--eislaw-color-brand-petrol-hover);
}

/* ============================================
   Tier Badge
   ============================================ */
.tier-badge {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-md);
    border: 2px solid;
    font-size: var(--fs-subtitle);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-6);
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: var(--shadow-sm);
    animation: badge-entrance 0.5s ease-out;
}

@keyframes badge-entrance {
    0% { transform: scale(0.95); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   Headlines
   ============================================ */
.results-headline {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: var(--space-4);
}

.tier-red .results-headline {
    font-size: 32pt;
}

.results-subheadline {
    font-size: var(--fs-subtitle);
    color: var(--muted);
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

/* ============================================
   Video Container
   ============================================ */
.video-container {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.video-wrapper {
    position: relative;
    background: var(--st1-surface-dossier);
}

.video-wrapper iframe {
    border-radius: var(--radius-md);
}

.video-caption {
    text-align: center;
    color: var(--text-body);
    font-size: var(--fs-caption);
    margin-top: var(--space-3);
}

/* ============================================
   Key Points Section
   ============================================ */
.key-points-section {
    margin-bottom: var(--space-6);
}

.section-heading {
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin-bottom: var(--space-4);
    font-family: var(--eislaw-font-family-serif);
}

.key-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: var(--card);
    border-radius: var(--radius-sm);
    min-height: var(--touch-target-min); /* Touch target for potential interaction */
}

.bullet-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bullet-text {
    font-size: var(--fs-body);
}

/* ============================================
   Hero / Trust Block
   ============================================ */
.hero-trust {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.hero-heading {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--fs-heading);
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.hero-lines p {
    margin: 0 0 var(--space-3) 0;
    color: var(--text);
    line-height: 1.7;
}

.hero-lines p:last-child {
    margin-bottom: 0;
}

/* ============================================
   FAQ
   ============================================ */
.faq-section {
    margin-bottom: var(--space-6);
    padding: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--eislaw-color-neutral-surface-90);
    overflow: hidden;
}

.faq-q {
    cursor: pointer;
    padding: var(--space-4) var(--space-4);
    font-weight: 600;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-q::after {
    content: "⌄";
    float: left;
    color: var(--eislaw-color-brand-petrol-75);
    font-weight: 700;
    display: inline-block;
    transition: transform 220ms ease;
}

.faq-item[open] .faq-q::after {
    transform: rotate(180deg);
}

.faq-a {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    color: var(--text-body);
    line-height: var(--eislaw-line-height-loose);
}

/* ============================================
   Enforcement + Narrative Sections
   ============================================ */
.enforcement-section,
.body-section,
.decision-factors-section,
.why-result-section,
.why-price-section {
    margin-bottom: var(--space-6);
}

.enforcement-section.ssot-card,
.body-section.ssot-card,
.decision-factors-section.ssot-card,
.why-result-section.ssot-card,
.why-price-section.ssot-card {
    padding: 0;
    background: transparent;
    border: none;
}

.enforcement-section a {
    color: var(--petrol);
    text-decoration: underline;
}

.enforcement-section p,
.body-section p,
.decision-factors-section p,
.why-result-section p,
.why-price-section p {
    margin: 0 0 var(--space-3) 0;
    line-height: var(--eislaw-line-height-loose);
    color: var(--text-body);
}

.enforcement-section p:last-child,
.body-section p:last-child,
.decision-factors-section p:last-child,
.why-result-section p:last-child,
.why-price-section p:last-child {
    margin-bottom: 0;
}

.enforcement-emphasis {
    background: var(--eislaw-color-neutral-surface-92);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.text-bullets {
    margin: 0 0 var(--space-3) 0;
    padding: 0 var(--space-4) 0 0;
}

.text-bullets li {
    margin-bottom: var(--space-2);
}

.cta-microcopy {
    margin: var(--space-3) 0 0 0;
    color: var(--text-body);
    font-size: var(--fs-caption);
    text-align: center;
}

/* ============================================
   Trust Signals
   ============================================ */
.trust-signals {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--card);
    border: 1px solid var(--line);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    min-height: var(--touch-target-min); /* Touch target */
}

.trust-icon {
    font-size: 24px;
}

.trust-text {
    font-size: 14px;
    color: var(--muted);
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    text-align: center;
    margin-bottom: var(--space-8);
}

.cta-button {
    display: inline-block;
    min-width: 280px;
    min-height: var(--touch-target-min); /* WCAG 2.5.5 touch target */
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--eislaw-font-size-button);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-hebrew);
    line-height: 1.4; /* Ensure text fits with min-height */
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.cta-button:focus-visible {
    outline: 3px solid var(--eislaw-color-tier-yellow-border-65);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px var(--eislaw-color-accent-copper-25);
}

.cta-copper {
    background: var(--copper);
    color: var(--st1-ink-on-dark);
}

.cta-petrol {
    background: var(--petrol);
    color: white;
}

.cta-red {
    background: var(--tier-red-border);
    color: var(--st1-ink-on-dark);
}

.cta-button.attention-pulse {
    animation: cta-pulse 1s ease-in-out;
}

@keyframes cta-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); box-shadow: var(--shadow-lg); }
}

.secondary-link {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--petrol);
    text-decoration: underline;
    font-size: 14px;
    min-height: var(--touch-target-min); /* Touch target */
    line-height: var(--touch-target-min);
    padding: 0 var(--space-2);
}

/* ============================================
   Dual CTA (Orange Tier)
   ============================================ */
.cta-dual .cta-heading {
    font-size: var(--fs-subtitle);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.cta-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.cta-card {
    background: var(--st1-surface-paper);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    transition: border-color 0.2s ease;
}

.cta-card:hover {
    border-color: var(--copper);
}

.cta-card-icon {
    font-size: 32px;
    margin-bottom: var(--space-3);
}

.cta-card h4 {
    font-size: var(--fs-body);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.cta-card-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    font-size: 14px;
    color: var(--muted);
}

.cta-card-benefits li {
    margin-bottom: var(--space-1);
}

.cta-card .cta-button {
    min-width: auto;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-body);
    min-height: var(--touch-target-min); /* Touch target */
}

/* ============================================
   Consultation CTA (Red Tier)
   ============================================ */
.consultation-card {
    background: var(--st1-surface-paper);
    border: 2px solid var(--tier-red-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.consultation-card h3 {
    font-size: var(--fs-subtitle);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.consultation-icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
}

.consultation-card h4 {
    font-size: var(--fs-heading);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.consultation-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    text-align: right;
}

.consultation-benefits li {
    position: relative;
    padding-right: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: var(--fs-body);
    min-height: calc(var(--touch-target-min) / 2); /* Reasonable touch area */
}

.consultation-benefits li::before {
    content: '\2713'; /* ✓ */
    position: absolute;
    right: 0;
    color: var(--tier-red-border);
    font-weight: bold;
}

.eitan-quote {
    font-style: italic;
    font-size: var(--fs-subtitle);
    color: var(--muted);
    border-right: 3px solid var(--copper);
    padding-right: var(--space-4);
    margin: var(--space-6) 0;
    text-align: right;
}

.eitan-quote cite {
    display: block;
    font-style: normal;
    font-size: 14px;
    margin-top: var(--space-2);
    text-align: left;
}

/* ============================================
   Disclaimers & Footer
   ============================================ */
.disclaimers {
    text-align: center;
    margin-bottom: var(--space-4);
}

.disclaimer-short {
    font-size: 13px;
    color: var(--muted);
}

.disclaimer-short a {
    color: var(--petrol);
}

.results-footer {
    border-top: 1px solid var(--line);
    padding-top: var(--space-6);
    text-align: center;
}

.footer-disclaimers {
    margin-bottom: var(--space-4);
}

.footer-disclaimers p {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 var(--space-2);
}

.footer-links {
    font-size: 13px;
    color: var(--muted);
}

.footer-links a {
    color: var(--petrol);
    text-decoration: none;
    display: inline-block;
    min-height: var(--touch-target-min); /* Touch target for footer links */
    line-height: var(--touch-target-min);
    padding: 0 var(--space-2);
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Tablet (768px) */
@media (max-width: 768px) {
    .results-container {
        padding: var(--space-4);
    }

    .results-headline {
        font-size: 22pt;
    }

    .tier-red .results-headline {
        font-size: 26pt;
    }

    .results-subheadline {
        font-size: 16pt;
    }

    .cta-cards {
        grid-template-columns: 1fr;
    }

    .trust-signals {
        flex-direction: column;
        align-items: center;
    }

    .trust-badge {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .key-points li {
        display: block;
    }

    .bullet-icon {
        margin-bottom: var(--space-2);
    }
}

/* Mobile (375px) */
@media (max-width: 480px) {
    .results-container {
        padding: var(--space-3);
    }

    .tier-badge {
        padding: var(--space-3) var(--space-4);
        font-size: 16px;
    }

    .results-headline {
        font-size: 20pt;
    }

    .tier-red .results-headline {
        font-size: 22pt;
    }

    .results-subheadline {
        font-size: 15pt;
    }

    .cta-button {
        min-width: 100%;
        padding: var(--space-4);
        font-size: 16pt;
        min-height: 52px; /* Slightly larger on mobile for fat fingers */
    }

    .section-heading {
        font-size: 18pt;
    }

    .key-points li {
        padding: var(--space-2);
    }

    .bullet-text {
        font-size: 14px;
    }

    .consultation-card {
        padding: var(--space-4);
    }

    .eitan-quote {
        font-size: 16pt;
    }
}

/* ============================================
   RTL Specific Overrides
   ============================================ */
[dir="rtl"] .bullet-icon {
    /* Icons that indicate direction - flip horizontally */
}

[dir="rtl"] .email-text,
[dir="rtl"] .url-text {
    direction: ltr;
    unicode-bidi: embed;
}

/* Price display (number first, then currency) */
[dir="rtl"] .price {
    direction: ltr;
    unicode-bidi: embed;
}

/* ============================================
   Print Styles (FIXED: Show CTA info instead of hiding)
   ============================================ */
@media print {
    /* Hide video - can't play in print */
    .video-container {
        display: none;
    }

    /* Keep CTA visible but style for print */
    .cta-button {
        background: white !important;
        color: var(--text) !important;
        border: 2px solid var(--text) !important;
        padding: var(--space-3) var(--space-4);
    }

    /* Add URL after CTA for print */
    .cta-button::after {
        content: " (" attr(href) ")";
        font-size: 12px;
    }

    /* Secondary link visible */
    .secondary-link {
        color: var(--text);
    }

    /* Clean up for printing */
    .results-container {
        max-width: 100%;
        padding: 0;
    }

    /* No animations */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure good contrast */
    .tier-badge,
    .trust-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================
   VARIANT A SSOT STYLES (PRIV-E2E-001-ORDER-020)
   Follows SSOT: variant-a/index.html
   ============================================ */

/* CSS Variables for SSOT */
.ssot-container {
    --wp-fillout-text: var(--text);
    --wp-fillout-text-body: var(--text-body);
    --ssot-stripe-offset: calc(var(--space-lg) + var(--space-1) + var(--eislaw-space-0-5));
}

/* SSOT Container */
.ssot-container {
    max-width: 860px;
    width: 100%;
}

/* Topbar */
.ssot-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) 0;
}

.ssot-logo img {
    max-height: 42px;
    width: auto;
}

.ssot-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--eislaw-color-neutral-border-subtle-90);
    background: var(--eislaw-color-neutral-surface-80);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    font-size: var(--eislaw-font-size-badge);
    color: var(--wp-fillout-text);
}

.ssot-pill--badge {
    padding: var(--space-3) var(--space-4);
    font-size: var(--eislaw-font-size-body);
    background: var(--st1-surface-dossier);
    border-color: var(--st1-border-on-dark);
    color: var(--st1-ink-on-dark);
    box-shadow: var(--shadow-sm);
}

.ssot-pill-icon {
    font-size: 16px;
}

/* Hero Section */
.ssot-hero {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.ssot-h1 {
    font-size: 42px;
    font-weight: 800;
    font-family: var(--eislaw-font-family-serif);
    line-height: 1.15;
    margin: var(--space-sm) 0 0;
    color: var(--wp-fillout-text);
}

.ssot-lede {
    margin: var(--space-md) 0 0;
    color: var(--wp-fillout-text-body);
    font-size: 18px;
    line-height: 1.75;
    font-weight: 500;
    max-width: 70ch;
}

/* Quick Summary Grid */
.ssot-quick-summary {
    margin-top: var(--space-lg);
}

.ssot-quick-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
}

.ssot-quick-summary__item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--eislaw-color-neutral-border-subtle-90);
    background: var(--eislaw-color-neutral-surface-92);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    min-height: 88px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ssot-quick-summary__item:hover,
.ssot-quick-summary__item:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--eislaw-color-accent-copper-55);
    outline: none;
}

.ssot-quick-summary__label {
    font-size: var(--eislaw-font-size-caption);
    color: var(--wp-fillout-text-body);
    font-weight: 700;
    letter-spacing: var(--eislaw-letter-spacing-tight);
}

.ssot-quick-summary__value {
    font-family: var(--eislaw-font-family-serif);
    font-size: var(--eislaw-font-size-body);
    font-weight: 800;
    color: var(--wp-fillout-text);
    line-height: 1.2;
}

.ssot-quick-summary__hint {
    font-size: var(--eislaw-font-size-caption);
    color: var(--wp-fillout-text-body);
    line-height: 1.55;
}

@media (max-width: 760px) {
    .ssot-quick-summary__grid {
        grid-template-columns: 1fr;
    }
}

/* Jump Links */
.ssot-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

.ssot-jump-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--wp-fillout-text);
    text-decoration: none;
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--eislaw-color-neutral-border-subtle-90);
    border-radius: var(--radius-pill);
    background: var(--eislaw-color-neutral-surface-92);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px;
}

.ssot-jump-link:hover,
.ssot-jump-link:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.ssot-jump-link__icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: var(--eislaw-color-accent-copper-14);
    color: var(--eislaw-color-brand-petrol-92);
    font-size: 14px;
    line-height: 1;
}

/* Hero CTA */
.ssot-cta {
    margin: var(--space-2xl) 0 var(--space-3xl);
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
    background: none;
    border: none;
}

.ssot-cta-inner {
    text-align: center;
    width: 100%;
    max-width: 520px;
}

.ssot-btn {
    display: inline-block;
    background: var(--st1-accent-primary);
    color: var(--st1-ink-on-dark);
    font-weight: 600;
    font-size: var(--eislaw-font-size-button);
    padding: var(--space-4) var(--space-lg);
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.16s ease, filter 0.16s ease;
    min-height: var(--touch-target-min);
    font-family: var(--font-hebrew);
}

.ssot-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.98) saturate(1.05);
}

.ssot-btn:active {
    transform: translateY(0);
}

.ssot-btn:focus-visible {
    outline: 3px solid var(--eislaw-color-tier-yellow-border-65);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px var(--eislaw-color-accent-copper-25);
}

.ssot-subnote {
    font-size: var(--eislaw-font-size-caption);
    color: var(--wp-fillout-text-body);
    margin-top: var(--space-md);
}

/* Main Grid */
.ssot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

/* Cards */
.ssot-card {
    background: var(--eislaw-color-neutral-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}

.ssot-card--boxed {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.ssot-card-head {
    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--ssot-stripe-offset);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.ssot-card-title {
    font-family: var(--eislaw-font-family-serif);
    font-size: var(--eislaw-font-size-heading);
    font-weight: 700;
    color: var(--wp-fillout-text);
    line-height: var(--eislaw-line-height-tight);
    margin: 0;
}

.ssot-card-body {
    padding: 0 var(--space-lg) var(--space-lg) var(--ssot-stripe-offset);
    color: var(--wp-fillout-text-body);
    line-height: var(--eislaw-line-height-loose);
}

.ssot-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, var(--st1-accent-primary), var(--st1-accent-deep));
}

/* SSOT List */
.ssot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}

.ssot-li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-radius: 12px;
    background: var(--surface-cream);
    border: 1px solid var(--border);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.ssot-li:hover {
    transform: translateY(-1px);
    background: var(--eislaw-color-neutral-surface-92);
    border-color: var(--eislaw-color-accent-copper-55);
}

.ssot-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--eislaw-color-accent-copper-15);
    color: var(--eislaw-color-accent-copper);
    font-weight: 700;
}

/* Two-Boxes Layout */
.ssot-two-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

@media (max-width: 900px) {
    .ssot-two-boxes {
        grid-template-columns: 1fr;
    }
}

/* Testimonials Carousel */
.ssot-testimonials {
    padding: 0;
}

.ssot-testimonial-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ssot-carousel-viewport {
    flex: 1;
    overflow: hidden;
}

.ssot-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
}

.ssot-carousel-slide {
    flex: 0 0 100%;
    padding: var(--space-md);
}

.ssot-carousel-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--eislaw-color-neutral-surface);
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssot-carousel-arrow:hover,
.ssot-carousel-arrow:focus-visible {
    background: var(--surface-muted);
    border-color: var(--eislaw-color-accent-copper-55);
    transform: translateY(-1px);
    outline: none;
}

.ssot-testimonial {
    background: var(--eislaw-color-neutral-surface-92);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.ssot-testimonial-head {
    margin-bottom: var(--space-md);
}

.ssot-testimonial-person {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ssot-testimonial-person img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--eislaw-color-neutral-border-default-90);
    box-shadow: var(--shadow-sm);
}

.ssot-testimonial-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--wp-fillout-text);
}

.ssot-testimonial-role {
    font-size: 14px;
    color: var(--wp-fillout-text-body);
}

.ssot-testimonial-quote {
    font-size: 15px;
    line-height: 1.6;
    color: var(--wp-fillout-text);
    margin: 0;
}

.ssot-testimonial-quote.ssot-is-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ssot-testimonial-expand-btn {
    background: none;
    border: none;
    color: var(--eislaw-color-brand-petrol);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-sm) 0;
    font-size: 14px;
}

.ssot-testimonial-expand-btn:hover,
.ssot-testimonial-expand-btn:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* Video Card */
.ssot-video-card .video-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ssot-video-card .video-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--eislaw-color-brand-petrol-98) 0%, var(--eislaw-color-brand-petrol-hover-92) 100%);
    border: 1px solid var(--eislaw-color-neutral-border-default-90);
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
}

.ssot-video-card .video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px 220px at 30% 30%, var(--eislaw-color-status-accent-28), transparent 65%),
        radial-gradient(520px 280px at 85% 70%, var(--eislaw-color-accent-copper-24), transparent 70%);
    pointer-events: none;
    opacity: 0.9;
}

.ssot-video-card .video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--eislaw-color-neutral-surface);
    cursor: pointer;
}

.ssot-video-card .video-play__ring {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    background: var(--eislaw-color-neutral-surface-16);
    border: 1px solid var(--eislaw-color-neutral-surface-28);
    box-shadow: var(--shadow-lg);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    transition: transform 160ms ease, background 160ms ease;
    position: relative;
    z-index: 1;
}

.ssot-video-card .video-play__triangle {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid var(--eislaw-color-neutral-surface);
    transform: translateX(2px);
}

.ssot-video-card .video-play:focus-visible {
    outline: 3px solid var(--eislaw-color-tier-yellow-border-65);
    outline-offset: 6px;
}

.ssot-video-card .video-play:hover .video-play__ring {
    transform: scale(1.04);
    background: var(--eislaw-color-neutral-surface-28);
}

/* Responsive */
@media (max-width: 768px) {
    .ssot-topbar {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .ssot-quick-summary__grid {
        grid-template-columns: 1fr;
    }

    .ssot-two-boxes {
        grid-template-columns: 1fr;
    }

    .ssot-jump-links {
        flex-direction: column;
    }

    .ssot-carousel-arrow {
        display: none;
    }

    .ssot-carousel-slide {
        padding: var(--space-sm);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ssot-carousel-track {
        transition: none;
    }

    .ssot-btn,
    .ssot-quick-summary__item,
    .ssot-jump-link,
    .ssot-carousel-arrow {
        transition: none;
    }
}