/* optionsjourney.com: near-black, a soft purple and green glow, thin borders. */

:root {
    --bg: #07070c;
    --surface: #11111a;
    --surface-2: #171722;
    --border: #2c2c3a;
    --border-soft: #1d1d28;
    --text: #e7e7f0;
    --text-muted: #8b8ba3;
    --text-dim: #6b6b80;
    --brand: #59b82c;       /* the logo's green */
    --violet: #6d28d9;
    --positive: #34d399;
    --negative: #f87171;
    --radius: 12px;
    --max: 1120px;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 var(--sans);
    overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.muted { color: var(--text-muted); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.7rem 1.2rem; border-radius: 999px;
    background: #fff; color: #0b0b12; font-weight: 600; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255, 255, 255, 0.12); }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: #4a4a5e; box-shadow: none; }
.btn--small { padding: 0.35rem 0.85rem; font-size: 0.875rem; }

/* Nav */
.nav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(7, 7, 12, 0.72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
.nav__inner {
    max-width: var(--max); margin: 0 auto; padding: 0.7rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: 1.25rem; font-size: 0.925rem; }
.nav__links a:not(.btn) { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--text); }

/* Footer */
.footer { border-top: 1px solid var(--border-soft); margin-top: 6rem; }
.footer__inner { max-width: var(--max); margin: 0 auto; padding: 2rem 1rem 3rem; font-size: 0.85rem; color: var(--text-muted); }
.footer__risk { margin: 0 0 0.75rem; max-width: 60rem; }
.footer__risk a { color: var(--text); }
.footer__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--text-dim); }
.footer__meta a { color: var(--text-muted); text-decoration: none; }
.footer__meta a:hover { color: var(--text); }

