/* ============================================
   BASE — CSS variables shared between home & use-case pages
   Loaded first, before home.css / use-case.css
============================================ */

:root {
    /* Violet — brand accent (unchanged) */
    --violet: #7c3aed;
    --violet-light: #a78bfa;
    --violet-deep: #5b21b6;
    --violet-glow: rgba(124, 58, 237, 0.4);
    --violet-tint: #f3ecfe;          /* light tint for badges / icon chips on white */
    --violet-tint-2: rgba(124, 58, 237, 0.08);

    /* Backgrounds — LIGHT-FIRST */
    --bg: #fbfbfd;                   /* page base */
    --bg-2: #ffffff;                 /* "card" / elevated section */
    --bg-3: #f4f4f5;                 /* subtle gray panel */
    --bg-light: #ffffff;
    --bg-light-2: #f8f9fb;
    --bg-light-3: #eef0f5;

    /* Dark backgrounds — for Ethics + Footer + mockups + final-CTA only */
    --bg-dark: #18181b;
    --bg-dark-2: #27272a;
    --bg-dark-3: #3f3f46;

    /* Text — dark on light */
    --text: #18181b;
    --text-muted: #52525b;
    /* Was #71717a, which is 4.40:1 on --bg-3 — under 4.5:1, so every small label on
       a gray panel failed. Two steps darker on the same neutral ramp: 4.81:1 on
       --bg-3, 5.28:1 on white, and visually all but indistinguishable. Fixed on the
       token rather than per selector because 86 elements on the home page alone use
       it, all of them on light backgrounds — dark sections have their own
       --text-dim-on-dark, which keeps the original value. */
    --text-dim: #6b6b73;
    --text-dark: #0a0a0f;
    --text-dark-muted: #52525b;

    /* Text on dark sections (Ethics / Footer / mockups) */
    --text-on-dark: #ffffff;
    --text-muted-on-dark: #a1a1aa;
    --text-dim-on-dark: #71717a;

    /* Borders — for light surfaces (most of the page) */
    --border-dark: rgba(0, 0, 0, 0.08);
    --border-dark-hover: rgba(0, 0, 0, 0.16);
    --border-light: rgba(0, 0, 0, 0.08);

    /* Borders — for dark surfaces */
    --border-on-dark: rgba(255, 255, 255, 0.08);
    --border-on-dark-hover: rgba(255, 255, 255, 0.16);

    --success: #10b981;
    --warning: #f59e0b;
    --gold: #fbbf24;

    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --container: 1280px;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    --shadow-violet: 0 16px 48px -12px rgba(124, 58, 237, 0.35);
    --shadow-card: 0 1px 3px rgba(24, 24, 27, 0.04), 0 12px 32px -8px rgba(24, 24, 27, 0.06);
    --shadow-card-strong: 0 24px 64px -16px rgba(24, 24, 27, 0.08);
}

/* ============================================
   SHARED — extracted from home.css (Round 2)
   Reset, Announcement, Header, Logo+pixels, Buttons, Typography, Section base
============================================ */

/* ============================================
   RESET & BASE
============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--violet); color: white; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   ANNOUNCEMENT BAR (Star us)
============================================ */
.announcement {
    background: linear-gradient(90deg, var(--violet-deep) 0%, var(--violet) 50%, var(--violet-deep) 100%);
    color: white;
    padding: 10px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    z-index: 110;
}

.announcement a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 700;
    margin-left: 4px;
}

.announcement a:hover {
    text-decoration-thickness: 2px;
}

.star-icon {
    display: inline-block;
    color: var(--gold);
    margin-right: 6px;
}

/* ============================================
   HEADER
============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-dark);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.logo {
    display: inline-flex;
    align-items: center;
    color: var(--text);
    line-height: 0;
    position: relative;
}

.logo-svg {
    height: 40px;
    width: auto;
    display: block;
}

.nav {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav > a, .nav-item > button {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.15s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav > a:hover, .nav-item > button:hover { color: var(--text); }

/* Active nav item — current page (PHP .is-active) or in-view section (scroll-spy, nav.js) */
.nav > a, .nav-item > button { position: relative; }
.nav > a.is-active, .nav-item.is-active > button { color: var(--violet); }
.nav > a.is-active::after,
.nav-item.is-active > button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--violet);
}
.mobile-nav-list a.is-active { color: var(--violet); }

