:root {
    --xo-blue: #1a7bbd;
    --xo-blue-dark: #146294;
    --xo-blue-light: #e8f4fb;
    --xo-charcoal: #2b2b2b;
    --xo-logo-dark: #222f36;
    --xo-logo-dark-deep: #1a252b;
    --xo-grey: #5c5c5c;
    --xo-grey-light: #6c757d;
    --xo-border: #e5e3dd;
    --xo-shadow: rgba(0, 0, 0, 0.06);
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --xo-accent-gradient: linear-gradient(135deg, #d4b87e 0%, #c9a96e 52%, #b8944e 100%);
    --xo-rays: #c9a96e;
    --xo-silver: #aeb6c1;
    --xo-silver-dark: #7c8694;
    --xo-silver-light: #eef1f5;
    --xo-silver-border: #d7dde4;
    --xo-silver-gradient: linear-gradient(135deg, #f3f5f8 0%, #cfd5dd 50%, #aab2be 100%);
    --xo-accent-surface: #faf8f5;
    --xo-accent-shadow: rgba(184, 148, 78, 0.2);
    --hero-bg: #080808;
    --hero-gold: #C9A96E;
    --hero-gold-dark: #b8944e;
    --surface-light: #fbfbfa;
    --surface-page: #fbfbfa;
    --surface-card: #ffffff;
    --border-warm: #e5e3dd;
    --section-shadow: none;
    --section-shadow-hover: 0 2px 4px rgba(26, 24, 20, 0.04), 0 10px 28px rgba(26, 24, 20, 0.06);
    --card-shadow: 0 1px 2px rgba(26, 24, 20, 0.03), 0 4px 14px rgba(26, 24, 20, 0.04);
    --text-primary: #1a1a1a;
    --text-muted: #666666;
    --action-primary: var(--hero-gold);
    --action-primary-hover: #d4b87e;
    --action-primary-text: #0a0a0a;
    --action-focus-ring: rgba(201, 169, 110, 0.35);
    --site-nav-height: 72px;
    --quick-nav-height: 58px;
    --arrange-modal-top: calc(var(--site-nav-height) + var(--quick-nav-height) + 5px);
    --layout-max-width: 1200px;
    --layout-gutter: 14px;

    /* Warm accents (KB articles + highlights) */
    --xo-accent: var(--hero-gold);
    --xo-accent-dark: var(--hero-gold-dark);
    --xo-accent-light: rgba(201, 169, 110, 0.12);
    --xo-accent-border: #e5dcc8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--surface-light);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Site announcement + primary nav (HAL-HOME chrome)
   ========================================================================== */
.site-announcement {
    background: #f0f0ee;
    padding: 10px clamp(20px, 4vw, 48px);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #555555;
}

.site-announcement-inner {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.site-announcement-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    margin: 0;
    text-align: center;
}

.site-announcement-message strong {
    font-weight: 600;
    color: #333333;
}

.site-announcement-sep {
    opacity: 0.45;
}

.site-announcement a {
    color: var(--hero-gold-dark);
    font-weight: 600;
    text-decoration: none;
}

.site-announcement a:hover {
    text-decoration: underline;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 280;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--xo-border);
    box-shadow: 0 1px 6px rgba(26, 123, 189, 0.08);
}

.site-nav-inner {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 10px var(--layout-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.site-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--xo-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.site-nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--xo-charcoal);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav-panel {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-nav-backdrop {
    display: none;
}

.site-nav-logo img {
    display: block;
    height: 56px;
    width: auto;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
}

.site-nav-links a {
    color: var(--xo-grey);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-nav-links a:hover {
    color: var(--xo-blue-dark);
}

.site-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--xo-blue);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.site-nav-cta:hover {
    background: var(--xo-blue-dark);
}

.site-nav--dark {
    background: var(--hero-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.site-nav--dark .site-nav-inner {
    max-width: none;
    padding: 14px clamp(20px, 4vw, 48px);
}

.site-nav--dark .site-nav-logo img {
    height: 60px;
}

.site-nav--dark .site-nav-links a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav--dark .site-nav-links a:hover,
.site-nav--dark .site-nav-links a[aria-current="page"] {
    color: var(--hero-gold);
}

.site-nav--dark .site-nav-cta {
    background: var(--hero-gold);
    color: var(--hero-bg);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
}

.site-nav--dark .site-nav-cta:hover {
    background: #d4b87e;
}

.site-nav--dark .site-nav-toggle {
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
}

.site-nav--dark .site-nav-toggle:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}

.site-nav--dark .site-nav-toggle-bar {
    background: rgba(255, 255, 255, 0.85);
}

/* Mobile hamburger tools — hidden on desktop (panel is horizontal there) */
.site-nav-tools {
    display: none;
}

.quick-nav {
    position: sticky;
    top: var(--site-nav-height, 72px);
    left: 0;
    right: 0;
    z-index: 270;
    min-height: 58px;
    overflow: visible;
    margin: 0;
    background: var(--hero-bg);
    backdrop-filter: blur(10px);
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.quick-nav-inner {
    max-width: var(--layout-max-width);
    min-height: 58px;
    margin: 0 auto;
    padding: 8px var(--layout-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    overflow: visible;
}

.quick-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: visible;
}

.quick-nav-links-scroll {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.quick-nav-links-scroll::-webkit-scrollbar {
    display: none;
}

.quick-nav-btn {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 14px;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.quick-nav-btn {
    color: rgba(255, 255, 255, 0.55);
}

.quick-nav-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.quick-nav-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}

.quick-nav-btn:hover,
.quick-nav-btn:focus-visible {
    background: rgba(201, 169, 110, 0.1);
    color: var(--hero-gold);
    outline: none;
}

.quick-nav-clear.quick-nav-btn:hover,
.quick-nav-clear.quick-nav-btn:focus-visible {
    background: rgba(220, 100, 100, 0.12);
    color: #f0a8a8;
    outline: none;
}

.quick-nav-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-nav-templates,
.quick-nav-campaign {
    position: relative;
    flex: 0 0 auto;
}

.quick-nav-btn[aria-expanded="true"] {
    background: rgba(201, 169, 110, 0.12);
    color: var(--hero-gold);
}

.template-menu,
.campaign-menu {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 220px;
    max-width: 330px;
    max-height: 65vh;
    overflow-y: auto;
    padding: 8px;
    background: white;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(15, 35, 55, 0.18);
    z-index: 320;
}

.campaign-menu,
.template-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.campaign-menu {
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    padding: 6px;
}

.template-menu {
    right: 0;
    transform: translateY(6px);
}

.campaign-menu::before,
.template-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.quick-nav-campaign:hover .campaign-menu,
.quick-nav-campaign:focus-within .campaign-menu,
.quick-nav-campaign.is-open .campaign-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.template-menu[hidden] {
    display: none !important;
}

.quick-nav-templates.is-open .template-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.quick-nav-templates.is-open::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: max(100%, 220px);
    height: 10px;
}

.quick-nav-campaign:hover > .quick-nav-btn,
.quick-nav-campaign:focus-within > .quick-nav-btn,
.quick-nav-campaign.is-open > .quick-nav-btn,
.quick-nav-templates.is-open > .quick-nav-btn {
    background: var(--surface-light);
    color: var(--text-primary);
}

.template-menu-title {
    margin: 0;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xo-grey);
}

.template-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--xo-charcoal);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.template-menu a:hover {
    background: var(--xo-accent-light);
    color: var(--hero-gold-dark);
}

.template-menu a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--hero-gold);
}

.campaign-menu-item {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 52px;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--xo-grey);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.campaign-menu-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.campaign-menu-item:hover,
.campaign-menu-item:focus-visible {
    background: var(--xo-accent-light);
    color: var(--hero-gold-dark);
    outline: none;
}

.template-menu-empty {
    margin: 0;
    padding: 10px;
    font-size: 0.82rem;
    color: var(--xo-grey);
}

.quick-nav-target {
    scroll-margin-top: calc(var(--site-nav-height, 72px) + var(--quick-nav-height, 58px) + 12px);
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 290;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-warm);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--hero-gold-dark);
    box-shadow: 0 2px 12px var(--xo-shadow);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.back-to-top[hidden] {
    display: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--action-primary-text);
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--xo-accent-shadow);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 28px var(--layout-gutter) 20px;
    position: relative;
    z-index: 1;
}

.light-rays-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    opacity: 0.82;
}

.light-rays-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Shared elevation for main page panels */
.member-access-section {
    box-shadow: var(--section-shadow);
}

.site-header {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0;
    background: var(--hero-bg);
    border: 0;
    border-radius: 0;
    padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 56px) clamp(56px, 8vw, 88px);
    min-height: clamp(340px, 48vw, 480px);
    isolation: isolate;
    color: #fff;
}

.site-header-ambience {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.48;
}

.site-header-ambience-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.site-header-decor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    max-height: 440px;
    width: auto;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    opacity: 0.92;
    filter: drop-shadow(0 0 12px rgba(255, 248, 235, 0.22));
    animation: chandelier-lit-pulse 7s ease-in-out infinite;
}

.site-header-decor-left {
    left: 0;
    animation-delay: 0s;
}

.site-header-decor-right {
    right: 0;
    animation-delay: 3.5s;
}

@keyframes chandelier-lit-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 246, 228, 0.16));
        opacity: 0.88;
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 248, 235, 0.28));
        opacity: 0.96;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header-decor {
        animation: none;
        filter: drop-shadow(0 0 12px rgba(255, 246, 228, 0.2));
        opacity: 0.92;
    }
}

.site-header-content {
    position: relative;
    z-index: 2;
}

.site-header-eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold);
}

.site-logo-link {
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto 24px;
    line-height: 0;
    text-decoration: none;
}

.site-logo-link .site-logo {
    margin-bottom: 0;
}

.site-logo {
    display: block;
    max-width: 360px;
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
}

.site-header h1 {
    font-family: var(--font-body);
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    margin-bottom: 14px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.site-header p {
    font-size: clamp(1.02rem, 1.7vw, 1.15rem);
    color: rgba(255, 255, 255, 0.64);
    max-width: 40em;
    margin-inline: auto;
    line-height: 1.55;
}

.search-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 8px;
}

.kb-browse-header {
    max-width: 40rem;
    margin: 0 0 clamp(24px, 3.5vw, 32px);
}

.kb-browse-header--compact {
    margin-bottom: 18px;
}

.kb-browse-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.kb-browse-title {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.kb-browse-header--compact .kb-browse-title {
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    margin-bottom: 0;
}

.kb-browse-lead {
    margin: 0;
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    color: var(--text-muted);
}

.kb-search-panel {
    margin-bottom: clamp(22px, 3vw, 28px);
}

.kb-topics {
    margin-top: 4px;
}

.kb-topics-label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quick-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.quick-search--topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-search-chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ece9e2;
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.quick-search-chip:hover {
    border-color: rgba(201, 169, 110, 0.65);
    background: #fff;
    box-shadow: 0 4px 14px rgba(201, 169, 110, 0.12);
    transform: none;
}

.quick-search-chip.active {
    border-color: var(--hero-gold);
    background: var(--hero-gold);
    color: var(--action-primary-text);
    box-shadow: none;
}

.quick-search-chip.active .quick-search-icon {
    color: var(--action-primary-text);
}

.quick-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--hero-gold-dark);
}

.quick-search-icon svg {
    width: 100%;
    height: 100%;
}

.quick-search-label {
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

.quick-search--policies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.campaign-manager-help {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 18px;
}

.results-section--campaign {
    margin-top: 8px;
}

.policy-topics-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 8px;
}

.policy-topics-section .quick-search--policies {
    margin-bottom: 0;
}

main + .policy-topics-section {
    margin-top: 8px;
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

main + .policy-topics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.calc-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 8px;
    box-shadow: none;
}

.calc-section--standalone {
    margin-top: 0;
    margin-bottom: 40px;
    scroll-margin-top: 88px;
}

.policy-topics-section + .calc-section--standalone {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.policy-topics-section + .calc-section--standalone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.calc-header {
    text-align: left;
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.calc-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.calc-header h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.calc-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
    max-width: none;
}

.calc-article-link-wrap {
    margin: 12px 0 0;
}

.calc-article-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hero-gold-dark);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.calc-article-link:hover,
.calc-article-link:focus-visible {
    color: var(--text-primary);
}

.calc-article-link:focus-visible {
    outline: 2px solid var(--hero-gold-dark);
    outline-offset: 3px;
}

.calc-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.calc-tip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 16px;
    align-items: start;
    max-width: none;
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.28);
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.calc-tip-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.calc-tip p {
    margin: 0;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .calc-tip {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .calc-panel {
        padding: 18px 14px;
    }

    .calc-retail-only-badge {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-field label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.calc-field-sub {
    font-weight: 500;
    color: var(--text-muted);
}

.calc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.calc-retail-only-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.16);
    border: 1px solid rgba(201, 169, 110, 0.35);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
    white-space: nowrap;
}

.calc-retail-only-badge[hidden] {
    display: none;
}

.calc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.calc-input-prefix,
.calc-input-suffix {
    position: absolute;
    color: var(--text-muted);
    font-weight: 600;
    pointer-events: none;
}

.calc-input-prefix {
    left: 14px;
}

.calc-input-suffix {
    right: 14px;
}

.calc-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--surface-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.calc-input-wrap:has(.calc-input-prefix) input {
    padding-left: 28px;
}

.calc-input-wrap:has(.calc-input-suffix) input {
    padding-right: 30px;
}

.calc-fx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 8px;
}

