/* =============================================
   Reduced-motion fallback (WCAG 2.3.3 AAA).
   For users who prefer reduced motion, neutralise every animation and
   transition the theme might run — hero morph swap, drift cards,
   eyebrow counter, swiper auto-effects, scale-in / fade-in / lift-on-
   hover. Individual blocks can opt back in for critical motion (e.g.
   focus rings) by re-declaring inside their own @media query.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
    --color-primary: #6050b0;
    --color-primary-hover: #5040a0;
    --color-primary-light: rgba(196, 184, 255, 0.3);
    /* Darker variant of --color-primary specifically for text-on-light
       backgrounds where we need AAA contrast (≥7:1). The brand colour
       (#6050b0) is AA-pass on white (6.16:1) but AAA-fail. Used in
       .badge, .copy-link, .auth-switch-link, filter pills. ~9.5:1. */
    --color-primary-text: #3d3680;
    --color-text-dark: #313330;
    /* #5e5f5c gave AA-pass (~6.4:1 on white) but failed AAA. #4f504e
       pushes the contrast to ~7.6:1 — AAA-pass for normal text —
       without making the page feel as "black" as #333. Used for body
       copy in features, FAQ, footer secondary text, etc. */
    --color-text-muted: #4f504e;
    --color-bg-light: #fcfcfc;
    --color-bg-white: #ffffff;
    /* Page-level background — warm beige used on every site page (home,
       about, contacts, blog, wishes, my-wishes, 404, etc). Cards and
       components keep --color-bg-light (#fcfcfc) so they read as raised
       surfaces on this body color. */
    --color-page-bg: #f5f3f0;
    --color-border: rgba(178, 178, 174, 0.2);
    --color-success: #10b981;
    --color-dark-bg: #2F2F31;
    --color-accent-brown: #7a5744;

    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;

    --container-width: 1500px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* =============================================
   BASE RESET
   ============================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Kill the default mobile-Safari / Chrome blue square that flashes
       on tap (links, buttons, labels, role="button"…). We rely on hover
       and active styles for feedback on desktop and don't want the noisy
       overlay on touch. */
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 84px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    background-color: var(--color-page-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: var(--header-height, 84px);
}

html.body-locked,
body.body-locked {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

/* Skip link — visually hidden until focused, no layout impact */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    text-decoration: none;
}

.skip-link:focus {
    position: fixed;
    top: 8px;
    /* inset-inline-start so the skip-link surfaces on the reading-start
       side: top-left in LTR (en/ru), top-right in RTL (he/ar). Without
       this, RTL users tab and the link appears mid-row visually away
       from where their attention starts. */
    inset-inline-start: 8px;
    z-index: 9999;
    width: auto;
    height: auto;
    padding: 12px 24px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

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

/* Focus indicators
   NOTE: do NOT set border-radius here — the focus ring is drawn by
   `outline` + `outline-offset`, which naturally follows the element's
   own border-radius. Forcing a radius here would override pill/round
   inputs and visually flatten their corners on keyboard focus (bug
   regressed once before — see Group E plan, 2026-05-14). */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

.highlight {
    color: var(--color-primary);
}

.highlight-brown {
    color: var(--color-accent-brown);
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    font-size: 0.95rem;
    font-family: var(--font-primary);
    gap: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    color: #fff;
    border-radius: 100px;
    box-shadow: 0 12px 24px -6px rgba(96, 80, 176, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -6px rgba(96, 80, 176, 0.45);
    color: #fff;
}

.btn-gray {
    background-color: #e3e3de;
    color: var(--color-text-dark);
    border-radius: 100px;
    border: none;
}

.btn-gray:hover {
    background-color: #d5d5d0;
    color: var(--color-text-dark);
}

.btn-secondary {
    background-color: var(--color-bg-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-bg-light);
}

.btn-text {
    background: transparent;
    color: var(--color-text-muted);
}

.btn-text:hover {
    color: var(--color-text-dark);
}

.btn-outline {
    border: 1px solid var(--color-border);
    background: transparent;
    border-radius: 100px;
    color: var(--color-text-dark);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Premium / "Upgrade to Premium" CTAs — animated gold gradient. Self-contained
   (no dependency on --gen-prem-* tokens, which only ship with the generator
   CSS) so it renders identically on every page: account, pricing, header,
   generator. Pair with .btn, e.g. class="btn btn-premium". */
@keyframes btn-premium-shift {
    0%, 100% { background-position: 0% center; }
    50%      { background-position: 100% center; }
}
.btn-premium {
    background: linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
    background-size: 200% 100%;
    animation: btn-premium-shift 4s ease-in-out infinite;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 700;
    box-shadow: 0 8px 22px -8px rgba(200, 149, 72, 0.55);
}
.btn-premium:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(200, 149, 72, 0.6);
}
@media (prefers-reduced-motion: reduce) {
    .btn-premium { animation: none; }
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
    background: rgba(245, 243, 240, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1200;
    border-bottom: 1px solid rgba(178, 178, 174, 0.12);
    transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-scrolled {
    padding: 0 0;
}

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

.site-branding .site-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-text-dark);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.site-branding .site-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.primary-navigation .nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1399px) {
    .primary-navigation .nav-menu {
        gap: 1.3rem;
    }
}

.primary-navigation a {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 0;
}

.primary-navigation a:hover {
    color: var(--color-text-dark);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-actions .btn-primary {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

.header-lang-dropdown {
    position: relative;
    margin-left: 1rem;
}

.header-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-text-dark);
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.header-lang-toggle:hover {
    border-color: rgba(96, 80, 176, 0.45);
    color: var(--color-primary);
}

.header-lang-toggle-arrow {
    font-size: 0.75rem;
    transform: translateY(1px);
}

.header-lang-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    left: auto;
    min-width: 180px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
    display: none;
    z-index: 1300;
}

.header-lang-dropdown.is-open .header-lang-menu {
    display: block;
}

.header-lang-dropdown.is-open .header-lang-toggle-arrow {
    transform: translateY(1px) rotate(180deg);
}

.header-lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--color-text-dark);
    font-size: 0.84rem;
    text-decoration: none;
}

.header-lang-item:hover {
    background: rgba(96, 80, 176, 0.08);
    color: var(--color-primary);
}

.header-lang-item.is-current {
    background: rgba(96, 80, 176, 0.12);
}

.header-lang-item-code {
    font-weight: 700;
    font-size: 0.78rem;
}

/* Header account dropdown (logged-in user menu) */
.header-account-dropdown {
    position: relative;
}

/* Account toggle — give the avatar/icon visual weight so it sits on the
   beige page background as a confident, stand-alone element. Soft lavender
   gradient + drop-shadow tint match the primary brand colour without
   competing with the purple "Generate wish" CTA next to it. */
.header-account-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* Pull the toggle slightly away from the "All Wishes" link on its left
       so the visual gap matches the rounded-pill CTA on its right (the pill
       has invisible padding inside its rounded corners that fakes extra
       space). 0.25rem of inline-margin balances both sides without changing
       the overall .header-actions gap for everyone else. */
    margin-inline: 0.25rem;
    border: 1px solid rgba(96, 80, 176, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, #ffffff 0%, #ece7ff 100%);
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    box-shadow:
        0 1px 2px rgba(49, 51, 48, 0.06),
        0 6px 16px -8px rgba(96, 80, 176, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.header-account-toggle:hover,
.header-account-dropdown.is-open .header-account-toggle {
    border-color: rgba(96, 80, 176, 0.55);
    color: var(--color-primary-hover, #5040a0);
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(49, 51, 48, 0.08),
        0 10px 22px -8px rgba(96, 80, 176, 0.5);
}

.header-account-toggle:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(49, 51, 48, 0.06),
        0 4px 12px -8px rgba(96, 80, 176, 0.3);
}

.header-account-toggle-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.header-account-toggle-icon {
    width: 22px;
    height: 22px;
    color: inherit;
}

.header-account-menu {
    position: absolute;
    /* Drop the gap to a hair line + add internal padding-top so the
     * visual gap between the avatar and the first menu item stays the
     * same, but :hover doesn't break when the cursor crosses it. */
    top: calc(100% + 0.2rem);
    right: 0;
    left: auto;
    min-width: 200px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 0.55rem 0.35rem 0.35rem;
    display: none;
    z-index: 1300;
}

.header-account-dropdown.is-open .header-account-menu,
.header-account-dropdown:hover .header-account-menu,
.header-account-dropdown:focus-within .header-account-menu {
    display: block;
}

/* Phase 6.8 J — Invisible bridge between the avatar button and the menu.
 * Phase 6.7 D shrank the gap to 0.2rem + padding-top, but cursors still
 * dropped :hover when crossing the ~3px of "no-hover land". The ::before
 * extends the menu's hover hit-area UPWARD by 14px so the cursor passes
 * cleanly from avatar → menu without losing :hover state. */
.header-account-dropdown.is-open .header-account-menu::before,
.header-account-dropdown:hover .header-account-menu::before,
.header-account-dropdown:focus-within .header-account-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
    pointer-events: auto;
}

.header-account-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--color-text-dark);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
}

