/* AlgoBee landing v2 — layered on landing.css; everything is scoped under body.v2. */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

body.v2 {
  /* Blue-black base instead of pure black, so the brand red reads as the brand, not as an accent. */
  --bg: #0c0e12;
  --panel: #151920;
  --raised: #1b2029;
  --border: #262b35;
  --text: #eef0f3;
  --muted: #b4bcc7;
  --quiet: #8f99a6;
  --brand: #c0363f;
  --brand-hover: #d4434d;
  --long: #7fc7b2;
  --short: #ee9a9e;
  --display: "Schibsted Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  color: var(--text);
}

.v2 h1, .v2 h2, .v2 h3 { font-family: var(--display); letter-spacing: -0.02em; }
.v2 .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.v2 .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.v2 :focus-visible { outline: 2px solid #9fb4ff; outline-offset: 3px; }

/* ---------- Hero: thesis on the left, the leg ticket on the right ---------- */
.v2-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; padding: 88px 0 56px; }
.v2-hero .intro-label { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; color: var(--quiet); margin-bottom: 22px; }
.v2-hero h1 { font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: .94; font-weight: 700; letter-spacing: -0.045em; }
.v2-hero h1 span { display: block; color: var(--muted); }
.v2-hero .lead { margin-top: 28px; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.v2-hero .hero-actions { margin-top: 32px; }
/* Link to the free screener: the one live, real-data product a visitor can open right now. */
.hero-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--mono); font-size: .8125rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.hero-live:hover, .hero-live:focus-visible { color: var(--text); border-bottom-color: var(--long); }
.hero-live::after { content: "\2192"; color: var(--long); }
.hero-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--long); box-shadow: 0 0 0 0 color-mix(in srgb, var(--long) 60%, transparent); animation: hero-live-pulse 2.4s ease-out infinite; }
@keyframes hero-live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--long) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* Leg ticket: two legs fill in sequence; the net exposure needle swings and settles at zero. */
.leg-ticket { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--panel), #11141a); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; font-size: .875rem; }
.lt-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--quiet); font-family: var(--mono); font-size: .75rem; }
.lt-head strong { color: var(--text); font-family: var(--display); font-size: .9375rem; letter-spacing: 0; }
.lt-state { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; transition: color .3s, border-color .3s; }
.leg-ticket[data-phase="neutral"] .lt-state { color: var(--long); border-color: color-mix(in srgb, var(--long) 50%, var(--border)); }
.lt-legs { list-style: none; margin: 0; padding: 6px 18px; }
.lt-leg { display: grid; grid-template-columns: 52px 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.lt-leg:last-child { border-bottom: 0; }
.lt-side { font-family: var(--mono); font-size: .75rem; }
.lt-side.long { color: var(--long); }
.lt-side.short { color: var(--short); }
.lt-qty { font-family: var(--mono); font-weight: 500; }
.lt-bar { height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.lt-bar i { display: block; height: 100%; width: var(--fill, 0%); background: currentColor; transition: width 1.1s cubic-bezier(.4, 0, .2, 1); }
.lt-leg[data-leg="target"] .lt-bar { color: var(--long); }
.lt-leg[data-leg="hedge"] .lt-bar { color: var(--short); }
.lt-status { min-width: 7.5rem; text-align: right; color: var(--quiet); font-size: .75rem; }

.lt-gauge { position: relative; padding: 10px 18px 4px; }
.lt-gauge svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.lt-gauge .arc { fill: none; stroke: var(--raised); stroke-width: 10; }
.lt-gauge .band { fill: none; stroke: color-mix(in srgb, var(--long) 45%, transparent); stroke-width: 10; }
.lt-gauge .tick { stroke: var(--border); stroke-width: 1.5; }
.lt-gauge .needle { transform-origin: 160px 150px; transform: rotate(var(--angle, 0deg)); transition: transform 1.2s cubic-bezier(.34, 1.4, .64, 1); }
.lt-gauge .needle line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.lt-gauge .needle circle { fill: var(--text); }
.lt-gauge text { fill: var(--quiet); font-family: var(--mono); font-size: 10px; }
.lt-readout { display: flex; justify-content: space-between; align-items: baseline; padding: 0 18px 14px; }
.lt-readout span { color: var(--quiet); font-size: .75rem; }
.lt-readout strong { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; transition: color .3s; }
.leg-ticket[data-phase="neutral"] .lt-readout strong { color: var(--long); }

.lt-events { list-style: none; margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--border); display: grid; gap: 7px; font-size: .8125rem; min-height: 5.6rem; }
.lt-events li { display: flex; gap: 12px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.lt-events li.is-in { opacity: 1; transform: none; }
.lt-events time { font-family: var(--mono); color: var(--quiet); font-size: .75rem; }
.lt-note { padding: 0 18px 14px; color: var(--quiet); font-size: .6875rem; }

/* ---------- Venue rail: coverage stated once, with marks ---------- */
.v2-venues { display: flex; align-items: center; gap: 28px; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.v2-venues > span { flex: 0 0 auto; color: var(--quiet); font-family: var(--mono); font-size: .75rem; }
.v2-venues ul { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 0; flex: 1; }
.v2-venues li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .875rem; }
.v2-venues img { width: 20px; height: 20px; border-radius: 5px; }
.v2-venues a { flex: 0 0 auto; }

/* ---------- Full workspace frame ---------- */
.v2-workspace { padding: 56px 0 24px; }
.v2-workspace .gallery-caption { margin-top: 12px; }
.demo-still { display: none; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; }

/* ---------- Sequence: research → execute → monitor, on a timeline rail ---------- */
.v2-flow { padding: 96px 0 40px; }
.v2-flow-head { max-width: 46rem; margin-bottom: 56px; }
.v2-flow-head h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; font-weight: 700; }
.v2-flow-head p { margin-top: 18px; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.v2-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.v2-steps::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--border), var(--brand) 50%, var(--border)); }
.v2-step { position: relative; padding: 0 0 88px 72px; }
.v2-step:last-child { padding-bottom: 0; }
.v2-step-mark { position: absolute; left: 0; top: 0; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.v2-step-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: start; margin-bottom: 28px; }
.v2-step-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; font-weight: 700; }
.v2-step-head p { color: var(--muted); line-height: 1.6; }
.v2-step-head ul { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-step-head li { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--quiet); font-size: .8125rem; }

