/* ==========================================================================
   NexTrader — landing system, 2026
   Light fintech surface. One stylesheet owns the marketing site; the legacy
   template sheet is no longer loaded.
   ========================================================================== */

:root {
    /* Surfaces — page ground to most elevated */
    --bg: #ffffff;
    --bg-tint: #f4f8fe;
    --bg-tint-2: #eaf2fd;
    --surface: #ffffff;
    --surface-2: #f7fafe;
    --line: rgba(12, 26, 51, .1);
    --line-2: rgba(12, 26, 51, .16);

    /* Ink */
    --ink: #0b1a33;
    --ink-2: #4a5c78;
    --ink-3: #7b8ca7;

    /* Brand */
    --blue: #0092ff;
    --blue-deep: #0b6fd0;
    --blue-ink: #0a5fb4;
    --cyan: #06b6d4;
    --green: #12a150;
    --gold: #d99413;
    --gold-ink: #a06b06;
    --purple: #7c4ddb;
    --red: #e0483d;

    --grad-blue: linear-gradient(135deg, #0092ff 0%, #06b6d4 100%);
    --grad-gold: linear-gradient(135deg, #f0a91f 0%, #d07d0a 100%);
    --grad-deep: linear-gradient(150deg, #0b1a33 0%, #123a6b 55%, #0a5fb4 100%);

    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-full: 999px;

    --shadow-xs: 0 1px 2px rgba(11, 26, 51, .06);
    --shadow-sm: 0 2px 8px rgba(11, 26, 51, .07);
    --shadow-md: 0 8px 26px rgba(11, 26, 51, .09);
    --shadow-mock:
        0 2px 4px rgba(11, 26, 51, .05),
        0 8px 20px rgba(11, 26, 51, .08),
        0 26px 56px rgba(11, 26, 51, .12),
        0 54px 110px rgba(10, 95, 180, .14);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --shell: 1200px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 90px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.68;
    letter-spacing: -0.003em;
    color: var(--ink-2);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* Width/height attributes are set on every image to reserve layout space and
   avoid CLS. Without this, any image whose width is constrained by CSS keeps
   its attribute height and stretches. */
img {
    height: auto;
}

picture {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Inter carries a lot of weight at 800; 700 with tighter tracking reads
   sharper and less shouty at display sizes. */
h1,
h2,
h3,
h4 {
    color: var(--ink);
    line-height: 1.16;
    letter-spacing: -0.028em;
    font-weight: 700;
}

h1 {
    letter-spacing: -0.034em;
}

::selection {
    background: rgba(0, 146, 255, .18);
    color: var(--ink);
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}

.shell-narrow {
    max-width: 820px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 22px;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
    left: 0;
}

:where(a, button, summary, input):focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------- ambience */

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
}

.aurora i:nth-child(1) {
    width: 640px;
    height: 640px;
    top: -260px;
    left: -160px;
    background: radial-gradient(circle, rgba(0, 146, 255, .2), transparent 68%);
}

.aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    top: 6%;
    right: -230px;
    background: radial-gradient(circle, rgba(6, 182, 212, .16), transparent 68%);
}

.aurora i:nth-child(3) {
    width: 720px;
    height: 720px;
    top: 48%;
    left: 42%;
    background: radial-gradient(circle, rgba(124, 77, 219, .1), transparent 70%);
}

/* Fine grid, keeps large flat areas from reading as empty paper */
.grid-veil {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(11, 26, 51, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 26, 51, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 52% at 50% 0%, #000 25%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 90% 52% at 50% 0%, #000 25%, transparent 76%);
}

main,
.site-header,
.site-footer {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s;
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 20px rgba(11, 26, 51, .05);
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 74px;
}

.brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.brand img {
    width: 132px;
    height: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 8px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    border-radius: var(--r-sm);
    transition: color .2s, background .2s;
}

.nav-link:hover {
    color: var(--ink);
    background: rgba(11, 26, 51, .05);
}

.nav-cta {
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    padding: 11px 10px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .28s var(--ease), opacity .2s;
}

.nav-toggle span + span {
    margin-top: 5px;
}

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

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

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

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    font-size: .93rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}

.btn i {
    font-size: .85em;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 1rem;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 146, 255, .3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 146, 255, .42);
}

.btn-gold {
    background: var(--grad-gold);
    color: #fff;
    box-shadow: 0 6px 20px rgba(217, 148, 19, .3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(217, 148, 19, .42);
}

.btn-ghost {
    background: #fff;
    border-color: var(--line-2);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

.btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue-ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-dark {
    background: var(--ink);
    color: #fff;
}

.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 26, 51, .28);
}

.btn-success {
    background: linear-gradient(135deg, #17b85c 0%, #0e8f45 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(18, 161, 80, .34);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 161, 80, .46);
}

.btn-xl {
    padding: 18px 40px;
    font-size: 1.05rem;
}

/* On the deep-gradient CTA panel */
.on-deep .btn-ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.on-deep .btn-ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
    color: #fff;
}

/* -------------------------------------------------------------------- chips */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 11px;
    margin-bottom: 22px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blue-ink);
    background: rgba(0, 146, 255, .09);
    border: 1px solid rgba(0, 146, 255, .22);
    border-radius: var(--r-full);
}