.header-account-item:hover,
.header-account-item:focus-visible {
    background: rgba(96, 80, 176, 0.08);
    color: var(--color-primary);
    outline: none;
}

.header-account-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.header-account-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.header-account-item-label {
    flex: 1;
}

[dir="rtl"] .header-account-menu {
    right: auto;
    left: 0;
}

/* ─── Inline "forward" arrow glyph (→, →) inside CTAs/buttons.
   In LTR locales the arrow points right and reads as "continue". In
   RTL locales (he, ar) where the reading direction is right-to-left,
   "continue" is on the LEFT — so we mirror the glyph. Used by wrapping
   the Unicode arrow in <span class="dg-arrow-end" aria-hidden="true">.
   `aria-hidden` on the wrapper is important: screen readers don't need
   "right-pointing arrow" announced when the surrounding button text
   already conveys the action. ─── */
.dg-arrow-end {
    display: inline-block;
    line-height: 1;
}
[dir="rtl"] .dg-arrow-end,
html[lang^="he"] .dg-arrow-end,
html[lang^="ar"] .dg-arrow-end {
    transform: scaleX(-1);
}

/* Burger Menu */
.burger-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.burger-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.burger-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger-toggle.active span:nth-child(2) {
    opacity: 0;
}

.burger-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
    padding: 5rem 0 6rem;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary-light);
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    align-self: flex-start;
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-title {
    font-size: 3.75rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 480px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 1rem;
}

.hero-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.meta-check {
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Hero Visual Card */
.hero-visual {
    position: relative;
}

.hero-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.hero-card-image {
    width: 100%;
}

.hero-card-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.hero-card-body {
    padding: 1.25rem;
}

.hero-card-chips {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hero-card-chip {
    height: 8px;
    border-radius: 4px;
}

.hero-card-chip--dark {
    background: var(--color-text-dark);
    width: 40px;
}

.hero-card-chip--light {
    background: var(--color-border);
    width: 60px;
}

.hero-card-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--color-bg-light);
    margin-bottom: 0.5rem;
}

.hero-card-bar--short {
    width: 40%;
}

.hero-card-bar--full {
    width: 100%;
}

.hero-card-bar--medium {
    width: 70%;
}

.hero-card-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

.hero-card-blur--top {
    width: 200px;
    height: 200px;
    background: #c4b8ff;
    top: -60px;
    right: -40px;
}

.hero-card-blur--bottom {
    width: 180px;
    height: 180px;
    background: #b8d4ff;
    bottom: -50px;
    left: -30px;
}

/* Floating preview */
.hero-preview-float {
    position: absolute;
    bottom: -30px;
    right: -20px;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    max-width: 280px;
    animation: floatUp 3s ease-in-out infinite alternate;
}

.hero-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.hero-preview-icon {
    font-size: 1.1rem;
}

.hero-preview-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-dark);
}

.hero-preview-quote {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.5;
}

@keyframes floatUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-8px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in анимации hero убраны — пользователи жаловались на заметную
   задержку появления контента после загрузки на Safari/мобайле. Hero
   теперь появляется мгновенно вместе с остальной разметкой.
   @keyframes fadeInUp ниже сохранён на случай повторного использования. */
.hero-content { /* no animation */ }
.hero-visual  { /* no animation */ }

/* =============================================
   GENERATOR SECTION
   ============================================= */
.generator-section {
    padding: 2rem 0 5rem;
}

.generator-container {
    display: flex;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 auto;
    max-width: 1000px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.generator-form-area {
    flex: 1;
    padding: 2.5rem;
}

.generator-form-area h3 {
    margin-bottom: 2rem;
    font-size: 1.35rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .input-group {
    flex: 1;
}

.input-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

[dir="rtl"] .input-group {
    text-align: right;
}

.input-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    transition-property: border-color, box-shadow;
    transition-duration: 0.2s;
    background: var(--color-bg-white);
    color: var(--color-text-dark);
}

.form-control::placeholder {
    color: #b0b0b0;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.1);
}

/* Password visibility toggle (eye icon) */
.password-field-wrap {
    position: relative;
}
.password-field-wrap .form-control {
    padding-right: 2.75rem;
}
[dir="rtl"] .password-field-wrap .form-control {
    padding-right: 0.5rem;
    padding-left: 2.75rem;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}
[dir="rtl"] .password-toggle {
    right: auto;
    left: 0.5rem;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--color-text-dark);
    background-color: rgba(0, 0, 0, 0.04);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.password-toggle .pwd-eye-off { display: none; }
.password-toggle.is-visible .pwd-eye { display: none; }
.password-toggle.is-visible .pwd-eye-off { display: inline-block; }

.btn-full-width {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.9rem;
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-primary);
    box-shadow: 0 12px 24px -6px rgba(96, 80, 176, 0.35);
    transition: all 0.25s ease;
}

.btn-full-width:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -6px rgba(96, 80, 176, 0.45);
}

/* When btn-full-width is used on an <a> tag */
a.btn-full-width,
.btn-full-width--link {
    display: flex;
    text-decoration: none;
    color: #fff;
}

.generator-result-area {
    flex: 1;
    padding: 2.5rem;
    background: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--color-border);
}

.result-placeholder {
    text-align: center;
    color: var(--color-text-muted);
}

.result-text {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.result-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   SECTION UTILITIES
   ============================================= */
.section-padding {
    padding: 5rem 0;
}

.text-center {
    text-align: center;
}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1rem;
    line-height: 1.7;
}

/* =============================================
   USE CASES
   ============================================= */
.use-cases-section {
    padding: 5rem 0;
}

.use-cases-header {
    text-align: center;
    margin-bottom: 3rem;
}