.calc-fx-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid var(--hero-gold);
    border-radius: 999px;
    background: var(--xo-accent-light);
    color: var(--hero-gold-dark);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.calc-fx-btn:hover:not(:disabled),
.calc-fx-btn:focus-visible:not(:disabled) {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
    outline: none;
}

.calc-fx-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.calc-fx-btn--active {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

.calc-fx-note {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
}

.calc-field input:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.calc-field-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.calc-field--computed input {
    border-color: var(--hero-gold);
    background: rgba(201, 169, 110, 0.1);
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.calc-field--computed label::after {
    content: 'auto';
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.calc-btn {
    padding: 12px 24px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.calc-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
}

.calc-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: #ece9e2;
}

.calc-btn--secondary:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

.calc-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 2px;
    background: var(--xo-accent-light);
    border: 1px solid var(--xo-accent-border);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.calc-message[hidden] {
    display: none !important;
}

.calc-retail-only-note {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.28);
    color: var(--hero-gold-dark);
    font-size: 0.88rem;
    line-height: 1.5;
}

.calc-retail-only-note[hidden] {
    display: none !important;
}

.calc-results {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #ece9e2;
}

.calc-results[hidden] {
    display: none !important;
}

.calc-share {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #ece9e2;
}

.calc-share-heading {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-align: left;
}

.calc-share-intro {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: left;
}

.calc-share-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 14px;
}

.calc-share-field {
    margin-bottom: 0;
}

.calc-share-field .calc-field-hint {
    margin-top: 6px;
}

.calc-share-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calc-share-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--surface-light);
}

.calc-share-field input:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
    background: var(--surface-card);
}

.calc-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.calc-share-note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.calc-share-feedback {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d6a4f;
}

.calc-share-feedback[hidden] {
    display: none !important;
}

/* DNS lookup tool */
.dns-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 40px;
    box-shadow: none;
}

.vendor-pricing-section + .dns-section {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.vendor-pricing-section + .dns-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.dns-header {
    text-align: left;
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.dns-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.dns-header h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.dns-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
    max-width: none;
}

.dns-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.dns-mode {
    border: none;
    padding: 0;
    margin: 0 0 18px;
    max-width: none;
}

.dns-mode-legend {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 0;
}

.dns-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dns-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dns-mode-option:has(input:checked) {
    border-color: var(--hero-gold);
    background: rgba(201, 169, 110, 0.08);
    box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.25);
}

.dns-mode-option input {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--hero-gold);
}

.dns-mode-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dns-mode-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.dns-mode-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.dns-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    max-width: none;
    margin: 0;
}

.dns-input-row input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-light);
}

.dns-input-row input:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
    background: var(--surface-card);
}

.dns-btn {
    padding: 12px 22px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.dns-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
}

.dns-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: #ece9e2;
}

.dns-btn--secondary:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

.dns-message {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 2px;
    background: var(--xo-accent-light);
    border: 1px solid var(--xo-accent-border);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: none;
    margin-inline: 0;
}

.dns-message--info {
    background: rgba(201, 169, 110, 0.1);
    border-color: rgba(201, 169, 110, 0.35);
    color: var(--hero-gold-dark);
}

.dns-message--success {
    background: linear-gradient(160deg, #ecfdf3 0%, #d1fae5 100%);
    border-color: #22c55e;
    color: #14532d;
}

.dns-message[hidden] {
    display: none !important;
}

.dns-results {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ece9e2;
}

.dns-results[hidden] {
    display: none !important;
}

.dns-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dns-results:not(.dns-results--subdomain) .dns-result--subdomain-only {
    display: none;
}

.dns-results--subdomain .dns-result--standard {
    display: none;
}

.dns-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
}

.dns-result--wide {
    grid-column: 1 / -1;
}

.dns-result--valid {
    background: linear-gradient(160deg, #ecfdf3 0%, #d1fae5 100%);
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.dns-result--valid .dns-result-label {
    color: #15803d;
}

.dns-result--valid .dns-result-value--text {
    color: #14532d;
    font-weight: 600;
}

.dns-result-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dns-result-value--text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

.dns-fix-actions {
    margin-top: 20px;
    padding: 18px 16px;
    border-radius: 2px;
    border: 1px solid rgba(201, 169, 110, 0.35);
    background: rgba(201, 169, 110, 0.08);
    text-align: left;
}

.dns-fix-actions[hidden] {
    display: none !important;
}

.dns-fix-intro {
    margin: 0 0 14px;
    color: var(--hero-gold-dark);
    font-size: 0.92rem;
    line-height: 1.55;
    text-wrap: balance;
}

/* Member access gate */
.member-access-section {
    background: var(--surface-card);
    border: 0.5px solid var(--border-warm);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.member-access-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px 36px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

.member-access-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.16);
    border: 1px solid rgba(201, 169, 110, 0.35);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.member-access-intro h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--xo-charcoal);
    margin: 0 0 10px;
}

.member-access-lead {
    margin: 0 0 16px;
    color: var(--xo-grey);
    font-size: 1.02rem;
    line-height: 1.55;
}

.member-access-tool-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.member-access-tool-list li + li {
    margin-top: 6px;
}

.member-access-panel {
    padding: 22px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.1) 0%, rgba(201, 169, 110, 0.03) 100%);
    border: 1px solid rgba(201, 169, 110, 0.28);
}

.member-access-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.member-access-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-access-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.member-access-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--xo-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--xo-charcoal);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-access-field input:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.member-access-message {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.member-access-message--error {
    background: rgba(176, 74, 74, 0.08);
    border: 1px solid rgba(176, 74, 74, 0.25);
    color: #8f3a3a;
}

.member-access-message--success {
    background: rgba(201, 169, 110, 0.12);
    border: 1px solid rgba(201, 169, 110, 0.35);
    color: var(--hero-gold-dark);
}

.member-access-message[hidden] {
    display: none !important;
}

.member-access-btn {
    width: 100%;
    padding: 13px 20px;
    border: 2px solid var(--hero-gold);
    border-radius: 8px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.member-access-btn:hover:not(:disabled) {
    background: var(--hero-gold-dark);
    border-color: var(--hero-gold-dark);
    transform: translateY(-1px);
}

.member-access-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.member-access-btn--secondary {
    background: transparent;
    color: var(--hero-gold-dark);
}

.member-access-btn--secondary:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.12);
    color: var(--hero-gold-dark);
}

.member-access-signed-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.member-access-signed-in-copy {
    margin: 0;
    color: var(--xo-charcoal);
    font-size: 0.95rem;
    line-height: 1.5;
}

.member-access-signed-in-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-access-preview-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--hero-gold-dark);
    text-align: center;
}

.member-access-section--preview .member-access-field {
    opacity: 0.72;
}

#premiumTools[hidden],
.premium-tools[hidden] {
    display: none !important;
}

.member-access-lead a {
    color: var(--hero-gold-dark);
    font-weight: 600;
    text-underline-offset: 0.15em;
}

.member-access-lead a:hover {
    color: var(--text-primary);
}

.quick-nav-btn--member {
    color: var(--hero-gold-dark);
}

.quick-nav-btn--member:hover,
.quick-nav-btn--member:focus-visible {
    color: var(--hero-gold-dark);
    border-color: rgba(201, 169, 110, 0.45);
}

/* Google Trends adjacency after DNS */
.dns-section + .trends-section {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.dns-section + .trends-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

/* Google Trends */
.trends-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 40px;
    box-shadow: none;
}

.trends-header {
    text-align: left;
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.trends-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-header h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.trends-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
    max-width: none;
}

.trends-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.trends-home-lighting {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px 16px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ece9e2;
}

.trends-starter {
    margin: 0 0 22px;
    padding: 22px 20px;
    border: 1px solid rgba(201, 169, 110, 0.4);
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
}

.trends-starter[hidden] {
    display: none !important;
}

.trends-starter-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-starter-title {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.trends-starter-lead {
    margin: 0 0 14px;
    max-width: 40rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.trends-starter-lead strong {
    color: var(--text-primary);
    font-weight: 600;
}

.trends-starter-steps {
    margin: 0 0 14px;
    padding: 0 0 0 1.15rem;
    max-width: 34rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.trends-starter-steps li {
    margin-bottom: 4px;
}

.trends-starter-steps li:last-child {
    margin-bottom: 0;
}

.trends-starter-alt {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.trends-home-lighting-reset[hidden] {
    display: none !important;
}

.trends-home-lighting-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px 14px;
}

.trends-field--compact {
    min-width: 0;
}

.trends-field--compact label {
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.trends-field--compact select {
    min-width: 148px;
    padding: 8px 10px;
    font-size: 0.88rem;
}

.trends-field--keyword {
    flex: 1 1 220px;
    min-width: 0;
}

.trends-home-lighting-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.trends-home-lighting-reset {
    padding: 10px 18px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.trends-home-lighting-reset:hover,
.trends-home-lighting-reset:focus-visible {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
    outline: none;
}

.trends-home-lighting-btn {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 10px 18px;
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    animation: trends-cta-pulse 2.4s ease-in-out infinite;
}

.trends-home-lighting-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 255, 255, 0.55) 48%,
        rgba(255, 255, 255, 0.7) 52%,
        transparent 75%
    );
    transform: translateX(-130%);
    animation: trends-cta-sheen 3.2s ease-in-out infinite;
    pointer-events: none;
    clip-path: inset(0);
}

.trends-home-lighting-btn:hover,
.trends-home-lighting-btn:focus-visible {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--action-primary-text);
    outline: none;
    transform: none;
    animation: none;
    box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.35);
}

.trends-home-lighting-btn:hover::after,
.trends-home-lighting-btn:focus-visible::after {
    animation: none;
    opacity: 0;
}

.trends-home-lighting-btn.is-active {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
    animation: none;
    box-shadow: none;
}

.trends-home-lighting-btn.is-active::after {
    animation: none;
    opacity: 0;
}

.trends-home-lighting-rankings {
    max-width: none;
    margin: 0 0 18px;
    padding: 0;
    border-radius: 2px;
    border: 1px solid #ece9e2;
    background: var(--surface-card);
    overflow: hidden;
}

.trends-home-lighting-rankings-head {
    padding: 18px 18px 16px;
    border-bottom: 1px solid #ece9e2;
    background: rgba(201, 169, 110, 0.06);
}

.trends-home-lighting-rankings-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-home-lighting-rankings-title {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    text-align: left;
}

.trends-home-lighting-note {
    margin: 0 0 14px;
    padding: 0;
    max-width: 42rem;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: left;
}

.trends-home-lighting-note[hidden] {
    display: none !important;
}

.trends-home-lighting-rankings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.trends-home-lighting-rankings-meta[hidden] {
    display: none !important;
}

.trends-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ece9e2;
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.trends-meta-chip--legend {
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.1);
    color: var(--hero-gold-dark);
    font-weight: 500;
}

.trends-home-lighting-rankings-list {
    margin: 0;
    padding: 10px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trends-ranking-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 12px;
    border-radius: 2px;
    background: var(--surface-light);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.trends-ranking-item:hover {
    border-color: rgba(201, 169, 110, 0.35);
    background: rgba(201, 169, 110, 0.05);
}

.trends-ranking-rank {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.14);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hero-gold-dark);
    text-align: center;
}

.trends-ranking-item:first-child .trends-ranking-rank {
    background: var(--hero-gold);
    color: var(--action-primary-text);
}

.trends-chip-top-query {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--hero-gold-dark);
    line-height: 1.1;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trends-ranking-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.3;
}

a.trends-ranking-name:hover,
a.trends-ranking-name:focus-visible {
    color: var(--hero-gold-dark);
    text-decoration: underline;
    outline: none;
}

.trends-ranking-query {
    grid-column: 2 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    text-decoration: none;
}

a.trends-ranking-query:hover,
a.trends-ranking-query:focus-visible {
    color: var(--hero-gold-dark);
    text-decoration: underline;
    outline: none;
}

.trends-ranking-stats {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
}

.trends-ranking-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 3.5rem;
}

.trends-ranking-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.trends-ranking-index {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.1;
}

.trends-ranking-change {
    color: var(--hero-gold-dark);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.1;
}

@media (max-width: 560px) {
    .trends-ranking-item {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .trends-ranking-rank {
        grid-row: 1 / span 2;
    }

    .trends-ranking-stats {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 4px;
    }

    .trends-ranking-stat {
        align-items: flex-start;
    }

    .trends-ranking-query {
        grid-column: 1 / -1;
        margin-top: 2px;
        padding-left: 44px;
    }
}

.trends-keyword-suggest {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
    gap: 18px 24px;
    align-items: stretch;
    max-width: none;
    margin: 0 0 18px;
    padding: 20px 20px;
    border-radius: 2px;
    border: 1px solid rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.07);
    text-align: left;
}

.trends-keyword-suggest-copy {
    min-width: 0;
}

.trends-keyword-suggest-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-keyword-suggest-title {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.trends-keyword-suggest-lead {
    margin: 0 0 12px;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.trends-keyword-suggest-reason {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-primary);
    max-width: 40rem;
}

.trends-keyword-suggest-steps {
    margin: 0 0 14px;
    padding: 0 0 0 1.15rem;
    max-width: 38rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.trends-keyword-suggest-steps li {
    margin-bottom: 6px;
}

.trends-keyword-suggest-steps li:last-child {
    margin-bottom: 0;
}

.trends-keyword-suggest-steps strong {
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.trends-keyword-suggest-query {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--hero-gold-dark);
}

.trends-keyword-suggest-query[hidden] {
    display: none !important;
}

.trends-keyword-suggest-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 16px 16px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.trends-keyword-suggest-action-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trends-keyword-suggest-idea-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.trends-keyword-suggest-btn {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: trends-cta-pulse 2.4s ease-in-out infinite;
}

.trends-keyword-suggest-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.65) 52%,
        transparent 75%
    );
    transform: translateX(-130%);
    animation: trends-cta-sheen 3.2s ease-in-out infinite;
    pointer-events: none;
    clip-path: inset(0);
}

