/*
 * SnapBingoX multilingual brand foundation
 *
 * Font policy: locally hosted, unicode-ranged variable faces for the primary
 * scripts, followed by script-aware system fallbacks. Each locale downloads
 * only its needed subset and remains legible if a font asset is unavailable.
 */

:root {
    color-scheme: light;

    /* Script-aware type stacks */
    --sbx-font-latin: "SBX Manrope", "Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --sbx-font-latin-display: "SBX Manrope", "Avenir Next", Avenir, "Trebuchet MS", "Segoe UI Variable Display", "Segoe UI", ui-rounded, system-ui, sans-serif;
    --sbx-font-cyrillic: "SBX Manrope", "Avenir Next Cyr", "Segoe UI Variable", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --sbx-font-cyrillic-display: "SBX Manrope", "Avenir Next Cyr", "Segoe UI Variable Display", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --sbx-font-vietnamese: "SBX Manrope", "Be Vietnam Pro", "Avenir Next", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --sbx-font-vietnamese-display: "SBX Manrope", "Be Vietnam Pro", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    --sbx-font-hebrew: "SBX Rubik", "Arial Hebrew", Rubik, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
    --sbx-font-hebrew-display: "SBX Rubik", Rubik, "Arial Hebrew", Heebo, "Noto Sans Hebrew", Arial, sans-serif;
    --sbx-font-arabic: "SBX Noto Arabic", "Geeza Pro", "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    --sbx-font-arabic-display: "SBX Noto Arabic", "Noto Kufi Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    --sbx-font-devanagari: "SBX Noto Devanagari", "Kohinoor Devanagari", "Noto Sans Devanagari", Mangal, "Nirmala UI", sans-serif;
    --sbx-font-devanagari-display: "SBX Noto Devanagari", "Kohinoor Devanagari", "Noto Sans Devanagari", Mangal, "Nirmala UI", sans-serif;
    --sbx-font-thai: "SBX Noto Thai", Thonburi, "Noto Sans Thai", Tahoma, "Leelawadee UI", sans-serif;
    --sbx-font-thai-display: "SBX Noto Thai", Thonburi, "Noto Sans Thai", Tahoma, "Leelawadee UI", sans-serif;
    --sbx-font-japanese: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
    --sbx-font-japanese-display: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
    --sbx-font-greek: "SBX Noto Greek", "SBX Manrope", "Segoe UI Variable", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --sbx-font-greek-display: "SBX Noto Greek", "SBX Manrope", "Segoe UI Variable Display", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --sbx-font-korean: "SBX Noto KR", "SBX Manrope", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --sbx-font-korean-display: "SBX Noto KR", "SBX Manrope", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --sbx-font-chinese-traditional: "SBX Noto TC", "SBX Manrope", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    --sbx-font-chinese-traditional-display: "SBX Noto TC", "SBX Manrope", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    --sbx-font-body: var(--sbx-font-latin);
    --sbx-font-display: var(--sbx-font-latin-display);

    /* Expressive, accessible brand palette */
    --sbx-ink-strong: #181433;
    --sbx-ink: #292448;
    --sbx-ink-muted: #625d7b;
    --sbx-surface: #ffffff;
    --sbx-surface-soft: #f7f6ff;
    --sbx-surface-tint: #eeeaff;
    --sbx-line: #ded9f2;
    --sbx-brand: #5846e8;
    --sbx-brand-deep: #3929b8;
    --sbx-brand-bright: #856dff;
    --sbx-coral: #ff5c91;
    --sbx-gold: #ffbd3e;
    --sbx-mint: #20b889;
    --sbx-focus: #f59e0b;
    --sbx-on-brand: #ffffff;

    /* Shape, depth, rhythm */
    --sbx-radius-sm: .75rem;
    --sbx-radius-md: 1.125rem;
    --sbx-radius-lg: 1.75rem;
    --sbx-radius-pill: 999px;
    --sbx-shadow-sm: 0 .5rem 1.5rem rgba(43, 33, 104, .08);
    --sbx-shadow-md: 0 1.25rem 3.5rem rgba(43, 33, 104, .14);
    --sbx-shadow-glow: 0 1.25rem 4rem rgba(88, 70, 232, .24);
    --sbx-ease-out: cubic-bezier(.22, 1, .36, 1);
    --sbx-duration-fast: 160ms;
    --sbx-duration: 420ms;

    /* Compatibility aliases for the existing growth-page vocabulary */
    --ink: var(--sbx-ink-strong);
    --muted: var(--sbx-ink-muted);
    --line: var(--sbx-line);
    --soft: var(--sbx-surface-soft);
    --white: var(--sbx-surface);
    --brand: var(--sbx-brand);
    --brand-dark: var(--sbx-brand-deep);
    --brand-soft: var(--sbx-surface-tint);
    --accent: var(--sbx-coral);
    --shadow: var(--sbx-shadow-md);
    --radius: var(--sbx-radius-md);
}