.eyebrow.gold {
    color: var(--gold-ink);
    background: rgba(217, 148, 19, .1);
    border-color: rgba(217, 148, 19, .26);
}

.eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: ping 2.2s var(--ease) infinite;
}

@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(0, 146, 255, .5); }
    70% { box-shadow: 0 0 0 9px rgba(0, 146, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 146, 255, 0); }
}

/* ---------------------------------------------------------- browser mockup */

.mock {
    position: relative;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(11, 26, 51, .1), rgba(11, 26, 51, .05));
    padding: 1px;
    box-shadow: var(--shadow-mock);
}

.mock::after {
    /* Coloured glow pooled under the frame */
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -30px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 146, 255, .3), transparent 70%);
    filter: blur(28px);
    z-index: -1;
}

.mock.gold::after {
    background: radial-gradient(ellipse, rgba(217, 148, 19, .28), transparent 70%);
}

.mock-inner {
    border-radius: calc(var(--r-lg) - 1px);
    overflow: hidden;
    background: #fff;
}

.mock-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #f7f9fc, #eef2f8);
    border-bottom: 1px solid rgba(11, 26, 51, .08);
}

.mock-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mock-dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
}

.mock-dots i:nth-child(1) { background: #ff5f57; }
.mock-dots i:nth-child(2) { background: #febc2e; }
.mock-dots i:nth-child(3) { background: #28c840; }

.mock-url {
    flex: 1;
    max-width: 320px;
    margin: 0 auto;
    padding: 5px 14px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    color: var(--ink-3);
    background: #fff;
    border: 1px solid rgba(11, 26, 51, .08);
    border-radius: var(--r-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-live {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--green);
}

.mock-live b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: blink 1.8s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.mock-inner picture {
    display: block;
}

.mock-inner img {
    width: 100%;
    height: auto;
}

/* Floating data chips laid over a mockup */
.chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
    border-radius: var(--r);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(11, 26, 51, .14);
    animation: float 5.5s ease-in-out infinite;
}

.chip i {
    font-size: 1rem;
}

.chip small {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: .02em;
}

.chip.pos i { color: var(--green); }
.chip.blue i { color: var(--blue); }
.chip.gold i { color: var(--gold); }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* -------------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding: 90px 0 70px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 52px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.35rem, 4.3vw, 3.4rem);
    margin-bottom: 20px;
    text-wrap: balance;
}

.hero h1 .grad {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}

.hero-lede {
    font-size: 1.05rem;
    line-height: 1.72;
    max-width: 55ch;
    margin-bottom: 30px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.hero-note {
    font-size: .85rem;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-note i {
    color: var(--green);
}

/* --- hero mascot ---------------------------------------------------------- */

.hero-bot {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 480px;
}

.hero-bot::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 4%;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 146, 255, .3), transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.hero-bot img {
    width: 100%;
    animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.hero-bot .chip.a {
    top: 14%;
    left: -12px;
    animation-delay: -1.4s;
}

.hero-bot .chip.b {
    bottom: 20%;
    right: -18px;
    animation-delay: -3.2s;
}

/* --------------------------------------------------------------- section hd */

.section {
    padding: 96px 0;
}

.section-head {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(1.95rem, 4vw, 2.85rem);
    margin-bottom: 16px;
    text-wrap: balance;
}

.section-head p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ------------------------------------------------------------ feature rows */

.feature {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 68px;
    align-items: center;
    padding: 60px 0;
}

.feature + .feature {
    border-top: 1px solid var(--line);
}

/* Flipped rows put the mockup first, so the wide column has to move with it. */
.feature.flip {
    grid-template-columns: 1.14fr 0.86fr;
}

.feature.flip .feature-copy {
    order: 2;
}

.feature-copy h3 {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    margin-bottom: 16px;
}

.feature-copy > p {
    font-size: 1.02rem;
    line-height: 1.72;
    margin-bottom: 26px;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 30px;
}

.feature-list li {
    position: relative;
    padding-left: 30px;
    font-size: .95rem;
    line-height: 1.6;
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(18, 161, 80, .12);
    border: 1px solid rgba(18, 161, 80, .34);
}

.feature-list li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: .72em;
    width: 5px;
    height: 9px;
    border: solid var(--green);
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}

.feature-list strong {
    color: var(--ink);
    font-weight: 700;
}

.feature-stage {
    position: relative;
}

.feature-stage .chip {
    right: -26px;
    bottom: -20px;
}

/* -------------------------------------------------------------- tinted band */

.band-light {
    background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- strategies */

.strat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.strat {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}

.strat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 146, 255, .4);
}

.strat-ico {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1rem;
    margin-bottom: 15px;
}

.strat h3 {
    font-size: 1.04rem;
    margin-bottom: 7px;
}

.strat p {
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Push the tag to the card floor so tags line up across a row regardless of
   how long each description runs. */
.strat .tag {
    margin-top: auto;
    align-self: flex-start;
}

.tag {
    display: inline-block;
    padding: 4px 11px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-2);
    background: rgba(11, 26, 51, .055);
    border-radius: var(--r-full);
}

.tag.green {
    color: #0f8544;
    background: rgba(18, 161, 80, .13);
}

.strat.featured {
    border-color: rgba(18, 161, 80, .45);
    box-shadow: 0 0 0 3px rgba(18, 161, 80, .07);
}

.note-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 34px;
    padding: 16px 22px;
    font-size: .9rem;
    text-align: center;
    background: rgba(0, 146, 255, .06);
    border: 1px solid rgba(0, 146, 255, .18);
    border-radius: var(--r);
}