.use-cases-header p {
    color: var(--color-text-muted);
    max-width: 550px;
    margin: 0 auto;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.use-case-card {
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.use-case-card .icon,
.use-case-icon {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.use-case-icon img {
    width: 30px;
    height: 30px;
}

.use-case-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.use-case-card p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.use-case-example,
.use-case-quote {
    background: var(--color-bg-light);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-text-dark);
    line-height: 1.5;
}

/* =============================================
   HOW IT WORKS
   ============================================= */
.how-it-works-section {
    background-color: var(--color-bg-white);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}

.step-card {
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.step-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.step-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}

/* =============================================
   EXAMPLE GALLERY (Swiper)
   ============================================= */
.examples-section {
    padding: 5rem 0;
    /* Safety: containing block для любого position:absolute внутри секции.
       Если specificity-битва за `.examples-swiper-pagination` всё-таки
       проиграет swiper-bundle.css (lazy-загружается после нашего CSS),
       абсолютные bullets хотя бы привяжутся к этой секции вместо ICB
       и не улетят в самый верх страницы. */
    position: relative;
}

.filter-pills {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 2.5rem;
    flex-wrap: wrap;
}

.pill {
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font-primary);
    font-weight: 500;
    transition: all 0.2s;
}

.pill.active,
.pill:hover {
    /* primary-hover (#5040a0) instead of primary (#6050b0) — white text
       on #5040a0 is 7.6:1, AAA-pass. The brand colour stays for
       non-active hover-less states; active gets the darker variant. */
    background: var(--color-primary-hover);
    color: white;
    border-color: var(--color-primary-hover);
}

.examples-swiper {
    overflow: hidden;
    padding-bottom: 1rem;
    /* Reserve height to prevent CLS: Swiper CSS/JS loads after HTML parse,
       so pre-init the block-layout slides would stack vertically and push
       the page below down by ~800px before JS collapses them into a row.
       Fixing height + overflow:hidden clips the stacked preview so the
       layout is stable from first paint through Swiper init. The pagination
       used to live inside this block, but Swiper's own .swiper class also
       sets overflow:hidden, which clipped the bullets' bottom edge — so
       it's now mounted OUTSIDE as .examples-swiper-pagination. */
    height: 480px;
}

/* Pure-CSS fallback пока Swiper-bundle не загружен (lazy-loaded через
   IntersectionObserver — см. main.js). Дает native scroll-snap, чтобы
   пользователь мог листать карточки пальцем даже на медленной сети до
   момента, когда Swiper-init придет и подменит UI на полноценный slider.
   Swiper добавляет класс `.swiper-initialized` после init — этот блок
   автоматически перестает применяться. */
.examples-swiper:not(.swiper-initialized) {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Скрыть scrollbar в Firefox; WebKit/Chromium всё равно показывают thin
       polished scrollbar, который выглядит уместно для горизонтального скролла. */
    scrollbar-width: thin;
}
.examples-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
}
.examples-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .examples-swiper:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}
@media (min-width: 1024px) {
    .examples-swiper:not(.swiper-initialized) .swiper-slide {
        flex-basis: calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

@media (min-width: 640px) {
    .examples-swiper { height: 440px; }
}
@media (min-width: 1024px) {
    .examples-swiper { height: 420px; }
}

.examples-swiper .swiper-slide {
    height: auto;
}

.example-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
    height: 100%;
}

.example-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.example-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.example-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background: var(--color-primary-light);
    /* AAA-contrast variant of the brand colour. On --color-primary-light
       (~rgba(196,184,255,0.3) over white) #3d3680 is ~7.4:1. */
    color: var(--color-primary-text);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.example-quote {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.example-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: auto;
}

.example-meta .tone {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.example-meta .copy-link {
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 0;
    /* AAA-pass variant of the brand colour for the "View" link sitting
       in the wish-card footer (white background). */
    color: var(--color-primary-text);
}

/* Swiper pagination — visual точки 10×10, hit-area 24×24 через padding+content-box.
   Pagination в потоке (relative) — не наезжает на карточки; центрируется между
   галереей и кнопкой ниже.
   ──────────────────────────────────────────────────────────────────────
   Double-class selector (.examples-swiper-pagination.swiper-pagination)
   нужен потому что Swiper-bundle.css загружается ЛЕНИВО — appendChild
   к <head> после нашего main.css (см. loadSwiperLib() в main.js). У него
   там стоит `.swiper-pagination { position: absolute; bottom: 10px; ... }`,
   и при одинаковой специфичности (one class) последний загруженный CSS
   побеждал — bullets улетали position:absolute относительно ICB и
   всплывали в самый верх страницы.
   Двойной класс повышает специфичность до two-class, что всегда
   побеждает single-class `.swiper-pagination` независимо от порядка
   загрузки. Тот же приём применён ниже для bullet-active. */
.examples-swiper-pagination.swiper-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
    line-height: 0;
    /* Centred row sits below the swiper, full-width container — Swiper
       positions the bullets via transforms inside this box. */
    text-align: center;
}

.examples-swiper-pagination .swiper-pagination-bullet {
    /* Visual dot stays 8×8. Hit-area is enlarged via padding so the
       full clickable target is 24×24 (WCAG 2.5.8 AA minimum). */
    width: 8px;
    height: 8px;
    box-sizing: content-box;
    padding: 8px;
    background: var(--color-primary);
    background-clip: content-box;
    border: 0;
    /* Tighter spacing so more bullets fit on a narrow viewport. */
    margin: 0 2px !important;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.25s ease;
    vertical-align: middle;
}

.examples-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* =============================================
   BENEFITS (Dark)
   ============================================= */
.benefits-section {
    background-color: var(--color-dark-bg);
    color: white;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding: 2rem 0;
}

.benefit-item .benefit-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.benefit-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: white;
}

.benefit-item p {
    /* #a0a0a0 on the dark section bg (#2f2f31) was 5.1:1 — AA-pass but
       AAA-fail. #c8c8c8 lifts the contrast to ~7.4:1, AAA-pass on the
       same dark background, while still reading as visually secondary. */
    color: #c8c8c8;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    flex-wrap: wrap;
}

.trust-stats {
    flex: 1;
    min-width: 280px;
}

.stats-row {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.stat-item.border-left {
    border-left: 1px solid var(--color-border);
    padding-left: 2rem;
}

.testimonial-card {
    flex: 1;
    min-width: 280px;
    background: var(--color-bg-white);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.testimonial-card .stars {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.testimonial-quote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

.testimonial-author {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Privacy-line variant: no stars, no author — a single honest statement.
   Center it and tighten spacing so it reads as a tagline, not a review. */
.testimonial-card--privacy {
    text-align: center;
    padding: 2rem 2.5rem;
}
/* Related articles block at the bottom of a single post. Horizontal card list
   with small thumbnail + title, collapses to a single column on mobile. */
.single-post-related {
    margin: 3rem 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.single-post-related__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--color-text-dark);
}
.single-post-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .single-post-related__list { grid-template-columns: 1fr; }
}
.single-post-related__item { margin: 0; }
.single-post-related__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    transition: transform .2s ease, box-shadow .2s ease;
}
.single-post-related__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}
.single-post-related__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}
.single-post-related__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.single-post-related__text {
    display: block;
    padding: .9rem 1rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Category FAQ — collapsible Q&A list rendered below the category listing,
   matched by FAQPage JSON-LD for rich-results eligibility. */
.category-faq { background: var(--color-bg-muted, #f9fafb); }
.category-faq__list {
    max-width: 820px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.category-faq__item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.category-faq__item[open] { box-shadow: 0 4px 14px rgba(0, 0, 0, .04); }
.category-faq__question {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-dark);
    list-style: none;
    position: relative;
    padding-right: 1.75rem;
}
.category-faq__question::-webkit-details-marker { display: none; }
.category-faq__question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary);
    transition: transform .2s ease;
}
.category-faq__item[open] .category-faq__question::after { content: "−"; }
.category-faq__answer {
    margin-top: .75rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}
.category-faq__answer p { margin: 0; }
/* RTL: flip the +/− to the other side */
[dir="rtl"] .category-faq__question { padding-right: 0; padding-left: 1.75rem; }
[dir="rtl"] .category-faq__question::after { right: auto; left: 0; }

.testimonial-card--privacy .testimonial-quote {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

/* =============================================
   SEO CONTENT
   ============================================= */
.seo-content-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

[dir="rtl"] .seo-content-inner {
    text-align: right;
}

.seo-text {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-top: 2rem;
}

.seo-text p+p {
    margin-top: 1.5rem;
}

/* =============================================
   BLOG PREVIEW
   ============================================= */
.blog-preview-section {
    background-color: var(--color-bg-white);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

.section-header .section-title {
    margin-bottom: 0;
}

.view-all-link {
    font-weight: 600;
    font-size: 0.95rem;
    /* AAA-pass variant of brand color on white (9.5:1). The default
       <a> color was inherited from the brand primary (#6050b0) which
       is AA-pass but AAA-fail. */
    color: var(--color-primary-text);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.blog-thumb-link {
    display: block;
}

.blog-img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.blog-img--placeholder {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #ece8ff 100%);
}

.blog-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-category {
    font-size: 0.7rem;
    font-weight: 700;
    /* AAA-pass: #3d3680 on #fcfcfc ≈ 9.4:1; the brand color was AA-pass
       only (6.25:1). Used on blog-card pills which are small text on
       light card background. */
    color: var(--color-primary-text);
    margin-bottom: 0.5rem;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.blog-title {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-title a {
    color: var(--color-text-dark);
}

.blog-title a:hover {
    color: var(--color-primary);
}

.blog-excerpt {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    flex: 1;
    line-height: 1.6;
}

.read-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dark);
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 0;
}

.read-more:hover {
    color: var(--color-primary);
}

.blog-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
}

.blog-card--empty {
    grid-column: 1 / -1;
    max-width: 640px;
    margin: 0 auto;
}

/* =============================================
   FAQ
   ============================================= */
.faq-container {
    max-width: 800px;
    margin: 3rem auto 0;
    text-align: left;
}

[dir="rtl"] .faq-container {
    text-align: right;
}

.faq-item {
    border: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-primary);
}

[dir="rtl"] .faq-question {
    text-align: right;
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    padding-bottom: 1.5rem;
    max-height: 500px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-icon {
    transition: transform 0.3s;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-muted);
}

/* =============================================
   FINAL CTA
   ============================================= */
.cta-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, #9d80f8 100%);
    border-radius: var(--radius-lg);
    padding: 5rem 2rem;
    color: white;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

.cta-banner h2 {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: white;
    position: relative;
    z-index: 1;
}

.cta-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 1;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
    border-radius: 100px;
    position: relative;
    z-index: 1;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    padding: 3rem 0 2rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: 3rem;
    align-items: flex-start;
}

.footer-col {
    min-width: 0;
}

.footer-brand {
    max-width: 360px;
}

.footer-brand .site-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-text-dark);
    text-transform: uppercase;
}

