/* ===================================================================
   Wordly — the public pages' shared extras (2026-11-07)

     1. .bm-tile   the drawn service marks (js/brand-marks.js)
     2. .wui       the floating Theme / Language button (js/site-ui.js)
     3. WHITE THEME — everything under html[data-theme="light"]

   Loaded LAST on every public page, so at equal specificity it wins.

   ⚠️ THE WHITE THEME IS A TOKEN LAYER PLUS A SHORT LIST OF LITERALS —
   the same arrangement, and the same trap, as the dark shell
   (site-public.css header): a token layer reaches only the tokens it
   names. Both palettes (main.css's and index.css's private one) are
   overridden here. A component that paints a LITERAL light-on-dark
   colour needs its own line in block 3b, or it will be white on white.
   The deliberately dark panels — the closing CTA sky, the written
   showcase stage and the tool "screens" (scenes) — STAY dark: they are
   pictures of a screen, and their contrast was measured on dark.
   =================================================================== */

/* ── 1 · Service mark tiles ─────────────────────────────────────── */
.bm-tile {
    flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(17, 20, 24, 0.08);
    box-shadow: 0 1px 2px rgba(17, 20, 24, 0.06);
}
.bm-tile svg { width: 72%; height: 72%; display: block; }
.bm-sm  { width: 34px; height: 34px; border-radius: 9px; }
.bm-md  { width: 48px; height: 48px; border-radius: 12px; }
.bm-lg  { width: 64px; height: 64px; border-radius: 16px; }
.bm-nav { width: 38px; height: 38px; border-radius: 10px; }
/* Where a mark took an icon tile's place, it takes its spacing too. */
.service-card > .bm-tile { margin-bottom: 1.1rem; }
.svc-hero .bm-tile { margin: 0 auto 1rem; display: grid; }
.ap-hero-copy > .bm-tile { margin-bottom: 1rem; display: grid; }
.hv-card-body > .hv-bm { margin-bottom: .7rem; display: grid; }
.q-choice-svc .bm-tile { margin-right: .15rem; }
.ap-other .bm-tile, .wp-more-card .bm-tile { margin-bottom: .55rem; display: grid; }
.sc-core:has(> svg[viewBox="0 0 40 40"]) { background: #fff !important; padding: 18%; box-sizing: border-box; }
.sc-core > svg[viewBox="0 0 40 40"] { width: 100%; height: 100%; }

/* ── 2 · The floating button ────────────────────────────────────── */
.wui { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-family: Inter, -apple-system, 'Segoe UI', sans-serif; }
.wui-fab {
    display: inline-flex; align-items: center; gap: .4rem; height: 44px; padding: 0 .9rem 0 .75rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16); background: #16161f; color: #fff; cursor: pointer;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35); font: inherit; font-size: .82rem; font-weight: 700;
}
.wui-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.wui-fab:hover { background: #20202c; }
.wui-fab:focus-visible, .wui button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.wui-panel {
    position: absolute; right: 0; bottom: 54px; width: 236px; padding: .85rem; border-radius: 14px;
    background: #16161f; border: 1px solid rgba(255, 255, 255, .12); color: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.wui-panel[hidden] { display: none; }
.wui-h { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.wui-h:not(:first-child) { margin-top: .85rem; }
.wui-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.07); }
.wui-seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 34px; border: 0; border-radius: 7px;
    background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.wui-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wui-seg button[aria-pressed="true"] { background: #fff; color: #111418; }
.wui-langs { display: grid; gap: 2px; }
.wui-langs button {
    display: flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 .6rem; border: 0; border-radius: 8px;
    background: transparent; color: #fff; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left;
}
.wui-langs button:hover { background: rgba(255,255,255,.07); }
.wui-langs small { font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.55); }
.wui-tick { margin-left: auto; width: 16px; height: 16px; fill: none; stroke: #22d3ee; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.wui-langs button[aria-pressed="true"] .wui-tick { visibility: visible; }
@media (max-width: 600px) { .wui { right: 12px; bottom: 12px; } .wui-fab { height: 42px; } }
@media print { .wui { display: none; } }

html[data-theme="light"] .wui-fab { background: #fff; color: #111418; border-color: #dfe2e6; box-shadow: 0 6px 22px rgba(17,20,24,.14); }
html[data-theme="light"] .wui-fab:hover { background: #f6f7f9; }
html[data-theme="light"] .wui-panel { background: #fff; color: #111418; border-color: #e3e6ea; box-shadow: 0 16px 44px rgba(17,20,24,.16); }
html[data-theme="light"] .wui-h { color: #6a7079; }
html[data-theme="light"] .wui-seg { background: #f1f3f5; }
html[data-theme="light"] .wui-seg button { color: #4b5159; }
html[data-theme="light"] .wui-seg button[aria-pressed="true"] { background: #111418; color: #fff; }
html[data-theme="light"] .wui-langs button { color: #111418; }
html[data-theme="light"] .wui-langs button:hover { background: #f4f5f7; }
html[data-theme="light"] .wui-langs small { color: #6a7079; }
html[data-theme="light"] .wui-tick { stroke: #111418; }

/* Sinhala and Tamil script runs taller and wider than Latin: give it
   room rather than letting it clip, and a font that has the glyphs. */
html[lang="si"] body { font-family: Inter, 'Noto Sans Sinhala', 'Iskoola Pota', 'Nirmala UI', sans-serif !important; }
html[lang="ta"] body { font-family: Inter, 'Noto Sans Tamil', 'Latha', 'Nirmala UI', sans-serif !important; }
html[lang="si"] h1, html[lang="ta"] h1, html[lang="si"] h2, html[lang="ta"] h2 { line-height: 1.3 !important; letter-spacing: 0 !important; }
html[lang="ta"] h1 { font-size: clamp(1.7rem, 4vw, 2.9rem) !important; }

/* ── 3 · WHITE THEME ────────────────────────────────────────────── */
html[data-theme="light"] body.site-public {
    --site-bg: #ffffff; --site-bg-2: #f7f8fa; --site-bg-3: #eef0f3;
    --glass: #ffffff; --glass-2: #f7f8fa; --hair: #e6e8eb; --hair-2: #d3d7dc;
    --surface: #ffffff; --canvas: #ffffff; --border: #e6e8eb; --white: #ffffff; --off-white: #f7f8fa; --light-gray: #e6e8eb;
    --text: #111418; --text-1: #0b0d10; --text-2: #3d434a; --text-3: #5f6670;
    --black: #0b0d10; --gray: #5f6670; --dark-gray: #3d434a;
    --ink: #111418; --muted: #4b5159; --line: #e6e8eb; --card-bg: #ffffff; --lav: #f7f8fa; --lav-2: #f1f2f5;
    --brand: #6d28d9; --brand-dark: #5b21b6; --brand-light: #8b5cf6; --brand-tint: rgba(109, 40, 217, 0.08);
    --primary-blue: #6d28d9; --primary-blue-dark: #5b21b6; --primary-blue-light: #8b5cf6; --pale-blue: rgba(109, 40, 217, 0.08);
    --accent-cyan: #0e7490;
    --grad-accent: linear-gradient(120deg, #6d28d9 0%, #a21caf 55%, #0e7490 100%);
    --shadow-xs: 0 1px 2px rgba(17, 20, 24, 0.05); --shadow-sm: 0 2px 8px rgba(17, 20, 24, 0.06);
    --shadow-md: 0 10px 30px rgba(17, 20, 24, 0.08); --shadow-lg: 0 18px 48px rgba(17, 20, 24, 0.10);
    --shadow-xl: 0 24px 64px rgba(17, 20, 24, 0.12); --shadow-brand: 0 8px 22px rgba(109, 40, 217, 0.22);
    --nav-rule: #e6e8eb;
    --page-icon: #6d28d9;
    background: #ffffff; color: #111418;
}
html[data-theme="light"] body.site-public::before { display: none; }
html[data-theme="light"] .site-particles { display: none; }

/* 3a · Navbar and footer: white, with the wordmark inked. */
html[data-theme="light"] body.site-public .navbar,
html[data-theme="light"] body.site-public.wp-light .navbar {
    background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #e6e8eb; box-shadow: none;
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
html[data-theme="light"] body.site-public .navbar .logo img,
html[data-theme="light"] body.site-public .footer-logo img,
html[data-theme="light"] body.site-public .auth-logo img,
html[data-theme="light"] body.site-public img.auth-logo { filter: brightness(0) saturate(100%); opacity: .92; }
html[data-theme="light"] body.site-public .nav-menu li a:not(.btn),
html[data-theme="light"] body.site-public .nav-drop-head a,
html[data-theme="light"] body.site-public .nav-contact-link { color: #3d434a; }
html[data-theme="light"] body.site-public .nav-menu li a:not(.btn):hover,
html[data-theme="light"] body.site-public .nav-contact-link:hover { color: #111418; background: #f4f5f7; }
html[data-theme="light"] body.site-public .nav-menu li a.nav-active:not(.btn) { color: #111418; background: #f1f2f5; }
html[data-theme="light"] body.site-public .nav-contact-link .icon { color: #6d28d9; }
html[data-theme="light"] body.site-public .nav-drop-toggle { color: #3d434a; }
html[data-theme="light"] body.site-public .nav-drop-panel,
html[data-theme="light"] body.site-public .nav-drop-panel.nav-drop-v2 {
    background: #ffffff; border: 1px solid #e6e8eb; box-shadow: 0 18px 44px rgba(17, 20, 24, 0.12);
}
html[data-theme="light"] body.site-public .nav-drop-panel a:not(.btn) { color: #111418; }
html[data-theme="light"] body.site-public .nav-drop-panel a:not(.btn):hover { background: #f6f7f9; }
html[data-theme="light"] body.site-public .nav-drop-sub,
html[data-theme="light"] body.site-public .nav-drop-intro span { color: #5f6670; }
html[data-theme="light"] body.site-public .nav-drop-intro b { color: #111418; }
html[data-theme="light"] body.site-public .nav-toggle span,
html[data-theme="light"] body.site-public .nav-toggle::before,
html[data-theme="light"] body.site-public .nav-toggle::after { background: #111418; }
html[data-theme="light"] body.site-public .nav-toggle { color: #111418; }
@media (max-width: 860px) {
    html[data-theme="light"] body.site-public .nav-menu { background: #ffffff; }
}

html[data-theme="light"] body.site-public .site-footer,
html[data-theme="light"] body.site-public.wp-light .site-footer {
    background: #f7f8fa; border-top: 1px solid #e6e8eb; color: #3d434a;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="light"] body.site-public .site-footer h3 { color: #5f6670; }
html[data-theme="light"] body.site-public .site-footer a,
html[data-theme="light"] body.site-public .footer-tagline,
html[data-theme="light"] body.site-public .footer-copy { color: #3d434a; }
html[data-theme="light"] body.site-public .site-footer a:hover { color: #111418; }
html[data-theme="light"] body.site-public .footer-bottom { border-top-color: #e6e8eb; }

/* 3b · Literals in the dark shell that no token reaches. */
html[data-theme="light"] body.site-public .btn-secondary,
html[data-theme="light"] body.site-public .btn-ghost,
html[data-theme="light"] body.site-public .btn-outline {
    background: #ffffff; color: #111418; border-color: #d3d7dc;
}
html[data-theme="light"] body.site-public .btn-secondary:hover,
html[data-theme="light"] body.site-public .btn-ghost:hover,
html[data-theme="light"] body.site-public .btn-outline:hover { background: #f6f7f9; color: #111418; }
html[data-theme="light"] body.site-public .service-card,
html[data-theme="light"] body.site-public .feature-card,
html[data-theme="light"] body.site-public .step,
html[data-theme="light"] body.site-public .step-card,
html[data-theme="light"] body.site-public .card,
html[data-theme="light"] body.site-public .auth-box {
    background: #ffffff; border-color: #e6e8eb; box-shadow: 0 1px 2px rgba(17, 20, 24, 0.04);
}
html[data-theme="light"] body.site-public .auth-box .form-control,
html[data-theme="light"] body.site-public .form-control,
html[data-theme="light"] body.site-public select.form-control,
html[data-theme="light"] body.site-public textarea.form-control {
    background: #ffffff; color: #111418; border-color: #d3d7dc;
}
html[data-theme="light"] body.site-public select.form-control option { background: #ffffff; color: #111418; }
html[data-theme="light"] body.site-public .form-control:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14); }
html[data-theme="light"] body.site-public small,
html[data-theme="light"] body.site-public .text-muted { color: #5f6670; }

/* 3c · The loading cover and the purchase strip. */
html[data-theme="light"] .pl-cover, html[data-theme="light"] #pageLoader { background: #ffffff !important; }
html[data-theme="light"] body.site-public .ticker { background: #f7f8fa; border-color: #e6e8eb; }
html[data-theme="light"] body.site-public .ticker-item { color: #3d434a; }

/* 3d · Headings and hovers the dark shell paints LITERAL white (found by
   listing every `color: #fff` in site-public.css / index.css / home-v2.css
   and keeping the ones not on a purple fill or a dark "screen"). */
html[data-theme="light"] body.site-public .hero h1,
html[data-theme="light"] body.site-public .section-title,
html[data-theme="light"] body.site-public .svc-hero h1,
html[data-theme="light"] body.site-public .auth-header h1,
html[data-theme="light"] body.site-public .float-title,
html[data-theme="light"] body.site-public .quote-head-title { color: #111418; }
html[data-theme="light"] body.site-public .service-link:hover,
html[data-theme="light"] body.site-public .auth-footer a:hover,
html[data-theme="light"] body.site-public .link-btn:hover:not(:disabled),
html[data-theme="light"] body.site-public .auth-forgot:hover,
html[data-theme="light"] body.site-public .nav-drop-panel li a:hover { color: #111418; }
html[data-theme="light"] body.site-public .spinner { border-color: rgba(17,20,24,.15); border-top-color: #111418; }
html[data-theme="light"] body.site-public .float-card { background: #ffffff; border-color: #e6e8eb; box-shadow: 0 12px 34px rgba(17,20,24,.10); }

/* ── 4 · Feature icons, in the marks' style (both themes) ───────────
   The small icons beside each explanation were gradient tiles. They are
   the same flat white tile as the service marks now, with the line icon
   in one ink-violet, so a page's marks and its feature icons read as one
   set. Animated tiles keep their motion; only the paint changes. */
body.site-public .feature-icon,
body.site-public .pv-p-icon,
html[data-home="v2"] body.site-public .hv-why-icon,
body.site-public .ap-what-icon,
body.site-public .ap-receive-icon,
body.site-public .sc-fact-icon,
body.site-public .q-avatar,
body.site-public .q-choice-icon,
body.site-public .ap-other-icon {
    background: #ffffff !important; background-image: none !important;
    color: #5b21b6 !important; border: 1px solid rgba(17, 20, 24, 0.08) !important;
    box-shadow: 0 1px 2px rgba(17, 20, 24, 0.06) !important;
}
body.site-public .feature-icon .icon, body.site-public .pv-p-icon .icon, body.site-public .hv-why-icon .icon,
body.site-public .ap-what-icon .icon, body.site-public .ap-receive-icon .icon, body.site-public .sc-fact-icon .icon,
body.site-public .q-avatar .icon { color: #5b21b6; stroke-width: 1.7; }

/* The note on the legal pages in Sinhala / Tamil (site-ui.js). */
.wui-legal {
    max-width: 880px; margin: 1.25rem auto 0; padding: .75rem 1rem; border-radius: 10px; font-size: .92rem; line-height: 1.55;
    background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); color: var(--text, #fff);
}
html[data-theme="light"] .wui-legal { background: #f5f3ff; border-color: #ddd6fe; color: #3b2a72; }

/* 3e · Found by a contrast pass over the white pages (every text element
   vs its painted background, 4.5:1 floor). */
html[data-theme="light"] body.site-public .eyebrow { color: #5b21b6; }             /* 4.23 → 8.3 */
html[data-theme="light"] .hv-step-n { color: #5b21b6 !important; }                  /* 1.74 → 8.0 */
html[data-theme="light"] body.site-public .pv-tag { color: #0e7490 !important; border-color: #cbd5e1 !important; background: #fff !important; } /* 1.45 → 5.4 */

/* 3f · The dark "screens" keep the DARK tokens in the white theme.
   The light token layer is set on <body>, so it reached inside the
   showcase stage and the tool scenes too: the showcase's point titles
   came out near-black on its night sky, and the scenes' white text and
   glass vanished on white (seen 2026-11-07). Re-declaring the dark values
   on the panel itself puts them back. */
html[data-theme="light"] body.site-public .showcase,
html[data-theme="light"] body.site-public .cta-band,
html[data-theme="light"] body.site-public .hv-scene {
    --ink: rgba(255, 255, 255, 0.97); --text: rgba(255, 255, 255, 0.92); --text-1: rgba(255, 255, 255, 0.97);
    --text-2: rgba(233, 231, 245, 0.78); --text-3: rgba(233, 231, 245, 0.6); --muted: rgba(233, 231, 245, 0.72);
    --glass: rgba(255, 255, 255, 0.055); --glass-2: rgba(255, 255, 255, 0.085);
    --hair: rgba(255, 255, 255, 0.12); --hair-2: rgba(255, 255, 255, 0.2); --line: rgba(255, 255, 255, 0.12);
    --brand: #a78bfa; --primary-blue: #a78bfa; --accent-cyan: #22d3ee; --site-bg: #0b0b14;
    --grad-accent: linear-gradient(120deg, #a78bfa 0%, #e879f9 52%, #22d3ee 100%);
    color: rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] body.site-public .hv-scene { background: #15151f; border-color: #15151f; }
html[data-theme="light"] .hv-tag { background: none !important; color: #5f6670 !important; }
html[data-theme="light"] body.site-public .showcase .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }

/* The auth pages' phone field in the white theme (site-public.css paints it dark). */
html[data-theme="light"] body.site-public .auth-box .phone-country,
html[data-theme="light"] body.site-public .auth-box .phone-entry { background-color: #ffffff; border-color: #d3d7dc; }
html[data-theme="light"] body.site-public .auth-box .phone-country,
html[data-theme="light"] body.site-public .auth-box .phone-number { color: #111418; }
html[data-theme="light"] body.site-public .auth-box .phone-country option { background: #ffffff; color: #111418; }
html[data-theme="light"] body.site-public .auth-box .phone-country:focus,
html[data-theme="light"] body.site-public .auth-box .phone-entry:focus-within { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14); }
html[data-theme="light"] body.site-public .auth-box small.auth-hint { color: #5f6670; }