.note-strip i {
    color: var(--blue);
}

.note-strip strong {
    color: var(--ink);
}

/* ------------------------------------------------------------------- steps */

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    list-style: none;
}

.step {
    position: relative;
    padding: 32px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 146, 255, .35);
}

.step b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    color: #fff;
    background: var(--grad-blue);
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(0, 146, 255, .3);
}

.step h3 {
    font-size: 1.12rem;
    margin-bottom: 10px;
}

.step p {
    font-size: .93rem;
    line-height: 1.68;
}

/* --------------------------------------------------------------- app promo */

/* The section sits inside a panel so the handset is anchored to something
   rather than floating in empty page. */
.app-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .74fr;
    gap: 48px;
    align-items: center;
    padding: 58px 56px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(ellipse 60% 90% at 88% 50%, rgba(0, 146, 255, .12), transparent 62%),
        linear-gradient(140deg, #f3f8ff 0%, #e7f0fc 100%);
    border: 1px solid var(--line);
    overflow: hidden;
}

.app-panel h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin-bottom: 15px;
}

.app-panel > div > p {
    font-size: 1.01rem;
    line-height: 1.72;
}

.app-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 215px));
    gap: 11px;
    margin: 26px 0 28px;
}

.app-badges div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
}

.app-badges i {
    color: var(--blue);
}

.app-get {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.play-btn img {
    width: 178px;
    height: auto;
}

.app-rating {
    font-size: .84rem;
    color: var(--ink-3);
}

.app-rating b {
    display: block;
    font-size: .94rem;
    color: var(--ink);
}

/* --- reusable handset ----------------------------------------------------- */

.phone-frame {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 286px;
    padding: 25px 9px 14px;
    border-radius: 44px;
    background: linear-gradient(165deg, #35435c 0%, #131c2c 48%, #0a111d 100%);
    box-shadow:
        0 0 0 1px rgba(11, 26, 51, .22),
        0 3px 6px rgba(11, 26, 51, .12),
        0 18px 38px rgba(11, 26, 51, .22),
        0 44px 84px rgba(10, 95, 180, .24);
}

.phone-frame::before {
    /* Earpiece slit, kept inside the bezel so it never covers the screenshot */
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 5px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .28);
    z-index: 3;
}

.phone-frame::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -22px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 146, 255, .3), transparent 70%);
    filter: blur(26px);
    z-index: -1;
}

.phone-screen {
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
}

.phone-screen img {
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------- FAQ */

.faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: border-color .25s, box-shadow .25s;
}

.faq details[open] {
    border-color: rgba(0, 146, 255, .34);
    box-shadow: var(--shadow-sm);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 24px;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.faq summary i {
    flex-shrink: 0;
    font-size: .78rem;
    color: var(--blue);
    transition: transform .28s var(--ease);
}

.faq details[open] summary i {
    transform: rotate(180deg);
}

.faq-body {
    padding: 0 24px 22px;
}

.faq-body p {
    font-size: .95rem;
    line-height: 1.75;
}

.faq-body a {
    color: var(--blue-ink);
    font-weight: 600;
}

.faq-body a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------- CTAs */

.cta-panel {
    position: relative;
    padding: 66px 44px;
    text-align: center;
    border-radius: var(--r-xl);
    background: var(--grad-deep);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 95, 180, .26);
}