html:lang(ru),
html:lang(uk),
html:lang(bg) {
    --sbx-font-body: var(--sbx-font-cyrillic);
    --sbx-font-display: var(--sbx-font-cyrillic-display);
}

html:lang(vi) {
    --sbx-font-body: var(--sbx-font-vietnamese);
    --sbx-font-display: var(--sbx-font-vietnamese-display);
}

html:lang(he),
html:lang(yi) {
    --sbx-font-body: var(--sbx-font-hebrew);
    --sbx-font-display: var(--sbx-font-hebrew-display);
}

html:lang(ar),
html:lang(fa),
html:lang(ur) {
    --sbx-font-body: var(--sbx-font-arabic);
    --sbx-font-display: var(--sbx-font-arabic-display);
}

html:lang(hi),
html:lang(mr),
html:lang(ne) {
    --sbx-font-body: var(--sbx-font-devanagari);
    --sbx-font-display: var(--sbx-font-devanagari-display);
}

html:lang(th) {
    --sbx-font-body: var(--sbx-font-thai);
    --sbx-font-display: var(--sbx-font-thai-display);
}

html:lang(ja) {
    --sbx-font-body: var(--sbx-font-japanese);
    --sbx-font-display: var(--sbx-font-japanese-display);
}

html:lang(el) {
    --sbx-font-body: var(--sbx-font-greek);
    --sbx-font-display: var(--sbx-font-greek-display);
}

html:lang(ko) {
    --sbx-font-body: var(--sbx-font-korean);
    --sbx-font-display: var(--sbx-font-korean-display);
}

html:lang(zh-Hant),
html:lang(zh-TW),
html:lang(zh-HK),
html:lang(zh-MO) {
    --sbx-font-body: var(--sbx-font-chinese-traditional);
    --sbx-font-display: var(--sbx-font-chinese-traditional-display);
}

html {
    font-family: var(--sbx-font-body);
    scroll-padding-block-start: 5.5rem;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--sbx-font-body);
}

body {
    color: var(--sbx-ink);
    background: var(--sbx-surface);
    font-kerning: normal;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, .brand, .sbx-display) {
    font-family: var(--sbx-font-display);
    font-variation-settings: "wght" 760;
}

:where(h1, h2, h3) {
    color: var(--sbx-ink-strong);
    letter-spacing: -.035em;
    text-wrap: balance;
}

:where(p, li, figcaption) {
    text-wrap: pretty;
}

:where(img, video, svg) {
    block-size: auto;
    max-inline-size: 100%;
}

/* Preserve connected letterforms and native casing in non-Latin scripts. */
:where(html:lang(he), html:lang(ar), html:lang(hi), html:lang(th), html:lang(ja), html:lang(el), html:lang(ko), html:lang(zh-Hant), html:lang(zh-TW), html:lang(zh-HK), html:lang(zh-MO)) :where(h1, h2, h3, .eyebrow, .sbx-kicker) {
    letter-spacing: normal;
    text-transform: none;
}

