/* ============================================================
   TradeRun — gotraderun.com · shared styles (mono-terminal light)
   ============================================================ */
:root{
  --paper:#F3F5F2; --paper-hi:#F9FAF8; --surface:#FFFFFF;
  --ink:#13160F; --ink-2:#2C2F25; --ink-mid:#5B5F53; --ink-soft:#8C9082;
  --line:rgba(19,22,15,.10); --line-2:rgba(19,22,15,.17);
  --green:#0A8F51; --green-bright:#15C878; --green-tint:#E7F6EE; --green-deep:#06492C; --green-line:rgba(10,143,81,.28);
  --red:#DD3E28; --red-tint:#FBEAE6; --red-dim:#BC6B5C;
  --amber:#B07A12; --amber-tint:#F8F0DD;
  --shadow-sm:0 1px 2px rgba(20,22,12,.05);
  --shadow:0 1px 2px rgba(20,22,12,.05), 0 18px 44px rgba(20,22,12,.10);
  --ff-display:"Bricolage Grotesque",Georgia,serif;
  --ff-body:"Hanken Grotesk",system-ui,sans-serif;
  --ff-mono:"Martian Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.72,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
  background-image:
    radial-gradient(46% 42% at 88% -8%, rgba(21,200,120,.14), transparent 62%),
    radial-gradient(38% 38% at 4% 8%, rgba(21,200,120,.06), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(90,150,255,.045), transparent 62%);
}
/* faint engineering dot-grid */
.dotgrid{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(19,22,15,.06) 1px, transparent 1.5px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(130% 110% at 60% 25%, #000 45%, transparent 100%);
  mask-image:radial-gradient(130% 110% at 60% 25%, #000 45%, transparent 100%);}
.wrap{width:100%; max-width:1140px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}

/* ---- logo ---- */
.brandlock{display:inline-flex; align-items:center; gap:11px; text-decoration:none;}
.runmark{display:inline-flex; align-items:center; gap:3px;}
.runmark i{display:block; width:5px; height:14px; border-radius:2px; transform:skewX(-18deg); background:var(--green);}
.runmark i:nth-child(1){opacity:.42;} .runmark i:nth-child(2){opacity:.7;}
.runmark i:nth-child(3){opacity:1; background:var(--green-bright);}
.wordmark{font-family:var(--ff-display); font-weight:700; letter-spacing:-.035em; color:var(--ink); font-size:22px;}
.wordmark .run{color:var(--green);}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:30; backdrop-filter:blur(14px);
  background:rgba(243,245,242,.72); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:66px;}
.nav .tag{font-family:var(--ff-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:9px;}
.nav .tag .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-tint);}
.navright{display:flex; align-items:center; gap:18px;}
.langsw{display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;}
.langsw a{color:var(--ink-soft); text-decoration:none; transition:color .2s;}
.langsw a:hover{color:var(--ink-mid);}
.langsw a.on{color:var(--green);}
.langsw .sep{color:var(--line-2);}
@media (max-width:560px){ .nav .tag{display:none;} }

/* ---- hero ---- */
main{flex:1 0 auto;}
.hero{padding:clamp(44px,7vw,92px) 0 clamp(48px,8vw,96px);}
.hero .grid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(30px,4.5vw,60px); align-items:stretch;}
.hero .grid > *{min-width:0;}
.eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--green); margin-bottom:24px;}

/* staggered entrance */
@keyframes rise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.hero .r{opacity:0; animation:rise .72s var(--ease) both; animation-delay:var(--d,0ms);}
@media (prefers-reduced-motion:reduce){ .hero .r{animation:none; opacity:1;} }