.footer-desc {
    color: var(--color-text-muted);
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-col-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-list a {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 0;
}

.footer-menu-list a:hover {
    color: var(--color-text-dark);
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.copyright {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin: 0;
}

/* Footer — connect column (newsletter + social) */
.footer-connect {
    max-width: 320px;
}
.footer-newsletter-form {
    margin-bottom: 1.5rem;
}
.footer-newsletter-title {
    margin: 0 0 0.35rem;
}
.footer-newsletter-desc {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.footer-newsletter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.footer-newsletter-input {
    flex: 1 1 150px;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.875rem;
    color: var(--color-text);
}
.footer-newsletter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.15);
}
.footer-newsletter-btn {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.footer-newsletter-btn:hover { opacity: 0.92; }
.footer-newsletter-btn:disabled { opacity: 0.6; cursor: default; }
.footer-newsletter-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.footer-newsletter-status {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
}
.footer-newsletter-status.is-ok  { color: #16a34a; }
.footer-newsletter-status.is-err { color: #dc2626; }

/* Footer contact email (brand column) */
.footer-contact { margin: 0.75rem 0 0; font-size: 0.85rem; }
.footer-contact-email { color: var(--color-text-muted); text-decoration: none; }
.footer-contact-email:hover { color: var(--color-primary); text-decoration: underline; }

/* Brand social-icon list (shared: footer + contacts) */
.social-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    background: #fff;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.social-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.social-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}
.social-icon svg { width: 100%; height: 100%; display: block; }
.footer-follow-title { margin: 0 0 0.6rem; }

/* Social block on the Contacts page */
.contacts-social-block { margin-top: 2rem; }
.contacts-social-heading {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}

/* WP-standard visually-hidden helper (used by the newsletter label) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 980px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-connect { max-width: none; }
}

/* =============================================
   MOBILE NAV OVERLAY
   ============================================= */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 243, 240, 0.98);
    z-index: 1300;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 5rem 1.25rem 2rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-overlay.active {
    display: flex;
}

.mobile-nav-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    border: none;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-text-dark);
    cursor: pointer;
    z-index: 1400;
}

.mobile-nav-overlay .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    width: 100%;
}

.mobile-nav-overlay .nav-menu a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.mobile-nav-overlay .nav-menu a:hover {
    color: var(--color-primary);
}