:where(html:lang(ar), html:lang(he)) :where(body, button, input, select, textarea) {
    line-height: 1.72;
}

/* Logical-direction repairs for existing shared classes. */
.main-nav {
    margin-inline-start: auto;
    margin-left: 0;
}

.section-heading.left {
    margin-inline-start: 0;
    text-align: start;
}

.breadcrumbs li + li::before {
    margin-inline-end: .45rem;
    margin-right: 0;
}

.check-list li {
    padding-inline-start: 1.65rem;
    padding-left: 0;
}

.check-list li::before {
    inset-inline-start: 0;
    left: auto;
}

.localized-home-copy {
    margin-inline-end: auto;
}

html[dir="rtl"] :where(.nav-wrap, .main-nav, .button-row, .hero-points, .quick-draw, .pattern-card) {
    direction: rtl;
}

html[dir="rtl"] :where(.section-heading, .prose, .card, .hero-copy, .localized-home-copy) {
    text-align: start;
}

html[dir="rtl"] .breadcrumbs li + li::before {
    content: "\\";
}

/* High-clarity keyboard treatment that remains visible on bright gradients. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    border-radius: max(.25rem, var(--sbx-focus-radius, .5rem));
    outline: 3px solid var(--sbx-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--sbx-surface);
}

:where(input, select, textarea):focus-visible {
    border-color: var(--sbx-brand);
}

:where(button, [role="button"]):disabled,
:where(button, [role="button"])[aria-disabled="true"] {
    cursor: not-allowed;
    filter: saturate(.45);
    opacity: .58;
}

/* Brand primitives: composable across landing, templates, and app pages. */
.sbx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-block: 0 .9rem;
    color: var(--sbx-brand-deep);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .095em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sbx-kicker::before {
    display: inline-block;
    inline-size: .6rem;
    block-size: .6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sbx-gold), var(--sbx-coral));
    box-shadow: 0 0 0 .3rem rgba(255, 189, 62, .16);
    content: "";
}

.sbx-chip {
    display: inline-flex;
    min-block-size: 2rem;
    align-items: center;
    gap: .4rem;
    border: 1px solid color-mix(in srgb, var(--sbx-brand) 22%, transparent);
    border-radius: var(--sbx-radius-pill);
    padding-block: .28rem;
    padding-inline: .72rem;
    color: var(--sbx-brand-deep);
    background: color-mix(in srgb, var(--sbx-surface) 88%, var(--sbx-surface-tint));
    font-size: .82rem;
    font-weight: 780;
    line-height: 1.25;
}

.sbx-panel,
.sbx-glass {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--sbx-line) 78%, transparent);
    border-radius: var(--sbx-radius-lg);
    padding-block: clamp(1.1rem, 2.5vw, 1.8rem);
    padding-inline: clamp(1.1rem, 2.5vw, 1.8rem);
    background: color-mix(in srgb, var(--sbx-surface) 94%, transparent);
    box-shadow: var(--sbx-shadow-md);
}

.sbx-glass {
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
    backdrop-filter: blur(18px) saturate(1.16);
}

.sbx-visual-frame {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-block-size: clamp(20rem, 46vw, 38rem);
    border: 1px solid color-mix(in srgb, var(--sbx-brand-bright) 25%, transparent);
    border-radius: clamp(1.4rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 189, 62, .26), transparent 30%),
        radial-gradient(circle at 85% 24%, rgba(255, 92, 145, .22), transparent 32%),
        linear-gradient(145deg, #f8f5ff, #ebe7ff 48%, #fdf5fb);
    box-shadow: var(--sbx-shadow-glow);
}

.sbx-visual-frame::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: inherit;
    pointer-events: none;
    content: "";
}

.sbx-visual-frame > :where(img, video, picture) {
    inline-size: 100%;
    block-size: 100%;
}