/* right column = console + a small column of bespoke "proof" artifacts (balances + vertically centers against the headline) */
.right{display:flex; flex-direction:column; justify-content:center; gap:16px; min-width:0;}
.proof{display:flex; flex-direction:column; gap:10px;}
.art{position:relative; display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:13px;
  background:rgba(255,255,255,.5); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.art:hover{transform:translateX(3px); box-shadow:var(--shadow);}
.art .gfx{height:28px; width:auto; flex:none; transform-origin:left center; animation:artgfx 6s ease-in-out infinite;}
.art .v{font-family:var(--ff-display); font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1;}
.art.up .v{color:var(--green);} .art.warn .v{color:var(--amber);}
.art .l{margin-left:auto; max-width:54%; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-align:right; line-height:1.4;}
/* light animation: a soft highlight + graphic pop rotates through the three artifacts (~2s each) */
.art::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; animation:artglow 6s ease-in-out infinite;
  box-shadow:0 0 0 1px var(--glow-ring), 0 12px 30px var(--glow-soft);}
.art.up{--glow-ring:rgba(10,143,81,.45); --glow-soft:rgba(10,143,81,.20);}
.art.warn{--glow-ring:rgba(176,122,18,.45); --glow-soft:rgba(176,122,18,.18);}
.art:nth-child(1)::after, .art:nth-child(1) .gfx{animation-delay:0s;}
.art:nth-child(2)::after, .art:nth-child(2) .gfx{animation-delay:-2s;}
.art:nth-child(3)::after, .art:nth-child(3) .gfx{animation-delay:-4s;}
@keyframes artglow{0%{opacity:0;} 6%{opacity:1;} 24%{opacity:1;} 33%,100%{opacity:0;}}
@keyframes artgfx{0%,6%{transform:scale(1);} 15%,24%{transform:scale(1.14);} 33%,100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){ .art::after{animation:none; opacity:0;} .art .gfx{animation:none;} }
.hero h1{font-family:var(--ff-display); font-weight:700; font-size:clamp(32px,4.7vw,56px); letter-spacing:-.025em; line-height:1.05; color:var(--ink); margin:26px 0 22px; max-width:16ch;}
.hero h1 .g{color:var(--green); background:linear-gradient(110deg, var(--green), var(--green-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero p{font-size:clamp(16px,1.7vw,18.5px); color:var(--ink-mid); max-width:46ch; line-height:1.6;}
.hero p b{color:var(--ink); font-weight:600;}
/* ---- waitlist form ---- */
.wl{display:flex; gap:10px; margin-top:32px; max-width:480px;}
.wl input{flex:1; min-width:0; font-family:var(--ff-body); font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:15px 16px;
  box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);}
.wl input::placeholder{color:var(--ink-soft);}
.wl input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint);}
.wl button{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; cursor:pointer;
  font-family:var(--ff-mono); font-size:13.5px; letter-spacing:.04em; font-weight:600; border:0;
  padding:0 22px; border-radius:12px; background:var(--ink); color:var(--paper-hi);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;}
.wl button:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(20,22,12,.18);}
.wl button:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none;}
.wl button .arr{color:var(--green-bright);}
.scarcity{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.02em; color:var(--ink-soft); margin-top:16px; line-height:1.5;}
.scarcity.ok{color:var(--green);} .scarcity.err{color:var(--red);}