/* Strategy structures inside step 02: equal cards, each self-contained. */
.v2-structures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-structure { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.v2-structure h4 { font-family: var(--display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.v2-structure > p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.v2-structure .workflow-visual { margin: 0; flex: 1; }
.v2-structure footer { color: var(--quiet); font-size: .8125rem; border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- Capabilities ---------- */
.v2-capabilities { padding: 96px 0; background: var(--panel); border-block: 1px solid var(--border); }
.v2-capabilities h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; margin-bottom: 40px; max-width: 30rem; line-height: 1.05; }
.v2-cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.v2-cap-grid article { padding: 26px 28px 30px 0; border-bottom: 1px solid var(--border); }
.v2-cap-grid article:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--border); }
.v2-cap-grid h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.v2-cap-grid p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* ---------- Market access: one grouped view with marks ---------- */
.v2-access { padding: 96px 0; }
.v2-access-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 40px; }
.v2-access-head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; font-weight: 700; }
.v2-access-head p { color: var(--muted); line-height: 1.6; }
.v2-access-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.v2-access-group { padding: 20px 0 0; border-top: 1px solid var(--border); }
.v2-access-group h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.v2-access-group > p { margin-top: 4px; color: var(--quiet); font-size: .8125rem; }
.v2-access-group ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.v2-access-group-wide { grid-column: 1 / -1; }
.v2-access-group-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.v2-access-group li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.v2-access-group img { width: 24px; height: 24px; border-radius: 6px; }
.v2-access-group .mark-text { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--raised); font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.v2-access-foot { margin-top: 18px; color: var(--quiet); font-size: .8125rem; }