.sbx-visual-frame > :where(img, video),
.sbx-visual-frame > picture > img {
    display: block;
    object-fit: cover;
    object-position: var(--sbx-media-position, 50% 50%);
}

.sbx-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(.8rem, 2vw, 1.25rem);
}

.sbx-bento > * {
    grid-column: span var(--sbx-span, 4);
    min-inline-size: 0;
}

.sbx-orbit {
    position: absolute;
    z-index: 3;
    inset-block-start: var(--sbx-orbit-block, 8%);
    inset-inline-start: var(--sbx-orbit-inline, 8%);
    transform: translate3d(0, 0, 0) rotate(var(--sbx-orbit-rotate, -4deg));
    animation: sbx-float var(--sbx-orbit-speed, 5.5s) var(--sbx-ease-out) infinite alternate;
    will-change: transform;
}

[data-sbx-reveal] {
    opacity: 0;
    transform: translateY(1rem) scale(.985);
    transition:
        opacity var(--sbx-duration) var(--sbx-ease-out),
        transform calc(var(--sbx-duration) + 120ms) var(--sbx-ease-out);
}

[data-sbx-reveal][data-sbx-visible="true"],
.no-js [data-sbx-reveal] {
    opacity: 1;
    transform: none;
}

@keyframes sbx-float {
    from { transform: translate3d(0, 0, 0) rotate(var(--sbx-orbit-rotate, -4deg)); }
    to { transform: translate3d(0, -.8rem, 0) rotate(calc(var(--sbx-orbit-rotate, -4deg) + 2deg)); }
}

@media (hover: hover) and (pointer: fine) {
    :where(.card, .sbx-panel, .sbx-glass, .sbx-visual-frame) {
        transition: transform var(--sbx-duration-fast) var(--sbx-ease-out), box-shadow var(--sbx-duration-fast) ease, border-color var(--sbx-duration-fast) ease;
    }

    :where(.card, .sbx-panel, .sbx-glass)[data-sbx-lift]:hover {
        border-color: color-mix(in srgb, var(--sbx-brand) 28%, var(--sbx-line));
        box-shadow: var(--sbx-shadow-md);
        transform: translateY(-.25rem);
    }
}

@media (max-width: 52rem) {
    .sbx-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbx-bento > * {
        grid-column: 1;
    }

    .sbx-visual-frame {
        min-block-size: clamp(18rem, 110vw, 30rem);
    }
}

/*
 * Data-saving is opt-in through data-save-data (set from navigator.connection)
 * and also honors the emerging reduced-data media query where supported.
 */
html[data-save-data="true"] :where(.sbx-orbit, [data-sbx-reveal]),
html[data-save-data="true"] :where(video[data-sbx-decorative], img[data-sbx-decorative]) {
    animation: none !important;
    transition: none !important;
}

html[data-save-data="true"] video[data-sbx-decorative] {
    display: none;
}