/* Dropdown */
.nav-item {
    position: relative;
}

.nav-item > button svg {
    transition: transform 0.2s ease;
}

.nav-item:hover > button svg {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 280px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 105;
}

/* Invisible hover bridge so dropdown doesn't disappear when crossing the gap */
.nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--text-muted);
    transition: all 0.15s ease;
    text-decoration: none;
}

.nav-dropdown a:hover {
    background: var(--bg-3);
    color: var(--text);
}

.nav-dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-dropdown-icon svg { width: 16px; height: 16px; }

.nav-dropdown-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dropdown-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.nav-dropdown a:hover .nav-dropdown-name {
    color: var(--violet-light);
}

.nav-dropdown-desc {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

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

/* Language switcher — dropdown */
/* Lang switch — synced to brand Select (Country variant) + Dropdown library */
.lang-switch {
    position: relative;
}

.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: background-color .18s ease, border-color .18s ease;
}

.lang-switch-btn:hover {
    background: var(--bg-3);
    border-color: var(--border-dark-hover);
}
.lang-switch.is-open .lang-switch-btn,
.lang-switch-btn:focus-visible {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .22);
}

.lang-flag {
    width: 24px;
    height: auto;             /* 4:3 SVG → ~18px; same treatment as app.cyberyozh.com */
    flex-shrink: 0;
    border-radius: 2px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
    display: inline-block;
    vertical-align: middle;
}

.lang-switch-btn svg {
    transition: transform 0.2s ease;
    color: var(--text-dim);
}

.lang-switch.is-open .lang-switch-btn svg {
    transform: rotate(180deg);
    color: var(--text-muted);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 28px;   /* clear the header bottom, sit below it with a small gap */
    min-width: 220px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 105;
    max-height: 360px;
    overflow-y: auto;
}

/* Opens on click — JS toggles .is-open on .lang-switch (see header.php). */
.lang-switch.is-open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.lang-dropdown a:hover {
    background: var(--bg-3);
    color: var(--text);
}

.lang-dropdown a.active {
    background: rgba(124, 58, 237, .12);
    color: var(--text);
    font-weight: 600;
}

.lang-dropdown a.active::after {
    content: '';
    margin-left: auto;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    color: var(--violet-light);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

.lang-dropdown .lang-flag {
    width: 24px;
    height: 18px;
}

@media (max-width: 1024px) {
    .nav { display: none; }
}

/* ============================================
   MOBILE NAV — burger + full-screen overlay
   Burger shows ≤1024 (where the desktop .nav is hidden); the overlay reuses
   the same links in a staggered full-screen sheet, in the brand's light style.
============================================ */
.nav-toggle {
    display: none;                 /* desktop: hidden, shown ≤1024 below */
    position: relative;
    width: 42px;
    height: 42px;
    margin-right: -9px;            /* optical alignment to the container edge */
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { color: var(--violet); }

/* Three bars: ::before = top, the span itself = middle, ::after = bottom. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}
.nav-toggle-bars { top: 20px; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* Open → morph the two outer bars into an ×, hide the middle. */
.nav-toggle.is-open .nav-toggle-bars { background: transparent; }
.nav-toggle.is-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;                   /* under the sticky header (100) so the × stays clickable */
    background: var(--bg);
    padding: 92px 24px 40px;       /* clear the 68px sticky header */
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s;
}
.mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}