/* ---------- Trust strip, security flow and plans ---------- */
.v2-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 26px 0 0; padding: 0; color: var(--muted); font-size: .875rem; }
.v2-trust li { display: inline-flex; align-items: center; gap: 8px; }
.v2-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--long); flex: 0 0 auto; }
.v2-security, .v2-plans { padding: 96px 0 24px; }
.v2-security-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px 18px; margin: 0 0 40px; }
.flow-node { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 18px 20px; display: grid; gap: 6px; }
.flow-node strong { font-family: var(--display); font-size: 1.0625rem; }
.flow-node span { color: var(--quiet); font-size: .875rem; line-height: 1.5; }
.flow-yours { border-color: color-mix(in srgb, var(--long) 45%, var(--border)); }
.flow-link { display: grid; justify-items: center; gap: 6px; color: var(--quiet); font-family: var(--mono); font-size: .75rem; }
.flow-link::before { content: ""; width: 96px; height: 2px; background: linear-gradient(90deg, var(--long), var(--muted)); }
.flow-public { grid-column: 1 / -1; border-style: dashed; background: transparent; }
.v2-security h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; font-weight: 700; }
.plan-state { font-family: var(--mono); font-size: .75rem; color: var(--long); margin-bottom: 8px; }
.v2-plans .v2-cap-grid .text-link { display: inline-block; margin-top: 12px; }