.cta-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(6, 182, 212, .3), transparent 60%);
    pointer-events: none;
}

.cta-panel > * {
    position: relative;
}

.cta-panel h2 {
    color: #fff;
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    margin-bottom: 15px;
    text-wrap: balance;
}

.cta-panel p {
    max-width: 60ch;
    margin: 0 auto 30px;
    font-size: 1.03rem;
    color: rgba(255, 255, 255, .84);
}

.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- signup panel --------------------------------------------------------- */

.signup-panel {
    position: relative;
    padding: 64px 44px 56px;
    text-align: center;
    border-radius: var(--r-xl);
    background: var(--grad-deep);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 95, 180, .26);
}

.signup-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(6, 182, 212, .28), transparent 62%);
    pointer-events: none;
}

.signup-panel > * {
    position: relative;
}

.signup-panel h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 15px;
    text-wrap: balance;
}

.signup-panel > p {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .84);
}

.signup-perks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 38px;
    list-style: none;
    margin: 38px auto 36px;
}

.signup-perks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
}

.signup-perks i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    backdrop-filter: blur(6px);
}

/* The primary conversion on the page, so it gets a slow halo to pull the eye
   without resorting to a flashing element. */
.signup-cta {
    position: relative;
    isolation: isolate;
    font-size: 1.12rem;
    padding: 20px 46px;
}

.signup-cta::before {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: var(--r-full);
    background: rgba(23, 184, 92, .38);
    animation: halo 2.6s var(--ease) infinite;
}

@keyframes halo {
    0% { transform: scale(.96); opacity: .7; }
    70% { transform: scale(1.1); opacity: 0; }
    100% { transform: scale(1.1); opacity: 0; }
}

.signup-note {
    margin-top: 18px;
    font-size: .86rem;
    color: rgba(255, 255, 255, .72);
}

@media (prefers-reduced-motion: reduce) {
    .signup-cta::before {
        animation: none;
        opacity: .28;
        transform: none;
    }
}

/* --- trusted by ----------------------------------------------------------- */

.trusted {
    padding: 0 0 90px;
    text-align: center;
}

.trusted p {
    font-size: .95rem;
    color: var(--ink-3);
    margin-bottom: 22px;
}

.trusted p b {
    color: var(--blue);
    font-weight: 700;
}

.trusted-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 46px;
    flex-wrap: wrap;
}

.trusted-logos img {
    height: 34px;
    width: auto;
    opacity: .5;
    filter: grayscale(1);
    transition: opacity .25s var(--ease), filter .25s var(--ease);
}

.trusted-logos img:hover {
    opacity: 1;
    filter: none;
}

.split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    padding: 30px 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color .25s, box-shadow .25s;
}

.split:hover {
    border-color: rgba(0, 146, 255, .3);
    box-shadow: var(--shadow-sm);
}

.split h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.32rem;
    margin-bottom: 6px;
}

.split p {
    font-size: .94rem;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
    padding: 84px 0 34px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 100%);
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 44px;
}

.foot-brand img {
    width: 140px;
    height: auto;
    margin-bottom: 16px;
}

.foot-brand p {
    font-size: .89rem;
    line-height: 1.7;
    max-width: 320px;
    margin-bottom: 20px;
}

.socials {
    display: flex;
    gap: 10px;
}

.socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: color .2s, background .2s, transform .2s, border-color .2s;
}

.socials a:hover {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
    transform: translateY(-2px);
}

.foot-col h3 {
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-3);
    margin-bottom: 17px;
}

.foot-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.foot-col a {
    font-size: .9rem;
    color: var(--ink-2);
    transition: color .2s;
}

.foot-col a:hover {
    color: var(--blue-ink);
}

.risk {
    padding: 24px 26px;
    margin-bottom: 26px;
    background: rgba(224, 72, 61, .04);
    border: 1px solid rgba(224, 72, 61, .18);
    border-radius: var(--r);
}

.risk h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--red);
    margin-bottom: 12px;
}

.risk p {
    font-size: .8rem;
    line-height: 1.75;
    color: var(--ink-3);
}

.risk p + p {
    margin-top: 9px;
}