.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list li {
    border-bottom: 1px solid var(--border-dark);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.mobile-nav.is-open .mobile-nav-list li { opacity: 1; transform: translateY(0); }
.mobile-nav.is-open .mobile-nav-list li:nth-child(1) { transition-delay: .10s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(2) { transition-delay: .15s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(3) { transition-delay: .20s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(4) { transition-delay: .25s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(5) { transition-delay: .30s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(6) { transition-delay: .35s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(7) { transition-delay: .40s; }
.mobile-nav.is-open .mobile-nav-list li:nth-child(8) { transition-delay: .45s; }

.mobile-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 4px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    text-decoration: none;
    transition: color .2s ease;
}
.mobile-nav-list a:hover,
.mobile-nav-list a:active { color: var(--violet); }

body.nav-open { overflow: hidden; }
body.nav-open .announcement { display: none; }   /* let the sticky header sit at top:0 under the sheet */

@media (max-width: 1024px) {
    .nav-toggle { display: inline-flex; }
}
@media (min-width: 1025px) {
    .mobile-nav { display: none; }                /* never paint the overlay on desktop */
}
@media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-nav-list li,
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after { transition-duration: .01ms; }
}

/* ============================================
   BUTTONS
============================================ */
/* Brand buttons — synced to component library (Buttons.png).
   Sizes: S (.btn = 36px), M (.btn-md = 42px), L (.btn-large = 48px).
   Variants: primary (violet solid), secondary (subtle filled),
   outlined-dark (dark sections), outlined-light (light sections), text (no chrome). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
    cursor: pointer;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
    background: var(--violet);
    color: #fff;
}
.btn-primary:hover  { background: #8b4af2; }
.btn-primary:active { background: var(--violet-deep); }

.btn-secondary {
    background: var(--bg-3);
    color: var(--text);
}
.btn-secondary:hover  { background: #25252f; }
.btn-secondary:active { background: var(--bg-2); }

.btn-outline-dark {
    background: transparent;
    color: var(--text);
    border-color: var(--border-dark-hover);
}
/* Light-section outline button: keep the dark border visible on hover (a white
   border vanished on the light background) + subtle fill + softened text. The
   genuinely-dark .final-cta variant keeps its own white-border hover below. */
.btn-outline-dark:hover  { background: var(--bg-light-2); border-color: rgba(0,0,0,.24); color: var(--text-muted); }
.btn-outline-dark:active { background: var(--bg-light-3); border-color: rgba(0,0,0,.24); }

.btn-outline-light {
    background: transparent;
    color: var(--text-dark);
    border-color: rgba(0,0,0,.14);
}
.btn-outline-light:hover  { background: var(--bg-light-2); border-color: rgba(0,0,0,.22); }
.btn-outline-light:active { background: var(--bg-light-3); }

.btn-text {
    background: transparent;
    color: var(--text);
    padding: 0 6px;
    height: auto;
}
.btn-text:hover { color: var(--violet-light); }

/* Sizes */
.btn-md {
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
}
.btn-md svg { width: 18px; height: 18px; }

.btn-large {
    height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
}
.btn-large svg { width: 18px; height: 18px; }

/* Icon-only variant — keeps the variant chrome but square footprint */
.btn-icon { padding: 0; width: 36px; }
.btn-icon.btn-md    { width: 42px; }
.btn-icon.btn-large { width: 48px; }

.btn-with-sub {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: auto;
    padding-top: 9px;
    padding-bottom: 9px;
}
.btn-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.7);
    letter-spacing: 0;
}
.btn-primary .btn-sub { color: rgba(255,255,255,.85); }
.btn-outline-light .btn-sub { color: var(--text-dark-muted); }

/* Disabled — applies to any variant */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   TYPOGRAPHY HELPERS
============================================ */
/* Brand pill / badge system — synced to component library (Badges.png).
   Variants: default | success | warning | error | blue | purple
   Modes:    .is-light (tint bg + colored text)
             .is-solid (full color fill + white text)
   Sizes:    S (default) / M (.cy-badge-md) / L (.cy-badge-lg) / XS (.cy-badge-xs) */
.cy-badge,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}
.cy-badge svg,
.eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }

.cy-badge-xs { padding: 2px 8px;  font-size: 10px; gap: 4px; }
.cy-badge-md { padding: 6px 12px; font-size: 13px; }
.cy-badge-lg { padding: 8px 14px; font-size: 14px; }

/* LIGHT (tinted) variants.
   The comment here used to claim these work on light AND dark sections. They do
   not: --violet-light (#a78bfa) over a 12% violet tint on a white page computes to
   2.21:1, well under the 4.5:1 these need at 12px. Measured, not assumed —
   Lighthouse flagged 6 of them on the home page.

   The site is overwhelmingly light (14 of the 15 eyebrows on the home page sit on
   #fff or #fbfbfd), so the DEFAULT is now the light-safe --violet (#7c3aed):
   4.63:1 on the tint, 5.70:1 on white. It is the brand's own primary violet, not a
   new colour — no palette drift.

   Dark sections take the override below. --violet-light stays exactly as it is for
   them, and for everything on --bg-dark generally, where it is the correct choice. */
.cy-badge.is-default,
.eyebrow {
    background: rgba(124, 58, 237, .12);
    color: var(--violet);
    border-color: rgba(124, 58, 237, .25);
}
/* The one dark section carrying an eyebrow. Add to this list rather than reaching
   back for --violet-light inline, so the light-safe default keeps holding. */
.ethics-section .eyebrow {
    color: var(--violet-light);
}
.eyebrow-light {
    background: rgba(124, 58, 237, .10);
    color: var(--violet-deep);
    border-color: rgba(124, 58, 237, .22);
}
/* #34d399 on the 15% emerald tint over white is 1.6:1 — the worst contrast on the
   site. #047857 (the same emerald family, two steps darker) is 4.62:1 on the tint
   and 5.48:1 on white. */
.cy-badge.is-success { background: rgba(16, 185, 129, .15); color: #047857; border-color: rgba(16, 185, 129, .25); }
.cy-badge.is-warning { background: rgba(245, 158, 11, .15); color: #fbbf24; border-color: rgba(245, 158, 11, .25); }
.cy-badge.is-error   { background: rgba(239, 68, 68, .15);  color: #fca5a5; border-color: rgba(239, 68, 68, .25); }
.cy-badge.is-blue    { background: rgba(59, 130, 246, .15); color: #93c5fd; border-color: rgba(59, 130, 246, .25); }
.cy-badge.is-purple  { background: rgba(124, 58, 237, .15); color: var(--violet); border-color: rgba(124, 58, 237, .28); }
.cy-badge.is-disabled{ background: rgba(255,255,255,.06);  color: var(--text-dim); border-color: rgba(255,255,255,.08); }

/* SOLID variants — for emphasis / mockups / tree rows */
.cy-badge.is-solid.is-default { background: #18181b; color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-success { background: var(--success); color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-warning { background: var(--warning); color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-error   { background: #ef4444;       color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-blue    { background: #3b82f6;       color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-purple  { background: var(--violet); color: #fff; border-color: transparent; }
.cy-badge.is-solid.is-disabled{ background: var(--bg-3);   color: var(--text-dim); border-color: transparent; }

/* Light-section overrides (when sitting on white bg) */
.section-light .cy-badge.is-success { color: #047857; }
.section-light .cy-badge.is-warning { color: #b45309; }
.section-light .cy-badge.is-error   { color: #b91c1c; }
.section-light .cy-badge.is-blue    { color: #1d4ed8; }
.section-light .cy-badge.is-purple  { color: var(--violet-deep); }

.section-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 640px;
}

.section-light .section-subtitle {
    color: var(--text-dark-muted);
}

/* ============================================
   SECTION BASE
============================================ */
section {
    padding: 96px 0;
    position: relative;
}

.section-light {
    background: var(--bg-light);
    color: var(--text-dark);
}

.section-header {
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    section { padding: 64px 0; }
    .section-header { margin-bottom: 40px; }
}

/* ============================================
   SHARED — Final CTA + Footer (used on home + all use-case pages)
============================================ */

/* ============================================
   FINAL CTA
============================================ */
.final-cta {
    background: linear-gradient(135deg, var(--violet-deep) 0%, var(--violet) 100%);
    text-align: center;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    color: var(--text-on-dark);
}
/* .final-cta's own 96px padding beats the generic mobile `section{64px}` rule,
   so shrink it here (after the base rule, to win the cascade) — otherwise it's
   the one oversized block left on small screens. */
@media (max-width: 768px) {
    .final-cta { padding: 64px 0; }
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
                      radial-gradient(circle at 70% 50%, rgba(0, 0, 0, 0.18) 0%, transparent 50%);
    pointer-events: none;
}

.final-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.final-cta .eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.final-cta h2 {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color: var(--text-on-dark);
}

.final-cta p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 32px;
}

.final-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.final-cta-license {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

/* Buttons inside Final-CTA — white-primary on violet, outline-white */
.final-cta .btn-primary {
    background: #ffffff;
    color: var(--violet);
}
.final-cta .btn-primary:hover {
    background: #f4f4f5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.final-cta .btn-outline-dark,
.final-cta .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--text-on-dark);
}
.final-cta .btn-outline-dark:hover,
.final-cta .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-on-dark);
}

/* ============================================
   FOOTER
============================================ */
.footer {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    border-top: 1px solid var(--border-on-dark);
    padding: 64px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer .logo { color: var(--text-on-dark); }

.footer-brand p {
    font-size: 14px;
    color: var(--text-muted-on-dark);
    line-height: 1.6;
    margin-top: 16px;
    max-width: 280px;
}

.footer-col h5 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted-on-dark);
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    font-size: 14px;
    color: var(--text-muted-on-dark);
    transition: color 0.15s ease;
}

.footer-col a:hover { color: var(--violet-light); }

/* Thin separator above a footer link (e.g. Privacy policy) — matches the prototype. */
.footer-col li.footer-sep {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-dark);
}

.footer-abuse {
    margin-top: 32px;
    padding: 20px 24px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.footer-abuse-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-abuse-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--violet);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-abuse-icon svg { width: 20px; height: 20px; }

.footer-abuse-text strong {
    display: block;
    font-size: 14px;
    color: var(--text-on-dark);
    font-weight: 700;
    margin-bottom: 2px;
}

.footer-abuse-text span {
    font-size: 13px;
    color: var(--text-muted-on-dark);
}

.footer-abuse-email {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--violet-light);
    font-weight: 600;
    padding: 10px 18px;
    background: var(--bg-dark-2);
    border: 1px solid var(--border-on-dark);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.footer-abuse-email:hover {
    border-color: var(--violet);
    color: var(--text-on-dark);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--border-on-dark);
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    font-size: 12px;
    color: var(--text-muted-on-dark);
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: span 2; }
}

@media (max-width: 600px) {
    /* Brand full-width on top, the 4 link columns in a tidy 2×2 grid below. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .footer-brand { grid-column: span 2; }
    /* The description carries a 280px desktop cap; full-width the brand block now
       spans 382px, so the cap left dead space on the right and looked lopsided.
       Let it fill the row so the brand reads as evenly as the columns below. */
    .footer-brand p { max-width: none; }
    .footer-abuse { flex-direction: column; align-items: flex-start; }
}

/* Button-pair groups (hero / final-CTA / use-case hero / crawler CTA): on phones
   two .btn-large can't sit side-by-side and wrap into unequal rows. Stack them
   full-width so they're equal. None of these containers set flex-direction or the
   buttons a width, so this single block wins uncontested on every page. */
@media (max-width: 600px) {
    .hero-actions,
    .final-cta-actions,
    .uc-hero-actions,
    .crawler-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-actions > .btn,
    .final-cta-actions > .btn,
    .uc-hero-actions > .btn,
    .crawler-cta-actions > .btn {
        width: 100%;
    }
}

/* ============================================
   SHARED — Live example markup (used on home #marketplaces + use-case #uc-live)
   Round 2 fix: these were incorrectly assumed dead in use-case.css
============================================ */

/* Section-header center modifier (FAQ on use-case page uses this) */
.section-header.section-header--center {
    align-items: center;
    text-align: center;
}

/* JSON syntax highlighting (light bg + dark .market-example-code panel) */
.code-key    { color: #c4b5fd; }
.code-string { color: #86efac; }
.code-num    { color: #fbbf24; }
.code-bracket { color: var(--text-dim); }

/* Copy button overlay on code panels */
.code-copy {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}
.code-copy:hover {
    background: var(--violet);
    color: white;
    border-color: var(--violet);
}
.code-copy.copied {
    background: var(--success);
    color: var(--bg);
    border-color: var(--success);
}

/* Marketplace presets meta strip (under preset picker on main; ok if unused on use-case) */
.market-presets-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-dark);
    font-size: 13px;
    color: var(--text-muted);
}

.market-presets-meta strong {
    color: var(--text);
    font-weight: 700;
}

/* Market example grid: dark JSON panel + fields list (main #marketplaces + use-case #uc-live) */
.market-example {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 56px;
}

.market-example-code {
    background: #0a0a0f;
    color: var(--text-on-dark);
    padding: 28px 32px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    overflow-x: auto;
    position: relative;
}
.market-example-code pre { color: inherit; }
/* On the dark code panel, brackets read better with a lighter dim */
.market-example-code .code-bracket { color: var(--text-dim-on-dark); }

.market-example-code::before {
    content: 'Sample output · Amazon UK';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600;
}

.market-example-fields {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.market-example-fields h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.field-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dark);
}

.field-item:last-child { border-bottom: none; }

.field-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.field-check svg { width: 11px; height: 11px; }

.field-item div { flex: 1; }

.field-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    color: var(--text);
}

.field-desc {
    font-size: 12px;
    color: var(--text-dim);
}

/* Smooth fade transition during preset/live switch */
/* Smooth fade transition for preset content */
.market-example-code pre,
.market-example-fields {
    transition: opacity 0.15s ease;
}
.market-example.switching .market-example-code pre,
.market-example.switching .market-example-fields {
    opacity: 0.3;
}

/* Stack the code panel above the field list on narrow screens — side by side
   gets too cramped (the fields column drops under ~200px on phones). */
@media (max-width: 768px) {
    .market-example { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────
 * Cover fallback — inline SVG decoration when a post has no featured image.
 * Mirrors the behaviour of <img class="..." object-fit: cover>.
 * Used in blog grids (b1, b2), hero sections, sidebar widgets, and single
 * post hero. See inc/cover-fallback.php.
 * ──────────────────────────────────────────────────────────────────────── */
.cyz-cover-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0;
}
.cyz-cover-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* When dropped into a container that isn't explicitly position:relative
   (e.g. a bare wrapper in single.php), let the wrapper claim the box itself. */
.cyz-cover-fallback:only-child {
    position: relative;
}

/* ============================================================
   REVIEWS / TESTIMONIALS — cyz_reviews_section() (base.css = site-wide)
   ============================================================ */
.reviews-section .reviews-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 16px;
    max-width: 640px;
    margin: -8px auto 0;
}
.reviews-aggregate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 4px;
    flex-wrap: wrap;
}
.reviews-aggregate-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--gold);
    line-height: 0;
}
.reviews-aggregate-stars svg { width: 18px; height: 18px; }
.reviews-aggregate-text { font-size: 14px; color: var(--text-muted); }
.reviews-aggregate-text strong { color: var(--text); }

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.review-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-card);
}
.review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.review-stars { display: inline-flex; gap: 3px; }
.review-stars .review-star { color: #d4d4d8; line-height: 0; }
.review-stars .review-star.is-on { color: var(--gold); }
.review-stars svg { width: 16px; height: 16px; }
.review-quote {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    flex: 1 1 auto;
}
.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.review-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-avatar-initials {
    background: var(--violet-tint);
    color: var(--violet-deep);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
}
.review-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.review-name { font-weight: 700; font-size: 14px; color: var(--text); }
.review-role { font-size: 12.5px; color: var(--text-muted); }
.review-company { font-size: 12.5px; color: var(--text-dim); }
.review-name, .review-role, .review-company {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-source {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-dim);
    background: var(--bg-3);
    padding: 4px 9px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
a.review-source:hover { color: var(--violet); }
/* Source logo (before the stars) + decorative quote glyph (right of the top row). */
.review-top-main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.review-source { display: inline-flex; align-items: center; gap: 5px; }
.review-source svg, .review-source img { width: 14px; height: 14px; flex-shrink: 0; }
.review-source img { object-fit: contain; }
/* Source logos are always monochrome: inline SVGs get recolored to the pill color
   (fill="none" survives so stroke icons keep working), uploaded images are painted
   through a CSS mask (skipped when the editor adds the no-mono class). The base
   rule covers fill-less SVGs (would render black) and root-level fill attributes;
   the [fill]/[stroke] overrides recolor explicit per-path brand colors. */
.review-source svg { fill: currentColor; }
.review-source svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.review-source svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.review-source .review-source-logo-img {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--cyz-logo) center / contain no-repeat;
    mask: var(--cyz-logo) center / contain no-repeat;
}
.review-date {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}
.review-quote-deco { color: var(--violet); opacity: .14; line-height: 0; flex-shrink: 0; margin-left: 8px; }
.review-quote-deco svg { width: 34px; height: 34px; display: block; }

/* Slider mode — reviews.js adds .is-slider (desktop >4 reviews, or mobile=slider) */
.reviews-section.is-slider .reviews-grid {
    display: flex;
    align-items: stretch;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 32px;
}
.reviews-section.is-slider .reviews-grid::-webkit-scrollbar { display: none; }
.reviews-section.is-slider .review-card {
    flex: 0 0 calc((100% - 40px) / 3);
    scroll-snap-align: start;
}
.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}
.reviews-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--bg-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color .15s, color .15s;
}
.reviews-arrow svg { width: 18px; height: 18px; }
.reviews-arrow:hover { border-color: var(--violet); color: var(--violet); }
.reviews-dots { display: inline-flex; align-items: center; gap: 8px; }
.reviews-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: #d4d4d8;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.reviews-dot.is-on { background: var(--violet); transform: scale(1.3); }