.trends-keyword-suggest-btn > * {
    position: relative;
    z-index: 1;
}

.trends-keyword-suggest-btn:hover,
.trends-keyword-suggest-btn:focus-visible {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    outline: none;
    animation: none;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.28);
}

.trends-keyword-suggest-btn:hover::after,
.trends-keyword-suggest-btn:focus-visible::after {
    animation: none;
    opacity: 0;
}

.trends-keyword-suggest-btn-text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.trends-keyword-suggest-btn-hint {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    opacity: 0.85;
}

.trends-keyword-suggest-next {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.trends-keyword-suggest-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.trends-keyword-suggest-stats[hidden] {
    display: none !important;
}

.trends-keyword-suggest-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    min-width: 4.5rem;
}

.trends-keyword-suggest-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.trends-keyword-suggest-stat-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
}

.trends-keyword-suggest-stat-value--change {
    color: var(--hero-gold-dark);
}

.trends-keyword-chip--suggest {
    border-style: dashed;
    border-color: rgba(201, 169, 110, 0.7);
    background: var(--surface-card);
}

@media (max-width: 720px) {
    .trends-keyword-suggest {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.trends-keyword-chip--ranked {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 7px;
    padding-bottom: 7px;
    min-width: 108px;
}

.trends-chip-label {
    line-height: 1.2;
}

.trends-chip-stat {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1.1;
}

.trends-quick-keywords-wrap {
    margin-bottom: 18px;
}

.trends-quick-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 0;
}

.trends-quick-keywords[hidden] {
    display: none !important;
}

.trends-keyword-chip {
    padding: 9px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.trends-keyword-chip:hover {
    background: rgba(201, 169, 110, 0.1);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
    transform: none;
}

.trends-keyword-table {
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
    overflow: hidden;
}

.trends-keyword-table[hidden] {
    display: none !important;
}

.trends-keyword-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 18px;
    padding: 16px 18px;
    border-bottom: 1px solid #ece9e2;
    background: rgba(201, 169, 110, 0.06);
}

.trends-keyword-table-copy {
    min-width: 0;
    max-width: 36rem;
}

.trends-keyword-table-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-keyword-table-title {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.trends-keyword-table-intro {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.trends-keyword-csv-btn {
    flex-shrink: 0;
}

.trends-keyword-table-scroll {
    overflow-x: auto;
}

.trends-keyword-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.trends-keyword-data-table th,
.trends-keyword-data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #ece9e2;
    vertical-align: middle;
}

.trends-keyword-data-table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-light);
    white-space: nowrap;
}

.trends-keyword-data-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.trends-keyword-data-table tbody tr:hover,
.trends-keyword-data-table tbody tr:focus-within {
    background: rgba(201, 169, 110, 0.08);
}

.trends-keyword-data-table tbody tr:last-child td {
    border-bottom: none;
}

.trends-keyword-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.14);
    color: var(--hero-gold-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.trends-keyword-data-table tbody tr:first-child .trends-keyword-rank {
    background: var(--hero-gold);
    color: var(--action-primary-text);
}

.trends-keyword-category {
    font-weight: 600;
    color: var(--text-primary);
}

.trends-keyword-index {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.trends-keyword-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 2px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.2;
}

.trends-keyword-change-arrow {
    font-size: 0.82rem;
    line-height: 1;
}

.trends-keyword-change-value {
    font-size: 0.9rem;
}

.trends-keyword-change--up {
    background: rgba(201, 169, 110, 0.16);
    color: var(--hero-gold-dark);
}

.trends-keyword-change--down {
    background: rgba(176, 58, 58, 0.1);
    color: #8b1e1e;
}

.trends-keyword-change--flat {
    background: var(--surface-light);
    color: var(--text-muted);
}

.trends-keyword-top-query {
    color: var(--text-muted);
    font-size: 0.86rem;
}

@media (max-width: 720px) {
    .trends-keyword-table-head {
        flex-direction: column;
        align-items: stretch;
    }

    .trends-keyword-csv-btn {
        width: 100%;
    }
}

.trends-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    max-width: none;
    margin: 0;
}

.trends-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trends-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trends-field input,
.trends-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--surface-light);
}

.trends-field input:focus,
.trends-field select:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
    background: var(--surface-card);
}

.trends-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trends-btn {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 12px 20px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.trends-btn:not(.trends-btn--secondary):not(.trends-btn--pdf) {
    animation: trends-cta-pulse 2.4s ease-in-out infinite;
}

.trends-btn:not(.trends-btn--secondary):not(.trends-btn--pdf)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.65) 52%,
        transparent 75%
    );
    transform: translateX(-130%);
    animation: trends-cta-sheen 3.2s ease-in-out infinite;
    pointer-events: none;
    clip-path: inset(0);
}

.trends-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
    animation: none;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.28);
}

.trends-btn:hover::after,
.trends-btn:focus-visible::after {
    animation: none;
    opacity: 0;
}

.trends-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: #ece9e2;
    animation: none;
    box-shadow: none;
}

.trends-btn--secondary::after {
    display: none;
}

.trends-btn--secondary:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
    box-shadow: none;
}

.trends-btn--pdf {
    animation: none;
}

.trends-btn--pdf::after {
    display: none;
}

@keyframes trends-cta-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(201, 169, 110, 0.55),
            0 0 10px rgba(201, 169, 110, 0.35);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(201, 169, 110, 0),
            0 0 18px rgba(201, 169, 110, 0.12);
    }
}

@keyframes trends-cta-sheen {
    0%, 55% {
        transform: translateX(-130%);
    }
    75%, 100% {
        transform: translateX(130%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trends-home-lighting-btn,
    .trends-home-lighting-btn::after,
    .trends-keyword-suggest-btn,
    .trends-keyword-suggest-btn::after,
    .trends-btn:not(.trends-btn--secondary):not(.trends-btn--pdf),
    .trends-btn:not(.trends-btn--secondary):not(.trends-btn--pdf)::after {
        animation: none !important;
    }
}

.trends-message {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.28);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: none;
    margin-inline: 0;
}

.trends-message--error {
    background: #fff1f1;
    border-color: #f0b4b4;
    color: #8b1e1e;
}

.trends-message[hidden] {
    display: none !important;
}

.trends-result {
    margin-top: 24px;
    max-width: none;
    margin-inline: 0;
    padding-top: 24px;
    border-top: 1px solid #ece9e2;
}

.trends-result[hidden] {
    display: none !important;
}

.trends-result-card {
    padding: 20px 18px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    text-align: left;
}

.trends-result-label {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trends-result-summary {
    margin: 0 0 18px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    text-wrap: balance;
}

.trends-btn--open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 220px;
}

.trends-result-note {
    margin: 14px 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.trends-result-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ece9e2;
    text-align: left;
}

.trends-btn--pdf {
    min-width: 240px;
}

.trends-pdf-note {
    margin: 10px 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.trends-promo-angles {
    margin-top: 24px;
    text-align: left;
}

.trends-promo-angles[hidden] {
    display: none !important;
}

.trends-promo-heading {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.trends-promo-intro {
    margin: 0 0 18px;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
    text-wrap: balance;
}

.trends-promo-list {
    display: grid;
    gap: 12px;
}

.trends-promo-card {
    padding: 18px 20px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
}

.trends-promo-angle {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.12);
    color: var(--hero-gold-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trends-promo-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.trends-promo-desc {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.trends-promo-brands {
    margin-bottom: 12px;
}

.trends-promo-brands-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trends-promo-brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trends-promo-brand {
    padding: 5px 12px;
    border: 1px solid #ece9e2;
    border-radius: 999px;
    background: var(--surface-card);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trends-promo-banners {
    margin-bottom: 12px;
}

.trends-promo-banners-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-promo-banners-hint {
    margin: 0 0 12px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.trends-promo-copy-group {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.trends-promo-copy-group legend {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-promo-copy-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trends-promo-copy-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.06);
    border: 1px dashed rgba(201, 169, 110, 0.45);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.trends-promo-copy-option:hover {
    border-color: rgba(201, 169, 110, 0.75);
    background: rgba(201, 169, 110, 0.1);
}

.trends-promo-copy-option:has(input:checked) {
    border-style: solid;
    border-color: var(--hero-gold);
    background: rgba(201, 169, 110, 0.12);
}

.trends-promo-copy-option input {
    margin-top: 3px;
    accent-color: var(--hero-gold-dark);
    flex-shrink: 0;
}

.trends-promo-copy-type {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-promo-copy-text {
    display: block;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.trends-promo-copy-body {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-style: italic;
}

.trends-promo-merch-label {
    display: block;
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trends-promo-builder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 10px 16px;
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.trends-promo-builder-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--action-primary-text);
}

.trends-promo-banner-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trends-promo-banner {
    padding: 8px 12px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.06);
    border: 1px dashed rgba(201, 169, 110, 0.45);
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.trends-promo-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
    text-decoration: none;
}

.trends-promo-link:hover {
    text-decoration: underline;
}

.trends-ads-keywords {
    margin-top: 28px;
    text-align: left;
}

.trends-ads-keywords[hidden] {
    display: none !important;
}

.trends-ads-tips {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.28);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.trends-ads-tips p {
    margin: 0 0 6px;
}

.trends-ads-tips p:last-child {
    margin-bottom: 0;
}

.trends-ads-tier {
    margin-bottom: 18px;
}

.trends-ads-tier-title {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.trends-ads-table-wrap {
    overflow-x: auto;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.trends-ads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.trends-ads-table th,
.trends-ads-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #ece9e2;
    vertical-align: top;
}

.trends-ads-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-light);
}

.trends-ads-table tbody tr:last-child td {
    border-bottom: none;
}

.trends-ads-kw {
    font-weight: 600;
    color: var(--text-primary);
}

.trends-ads-intent {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.trends-ads-intent--high {
    background: rgba(201, 169, 110, 0.18);
    color: var(--hero-gold-dark);
}

.trends-ads-intent--medium {
    background: rgba(201, 169, 110, 0.1);
    color: var(--hero-gold-dark);
}

.trends-ads-intent--local {
    background: rgba(26, 26, 26, 0.06);
    color: var(--text-primary);
}

.trends-ads-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.trends-ads-negatives {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 2px;
    border: 1px dashed #ece9e2;
    background: var(--surface-light);
}

.trends-ads-negatives-title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trends-ads-negative-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trends-ads-negative-list li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Campaign Manager */
.campaign-manager-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 40px;
    box-shadow: none;
}

.trends-section + .campaign-manager-section {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.trends-section + .campaign-manager-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.campaign-manager-header {
    text-align: left;
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.campaign-manager-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-manager-header h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.campaign-manager-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
    max-width: none;
}

.campaign-manager-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.campaign-upcoming-promo {
    margin-bottom: 22px;
}

.campaign-upcoming-promo[hidden] {
    display: none !important;
}

.campaign-upcoming-promo-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "copy palette"
        "actions actions";
    gap: 16px 20px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 2px;
    border: 1px solid rgba(201, 169, 110, 0.35);
    background: rgba(201, 169, 110, 0.08);
    box-shadow: none;
}

.campaign-upcoming-promo-copy {
    grid-area: copy;
    min-width: 0;
}

.campaign-upcoming-promo-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-upcoming-promo-title {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.campaign-upcoming-promo-timing {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.campaign-upcoming-promo-headline {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.campaign-upcoming-promo-palette {
    grid-area: palette;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.campaign-upcoming-promo-swatch {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    border: 1px solid rgba(8, 8, 8, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.campaign-upcoming-promo-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.campaign-upcoming-promo-btn {
    flex: 0 1 auto;
}

@media (max-width: 720px) {
    .campaign-upcoming-promo-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "palette"
            "actions";
    }

    .campaign-upcoming-promo-palette {
        justify-content: flex-start;
    }
}

.campaign-manager-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.campaign-manager-actions--dual {
    margin-bottom: 0;
}

.campaign-manager-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: #ece9e2;
}

.campaign-manager-btn--secondary:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

.campaign-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ece9e2;
    min-height: 0;
}

.campaign-builder-selection {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 4px 12px 12px;
    border: none;
    background: transparent;
    text-align: center;
}

.campaign-builder-selection[hidden] {
    display: none !important;
}

.campaign-builder-selection-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    text-align: center;
    text-wrap: balance;
}

.campaign-builder-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    overflow: hidden;
}

@media (min-width: 901px) {
    .campaign-builder-column {
        max-height: calc(100vh - var(--arrange-modal-top) - 24px);
    }

    .campaign-builder-editor {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 24px 10px 32px 8px;
        scroll-padding-top: 24px;
        scroll-padding-bottom: 32px;
        scrollbar-gutter: stable;
    }
}

.campaign-builder-layout[hidden] {
    display: none !important;
}

.campaign-builder-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.campaign-builder-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.campaign-builder-downloads {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--xo-border);
}

.campaign-builder-downloads-label {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-builder-preview .campaign-builder-actions-row--downloads {
    gap: 10px;
}

.campaign-builder-preview .campaign-builder-actions-row--downloads .campaign-btn {
    flex: 1 1 auto;
    min-width: 0;
}

.campaign-builder-email-sync {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--xo-border);
}

.campaign-builder-sync-email-btn {
    width: 100%;
}

.campaign-builder-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 2px 2px 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.campaign-workspace-block {
    padding: 18px 18px 22px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.campaign-workspace-block:last-child {
    border-bottom: 1px solid #ece9e2;
}

.campaign-workspace-block--keywords {
    background: rgba(201, 169, 110, 0.06);
}

.campaign-workspace-block--colors.campaign-fieldset {
    border: 1px solid #ece9e2;
    border-radius: 2px;
    margin: 0;
    padding: 18px 18px 22px;
}

.campaign-workspace-block--colors .campaign-field {
    margin-bottom: 0;
}

.campaign-workspace-block--palettes {
    padding: 18px 18px 22px;
}

.campaign-workspace-block--palettes.campaign-palette-studio {
    margin: 0;
    border-radius: 2px;
    border: 1px solid rgba(201, 169, 110, 0.35);
    box-shadow: none;
    background: rgba(201, 169, 110, 0.08);
}

.campaign-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.campaign-workspace-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-workspace-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.16);
    border: 1px solid rgba(201, 169, 110, 0.35);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
    white-space: nowrap;
}

.campaign-workspace-keywords-placeholder {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--xo-grey-light);
}

.campaign-keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.campaign-workspace-block--copy-options {
    background: linear-gradient(180deg, rgba(201, 169, 110, 0.07) 0%, var(--surface-card, #faf8f5) 100%);
}

.campaign-copy-options-intro {
    margin: 0 0 14px;
}

.campaign-copy-options-context-wrap {
    margin-bottom: 8px;
}

.campaign-copy-options-context {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--xo-charcoal);
}

.campaign-copy-options-timing {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--hero-gold-dark);
    font-weight: 600;
}

.campaign-copy-options-tone {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #5c5c5c;
    font-style: italic;
}

.campaign-copy-options-wordbank {
    margin-bottom: 12px;
}

.campaign-copy-wordbank-label {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-copy-wordbank-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-copy-wordbank-chip {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.14);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.campaign-copy-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.campaign-copy-options-list--playbook {
    margin-top: 12px;
}

.campaign-copy-option {
    padding: 12px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.campaign-copy-option-head {
    margin-bottom: 8px;
}

.campaign-copy-option-source {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-copy-option-label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--xo-charcoal);
    line-height: 1.35;
}

.campaign-copy-option-headline {
    margin: 0 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--xo-charcoal);
}

.campaign-copy-option-body {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #5c5c5c;
}

.campaign-copy-option-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaign-copy-option-actions .campaign-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.78rem;
}

.campaign-copy-options-playbook {
    margin-top: 4px;
    font-size: 0.82rem;
}

.campaign-copy-options-playbook summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--hero-gold-dark);
    list-style: none;
}

.campaign-copy-options-playbook summary::-webkit-details-marker {
    display: none;
}

.campaign-copy-options-playbook[open] summary {
    margin-bottom: 8px;
}

.campaign-copy-playbook-label {
    display: block;
    margin: 8px 0 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-copy-playbook-select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--xo-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--xo-charcoal);
    background: #fff;
}

.campaign-copy-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-copy-row {
    width: 100%;
    min-width: 0;
}

.campaign-copy-row .campaign-field {
    margin: 0;
}

.campaign-copy-row-empty {
    padding: 8px 10px;
    border: 1px dashed rgba(8, 8, 8, 0.16);
    border-radius: 8px;
    background: rgba(8, 8, 8, 0.02);
}

.campaign-copy-row-empty .campaign-field-head {
    margin-bottom: 0;
}

.campaign-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.campaign-field-head label,
.campaign-field-head .campaign-field-label {
    margin-bottom: 0;
}

.campaign-copy-toggle-btn {
    padding: 3px 10px;
    font-size: 0.68rem;
    flex-shrink: 0;
    min-width: 4.5rem;
}

/* Legacy alias — keep stacked layout if old class remains */
.campaign-copy-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-promo-offer {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.campaign-promo-offer-intro {
    margin-bottom: 10px;
}

.campaign-type-row--promo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.campaign-promo-preview {
    margin: 12px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px dashed rgba(201, 169, 110, 0.55);
    background: #fffdf9;
}

.campaign-promo-preview-label {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-promo-preview-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campaign-promo-preview-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.campaign-promo-preview-row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--xo-grey-light);
}

.campaign-promo-preview-row dd {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--xo-charcoal);
}