@media (max-width: 1100px) {
  .v2-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 64px; }
  .leg-ticket { max-width: 560px; }
  .v2-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .v2-step-head { grid-template-columns: 1fr; }
  .v2-step-head ul { grid-column: 1; }
  .v2-structures { grid-template-columns: 1fr; }
  .v2-cap-grid { grid-template-columns: 1fr 1fr; }
  .v2-cap-grid article:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .v2-cap-grid article:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--border); }
  .v2-access-head { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 700px) {
  /* Panels reflow below; fictional-data controls stay available on phones. */
  .v2 .demo-scroll { display: block; }
  .demo-still { display: none; }
  .v2-venues { flex-direction: column; align-items: flex-start; gap: 14px; }
  .v2-steps::before { left: 15px; }
  .v2-step { padding-left: 48px; padding-bottom: 64px; }
  .v2-step-mark { width: 31px; height: 31px; font-size: .75rem; }
  .v2-cap-grid { grid-template-columns: 1fr; }
  .v2-cap-grid article, .v2-cap-grid article:nth-child(even) { padding: 22px 0; border-left: 0; }
  .v2-access-grid { grid-template-columns: 1fr; }
  .v2-access-group-wide ul { grid-template-columns: 1fr; }
  .lt-leg { grid-template-columns: 44px 64px minmax(0, 1fr); }
  .lt-status { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .v2-security-flow { grid-template-columns: 1fr; }
  .flow-link::before { width: 2px; height: 28px; background: linear-gradient(180deg, var(--long), var(--muted)); }
}

@media (prefers-reduced-motion: reduce) {
  .v2 * { transition: none !important; }
  .hero-live-dot { animation: none; }
}

/* Responsive product illustrations keep the same fictional data and controls. */
.v2-hero { gap:40px; padding-top:56px; }
.v2-hero h1 { font-size:clamp(2.75rem,4.65vw,4.5rem); }
.v2-hero h1 span { white-space:nowrap; }
.lt-gauge svg { max-width:210px; }
.lt-status { min-width:3.5rem; }
.lt-events { min-height:126px; }
.lt-replay { margin:0 18px 16px; padding:7px 12px; background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--text); font:inherit; cursor:pointer; }
.lt-replay:disabled { color:var(--quiet); cursor:default; }
.preview-heading { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:20px; }
.preview-heading h2 { font-size:1.4rem; }
.v2 .demo-terminal { min-width:0; }
.v2 .demo-scroll::before { display:none; }
.v2 .demo-summary { flex-wrap:wrap; gap:12px 24px; }
.v2 .demo-topbar { gap:12px; flex-wrap:wrap; }
.v2 .demo-panel { overflow:auto; }
.v2 .demo-table :is(th,td) { padding:10px 8px; }
.v2 .demo-execution-grid { grid-template-columns:1fr 1.35fr; }
.v2 .demo-watchlist { grid-row:1; }
.v2 .demo-strategies { grid-column:2; }
.v2 .demo-spread { grid-column:1; }
.v2 .demo-orders { grid-column:2; }
.v2 .demo-accounts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.v2 .demo-account { padding:14px 12px; }
.v2 .demo-account span { gap:8px; flex-wrap:wrap; }
.demo-page { padding:56px 0; }
.demo-page h1 { font-size:clamp(2.3rem,5vw,4rem); line-height:1.08; margin:20px 0; }
.demo-page .lead { max-width:650px; color:var(--muted); margin-bottom:24px; }
.demo-page .demo-scroll { margin:24px 0 48px; }
.demo-request { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:56px 0; border-top:1px solid var(--border); scroll-margin-top:100px; }
.demo-request h2 { font-size:2rem; margin-bottom:20px; }
.demo-request p,.demo-request li { color:var(--muted); margin-bottom:14px; }
.demo-request ul { padding-left:20px; }
.demo-request form { display:grid; gap:18px; }
.demo-request label { display:grid; gap:8px; font-size:.875rem; }
.demo-request :is(input,select,textarea) { width:100%; min-width:0; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:12px; font:inherit; }
.demo-request textarea { resize:vertical; }
.demo-request .request-status { font-size:.875rem; }
.email-preview { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--panel); border:1px solid var(--border); padding:18px; font-size:.875rem; }
.request-result[hidden] { display:none; }
.request-result .btn { margin:14px 0; }
@media(max-width:1000px) {
 .v2 .demo-execution-grid,.v2 .demo-risk-grid { grid-template-columns:1fr; }
 .v2 .demo-execution-grid > * { grid-column:auto; grid-row:auto; }
 .v2 .demo-watchlist { display:none; }
 .v2 .demo-orders .demo-table :is(th,td):first-child { display:none; }
}
@media(max-width:700px) {
 .v2-hero { padding-top:36px; gap:32px; }
 .v2-hero h1 { font-size:clamp(2rem,8.7vw,3.4rem); }
 .v2-hero .lead { font-size:1rem; margin-top:22px; }
 .lt-leg { grid-template-columns:38px 62px minmax(0,1fr) 44px; gap:8px; }
 .lt-status { grid-column:auto; text-align:right; min-width:0; }
 .lt-gauge svg { max-width:180px; }
 .lt-events { font-size:.75rem; }
 .lt-events li { gap:8px; }
 .preview-heading { display:block; }
 .preview-heading a { display:inline-block; margin-top:12px; }
 .v2-step { padding-left:0; padding-top:46px; }
 .v2-steps::before { display:none; }
 .v2 .demo-research-grid,.v2 .demo-options-grid,.v2 .demo-accounts { grid-template-columns:1fr; }
 .v2 .demo-account:not(:first-child) { display:grid; }
 .v2 .demo-summary { display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:12px; }
 .v2 .demo-summary b { display:block; margin:4px 0 0; }
 .v2 .demo-topbar { padding:12px; }
 .v2 .demo-topbar img { width:78px; }
 .v2 .demo-badge { flex-basis:100%; margin-left:0; border:0; padding:0; }
 .v2 .demo-strategies .demo-table :is(th,td):nth-child(3) { display:none; }
 .v2 .demo-strategies tbody tr:nth-child(n+4) { display:none; }
 .v2 .demo-orders .demo-table :is(th,td):nth-child(5) { display:none; }
 .v2 .demo-table :is(th,td) { padding:10px 6px; font-size:.75rem; }
 .v2 .demo-status { display:block; padding:12px; }
 .v2 .demo-status span { display:block; }
 .v2 .demo-detail-head { padding:14px 12px; gap:8px; }
 .v2 .demo-detail-head h4 { font-size:1.1rem; }
 .v2 .demo-score { font-size:1.25rem; }
 .v2 .demo-metrics { padding:12px; gap:10px; }
 .v2 .demo-metrics span { font-size:.75rem; }
 .v2 .demo-metrics b { font-size:.875rem; }
 .v2 .demo-explanation { padding:12px; }
 .v2 .basket-select { min-height:44px; }
 .v2 .demo-settings span { flex-wrap:wrap; gap:8px; }
 .v2 .demo-events { padding:6px 12px; }
 .v2 .demo-events summary time { display:block; margin:0 0 6px; }
 .demo-request { grid-template-columns:1fr; gap:24px; }
}