@media (max-width: 1024px) {
    .reviews-section.is-slider .review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 768px) {
    .reviews-section.is-slider .review-card { flex-basis: 100%; }
}

@media (max-width: 600px) {
    .reviews-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
    .review-card { padding: 22px 20px; gap: 12px; }
    .reviews-section .reviews-sub { font-size: 15px; }
}

/* ============================================================
   Cookie consent banner (rendered by inc/integrations.php only
   when GA4/GTM is configured; hidden again once a choice is made)
   ============================================================ */
.cyz-consent {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: min(680px, calc(100vw - 32px));
    padding: 14px 18px;
    background: var(--bg-dark);
    color: var(--text-muted-on-dark);
    border: 1px solid var(--border-on-dark);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.45);
    font-size: 13.5px;
    line-height: 1.5;
}
.cyz-consent-text { margin: 0; }
.cyz-consent-text a {
    color: var(--violet-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cyz-consent-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cyz-consent-btn {
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cyz-consent-accept {
    background: var(--violet);
    color: #fff;
}
.cyz-consent-accept:hover { background: var(--violet-deep); }
.cyz-consent-decline {
    background: transparent;
    color: var(--text-muted-on-dark);
    border-color: var(--border-on-dark);
}
.cyz-consent-decline:hover {
    color: var(--text-on-dark);
    border-color: var(--border-on-dark-hover);
}
@media (max-width: 560px) {
    .cyz-consent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        bottom: 12px;
        text-align: center;
    }
    .cyz-consent-actions { justify-content: center; }
}

/* ============================================================
   Yoast content blocks (FAQ / How-To) — global components.
   Editors can insert these on ANY content (blog posts, pages,
   legal docs); styling must not depend on the page template.
   Questions are upgraded to real <h3> at render time
   (inc/faq-block.php); Yoast emits the FAQPage/HowTo JSON-LD.
   ============================================================ */
.schema-faq {
    margin: 28px 0 32px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-2);
    overflow: hidden;
}
.schema-faq-section {
    padding: 20px 24px 22px;
}
.schema-faq-section + .schema-faq-section {
    border-top: 1px solid var(--border-light);
}
h3.schema-faq-question {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text);
}
.schema-faq-answer {
    display: block;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* How-To: name/description + numbered steps */
.schema-how-to {
    margin: 28px 0 32px;
    padding: 22px 24px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-2);
}
.schema-how-to .schema-how-to-description {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}
.schema-how-to .schema-how-to-total-time {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-dim);
}
.schema-how-to ol.schema-how-to-steps,
.schema-how-to ul.schema-how-to-steps {
    margin: 0;
    padding-left: 22px;
}
.schema-how-to .schema-how-to-step {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-muted);
}
.schema-how-to .schema-how-to-step-name {
    display: block;
    font-weight: 700;
    color: var(--text);
}
.schema-how-to .schema-how-to-step-text {
    display: block;
}
@media (max-width: 600px) {
    .schema-faq-section { padding: 16px 16px 18px; }
    h3.schema-faq-question { font-size: 16px; }
    .schema-how-to { padding: 18px 16px; }
}