.foot-base {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.foot-base p {
    font-size: .84rem;
    color: var(--ink-3);
}

.foot-base a {
    color: var(--ink-2);
    font-weight: 600;
}

.foot-base a:hover {
    color: var(--blue-ink);
}

/* ------------------------------------------------------------- back to top */

.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--grad-blue);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    box-shadow: 0 8px 24px rgba(0, 146, 255, .4);
    transition: opacity .3s, visibility .3s, transform .3s var(--ease);
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ------------------------------------------------------------ article pages */

.article-head {
    padding: 60px 0 40px;
}

/* The hero shares the prose measure so the headline, lede and body text all
   start on the same left edge. */
.article-head > .shell {
    max-width: 820px;
}

.crumbs {
    font-size: .84rem;
    color: var(--ink-3);
    margin-bottom: 18px;
}

.crumbs a {
    color: var(--blue-ink);
    font-weight: 600;
}

.crumbs a:hover {
    text-decoration: underline;
}

.crumbs span {
    margin: 0 8px;
    opacity: .55;
}

.article-head h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.2rem);
    max-width: 22ch;
    margin-bottom: 20px;
    text-wrap: balance;
}

.article-lede {
    font-size: 1.12rem;
    line-height: 1.72;
    max-width: 68ch;
    margin-bottom: 28px;
}

.prose {
    padding-bottom: 90px;
}

.prose h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    margin: 54px 0 16px;
}

.prose h3 {
    font-size: 1.16rem;
    margin: 32px 0 11px;
}

.prose p {
    font-size: 1.01rem;
    line-height: 1.78;
    margin-bottom: 18px;
}

.prose ul,
.prose ol {
    margin: 0 0 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.prose li {
    font-size: 1.01rem;
    line-height: 1.72;
}

.prose li::marker {
    color: var(--blue);
    font-weight: 700;
}

/* Buttons are excluded: `.prose a` outranks `.btn-primary` on specificity, and
   without the guard the CTA button renders navy-on-blue. */
.prose a:not(.btn) {
    color: var(--blue-ink);
    font-weight: 600;
}

.prose a:not(.btn):hover {
    text-decoration: underline;
}

.prose strong {
    color: var(--ink);
}

.prose .mock {
    margin: 34px 0 44px;
}

.prose .faq {
    margin-top: 26px;
}

/* The FAQ list and the closing CTA are siblings with no margins of their own,
   so without this they butt straight up against each other. */
.prose .cta-panel {
    margin-top: 64px;
}

.callout {
    display: flex;
    gap: 15px;
    padding: 21px 24px;
    margin: 30px 0;
    background: rgba(0, 146, 255, .06);
    border: 1px solid rgba(0, 146, 255, .18);
    border-left: 3px solid var(--blue);
    border-radius: var(--r);
}

.callout.warn {
    background: rgba(217, 148, 19, .07);
    border-color: rgba(217, 148, 19, .24);
    border-left-color: var(--gold);
}

.callout.warn > i {
    color: var(--gold-ink);
}

.callout > i {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--blue);
    font-size: 1.05rem;
}

.callout p {
    margin: 0;
    font-size: .96rem;
}

.table-wrap {
    overflow-x: auto;
    margin: 26px 0 30px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
}

table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: #fff;
}

th,
td {
    padding: 14px 18px;
    text-align: left;
    font-size: .92rem;
    border-bottom: 1px solid var(--line);
}

th {
    font-weight: 700;
    color: var(--ink);
    background: rgba(0, 146, 255, .06);
    white-space: nowrap;
}

tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------------- reveal fx */

