img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
:root {
    --ink: #050a1a;
    --navy: #0b1b3a;
    --line: rgba(148, 170, 230, 0.14);
    --text: #eaf0ff;
    --muted: #97a4c6;
    --blue: #2f6bff;
    --violet: #6d4aff;
    --cyan: #5be1ff;
    --magenta: #ff3db8;
    --up: #22d39b;
    --down: #ff5470;
    --grad: linear-gradient(120deg, #2f6bff 0%, #6d4aff 55%, #b54bff 100%);
    --display: 'Sora', 'Manrope', system-ui, sans-serif;
    --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ nav */
.nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.nav.is-solid {
    background: rgba(5, 10, 26, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 1px 0 var(--line);
}
.nav__in { display: flex; align-items: center; gap: 22px; height: 72px; }
/* The logo keeps its shape: when the row is full it is the links that give way, never the artwork. */
.nav__in > .brand { flex: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
/* The two parts are sized apart: a square mark, and a wordmark that keeps its own ratio. */
.brand__mark { width: 34px; height: 34px; }
/* The wordmark carries the name, so it is sized by height and keeps its ratio. */
/* The artwork is padded so the lettering, not the arrow above it, sits on the
   middle line of the bar. */
.brand__word { width: auto; height: 34px; }
.nav__links { display: flex; gap: 18px; margin-left: 4px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* The Bot Forge sits beside the app in the bar. The bar has no room for the
   whole sentence next to seven links, so the name stands alone there; the
   phone panel spells it out. On a phone the bar keeps one button. */
.nav__forge { gap: 7px; }
/* The other languages spell the menu longer than English does and the row is
   already full there, so the Forge stays in the menu panel and the hero. */
html:not([lang="en"]) .nav__forge { display: none; }
@media (max-width: 520px) { .nav__forge { display: none; } }
/* The section you are in is the one item that is not a link to somewhere else. */
.nav__links a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--cyan); padding-bottom: 4px; }
.light .nav__links a[aria-current="page"] { box-shadow: inset 0 -2px 0 #2f6bff; }

/* The language switcher: a disclosure, so it works without script too. */
.lang { position: relative; }
.lang summary {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
    border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line);
    font: 700 13.5px/1 var(--body); color: var(--text); cursor: pointer; list-style: none;
    transition: background .2s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: rgba(255,255,255,.1); }
.lang summary svg { width: 17px; height: 17px; }
.lang summary .chev { width: 12px; height: 12px; opacity: .7; transition: transform .2s; }
.lang[open] summary .chev { transform: rotate(180deg); }
.lang__menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: 6px;
    display: grid; gap: 2px; border-radius: 16px; background: #0d1a3a;
    box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -16px rgba(0,0,0,.75);
    animation: fadeUp .18s ease both;
}
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #c9d3ee; }
.lang__menu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
.lang__menu a[aria-current] { background: rgba(47,107,255,.2); color: #fff; }
.lang__menu small { font-size: 11.5px; font-weight: 800; color: var(--muted); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border-radius: 14px; border: 0;
    font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn--sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.btn--primary { color: #fff; background: var(--grad); box-shadow: 0 10px 30px -8px rgba(90, 80, 255, .65), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(90, 80, 255, .85), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--ghost { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- hero */
/* The words sit in the middle of the render's height, so neither leaves a
   gap below the other. */
.hero { position: relative; display: flex; align-items: center; min-height: clamp(640px, 92svh, 880px); padding: 104px 0 72px; overflow: hidden; isolation: isolate; }
.hero > .wrap { width: 100%; }
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(60% 50% at 10% 20%, rgba(47,107,255,.16), transparent 70%),
        radial-gradient(40% 40% at 80% 90%, rgba(255,61,184,.10), transparent 70%);
}
.hero__art {
    position: absolute; right: 0; bottom: 0; z-index: -1;
    width: min(64vw, 1180px); aspect-ratio: 1453 / 1083;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 12%), linear-gradient(180deg, transparent 0%, #000 16%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 12%), linear-gradient(180deg, transparent 0%, #000 16%);
    transform-origin: 70% 60%;
    animation: artIn 1.8s cubic-bezier(.2,.7,.1,1) both .1s;
}
.hero__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero__art.no-img { background: radial-gradient(60% 60% at 70% 60%, rgba(47,107,255,.35), transparent 70%); }
@keyframes artIn { from { opacity: 0; transform: scale(1.08); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }

/* The robots' eyes glow on each live tick. Positions are in the render's own
   frame, so they stay on the eyes at any size. */
.eye {
    position: absolute; width: 5.4%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,120,220,.95) 0%, rgba(255,61,184,.55) 35%, transparent 70%);
    mix-blend-mode: screen; opacity: .35; pointer-events: none;
    transition: opacity .7s ease, transform .7s ease;
}
.eye.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1.35); transition: opacity .08s, transform .08s; }
.eye--a { left: 67.3%; top: 56.6%; }
.eye--b { left: 72.8%; top: 58.4%; }
.eye--c { left: 51.6%; top: 92.4%; }
.eye--d { left: 57.2%; top: 94.2%; }

/* A band of light crosses the glass gate now and then. */
.gate {
    position: absolute; left: 50.6%; top: 27%; width: 44.8%; height: 45%;
    overflow: hidden; pointer-events: none; mix-blend-mode: screen;
    clip-path: polygon(0 0, 100% 36%, 100% 100%, 0 70%);
}
.gate::after {
    content: ''; position: absolute; top: -20%; bottom: -20%; width: 28%; left: -40%;
    background: linear-gradient(90deg, transparent, rgba(120,220,255,.55), transparent);
    transform: skewX(-18deg);
    animation: sweep 5.5s ease-in-out infinite 2.2s;
}
@keyframes sweep { 0% { left: -40%; } 45%, 100% { left: 130%; } }

/* The headline never wraps: each line is one line, and the size comes from
   the column width over the language's longest line (--h1w, in em). */
.hero__in { --col: min(640px, 48vw); position: relative; display: grid; grid-template-columns: minmax(0, var(--col)); }
h1 {
    margin: 0; font-family: var(--display); font-weight: 700;
    font-size: min(76px, calc(var(--col) / var(--h1w, 10))); line-height: 1.02; letter-spacing: -0.035em;
    white-space: nowrap;
}
h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
h1 .ln > span { display: inline-block; animation: rise 1s cubic-bezier(.2,.8,.1,1) both; }
h1 .ln:nth-child(2) > span { animation-delay: .12s; }
h1 .ln:nth-child(3) > span { animation-delay: .24s; }
h1 .shine {
    background: linear-gradient(100deg, #7fb0ff 0%, #a98bff 40%, #ff7ad9 70%, #7fb0ff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rise 1s cubic-bezier(.2,.8,.1,1) both .24s, hue 8s linear infinite 1.4s;
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hue { to { background-position: -220% 0; } }
.fade { animation: fadeUp .9s cubic-bezier(.2,.8,.1,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.lead { margin: 24px 0 0; font-size: clamp(16px, 1.5vw, 18.5px); color: #b9c4e2; line-height: 1.65; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__cta .btn { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); font-weight: 600; text-shadow: 0 1px 10px var(--ink), 0 0 2px var(--ink); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--cyan); flex: none; }

.live { display: inline-flex; align-items: center; gap: 6px; color: var(--up); }
.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.up { color: var(--up); } .down { color: var(--down); }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 38px; margin-left: -12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); animation: fadeUp 1s both 1.6s; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* -------------------------------------------------------------- sections */
section { position: relative; scroll-margin-top: 64px; }
.sec { padding: clamp(80px, 11vw, 140px) 0; }
.head { max-width: 760px; }
.head--c { margin: 0 auto; text-align: center; }
.kicker { display: inline-block; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--cyan); }
h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.head p { margin: 20px 0 0; font-size: 18px; color: #b3bfdf; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.1,1), transform .9s cubic-bezier(.2,.8,.1,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d='1'] { transition-delay: .1s; }
.reveal[data-d='2'] { transition-delay: .2s; }

/* Tools: three rows, each a product view beside its words */
.tools { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 130px); margin-top: clamp(60px, 8vw, 96px); }
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.tool--flip .tool__copy { order: 2; }
.tool__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; color: #c8d2f2; }
.tool__tag > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); box-shadow: 0 10px 24px -8px rgba(109,74,255,.7); }
.tool__tag svg { width: 20px; height: 20px; color: #fff; }
.tool h3 { margin: 20px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; }
.tool p { margin: 16px 0 0; font-size: 17px; color: #b3bfdf; }
.checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; color: #d5dcf2; }
.checks svg { width: 22px; height: 22px; margin-top: 1px; color: var(--cyan); }
.tool__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-weight: 700; color: #9cc0ff; }
.tool__link svg { width: 18px; height: 18px; transition: transform .2s; }
.tool__link:hover svg { transform: translateX(4px); }

.stage {
    position: relative; padding: clamp(16px, 2.4vw, 26px); border-radius: 28px;
    background: linear-gradient(160deg, rgba(20,38,84,.85), rgba(10,20,46,.9));
    box-shadow: inset 0 0 0 1px rgba(150,180,255,.14), 0 40px 90px -40px rgba(20,40,120,.9);
    overflow: hidden;
}
.stage::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(109,74,255,.35), transparent 65%); pointer-events: none; }
.ui { position: relative; border-radius: 20px; background: #f6f8fc; color: #0f172a; padding: 18px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
.ui__head { display: flex; align-items: center; gap: 10px; }
.ui__title { font-weight: 800; font-size: 15px; }
.ui__sub { margin-left: auto; font-size: 12px; font-weight: 700; color: #64748b; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.chip--up { background: #dcfce7; color: #047857; }
.chip--conf { background: #bbf7d0; color: #065f46; }
.chip--n { background: #eef2f7; color: #64748b; }

/* Signals view */
.sig { display: grid; gap: 12px; }
.sig__why { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: #334155; }
.sig__levels { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.sig__levels div { padding: 10px 12px; border-radius: 12px; background: #eef2f7; }
.sig__levels div:first-child { background: linear-gradient(120deg, #e5ecff, #efe9ff); }
.sig__levels dt { font-size: 11px; font-weight: 700; color: #64748b; }
.sig__levels dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.readings { margin: 12px 0 0; padding: 4px 14px; border-radius: 14px; background: #eef2f7; list-style: none; }
.readings li { display: grid; grid-template-columns: 1fr auto 64px; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; font-weight: 700; }
.readings li + li { border-top: 1px solid #dde3ec; }
.readings em { font-style: normal; text-align: right; color: #475569; font-weight: 600; font-variant-numeric: tabular-nums; }
.readings .chip { font-size: 11px; padding: 2px 8px; }
.meter { position: relative; height: 8px; margin-top: 14px; border-radius: 8px; background: #e2e8f0; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width 1.6s cubic-bezier(.2,.8,.1,1); }
.in .meter i { width: var(--w); }
.tf { display: flex; gap: 6px; }
.tf span { padding: 4px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #64748b; background: #eef2f7; }
.tf span.on { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* Auto Trader view */
.auto__read { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 14px; }
.ring { position: relative; width: 104px; height: 104px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: #e2e8f0; }
.ring .fg { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.8,.1,1) .2s; }
.in .ring .fg { stroke-dashoffset: calc(289 - 289 * var(--p)); }
.ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; }
.ring b small { font-size: 10.5px; font-weight: 700; color: #64748b; font-family: var(--body); line-height: 1; }
.auto__call { font-size: 13.5px; color: #334155; line-height: 1.5; }
.auto__call strong { display: block; font-size: 17px; color: #0f172a; }
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.limit { padding: 10px 12px; border-radius: 12px; background: #eef2f7; }
.limit dt { font-size: 11px; font-weight: 700; color: #64748b; }
.limit dd { margin: 2px 0 6px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 6px; background: #dfe5ee; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.6s cubic-bezier(.2,.8,.1,1) .3s; }
.in .bar i { width: var(--w); }
.log { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.log li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 11px; background: #fff; box-shadow: 0 1px 0 #e2e8f0; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; }
.in .log li { opacity: 1; transform: none; }
.in .log li:nth-child(2) { transition-delay: .5s; }
.in .log li:nth-child(3) { transition-delay: .9s; }
.in .log li:nth-child(4) { transition-delay: 1.3s; }
.log time { color: #94a3b8; font-weight: 600; font-variant-numeric: tabular-nums; }
.log span:last-child { font-variant-numeric: tabular-nums; }

/* Digit view, fed by live ticks */
.dist { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 170px; margin-top: 16px; padding-top: 22px; }
.dist__col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.dist__bar { width: 100%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #7c9bff, #4f6ef7); transition: height .6s cubic-bezier(.2,.8,.1,1), background .3s; min-height: 4px; }
.dist__col.hot .dist__bar { background: linear-gradient(180deg, #34d399, #059669); }
.dist__col.cold .dist__bar { background: linear-gradient(180deg, #fb7185, #e11d48); }
.dist__pct { position: absolute; font-size: 10.5px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; transform: translateY(-5px); transition: bottom .6s cubic-bezier(.2,.8,.1,1); }
.dist__dg { display: grid; place-items: center; width: 100%; height: 30px; margin-top: 6px; border-radius: 9px; background: #eef2f7; font-weight: 800; font-size: 14px; }
.dist__col.last .dist__dg { background: #0f172a; color: #fff; }
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pairs > div { padding: 10px 12px; border-radius: 12px; background: #eef2f7; }
.pairs dt { font-size: 11px; font-weight: 700; color: #64748b; }
.pairs dd { margin: 3px 0 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.split { display: flex; height: 6px; margin-top: 7px; border-radius: 6px; overflow: hidden; background: #dfe5ee; }
.split i { display: block; height: 100%; transition: width .6s; }
.split i:first-child { background: #3b82f6; }
.split i:last-child { background: #a855f7; }

/* -------------------------------------------------------------- principles */
.why { background: linear-gradient(180deg, transparent, rgba(11,27,58,.55) 20%, rgba(11,27,58,.55) 80%, transparent); }
/* Each claim on its own ruled line, with a small working proof beside it
   rather than an icon. */
.proof { margin-top: 56px; border-top: 1px solid var(--line); }
.proof__row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line); }
.proof__row h3 { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.proof__row p { margin: 0; color: #b3bfdf; font-size: 16px; }
.proof__art { display: flex; flex-wrap: wrap; align-items: center; min-height: 72px; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 700; color: #d5dcf2; font-variant-numeric: tabular-nums; }
.rchip b { font-weight: 800; color: var(--muted); }
.rchip--up b { color: var(--up); }
.rchip--weak { position: relative; background: rgba(255,184,77,.13); color: #ffd591; }
.rchip--weak b { color: #ffb84d; }
.rchip--weak::after { content: ''; position: absolute; inset: -4px; border-radius: 13px; box-shadow: 0 0 0 2px rgba(255,184,77,.5); opacity: 0; }
.in .rchip--weak::after { animation: flag 2.4s ease-out infinite 1s; }
@keyframes flag { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.08); } }

.flow { display: grid; grid-template-columns: auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto; align-items: center; gap: 8px; width: 100%; }
.node { padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; color: #d5dcf2; white-space: nowrap; }
.node--deriv { background: rgba(255,68,79,.14); color: #ffb3b8; }
.wire { position: relative; height: 2px; border-radius: 2px; background: rgba(148,170,230,.25); overflow: hidden; }
.wire::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.in .wire::after { animation: travel 2.2s ease-in-out infinite; }
.in .wire + .node + .wire::after { animation-delay: 1.1s; }
@keyframes travel { to { left: 100%; } }
.perm { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.perm svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }

.lim { width: 100%; }
.lim__track { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); }
.lim__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #fb7185, #e11d48); transition: width 1.6s cubic-bezier(.4,0,.2,1) .3s; }
.in .lim__fill { width: 78%; }
.lim__mark { position: absolute; left: 78%; top: -7px; bottom: -7px; width: 2px; border-radius: 2px; background: #fff; }
.lim__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stopped { padding: 4px 10px; border-radius: 8px; background: rgba(255,84,112,.15); color: #ff9aab; opacity: 0; transform: scale(.85); transition: opacity .35s ease 1.9s, transform .35s ease 1.9s; }
.in .stopped { opacity: 1; transform: none; }

.demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.07); }
.seg i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: rgba(255,255,255,.12); transition: left .6s cubic-bezier(.4,0,.2,1) .5s, background .6s ease .5s; }
.in .seg i { left: 50%; background: var(--grad); }
.seg span { position: relative; min-width: 64px; padding: 8px 14px; font-size: 13px; font-weight: 800; text-align: center; color: #d5dcf2; }
.bal { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bal small { font-family: var(--body); font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------------- steps */
/* A path, not three boxes: one track through three stops that fills from the
   first to the last, each stop showing the thing you will actually see. */
.path { --g: clamp(24px, 4vw, 56px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); margin: 64px 0 0; padding: 0; list-style: none; }
.path::before, .path::after { content: ''; position: absolute; top: 22px; left: 23px; right: calc((100% - 2 * var(--g)) / 3 - 23px); height: 2px; border-radius: 2px; background: rgba(148,170,230,.2); }
.path::after { background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.4,0,.2,1) .2s; }
.path.in::after { transform: none; }
.path__step { position: relative; }
.path__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px rgba(148,170,230,.3); font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--muted); transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.path.in .path__dot { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(109,74,255,.85); }
.path.in .path__step:nth-child(1) .path__dot { transition-delay: .2s; }
.path.in .path__step:nth-child(2) .path__dot { transition-delay: 1s; }
.path.in .path__step:nth-child(3) .path__dot { transition-delay: 1.8s; }
.path__step h3 { margin: 26px 0 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.path__step p { margin: 10px 0 0; color: #b3bfdf; font-size: 15.5px; }
.path__art { margin-top: 24px; }
.derivbtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: 12px; background: #ff444f; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 12px 26px -12px rgba(255,68,79,.8); }
.derivbtn i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.seg--late { display: inline-grid; }
.seg--late i { transition-delay: 1.2s, 1.2s; }
.tip { position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; max-width: 100%; padding: 11px 12px 11px 14px; border-radius: 12px; background: #fff; color: #0f172a; font-size: 13px; font-weight: 700; box-shadow: 0 16px 40px -18px rgba(0,0,0,.7); opacity: 0; transform: translateY(8px); transition: opacity .5s ease 2s, transform .5s ease 2s; }
.path.in .tip { opacity: 1; transform: none; }
.tip::before { content: ''; position: absolute; top: -5px; left: 22px; width: 11px; height: 11px; background: #fff; transform: rotate(45deg); }
.tip b { font-size: 12px; font-weight: 800; color: #6d4aff; }
.tip em { font-style: normal; padding: 5px 10px; border-radius: 8px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 800; }

/* ------------------------------------------------------------------ guides */
/* Ruled rows. The ticks are the guide's parts, one each, so their length is
   the guide's length. */
.glist { margin-top: 48px; border-top: 1px solid var(--line); }
.grow { display: grid; grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: 28px 12px; border-bottom: 1px solid var(--line); transition: background .3s ease; }
.grow:hover { background: linear-gradient(90deg, rgba(47,107,255,.07), transparent 75%); }
.grow__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(109,74,255,.16); color: #b9a8ff; }
.grow__ic svg { width: 24px; height: 24px; }
.grow__text h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.grow__text p { margin: 6px 0 0; color: #b3bfdf; font-size: 15.5px; }
.grow__len { display: flex; flex-direction: column; gap: 9px; }
.grow__len small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ticks { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.ticks i { flex: 0 0 5px; height: 100%; border-radius: 2px; background: rgba(148,170,230,.22); transform: scaleY(.3); transform-origin: bottom; transition: transform .35s ease, background .35s ease; transition-delay: calc(var(--i) * 25ms); }
.in .ticks i { transform: none; background: linear-gradient(180deg, #7c9bff, #6d4aff); }
.grow__go { display: flex; align-items: center; gap: 18px; }
.grow__tour { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #9cc0ff; white-space: nowrap; }
.grow__tour svg { width: 16px; height: 16px; transition: transform .2s; }
.grow__tour:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------- faq */
.faq { max-width: 860px; margin: 56px auto 0; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: rgba(12,24,54,.55); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s; }
.faq details[open] { background: rgba(20,38,84,.7); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 17.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .3s; }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--cyan); }
.faq details p { margin: 0; padding: 0 24px 22px; color: #b3bfdf; font-size: 16px; }

/* --------------------------------------------------------------------- cta */
.cta { position: relative; margin-top: 30px; padding: clamp(48px, 7vw, 84px) clamp(24px, 6vw, 72px); border-radius: 34px; overflow: hidden; isolation: isolate; background: linear-gradient(125deg, #173aa8 0%, #3a2bb0 50%, #6a1f9c 100%); }
.cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000); mask-image: linear-gradient(90deg, transparent 20%, #000); }
.cta__glow { position: absolute; z-index: -1; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,61,184,.45), transparent 65%); animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-12%, 18%); } }
.cta__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 14px; font-weight: 700; color: #fff; }
.cta__kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #7dffc4; box-shadow: 0 0 10px #7dffc4; }
.cta p { margin: 18px 0 0; font-size: 18px; color: rgba(255,255,255,.82); }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Two parts: the pitch on the left, and on the right a glass panel whose
   one job is the free account. */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lbl-s { display: none; }
@media (max-width: 600px) { .cta .lbl-l { display: none; } .cta .lbl-s { display: inline; } }
.cta__side { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 24px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 30px 60px -30px rgba(10,6,40,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cta__side h3 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; }
.cta .cta__create { width: 100%; height: 54px; border-radius: 15px; font-size: 16px; }
.cta__perks { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.92); }
.cta__perks li { display: flex; align-items: center; gap: 10px; }
.cta__perks svg { width: 18px; height: 18px; flex: none; color: #7dffc4; }
.cta .btn--light { background: #fff; color: #1b1f5e; box-shadow: 0 16px 40px -14px rgba(0,0,0,.5); }
.cta .btn--light:hover { transform: translateY(-2px); }
.cta .btn--ghost { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* ------------------------------------------------------------------ footer */
/* Footer: the brand, then Products, Learn (two columns, it is the longest),
   Countries and Language, over a thin bar. */
footer { position: relative; padding: 72px 0 0; margin-top: clamp(80px, 10vw, 120px); background: linear-gradient(180deg, rgba(11,27,58,.35), rgba(5,10,26,0) 70%); border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 2.3fr); gap: 32px; }
.foot__brand { position: relative; padding-right: 32px; }
.foot__brand::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.foot__brand p { margin: 16px 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
/* The Android app, as the store badge people recognise: dark, the Play mark,
   a small line over the store's name. */
.gplay { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 13px; border-radius: 12px; background: var(--grad); color: #fff; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(90,80,255,.75); transition: transform .2s ease, box-shadow .2s ease; }
.gplay:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(90,80,255,.9); }
.gplay svg { flex: none; width: 19px; height: 19px; }
.gplay svg path { fill: #fff; }
.gplay span { display: grid; gap: 2px; text-align: start; line-height: 1; }
.gplay small { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.gplay b { font-family: var(--body, inherit); font-size: 14px; font-weight: 700; }
/* The Android app in the hero: a small banner under the buttons. What it is,
   one line on why, and the store badge. The whole banner is the link. */
.appbar { order: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; max-width: 640px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(12,24,54,.55); box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.light .appbar { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px -28px rgba(15,23,42,.5); }
.appbar:hover { transform: translateY(-2px); }
.light .appbar:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.3), 0 22px 40px -28px rgba(47,107,255,.55); }
.appbar__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(47,107,255,.1); }
.appbar__ic svg { width: 24px; height: 24px; }
.appbar__text { display: grid; gap: 3px; min-width: 0; }
.appbar__text small { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #059669; }
.appbar__text small i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.appbar__text b { font-family: var(--display); font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.appbar__text > span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.appbar .gplay { box-shadow: none; }
.appbar:hover .gplay { transform: none; }
@media (max-width: 600px) {
    .appbar { grid-template-columns: auto minmax(0, 1fr); }
    .appbar .gplay { grid-column: 1 / -1; justify-content: center; }
}
.foot h4 { margin: 0 0 18px; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 14px; line-height: 1.4; }
.foot ul a { color: var(--muted); transition: color .2s; }
.foot ul a:hover, .foot ul a[aria-current] { color: var(--text); }
.foot__col--learn ul { display: block; columns: 2; column-gap: 24px; }
.foot__col--learn li { break-inside: avoid; margin-bottom: 11px; }
.foot__bar { display: flex; justify-content: center; text-align: center; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: #6f7ca0; }

/* Bots view: the builder's four blocks slide in, then the library */
.run { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9px; background: #16a34a; color: #fff; font-size: 12px; font-weight: 800; }
.blocks { display: grid; gap: 8px; margin-top: 14px; }
.blk { padding: 11px 13px; border-radius: 12px; color: #fff; font-size: 12.5px; opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .5s; }
.blk b { font-weight: 800; }
.in .blk { opacity: 1; transform: none; }
.in .blk--2 { transition-delay: .25s; }
.in .blk--3 { transition-delay: .5s; }
.in .blk--4 { transition-delay: .75s; }
.blk--1 { background: linear-gradient(135deg, #6d4aff, #5436e0); }
.blk--2 { background: linear-gradient(135deg, #2f6bff, #1f55e0); margin-left: 16px; }
.blk--3 { background: linear-gradient(135deg, #0ea5b7, #0b8595); margin-left: 16px; }
.blk--4 { background: linear-gradient(135deg, #475569, #334155); }
.blk__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.blk__row span { padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.2); font-size: 11.5px; font-weight: 700; }
.lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lib div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #eef2f7; font-size: 13px; font-weight: 800; }
.lib img { width: 36px; height: 36px; flex: none; }

/* Back to top, once the page has scrolled well down */
.top {
    position: fixed; right: 20px; bottom: 20px; z-index: 65; display: grid; place-items: center;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: var(--grad); color: #fff; box-shadow: 0 14px 34px -10px rgba(90,80,255,.8);
    opacity: 0; pointer-events: none; transform: translateY(12px) scale(.9); cursor: pointer;
    transition: opacity .3s ease, transform .3s ease;
}
.top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.top.is-on:hover { transform: translateY(-2px); }
.top svg { width: 22px; height: 22px; }

/* A quiet offer of the visitor's own language, never a redirect. */
.suggest {
    position: fixed; left: 50%; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 12px;
    max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border-radius: 16px;
    background: #0d1a3a; box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -18px rgba(0,0,0,.8);
    font-size: 14px; font-weight: 600; color: #d5dcf2;
    transform: translateX(-50%); animation: fadeUp .5s ease both 1.2s;
}
.suggest[hidden] { display: none; }
.suggest .btn { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.suggest button.x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.suggest button.x:hover { background: rgba(255,255,255,.08); color: var(--text); }

.head__go { margin-top: 26px; }
.blogcats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.blogcats a { padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 700; color: var(--muted); transition: color .2s, background .2s; }
.blogcats a:hover { background: rgba(255,255,255,.1); color: var(--text); }
.light .blogcats a { background: #fff; color: #4a5677; }
.light .blogcats a:hover { background: #f0f3fa; color: var(--text); }

/* Below the breakpoint above there is no row at all, so one button opens the
   same links over the page. Built as a disclosure, like the language switch,
   so it works without script. */
.menu { display: none; }
.menu > summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); cursor: pointer; list-style: none; transition: background .2s; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: rgba(255,255,255,.1); }
.menu > summary svg { width: 21px; height: 21px; }
.menu:not([open]) .i-shut, .menu[open] .i-open { display: none; }
.menu__panel {
    position: fixed; inset: 72px 0 auto; z-index: 60;
    max-height: calc(100svh - 72px); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    background: rgba(5, 10, 26, 0.97); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--line), 0 30px 60px -22px rgba(0,0,0,.85);
    animation: fadeUp .2s ease both;
}
.menu__links { display: grid; gap: 2px; }
.menu__links a { padding: 13px 14px; border-radius: 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.menu__links a:hover { background: rgba(255,255,255,.06); }
.menu__links a[aria-current="page"] { background: rgba(91,225,255,.12); color: var(--text); }
.menu__panel h4 { margin: 22px 0 6px; padding: 0 14px; font: 800 13px/1 var(--body); color: var(--muted); }
.menu__lang { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 14px; list-style: none; }
.menu__lang a { display: block; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 14px; font-weight: 700; color: #c9d3ee; }
.menu__lang a[aria-current] { background: rgba(47,107,255,.24); color: #fff; }
.menu__panel .btn { width: 100%; margin-top: 22px; }
.menu__panel .btn + .btn { margin-top: 10px; }
/* A clause that should not be split across lines where there is room for it:
   the line breaks before it instead of in the middle of it. */
.keep { white-space: nowrap; }
/* The digit card is a still example, so its bars are simply there. */
.dist .dist__bar, .dist .dist__pct { transition: none; }
@media (max-width: 720px) { .keep { white-space: normal; } }
/* While the panel is open it has the screen to itself: the page behind stays
   where it was, and the language bar waits its turn. */
html:has(.menu[open]) body { overflow: hidden; }
body:has(.menu[open]) .suggest { display: none; }

/* Eight menu links, and some languages spell them long. The row tightens in
   two steps and then gives up: below 1080 the menu is hidden anyway, and the
   footer carries every link. */
@media (max-width: 1420px) {
    .nav__links { gap: 16px; margin-left: 18px; font-size: 14px; }
    [dir="rtl"] .nav__links { margin-left: 0; margin-right: 18px; }
}
@media (max-width: 1240px) {
    .nav__links { gap: 12px; font-size: 13.5px; }
    .nav__cta .btn--sm { padding: 0 14px; }
}
/* Spanish and Swahili spell the eight items longest of the Latin languages, so
   the row is dropped just above where the tightest fit gave out. */
@media (max-width: 1140px) {
    .nav__links { display: none; }
    .menu { display: block; }
}/* Sinhala menu words run long: smaller, and the menu hides earlier. */
@media (max-width: 1520px) {
    html[lang="si"] .nav__links { gap: 12px; font-size: 13px; }
}
@media (max-width: 1600px) {
    html[lang="si"] .nav__links { display: none; }
    html[lang="si"] .menu { display: block; }
}

/* ----------------------------------------------------------------- mobile */
@media (max-width: 1080px) {
    .nav__links { display: none; }
    .cta { grid-template-columns: minmax(0, 1fr); }
    .cta__main { text-align: center; }
    /* All three buttons share one row; phones use the short names. */
    .cta { padding-left: 18px; padding-right: 18px; }
    .cta__main .cta__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    .cta__main .cta__row .btn { height: auto; min-height: 48px; padding: 10px 6px; font-size: 14px; white-space: nowrap; line-height: 1.25; text-align: center; }
    .cta__main .cta__row .btn svg { display: none; }
    .cta__kicker { display: inline-block; max-width: 100%; padding: 8px 16px; border-radius: 18px; line-height: 1.4; }
    .cta__kicker::before { display: none; }
    .cta__kicker-b { display: block; }
    .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot__brand, .foot__col--learn { grid-column: span 3; }
    .foot__brand { padding: 0 0 32px; }
    .foot__brand::after { top: auto; left: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent); }
    .foot__col--learn ul { columns: 3; }
    .tool, .tool--flip { grid-template-columns: minmax(0, 1fr); }
    .tool--flip .tool__copy { order: 0; }
}
@media (max-width: 1024px) {
    .hero { display: block; padding: 116px 0 0; min-height: 0; }
    .hero__in { --col: calc(100vw - 2 * var(--gutter)); }
    .hero__art { position: relative; right: auto; width: 100%; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 14%), linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 14%), linear-gradient(180deg, transparent 0%, #000 18%); }
    .scroll-cue { display: none; }
}
@media (max-width: 860px) {
    .proof__row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 0; }
    .proof__art { margin-top: 6px; }
    /* The path turns downward: the track runs beside the stops. */
    .path { grid-template-columns: 1fr; gap: 40px; }
    .path::before, .path::after { top: 23px; bottom: 23px; left: 22px; right: auto; width: 2px; height: auto; }
    .path::after { transform: scaleY(0); transform-origin: top; }
    .path__step { padding-left: 70px; }
    .path__dot { position: absolute; left: 0; top: 0; }
    .path__step h3 { margin-top: 8px; }
    .grow { grid-template-columns: auto minmax(0, 1fr); padding: 26px 0; }
    .grow__len, .grow__go { grid-column: 2; }
    /* Products, Countries and Language share one row; Learn has the next. */
    .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
    .foot__brand, .foot__col--learn { grid-column: 1 / -1; }
    .foot__col:not(.foot__col--learn) ul { font-size: 13px; gap: 10px; }
}
@media (max-width: 520px) {
    .nav__in { gap: 12px; }
    .nav__cta { gap: 8px; }
    .lang summary { padding: 0 10px; }
    .lang summary .chev { display: none; }
    .hero__cta .btn { flex: 1 1 100%; }
    .hero__art { width: 150%; margin: -30px 0 0 -40%; }
    /* Phones: a calmer type scale for section titles and body text. */
    h2 { font-size: 27px; }
    .head p, .cta p { font-size: 15.5px; }
    .lead { font-size: 15.5px; }
    .tool h3 { font-size: 22px; }
    .tool p { font-size: 15.5px; }
    .checks li { font-size: 14.5px; }
    .proof__row h3, .path__step h3, .grow__text h3 { font-size: 19px; }
    .proof__row p, .path__step p, .grow__text p { font-size: 14.5px; }
    .faq summary { font-size: 16px; padding: 18px 20px; }
    .faq details p { font-size: 14.5px; padding: 0 20px 18px; }
    .cta__side h3 { font-size: 18px; }
    /* A short heading stays on one line on phones, sized from its length. */
    .tool__copy { container-type: inline-size; }
    .tool h3.fit { white-space: nowrap; font-size: min(26px, calc(100cqi / var(--hw))); }
    .sig__levels { grid-template-columns: 1fr 1fr; }
    .sig__levels div:first-child { grid-column: 1 / -1; }
    .pairs { grid-template-columns: 1fr; }
    .dist { height: 140px; gap: 4px; }
    .grow { grid-template-columns: 1fr; gap: 14px; }
    .grow__len, .grow__go { grid-column: 1; }
    .grow__go { flex-wrap: wrap; }
    .foot__col--learn ul { columns: 2; }
    .suggest { left: 16px; right: 16px; max-width: none; transform: none; }
    body.has-suggest .top { bottom: 84px; }
}
/* =============================================================== themes
   The page is dark unless <html> has the class "light" (set by THEME in
   build.py). Everything light lives below, so the dark page is untouched. */
.hero__mascot { display: none; }

.light {
    --ink: #f4f7fd;
    --text: #0b1533;
    --muted: #5a6788;
    --line: rgba(15, 23, 42, 0.09);
}
.light body { background: var(--ink); color: var(--text); }
.light .nav.is-solid { background: rgba(255,255,255,.82); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(15,23,42,.25); }
.light .brand b { background: linear-gradient(120deg, #12a6e8, #2f6bff); -webkit-background-clip: text; background-clip: text; }
.light .lang summary { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.light .lang summary:hover, .light .lang[open] summary { background: #f0f3fa; }
.light .lang__menu { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -16px rgba(15,23,42,.3); }
.light .lang__menu a { color: #33415f; }
.light .lang__menu a:hover { background: #f0f3fa; color: var(--text); }
.light .lang__menu a[aria-current] { background: rgba(47,107,255,.1); color: #1d3fd6; }
.light .menu > summary { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.light .menu > summary:hover, .light .menu[open] > summary { background: #f0f3fa; }
.light .menu__panel { background: rgba(255,255,255,.97); box-shadow: inset 0 1px 0 var(--line), 0 30px 60px -22px rgba(15,23,42,.3); }
.light .menu__links a:hover { background: #f0f3fa; }
.light .menu__links a[aria-current="page"] { background: rgba(47,107,255,.1); color: #1d3fd6; }
.light .menu__panel h4 { color: #4a5677; }
.light .menu__lang a { background: #f0f3fa; color: #33415f; }
.light .menu__lang a[aria-current] { background: rgba(47,107,255,.1); color: #1d3fd6; }
.light .btn--ghost { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px rgba(15,23,42,.12), 0 6px 18px -12px rgba(15,23,42,.35); }
.light .btn--ghost:hover { background: #f0f3fa; }
/* The Bot Forge in a hero is the second product, not a second thought: filled
   like the first button, with the gradient running the other way so the two
   read as a pair rather than as one button twice. */
.btn.btn--forge, .light .btn.btn--forge { background: linear-gradient(120deg, #6d4aff, #2f6bff); color: #fff; box-shadow: 0 14px 34px -12px rgba(109,74,255,.75); }
.btn.btn--forge:hover, .light .btn.btn--forge:hover { background: linear-gradient(120deg, #7a59ff, #3d77ff); }
.light .cta .btn--ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.light .cta .btn--ghost:hover { background: rgba(255,255,255,.2); }
.light .cta h2 { color: #fff; }

/* Hero: bright, with the mascot floating on the right */
.light .hero::before { background: radial-gradient(55% 55% at 78% 45%, rgba(47,107,255,.16), transparent 70%), radial-gradient(40% 45% at 12% 15%, rgba(109,74,255,.10), transparent 70%), radial-gradient(35% 35% at 90% 90%, rgba(91,225,255,.14), transparent 70%); }
.light .hero::before { -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); }
.light .hero__art { display: none; }
.light h1 .shine { background-image: linear-gradient(100deg, #2f6bff 0%, #6d4aff 45%, #c936b0 75%, #2f6bff 100%); }
.light .lead { color: #3d4a6b; }
.light .trust { color: #4a5677; text-shadow: none; }
.light .trust svg { color: #2f6bff; }
.light .scroll-cue { box-shadow: inset 0 0 0 1.5px rgba(15,23,42,.25); }
.light .scroll-cue::after { background: var(--text); }

.light .hero__mascot { position: absolute; z-index: -1; display: block; right: max(2vw, calc((100vw - 1280px) / 2)); top: 50%; width: min(40vw, 540px); aspect-ratio: 1; translate: 0 -48%; animation: fadeUp 1.1s cubic-bezier(.2,.8,.1,1) both .2s; }
.mascot__img { position: absolute; inset: 8% 10% 12%; width: 80%; height: auto; margin: auto; filter: drop-shadow(0 30px 40px rgba(47,107,255,.28)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
.mascot__halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(91,225,255,.45) 0%, rgba(47,107,255,.22) 40%, transparent 68%); transition: transform .6s ease, opacity .6s ease; }
.mascot__halo.is-on { animation: pulse .7s ease-out; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.06); opacity: .85; } 100% { transform: scale(1); opacity: 1; } }
.mascot__ring { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px dashed rgba(47,107,255,.28); animation: spin 40s linear infinite; }
.mascot__ring::after { content: ''; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px rgba(109,74,255,.7); }
@keyframes spin { to { transform: rotate(360deg); } }
.mascot__shadow { position: absolute; left: 30%; right: 30%; bottom: 7%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,23,42,.22), transparent); animation: shade 6s ease-in-out infinite; }
@keyframes shade { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .7; } }
.mchip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 16px 36px -16px rgba(15,23,42,.35), inset 0 0 0 1px rgba(15,23,42,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; color: #26324f; white-space: nowrap; animation: fadeUp .8s both, bob 7s ease-in-out infinite; }
.hero__mascot:not(.ready) .mchip { visibility: hidden; }

/* Which chips circle the mascot: data-chips="live" (the readouts), or one of
   the highlight sets a, b, c. ?chips=a|b|c|live in the address previews one. */
.mset { display: none; }
.hero__mascot[data-chips="a"] .mset--a, .hero__mascot[data-chips="b"] .mset--b, .hero__mascot[data-chips="c"] .mset--c { display: block; }
.hero__mascot:not([data-chips="live"]) .mchip { display: none; }
.hc { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 18px 40px -18px rgba(15,23,42,.4), inset 0 0 0 1px rgba(15,23,42,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #0b1533; white-space: nowrap; animation: fadeUp .8s both, bob 7s ease-in-out infinite; }
.hc b { display: block; font-family: var(--display); font-size: 14px; font-weight: 700; }
.hc small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: #5a6788; }
.hc__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(109,74,255,.8); }
.hc__ic svg { width: 19px; height: 19px; }
.hc__ic--ok { width: 28px; height: 28px; border-radius: 50%; background: #dcfce7; color: #059669; box-shadow: none; }
.mset--c .hc { padding: 9px 14px 9px 9px; }
.hc--1 { top: 8%; left: 0%; animation-delay: .7s, .4s; }
.hc--2 { top: 44%; right: -2%; animation-delay: .9s, 1.6s; }
.hc--3 { bottom: 8%; left: 2%; animation-delay: 1.1s, 2.4s; }

.mini-sig { gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 800; }
.mini-sig em { font-style: normal; padding: 3px 8px; border-radius: 8px; background: #eef2f7; color: #475569; }
.mini-sig em.conf { background: #dcfce7; color: #047857; }
.mini-sig .up { font-size: 13px; color: #059669; }
.mini-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.mini-ring circle { fill: none; stroke: #e2e8f0; stroke-width: 4; }
.mini-ring circle.fg { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 27.3; }
.mini-bars { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.bars i { width: 8px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #7c9bff, #4f6ef7); }
.bars i.hot { background: linear-gradient(180deg, #34d399, #059669); }
.bars i.cold { background: linear-gradient(180deg, #fb7185, #e11d48); }
.mini-blocks { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; }
.blks { display: grid; gap: 4px; }
.blks i { display: block; width: 78px; height: 9px; border-radius: 4px; background: linear-gradient(90deg, #6d4aff, #5436e0); }
.blks i:nth-child(2) { width: 64px; margin-left: 10px; background: linear-gradient(90deg, #2f6bff, #1f55e0); }
.blks i:nth-child(3) { width: 70px; margin-left: 10px; background: linear-gradient(90deg, #0ea5b7, #0b8595); }
.mchip small { font-size: 11.5px; font-weight: 700; color: #5a6788; }
.mchip b { font-family: var(--display); font-weight: 800; color: #0b1533; font-variant-numeric: tabular-nums; }
.mchip--digit { flex-direction: column; gap: 0; padding: 10px 16px; }
.mchip--digit b { display: block; font-size: 30px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mchip--digit b.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.5) translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.mchip--spark canvas { width: 112px; height: 34px; }
.mchip--spark b { font-size: 15px; }
.mchip--even b { font-size: 16px; }
.mbar { width: 56px; height: 6px; border-radius: 6px; background: rgba(168,85,247,.25); overflow: hidden; }
.mbar i { display: block; height: 100%; width: 50%; border-radius: 6px; background: #3b82f6; transition: width .6s ease; }
.mchip--a { top: 14%; left: 4%; animation-delay: .8s, 1.2s; }
.mchip--b { top: 48%; right: -6%; animation-delay: 1s, 2s; }
.mchip--c { bottom: 12%; left: 2%; animation-delay: 1.2s, 0s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Sections */
.light .kicker { color: #2563eb; }
.light .head p, .light .tool p, .light .proof__row p, .light .path__step p, .light .grow__text p, .light .faq details p { color: #4a5677; }
.light .tool__tag { color: #33415f; }
.light .checks li { color: #26324f; }
.light .checks svg { color: #2f6bff; }
.light .tool__link, .light .grow__tour { color: #2f6bff; }
.light .stage { background: linear-gradient(160deg, #e8eeff, #f2ebff); box-shadow: inset 0 0 0 1px rgba(47,107,255,.12), 0 40px 80px -50px rgba(47,107,255,.6); }
.light .stage::before { background: radial-gradient(circle, rgba(109,74,255,.18), transparent 65%); }
.light .ui { box-shadow: 0 20px 50px -24px rgba(15,23,42,.35); }
.light .why { background: linear-gradient(180deg, transparent, #eaf0fc 18%, #eaf0fc 82%, transparent); }
.light .rchip { background: #fff; color: #1e2a47; box-shadow: inset 0 0 0 1px var(--line); }
.light .rchip b { color: var(--muted); }
.light .rchip--up b { color: #059669; }
.light .rchip--weak { background: #fff4df; color: #92400e; box-shadow: inset 0 0 0 1px rgba(245,158,11,.3); }
.light .rchip--weak b { color: #b45309; }
.light .node { background: #fff; color: #26324f; box-shadow: inset 0 0 0 1px var(--line); }
.light .node--deriv { background: #ffe4e6; color: #be123c; box-shadow: none; }
.light .wire { background: rgba(15,23,42,.12); }
.light .wire::after { background: linear-gradient(90deg, transparent, #2f6bff, transparent); }
.light .perm svg { stroke: #2f6bff; }
.light .lim__track { background: rgba(15,23,42,.08); }
.light .lim__mark { background: var(--text); }
.light .stopped { background: #ffe4e6; color: #be123c; }
.light .seg { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.light .seg i { background: rgba(15,23,42,.08); }
/* Once it has slid across, the pill is the brand gradient here too: the label
   on it turns white, and white on the resting grey cannot be read. */
.light .in .seg i { background: var(--grad); }
.light .seg span { color: #26324f; transition: color .3s ease; }
.light .in .seg span:last-child { color: #fff; transition-delay: .9s; }
.light .in .seg--late span:last-child { transition-delay: 1.6s; }
.light .path::before { background: rgba(15,23,42,.1); }
.light .path__dot { background: #fff; box-shadow: inset 0 0 0 2px rgba(15,23,42,.14); }
.light .tip { box-shadow: 0 16px 40px -18px rgba(15,23,42,.45), inset 0 0 0 1px var(--line); }
.light .tip::before { box-shadow: -1px -1px 0 rgba(15,23,42,.06); }
.light .grow:hover { background: linear-gradient(90deg, rgba(47,107,255,.06), transparent 75%); }
.light .grow__ic { background: rgba(109,74,255,.1); color: #6d4aff; }
.light .ticks i { background: rgba(15,23,42,.12); }
.light .faq details { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -24px rgba(15,23,42,.4); }
.light .faq details[open] { background: #fff; }
.light .faq details[open] summary svg { color: #2f6bff; }
.light footer { background: #eaf0fa; }
.light .suggest { background: #fff; color: #26324f; box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -18px rgba(15,23,42,.4); }
.light .suggest button.x:hover { background: #f0f3fa; }
.light .soon { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -30px rgba(15,23,42,.4); }
.light .soon p, .light .page__lead { color: #4a5677; }

@media (max-width: 1024px) {
    .light .hero__mascot { position: relative; right: auto; top: auto; width: min(82vw, 440px); margin: 36px auto 10px; translate: none; }
}
@media (max-width: 1024px) {
    /* Narrow screens read top to bottom: the mascot, headline, description,
       the two buttons side by side, then the four Deriv points in a 2 by 2
       grid. The text block's children join the hero's own column so the
       mascot can sit between them. */
    .light .hero { display: flex; flex-direction: column; }
    .light .hero__in { display: contents; }
    .light .hero__in > * { margin-inline: var(--gutter); }
    .light .hero__mascot { order: 1; margin: -6px auto 4px !important; width: min(64vw, 300px); }
    .light #hero-title { order: 2; }
    .light .lead { order: 3; }
    .light .hero__mascot .mset, .light .hero__mascot .mchip { display: none !important; }
    .light .hero__cta { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .light .hero__cta .btn { height: auto; min-height: 52px; padding: 10px 12px; font-size: 14.5px; white-space: normal; text-align: center; line-height: 1.25; }
    .light .hero__cta .btn svg { display: none; }
    .light .trust { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 24px; margin-bottom: 8px; }
    .light .trust li { align-items: flex-start; font-size: 13.5px; line-height: 1.35; }
    .light .trust svg { margin-top: 1px; }

    /* Under the mascot on narrow screens: a tidy 2 by 2 grid, not a cloud. */
    .light .hero__mascot:not([data-chips="live"]) { margin-bottom: 170px; }
    .mset { position: absolute; top: 100%; left: -6%; right: -6%; }
    .hero__mascot[data-chips="a"] .mset--a, .hero__mascot[data-chips="b"] .mset--b, .hero__mascot[data-chips="c"] .mset--c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hc { position: relative; inset: auto; min-width: 0; white-space: normal; }
    .hc > span { min-width: 0; }
    .mset .hc:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 520px) {
    .hc { gap: 8px; padding: 9px 10px 9px 9px; }
    .hc b { font-size: 13px; }
    .hc small { font-size: 11px; }
    .hc__ic { width: 30px; height: 30px; border-radius: 9px; }
    .mchip { font-size: 12px; padding: 7px 11px; }
    .mchip--a { left: -2%; }
    .mchip--b { right: -2%; }
}

/* Sinhala: Noto Sans Sinhala for the script, open spacing for its marks. */
html[lang="si"] { --display: 'Noto Sans Sinhala', 'Sora', system-ui, sans-serif; --body: 'Noto Sans Sinhala', 'Manrope', system-ui, sans-serif; }
html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3 { letter-spacing: 0; }
html[lang="si"] h1 { line-height: 1.3; }

/* ================================================================ RTL
   Arabic reads right to left. The layout mirrors: the words sit on the
   right, the mascot on the left, bars fill from the right and arrows point
   the other way. Latin names inside Arabic text keep their own direction. */
[dir="rtl"] { --display: 'IBM Plex Sans Arabic', 'Sora', system-ui, sans-serif; --body: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .tool h3 { letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.25; }
[dir="rtl"] .nav__links { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .nav__cta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] svg:has(use[href="#i-arrow"]) { transform: scaleX(-1); }
[dir="rtl"] .tool__link:hover svg, [dir="rtl"] .grow__tour:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .top { right: auto; left: 20px; }
html[dir="rtl"] .hero__mascot { right: auto; left: max(2vw, calc((100vw - 1280px) / 2)); }
[dir="rtl"] .ui__sub { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ui__head .chip--conf { margin-left: 0 !important; margin-right: auto; }
[dir="rtl"] .run { margin-left: 0; margin-right: auto; }
[dir="rtl"] .readings em, [dir="rtl"] .guide__meta { text-align: left; }
[dir="rtl"] .meter i { inset: 0 0 0 auto; }
[dir="rtl"] .lim__fill { inset: 0 0 0 auto; }
[dir="rtl"] .lim__mark { left: auto; right: 78%; }
[dir="rtl"] .seg i { left: auto; right: 4px; transition-property: right, background; }
[dir="rtl"] .in .seg i { right: 50%; left: auto; }
[dir="rtl"] .path::before, [dir="rtl"] .path::after { left: calc((100% - 2 * var(--g)) / 3 - 23px); right: 23px; }
[dir="rtl"] .path::after { transform-origin: right; }
[dir="rtl"] .tip::before { left: auto; right: 22px; }
[dir="rtl"] .blk--2, [dir="rtl"] .blk--3 { margin-left: 0; margin-right: 16px; }
[dir="rtl"] .blks i:nth-child(n+2) { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .foot__brand { padding-right: 0; padding-left: 32px; }
[dir="rtl"] .foot__brand::after { right: auto; left: 0; }
[dir="rtl"] .mchip--a, [dir="rtl"] .hc--1 { left: auto; right: 0%; }
[dir="rtl"] .hc--2 { right: auto; left: -2%; }
[dir="rtl"] .hc--3 { left: auto; right: -2%; }
[dir="rtl"] .mchip--b { right: auto; left: -6%; }
[dir="rtl"] .mchip--c { left: auto; right: 2%; }
@media (max-width: 1024px) {
    html[dir="rtl"] .hero__mascot { left: auto; }
}
@media (max-width: 860px) {
    [dir="rtl"] .path::before, [dir="rtl"] .path::after { left: auto; right: 22px; }
    [dir="rtl"] .path__step { padding-left: 0; padding-right: 70px; }
    [dir="rtl"] .path__dot { left: auto; right: 0; }
    [dir="rtl"] .foot__brand { padding-left: 0; }
}
/* The smallest phones: the header keeps the logo mark, and the closing
   buttons shrink rather than push the page wider than the screen. */
@media (max-width: 400px) {
    .nav .brand span { display: none; }
    .nav__cta .btn--sm { padding: 0 12px; font-size: 13px; }
    .lang summary { padding: 0 8px; }
    .cta__main .cta__row .btn { min-width: 0; padding: 10px 4px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
    .flow { gap: 5px; grid-template-columns: auto minmax(8px, 1fr) auto minmax(8px, 1fr) auto; }
    .node { padding: 7px 8px; font-size: 12px; white-space: normal; text-align: center; }
    .perm { min-width: 0; }
    .lp__cta .btn { height: auto; min-height: 50px; padding: 10px 14px; white-space: normal; text-align: center; }
    .cta .cta__create { height: auto; min-height: 54px; padding: 10px 14px; white-space: normal; text-align: center; }
    /* Sinhala words run long: the three closing buttons take two rows. */
    html[lang="si"] .cta__main .cta__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[lang="si"] .cta__main .cta__row .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}