.campaign-promo-apply-btn {
    width: 100%;
}

.campaign-promo-apply-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.campaign-workspace-details {
    margin-top: 12px;
    font-size: 0.82rem;
}

.campaign-workspace-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--xo-charcoal);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.campaign-workspace-details summary::-webkit-details-marker {
    display: none;
}

.campaign-workspace-details summary::before {
    content: '▸';
    font-size: 0.72rem;
    color: var(--hero-gold-dark);
    transition: transform 0.15s ease;
}

.campaign-workspace-details[open] summary::before {
    transform: rotate(90deg);
}

.campaign-workspace-details[open] summary {
    margin-bottom: 8px;
}

.campaign-hint--inline {
    margin: 8px 0 0;
    font-size: 0.72rem;
}

.campaign-field--compact {
    gap: 4px;
    margin-bottom: 0;
}

.campaign-field--compact label {
    font-size: 0.78rem;
}

.campaign-field--compact textarea {
    min-height: 64px;
    padding: 8px 10px;
    font-size: 0.86rem;
    font-family: Georgia, "Times New Roman", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", emoji, sans-serif;
}

.campaign-type-row--compact {
    gap: 10px;
}

.campaign-editor-typography {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.campaign-workspace-subtitle {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-type-row--align {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.campaign-type-row--text-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.campaign-type-row--text-colors .campaign-banner-color-picker {
    margin: 0;
}

.campaign-align-toggle {
    display: inline-flex;
    width: 100%;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-card);
}

.campaign-align-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.campaign-align-toggle label {
    flex: 1;
    padding: 7px 8px;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    color: var(--xo-charcoal);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}

.campaign-align-toggle label:not(:first-of-type) {
    border-left: 1px solid var(--xo-border);
}

.campaign-align-toggle input:checked + label {
    background: var(--hero-gold);
    color: #1a1a1a;
}

.campaign-align-toggle label:hover {
    background: rgba(201, 169, 110, 0.12);
}

.campaign-align-toggle input:checked + label:hover {
    background: var(--hero-gold);
}

.campaign-type-row--colors {
    grid-template-columns: repeat(3, 1fr);
}

.campaign-fieldset--colors {
    padding: 12px 14px 14px;
}

.campaign-fieldset--colors legend {
    font-size: 0.72rem;
}

.campaign-fieldset--colors .campaign-field input[type="color"] {
    height: 36px;
}

.campaign-banner-colors-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
    max-width: 220px;
}

.campaign-banner-color-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.campaign-banner-color-picker label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-banner-color-picker input[type="color"] {
    width: 100%;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--xo-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.campaign-banner-bg-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px dashed rgba(201, 169, 110, 0.35);
    border-radius: 10px;
    background: rgba(201, 169, 110, 0.04);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-banner-bg-image--drag {
    border-color: var(--hero-gold);
    background: rgba(201, 169, 110, 0.12);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-banner-bg-upload-btn {
    width: 100%;
    justify-content: center;
}

.campaign-banner-bg-image-active {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.campaign-banner-bg-image-preview {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--xo-border);
    background-color: rgba(201, 169, 110, 0.08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.campaign-banner-bg-image-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.campaign-image-overlay-controls {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.campaign-overlay-fade-preview-wrap {
    margin-bottom: 12px;
}

.campaign-overlay-fade-preview {
    height: 36px;
    margin-top: 6px;
    border-radius: 8px;
    border: 1px solid var(--xo-border);
    background: linear-gradient(to bottom, rgba(8, 8, 8, 0.45), rgba(255, 255, 255, 0.45));
}

.campaign-type-row--overlay-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.campaign-type-row--overlay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
}

.campaign-field--overlay-slider input[type="range"] {
    width: 100%;
    margin-top: 6px;
    accent-color: var(--hero-gold-dark);
}

.campaign-field--overlay-slider label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.campaign-banner-bg-image-name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--xo-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-banner-bg-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaign-banner-bg-replace-btn,
.campaign-banner-bg-remove-btn {
    padding: 6px 12px;
    font-size: 0.72rem;
}

.campaign-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-bg-mode {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.1);
    border: 1px solid rgba(201, 169, 110, 0.22);
}

.campaign-bg-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}

.campaign-bg-mode-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.campaign-bg-mode-option span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-bg-mode-option input:checked + span {
    background: var(--hero-gold);
    color: var(--action-primary-text);
}

.campaign-bg-panel {
    margin-top: 8px;
}

.campaign-bg-panel[hidden] {
    display: none !important;
}

.campaign-bg-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 112px;
    padding: 14px 12px;
    border: 2px dashed rgba(201, 169, 110, 0.45);
    border-radius: 10px;
    background-color: rgba(201, 169, 110, 0.06);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--hero-gold-dark);
    font-family: var(--font-body);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-bg-dropzone:hover,
.campaign-bg-dropzone:focus-visible {
    border-color: var(--hero-gold);
    background-color: rgba(201, 169, 110, 0.12);
    outline: none;
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-bg-dropzone--drag {
    border-color: var(--hero-gold);
    background-color: rgba(201, 169, 110, 0.16);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-bg-dropzone--filled {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    border-style: solid;
}

.campaign-bg-dropzone--filled::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 100%);
    pointer-events: none;
}

.campaign-bg-dropzone-icon,
.campaign-bg-dropzone-title,
.campaign-bg-dropzone-sub {
    position: relative;
    z-index: 1;
}

.campaign-bg-dropzone-icon {
    display: inline-flex;
    opacity: 0.9;
}

.campaign-bg-dropzone-title {
    font-size: 0.84rem;
    font-weight: 700;
}

.campaign-bg-dropzone-sub {
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0.92;
    max-width: 220px;
}

.campaign-field--background {
    min-width: 0;
}

.campaign-bg-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.campaign-bg-upload-btn,
.campaign-bg-clear-btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.campaign-bg-upload-btn {
    border: 1px solid var(--hero-gold);
    background: var(--xo-accent-light);
    color: var(--hero-gold-dark);
}

.campaign-bg-upload-btn:hover {
    background: var(--hero-gold);
    color: var(--action-primary-text);
}

.campaign-bg-clear-btn {
    border: 1px solid var(--border-warm);
    background: #fff;
    color: var(--text-muted);
}

.campaign-bg-clear-btn:hover {
    border-color: var(--hero-gold);
    color: var(--hero-gold-dark);
}

.campaign-bg-image-name {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.campaign-preview-review-swatch--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 720px) {
    .campaign-type-row--promo {
        grid-template-columns: 1fr;
    }

    .campaign-type-row--colors {
        grid-template-columns: 1fr;
    }

    .campaign-banner-colors-row {
        grid-template-columns: 1fr;
    }

    .campaign-banner-bg-image-active {
        grid-template-columns: 1fr;
    }

    .campaign-type-row--overlay {
        grid-template-columns: 1fr;
    }

    .campaign-type-row--overlay-colors {
        grid-template-columns: 1fr;
    }

    .campaign-banner-bg-image-preview {
        width: 100%;
        height: 120px;
    }
}

.campaign-fieldset {
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    padding: 16px 16px 18px;
    margin: 0;
}

.campaign-fieldset legend {
    padding: 0 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hero-gold-dark);
}

.campaign-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.campaign-field:last-child {
    margin-bottom: 0;
}

.campaign-field label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-field input[type="text"],
.campaign-field input[type="url"],
.campaign-field select,
.campaign-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--surface-light);
}

.campaign-field textarea {
    resize: vertical;
    min-height: 88px;
}

.campaign-field input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    cursor: pointer;
}

.campaign-field input:focus,
.campaign-field select:focus,
.campaign-field textarea:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-type-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.campaign-optional {
    font-weight: 400;
    color: var(--xo-grey-light);
}

.campaign-field input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--surface-light);
}

.campaign-hint {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--xo-grey-light);
    line-height: 1.45;
}

.campaign-builder-preview {
    position: sticky;
    top: var(--arrange-modal-top);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    align-self: start;
    max-height: calc(100vh - var(--arrange-modal-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 18px;
    border-radius: 12px;
    border: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
    box-shadow: var(--card-shadow);
    scrollbar-gutter: stable;
}

.campaign-preview-frame-head {
    margin-bottom: 2px;
}

.campaign-preview-frame-eyebrow {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-preview-frame-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xo-charcoal);
    line-height: 1.25;
}

.campaign-preview-review {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--xo-border);
    background: #fff;
}

.campaign-preview-review-title {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-preview-review-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-preview-review-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.campaign-preview-review-row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--xo-grey-light);
}

.campaign-preview-review-row dd {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--xo-charcoal);
}

.campaign-preview-review-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
}

.campaign-preview-review-colors {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-preview-review-color-labels {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: #8a8175;
    word-break: break-word;
}

.campaign-preview-review-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(8, 8, 8, 0.12);
    flex-shrink: 0;
}

.campaign-preview-review-copy {
    word-break: break-word;
}

