/* @font-face lives OUTSIDE the @layer wrapper. Some browsers (older Safari
   and some Chromium builds) have had bugs where fonts declared inside a
   cascade layer silently fail to register, causing fallback fonts to be
   used with less-distinct weights. Unlayered @font-face is globally
   registered and always applies. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    /* Self-hosted Inter (SIL OFL 1.1); relative to this CSS file. */
    src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
    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;
}

@layer ettic-otc {

    /* ═══════════════════════════════════════════════
       RESET (scoped to .ettic-otc-body)
       ═══════════════════════════════════════════════ */

    .ettic-otc-body {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .ettic-otc-body *,
    .ettic-otc-body *::before,
    .ettic-otc-body *::after {
        box-sizing: border-box;
    }

    /* ═══════════════════════════════════════════════
       DESIGN TOKENS
       ═══════════════════════════════════════════════ */

    .ettic-otc-body {
        /* Accent — injected from PHP as --ettic-otc-accent-h, --ettic-otc-accent-s, --ettic-otc-accent-l.
           --ettic-otc-accent-l-safe is the same lightness clamped to ≤48% so pale picks stay
           readable on white surfaces. Raw --ettic-otc-accent-l is still used on dark
           backgrounds (hero, nav, ask button) where a bright accent reads fine. */
        --ettic-otc-accent:          hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l-safe));
        --ettic-otc-accent-hover:    hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l-safe) - 6%));
        --ettic-otc-accent-light:    hsl(var(--ettic-otc-accent-h), calc(var(--ettic-otc-accent-s) * 0.6), 95%);
        --ettic-otc-accent-subtle:   hsl(var(--ettic-otc-accent-h), calc(var(--ettic-otc-accent-s) * 0.4), 97.5%);
        --ettic-otc-accent-10:       hsl(var(--ettic-otc-accent-h), calc(var(--ettic-otc-accent-s) * 0.5), 92%);
        --ettic-otc-accent-border:   hsl(var(--ettic-otc-accent-h), calc(var(--ettic-otc-accent-s) * 0.35), 88%);
        --ettic-otc-accent-text:     hsl(var(--ettic-otc-accent-h), calc(var(--ettic-otc-accent-s) * 0.9), calc(var(--ettic-otc-accent-l-safe) - 5%));

        /* Neutrals — slightly warm undertone for premium feel */
        --ettic-otc-white:    #ffffff;
        --ettic-otc-gray-25:  #fcfcfd;
        --ettic-otc-gray-50:  #f8f9fb;
        --ettic-otc-gray-100: #f1f3f5;
        --ettic-otc-gray-200: #e4e7ec;
        --ettic-otc-gray-300: #cdd3db;
        --ettic-otc-gray-400: #98a2b3;
        --ettic-otc-gray-500: #667085;
        --ettic-otc-gray-600: #475467;
        --ettic-otc-gray-700: #344054;
        --ettic-otc-gray-800: #1d2939;
        --ettic-otc-gray-900: #101828;

        /* Semantic */
        --ettic-otc-success:      #12b76a;
        --ettic-otc-success-bg:   #ecfdf3;
        --ettic-otc-success-fg:   #027a48;
        --ettic-otc-success-ring: #a6f4c5;
        --ettic-otc-warning:      #f79009;
        --ettic-otc-warning-bg:   #fffaeb;
        --ettic-otc-warning-fg:   #b54708;
        --ettic-otc-warning-ring: #fedf89;
        --ettic-otc-error:        #dc2626;
        --ettic-otc-error-fg:     #b91c1c;
        --ettic-otc-muted-bg:     #f2f4f7;
        --ettic-otc-muted-fg:     #667085;

        /* Typography */
        --ettic-otc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, 'Helvetica Neue', Arial, sans-serif;
        --ettic-otc-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

        --ettic-otc-text-xs:   0.75rem;
        --ettic-otc-text-sm:   0.8125rem;
        --ettic-otc-text-base: 0.9375rem;
        --ettic-otc-text-md:   1rem;
        --ettic-otc-text-lg:   1.125rem;
        --ettic-otc-text-xl:   1.25rem;
        --ettic-otc-text-2xl:  1.5rem;
        --ettic-otc-text-3xl:  1.875rem;
        --ettic-otc-text-4xl:  2.375rem;
        --ettic-otc-text-5xl:  3rem;

        --ettic-otc-leading-tight:  1.2;
        --ettic-otc-leading-snug:   1.375;
        --ettic-otc-leading-normal: 1.625;

        /* Spacing scale */
        --ettic-otc-space-0:  0;
        --ettic-otc-space-1:  0.25rem;
        --ettic-otc-space-1h: 0.375rem;
        --ettic-otc-space-2:  0.5rem;
        --ettic-otc-space-3:  0.75rem;
        --ettic-otc-space-4:  1rem;
        --ettic-otc-space-5:  1.25rem;
        --ettic-otc-space-6:  1.5rem;
        --ettic-otc-space-8:  2rem;
        --ettic-otc-space-10: 2.5rem;
        --ettic-otc-space-12: 3rem;
        --ettic-otc-space-16: 4rem;
        --ettic-otc-space-20: 5rem;
        --ettic-otc-space-24: 6rem;
        --ettic-otc-space-32: 8rem;

        /* Radii */
        --ettic-otc-radius-sm:   8px;
        --ettic-otc-radius-md:   12px;
        --ettic-otc-radius-lg:   16px;
        --ettic-otc-radius-xl:   20px;
        --ettic-otc-radius-2xl:  24px;
        --ettic-otc-radius-full: 9999px;

        /* Shadows — layered for depth */
        --ettic-otc-shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.05);
        --ettic-otc-shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.06),
                         0 1px 2px rgba(16, 24, 40, 0.04);
        --ettic-otc-shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.06),
                         0 2px 4px -2px rgba(16, 24, 40, 0.04);
        --ettic-otc-shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, 0.08),
                         0 4px 6px -2px rgba(16, 24, 40, 0.03);
        --ettic-otc-shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, 0.08),
                         0 8px 8px -4px rgba(16, 24, 40, 0.03);
        --ettic-otc-ring-accent: 0 0 0 4px var(--ettic-otc-accent-light);

        /* Transitions */
        --ettic-otc-transition-fast: 120ms ease;
        --ettic-otc-transition:      200ms ease;
        --ettic-otc-transition-slow: 300ms ease;

        /* Layout */
        --ettic-otc-container:        1200px;
        --ettic-otc-container-narrow: 780px;
        --ettic-otc-nav-height:       56px;
    }

    /* ═══════════════════════════════════════════════
       BASE
       ═══════════════════════════════════════════════ */

    .ettic-otc-body {
        font-family: var(--ettic-otc-font);
        font-size: var(--ettic-otc-text-base);
        line-height: var(--ettic-otc-leading-normal);
        color: var(--ettic-otc-gray-700);
        background: var(--ettic-otc-white);
        font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    }

    .ettic-otc-body a {
        color: var(--ettic-otc-accent-text);
        text-decoration: none;
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-body a:hover {
        color: var(--ettic-otc-accent-hover);
    }

    .ettic-otc-body a:focus-visible {
        outline: 2px solid var(--ettic-otc-accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ═══════════════════════════════════════════════
       SKIP LINK (accessibility)
       ═══════════════════════════════════════════════ */

    .ettic-otc-skip-link {
        position: absolute;
        top: -9999px;
        left: 0;
        z-index: 10000;
        background: var(--ettic-otc-accent);
        color: var(--ettic-otc-white);
        padding: var(--ettic-otc-space-3) var(--ettic-otc-space-6);
        font-weight: 600;
        border-radius: 0 0 var(--ettic-otc-radius-sm) 0;
    }

    .ettic-otc-skip-link:focus {
        top: 0;
        color: var(--ettic-otc-white);
    }

    /* ═══════════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════════ */

    .ettic-otc-container {
        width: 100%;
        max-width: var(--ettic-otc-container);
        margin-inline: auto;
        padding-inline: var(--ettic-otc-space-8);
    }

    .ettic-otc-container--narrow {
        max-width: var(--ettic-otc-container-narrow);
    }

    .ettic-otc-main {
        padding-block: 0;
    }

    /* ═══════════════════════════════════════════════
       NAVIGATION — dark, integrated with hero
       ═══════════════════════════════════════════════ */

    .ettic-otc-nav {
        background: hsl(var(--ettic-otc-accent-h), 30%, 7%);
        position: sticky;
        top: 0;
        z-index: 100;
        height: var(--ettic-otc-nav-height);
    }

    .ettic-otc-nav__inner {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-6);
        height: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ettic-otc-nav__inner::-webkit-scrollbar {
        display: none;
    }

    .ettic-otc-body a.ettic-otc-nav__brand {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-3);
        text-decoration: none;
        flex-shrink: 0;
        color: var(--ettic-otc-white);
    }

    .ettic-otc-body a.ettic-otc-nav__brand:hover {
        color: var(--ettic-otc-white);
    }

    .ettic-otc-nav__brand-logo {
        max-height: 22px;
        width: auto;
        object-fit: contain;
    }

    .ettic-otc-nav__brand-name {
        font-size: var(--ettic-otc-text-md);
        font-weight: 650;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    .ettic-otc-nav__links {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-1);
    }

    .ettic-otc-body a.ettic-otc-nav__link {
        display: flex;
        align-items: center;
        padding: var(--ettic-otc-space-1h) var(--ettic-otc-space-3);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        border-radius: var(--ettic-otc-radius-sm);
        transition: color var(--ettic-otc-transition-fast), background var(--ettic-otc-transition-fast);
    }

    .ettic-otc-body a.ettic-otc-nav__link:hover {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.08);
    }

    .ettic-otc-body a.ettic-otc-nav__link--active {
        color: var(--ettic-otc-white);
        background: rgba(255, 255, 255, 0.12);
        font-weight: 500;
    }

    .ettic-otc-nav__cta {
        margin-inline-start: auto;
        padding: var(--ettic-otc-space-2) 0;
        flex-shrink: 0;
    }

    /* ──────────────────────────────────────────────
     * Ask AI button — restrained AI CTA.
     * Pill shape, subtle accent gradient fill, single hairline border, top
     * inset highlight for "carved" dimension, tight neutral drop shadow.
     * Intentionally quiet — matches the rest of the system.
     * ────────────────────────────────────────────── */
    .ettic-otc-body a.ettic-otc-nav__ask {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 16px;
        border: 1px solid hsla(var(--ettic-otc-accent-h), 80%, 70%, 0.25);
        border-radius: 999px;
        background: linear-gradient(180deg,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) + 6%)) 0%,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l)) 100%
        );
        color: var(--ettic-otc-accent-contrast, #ffffff);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        transition:
            transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 180ms ease,
            background 180ms ease;
    }

    .ettic-otc-body a.ettic-otc-nav__ask:hover,
    .ettic-otc-body a.ettic-otc-nav__ask:focus-visible {
        color: var(--ettic-otc-accent-contrast, #ffffff);
        transform: translateY(-1px);
        background: linear-gradient(180deg,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) + 9%)) 0%,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) + 3%)) 100%
        );
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    }

    .ettic-otc-body a.ettic-otc-nav__ask:active {
        transform: translateY(0);
    }

    .ettic-otc-nav__ask-icon {
        flex-shrink: 0;
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .ettic-otc-body a.ettic-otc-nav__ask:hover .ettic-otc-nav__ask-icon,
    .ettic-otc-body a.ettic-otc-nav__ask:focus-visible .ettic-otc-nav__ask-icon {
        transform: rotate(8deg);
    }

    .ettic-otc-nav__ask-label {
        line-height: 1;
    }

    .ettic-otc-body .ettic-otc-nav__ask--active {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 16px;
        border: 1px solid hsla(var(--ettic-otc-accent-h), 80%, 70%, 0.35);
        border-radius: 999px;
        background: linear-gradient(180deg,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) + 6%)) 0%,
            hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l)) 100%
        );
        color: var(--ettic-otc-accent-contrast, #ffffff);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        cursor: default;
    }

    @media (prefers-reduced-motion: reduce) {
        .ettic-otc-body a.ettic-otc-nav__ask,
        .ettic-otc-nav__ask-icon {
            transition: none;
        }
        .ettic-otc-body a.ettic-otc-nav__ask:hover .ettic-otc-nav__ask-icon {
            transform: none;
        }
    }

    /* ═══════════════════════════════════════════════
       HERO — dark, accent-tinted with subtle gradient
       ═══════════════════════════════════════════════ */

    .ettic-otc-hero {
        background:
            radial-gradient(ellipse 70% 50% at 50% 100%, hsla(var(--ettic-otc-accent-h), 80%, 30%, 0.35) 0%, transparent 70%),
            hsl(var(--ettic-otc-accent-h), 30%, 7%);
        padding-block: var(--ettic-otc-space-20) var(--ettic-otc-space-16);
    }

    .ettic-otc-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--ettic-otc-space-5);
    }

    .ettic-otc-hero__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
        font-size: var(--ettic-otc-text-xs);
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ettic-otc-hero__badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--ettic-otc-success);
    }

    .ettic-otc-hero__title {
        font-size: var(--ettic-otc-text-5xl);
        font-weight: 500;
        color: var(--ettic-otc-white);
        margin: 0;
        line-height: 1.15;
        letter-spacing: -0.025em;
        max-width: 720px;
        text-wrap: balance;
    }

    .ettic-otc-hero__tagline {
        font-size: var(--ettic-otc-text-lg);
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
        max-width: 540px;
        line-height: var(--ettic-otc-leading-normal);
        font-weight: 400;
    }

    .ettic-otc-hero__stats {
        display: flex;
        gap: var(--ettic-otc-space-6);
        margin-top: var(--ettic-otc-space-8);
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
    }

    .ettic-otc-hero__stat {
        display: flex;
        align-items: baseline;
        gap: var(--ettic-otc-space-2);
    }

    .ettic-otc-hero__stat + .ettic-otc-hero__stat::before {
        content: '\00b7';
        color: rgba(255, 255, 255, 0.2);
        font-size: var(--ettic-otc-text-2xl);
        font-weight: 700;
        line-height: 1;
        margin-inline-end: var(--ettic-otc-space-4);
    }

    .ettic-otc-hero__stat-value {
        font-size: var(--ettic-otc-text-2xl);
        font-weight: 600;
        color: var(--ettic-otc-white);
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .ettic-otc-hero__stat-label {
        font-size: var(--ettic-otc-text-sm);
        color: rgba(255, 255, 255, 0.45);
        font-weight: 400;
    }

    /* ═══════════════════════════════════════════════
       SECTIONS — generous spacing, alternating bg
       ═══════════════════════════════════════════════ */

    .ettic-otc-section {
        padding-block: var(--ettic-otc-space-20);
        scroll-margin-top: var(--ettic-otc-nav-height);
    }

    .ettic-otc-section:nth-child(odd) {
        background: var(--ettic-otc-gray-100);
    }

    .ettic-otc-section__header {
        margin-bottom: var(--ettic-otc-space-8);
        text-align: center;
        max-width: 640px;
        margin-inline: auto;
    }

    .ettic-otc-section__label {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
        font-size: var(--ettic-otc-text-xs);
        font-weight: 600;
        color: var(--ettic-otc-accent-text);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: var(--ettic-otc-space-3);
    }

    .ettic-otc-section__label-icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
        opacity: 0.7;
    }

    .ettic-otc-section__title {
        font-size: var(--ettic-otc-text-3xl);
        font-weight: 500;
        color: var(--ettic-otc-gray-900);
        margin: 0 0 var(--ettic-otc-space-3) 0;
        letter-spacing: -0.02em;
        line-height: var(--ettic-otc-leading-tight);
        text-wrap: balance;
    }

    .ettic-otc-section__description {
        font-size: var(--ettic-otc-text-md);
        color: var(--ettic-otc-gray-500);
        margin: 0;
        line-height: var(--ettic-otc-leading-normal);
    }

    .ettic-otc-section__subtitle {
        font-size: var(--ettic-otc-text-lg);
        font-weight: 600;
        color: var(--ettic-otc-gray-800);
        margin: var(--ettic-otc-space-12) 0 var(--ettic-otc-space-6) 0;
    }

    .ettic-otc-section__subtitle:first-of-type {
        margin-top: 0;
    }

    /* ═══════════════════════════════════════════════
       CARD GRID
       ═══════════════════════════════════════════════ */

    .ettic-otc-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--ettic-otc-space-5);
    }

    .ettic-otc-card-grid--3col {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .ettic-otc-card {
        background: var(--ettic-otc-white);
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-lg);
        padding: var(--ettic-otc-space-6);
        box-shadow: var(--ettic-otc-shadow-sm);
        transition: box-shadow var(--ettic-otc-transition), border-color var(--ettic-otc-transition), transform var(--ettic-otc-transition);
    }

    .ettic-otc-card:hover {
        box-shadow: var(--ettic-otc-shadow-lg);
        border-color: var(--ettic-otc-gray-300);
    }

    .ettic-otc-card--clickable {
        cursor: pointer;
    }

    .ettic-otc-card--clickable:hover {
        border-color: var(--ettic-otc-accent-border);
        box-shadow: var(--ettic-otc-shadow-lg);
        transform: translateY(-2px);
    }

    .ettic-otc-card--clickable:active {
        transform: translateY(0);
        box-shadow: var(--ettic-otc-shadow-sm);
    }

    /* ═══════════════════════════════════════════════
       PILLS / BADGES
       ═══════════════════════════════════════════════ */

    .ettic-otc-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 500;
        border-radius: var(--ettic-otc-radius-full);
        line-height: 1.5;
        white-space: nowrap;
    }

    .ettic-otc-pill--active {
        background: var(--ettic-otc-success-bg);
        color: var(--ettic-otc-success-fg);
    }

    .ettic-otc-pill--in_progress,
    .ettic-otc-pill--in-progress {
        background: var(--ettic-otc-warning-bg);
        color: var(--ettic-otc-warning-fg);
    }

    .ettic-otc-pill--expired {
        background: var(--ettic-otc-muted-bg);
        color: var(--ettic-otc-muted-fg);
    }

    .ettic-otc-pill--category {
        background: var(--ettic-otc-accent-light);
        color: var(--ettic-otc-accent-text);
    }

    .ettic-otc-pill__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════════
       CERTIFICATION TILES — compact horizontal cards
       ═══════════════════════════════════════════════ */

    .ettic-otc-cert-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: var(--ettic-otc-space-4);
    }

    .ettic-otc-cert-tile {
        display: flex;
        gap: var(--ettic-otc-space-4);
        padding: var(--ettic-otc-space-5);
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-md);
        background: var(--ettic-otc-white);
    }

    .ettic-otc-cert-tile__badge {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }

    .ettic-otc-cert-tile__badge img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        border-radius: var(--ettic-otc-radius-sm);
    }

    .ettic-otc-cert-tile__badge-placeholder {
        width: 44px;
        height: 44px;
        border-radius: var(--ettic-otc-radius-sm);
        background: var(--ettic-otc-accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ettic-otc-cert-tile__badge-placeholder svg {
        width: 22px;
        height: 22px;
        fill: var(--ettic-otc-accent);
    }

    .ettic-otc-cert-tile__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .ettic-otc-cert-tile__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--ettic-otc-space-3);
    }

    .ettic-otc-cert-tile__name {
        font-size: var(--ettic-otc-text-md);
        font-weight: 600;
        color: var(--ettic-otc-gray-900);
        margin: 0;
        line-height: 1.3;
    }

    .ettic-otc-cert-tile__issuer {
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-500);
        margin: var(--ettic-otc-space-1) 0 0;
    }

    .ettic-otc-cert-tile__description {
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-600, #4b5563);
        line-height: 1.55;
        margin: var(--ettic-otc-space-2) 0 0;
    }

    .ettic-otc-cert-tile__dates {
        font-size: var(--ettic-otc-text-xs);
        color: var(--ettic-otc-gray-400);
        margin: var(--ettic-otc-space-2) 0 0;
    }

    .ettic-otc-cert-tile__artifact {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
        padding-top: var(--ettic-otc-space-3);
        font-size: var(--ettic-otc-text-xs);
        font-weight: 600;
        color: var(--ettic-otc-gray-700, #374151);
        text-decoration: none;
    }

    .ettic-otc-cert-tile__artifact svg {
        fill: currentColor;
    }

    .ettic-otc-cert-tile__artifact:hover {
        color: var(--ettic-otc-accent);
    }

    /* Status indicators (shared with other sections) */

    .ettic-otc-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--ettic-otc-text-xs);
        font-weight: 500;
        white-space: nowrap;
    }

    .ettic-otc-status-indicator__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Three states, one palette: positive (green), in-progress (amber),
       neutral (gray). Cert tier is conveyed by the pill wording, not a
       separate color or marker. */

    .ettic-otc-status-indicator--active {
        color: var(--ettic-otc-success-fg);
    }

    .ettic-otc-status-indicator--active .ettic-otc-status-indicator__dot {
        background: var(--ettic-otc-success);
    }

    .ettic-otc-status-indicator--in_progress,
    .ettic-otc-status-indicator--in-progress {
        color: var(--ettic-otc-warning-fg);
    }

    .ettic-otc-status-indicator--in_progress .ettic-otc-status-indicator__dot,
    .ettic-otc-status-indicator--in-progress .ettic-otc-status-indicator__dot {
        background: var(--ettic-otc-warning);
    }

    .ettic-otc-status-indicator--expired,
    .ettic-otc-status-indicator--neutral {
        color: var(--ettic-otc-gray-500);
    }

    .ettic-otc-status-indicator--expired .ettic-otc-status-indicator__dot,
    .ettic-otc-status-indicator--neutral .ettic-otc-status-indicator__dot {
        background: var(--ettic-otc-gray-400);
    }

    /* ═══════════════════════════════════════════════
       POLICY TABLE
       ═══════════════════════════════════════════════ */

    .ettic-otc-body a.ettic-otc-policy-link {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
        color: var(--ettic-otc-gray-900);
        text-decoration: none;
    }

    .ettic-otc-body a.ettic-otc-policy-link:hover {
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-policy-link__icon {
        width: 16px;
        height: 16px;
        fill: var(--ettic-otc-gray-400);
        flex-shrink: 0;
    }

    /* Policy ID cell — mono reference code, same visual as on the single-policy eyebrow */
    .ettic-otc-policy-ref {
        display: inline-block;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11px;
        font-weight: 500;
        color: var(--ettic-otc-gray-600);
        background: var(--ettic-otc-gray-100);
        padding: 2px 6px;
        border-radius: 3px;
        white-space: nowrap;
        letter-spacing: 0.02em;
    }

    .ettic-otc-policy-ref--empty {
        background: transparent;
        color: var(--ettic-otc-gray-300);
        padding: 0;
    }

    /* Framework citations under the policy title in the listing table */
    .ettic-otc-policy-citations {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
    }

    .ettic-otc-policy-citation {
        display: inline-flex;
        align-items: center;
        padding: 1px 6px;
        background: var(--ettic-otc-accent-subtle);
        color: var(--ettic-otc-accent-text);
        border: 1px solid var(--ettic-otc-accent-border);
        border-radius: 3px;
        font-size: 10px;
        font-weight: 500;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        white-space: nowrap;
    }

    .ettic-otc-policy-actions {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-3);
        justify-content: flex-end;
        white-space: nowrap;
    }

    .ettic-otc-body a.ettic-otc-policy-actions__pdf {
        display: flex;
        align-items: center;
        color: var(--ettic-otc-gray-400);
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-body a.ettic-otc-policy-actions__pdf:hover {
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-body a.ettic-otc-policy-actions__view {
        display: flex;
        align-items: center;
        color: var(--ettic-otc-gray-300);
        font-size: var(--ettic-otc-text-md);
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-body a.ettic-otc-policy-actions__view:hover {
        color: var(--ettic-otc-accent);
    }

    .screen-reader-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ═══════════════════════════════════════════════
       POLICY SINGLE VIEW
       ═══════════════════════════════════════════════ */

    .ettic-otc-policy-single {
        padding-block: var(--ettic-otc-space-12);
    }

    .ettic-otc-policy-single__back {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 500;
        color: var(--ettic-otc-gray-500);
        margin-bottom: var(--ettic-otc-space-8);
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-policy-single__back:hover {
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-policy-single__header {
        margin-bottom: var(--ettic-otc-space-10);
        padding-bottom: var(--ettic-otc-space-8);
        border-bottom: 1px solid var(--ettic-otc-gray-200);
    }

    .ettic-otc-policy-single__title {
        font-size: var(--ettic-otc-text-4xl);
        font-weight: 600;
        color: var(--ettic-otc-gray-900);
        margin: 0 0 var(--ettic-otc-space-5) 0;
        letter-spacing: -0.03em;
        line-height: var(--ettic-otc-leading-tight);
        text-wrap: balance;
    }

    .ettic-otc-policy-single__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ettic-otc-space-2) var(--ettic-otc-space-5);
        align-items: center;
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-500);
    }

    .ettic-otc-policy-single__meta-item {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
    }

    /* Separator dots between meta items */
    .ettic-otc-policy-single__meta-item + .ettic-otc-policy-single__meta-item::before {
        content: '';
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--ettic-otc-gray-300);
        margin-inline-end: var(--ettic-otc-space-3);
    }

    .ettic-otc-policy-single__actions {
        display: flex;
        gap: var(--ettic-otc-space-3);
        margin-top: var(--ettic-otc-space-5);
    }

    .ettic-otc-version-banner {
        background: var(--ettic-otc-warning-bg);
        color: var(--ettic-otc-warning-fg);
        padding: var(--ettic-otc-space-3) var(--ettic-otc-space-5);
        border-radius: var(--ettic-otc-radius-md);
        font-size: var(--ettic-otc-text-sm);
        margin-bottom: var(--ettic-otc-space-8);
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-3);
        border: 1px solid var(--ettic-otc-warning-ring);
    }

    .ettic-otc-version-banner a {
        color: var(--ettic-otc-warning-fg);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .ettic-otc-version-banner--pending {
        background: hsl(210, 50%, 95%);
        color: hsl(210, 60%, 35%);
        border-color: hsl(210, 50%, 85%);
    }

    .ettic-otc-version-banner--pending a {
        color: hsl(210, 60%, 35%);
    }

    /* Upcoming pill (policy list) */
    .ettic-otc-pill--pending {
        background: hsl(210, 50%, 95%);
        color: hsl(210, 60%, 40%);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 2px 8px;
        border-radius: var(--ettic-otc-radius-full);
        margin-left: 6px;
    }

    /* Version history (public) */
    .ettic-otc-version-history-public {
        margin-bottom: var(--ettic-otc-space-6);
    }

    .ettic-otc-version-history-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ettic-otc-font);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 500;
        color: var(--ettic-otc-gray-500);
        background: none;
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-full);
        padding: 6px 14px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .ettic-otc-version-history-toggle:hover {
        color: var(--ettic-otc-gray-700);
        border-color: var(--ettic-otc-gray-300);
        background: var(--ettic-otc-gray-50);
    }

    .ettic-otc-version-history-chevron {
        transition: transform 0.2s ease;
    }

    .ettic-otc-version-history-toggle[aria-expanded="true"] .ettic-otc-version-history-chevron {
        transform: rotate(180deg);
    }

    .ettic-otc-version-list {
        list-style: none;
        margin: var(--ettic-otc-space-3) 0 0;
        padding: 0;
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-md);
        overflow: hidden;
    }

    .ettic-otc-version-list[hidden] {
        display: none;
    }

    .ettic-otc-version-list__item {
        border-bottom: 1px solid var(--ettic-otc-gray-100);
    }

    .ettic-otc-version-list__item:last-child {
        border-bottom: none;
    }

    .ettic-otc-version-list__link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        text-decoration: none;
        color: var(--ettic-otc-gray-700);
        font-size: var(--ettic-otc-text-sm);
        transition: background 0.12s ease;
        white-space: nowrap;
        overflow: hidden;
    }

    a.ettic-otc-version-list__link:hover {
        background: var(--ettic-otc-gray-50);
    }

    .ettic-otc-version-list__link--current {
        background: var(--ettic-otc-gray-50);
    }

    .ettic-otc-version-list__item--active .ettic-otc-version-list__link {
        border-left: 3px solid hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l-safe));
        padding-left: 13px;
    }

    .ettic-otc-version-list__number {
        font-weight: 600;
        color: var(--ettic-otc-gray-900);
        flex-shrink: 0;
    }

    .ettic-otc-version-list__sep {
        color: var(--ettic-otc-gray-300);
        flex-shrink: 0;
    }

    .ettic-otc-version-list__date {
        color: var(--ettic-otc-gray-500);
        flex-shrink: 0;
    }

    .ettic-otc-version-list__summary {
        color: var(--ettic-otc-gray-400);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ettic-otc-version-list__badge {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 2px 8px;
        border-radius: var(--ettic-otc-radius-full);
        background: hsl(142, 50%, 94%);
        color: hsl(142, 50%, 30%);
        margin-left: auto;
    }

    /* Policy content (rendered blocks) */
    .ettic-otc-policy-content {
        font-size: var(--ettic-otc-text-md);
        line-height: 1.8;
        color: var(--ettic-otc-gray-700);
    }

    .ettic-otc-policy-content h1,
    .ettic-otc-policy-content h2,
    .ettic-otc-policy-content h3,
    .ettic-otc-policy-content h4 {
        color: var(--ettic-otc-gray-900);
        margin-top: var(--ettic-otc-space-10);
        margin-bottom: var(--ettic-otc-space-4);
        line-height: var(--ettic-otc-leading-tight);
        font-weight: 650;
        letter-spacing: -0.01em;
    }

    .ettic-otc-policy-content h2 { font-size: var(--ettic-otc-text-2xl); }
    .ettic-otc-policy-content h3 { font-size: var(--ettic-otc-text-xl); }
    .ettic-otc-policy-content h4 { font-size: var(--ettic-otc-text-lg); }

    .ettic-otc-policy-content p {
        margin-top: 0;
        margin-bottom: var(--ettic-otc-space-5);
    }

    .ettic-otc-policy-content ul,
    .ettic-otc-policy-content ol {
        margin-top: 0;
        margin-bottom: var(--ettic-otc-space-5);
        padding-inline-start: var(--ettic-otc-space-6);
    }

    .ettic-otc-policy-content li {
        margin-bottom: var(--ettic-otc-space-2);
    }

    .ettic-otc-policy-content li::marker {
        color: var(--ettic-otc-gray-400);
    }

    .ettic-otc-policy-content table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: var(--ettic-otc-space-8);
        border-radius: var(--ettic-otc-radius-md);
        overflow: hidden;
        border: 1px solid var(--ettic-otc-gray-200);
    }

    .ettic-otc-policy-content th,
    .ettic-otc-policy-content td {
        padding: var(--ettic-otc-space-3) var(--ettic-otc-space-5);
        text-align: left;
    }

    .ettic-otc-policy-content th {
        background: var(--ettic-otc-gray-50);
        font-weight: 600;
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-700);
        border-bottom: 1px solid var(--ettic-otc-gray-200);
    }

    .ettic-otc-policy-content td {
        border-bottom: 1px solid var(--ettic-otc-gray-100);
    }

    .ettic-otc-policy-content tr:last-child td {
        border-bottom: none;
    }

    .ettic-otc-policy-content blockquote {
        border-inline-start: 3px solid var(--ettic-otc-accent);
        margin: 0 0 var(--ettic-otc-space-5) 0;
        padding: var(--ettic-otc-space-4) var(--ettic-otc-space-6);
        color: var(--ettic-otc-gray-600);
        background: var(--ettic-otc-gray-50);
        border-radius: 0 var(--ettic-otc-radius-sm) var(--ettic-otc-radius-sm) 0;
        font-style: italic;
    }

    .ettic-otc-policy-content code {
        font-family: var(--ettic-otc-font-mono);
        font-size: 0.875em;
        background: var(--ettic-otc-gray-100);
        padding: 0.125em 0.4em;
        border-radius: 5px;
        color: var(--ettic-otc-gray-800);
    }

    .ettic-otc-policy-content pre {
        background: var(--ettic-otc-gray-900);
        color: var(--ettic-otc-gray-100);
        padding: var(--ettic-otc-space-5);
        border-radius: var(--ettic-otc-radius-md);
        overflow-x: auto;
        margin-bottom: var(--ettic-otc-space-5);
        font-size: var(--ettic-otc-text-sm);
    }

    .ettic-otc-policy-content pre code {
        background: none;
        padding: 0;
        color: inherit;
    }

    /* ═══════════════════════════════════════════════
       SUBPROCESSOR TABLE
       ═══════════════════════════════════════════════ */

    .ettic-otc-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-lg);
        background: var(--ettic-otc-white);
        box-shadow: var(--ettic-otc-shadow-xs);
    }

    .ettic-otc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--ettic-otc-text-sm);
        table-layout: fixed;
    }

    .ettic-otc-table thead {
        background: var(--ettic-otc-gray-50);
    }

    .ettic-otc-table th {
        padding: var(--ettic-otc-space-3) var(--ettic-otc-space-5);
        text-align: left;
        font-weight: 600;
        color: var(--ettic-otc-gray-600);
        font-size: var(--ettic-otc-text-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--ettic-otc-gray-200);
        white-space: nowrap;
    }

    .ettic-otc-table th[data-ettic-otc-sort] {
        cursor: pointer;
        user-select: none;
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-table th[data-ettic-otc-sort]:hover {
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-table th[data-ettic-otc-sort]::after {
        content: ' \2195';
        font-size: 0.75em;
        opacity: 0.35;
    }

    .ettic-otc-table th[data-ettic-otc-sort-dir="asc"]::after {
        content: ' \2191';
        opacity: 1;
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-table th[data-ettic-otc-sort-dir="desc"]::after {
        content: ' \2193';
        opacity: 1;
        color: var(--ettic-otc-accent);
    }

    .ettic-otc-table td {
        padding: var(--ettic-otc-space-4) var(--ettic-otc-space-5);
        border-bottom: 1px solid var(--ettic-otc-gray-100);
        color: var(--ettic-otc-gray-700);
    }

    .ettic-otc-table td strong {
        color: var(--ettic-otc-gray-900);
        font-weight: 600;
    }

    .ettic-otc-table tbody tr:last-child td {
        border-bottom: none;
    }

    .ettic-otc-table tbody tr {
        transition: background var(--ettic-otc-transition-fast);
    }

    .ettic-otc-table tbody tr:hover {
        background: var(--ettic-otc-gray-25);
    }

    .ettic-otc-table .ettic-otc-dpa-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-1);
        font-size: var(--ettic-otc-text-xs);
        font-weight: 500;
    }

    .ettic-otc-table .ettic-otc-dpa-badge--signed {
        color: var(--ettic-otc-success-fg);
    }

    .ettic-otc-table .ettic-otc-dpa-badge--signed svg {
        fill: var(--ettic-otc-success);
    }

    .ettic-otc-table .ettic-otc-dpa-badge--pending {
        color: var(--ettic-otc-gray-400);
    }

    /* Clampable text cells — 3-line max with "more" toggle */
    .ettic-otc-table__clamp {
        position: relative;
    }

    .ettic-otc-table__clamp-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .ettic-otc-table__clamp-text--expanded {
        -webkit-line-clamp: unset;
    }

    .ettic-otc-table__more {
        font-family: var(--ettic-otc-font);
        font-size: var(--ettic-otc-text-xs);
        font-weight: 500;
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l-safe));
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-top: 2px;
        display: none;
    }

    .ettic-otc-table__more:hover {
        text-decoration: underline;
    }

    /* ═══════════════════════════════════════════════
       UPDATED PILL — "Updated X ago" badge
       ═══════════════════════════════════════════════ */

    .ettic-otc-updated-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: var(--ettic-otc-text-xs);
        font-weight: 500;
        padding: 4px 12px;
        border-radius: var(--ettic-otc-radius-full);
        background: hsl(142, 50%, 94%);
        color: hsl(142, 50%, 30%);
        white-space: nowrap;
        line-height: 1.4;
        margin-bottom: var(--ettic-otc-space-3);
    }

    .ettic-otc-updated-pill svg {
        flex-shrink: 0;
        color: hsl(142, 60%, 40%);
    }

    /* ═══════════════════════════════════════════════
       DATA PRACTICES — category cards with checkmarks
       ═══════════════════════════════════════════════ */

    /* Card grid */
    .ettic-otc-dp-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ettic-otc-space-5);
    }

    /* Card */
    .ettic-otc-dp-card {
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-lg);
        background: var(--ettic-otc-white);
        padding: var(--ettic-otc-space-6);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .ettic-otc-dp-card:hover {
        box-shadow: var(--ettic-otc-shadow-sm);
        border-color: var(--ettic-otc-gray-300);
    }

    /* Card header — title + arrow */
    .ettic-otc-dp-card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--ettic-otc-space-4);
    }

    .ettic-otc-dp-card__head[role="button"] {
        cursor: pointer;
    }

    .ettic-otc-dp-card__head[role="button"]:focus-visible {
        outline: 2px solid var(--ettic-otc-accent);
        outline-offset: 2px;
        border-radius: var(--ettic-otc-radius-sm);
    }

    .ettic-otc-dp-card__title {
        font-size: var(--ettic-otc-text-lg);
        font-weight: 500;
        color: var(--ettic-otc-gray-900);
        margin: 0;
        letter-spacing: -0.01em;
    }

    .ettic-otc-dp-card__arrow {
        flex-shrink: 0;
        color: var(--ettic-otc-gray-400);
        transition: transform 0.2s ease, color 0.15s ease;
    }

    .ettic-otc-dp-card__head:hover .ettic-otc-dp-card__arrow {
        color: var(--ettic-otc-gray-600);
    }

    .ettic-otc-dp-card__head[aria-expanded="true"] .ettic-otc-dp-card__arrow {
        transform: rotate(90deg);
        color: var(--ettic-otc-gray-600);
    }

    /* Checkmark list */
    .ettic-otc-dp-card__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ettic-otc-space-3);
    }

    .ettic-otc-dp-card__list--overflow[hidden] {
        display: none;
    }

    .ettic-otc-dp-card__list--overflow {
        margin-top: var(--ettic-otc-space-3);
    }

    .ettic-otc-dp-card__item {
        display: flex;
        align-items: center;
        gap: var(--ettic-otc-space-3);
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-700);
        line-height: 1.4;
    }

    .ettic-otc-dp-card__check {
        flex-shrink: 0;
        color: hsl(142, 71%, 40%);
    }

    /* "View N more" link */
    .ettic-otc-dp-card__more {
        font-family: var(--ettic-otc-font);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 500;
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l-safe));
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-top: var(--ettic-otc-space-4);
        display: block;
    }

    .ettic-otc-dp-card__more:hover {
        text-decoration: underline;
    }

    .ettic-otc-dp-card__more--hidden {
        display: none;
    }

    /* Expandable detail panel */
    .ettic-otc-dp-card__details[hidden] {
        display: none;
    }

    .ettic-otc-dp-card__details-inner {
        margin-top: var(--ettic-otc-space-4);
        padding-top: var(--ettic-otc-space-4);
        border-top: 1px solid var(--ettic-otc-gray-100);
        display: flex;
        flex-direction: column;
        gap: var(--ettic-otc-space-3);
    }

    .ettic-otc-dp-card__detail {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ettic-otc-dp-card__detail dt {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ettic-otc-gray-400);
    }

    .ettic-otc-dp-card__detail dd {
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-700);
        margin: 0;
        line-height: 1.5;
    }

    /* ═══════════════════════════════════════════════
       BUTTONS
       ═══════════════════════════════════════════════ */

    .ettic-otc-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--ettic-otc-space-2);
        font-family: var(--ettic-otc-font);
        font-size: var(--ettic-otc-text-sm);
        font-weight: 500;
        padding: var(--ettic-otc-space-2) var(--ettic-otc-space-4);
        border-radius: var(--ettic-otc-radius-sm);
        border: 1px solid transparent;
        cursor: pointer;
        transition: all var(--ettic-otc-transition-fast);
        text-decoration: none;
        line-height: 1.5;
    }

    .ettic-otc-body .ettic-otc-btn--primary,
    .ettic-otc-btn--primary {
        background: var(--ettic-otc-accent);
        color: var(--ettic-otc-white);
        border-color: var(--ettic-otc-accent);
    }

    .ettic-otc-body .ettic-otc-btn--primary:hover,
    .ettic-otc-btn--primary:hover {
        background: var(--ettic-otc-accent-hover);
        color: var(--ettic-otc-white);
    }

    .ettic-otc-btn--outline {
        background: var(--ettic-otc-white);
        color: var(--ettic-otc-gray-700);
        border-color: var(--ettic-otc-gray-300);
    }

    .ettic-otc-btn--outline:hover {
        border-color: var(--ettic-otc-gray-400);
        background: var(--ettic-otc-gray-50);
    }

    .ettic-otc-btn:focus-visible {
        outline: 2px solid var(--ettic-otc-accent);
        outline-offset: 2px;
    }

    .ettic-otc-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    /* ═══════════════════════════════════════════════
       EMPTY STATE
       ═══════════════════════════════════════════════ */

    .ettic-otc-empty {
        text-align: center;
        padding: var(--ettic-otc-space-24) var(--ettic-otc-space-8);
        color: var(--ettic-otc-gray-400);
    }

    .ettic-otc-empty__icon {
        margin-bottom: var(--ettic-otc-space-4);
        color: var(--ettic-otc-gray-300);
    }

    .ettic-otc-empty__text {
        font-size: var(--ettic-otc-text-md);
        margin: 0;
        color: var(--ettic-otc-gray-500);
    }

    /* ═══════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════ */

    .ettic-otc-footer {
        border-top: 1px solid var(--ettic-otc-gray-200);
        padding-block: var(--ettic-otc-space-10);
        text-align: center;
        font-size: var(--ettic-otc-text-xs);
        color: var(--ettic-otc-gray-400);
        background: var(--ettic-otc-white);
    }

    .ettic-otc-footer p {
        margin: 0;
    }

    .ettic-otc-footer a {
        color: var(--ettic-otc-gray-400);
        transition: color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-footer a:hover {
        color: var(--ettic-otc-gray-600);
    }

    /* ═══════════════════════════════════════════════
       PRINT
       ═══════════════════════════════════════════════ */

    @media print {
        .ettic-otc-nav,
        .ettic-otc-footer,
        .ettic-otc-policy-single__actions,
        .ettic-otc-policy-single__back {
            display: none !important;
        }

        .ettic-otc-hero {
            background: #fff !important;
            padding-block: var(--ettic-otc-space-8);
        }

        .ettic-otc-hero__title {
            color: #111 !important;
        }

        .ettic-otc-hero__tagline {
            color: #555 !important;
        }

        .ettic-otc-hero__badge {
            color: #333 !important;
        }

        .ettic-otc-hero__stats {
            display: none;
        }

        .ettic-otc-card {
            break-inside: avoid;
            box-shadow: none;
            border: 1px solid #ddd;
        }

        .ettic-otc-section:nth-child(odd) {
            background: #fff;
        }
    }

    /* ═══════════════════════════════════════════════
       REDUCED MOTION
       ═══════════════════════════════════════════════ */

    @media (prefers-reduced-motion: reduce) {
        .ettic-otc-body *,
        .ettic-otc-body *::before,
        .ettic-otc-body *::after {
            transition-duration: 0.01ms !important;
        }
    }

    /* ═══════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════ */

    @media (max-width: 768px) {
        .ettic-otc-hero {
            padding-block: var(--ettic-otc-space-12) var(--ettic-otc-space-10);
        }

        .ettic-otc-hero__title {
            font-size: var(--ettic-otc-text-3xl);
        }

        .ettic-otc-hero__stats {
            gap: var(--ettic-otc-space-4);
        }

        .ettic-otc-hero__stat-value {
            font-size: var(--ettic-otc-text-xl);
        }

        .ettic-otc-nav__brand-name {
            font-size: var(--ettic-otc-text-sm);
        }

        .ettic-otc-nav__links {
            overflow-x: auto;
            scrollbar-width: none;
        }

        .ettic-otc-nav__links::-webkit-scrollbar {
            display: none;
        }

        .ettic-otc-card-grid {
            grid-template-columns: 1fr;
        }

        .ettic-otc-cert-grid {
            grid-template-columns: 1fr;
        }

        .ettic-otc-container {
            padding-inline: var(--ettic-otc-space-5);
        }

        .ettic-otc-section {
            padding-block: var(--ettic-otc-space-10);
        }

        .ettic-otc-section__header {
            margin-bottom: var(--ettic-otc-space-8);
        }

        .ettic-otc-section__title {
            font-size: var(--ettic-otc-text-2xl);
        }

        .ettic-otc-policy-single__title {
            font-size: var(--ettic-otc-text-2xl);
        }

        /* Data practices cards — single column on mobile */
        .ettic-otc-dp-cards {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        .ettic-otc-hero__stats {
            flex-direction: column;
            align-items: center;
            gap: var(--ettic-otc-space-2);
        }

        /* Hide dot separators when stats stack vertically */
        .ettic-otc-hero__stat + .ettic-otc-hero__stat::before {
            display: none;
        }

        .ettic-otc-table th,
        .ettic-otc-table td {
            padding: var(--ettic-otc-space-3) var(--ettic-otc-space-3);
        }
    }

    /* ═══════════════════════════════════════════════
       POLICY SINGLE — eyebrow, ref, citations
       ═══════════════════════════════════════════════ */

    .ettic-otc-policy-single__eyebrow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ettic-otc-space-3);
        margin-bottom: var(--ettic-otc-space-4);
    }

    .ettic-otc-policy-single__ref {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        font-weight: 500;
        color: var(--ettic-otc-gray-500);
        background: var(--ettic-otc-gray-100);
        padding: 3px 8px;
        border-radius: 4px;
        letter-spacing: 0.02em;
    }

    .ettic-otc-policy-single__version {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-gray-500);
    }

    .ettic-otc-policy-single__citations {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: var(--ettic-otc-space-5) 0 0;
        padding: 0;
    }

    .ettic-otc-policy-single__citation {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        background: var(--ettic-otc-accent-subtle);
        color: var(--ettic-otc-accent-text);
        border: 1px solid var(--ettic-otc-accent-border);
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    /* ═══════════════════════════════════════════════
       POLICY SINGLE HERO (compact)
       ═══════════════════════════════════════════════ */

    .ettic-otc-hero--compact {
        padding-block: var(--ettic-otc-space-6);
        background: hsl(var(--ettic-otc-accent-h), 30%, 7%);
    }


    /* ═══════════════════════════════════════════════
       GET IN TOUCH — dark accent-colored section

       Full-bleed dark background using the site's accent hue at high
       saturation + low lightness. Contact rows sit directly on the dark
       surface (no container), company description above them.
       ═══════════════════════════════════════════════ */

    /* Two-class body selector beats `.ettic-otc-section:nth-child(odd)` specificity. */
    .ettic-otc-body .ettic-otc-section--getintouch {
        background:
            radial-gradient(ellipse 60% 50% at 50% 0%,
                hsla(var(--ettic-otc-accent-h), 85%, 40%, 0.25) 0%,
                transparent 70%),
            hsl(var(--ettic-otc-accent-h), 75%, 9%);
        color: rgba(255, 255, 255, 0.82);
        padding-block: var(--ettic-otc-space-20);
    }

    /* Two-column grid: header on the left, contact rows on the right.
       Both columns left-aligned inside their half. */
    .ettic-otc-get-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ettic-otc-space-16);
        align-items: start;
    }

    /* Section header — left column, left-aligned */
    .ettic-otc-get-header {
        text-align: left;
        margin: 0;
        max-width: 520px;
    }

    .ettic-otc-get-header__title {
        font-size: var(--ettic-otc-text-4xl);
        font-weight: 500;
        color: var(--ettic-otc-white);
        margin: 0 0 var(--ettic-otc-space-5) 0;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

    /* Company description — promoted to the previously-"intro" prominence.
       This is now the primary supporting copy under the title. */
    .ettic-otc-get-header__description {
        font-size: var(--ettic-otc-text-lg);
        color: rgba(255, 255, 255, 0.68);
        margin: 0;
        line-height: var(--ettic-otc-leading-normal);
        max-width: 500px;
    }

    /* Row list — editorial definition list. Label sits in a fixed-width
       left column, value stacks on the right at the same size as the
       label. No dividers, no icons, no uppercase eyebrows. */
    .ettic-otc-get-list {
        margin: 0;
        padding: 0;
    }

    .ettic-otc-get-row {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: var(--ettic-otc-space-5);
        align-items: baseline;
        padding: var(--ettic-otc-space-3) 0;
    }

    .ettic-otc-get-row__label {
        margin: 0;
        font-size: var(--ettic-otc-text-sm);
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(255, 255, 255, 0.5);
        line-height: var(--ettic-otc-leading-normal);
    }

    .ettic-otc-get-row__lines {
        display: flex;
        flex-direction: column;
        gap: var(--ettic-otc-space-1);
        margin: 0;
        font-size: var(--ettic-otc-text-sm);
        color: var(--ettic-otc-white);
        line-height: var(--ettic-otc-leading-normal);
        word-break: break-word;
    }

    .ettic-otc-get-row__strong {
        color: var(--ettic-otc-white);
        font-weight: 500;
    }

    .ettic-otc-get-row__lines a {
        /* align-self: start stops the anchor from stretching across the
           whole flex column (a flex-item column-direction gotcha). */
        align-self: flex-start;
        /* All contact-block values share one color for visual consistency;
           link affordance lives in the hover-opacity transition below. */
        color: var(--ettic-otc-white);
        font-weight: 500;
        text-decoration: none;
        transition: opacity var(--ettic-otc-transition-fast);
    }

    .ettic-otc-get-row__lines a:visited {
        color: var(--ettic-otc-white);
    }

    .ettic-otc-get-row__lines a:hover {
        opacity: 0.75;
    }

    @media (max-width: 860px) {
        .ettic-otc-get-inner {
            grid-template-columns: 1fr;
            gap: var(--ettic-otc-space-10);
        }

        .ettic-otc-get-header,
        .ettic-otc-get-header__description {
            max-width: none;
        }
    }

    @media (max-width: 640px) {
        .ettic-otc-body .ettic-otc-section--getintouch {
            padding-block: var(--ettic-otc-space-12);
        }

        .ettic-otc-get-header__title {
            font-size: var(--ettic-otc-text-3xl);
        }

        .ettic-otc-get-header__description {
            font-size: var(--ettic-otc-text-md);
        }

        .ettic-otc-get-row {
            grid-template-columns: 1fr;
            gap: var(--ettic-otc-space-1);
            padding: var(--ettic-otc-space-4) 0;
        }
    }

    /* ═══════════════════════════════════════════════
       FAQ — single bordered container, hairline dividers
       between questions. Corporate dense pattern, not
       floating cards.
       ═══════════════════════════════════════════════ */

    .ettic-otc-faq-list {
        max-width: 780px;
        margin: 0 auto;
        background: var(--ettic-otc-white);
        border: 1px solid var(--ettic-otc-gray-200);
        border-radius: var(--ettic-otc-radius-lg);
        box-shadow: var(--ettic-otc-shadow-sm);
        overflow: hidden;
    }

    .ettic-otc-faq-item {
        border-bottom: 1px solid var(--ettic-otc-gray-200);
    }

    .ettic-otc-faq-item:last-child {
        border-bottom: none;
    }

    .ettic-otc-faq-item__question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ettic-otc-space-4);
        padding: var(--ettic-otc-space-4) var(--ettic-otc-space-6);
        cursor: pointer;
        list-style: none;
        font-size: var(--ettic-otc-text-md);
        font-weight: 600;
        color: var(--ettic-otc-gray-900);
        line-height: var(--ettic-otc-leading-snug);
        transition: background-color var(--ettic-otc-transition-fast);
    }

    .ettic-otc-faq-item__question::-webkit-details-marker { display: none; }
    .ettic-otc-faq-item__question::marker { display: none; content: ''; }

    .ettic-otc-faq-item__question:hover {
        background: var(--ettic-otc-gray-25);
    }

    .ettic-otc-faq-item[open] > .ettic-otc-faq-item__question {
        background: var(--ettic-otc-gray-25);
    }

    .ettic-otc-faq-item__question-text {
        flex: 1 1 auto;
    }

    .ettic-otc-faq-item__chevron {
        flex: 0 0 auto;
        color: var(--ettic-otc-gray-400);
        transition: transform var(--ettic-otc-transition), color var(--ettic-otc-transition);
    }

    .ettic-otc-faq-item[open] .ettic-otc-faq-item__chevron {
        transform: rotate(180deg);
        color: var(--ettic-otc-gray-600);
    }

    .ettic-otc-faq-item__question:focus-visible {
        outline: 2px solid var(--ettic-otc-accent);
        outline-offset: -2px;
    }

    .ettic-otc-faq-item__answer {
        padding: 0 var(--ettic-otc-space-6) var(--ettic-otc-space-5) var(--ettic-otc-space-6);
        color: var(--ettic-otc-gray-600);
        font-size: var(--ettic-otc-text-sm);
        line-height: var(--ettic-otc-leading-normal);
    }

    .ettic-otc-faq-item__answer > *:first-child { margin-top: 0; }
    .ettic-otc-faq-item__answer > *:last-child  { margin-bottom: 0; }

    .ettic-otc-faq-item__answer p { margin: 0 0 var(--ettic-otc-space-3) 0; }

    .ettic-otc-faq-item__answer a {
        color: var(--ettic-otc-accent-text);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .ettic-otc-faq-item__related {
        margin-top: var(--ettic-otc-space-3);
        padding-top: var(--ettic-otc-space-3);
        border-top: 1px dashed var(--ettic-otc-gray-200);
        font-size: var(--ettic-otc-text-xs);
        color: var(--ettic-otc-gray-500);
    }

    .ettic-otc-faq-item__related a {
        color: var(--ettic-otc-accent-text);
        font-weight: 500;
        margin-left: 4px;
    }

    @media (max-width: 640px) {
        .ettic-otc-faq-item__question {
            padding: var(--ettic-otc-space-4) var(--ettic-otc-space-5);
            font-size: var(--ettic-otc-text-base);
        }
        .ettic-otc-faq-item__answer {
            padding: 0 var(--ettic-otc-space-5) var(--ettic-otc-space-4) var(--ettic-otc-space-5);
        }
    }

} /* end @layer ettic-otc */