/* Lomel — the app's own face on the shared family skeleton (family.css v1.0.0). */
:root {
  --g1:#120f3d; --g2:#4a3fd6; --acc:#9ea8ff; --sfg:#ffffff;
  /* hero backlight: indigo stage, the icon's blue, and a soft tint of its red REC dot (light only) */
  --aura1:#4a3fd6; --aura2:#2f7bff; --aura3:#ffb8c8;
  --sheen:linear-gradient(90deg,#4a3fd6,#2f6cf0 28%,#e8456a 52%,#4a3fd6 76%,#6d63ff);
  /* names used inside the old i18n HTML strings (inline styles) */
  --text:var(--fg); --brand-2:#9ea8ff; --brand-3:#ffc2d0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --aura3:#ff4f70;
  --sheen:linear-gradient(90deg,#9a92ff,#6ea2ff 28%,#ff7a96 52%,#9a92ff 76%,#c3bcff) } }
:root[data-theme="dark"] { --aura3:#ff4f70; --sheen:linear-gradient(90deg,#9a92ff,#6ea2ff 28%,#ff7a96 52%,#9a92ff 76%,#c3bcff) }

#more .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
.section-head h2 em { font-style:normal; background:var(--sheen); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 8s linear infinite }
.hero .sub b { color:var(--fg); font-weight:600 }
.app .headline em { font-style:normal }
.tiles li strong { font-weight:700 }

/* hero stat row */
.facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; padding:0; list-style:none; color:var(--muted); font-size:15px; font-weight:500 }
.facts b { display:block; font:800 28px/1 var(--display); letter-spacing:-.03em; color:var(--fg) }
@media (max-width:600px) { .facts { gap:8px 22px } .facts b { font-size:24px } }

/* Ask AI chat tiles + AI note */
.tiles.chat li b { display:inline-block; min-width:2.6em; margin-right:6px; font:700 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--acc) }
.note { margin:16px 0 0; font-size:13px; line-height:1.5; opacity:.7; max-width:46ch }

/* language switcher (driven by i18n.js: data-lang-toggle / data-lang-menu) */
.lang-switcher { position:relative; margin-left:auto }
.topnav ~ .lang-switcher { margin-left:0 }
.lang-switcher ~ .btn.sm { margin-left:0 }
.lang-toggle { display:flex; align-items:center; gap:7px; min-height:40px; padding:6px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--fg); font:500 14px/1 var(--body); cursor:pointer }
.lang-toggle svg { width:16px; height:16px; color:var(--muted) }
.lang-toggle .flag { font-size:16px; line-height:1 }
.lang-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:max-content; max-width:min(92vw,360px); padding:8px; border-radius:16px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 24px 60px -20px rgb(8 10 20 / .4); grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px }
.lang-menu.open { display:grid }
.lang-option { display:flex; align-items:center; gap:8px; padding:9px 12px; border:0; border-radius:10px; background:none; color:var(--fg); font:500 14px/1.2 var(--body); text-align:start; cursor:pointer; min-height:40px }
.lang-option:hover { background:color-mix(in srgb, var(--g2) 10%, transparent) }
.lang-option.active { background:color-mix(in srgb, var(--g2) 16%, transparent); color:var(--g2) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-option.active { color:var(--acc) } }
@media (max-width:1000px) { .lang-current-name { display:none } }
@media (max-width:700px) { .lang-switcher { margin-left:auto !important } }
@media (max-width:420px) { .lang-toggle > svg { display:none } .brand { font-size:17px } .topbar .wrap { gap:10px } }

/* footer: this site's own app, bold and unlinked */

/* closing call */
.cta { margin-top:clamp(56px,8vw,112px); padding-inline:clamp(8px,2vw,24px) }
.cta .stage { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding-block:clamp(48px,7vw,96px) }
.cta .line { margin-inline:auto }
.cta .water { right:auto; left:50%; translate:-50% 0 }

/* right-to-left (Arabic) */
[dir="rtl"] .lang-menu { right:auto; left:0 }

/* legal pages: the original document markup, on the family .legal-page chrome */
.legal-page .page-eyebrow { display:block; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--g2); margin:0 0 14px }
.legal-page .page-meta { color:var(--muted); font-size:14px; margin:0 0 28px }
.legal-page .legal-banner, .legal-page .callout { border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:16px 20px; margin:0 0 24px; font-size:14px; line-height:1.65; color:var(--muted) }
.legal-page .callout { border-color:color-mix(in srgb, var(--g2) 35%, var(--line)); background:color-mix(in srgb, var(--g2) 7%, var(--surface)); margin-block:20px 28px }
.legal-page strong { color:var(--fg) }
.legal-page h3 { font:700 17px/1.3 var(--display); margin:24px 0 8px }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legal-page .page-eyebrow { color:var(--acc) } }
:root[data-theme="dark"] .legal-page .page-eyebrow { color:var(--acc) }