.campaign-preview-review-copy--headline {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    white-space: pre-wrap;
    color: var(--xo-charcoal, #2b2b2b);
}

.campaign-preview-review-copy--body {
    white-space: pre-wrap;
    color: var(--xo-charcoal, #2b2b2b);
}

.campaign-preview-review-row--copy dd {
    font-size: 0.82rem;
    line-height: 1.5;
}

.campaign-palette-protip {
    margin: 0 0 14px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #5c5c5c;
}

.campaign-palette-studio {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px 18px 18px;
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.45);
    background: linear-gradient(160deg, var(--xo-accent-light) 0%, var(--surface-card, #faf8f5) 52%, #fff 100%);
    box-shadow: var(--card-shadow);
}

.campaign-palette-studio-head {
    margin-bottom: 8px;
}

.campaign-palette-studio-eyebrow {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-palette-studio-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xo-charcoal);
    line-height: 1.25;
}

.campaign-palette-studio .campaign-palette-grid {
    margin-bottom: 12px;
}

.campaign-palette-studio .campaign-preview-palette-guide {
    margin-top: 4px;
    border: 1px solid rgba(201, 169, 110, 0.35);
}

.campaign-palette-schedule-prose {
    margin: 6px 0 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--xo-charcoal);
}

.campaign-palette-schedule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-hint--colors-sync {
    margin: 0 0 14px;
    font-size: 0.76rem;
}

.campaign-palette-status--planning {
    background: rgba(92, 92, 92, 0.1);
    color: #5c5c5c;
}

.campaign-palette-card {
    cursor: pointer;
}

.campaign-palette-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-palette-card-compact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.campaign-palette-card-compact-actions .campaign-palette-use-btn {
    flex-shrink: 0;
}

.campaign-palette-card-compact-actions .campaign-palette-why {
    flex: 1 1 auto;
    min-width: 0;
}

.campaign-palette-card--compact {
    cursor: pointer;
}

.campaign-palette-card--compact:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-preview-palette-guide-empty-title {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--xo-charcoal);
}

.campaign-preview-palette-guide-empty p {
    margin: 0 0 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--xo-grey-light);
}

.campaign-preview-palette-guide-empty-note {
    font-size: 0.72rem !important;
}

.campaign-preview-palette-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.campaign-preview-palette-status--preview {
    background: rgba(201, 169, 110, 0.18);
    color: var(--hero-gold-dark);
}

.campaign-preview-palette-status--applied {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.campaign-preview-palette-status--custom {
    background: rgba(26, 123, 189, 0.12);
    color: var(--xo-blue-dark, #135a8c);
}

.campaign-preview-palette-status-note {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #5c5c5c;
}

.campaign-preview-palette-apply-row {
    margin-top: 2px;
}

.campaign-preview-palette-apply-btn {
    width: 100%;
}

.campaign-preview-palette-visual-label {
    margin: 0 0 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    mix-blend-mode: difference;
}

.campaign-preview-palette-guide.is-preview .campaign-preview-palette-visual-label {
    mix-blend-mode: normal;
    color: var(--xo-grey-light);
}

.campaign-preview-palette-guide-empty {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.campaign-preview-palette-guide-empty p:last-child {
    margin-bottom: 0;
}

.campaign-preview-palette-guide {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    background: linear-gradient(160deg, var(--xo-accent-light) 0%, #fff 48%);
}

.campaign-preview-palette-guide-empty {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--xo-grey-light);
    text-align: center;
}

.campaign-preview-palette-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.campaign-preview-palette-guide-eyebrow {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-preview-palette-guide-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xo-charcoal);
    line-height: 1.25;
}

.campaign-preview-palette-guide-timing {
    margin: 4px 0 0;
    font-size: 0.74rem;
    color: var(--xo-grey-light);
}

.campaign-preview-palette-visual {
    padding: 14px 12px;
    border-radius: 8px;
    border: 1px solid rgba(8, 8, 8, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.campaign-preview-palette-visual-headline {
    margin: 0 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.campaign-preview-palette-visual-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.campaign-preview-palette-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-preview-palette-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campaign-preview-palette-section-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-preview-palette-why {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #5c5c5c;
}

.campaign-preview-palette-roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.campaign-preview-palette-role {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.campaign-preview-palette-role-chip {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(8, 8, 8, 0.12);
    flex-shrink: 0;
}

.campaign-preview-palette-role-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.campaign-preview-palette-role-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--xo-charcoal);
}

.campaign-preview-palette-role-meta {
    font-size: 0.68rem;
    color: var(--xo-grey-light);
}

.campaign-preview-palette-role-desc {
    margin: 2px 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #5c5c5c;
}

.campaign-preview-palette-finishes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campaign-preview-palette-finish {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--xo-border);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-preview-palette-finish-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(8, 8, 8, 0.1);
}

.campaign-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.campaign-preview-label {
    margin: 0;
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
    line-height: 1.35;
}

.campaign-preview-nav {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--hero-gold);
    border-radius: 999px;
    background: var(--xo-accent-light);
    color: var(--hero-gold-dark);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.campaign-preview-nav--next:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
    transform: translateX(2px);
}

.campaign-preview-nav--prev:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
    transform: translateX(-2px);
}

.campaign-preview-nav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-preview-canvas-wrap {
    position: relative;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    overflow: visible;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.04) 0%, rgba(8, 8, 8, 0.02) 100%);
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    flex-shrink: 0;
    margin-top: 4px;
    cursor: zoom-in;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-preview-canvas-wrap[data-shape="tall"] {
    min-height: 0;
    padding: 32px 16px 18px;
    margin-top: 8px;
}

.campaign-preview-canvas-wrap[data-shape="wide"] {
    min-height: 88px;
}

.campaign-preview-canvas-wrap[data-shape="medium"] {
    min-height: 120px;
}

.campaign-preview-canvas-wrap:hover {
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 2px var(--action-focus-ring);
}

.campaign-preview-canvas-wrap:focus-visible {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.campaign-preview-expand-hint {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--xo-grey-light);
    pointer-events: none;
}

.campaign-preview-stage {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(8, 8, 8, 0.12);
    max-width: 100%;
}

.campaign-preview-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.campaign-preview-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.campaign-preview-stage:hover .campaign-preview-overlay,
.campaign-preview-stage:focus-within .campaign-preview-overlay {
    opacity: 1;
    pointer-events: auto;
}

.campaign-preview-arrange-btn {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.74rem;
    padding: 6px 12px;
    white-space: nowrap;
}

.campaign-palette-schedule-intro {
    margin-bottom: 14px;
}

.campaign-palette-schedule-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    font-size: 0.74rem;
    color: var(--xo-grey-light);
}

.campaign-palette-schedule-date {
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-palette-schedule-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.06);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-palette-schedule-chip--active {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.campaign-palette-section {
    margin-bottom: 18px;
}

.campaign-palette-section:last-child {
    margin-bottom: 0;
}

.campaign-palette-section-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-palette-section-hint {
    margin: 0 0 10px;
}

.campaign-palette-section-subtitle {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-palette-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.campaign-palette-section-grid--summer {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 4px;
}

.campaign-palette-card--landscape {
    gap: 12px;
    padding: 16px 18px 18px;
}

.campaign-palette-card--landscape .campaign-palette-card-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.campaign-palette-card--landscape .campaign-palette-card-title {
    font-size: 0.92rem;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.campaign-palette-card--landscape .campaign-palette-card-timing {
    font-size: 0.74rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.campaign-palette-card--landscape .campaign-palette-card-compact-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding-top: 2px;
}

.campaign-palette-card--landscape .campaign-palette-use-btn {
    flex-shrink: 0;
}

.campaign-palette-preview-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.campaign-palette-preview-bar {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    gap: 0;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(8, 8, 8, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.campaign-palette-preview-segment {
    display: block;
    min-height: 52px;
}

.campaign-palette-preview-meta {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    gap: 10px;
    min-width: 0;
}

.campaign-palette-preview-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.campaign-palette-preview-meta-role {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-palette-preview-meta-name,
.campaign-palette-preview-meta-hex {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--xo-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-palette-preview-meta-hex {
    color: var(--xo-grey-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.68rem;
}

.campaign-palette-grid {
    display: block;
    margin-bottom: 0;
}

.campaign-palette-card--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    padding: 10px 12px;
}

.campaign-palette-card-compact-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.campaign-palette-card-compact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.campaign-palette-card-compact-actions .campaign-palette-use-btn {
    padding: 6px 12px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.campaign-palette-card-compact-actions .campaign-palette-why {
    font-size: 0.68rem;
}

.campaign-palette-swatches-inline {
    display: flex;
    gap: 6px;
    align-items: center;
}

.campaign-palette-swatch-inline {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(8, 8, 8, 0.12);
    flex-shrink: 0;
}

.campaign-palette-card--compact .campaign-palette-card-head {
    gap: 2px;
}

.campaign-palette-card--compact .campaign-palette-card-title {
    font-size: 0.92rem;
}

.campaign-palette-card--compact .campaign-palette-card-timing {
    font-size: 0.72rem;
    margin: 0;
    line-height: 1.35;
    color: var(--xo-grey-light);
}

.campaign-palette-card--compact .campaign-palette-emotion {
    display: none;
}

.campaign-palette-card-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.campaign-palette-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.campaign-palette-status--active {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.campaign-palette-status--upcoming {
    background: rgba(201, 169, 110, 0.18);
    color: var(--hero-gold-dark);
}

.campaign-palette-status--recommended {
    background: rgba(201, 169, 110, 0.22);
    color: var(--hero-gold-dark);
    box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.45);
}

.campaign-palette-card.is-upcoming {
    border-style: dashed;
}

.campaign-palette-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-palette-card.is-selected {
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 2px var(--action-focus-ring);
}

.campaign-palette-card.is-recommended {
    border-color: rgba(201, 169, 110, 0.75);
    box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.35);
}

.campaign-palette-card.is-recommended.is-selected {
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 2px var(--action-focus-ring), 0 0 0 4px rgba(201, 169, 110, 0.18);
}

.campaign-palette-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.campaign-palette-card-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xo-charcoal);
}

.campaign-palette-card-timing {
    margin: 0;
    font-size: 0.74rem;
    color: var(--xo-grey-light);
    line-height: 1.35;
}

.campaign-palette-swatches-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.campaign-palette-swatch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.campaign-palette-swatch-chip {
    display: block;
    width: 100%;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(8, 8, 8, 0.12);
}

.campaign-palette-swatch-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.campaign-palette-swatch-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-palette-swatch-hex {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: #5c5c5c;
}

.campaign-palette-swatch-finish {
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--xo-grey-light);
}

.campaign-palette-emotion {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--xo-charcoal);
}

.campaign-palette-use-btn {
    width: 100%;
    margin-top: auto;
}

.campaign-palette-why {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--xo-grey-light);
}

.campaign-palette-why summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.campaign-palette-why p {
    margin: 8px 0 0;
}

.campaign-palette-subheading {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--xo-charcoal);
}

.campaign-palette-finish-bar,
.campaign-palette-copy-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--xo-border);
}

.campaign-palette-finish-bar--below-editor {
    flex-shrink: 0;
    margin-top: 4px;
    padding: 16px 18px 18px;
    border: none;
    border-top: 1px solid var(--xo-border);
    border-radius: 0;
    background: transparent;
}

.campaign-palette-copy-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-palette-copy-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.campaign-palette-suggestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--xo-border);
}

.campaign-palette-suggestion .campaign-btn {
    padding: 5px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
    align-self: center;
}

.campaign-palette-suggestion .campaign-palette-example-headline,
.campaign-palette-suggestion .campaign-palette-example-body {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.campaign-palette-suggestion .campaign-palette-example-headline {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.campaign-palette-finish-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.campaign-palette-finish-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.campaign-palette-finish-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(8, 8, 8, 0.12);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.campaign-palette-finish-btn:hover .campaign-palette-finish-chip {
    box-shadow: 0 0 0 2px var(--hero-gold);
    transform: scale(1.05);
}

.campaign-palette-finish-name {
    font-size: 0.68rem;
    line-height: 1.25;
    text-align: center;
    color: var(--xo-charcoal);
}

.campaign-palette-copy-tone {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: var(--xo-grey-light);
}

.campaign-palette-copy-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.campaign-palette-example-headline {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xo-charcoal);
}

.campaign-palette-example-body {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #5c5c5c;
}

.campaign-palette-use-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.campaign-palette-use-chip {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--xo-accent-light);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
}

.campaign-palette-style-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--xo-border);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-palette-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.campaign-palette-mini-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hero-gold-dark);
}

.campaign-palette-contrast-badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(46, 125, 50, 0.12);
    font-size: 0.72rem;
    font-weight: 700;
    color: #2e7d32;
}

.campaign-palette-contrast-badge.is-fail {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.campaign-palette-mini-card {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(8, 8, 8, 0.08);
}

.campaign-palette-mini-headline {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.campaign-palette-mini-body {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.campaign-palette-mini-cta {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.campaign-palette-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--xo-accent-light);
    border: 1px solid rgba(201, 169, 110, 0.35);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hero-gold-dark);
    white-space: nowrap;
}

.campaign-preview-arrange-trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    background: rgba(8, 8, 8, 0.28);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-preview-arrange-trigger:hover,
.campaign-preview-arrange-trigger:focus-visible {
    background: rgba(8, 8, 8, 0.58);
    box-shadow: inset 0 0 0 2px var(--hero-gold);
    outline: none;
}

.campaign-preview-focus-modal {
    position: fixed;
    inset: 0;
    z-index: 4500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--arrange-modal-top) 16px 16px;
    box-sizing: border-box;
    background: rgba(8, 8, 8, 0.72);
}

.campaign-preview-focus-modal[hidden] {
    display: none;
}

body.campaign-preview-focus-open {
    overflow: hidden;
}