/* ---- console ---- */
.console{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; min-width:0; max-width:100%;}
.console .bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:#FBFCFB;}
.console .bar .d{width:11px; height:11px; border-radius:50%;}
.console .bar .d1{background:#E5564A;} .console .bar .d2{background:#E8B23E;} .console .bar .d3{background:#27C46A;}
.console .bar .ttl{margin-left:10px; font-family:var(--ff-mono); font-size:12px; color:var(--ink-soft);}
/* industry crossfade (title + need swap through verticals) */
#ind, #need{display:inline-block; transition:opacity .35s var(--ease);}
.console.swapping #ind, .console.swapping #need{opacity:0;}
.console .body{padding:22px 22px; font-family:var(--ff-mono); font-size:clamp(12.5px,1.2vw,14px); line-height:1.95; color:var(--ink-2); overflow-x:hidden;}
.console .ln{display:flex; align-items:flex-start; gap:12px;}
.console .pfx,.console .cmt{color:var(--ink-soft);} .console .req{color:var(--ink);}
.console .req,.console .cmt{min-width:0; overflow-wrap:anywhere;}
.console .sep{height:1px; background:var(--line); margin:12px 0;}
.status{font-family:var(--ff-mono); font-weight:600; padding:2px 9px; border-radius:6px; font-size:.85em; white-space:nowrap;}
.status.err{color:var(--red); background:var(--red-tint);} .status.ok{color:var(--green); background:var(--green-tint);}
/* console resolves on green; the "before" 403 line is dim + muted (not alarm-red) */
.console .ln.was{opacity:.6;}
.console .code403{font-family:var(--ff-mono); font-weight:600; color:var(--red-dim); background:rgba(188,107,92,.12); padding:2px 9px; border-radius:6px; font-size:.85em;}
.console .ln.win{margin-top:3px;}
.console .ln.win .status.ok{font-size:.95em; padding:3px 11px; animation:okpulse 2.6s ease-out infinite;}
.console .ln.win .cmt{color:var(--ink-2);}
@keyframes okpulse{0%{box-shadow:0 0 0 0 rgba(10,143,81,.32);} 70%,100%{box-shadow:0 0 0 12px rgba(10,143,81,0);}}
.hero .console{box-shadow:0 2px 8px rgba(20,22,12,.06), 0 30px 72px rgba(10,143,81,.13);}
@media (prefers-reduced-motion:reduce){ .kpi .pulse::after, .console .ln.win .status.ok{animation:none;} }

/* ---- footer ---- */
.foot{flex-shrink:0; border-top:1px solid var(--line); padding:30px 0; margin-top:40px;}
.foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);}
.foot a{color:var(--ink-mid); text-decoration:none;} .foot a:hover{color:var(--green);}
.foot .links{display:flex; gap:20px; align-items:center;}
.foot .co b{color:var(--ink-mid); font-weight:600;}

/* ---- legal pages ---- */
.legal{padding:64px 0 24px; max-width:760px;}
.legal .back{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-soft); text-decoration:none; text-transform:uppercase;}
.legal .back:hover{color:var(--green);}
.legal h1{font-family:var(--ff-display); font-weight:700; font-size:clamp(34px,5vw,52px); letter-spacing:-.03em; margin:26px 0 6px;}
.legal .lead-note{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:40px;}
.legal h2{font-family:var(--ff-display); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--ink); margin:34px 0 10px;}
.legal h2 .k{font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); display:block; margin-bottom:4px;}
.legal p, .legal li{font-size:15.5px; color:var(--ink-mid); line-height:1.65;}
.legal p{margin-bottom:12px;}
.legal b, .legal strong{color:var(--ink); font-weight:600;}
.legal a{color:var(--green); text-decoration:none; border-bottom:1px solid var(--green-line);}
.legal ul{margin:6px 0 12px 0; padding-left:20px;} .legal li{margin-bottom:6px;}
.legal .addr{font-family:var(--ff-mono); font-size:14px; color:var(--ink-2); line-height:1.8; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:20px 24px; box-shadow:var(--shadow-sm); margin:6px 0 8px;}
.legal .addr .row{display:flex; gap:16px;}
.legal .addr .label{color:var(--ink-soft); min-width:120px;}
.legal .updated{margin-top:44px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--ff-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.06em;}

@media (max-width:820px){
  .hero .grid{grid-template-columns:minmax(0,1fr);}
  .right{justify-content:flex-start;}
}
@media (max-width:620px){
  .wl{flex-direction:column; align-items:stretch;}
  .wl button{justify-content:center; padding:14px 22px;}
  .eyebrow{letter-spacing:.16em; overflow-wrap:anywhere;}
  .scarcity{font-size:11.5px; overflow-wrap:anywhere;}
  .console .bar{padding:12px 14px;}
  .console .body{overflow-x:hidden; font-size:12px; padding:18px 16px; line-height:1.7;}
  .console .ln{align-items:flex-start; gap:8px; white-space:normal;}
  .console .req, .console .cmt{min-width:0; overflow-wrap:anywhere;}
  .art .l{max-width:62%; overflow-wrap:anywhere;}
}
@media (max-width:380px){
  .console .body{font-size:11px;}
  .art .v{font-size:19px;}
}