.mobile-nav-overlay .mobile-nav-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .hero-inner {
        gap: 3rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Header switches to mobile at 1200px */
@media (max-width: 1200px) {
    /* On mobile we run the header without vertical padding by default —
       the burger / lang dropdown / logo handle their own spacing, so the
       outer 1rem padding only adds a wasteful gap above the content. The
       JS-driven .is-scrolled state already collapses to 0 on desktop, so
       this matches that look from the start on phones / tablets. */
    .site-header {
        padding: 0;
    }

    .site-header-inner {
        justify-content: flex-start;
        gap: 0.6rem;
    }

    .site-branding {
        margin-right: auto;
    }

    .primary-navigation {
        display: none;
    }

    .header-lang-dropdown {
        display: block;
        margin-left: 0;
        margin-right: 0.25rem;
        order: 3;
    }

    .header-actions {
        display: none;
    }

    .burger-toggle {
        display: flex;
        order: 4;
    }

    /* RTL mobile header: logo on the right, burger+lang on the left */
    [dir="rtl"] .site-branding {
        margin-right: 0;
        margin-left: auto;
    }

    [dir="rtl"] .burger-toggle {
        order: 1;
    }

    [dir="rtl"] .header-lang-dropdown {
        order: 2;
        margin-right: 0;
        margin-left: 0.25rem;
    }

    /* RTL dropdown opens to the right */
    [dir="rtl"] .header-lang-menu {
        right: auto;
        left: 0;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Hero stacks */
    .hero-section {
        padding: 3rem 0 4rem;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .hero-content {
        align-items: center;
        order: 1;
    }

    .hero-badge {
        align-self: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        margin: 0 auto;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-meta {
        justify-content: center;
    }

    .hero-visual {
        order: 0;
        max-width: 340px;
        margin: 0 auto;
    }

    .hero-preview-float {
        right: -10px;
        bottom: -20px;
        max-width: 220px;
    }

    /* Generator */
    .generator-container {
        flex-direction: column;
    }

    .generator-result-area {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Grids */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonials-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .trust-stats,
    .testimonial-card {
        min-width: auto;
        width: 100%;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-bottom {
        margin-top: 2rem;
    }

    /* CTA */
    .cta-banner h2 {
        font-size: 1.75rem;
    }

    .cta-banner {
        padding: 3rem 1.5rem;
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stats-row {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   HEADER EXTRAS
   ============================================= */
@media (max-width: 1399px) {
    .header-actions .btn-text {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* =============================================
   AUTH MODAL
   ============================================= */
/* Bootstrap-style modal scroll: when the box is taller than the
   viewport, the overlay itself scrolls (overflow-y: auto) instead of
   the modal getting clipped. align-items/justify-content are dropped
   so margin: auto on .auth-modal-box can do the centering — that
   trick collapses to zero margin under tight viewports, letting the
   box anchor to the top and the overlay scroll past it.
   The page behind the modal is frozen via .body-locked (added by JS
   in showModal/hideModal). */
.auth-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.auth-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.auth-modal-box {
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    margin: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.28s ease;
}

.auth-modal-overlay.is-open .auth-modal-box {
    transform: translateY(0) scale(1);
}

/* Phase 6.10.2 — auth (login/register) modal goes full-width on phones. */
@media (max-width: 480px) {
    .auth-modal-overlay { padding: 0; }
    .auth-modal-box {
        width: 100%;
        max-width: 100%;
        padding: 2rem 1rem;
        border-radius: 12px;
    }
}

.auth-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.auth-modal-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.auth-error {
    color: #c53030;
    margin-bottom: 1rem;
    display: none;
    font-size: 0.9rem;
}

.auth-input-group--md {
    margin-bottom: 1rem;
}

.auth-input-group--lg {
    margin-bottom: 1.5rem;
}

.auth-switch-text {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-switch-link {
    /* AAA-pass text variant — same role as the brand colour, slightly
       darker for compliance on white modal background. */
    color: var(--color-primary-text);
    font-weight: 600;
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
}

.auth-section-hidden {
    display: none;
}

.auth-modal-hint {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.auth-success {
    color: #276749;
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Contextual notice — surfaced only when the auth modal opens because a
   guest tried a gated action (e.g. photo upload). Plain reopen keeps it
   hidden via the [hidden] attribute. */
.auth-notice[hidden] { display: none; }
.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(96, 80, 176, 0.08), rgba(96, 80, 176, 0.02));
    border: 1px solid rgba(96, 80, 176, 0.2);
    border-left: 3px solid var(--color-primary, #6050b0);
    border-radius: 10px;
    color: var(--color-text-dark, #1f2233);
    animation: auth-notice-in 0.28s ease;
}
.auth-notice__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(96, 80, 176, 0.12);
    color: var(--color-primary, #6050b0);
}
.auth-notice__body { min-width: 0; }
.auth-notice__title {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}
.auth-notice__text {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--color-text-muted, #52556b);
}
@keyframes auth-notice-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* RTL: swap the accent border to the right edge so it stays on the
   "leading" side for Hebrew/Arabic. */
[dir="rtl"] .auth-notice {
    border-left: 1px solid rgba(96, 80, 176, 0.2);
    border-right: 3px solid var(--color-primary, #6050b0);
}

.auth-social {
    margin-bottom: 0.25rem;
}

/* Wrapper holds our visual button + the GIS slot as siblings.
   GIS clears its target on renderButton(), so our button must NOT
   live inside .auth-social-slot — it would be wiped out. */
.auth-google-wrapper {
    position: relative;
    min-height: 44px;
    display: block;
}

.auth-social-slot {
    min-height: 44px;
    display: flex;
    justify-content: center;
}

/* GIS-rendered button: keep it interactive but visually invisible.
   Our .auth-google-button on top is the visual layer. */
.auth-social-slot > div,
.auth-social-slot iframe {
    max-width: 100% !important;
    width: 100% !important;
    color-scheme: light;
    opacity: 0;
    position: relative;
    z-index: 2;
}

/* GitHub-style outlined button — purely visual, clicks pass through
   (pointer-events: none) to the GIS iframe underneath. Hidden until
   the GIS button has actually rendered (.is-gis-ready added by JS),
   so users with ad-blocked / offline Google get nothing instead of
   a dead button. */
.auth-google-button {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid #d1d9e0;
    border-radius: 6px;
    background: #f6f8fa;
    color: #1f2328;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
    opacity: 0;
    transition: background 120ms ease, opacity 120ms ease;
}

.auth-google-wrapper.is-gis-ready .auth-google-button {
    opacity: 1;
}

.auth-google-wrapper.is-gis-ready:hover .auth-google-button {
    background: #eaeef2;
}

.auth-google-wrapper.is-gis-ready:active .auth-google-button {
    background: #d0d7de;
}

/* Self-rendered redirect-flow path (Firefox/Safari) — see setupSelfOauth
   Redirect in main.js. There's no GIS iframe under our button, so we
   make the visual button itself clickable instead of relying on a
   transparent layer above it. */
.auth-google-wrapper.is-self-redirect .auth-google-button {
    pointer-events: auto;
    cursor: pointer;
}

.auth-google-button__icon {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.auth-google-button__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.auth-google-button__label {
    display: inline-block;
}

/* Facebook login — a real interactive button (unlike Google, whose visual
   button is a layer over the GIS iframe). Brand blue, white text/icon. */
.auth-facebook-wrapper {
    position: relative;
    min-height: 44px;
    display: block;
    margin-top: 8px;
}

.auth-facebook-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid #1877F2;
    border-radius: 6px;
    background: #1877F2;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.auth-facebook-button:hover {
    background: #166fe0;
    border-color: #166fe0;
}

.auth-facebook-button:active {
    background: #1463cc;
    border-color: #1463cc;
}

.auth-facebook-button__icon {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.auth-facebook-button__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.auth-facebook-button__label {
    display: inline-block;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border, #e5e7eb);
}

/* Reset password standalone page */
.reset-password-main {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-password-main > .container {
    width: 100%;
}

.reset-password-box {
    max-width: 420px;
    margin: 0 auto;
    position: static;
    transform: none;
    box-shadow: 0 4px 32px rgba(0,0,0,.12);
    padding: 2.5rem;
    border-radius: 16px;
    width: 100%;
}

/* =============================================
   GENERATOR EXTRAS
   ============================================= */
.generator-public-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.generator-public-label {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

[dir="rtl"] .generator-public-label {
    text-align: right;
}

.result-loading,
.result-filled {
    display: none;
}

.result-filled {
    height: 100%;
    justify-content: space-between;
}

.btns-footer {
    display: flex;
    flex-direction: column;
}

/* =============================================
   PHOTO UPLOAD ZONE
   ============================================= */
.photo-upload-zone {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-light);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-upload-zone:hover,
.photo-upload-zone:focus-visible {
    border-color: var(--color-primary);
    background: rgba(96, 80, 176, 0.04);
}

.photo-upload-zone.drag-over {
    border-color: var(--color-primary);
    background: rgba(96, 80, 176, 0.08);
}

.photo-upload-zone.is-uploading {
    opacity: 0.7;
    pointer-events: none;
}

.photo-upload-zone.upload-error {
    border-color: #e53e3e;
}

.photo-upload-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.photo-upload-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--color-text-muted);
    text-align: center;
    pointer-events: none;
}

.photo-upload-idle svg {
    color: var(--color-primary);
    opacity: 0.6;
}

.photo-upload-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-dark);
}

.photo-upload-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.photo-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 110px;
    position: relative;
}

.photo-upload-preview img {
    max-height: 180px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.photo-upload-remove {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}

.photo-upload-remove:hover {
    background: rgba(0,0,0,0.8);
}

/* =============================================
   RESULT PHOTO
   ============================================= */
.result-photo-preview {
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    max-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
}

.result-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 200px;
}

/* =============================================
   SHARE BUTTONS
   ============================================= */
.result-share {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.result-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.result-share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.share-btn svg {
    width: 20px; height: 20px;
}

.share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.share-btn--whatsapp  { background: #25D366; }
.share-btn--telegram  { background: #2AABEE; }
.share-btn--viber     { background: #7360F2; }
.share-btn--twitter   { background: #000; }
.share-btn--facebook  { background: #1877F2; }
.share-btn--linkedin  { background: #0A66C2; }
.share-btn--native    { background: #555; border: none; cursor: pointer; }

.result-manage-wishes {
    margin-top: 1rem;
}
.share-btn--native:hover,
.share-btn--native:focus-visible { background: #333; }

/* Normalize icons that don't fill their viewBox */
.share-btn--facebook svg { transform: scale(1.5); }

.final-cta-button {
    margin-top: 2rem;
}

.example-card--empty {
    padding: 2rem;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* =============================================
   DREAM LISTINGS
   ============================================= */
.dream-page-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.dream-page-header {
    margin-bottom: 3rem;
    text-align: center;
}

.dream-page-title {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.dream-page-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.dreams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.dream-card {
    background: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
}

.dream-card-header {
    margin-bottom: 1rem;
}

.dream-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.dream-card-title a {
    color: inherit;
    text-decoration: none;
}

.dream-card-title a:hover {
    color: var(--color-primary);
}

.dream-card-meta {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.dream-card-meta--wrap {
    flex-wrap: wrap;
}

.dream-card-author-link {
    color: inherit;
    text-decoration: none;
}

.dream-card-author-link:hover {
    color: var(--color-primary);
}

.dream-card-tag {
    text-transform: capitalize;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

.dream-card-tag--full {
    width: 100%;
    text-align: right;
}

.dream-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.dream-card-footer {
    margin-top: 1.5rem;
    border-top: 1px solid #eaeaea;
    padding-top: 1rem;
}

.dream-card-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.dream-card-link:hover {
    color: var(--color-primary-hover);
}

.dream-pagination {
    margin-top: 3rem;
    text-align: center;
}

.dream-empty {
    text-align: center;
    padding: 3rem;
    background: #f9f9f9;
    border-radius: 12px;
}

.dream-empty-action {
    margin-top: 1rem;
    display: inline-block;
}

/* =============================================
   WISH GRID + WISH CARD (archive / explore)
   ============================================= */
.wish-archive-filters {
    margin-bottom: 2rem;
}

.wish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .wish-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .wish-grid { grid-template-columns: 1fr; }
}

.wish-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wish-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.wish-card-thumb-link {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

.wish-card-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.wish-card:hover .wish-card-thumb {
    transform: scale(1.04);
}

.wish-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wish-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.25rem 0 0;
    line-height: 1.3;
}

.wish-card-title a {
    color: inherit;
    text-decoration: none;
}

.wish-card-title a:hover {
    color: var(--color-primary);
}

.wish-card-quote {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
    /* Hard cap height to exactly 3 lines so a 4th half-line can't peek
       through. flex: 1 used to stretch the box past the line-clamped text;
       flex: 0 1 auto keeps the box only as tall as its visible content. */
    flex: 0 1 auto;
    max-height: calc(1.6em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wish-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    gap: 0.5rem;
}

.wish-card-tone {
    font-size: 0.78rem;
    color: #aaa;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wish-card-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.wish-card-link:hover {
    color: var(--color-primary-hover);
}

/* Hidden card when filter active */
.wish-card[hidden] {
    display: none;
}

/* =============================================
   PRIVACY PAGE
   ============================================= */
.privacy-page-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.privacy-page-container {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-page-title {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--color-primary);
}

.privacy-page-intro {
    margin-bottom: 2rem;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.privacy-content {
    color: var(--color-text-dark);
    line-height: 1.8;
    font-size: 1.1rem;
}

.privacy-section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.privacy-list {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
    list-style: disc;
}

.privacy-list li+li {
    margin-top: 0.3rem;
}

.privacy-updated {
    margin-top: 2.5rem;
    font-size: 0.95rem;
    color: #666;
}

/* =============================================
   MY DREAMS PAGE
   ============================================= */
.my-dreams-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.my-dreams-header {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.my-dreams-title {
    margin: 0;
    font-size: 2.5rem;
    color: var(--color-primary);
}

.my-dreams-subtitle {
    margin-top: 0.35rem;
    font-size: 1.05rem;
    color: var(--color-text-muted);
}

.my-dreams-history-title {
    margin-bottom: 1rem;
}

.my-dreams-filters {
    margin-bottom: 1.5rem;
}

.my-dreams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.my-dream-card {
    background: var(--color-bg-white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
}

.my-dream-card-header {
    margin-bottom: 1rem;
}

.my-dream-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.my-dream-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.my-dream-card-title a {
    color: inherit;
    text-decoration: none;
}

.my-dream-card-title a:hover {
    color: var(--color-primary);
}

.my-dream-card-status {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.my-dream-card-status--public {
    background: #eaf7ee;
    color: #217a3b;
}

.my-dream-card-status--private {
    background: #f2f2f2;
    color: #555;
}

.my-dream-card-meta {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.my-dream-card-occasion {
    text-transform: capitalize;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

.my-dream-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.my-dream-card-excerpt p {
    margin: 0;
}

.my-dream-card-footer {
    margin-top: 1.5rem;
    border-top: 1px solid #eaeaea;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-start;
}

.my-dream-card-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.my-dream-card-link:hover {
    color: var(--color-primary-hover);
}

.my-dreams-no-filter-results {
    display: none;
    margin-top: 1.5rem;
}

.my-dreams-empty {
    text-align: center;
    padding: 3rem;
    background: #f9f9f9;
    border-radius: 12px;
}

@media (max-width: 768px) {

    .dream-page-title,
    .privacy-page-title,
    .my-dreams-title {
        font-size: 2rem;
    }

    .dreams-grid,
    .my-dreams-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* =============================================
   SINGLE WISH (single-dream.php)
   ============================================= */
.single-wish-main {
    min-height: 60vh;
}

.single-wish-hero {
    background: var(--color-bg-white);
    margin-bottom: 50px;
}

.single-wish-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.badge--secondary {
    background: rgba(96, 80, 176, 0.12);
    color: var(--color-primary);
}

.single-wish-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: var(--color-text-dark);
    text-align: center;
}

/* Featured photo */
.single-wish-figure {
    margin: 0 auto 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 640px;
    display: flex;
    justify-content: center;
}

.single-wish-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Wish text — styled like a handwritten quote card */
.single-wish-body {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1.5rem 2rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-dark);
    white-space: pre-line;
    margin-bottom: 2rem;
    text-align: center;
}

[dir="rtl"] .single-wish-body {
    border-left: none;
    border-right: 4px solid var(--color-primary);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Share row on the wish page */
.single-wish-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    
}

.single-wish-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.single-wish-share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* "More wishes" wrapper */
.single-wish-more .examples-section {
    padding-top: 0;
}

@media (max-width: 640px) {
    .single-wish-body {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }
}


.result-manage-btn {
        width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.9rem;
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    color: #fff !important;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-primary);
    box-shadow: 0 12px 24px -6px rgba(96, 80, 176, 0.35);
    transition: all 0.25s ease;
}

.result-manage-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -6px rgba(96, 80, 176, 0.45);
}
/* =============================================
   VISIBILITY TOGGLE (Public / Private)
   ============================================= */
.visibility-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(96, 80, 176, 0.08);
    border-radius: 100px;
    padding: 3px;
    gap: 2px;
}

.visibility-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border: none;
    border-radius: 100px;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-primary, sans-serif);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    color: #6a6090; /* AA-pass on white (5.27:1) */
    white-space: nowrap;
    user-select: none;
    transition:
        background  0.22s cubic-bezier(0.4, 0, 0.2, 1),
        color       0.22s ease,
        box-shadow  0.22s ease,
        transform   0.12s ease;
}

.visibility-btn svg {
    flex-shrink: 0;
    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visibility-btn:hover {
    color: #7c6fb0;
}
.visibility-btn:hover svg {
    opacity: 0.75;
}

.visibility-btn:active {
    transform: scale(0.93);
}

/* ── Active: Private ── slate pill */
.visibility-btn--private.is-active {
    background: #5a677a;
    color: #fff;
    box-shadow: 0 2px 10px rgba(90, 103, 122, 0.4);
}
.visibility-btn--private.is-active svg {
    opacity: 1;
    transform: rotate(-5deg) scale(1.1);
}

/* ── Active: Public ── purple gradient pill */
.visibility-btn--public.is-active {
    background: linear-gradient(135deg, #6050b0 0%, #9179ee 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(96, 80, 176, 0.45);
}
.visibility-btn--public.is-active svg {
    opacity: 1;
    transform: rotate(8deg) scale(1.1);
}

/* Loading pulse */
.visibility-btn.is-loading {
    pointer-events: none;
    animation: vbtn-pulse 0.65s ease-in-out infinite alternate;
}

@keyframes vbtn-pulse {
    from { opacity: 0.7; }
    to   { opacity: 0.35; }
}

/* Position in card footer */
.my-dream-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Single page toggle */
.single-wish-visibility {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 1.5rem;
}

/* =============================================
   LOAD MORE
   ============================================= */
.examples-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.load-more-btn {
    min-width: 180px;
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* =============================================
   TERMS OF USE PAGE
   ============================================= */
.terms-page {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%);
    padding: 4rem 1.5rem 6rem;
}

.terms-page-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.terms-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.terms-hero-title {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.terms-hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

.terms-hero-updated {
    display: inline-block;
    margin-inline-start: 0.5rem;
    font-size: 0.95rem;
    color: #8a8d88;
}

.terms-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.terms-sidebar {
    position: sticky;
    top: 6rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.terms-sidebar-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.terms-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.terms-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.terms-sidebar-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.terms-sidebar-link.is-active {
    background: var(--color-primary);
    color: #fff;
}

.terms-sidebar-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.terms-sidebar-icon svg {
    width: 100%;
    height: 100%;
}

.terms-sidebar-text {
    flex: 1;
    min-width: 0;
}

.terms-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.terms-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 6rem;
}

.terms-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.terms-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.terms-card-icon svg {
    width: 22px;
    height: 22px;
}

.terms-card-icon--lavender {
    background: #ece7ff;
    color: #6e57d6;
}

.terms-card-icon--peach {
    background: #ffe2d4;
    color: #d96a3d;
}

.terms-card-title {
    font-size: 1.5rem;
    color: var(--color-text-dark);
    font-weight: 600;
    margin: 0;
}

.terms-card-body {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: 1rem;
}

.terms-card-body p + p,
.terms-card-body p + ul,
.terms-card-body p + .terms-subgrid,
.terms-card-body .terms-quote + p {
    margin-top: 1rem;
}

.terms-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.terms-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.terms-checklist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    flex-shrink: 0;
    margin-top: 2px;
}

.terms-checklist-icon svg {
    width: 14px;
    height: 14px;
}

.terms-subgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.terms-subcard {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.terms-subcard-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 0.5rem;
}

.terms-subcard p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.terms-quote {
    background: var(--color-bg-white);
    border-inline-start: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    font-style: italic;
    color: var(--color-text-dark);
    margin: 0;
}

[dir="rtl"] .terms-quote {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.terms-banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 2rem;
    color: #fff;
    isolation: isolate;
}

.terms-banner-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 200, 130, 0.55) 0%, transparent 55%),
        linear-gradient(135deg, #6050b0 0%, #8a6fd8 60%, #d9a06b 100%);
}

.terms-banner-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: space-between;
}

.terms-banner-text {
    flex: 1;
    min-width: 0;
}

.terms-banner-eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.terms-banner-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.terms-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.terms-banner-icon svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 900px) {
    .terms-page {
        padding: 2.5rem 1rem 4rem;
    }

    .terms-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .terms-sidebar {
        position: static;
        padding: 1rem;
    }

    .terms-sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .terms-sidebar-link {
        flex: 1 1 calc(50% - 0.25rem);
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .terms-card {
        padding: 1.5rem;
    }

    .terms-card-title {
        font-size: 1.25rem;
    }

    .terms-subgrid {
        grid-template-columns: 1fr;
    }

    .terms-banner {
        padding: 1.5rem;
    }

    .terms-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .terms-banner-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .terms-sidebar-link {
        flex: 1 1 100%;
    }
}


.page-template-page-terms-of-use,
.page-template-page-terms-of-service,
.page-template-page-privacy-policy {
    overflow: visible;
}

/* body override for the privacy-policy template, per design spec —
   the sticky sidebar needs a visible overflow context on <body>. */
body.page-template-page-privacy-policy {
    overflow: visible;
}

/* =====================================================================
   Share row (.dg-share-row) — reusable component.
   Rendered by template-parts/wish/share-row.php. Used on:
     - Homepage generator (right column, after /generate)
     - Single-wish owner view (URL pre-filled from PHP)
   Markup: label > input + Copy button > 5 social-network buttons.
   ================================================================== */
.dg-share-row {
    margin-top: 0.8rem;
    text-align: left;
}
.dg-share-row-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted, #5e5f5c);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.dg-share-row-input-wrap {
    display: flex;
    gap: 0.4rem;
}
.dg-share-row-input {
    flex: 1;
    font: inherit;
    font-size: 0.88rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(178, 178, 174, 0.4);
    border-radius: 10px;
    background: #fff;
    color: var(--color-text-dark, #313330);
    min-width: 0; /* allow shrink inside flex */
}
.dg-share-row-input:focus {
    outline: none;
    border-color: var(--color-primary, #6050b0);
}
.dg-share-row-copy {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-primary, #6050b0);
    background: #fff;
    color: var(--color-primary, #6050b0);
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex: 0 0 auto;
}
.dg-share-row-copy:hover {
    background: var(--color-primary, #6050b0);
    color: #fff;
}
.dg-share-row-copy.is-copied {
    background: var(--color-primary, #6050b0);
    color: #fff;
}
.dg-share-row-social {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.dg-share-row-social .share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,0.2);
}
.dg-share-row-social .share-btn[hidden] { display: none; }
.dg-share-row-social .share-btn:hover { transform: translateY(-2px) scale(1.05); }
.dg-share-row-social .share-btn svg { width: 22px; height: 22px; }
.dg-share-row-social .share-btn--whatsapp { background: #25D366; }
.dg-share-row-social .share-btn--telegram { background: #2AABEE; }
.dg-share-row-social .share-btn--viber    { background: #7360F2; }
.dg-share-row-social .share-btn--twitter,
.dg-share-row-social .share-btn--x        { background: #000; }
.dg-share-row-social .share-btn--native   { background: var(--color-text-dark, #313330); }

/* =============================================
   MOBILE BOTTOM-SHEET MENU (Phase 6.9 rewrite — pixel-faithful to
   `C:\Users\Andrii\Downloads\C _ Spotlight bottom sheet*.html`)
   Replaces the older `.mobile-nav-overlay` and the cabinet sidebar drawer
   on viewports <= 980px. Always present in DOM; JS toggles data-state.
   ============================================= */

.dg-mobile-sheet__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.5);
    opacity: 0;
    z-index: 1290;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dg-mobile-sheet__backdrop[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
}

.dg-mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 92vh;
    /* Phase 6.9 A6 — sheet body is light grey (matches the design refs)
       so the white card surfaces inside pop visually. */
    background: var(--color-bg-light, #f5f3f0);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 48px -8px rgba(15, 10, 30, 0.28);
    z-index: 1300;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dg-mobile-sheet[data-state="open"] {
    transform: translateY(0);
}

/* Drag-handle indicator at the very top */
.dg-mobile-sheet__handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #e2e0db;
    margin: 0.55rem auto 0;
    flex-shrink: 0;
}

.dg-mobile-sheet__close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--color-text-muted, #7a7a82);
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dg-mobile-sheet__close:hover,
.dg-mobile-sheet__close:focus-visible {
    background: var(--color-bg-light, #f5f3f0);
    color: var(--color-text-dark, #313330);
    outline: none;
}

.dg-mobile-sheet__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.1rem 1.15rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

/* Identity row (auth) ─────────────────────────────────────────────────── */
/* Phase 6.9 A6 — wrap the identity row in a white card surface so it
   visually anchors the top of the sheet (sheet body is light grey now). */
.dg-mobile-sheet__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ece9e2;
    box-shadow: 0 4px 16px -10px rgba(15, 10, 30, 0.18);
}
.dg-mobile-sheet__identity .dg-mobile-sheet__logout {
    margin-left: auto;
}
.dg-mobile-sheet__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}
.dg-mobile-sheet__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dg-mobile-sheet__avatar-initial {
    color: #fff;
    text-transform: uppercase;
}
.dg-mobile-sheet__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}
.dg-mobile-sheet__identity-name {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text-dark, #313330);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dg-mobile-sheet__identity-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--color-text-muted, #7a7a82);
    flex-wrap: wrap;
}
.dg-mobile-sheet__plan-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: rgba(96, 80, 176, 0.1);
    color: var(--color-primary, #6050b0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dg-mobile-sheet__plan-pill.is-premium {
    background: linear-gradient(135deg, #f7c14c 0%, #ffae42 100%);
    color: #fff;
}
.dg-mobile-sheet__logout {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-light, #f5f3f0);
    color: var(--color-text-muted, #7a7a82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.dg-mobile-sheet__logout:hover,
.dg-mobile-sheet__logout:focus-visible {
    background: rgba(229, 80, 100, 0.12);
    color: #c0392b;
    outline: none;
}

/* Guest header — centered logo + small subtitle ─────────────────────── */
.dg-mobile-sheet__guest-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0.5rem 2.75rem 0.25rem;
}
.dg-mobile-sheet__guest-logo img {
    display: block;
    max-width: 160px;
    height: auto;
}
.dg-mobile-sheet__guest-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #7a7a82);
}

/* Primary CTA ─────────────────────────────────────────────────────────── */
/* Phase 6.9 A6 — CTA is a true pill (radius-pill, ~100px) to match the
   design refs (Spotlight bottom-sheet auth + guest). */
.dg-mobile-sheet__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-pill, 100px);
    background: linear-gradient(135deg, #6050b0 0%, #8a72d1 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    box-shadow: 0 8px 18px -8px rgba(96, 80, 176, 0.55);
    transition: transform 0.15s, box-shadow 0.2s;
}
.dg-mobile-sheet__cta:hover,
.dg-mobile-sheet__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(96, 80, 176, 0.6);
    outline: none;
    color: #fff;
}
.dg-mobile-sheet__cta .dg-mobile-sheet__icon { color: #fff; }

/* Section labels (uppercase muted) ───────────────────────────────────── */
.dg-mobile-sheet__section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted, #7a7a82);
    padding: 0.15rem 0.15rem 0;
    margin-top: 0.25rem;
}

/* MY ACCOUNT grid (auth) — 2-col tiles ──────────────────────────────── */
/* Phase 6.9 A6 — tiles are white cards on the grey body; the icon sits
   on a lavender-tinted 36×36 plate to match the design tokens. */
.dg-mobile-sheet__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.dg-mobile-sheet__tile {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ece9e2;
    color: var(--color-text-dark, #313330);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.dg-mobile-sheet__tile:hover,
.dg-mobile-sheet__tile:focus-visible {
    border-color: rgba(96, 80, 176, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px rgba(96, 80, 176, 0.35);
    outline: none;
}
.dg-mobile-sheet__tile .dg-mobile-sheet__icon {
    color: var(--color-primary, #6050b0);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(96, 80, 176, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
}

/* Plan + Invite duo (auth) ──────────────────────────────────────────── */
.dg-mobile-sheet__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.dg-mobile-sheet__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.95rem 0.9rem;
    border-radius: 16px;
    background: var(--color-bg-light, #f8f6f1);
    border: 1px solid #ece9e2;
    min-width: 0;
}
.dg-mobile-sheet__card--plan {
    background: linear-gradient(135deg, rgba(96, 80, 176, 0.08) 0%, rgba(196, 184, 255, 0.16) 100%);
    border-color: rgba(96, 80, 176, 0.18);
}
.dg-mobile-sheet__card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dg-mobile-sheet__card-row--top .dg-mobile-sheet__icon {
    color: var(--color-primary, #6050b0);
}
.dg-mobile-sheet__card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-dark, #313330);
    line-height: 1.2;
}
.dg-mobile-sheet__card-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted, #7a7a82);
    margin-bottom: 0.1rem;
}
.dg-mobile-sheet__plan-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(96, 80, 176, 0.18);
    overflow: hidden;
}
.dg-mobile-sheet__plan-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
    border-radius: inherit;
    transition: width 0.3s ease;
}
.dg-mobile-sheet__plan-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a7a82);
    margin: 0;
}
.dg-mobile-sheet__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dg-mobile-sheet__card-cta--dark {
    background: linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
    background-size: 200% 100%;
    animation: btn-premium-shift 4s ease-in-out infinite;
    color: #fff;
}
.dg-mobile-sheet__card-cta--dark:hover,
.dg-mobile-sheet__card-cta--dark:focus-visible {
    box-shadow: 0 8px 20px -8px rgba(200, 149, 72, 0.6);
    color: #fff;
    outline: none;
}
.dg-mobile-sheet__card-cta--ghost {
    background: #fff;
    color: var(--color-text-dark, #313330);
    border-color: #ece9e2;
}
.dg-mobile-sheet__card-cta--ghost:hover,
.dg-mobile-sheet__card-cta--ghost:focus-visible {
    border-color: rgba(96, 80, 176, 0.35);
    background: #f8f6f1;
    outline: none;
}
.dg-mobile-sheet__card-cta .dg-mobile-sheet__icon {
    color: currentColor;
}

/* EXPLORE list rows (shared by auth + guest) ────────────────────────── */
/* Phase 6.9 A3 — overflow:hidden caused the parent scroll container's
   touch-event handling to interfere with rows clipped past the visible
   area (no rows could scroll into view via touch on iOS). overflow:visible
   restores natural scroll inheritance. Rounded corners survive via the
   first/last child border-radius pattern below. */
.dg-mobile-sheet__list {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: visible;
    border: 1px solid #ece9e2;
    background: #fff;
}
.dg-mobile-sheet__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: var(--color-text-dark, #313330);
    font-size: 0.93rem;
    font-weight: 500;
    border-bottom: 1px solid #f1efe9;
    transition: background-color 0.15s;
}
.dg-mobile-sheet__row:first-child { border-radius: 14px 14px 0 0; }
.dg-mobile-sheet__row:last-child { border-bottom: none; border-radius: 0 0 14px 14px; }
.dg-mobile-sheet__row:only-child { border-radius: 14px; }
.dg-mobile-sheet__row:hover,
.dg-mobile-sheet__row:focus-visible {
    background: var(--color-bg-light, #f8f6f1);
    outline: none;
}
.dg-mobile-sheet__row-lead {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.dg-mobile-sheet__row-lead .dg-mobile-sheet__icon {
    color: var(--color-primary, #6050b0);
    flex-shrink: 0;
    /* Phase 6.9 A6 — lavender icon plate, matches the tiles */
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(96, 80, 176, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
}
.dg-mobile-sheet__row > .dg-mobile-sheet__icon {
    color: var(--color-text-muted, #7a7a82);
    flex-shrink: 0;
}

/* Guest Log-in button (single, full width) ──────────────────────────── */
.dg-mobile-sheet__login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ddd9d0;
    color: var(--color-text-dark, #313330);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.dg-mobile-sheet__login-btn:hover,
.dg-mobile-sheet__login-btn:focus-visible {
    background: var(--color-bg-light, #f8f6f1);
    border-color: rgba(96, 80, 176, 0.35);
    outline: none;
    color: var(--color-text-dark, #313330);
}

/* Footer (sticky) — language dropdown only ──────────────────────────── */
/* Phase 6.9 A5 — `.dg-mobile-sheet__version` removed entirely. */
.dg-mobile-sheet__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem 0.9rem;
    border-top: 1px solid #ece9e2;
    background: #fff;
    position: relative; /* anchor for the lang popup */
}

/* Language picker — opens UPWARD on click ──────────────────────────── */
.dg-mobile-sheet__lang {
    position: relative;
}
.dg-mobile-sheet__lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    background: var(--color-bg-light, #f5f3f0);
    border: 1px solid #ece9e2;
    color: var(--color-text-dark, #313330);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}
.dg-mobile-sheet__lang-toggle:hover,
.dg-mobile-sheet__lang-toggle:focus-visible,
.dg-mobile-sheet__lang-toggle[aria-expanded="true"] {
    background: #fff;
    border-color: rgba(96, 80, 176, 0.35);
    outline: none;
}
.dg-mobile-sheet__lang-toggle .dg-mobile-sheet__icon {
    color: var(--color-text-muted, #7a7a82);
}
.dg-mobile-sheet__lang-toggle[aria-expanded="true"] svg:last-child {
    transform: rotate(180deg);
}
.dg-mobile-sheet__lang-current { letter-spacing: 0.4px; }

.dg-mobile-sheet__lang-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ece9e2;
    box-shadow: 0 12px 28px -8px rgba(15, 10, 30, 0.2);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.dg-mobile-sheet__lang-menu[hidden] { display: none; }
.dg-mobile-sheet__lang-menu li { margin: 0; }
/* Phase 6.9 A8 — option row is name LEFT, code RIGHT. Justify-space-between
   on the flex row pushes the two spans to opposite ends. */
.dg-mobile-sheet__lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--color-text-dark, #313330);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s;
}
.dg-mobile-sheet__lang-option:hover {
    background: var(--color-bg-light, #f8f6f1);
}
.dg-mobile-sheet__lang-option.is-current {
    background: rgba(96, 80, 176, 0.1);
    color: var(--color-primary, #6050b0);
    font-weight: 600;
}
.dg-mobile-sheet__lang-name {
    flex: 1 1 auto;
    color: inherit;
    text-align: left;
}
.dg-mobile-sheet__lang-code {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--color-text-muted, #9a98a0);
    padding: 0.12rem 0.4rem;
    background: rgba(96, 80, 176, 0.06);
    border-radius: 999px;
}
.dg-mobile-sheet__lang-option.is-current .dg-mobile-sheet__lang-code {
    background: rgba(96, 80, 176, 0.2);
    color: var(--color-primary, #6050b0);
}

/* RTL — flip the EXPLORE-row trailing arrows */
[dir="rtl"] .dg-mobile-sheet__row > .dg-mobile-sheet__icon {
    transform: scaleX(-1);
}
[dir="rtl"] .dg-mobile-sheet__lang-menu {
    left: auto;
    right: 0;
}

/* Hide on desktop ─────────────────────────────────────────────────────── */
@media (min-width: 981px) {
    .dg-mobile-sheet,
    .dg-mobile-sheet__backdrop {
        display: none !important;
    }
}
/* ============================================================
   Perf: below-the-fold homepage sections render lazily.
   content-visibility:auto lets the browser skip layout/paint for
   off-screen sections during the initial render (the initial Layout
   task measured ~200ms real / ~830ms of throttled-mobile TBT on prod).
   contain-intrinsic-size reserves an estimated height so the scrollbar
   doesn't jump; `auto` keeps the real size once a section has rendered.
   Anchor navigation (#faq, #examples, …) still works — browsers render
   a section when it's scrolled to or targeted.
   ============================================================ */
.use-cases-section,
.how-it-works-section,
.examples-section,
.benefits-section,
.testimonials-section,
.seo-content-section,
.blog-preview-section,
.faq-section,
.final-cta-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}