body.campaign-preview-focus-open .site-nav,
body.campaign-preview-focus-open .quick-nav {
    z-index: 200;
}

.campaign-preview-focus-dialog {
    position: relative;
    z-index: 1;
    width: min(96vw, 920px);
    max-height: calc(100vh - var(--arrange-modal-top) - 24px);
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    border: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
    box-shadow: 0 18px 48px rgba(8, 8, 8, 0.35);
    overflow: hidden;
}

.campaign-preview-focus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
}

.campaign-preview-focus-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hero-gold-dark);
}

.campaign-preview-focus-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.campaign-preview-focus-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(60vh, 520px);
    padding: 8px;
    border-radius: 8px;
    background: var(--surface-page);
    border: 1px solid var(--xo-border);
}

.campaign-preview-focus-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--card-shadow);
}

.campaign-preview-focus-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
}

.campaign-arrange-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: var(--arrange-modal-top) 8px 8px;
    overflow: hidden;
}

.campaign-arrange-modal[hidden] {
    display: none;
}

body.campaign-arrange-open {
    overflow: hidden;
}

body.campaign-arrange-open .site-nav,
body.campaign-arrange-open .quick-nav {
    z-index: 200;
}

.campaign-arrange-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.72);
}

.campaign-arrange-dialog {
    position: relative;
    z-index: 1;
    width: min(98vw, 1360px);
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
    box-shadow: 0 18px 48px rgba(8, 8, 8, 0.35);
    overflow: hidden;
    min-width: 0;
}

.campaign-arrange-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--xo-border);
    background: var(--surface-card, #faf8f5);
    position: relative;
    z-index: 30;
    pointer-events: auto;
}

.campaign-arrange-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 12px;
}

.campaign-arrange-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.campaign-arrange-header .campaign-btn {
    flex-shrink: 0;
}

.campaign-arrange-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hero-gold-dark);
}

.campaign-arrange-intro {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #5c5c5c;
    flex-shrink: 0;
}

.campaign-arrange-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    flex-shrink: 0;
}

.campaign-type-row--sizes-3,
.campaign-type-row--align-3,
.campaign-type-row--text-colors-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-arrange-type-sliders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 4px 0 2px;
    padding: 12px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.06);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .campaign-type-row--sizes-3,
    .campaign-type-row--align-3,
    .campaign-type-row--text-colors-3,
    .campaign-arrange-type-sliders {
        grid-template-columns: 1fr;
    }
}

.campaign-arrange-type-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.campaign-arrange-type-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.campaign-arrange-type-slider-head label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.campaign-arrange-type-slider-value {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.campaign-arrange-type-slider input[type="range"] {
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--hero-gold-dark);
    cursor: pointer;
}

.campaign-arrange-type-slider input[type="range"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .campaign-arrange-type-sliders {
        grid-template-columns: 1fr;
    }
}

.campaign-arrange-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--xo-charcoal);
    cursor: pointer;
}

.campaign-arrange-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--hero-gold-dark);
}

.campaign-arrange-tip {
    font-size: 0.78rem;
    color: #5c5c5c;
}

.campaign-arrange-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
    color: #5c5c5c;
    flex-shrink: 0;
}

.campaign-arrange-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.campaign-arrange-legend-swatch {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    flex-shrink: 0;
}

.campaign-arrange-legend-swatch--margin {
    background: repeating-linear-gradient(
        90deg,
        rgba(201, 169, 110, 0.85) 0,
        rgba(201, 169, 110, 0.85) 4px,
        transparent 4px,
        transparent 7px
    );
}

.campaign-arrange-legend-swatch--copy {
    height: 14px;
    width: 22px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid rgba(90, 90, 98, 0.55);
    box-sizing: border-box;
}

.campaign-arrange-legend-swatch--center {
    background: rgba(174, 182, 193, 0.95);
}

.campaign-arrange-legend-swatch--golden {
    background: rgba(201, 169, 110, 0.95);
}

.campaign-arrange-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    background: #d4d4d8;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.campaign-arrange-viewport--popup {
    min-height: min(36vh, 280px);
}

.campaign-arrange-scaler {
    overflow: visible;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
    margin: auto;
}

.campaign-arrange-scale-inner {
    transform-origin: top left;
}

.campaign-arrange-frame {
    display: block;
    border: none;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.campaign-builder-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.campaign-btn {
    padding: 11px 18px;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.campaign-btn--primary {
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border-color: var(--hero-gold);
}

.campaign-btn--primary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
}

.campaign-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: #ece9e2;
}

.campaign-btn--secondary:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

.campaign-status {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.campaign-status.is-success {
    color: #1f8a54;
}

.campaign-status.is-error {
    color: #b03a3a;
}

.campaign-manager-btn {
    padding: 12px 22px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.campaign-manager-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
}

.campaign-hint--preview {
    margin-top: 0;
}

.campaign-manager-sizes {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ece9e2;
    max-width: none;
    margin-inline: 0;
}

.campaign-manager-sizes[hidden] {
    display: none !important;
}

.campaign-manager-grid {
    display: grid;
    gap: 12px;
}

.campaign-manager-spec {
    padding: 18px 20px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
}

.campaign-manager-spec--banner,
.campaign-manager-spec--popup {
    background: var(--surface-card);
}

.campaign-manager-spec-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.campaign-manager-thumb {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
    object-fit: cover;
}

.campaign-manager-thumb--popup {
    width: auto;
    max-width: 110px;
    max-height: 220px;
    justify-self: start;
}

.campaign-manager-meta {
    display: grid;
    gap: 10px;
    margin: 0;
}

.campaign-manager-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.92rem;
}

.campaign-manager-meta dt {
    margin: 0;
    font-weight: 600;
    color: var(--xo-grey);
}

.campaign-manager-meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-manager-banner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.campaign-manager-banner-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--xo-border);
    border-radius: 10px;
    background: #fbfdff;
}

.campaign-manager-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-manager-device {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hero-gold-dark);
}

.campaign-manager-size {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--xo-charcoal);
}

.campaign-manager-ratio {
    font-size: 0.85rem;
    color: var(--xo-grey);
}

.campaign-template-download {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.campaign-template-download:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

.calc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.calc-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
}

.calc-result--margin,
.calc-result--margin-shipping {
    background: var(--hero-bg);
    border-color: var(--hero-bg);
}

.calc-result--shipping {
    border-style: dashed;
}

.calc-field--shipping {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .calc-field--shipping {
        grid-column: span 2;
    }
}

.calc-result-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.calc-result-value {
    font-family: var(--font-body);
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--hero-gold-dark);
    line-height: 1.1;
}

.calc-result-formula {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.calc-result--margin .calc-result-label,
.calc-result--margin .calc-result-formula,
.calc-result--margin-shipping .calc-result-label,
.calc-result--margin-shipping .calc-result-formula {
    color: rgba(255, 255, 255, 0.55);
}

.calc-result--margin .calc-result-value,
.calc-result--margin-shipping .calc-result-value {
    color: var(--hero-gold);
}

.calc-section--standalone + .results-section--policies + .vendor-pricing-section,
.calc-section--standalone + .vendor-pricing-section {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.calc-section--standalone + .results-section--policies + .vendor-pricing-section::before,
.calc-section--standalone + .vendor-pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.vendor-pricing-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 40px;
    text-align: left;
    box-shadow: none;
}

.vendor-pricing-header {
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.vendor-pricing-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.vendor-pricing-section h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.vendor-pricing-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
}

.vendor-pricing-catalog-hint {
    margin: 10px 0 0;
    color: var(--text-primary);
    font-size: clamp(0.95rem, 1.3vw, 1.02rem);
    font-weight: 500;
    line-height: 1.5;
    text-wrap: balance;
}

.vendor-pricing-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.vendor-pricing-panel-label {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.vendor-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    max-width: 100%;
}

.vendor-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.vendor-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.vendor-carousel-track::-webkit-scrollbar {
    display: none;
}

.vendor-carousel-item {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: 12px;
    scroll-snap-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vendor-carousel-item:hover {
    border-color: rgba(201, 169, 110, 0.65);
    box-shadow: 0 6px 18px rgba(201, 169, 110, 0.12);
}

.vendor-carousel-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
}

.vendor-carousel-item img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.vendor-carousel-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
    color: var(--hero-gold-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vendor-carousel-nav:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

.vendor-carousel-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.vendor-pricing-actions {
    display: flex;
    justify-content: flex-start;
}

.vendor-pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vendor-pricing-btn:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
    color: var(--action-primary-text);
}

.vendor-report-panel {
    margin-top: 22px;
    text-align: left;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-light);
    box-shadow: none;
}

.vendor-report-panel[hidden] {
    display: none;
}

.vendor-report-content {
    padding: 22px 20px;
    max-height: min(75vh, 720px);
    overflow-y: auto;
}

.vendor-report-month {
    margin-bottom: 28px;
}

.vendor-report-month:last-of-type {
    margin-bottom: 0;
}

.vendor-report-month h3 {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-align: left;
}

.vendor-report-table-wrap {
    overflow-x: auto;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.vendor-report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.vendor-report-table thead {
    background: var(--hero-bg);
    color: rgba(255, 255, 255, 0.92);
}

.vendor-report-table th,
.vendor-report-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ece9e2;
}

.vendor-report-table th {
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--hero-gold);
}

.vendor-report-table tbody tr:nth-child(even) {
    background: var(--surface-light);
}

.vendor-report-table tbody tr:hover {
    background: rgba(201, 169, 110, 0.1);
}

.vendor-report-table tbody tr:last-child td {
    border-bottom: none;
}

.vendor-report-fallback {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.86rem;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface-card);
    border-top: 1px solid #ece9e2;
}

.vendor-report-fallback a {
    color: var(--hero-gold-dark);
    font-weight: 600;
    text-decoration: none;
}

.vendor-report-fallback a:hover {
    text-decoration: underline;
}

.search-container {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.search-input-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
}

.search-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--hero-gold-dark);
    pointer-events: none;
    z-index: 1;
}

.search-input-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#searchInput {
    width: 100%;
    padding: 16px 20px 16px 48px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 56px;
    background: var(--surface-card);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#searchInput::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

#searchInput:focus {
    outline: none;
    border-color: var(--hero-gold);
    background: var(--surface-card);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

#searchBtn {
    padding: 0 28px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: none;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: stretch;
    min-width: 120px;
}

#searchBtn:hover {
    background: var(--action-primary-hover);
    transform: none;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    box-shadow: 0 12px 28px rgba(26, 24, 20, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 10;
}

.autocomplete-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: white;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--xo-charcoal);
    cursor: pointer;
}

.autocomplete-item:hover {
    background: var(--xo-accent-light);
}

.filter-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

#categoryFilter {
    padding: 10px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    background: var(--surface-card);
    color: var(--text-primary);
    min-width: min(220px, 100%);
}

#categoryFilter option {
    padding: 5px 10px;
}

#clearFilters {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

#clearFilters:hover {
    background: var(--surface-card);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

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

.kb-welcome-section {
    margin-bottom: 30px;
}

.kb-welcome-section[hidden] {
    display: none !important;
}

.kb-card--welcome,
.kb-card--error {
    text-align: center;
    color: #6c757d;
}

.kb-card--error {
    color: #c0392b;
}

.kb-card--welcome h3,
.kb-card--error h3 {
    margin-bottom: 8px;
}