/* Progressive enhancement: content is visible by default. The `js-reveal`
   class is only set by the inline head script, so a JS failure can never
   leave the page blank below the fold. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.js-reveal [data-reveal].animate-in {
    opacity: 1;
    transform: none;
}

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

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .chip,
    .eyebrow .dot,
    .mock-live b {
        animation: none;
    }

    .aurora { display: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
    .feature,
    .feature.flip,
    .app-panel {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature.flip .feature-copy {
        order: 0;
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
        justify-items: center;
    }

    .hero-lede {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-note {
        justify-content: center;
    }

    .hero-bot {
        max-width: 420px;
        order: -1;
    }

    .app-panel {
        text-align: center;
        padding: 48px 34px;
    }

    .app-badges {
        grid-template-columns: repeat(2, minmax(0, 200px));
        justify-content: center;
    }

    .app-get {
        justify-content: center;
    }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
    }

    .site-header.menu-open {
        background: #fff;
        border-bottom-color: var(--line);
        box-shadow: var(--shadow-sm);
    }

    .nav-menu.active {
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 18px 24px 26px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 34px rgba(11, 26, 51, .1);
    }

    .nav-menu.active .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .nav-menu.active .nav-link {
        padding: 12px 14px;
        font-size: 1rem;
    }

    .nav-menu.active .nav-cta {
        margin-top: 10px;
    }

    .nav-menu.active .btn {
        width: 100%;
    }


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

    .split {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px 24px;
    }

    .split h2 {
        justify-content: center;
    }

    .split .btn {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .section {
        padding: 64px 0;
    }

    .hero {
        padding: 44px 0 66px;
    }

    .hero-grid {
        gap: 46px;
    }

    .feature {
        padding: 40px 0;
    }

    .chip {
        display: none;
    }

    /* Below this width a desktop screenshot is unreadable, so the frame
       becomes a handset and <picture> swaps in the mobile capture. */
    /* Same handset treatment as .phone-frame, so both read as one device. */
    .mock {
        max-width: 316px;
        margin-inline: auto;
        padding: 25px 9px 14px;
        border-radius: 44px;
        border: none;
        background: linear-gradient(165deg, #35435c 0%, #131c2c 48%, #0a111d 100%);
        box-shadow:
            0 0 0 1px rgba(11, 26, 51, .22),
            0 3px 6px rgba(11, 26, 51, .12),
            0 18px 38px rgba(11, 26, 51, .22),
            0 44px 84px rgba(10, 95, 180, .24);
    }

    .mock::before {
        /* Earpiece slit, inside the bezel so it never covers the screenshot */
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 58px;
        height: 5px;
        border-radius: var(--r-full);
        background: rgba(255, 255, 255, .28);
        z-index: 3;
    }

    .mock::after {
        bottom: -16px;
        height: 44px;
    }

    .mock-inner {
        border-radius: 34px;
    }

    .mock-bar {
        display: none;
    }

    .cta-panel {
        padding: 46px 22px;
    }

    .app-badges {
        grid-template-columns: 1fr 1fr;
    }

    .mock-url {
        max-width: none;
    }

    .prose h2 {
        margin-top: 40px;
    }
}

@media (max-width: 520px) {
    .shell {
        padding: 0 18px;
    }


    .foot-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .foot-brand p {
        margin-inline: auto;
    }

    .socials {
        justify-content: center;
    }

    .foot-col ul {
        align-items: center;
    }

    .foot-brand img {
        margin-inline: auto;
    }

    .app-badges {
        grid-template-columns: 1fr;
        max-width: 260px;
    }

    .hero-actions .btn,
    .cta-row .btn {
        width: 100%;
    }

    .mock-live {
        display: none;
    }
}

/* ==========================================================================
   Google Translate Override
   Ported verbatim from the original styles.css so the float switcher keeps
   its existing position and sizing. Do not restyle.
   ========================================================================== */

#gt_float_wrapper {
    bottom: 100px !important;
    right: 20px !important;
}

.gt_float_switcher {
    font-size: 13px !important;
}

#gt_float_wrapper {
	bottom: 1em !important;
	right: 10px !important;
}

.gt_float_switcher {
	font-size: 13px !important;
}

.gt_float_switcher img {
	width: 20px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
	padding: 3px 8px !important;
}

/* --- country pages -------------------------------------------------------- */

.flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 10px;
    margin-bottom: 20px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-xs);
}

.flag-chip .flag {
    font-size: 1.32rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(11, 26, 51, .2));
}

.locale-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 30px 0 34px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.locale-facts div {
    padding: 18px 20px;
    background: var(--surface);
}

.locale-facts dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 5px;
}

.locale-facts dd {
    font-size: .96rem;
    font-weight: 600;
    color: var(--ink);
}

/* --- affiliate programme --------------------------------------------------
   Shared by affiliate.html and the referral promo on the home page. The
   programme moved to its own app (affiliate.nextrader.live) in Aug 2026; these
   components mirror what that app shows, so the two never read as two
   different offers. */

/* Headline numbers. A dividing-line grid rather than separate cards — four
   floating boxes would compete with the step cards further down the page. */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.facts > div {
    padding: 26px 24px;
    background: var(--surface);
    text-align: center;
}

.facts b {
    display: block;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 6px;
}