@media (prefers-reduced-data: reduce) {
    :where(.sbx-orbit, [data-sbx-reveal]) {
        animation: none !important;
        transition: none !important;
    }

    video[data-sbx-decorative] {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Shared sticky page header (Tailwind marketing/blog pages).
   The utility row carries no flex-wrap, so a translated nav label plus the
   runtime-injected language picker used to push the whole page 100-190px
   sideways at 360px. Let the row wrap instead of overflowing. This lives here
   because the same markup is emitted by ~670 source and generated pages.
   --------------------------------------------------------------------------- */
/* Long compound headlines (de/nl/no: "Rückerstattungsrichtlinie",
   "Verwerkingsverantwoordelijke") are wider than a 360px viewport and grew the
   document's scroll width. Zero-specificity so page styles still win. */
:where(h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

nav.sticky > div.flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

nav.sticky > div.flex.items-center.justify-between > * {
    min-width: 0;
}

nav.sticky > div.flex.items-center.justify-between > div.flex.items-center {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .5rem;
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-delay: 0s !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0s !important;
        transition-duration: .001ms !important;
    }

    :where(.sbx-orbit, [data-sbx-reveal]) {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

@media (forced-colors: active) {
    :where(.sbx-panel, .sbx-glass, .sbx-chip, .sbx-visual-frame) {
        border: 1px solid CanvasText;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------------------
 * Restore-purchase chip
 *
 * A highlighted SECONDARY action shown in the site nav and as content callouts
 * across the static/marketing pages. The emerald accent is deliberately
 * distinct from the indigo/coral primary Buy / Create CTA so the chip reads as
 * a helpful, subordinate option — a new visitor must never think they need it.
 * Defined ONCE here so every placement (page generator + hand-authored pages,
 * every locale) renders identically. Icon is a self-hosted inline SVG mask
 * (no network request). RTL mirrors automatically via flex direction on the
 * dir="rtl" document; the glyph is a symmetric refresh loop that needs no flip.
 * ------------------------------------------------------------------------- */
.sbx-restore-chip {
    --sbx-restore-accent: #0f9d76;
    --sbx-restore-bg: #ecfdf5;
    --sbx-restore-ink: #0b4a37;
    --sbx-restore-subink: #3f7c67;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .5rem .95rem;
    border: 1.5px solid var(--sbx-restore-accent);
    border-radius: 999px;
    background: var(--sbx-restore-bg);
    color: var(--sbx-restore-ink);
    font-family: var(--sbx-font-body, inherit);
    text-decoration: none;
    line-height: 1.2;
    transition: transform var(--sbx-duration-fast, 160ms) var(--sbx-ease-out, ease),
        box-shadow var(--sbx-duration-fast, 160ms) ease;
}
.sbx-restore-chip:hover,
.sbx-restore-chip:focus-visible {
    color: var(--sbx-restore-ink);
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1.25rem rgba(15, 157, 118, .26);
}
.sbx-restore-chip:focus-visible {
    outline: 3px solid #6ee7b7;
    outline-offset: 2px;
}
.sbx-restore-ic {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--sbx-restore-accent);
    display: inline-flex;
}
.sbx-restore-ic svg { width: 100%; height: 100%; display: block; }
.sbx-restore-text { display: inline-flex; flex-direction: column; gap: .05rem; min-width: 0; }
.sbx-restore-title { font-weight: 800; font-size: .98rem; color: var(--sbx-restore-ink); }
.sbx-restore-sub { font-weight: 600; font-size: .78rem; color: var(--sbx-restore-subink); }

/* Compact nav variant — icon + short label; collapses to icon-only on phones. */
.sbx-restore-chip--nav { padding: .45rem .8rem; min-width: 44px; justify-content: center; }
.sbx-restore-chip--nav .sbx-restore-title { font-size: .9rem; }
/* Keep the nav chip visible on phones (framework hides other nav links). */
.main-nav a.sbx-restore-chip { display: inline-flex !important; }

/* Content callout wrapper — a light card that hosts the chip plus a short lead. */
.sbx-restore-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.1rem;
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border: 1.5px solid #a7e8d1;
    border-radius: var(--sbx-radius-md, 1rem);
    background: linear-gradient(180deg, #f2fdf9, #eafaf3);
}
.sbx-restore-card__copy { min-width: 0; }
.sbx-restore-card__lead { margin: 0; font-weight: 800; color: #0b4a37; font-size: 1rem; }
.sbx-restore-card__hint { margin: .15rem 0 0; font-weight: 500; color: #3f7c67; font-size: .88rem; }

@media (max-width: 720px) {
    .sbx-restore-chip--nav .sbx-restore-title { display: none; }
    .sbx-restore-card { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .sbx-restore-chip { transition: none; }
    .sbx-restore-chip:hover,
    .sbx-restore-chip:focus-visible { transform: none; }
}