/* Guide pages */
.doc { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 0; }
.doc--center { text-align: center; padding-top: 6rem; }
.doc__risk {
    margin: 0 0 2rem; padding: 0.9rem 1.1rem; border-radius: var(--radius);
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 0.925rem; color: #f5e7c8;
}
.doc__risk a { color: #fff; }
.doc__body h1 { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 1rem; }
.doc__body h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 2.5rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); }
.doc__body h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.doc__body h2, .doc__body h3 { scroll-margin-top: 4.5rem; }
.doc__body p, .doc__body li { color: #cfcfdc; }
.doc__body li { margin: 0.35rem 0; }
.doc__body a { color: #b9a6f5; text-underline-offset: 2px; }
.doc__body strong { color: #fff; }
.doc__body em { color: var(--text-muted); }
.doc__body code {
    font: 0.875em var(--mono); background: var(--surface-2); border: 1px solid var(--border-soft);
    padding: 0.1em 0.35em; border-radius: 5px; overflow-wrap: anywhere;
}
.doc__body img {
    display: block; margin: 1rem 0; border-radius: 10px; border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.doc__body p > img + img { margin-top: 0.75rem; }
.doc__body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.925rem; margin: 1rem 0; }
.doc__body th, .doc__body td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.doc__body th { background: var(--surface); }

@media (max-width: 640px) {
    .nav__links { gap: 0.8rem; font-size: 0.85rem; }
    .nav__links a[href^="https://github.com"] { display: none; }
    .nav__links .btn--small { display: none; }  /* phones can't install it; Install stays as a link */
}
@media (max-width: 400px) {
    .nav__brand span { display: none; }
    .nav__links { gap: 0.7rem; font-size: 0.8rem; }
}

/* ---------- Home ---------- */
.pos { color: var(--positive); }
.neg { color: var(--negative); }
.pill, .eyebrow {
    display: inline-block; font-size: 0.8rem; color: #a5a5c0;
    border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.8rem;
    background: rgba(255, 255, 255, 0.02);
}
.eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

.hero { position: relative; text-align: center; padding: 5.5rem 1rem 2rem; max-width: var(--max); margin: 0 auto; }
.hero > *:not(.hero__glow) { position: relative; }
.hero__glow {
    position: absolute; inset: -6rem 0 auto; height: 38rem; pointer-events: none;
    background:
        radial-gradient(closest-side at 38% 40%, rgba(109, 40, 217, 0.38), transparent),
        radial-gradient(closest-side at 64% 58%, rgba(5, 150, 105, 0.26), transparent);
    filter: blur(10px);
}
.hero__title {
    margin: 1.25rem auto 0.85rem; padding-bottom: 0.12em; text-wrap: balance; font-size: clamp(2.6rem, 8vw, 4.75rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800;
    background: linear-gradient(180deg, #ffffff 30%, #9d9db8); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { margin: 0 auto 2rem; max-width: 34rem; font-size: 1.15rem; color: var(--text-muted); }
.hero__cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.window {
    max-width: 52rem; margin: 4rem auto 0; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    transform: perspective(1400px) rotateX(14deg); transform-origin: 50% 0;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03), 0 -1px 0 rgba(255, 255, 255, 0.06) inset;
}
.window__bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-soft); }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.window__bar span { margin-left: 0.6rem; font-size: 0.8rem; color: var(--text-dim); }
.window__scroll { overflow-x: auto; }
.trades { width: 100%; border-collapse: collapse; font-size: 0.95rem; white-space: nowrap; }
.trades th { text-align: left; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding: 0.8rem 1.1rem 0.5rem; }
.trades td { padding: 0.8rem 1.1rem; border-top: 1px solid var(--border-soft); color: #c8c8d8; font-variant-numeric: tabular-nums; }
.trades td:last-child, .trades th:last-child { text-align: right; }
.tag { font-size: 0.7rem; color: #c4b5fd; border: 1px solid rgba(196, 181, 253, 0.35); border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.35rem; }

.features { max-width: var(--max); margin: 6rem auto 0; padding: 0 1rem; display: grid; gap: 7rem; }
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center; }
.feature--flip .feature__text { order: 2; }
.feature__text h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); line-height: 1.1; letter-spacing: -0.03em; margin: 0.9rem 0 0.8rem; }
.feature__text p { color: var(--text-muted); font-size: 1.05rem; margin: 0; max-width: 30rem; }

.panel {
    position: relative; min-height: 16rem; border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(180deg, var(--surface), #0c0c14); border: 1px solid var(--border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.panel--pad { padding: 1.4rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }

/* Panel: target and stop */
.chart { position: absolute; inset: 1.5rem 0; width: 100%; height: calc(100% - 3rem); overflow: visible; }
.chart__pt, .chart__sl { stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.chart__pt { stroke: var(--positive); }
.chart__sl { stroke: var(--negative); }
.chart__path { fill: none; stroke: #e7e7f0; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__dot {
    position: absolute; left: 96%; top: calc(1.5rem + (100% - 3rem) * 0.17); width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.18), 0 0 24px var(--positive);
}
.chart__label { position: absolute; left: 1rem; font: 600 0.72rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.chart__label--pt { top: 0.55rem; color: var(--positive); }
.chart__label--sl { bottom: 0.55rem; color: var(--negative); }
.chart__badge {
    position: absolute; right: 1rem; top: 3.2rem; font: 700 0.75rem var(--mono); color: #04130d;
    background: var(--positive); padding: 0.3rem 0.6rem; border-radius: 6px;
}

/* Panel: bot */
.bot { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.bot__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border-soft); }
.bot__head strong { display: block; }
.bot__head .muted { font-size: 0.85rem; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; font-size: 0.8rem; flex-shrink: 0; }
.seg span { padding: 0.2rem 0.7rem; border-radius: 999px; color: var(--text-dim); }
.seg .seg__on { background: #2b2350; color: #ddd6fe; }
.bot__rows { padding: 0.4rem 1rem; }
.bot__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; font-size: 0.9rem; }
.bot__rows div + div { border-top: 1px solid var(--border-soft); }
.stopall {
    align-self: flex-start; font-size: 0.85rem; font-weight: 600; color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.1); border-radius: 8px; padding: 0.45rem 0.9rem;
}

/* Panel: journal */
.journal { list-style: none; margin: 0; padding: 0; }
.journal li { display: grid; grid-template-columns: 3.5rem 1fr auto 4rem; align-items: center; gap: 0.75rem; padding: 0.75rem 0.25rem; font-size: 0.92rem; }
.journal li + li { border-top: 1px solid var(--border-soft); }
.journal__date { color: var(--text-dim); font-size: 0.8rem; }
.journal li > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chip { font-size: 0.72rem; color: #c4b5fd; background: rgba(139, 92, 246, 0.12); border-radius: 999px; padding: 0.15rem 0.55rem; }

/* Panel: metrics */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.tiles div { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.8rem; }
.tiles span { display: block; font-size: 0.75rem; }
.tiles strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.bars { display: grid; gap: 0.7rem; }
.bars div { display: grid; grid-template-columns: 6.5rem 1fr 4rem; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.bars i { display: block; height: 8px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #059669, var(--positive)); }
.bars i.bar--neg { background: linear-gradient(90deg, #b91c1c, var(--negative)); }
.bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Panel: charts, in the app's chart-grid colours */
.cg { background: #07090d; display: flex; flex-direction: column; font-size: 0.72rem; color: #c9d1dc; }
.cg__bar { display: flex; align-items: center; gap: 2px; padding: 0 0.4rem 0 0; background: #0a0d12; border-bottom: 1px solid #1a1f29; }
.cg__tab { padding: 0.45rem 0.75rem; color: #7d8696; border-top: 2px solid transparent; }
.cg__tab--on { color: #eef2f7; border-top-color: #3ee0a4; background: #07090d; }
.cg__btn { padding: 0.15rem 0.55rem; border: 1px solid #22c39a; border-radius: 5px; color: #3ee0a4; background: rgba(34, 195, 154, 0.12); }
.cg__btn--watch { margin-left: auto; }
.cg__body { flex: 1; display: grid; grid-template-columns: 1fr 9.5rem; grid-template-rows: auto 1fr; }
.cg__grid { grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #1a1f29; }
.cg__pane { background: #0b0e14; display: flex; flex-direction: column; min-width: 0; }
.cg__head { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.35rem 0.5rem; font-family: var(--mono); white-space: nowrap; }
.cg__head strong { color: #eef2f7; }
.cg__tf { color: #7d8696; }
.cg__px { margin-left: auto; }
.cg__px small { font-size: 0.85em; }
.cg__pane svg { flex: 1; width: 100%; min-height: 5.5rem; padding: 0.15rem 0.5rem 0.5rem; }
.cg__up { fill: #22c39a; stroke: #22c39a; }
.cg__dn { fill: #f2545b; stroke: #f2545b; }
.cg__pane path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.cg__pane rect { stroke: none; }
.cg__last { stroke: #f5b544; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.cg__ema { fill: none; stroke: #6aa8ff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cg__watch { list-style: none; margin: 0; padding: 0; border-left: 1px solid #1a1f29; background: #0a0d12; font-family: var(--mono); }
.cg__news { border-left: 1px solid #1a1f29; border-top: 1px solid #262d3a; background: #0a0d12; }
.cg__news .cg__watch-head { display: flex; justify-content: space-between; padding: 0.42rem 0.6rem; }
.cg__news p { margin: 0; padding: 0.4rem 0.6rem; border-top: 1px solid #1a1f29; line-height: 1.35; color: #eef2f7; }
.cg__news small { display: block; margin-top: 0.15rem; color: #7d8696; font-size: 0.62rem; }
.cg__watch li { display: flex; justify-content: space-between; padding: 0.42rem 0.6rem; border-bottom: 1px solid #1a1f29; }
.cg__watch b { color: #eef2f7; }
.cg__watch-head { font: 600 0.68rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #eef2f7; }
.cg__watch-head i { font-style: normal; text-transform: none; letter-spacing: 0; color: #3ee0a4; }

/* Panel: risk graph, in the app's colours */
.rg { background: #111827; display: flex; flex-direction: column; font-size: 0.78rem; color: #e5e7eb; }
.rg__head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.6rem; border-bottom: 1px solid #374151; }
.rg__head strong { display: block; font-size: 0.95rem; color: #f9fafb; }
.rg__head span { color: #9ca3af; }
.rg__pl { text-align: right; }
.rg__pl b { display: block; font: 600 0.95rem var(--mono); }
.rg__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.6rem 1rem; color: #9ca3af; }
.rg__key::before { content: ""; display: inline-block; width: 1.3rem; margin-right: 0.35rem; vertical-align: middle; border-top: 2px solid #22c55e; }
.rg__key--theo::before { border-top: 2px dashed #f97316; }
.rg__slider { display: inline-flex; align-items: center; gap: 0.4rem; }
.rg__slider i { position: relative; display: block; width: 4.5rem; height: 4px; border-radius: 999px; background: #e5e7eb; }
.rg__slider i::after { content: ""; position: absolute; left: var(--at); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #2563eb; }
.rg__plot { position: relative; flex: 1; min-height: 10rem; margin: 0 1rem; background: #18181b; }
.rg__plot svg { position: absolute; inset: 0.6rem 0 1.2rem; width: 100%; height: calc(100% - 1.8rem); overflow: visible; }
.rg__sigma { fill: rgba(255, 255, 255, 0.05); }
.rg__fill-up { fill: rgba(34, 197, 94, 0.14); }
.rg__fill-dn { fill: rgba(239, 68, 68, 0.1); }
.rg__zero { stroke: #4b5563; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg__now { stroke: #f5b544; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rg__exp { fill: none; stroke: #22c55e; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rg__theo { fill: none; stroke: #f97316; stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.rg__price {
    position: absolute; bottom: 0.15rem; transform: translateX(-50%);
    font: 600 0.68rem var(--mono); color: #111827; background: #f5b544; padding: 0 0.3rem; border-radius: 3px;
}
.rg__stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.7rem 1rem 0.9rem; text-align: center; }
.rg__stats span { display: block; color: #9ca3af; font-size: 0.72rem; }
.rg__stats b { font: 600 0.85rem var(--mono); }

/* Panel: metrics, cumulative P/L */
.cum { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; font-size: 0.85rem; }
.cum b { font-variant-numeric: tabular-nums; }
.cum svg { grid-column: 1 / -1; width: 100%; height: 3.5rem; }
.cum polyline { fill: none; stroke: var(--positive); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Panel: devices */
.panel--devices { flex-direction: row; align-items: flex-end; justify-content: center; gap: 1.5rem; }
.laptop { width: 62%; }
.laptop__screen {
    aspect-ratio: 16 / 10; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0;
    background: radial-gradient(circle at 50% 40%, #1d1636, #0b0b13); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
}
.laptop__screen span { font-size: 0.8rem; color: var(--positive); }
.laptop__base { height: 10px; margin: 0 -8%; border-radius: 0 0 10px 10px; background: #2a2a38; }
.phone {
    width: 28%; min-width: 8rem; aspect-ratio: 9 / 18; border: 1px solid var(--border); border-radius: 22px; padding: 2.2rem 0.45rem 0.5rem;
    background: linear-gradient(180deg, #2a3348, #0f172a);
}
.phone__note { background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 0.5rem 0.6rem; font-size: 0.72rem; line-height: 1.35; color: #e5e7eb; }
.phone__note strong { display: block; font-size: 0.7rem; margin-bottom: 0.1rem; }

/* Brokers and Get it */
.allfeatures { text-align: center; margin: 5rem 0 0; }
.brokers, .getit { max-width: 46rem; margin: 8rem auto 0; padding: 0 1rem; text-align: center; }
.brokers h2, .getit h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); letter-spacing: -0.03em; margin: 0 0 0.75rem; }
.brokers__names { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.brokers__names span {
    font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; padding: 0.9rem 1.6rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.steps { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
.steps li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.steps li .muted { font-size: 0.9rem; }
.steps__n {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.5rem;
    font-size: 0.85rem; font-weight: 700; background: rgba(89, 184, 44, 0.15); color: #9be07a;
}

@media (max-width: 860px) {
    .feature { grid-template-columns: 1fr; gap: 1.75rem; }
    .feature--flip .feature__text { order: 0; }
    .features { gap: 5rem; margin-top: 4rem; }
    .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hero { padding-top: 3.5rem; }
    .window { transform: none; margin-top: 2.5rem; }
    .trades { font-size: 0.8rem; }
    .trades td, .trades th { padding-left: 0.4rem; padding-right: 0.4rem; }
    .trades th { font-size: 0.65rem; }
    .trades .tag { display: none; }
    .journal li { grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; }
    .journal__date { grid-column: 1 / -1; }
    .journal .chip { display: none; }
    .bars div { grid-template-columns: 5.5rem 1fr 3.75rem; }
    .cg__body { grid-template-columns: 1fr; }
    .cg__watch, .cg__news, .cg__btn--news { display: none; }
    .cg__grid { grid-row: auto; }
    .cg__px small { display: none; }
    .rg__stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .brokers, .getit { margin-top: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
}