.facts .grad-num {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.facts span {
    display: block;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Visible to screen readers, not on screen. Table captions and the like. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

code {
    padding: 2px 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .86em;
    color: var(--blue-ink);
    background: rgba(0, 146, 255, .08);
    border-radius: 6px;
    word-break: break-word;
}

/* Four-up steps. The base .steps is a hard 3 columns; the affiliate flow has
   four stages and a lone card on a second row reads as a mistake. */
.steps.four {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.steps.four .step {
    padding: 28px 22px;
}

/* .steps.four outranks the base `.steps { 1fr }` collapse on specificity
   whatever the source order, so it has to restate the phone case itself. */
@media (max-width: 1040px) {
    .steps.four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .steps.four {
        grid-template-columns: 1fr;
    }
}

/* --- earnings calculator --------------------------------------------------- */

.calc {
    display: grid;
    grid-template-columns: 1fr .68fr;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.calc-inputs {
    padding: 36px 38px;
}

.calc-row + .calc-row {
    margin-top: 26px;
}

.calc-row label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    font-size: .94rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-row .val {
    padding: 2px 10px;
    min-width: 62px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--blue-ink);
    background: rgba(0, 146, 255, .09);
    border-radius: var(--r-sm);
}

/* Range inputs are styled from scratch: the native control looks different in
   every browser, and the track is the one thing on this page a visitor is
   invited to grab. */
.calc-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--r-full);
    background: rgba(11, 26, 51, .1);
    outline: none;
    cursor: pointer;
}

.calc-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--blue);
    box-shadow: 0 3px 10px rgba(0, 146, 255, .4);
    cursor: grab;
    transition: transform .15s var(--ease);
}

.calc-row input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
    cursor: grabbing;
}

.calc-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--blue);
    box-shadow: 0 3px 10px rgba(0, 146, 255, .4);
    cursor: grab;
}

.calc-row input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: var(--r-full);
    background: rgba(11, 26, 51, .1);
}

.calc-note {
    margin-top: 26px;
    font-size: .82rem;
    line-height: 1.62;
    color: var(--ink-3);
}

.calc-out {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
    text-align: center;
    overflow: hidden;
    background: var(--grad-deep);
}

.calc-out::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(6, 182, 212, .32), transparent 62%);
    pointer-events: none;
}

.calc-out > * {
    position: relative;
}