.results-count {
    color: var(--text-muted);
    margin-bottom: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.results-count:empty {
    margin: 0;
}

.results-section--policies:not(:empty) {
    margin-top: 0;
    margin-bottom: 30px;
}

.results-grid {
    display: grid;
    gap: 10px;
}

.results-grid:not(:empty) {
    margin-bottom: 40px;
}

.kb-card {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: 25px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-card:not(.kb-card--welcome):not(.kb-card--error):hover {
    transform: none;
    border-color: rgba(201, 169, 110, 0.55);
    box-shadow: 0 8px 24px rgba(201, 169, 110, 0.1);
}

.kb-card.kb-card--expanded,
.kb-card.is-selected {
    box-shadow: 0 0 0 2px var(--xo-accent-border), 0 12px 28px var(--xo-accent-shadow);
}

.kb-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.kb-card-summary:hover .kb-expand-icon {
    background: var(--xo-accent-gradient);
    color: #fff;
    border-color: transparent;
}

.kb-card-summary:focus-visible {
    outline: 2px solid var(--xo-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.kb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.kb-expand-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--xo-silver-light);
    color: var(--xo-silver-dark);
    border: 1px solid var(--xo-silver-border);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.kb-card--expanded .kb-expand-icon {
    transform: rotate(180deg);
}

.kb-card-body {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--xo-border);
}

.kb-card-body[hidden] {
    display: none !important;
}

.kb-card-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--xo-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.kb-download-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kb-download-file:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

.kb-download-pdf {
    padding: 8px 14px;
    border: 1px solid var(--xo-accent);
    border-radius: 8px;
    background: white;
    color: var(--xo-accent-dark);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kb-download-pdf:hover:not(:disabled) {
    background: var(--xo-accent-gradient);
    color: #fff;
    border-color: transparent;
}

.kb-download-pdf:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* ==========================================================================
   KB result list cards (browse) + dedicated article reader
   ========================================================================== */
.kb-card--list {
    padding: 18px 20px;
    border-left: 2px solid transparent;
}

.kb-card--list:hover {
    transform: none;
    border-left-color: var(--hero-gold);
}

.kb-card--list.kb-card--active {
    border-color: rgba(201, 169, 110, 0.55);
    border-left-color: var(--hero-gold);
    box-shadow: 0 8px 24px rgba(201, 169, 110, 0.1);
}

.kb-card--list .kb-card-summary {
    align-items: center;
    gap: 20px;
}

.kb-list-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.kb-list-title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
}

.kb-list-preview {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.kb-card--list .kb-category {
    font-size: 0.72rem;
    padding: 3px 10px;
}

.kb-list-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    color: var(--hero-gold-dark);
    background: var(--xo-accent-light);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-card--list .kb-card-summary:hover .kb-list-chevron,
.kb-card--list .kb-card-summary:focus-visible .kb-list-chevron {
    background: var(--hero-gold);
    color: var(--action-primary-text);
}

body.kb-reader-open {
    overflow: hidden;
}

.kb-reader {
    position: fixed;
    inset: 0;
    z-index: 420;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.kb-reader[hidden] {
    display: none !important;
}

.kb-reader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.5);
    backdrop-filter: blur(3px);
}

.kb-reader-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1400px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    background: var(--surface-card);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 80px rgba(0, 0, 0, 0.2);
    animation: kb-reader-enter 0.22s ease;
}

@keyframes kb-reader-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kb-reader-toolbar {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    padding: 14px clamp(16px, 3vw, 28px);
    background: var(--surface-card);
    border-bottom: 0.5px solid var(--border-warm);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.kb-reader-toolbar-start {
    flex-shrink: 0;
}

.kb-reader-toolbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.kb-reader-panel:has(.kb-reader-scroll.is-scrolled) .kb-reader-toolbar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.kb-reader-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.kb-reader-back:hover,
.kb-reader-back:focus-visible {
    background: var(--xo-accent-light);
    border-color: var(--hero-gold);
    outline: none;
}

.kb-reader-back-label {
    display: inline;
}

.kb-reader-toolbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 8px;
}

.kb-reader-toolbar-title[hidden] {
    display: none !important;
}

.kb-reader-toolbar-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-reader-toolbar-heading {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-reader-pdf {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kb-reader-pdf:hover:not(:disabled),
.kb-reader-pdf:focus-visible {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
    outline: none;
}

.kb-reader-pdf:disabled {
    opacity: 0.65;
    cursor: wait;
}

.kb-reader-pdf[hidden] {
    display: none !important;
}

.kb-reader-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.kb-reader-close:hover,
.kb-reader-close:focus-visible {
    border-color: var(--hero-gold);
    background: var(--xo-accent-light);
    outline: none;
}

.kb-reader-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.kb-reader-layout--solo {
    grid-template-columns: 1fr;
}

.kb-reader-toc {
    padding: 28px 20px 40px;
    border-right: 0.5px solid var(--border-warm);
    background: var(--surface-light);
    overflow-y: auto;
    height: 100%;
    min-height: 0;
}

.kb-reader-toc[hidden] {
    display: none !important;
}

.kb-reader-toc-title {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kb-reader-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-reader-toc-list a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-reader-toc-list a:hover,
.kb-reader-toc-list a:focus-visible {
    background: var(--xo-accent-light);
    color: var(--text-primary);
    outline: none;
}

.kb-reader-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 56px) clamp(56px, 6vw, 88px);
    background: var(--surface-card);
}

.kb-prose {
    width: 100%;
    max-width: none;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.1875rem;
    line-height: 1.78;
    color: var(--text-primary);
}

.kb-prose-header {
    margin-bottom: 44px;
    padding-bottom: 32px;
    border-bottom: 0.5px solid var(--border-warm);
}

.kb-prose-eyebrow {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.kb-prose-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.kb-prose-keywords {
    margin: 18px 0 0;
}

.kb-prose-keywords span {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-light);
    border: 0.5px solid var(--border-warm);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.kb-prose-block {
    margin-bottom: 44px;
    scroll-margin-top: 28px;
}

.kb-prose-heading {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--text-primary);
}

.kb-prose-copy {
    color: var(--text-primary);
    max-width: 90ch;
    font-size: 1.0625rem;
    line-height: 1.78;
}

.kb-prose-copy p {
    margin: 0 0 1em;
}

.kb-prose-copy p:last-child {
    margin-bottom: 0;
}

.kb-prose-block p,
.kb-prose-callout p {
    margin: 0;
    color: var(--text-primary);
}

.kb-prose-callout {
    margin-bottom: 44px;
    padding: 26px 28px;
    border-radius: 12px;
    background: var(--xo-accent-light);
    border: 0.5px solid var(--xo-accent-border);
    border-left: 4px solid var(--hero-gold);
    scroll-margin-top: 28px;
}

.kb-prose-callout .kb-prose-heading {
    color: var(--hero-gold-dark);
    margin-bottom: 12px;
    font-size: 1.25rem;
}

.kb-prose-callout .kb-prose-copy {
    max-width: none;
    font-size: 1.125rem;
    line-height: 1.78;
}

.kb-prose-list {
    margin: 0;
    padding-left: 1.5rem;
    max-width: 90ch;
    font-size: 1.0625rem;
    line-height: 1.78;
}

.kb-prose-list li {
    margin-bottom: 0.9rem;
    padding-left: 0.35rem;
}

.kb-prose-list li:last-child {
    margin-bottom: 0;
}

.kb-prose-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kb-prose-step {
    padding: 36px 0;
    border-bottom: 0.5px solid var(--border-warm);
    scroll-margin-top: 24px;
}

.kb-prose-step:first-child {
    padding-top: 8px;
}

.kb-prose-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.kb-prose-step-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.kb-prose-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
}

.kb-prose-step-text {
    margin: 0;
    padding-top: 6px;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
    max-width: none;
}

.kb-prose-step-term {
    margin: 16px 0 0 60px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: none;
    line-height: 1.6;
}

.kb-prose-step-body {
    margin: 12px 0 0 60px;
    font-size: 1.125rem;
    line-height: 1.78;
    color: var(--text-primary);
    max-width: none;
}

.kb-prose-figure {
    margin: 24px 0 0;
    width: 100%;
    max-width: 100%;
}

.kb-prose-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 0.5px solid var(--border-warm);
    background: var(--surface-light);
    cursor: zoom-in;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.kb-prose-figure figcaption {
    margin-top: 12px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.kb-prose-details {
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: 100%;
}

.kb-prose-detail {
    padding: 18px 20px;
    border-radius: 10px;
    background: var(--surface-light);
    border: 0.5px solid var(--border-warm);
}

.kb-prose-detail dt {
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-primary);
}

.kb-prose-detail dd {
    margin: 0;
    font-size: 1.03125rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.kb-prose-detail-options {
    margin-top: 10px !important;
}

.kb-prose-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-top: 0.5px solid var(--border-warm);
}

.kb-prose-option:first-child {
    border-top: none;
    padding-top: 0;
}

.kb-prose-option strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.kb-prose-option span {
    font-size: 0.975rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.kb-prose-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 0.5px solid var(--border-warm);
}

.kb-prose-footer:empty {
    display: none;
}

.kb-prose-download {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kb-prose-download:hover:not(:disabled) {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

.kb-prose-download--pdf:disabled {
    opacity: 0.65;
    cursor: wait;
}

.kb-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--xo-charcoal);
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0;
    padding-left: 16px;
    border-left: 4px solid transparent;
    border-image: var(--xo-accent-gradient) 1;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.kb-category-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

.kb-category {
    background: rgba(201, 169, 110, 0.12);
    color: var(--hero-gold-dark);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(201, 169, 110, 0.28);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kb-keywords {
    margin-bottom: 15px;
}

.kb-keywords span {
    background: #f8f9fa;
    color: #6c757d;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.kb-section {
    margin-bottom: 15px;
}

.kb-section h4 {
    font-family: var(--font-body);
    color: #495057;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kb-section p, .kb-section ul {
    color: #6c757d;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kb-section ul {
    padding-left: 20px;
}

.kb-section li {
    margin-bottom: 5px;
}

.kb-client-explanation {
    background: var(--xo-accent-light);
    border-left: 4px solid var(--xo-accent);
    padding: 15px;
    border-radius: 0 6px 6px 0;
    margin-top: 15px;
}

.kb-client-explanation + .kb-section {
    margin-top: 24px;
}

.kb-client-explanation h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--xo-accent-dark);
    margin-bottom: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.no-results {
    text-align: center;
    color: var(--text-muted);
    padding: clamp(36px, 6vw, 56px) 24px;
    border: 1px dashed #ece9e2;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.no-results h3 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Solution Steps with Inline Images */
.solution-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.solution-step {
    background: var(--xo-accent-surface);
    border: 1px solid #efe7d6;
    border-left: 4px solid var(--xo-accent);
    border-radius: 10px;
    padding: 20px;
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.step-body-term {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--xo-accent-dark);
}

.step-body {
    margin: 0 0 15px;
    color: var(--xo-grey);
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.65;
}

.step-details {
    display: grid;
    gap: 12px;
    margin: 0 0 4px;
}

.step-detail {
    background: white;
    border: 1px solid var(--xo-accent-border);
    border-left: 3px solid var(--xo-accent);
    border-radius: 8px;
    padding: 12px 16px;
}

.step-detail dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--xo-accent-dark);
    margin-bottom: 4px;
}

.step-detail dd {
    margin: 0;
    color: var(--xo-charcoal);
    font-size: 0.95rem;
    line-height: 1.5;
}

.step-detail-options {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.step-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--xo-silver-light);
    border-left: 2px solid var(--xo-silver);
    border-radius: 6px;
}

.step-option-label {
    font-weight: 700;
    color: var(--xo-accent-dark);
    font-size: 0.9rem;
}

.step-option-text {
    color: var(--xo-charcoal);
    font-size: 0.92rem;
    line-height: 1.45;
}

.step-number {
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--hero-gold-dark);
}