.calc-out .lab {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* tabular-nums because the figure is re-rendered on every slider frame; without
   it the whole block twitches as digit widths change. */
.calc-out .big {
    margin: 8px 0 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(2.2rem, 4.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.calc-out .sm {
    font-size: .86rem;
    color: rgba(255, 255, 255, .7);
}

.calc-out hr {
    width: 100%;
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: rgba(255, 255, 255, .18);
}

.calc-out .yr {
    margin-top: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #62d6a0;
}

/* --- payout methods -------------------------------------------------------- */

.pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.pay {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
}

.pay-ico {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    font-size: 1rem;
    border-radius: 11px;
    color: var(--blue-ink);
    background: rgba(0, 146, 255, .1);
}

.pay h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.pay p {
    margin-bottom: 14px;
    font-size: .87rem;
    line-height: 1.6;
}

.pay .tag {
    margin-top: auto;
    align-self: flex-start;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.pay.soon {
    opacity: .62;
}

/* --- dashboard mock -------------------------------------------------------- */

/* Drawn rather than screenshotted: the dashboard sits behind a login, and a
   real capture would carry a real affiliate's figures. */
.dash {
    padding: 24px 26px 26px;
    background: linear-gradient(180deg, #fbfdff, #f4f8fe);
}

.dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.dash-lab {
    display: block;
    margin-bottom: 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dash-bal {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.dash-pill {
    flex-shrink: 0;
    padding: 6px 13px;
    font-size: .7rem;
    font-weight: 700;
    color: #0f8544;
    background: rgba(18, 161, 80, .12);
    border: 1px solid rgba(18, 161, 80, .25);
    border-radius: var(--r-full);
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.dash-kpis div {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.dash-kpis span {
    display: block;
    margin-bottom: 3px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dash-kpis b {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.02rem;
    color: var(--ink);
}

.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 74px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.dash-chart i {
    flex: 1;
    display: block;
    border-radius: 3px 3px 0 0;
    background: var(--grad-blue);
    opacity: .85;
}

.dash-chart i:last-child {
    opacity: 1;
    background: var(--green);
}

.dash-feed {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.dash-feed li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .8rem;
    color: var(--ink-2);
    background: #fff;
}

.dash-feed .who {
    font-weight: 600;
    color: var(--ink);
}

.dash-feed .sym {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .74rem;
    color: var(--ink-3);
}

.dash-feed em {
    margin-left: auto;
    font-style: normal;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--green);
}

/* --- home-page referral promo ---------------------------------------------- */

.aff-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
    padding: 38px 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(ellipse 62% 92% at 90% 45%, rgba(217, 148, 19, .14), transparent 62%),
        linear-gradient(140deg, #f3f8ff 0%, #e7f0fc 100%);
}

.aff-panel h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    margin-bottom: 12px;
    text-wrap: balance;
}

.aff-panel > div > p {
    max-width: 54ch;
    margin-bottom: 24px;
    font-size: .98rem;
    line-height: 1.68;
}

/* Compact earnings card. A flat "50%" carried the panel badly — a number with
   nothing behind it. This shows the same claim as something happening. */
.aff-mock {
    position: relative;
    width: 300px;
    max-width: 100%;
    padding: 22px 22px 18px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--grad-deep);
    box-shadow: 0 18px 44px rgba(10, 95, 180, .26);
}

.aff-mock::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 100% at 78% 0%, rgba(217, 148, 19, .26), transparent 60%);
    pointer-events: none;
}

.aff-mock > * {
    position: relative;
}

.aff-mock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.aff-mock-top .lab {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.aff-mock-top .share {
    padding: 4px 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #ffca6b;
    background: rgba(240, 169, 31, .16);
    border: 1px solid rgba(240, 169, 31, .34);
    border-radius: var(--r-full);
}

.aff-mock-bal {
    display: block;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.72rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

.aff-mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 52px;
    margin-bottom: 16px;
}

.aff-mock-chart i {
    flex: 1;
    display: block;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16));
}

.aff-mock-chart i:last-child {
    background: linear-gradient(180deg, #7ee2b0, #12a150);
    box-shadow: 0 0 14px rgba(98, 214, 160, .5);
}

.aff-mock-feed {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.aff-mock-feed li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    color: rgba(255, 255, 255, .62);
}

.aff-mock-feed em {
    font-style: normal;
    font-weight: 700;
    color: #7ee2b0;
}

/* --- affiliate responsive -------------------------------------------------- */

@media (max-width: 1040px) {
    .aff-panel {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .aff-mock {
        width: 100%;
        max-width: 340px;
    }

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

    .calc-out {
        padding: 32px;
    }
}

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

@media (max-width: 720px) {
    .calc-inputs {
        padding: 28px 22px;
    }

    .aff-panel {
        padding: 32px 22px;
    }

    /* The dashboard mock is drawn in HTML, not screenshotted, so it reflows on
       its own — it must not be forced into the 316px handset that the image
       mocks switch to at this width, which would crush it. */
    .mock.flat {
        max-width: none;
        padding: 1px;
        border: none;
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, rgba(11, 26, 51, .1), rgba(11, 26, 51, .05));
        box-shadow: var(--shadow-mock);
    }

    .mock.flat::before {
        display: none;
    }

    .mock.flat .mock-inner {
        border-radius: calc(var(--r-lg) - 1px);
    }

    .mock.flat .mock-bar {
        display: flex;
    }

    .dash {
        padding: 18px 16px 20px;
    }

    .dash-kpis {
        gap: 7px;
    }

    .dash-kpis div {
        padding: 10px;
    }

    .dash-kpis b {
        font-size: .88rem;
    }

    .dash-bal {
        font-size: 1.6rem;
    }

    .dash-feed .sym {
        display: none;
    }
}

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

/* --- deriv account banner -------------------------------------------------
   Sits under the hero CTA on the information pages: the Deriv partner mark
   plus the one action every reader needs before any of our tools work. Dark
   ground so the coral wordmark keeps its contrast and the strip reads as
   distinct from the page's own blue CTAs. */

.deriv-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 32px;
    padding: 20px 22px 20px 26px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse 60% 140% at 0% 50%, rgba(255, 68, 79, .2), transparent 62%),
        var(--grad-deep);
    box-shadow: 0 16px 40px rgba(10, 30, 70, .22);
}

.deriv-strip-brand {
    display: flex;
    align-items: center;
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, .16);
}

/* The asset carries its own "Powered by" line above the wordmark. */
.deriv-strip-brand img {
    width: 128px;
    height: auto;
}

.deriv-strip p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
}

.deriv-strip p strong {
    color: #fff;
}

.btn-coral {
    color: #fff;
    background: linear-gradient(135deg, #ff5a63 0%, #e8323d 100%);
    box-shadow: 0 8px 22px rgba(255, 68, 79, .38);
    white-space: nowrap;
}

.btn-coral:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 68, 79, .5);
}

@media (max-width: 720px) {
    .deriv-strip {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px;
        text-align: center;
    }

    .deriv-strip-brand {
        align-items: center;
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .deriv-strip .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Inside an article the strip breaks the reading flow on purpose; give it room
   on both sides so it reads as a pause, not as part of the next section. */
.prose .deriv-strip {
    margin: 44px 0 8px;
}

.prose .deriv-strip p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
}

.prose .deriv-strip strong {
    color: #fff;
}