.step-title {
    margin: 0;
    font-family: var(--font-display);
    color: var(--xo-charcoal);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.step-image {
    flex-shrink: 0;
    text-align: center;
}

.step-image-thumb {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--xo-border);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-image-thumb:hover {
    border-color: var(--hero-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.step-image-caption {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    max-width: 800px;
}

/* Visual Aids Styles (for backward compatibility) */
.visual-aids-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.visual-aid-item {
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    transition: transform 0.2s ease;
}

.visual-aid-item:hover {
    transform: translateY(-2px);
}

.visual-aid-image {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid var(--xo-border);
    transition: border-color 0.2s ease;
}

.visual-aid-image:hover {
    border-color: var(--hero-gold);
}

.image-caption {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e1e5e9;
}

.modal-header h3 {
    margin: 0;
    color: var(--xo-charcoal);
    font-size: 1.2rem;
}

.close-modal {
    font-size: 2rem;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.close-modal:hover {
    color: #dc3545;
}

.modal-body {
    padding: 20px;
    text-align: center;
}

.modal-body img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 6px;
}

@media (max-width: 768px) {
    :root {
        --layout-gutter: 12px;
        --quick-nav-height: 0px;
    }

    .site-announcement {
        padding: 10px 0;
        font-size: 11px;
        letter-spacing: 0.025em;
    }

    .site-announcement-copy {
        gap: 0.35rem 0.85rem;
    }

    .site-announcement a {
        white-space: normal;
    }

    .site-nav-toggle {
        display: flex;
        z-index: 210;
    }

    .site-nav-panel {
        position: fixed;
        top: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(320px, 88vw);
        height: 100dvh;
        padding: 72px 24px 32px;
        background: #fff;
        box-shadow: -8px 0 32px rgba(26, 123, 189, 0.15);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 205;
        overflow-y: auto;
    }

    .site-nav.is-open .site-nav-panel {
        transform: translateX(0);
    }

    .site-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(43, 43, 43, 0.45);
        z-index: 204;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .site-nav.is-open .site-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .site-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav-links a {
        display: block;
        padding: 14px 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--xo-border);
    }

    .site-nav-cta {
        justify-content: center;
        margin-top: 20px;
        padding: 14px 18px;
        font-size: 1rem;
    }

    .site-nav-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 16px;
    }

    .site-nav--dark .site-nav-panel {
        background: var(--hero-bg);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
    }

    .site-nav--dark .site-nav-links a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.65);
        border-bottom-color: rgba(255, 255, 255, 0.1);
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
    }

    .site-nav--dark .site-nav-links a:hover,
    .site-nav--dark .site-nav-links a[aria-current="page"] {
        color: var(--hero-gold);
    }

    .site-nav-tools {
        display: block;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .site-nav-tools-label {
        margin: 12px 0 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--hero-gold);
    }

    .site-nav-tool-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav-tool-link {
        display: block;
        width: 100%;
        padding: 14px 0;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease;
    }

    .site-nav-tool-link:hover,
    .site-nav-tool-link:focus-visible {
        color: var(--hero-gold);
        outline: none;
    }

    .site-nav-tools-footer {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 4px;
    }

    .site-nav-templates {
        position: relative;
    }

    .site-nav-tool-action {
        display: block;
        width: 100%;
        padding: 14px 0;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: color 0.15s ease;
    }

    .site-nav-tool-action:hover,
    .site-nav-tool-action:focus-visible,
    .site-nav-templates.is-open .site-nav-tool-action {
        color: var(--hero-gold);
        outline: none;
    }

    .site-nav-tool-action--clear:hover,
    .site-nav-tool-action--clear:focus-visible {
        color: #f0a8a8;
    }

    .site-nav-template-menu {
        position: static;
        display: none;
        margin-top: 8px;
        width: 100%;
        max-height: 220px;
        overflow-y: auto;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(0, 0, 0, 0.35);
        box-shadow: none;
    }

    .site-nav-templates.is-open .site-nav-template-menu {
        display: block;
    }

    .site-nav-template-menu[hidden] {
        display: none !important;
    }

    .site-nav-template-menu .template-menu-title,
    .site-nav-template-menu .template-menu-empty {
        color: rgba(255, 255, 255, 0.55);
    }

    .site-nav-template-menu a {
        color: rgba(255, 255, 255, 0.9);
    }

    .site-nav-template-menu a:hover {
        background: rgba(201, 169, 110, 0.12);
        color: var(--hero-gold);
    }

    /* Sticky quick-nav moves into the hamburger on mobile */
    .quick-nav {
        display: none;
    }

    .quick-nav-target {
        scroll-margin-top: calc(var(--site-nav-height, 72px) + 12px);
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }

    .back-to-top svg {
        width: 22px;
        height: 22px;
    }

    .site-header {
        padding: 28px 16px 24px;
        min-height: auto;
    }

    .site-header-decor {
        display: none;
    }

    .site-header-content {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .site-header h1 {
        font-size: 1.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .site-header p {
        max-width: 100%;
        padding-inline: 4px;
    }

    .site-logo {
        max-width: 300px;
    }

    .quick-search--topics {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .quick-search--topics::-webkit-scrollbar {
        display: none;
    }
    
    .search-container {
        flex-direction: column;
    }

    .dns-section {
        padding: clamp(24px, 4vw, 32px) 0 8px;
    }

    .member-access-section {
        padding: 22px 16px;
    }

    .member-access-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dns-panel {
        padding: 18px 16px;
    }

    .dns-tagline {
        font-size: 0.95rem;
    }

    .dns-mode-options {
        grid-template-columns: 1fr;
    }

    .dns-input-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dns-input-row input {
        grid-column: 1 / -1;
        padding: 10px 12px;
        font-size: 16px;
    }

    .dns-btn {
        width: 100%;
        padding: 11px 16px;
        font-size: 11px;
    }

    .trends-section {
        padding: clamp(24px, 4vw, 32px) 0 8px;
    }

    .trends-panel {
        padding: 18px 16px;
    }

    .trends-controls {
        grid-template-columns: 1fr;
    }

    .trends-actions {
        width: 100%;
    }

    .trends-btn {
        flex: 1 1 auto;
        width: 100%;
        font-size: 11px;
    }

    .trends-home-lighting-btn,
    .trends-home-lighting-reset {
        width: 100%;
    }

    .campaign-manager-section {
        padding: clamp(24px, 4vw, 32px) 0 8px;
    }

    .campaign-manager-panel {
        padding: 18px 16px;
    }

    .campaign-manager-tagline {
        font-size: 0.95rem;
    }

    .campaign-manager-btn {
        width: 100%;
        max-width: none;
        font-size: 11px;
    }

    .campaign-builder-layout {
        grid-template-columns: 1fr;
    }

    .campaign-builder-column {
        max-height: none;
    }

    .campaign-builder-editor {
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .campaign-palette-finish-bar--below-editor {
        margin-top: 12px;
        border-radius: 12px;
    }

    .campaign-builder-preview {
        position: static;
        max-height: none;
    }

    .campaign-builder-actions-row .campaign-btn {
        flex: 1 1 auto;
        width: 100%;
    }

    .campaign-type-row {
        grid-template-columns: 1fr;
    }

    .campaign-palette-swatches-row {
        grid-template-columns: 1fr;
    }

    .campaign-palette-card--compact {
        grid-template-columns: 1fr;
    }

    .campaign-palette-section-grid--summer {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .campaign-palette-preview-bar {
        height: 44px;
    }

    .campaign-palette-preview-segment {
        min-height: 44px;
    }

    .campaign-palette-preview-meta {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .campaign-palette-card--landscape .campaign-palette-card-compact-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .campaign-palette-suggestion {
        grid-template-columns: 1fr;
    }

    .campaign-palette-suggestion .campaign-btn {
        justify-self: start;
    }

    .campaign-manager-banner-item {
        grid-template-columns: 1fr;
    }

    .calc-share-fields {
        grid-template-columns: 1fr;
    }
    
    .filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .kb-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .kb-category {
        align-self: flex-start;
    }
    
    .step-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .step-image-thumb {
        width: 100%;
        max-width: 100%;
    }
    
    .step-image-caption {
        max-width: none;
    }
    
    .step-title {
        font-size: 1rem;
    }
    
    .kb-title {
        font-size: 1.35rem;
        padding-left: 12px;
    }
    
    .kb-card {
        padding: 20px;
    }
    
    .solution-step {
        padding: 15px;
    }
    
    .step-header {
        gap: 10px;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .kb-card--list .kb-card-summary {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .kb-list-meta {
        width: 100%;
        justify-content: space-between;
    }

    .kb-reader-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .kb-reader-backdrop {
        display: none;
    }

    .kb-reader-toolbar {
        padding: 12px 16px;
    }

    .kb-reader-toolbar-title {
        display: none !important;
    }

    .kb-reader-pdf {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .kb-reader-back-label {
        display: none;
    }

    .kb-reader-layout {
        grid-template-columns: 1fr;
    }

    .kb-reader-toc:not([hidden]) {
        display: block;
        border-right: none;
        border-bottom: 0.5px solid var(--border-warm);
        padding: 14px 16px;
        max-height: none;
        position: static;
        background: var(--surface-light);
    }

    .kb-reader-toc-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .kb-reader-toc-list li {
        flex: 0 0 auto;
    }

    .kb-reader-toc-list a {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 6px 12px;
        background: var(--surface-card);
        border: 0.5px solid var(--border-warm);
    }

    .kb-reader-scroll {
        padding: 28px 20px 56px;
    }

    .kb-prose {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .kb-prose-title {
        font-size: 1.75rem;
    }

    .kb-prose-heading {
        font-size: 1.1875rem;
    }

    .kb-prose-copy {
        font-size: 1.03125rem;
        max-width: none;
    }

    .kb-prose-step-head {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
    }

    .kb-prose-step-num {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .kb-prose-step-term,
    .kb-prose-step-body {
        margin-left: 0;
    }

    .kb-prose-step-text {
        font-size: 1.1875rem;
    }

    .kb-prose-step-body {
        font-size: 1.0625rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .site-header {
        padding: 24px 16px 20px;
    }

    .site-header h1 {
        font-size: 1.35rem;
    }
    
    .site-header p {
        font-size: 1rem;
    }

    .site-logo {
        max-width: 270px;
        margin-bottom: 16px;
    }

    .vendor-carousel-item {
        flex: 0 0 88px;
        width: 88px;
        height: 88px;
        padding: 10px;
    }

    .vendor-carousel-item img {
        max-width: 68px;
        max-height: 68px;
    }

    .vendor-carousel-nav {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .vendor-pricing-panel {
        padding: 18px 14px;
    }

    .vendor-report-content {
        padding: 16px 14px;
        max-height: 65vh;
    }

    .vendor-report-table th,
    .vendor-report-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .search-section {
        padding: 20px 0 4px;
    }

    .quick-search {
        gap: 8px;
    }

    .quick-search-chip {
        padding: 9px 12px;
        font-size: 0.78rem;
    }

    .quick-search-icon {
        width: 15px;
        height: 15px;
    }

    #searchInput {
        padding: 14px 16px 14px 44px;
        font-size: 16px;
        min-height: 52px;
    }

    #searchBtn {
        min-width: 0;
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
    }
    
    .kb-card {
        padding: 15px;
    }
    
    .solution-step {
        padding: 12px;
    }
    
    .step-title {
        font-size: 0.9rem;
    }
    
    .kb-title {
        font-size: 1.2rem;
        padding-left: 10px;
        border-left-width: 3px;
    }
    
    .step-number {
        width: 25px;
        height: 25px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Site footer (minimal bar)
   ========================================================================== */
.site-footer {
    margin-top: 48px;
    background: var(--surface-light);
    border-top: 0.5px solid var(--border-warm);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px 24px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

.footer-copy {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.footer-legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.footer-legal a {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-legal a:hover {
    color: var(--hero-gold-dark);
}

.footer-top-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0.5px solid var(--border-warm);
    border-radius: 6px;
    background: var(--surface-light);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.footer-top-link svg {
    width: 15px;
    height: 15px;
}

.footer-top-link:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: var(--action-primary-text);
}

@media (max-width: 560px) {
    .site-footer-inner {
        padding: 18px 16px 22px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal {
        gap: 14px;
    }
}

/* ==========================================================================
   Email Template Builder
   ========================================================================== */
.email-builder-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px) 0 8px;
    margin-bottom: 40px;
    box-shadow: none;
}

.results-section--campaign + .email-builder-section {
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(36px, 5vw, 48px);
    position: relative;
}

.results-section--campaign + .email-builder-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.45), transparent);
    pointer-events: none;
}

.email-builder-header {
    text-align: left;
    max-width: 40rem;
    margin: 0 0 clamp(22px, 3vw, 28px);
}

.email-builder-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.email-builder-header h2 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
}

.email-builder-tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: balance;
    max-width: none;
}

.email-builder-panel {
    background: var(--surface-card);
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: clamp(22px, 3vw, 32px);
}

.email-builder-toggle-row {
    display: flex;
    justify-content: flex-start;
}

.email-builder-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border: 1px solid var(--hero-gold);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.email-builder-toggle::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -3px;
}

.email-builder-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.email-builder-toggle:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    transform: none;
}

.email-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ece9e2;
}

.email-builder-layout[hidden] {
    display: none;
}

.email-builder-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.email-fieldset {
    border: 1px solid #ece9e2;
    border-radius: 2px;
    padding: 16px 16px 18px;
    margin: 0;
    background: var(--surface-light);
}

.email-fieldset legend {
    padding: 0 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hero-gold-dark);
}

.email-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.email-field:last-child {
    margin-bottom: 0;
}

.email-field label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.email-optional {
    font-weight: 400;
    color: var(--text-muted);
}

.email-input,
.email-field input[type="text"],
.email-field input[type="url"],
.email-field select,
.email-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", emoji, sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--surface-card);
}

.email-field textarea,
textarea.email-input {
    resize: vertical;
    min-height: 64px;
}

.email-input:focus,
.email-field input:focus,
.email-field select:focus,
.email-field textarea:focus {
    outline: none;
    border-color: var(--hero-gold);
    box-shadow: 0 0 0 3px var(--action-focus-ring);
}

.email-color-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.email-field input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
    cursor: pointer;
}

.email-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-logo-row input[type="file"] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.email-hint {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.email-hint strong {
    font-weight: 600;
    color: var(--text-primary);
}

.email-promo-image-preview {
    display: block;
    max-width: 100%;
    max-height: 140px;
    width: auto;
    margin-top: 10px;
    border-radius: 2px;
    border: 1px solid #ece9e2;
    object-fit: contain;
    background: var(--surface-card);
}

.email-promo-image-preview[hidden] {
    display: none;
}

.email-block-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.email-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
}

.email-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-block-num {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hero-gold-dark);
}

.email-block-remove {
    border: none;
    background: none;
    color: #b03a3a;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.email-block-remove:hover {
    text-decoration: underline;
}

.email-add-block {
    align-self: flex-start;
}

.email-add-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.email-block-image-preview {
    display: block;
    max-width: 100%;
    max-height: 140px;
    width: auto;
    margin-top: 4px;
    border-radius: 2px;
    border: 1px solid #ece9e2;
    object-fit: contain;
    background: var(--surface-card);
}

.email-block-image-preview[hidden] {
    display: none;
}

.email-btn {
    padding: 10px 16px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.email-btn:hover {
    background: var(--surface-light);
    border-color: rgba(201, 169, 110, 0.55);
    color: var(--hero-gold-dark);
}

.email-btn--primary {
    background: var(--hero-gold);
    color: var(--action-primary-text);
    border-color: var(--hero-gold);
}

.email-btn--primary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--action-primary-text);
}

.email-btn--ghost {
    border-color: #ece9e2;
    color: var(--text-muted);
}

.email-btn--ghost:hover {
    background: var(--surface-light);
    color: var(--hero-gold-dark);
    border-color: rgba(201, 169, 110, 0.55);
}

.email-builder-preview {
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.email-preview-bar {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-light);
}

.email-preview-subject-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.email-preview-subject {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-preview-frame-wrap {
    border: 1px solid #ece9e2;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-page);
}

.email-preview-frame {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    background: var(--surface-page);
}

.email-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.email-status {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.email-status.is-success {
    color: #1f8a54;
}

.email-status.is-error {
    color: #b03a3a;
}

.email-howto {
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: 2px;
    background: rgba(201, 169, 110, 0.08);
}

.email-howto-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hero-gold-dark);
}

.email-howto ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.email-howto li {
    margin-bottom: 6px;
}

.email-howto li:last-child {
    margin-bottom: 0;
}

.email-howto kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #ece9e2;
    border-radius: 2px;
    background: var(--surface-card);
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .email-builder-layout {
        grid-template-columns: 1fr;
    }

    .email-builder-preview {
        position: static;
    }
}

@media (max-width: 560px) {
    .email-builder-section {
        padding: clamp(24px, 4vw, 32px) 0 8px;
    }

    .email-builder-panel {
        padding: 18px 16px;
    }

    .email-builder-toggle {
        width: 100%;
        justify-content: center;
        font-size: 11px;
    }

    .email-color-row {
        grid-template-columns: 1fr;
    }

    .email-preview-frame {
        height: 460px;
    }

    .email-builder-actions .email-btn {
        flex: 1 1 auto;
    }
}