/* Shared stylesheet for the ApexDelta marketing site.
   v2 (Sep 2026): minimal + live redesign, built from the ApexDelta design
   system. Every selector the old file had is still here (other pages and
   site.js depend on them); only the look changed. New live pieces
   (ticker, P&L panel, live dot) are at the end and are used by index.html
   together with assets/live.js. */

:root{
  /* Finance palette (2026-10-14): graphite, ivory and gold. Royal Amethyst
     stays in the logo files only; the variable names are kept. */
  --purple:#1B2532;            /* Royal Amethyst -- was #4A2184 */
  --ivory:#FFFEF5;             /* Soft Ivory */
  --purple-bright:#3A4757;     /* interactive accent */
  --purple-glow: rgba(58,71,87,0.35);
  --purple-tint:#EEF0F4;
  --gold:#D9A657;
  --gold-soft: rgba(217,166,87,0.16);
  /* Deep band (nav, hero, dark sections, footer). */
  --ink:#0B0F14;
  --ink-soft:#131A22;
  --deep-line: rgba(255,255,255,0.10);
  --on-deep: var(--ivory);
  --on-deep-muted:#9AA4B2;
  --up:#7BE8B8;                /* gains on deep */
  --down:#E8877B;              /* losses on deep */
  /* Light sections. */
  --paper:#F6F7F9;
  --paper-dim:#EEF0F4;
  --line:#E3E6EB;
  --text:#0F1720;
  --text-dim:#5D6876;
  --white:#FFFFFF;
  --gain:#15803D;              /* gains on light (4.7:1) */
  --loss:#B91C1C;              /* losses on light */
  --radius:14px;
  --radius-md:9px;
  --maxw:1120px;
  --nav-h:76px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Outfit', system-ui, sans-serif;
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Outfit', system-ui, sans-serif;
  letter-spacing:-0.02em;
  margin:0;
}
.mono{ font-family:var(--mono); letter-spacing:0.02em; }
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--purple-bright); outline-offset:2px;}
header :focus-visible, .hero :focus-visible, .how :focus-visible, .final-cta :focus-visible, footer :focus-visible{outline-color:var(--gold);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

::selection{background:var(--gold-soft); color:var(--purple);}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(18,12,31,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--deep-line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
}
.brand{display:flex; flex-direction:row; align-items:center; gap:12px; text-align:left;}
a.brand, a.brand-mark{cursor:pointer;}
.brand-mark{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.brand-mark svg{width:40px; height:40px; overflow:visible;}
.brand-mark img{width:40px; height:40px; object-fit:contain;}
.brand-name{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.15;
  color:var(--on-deep); font-weight:500; font-size:18px; white-space:nowrap; letter-spacing:-0.01em;
}
.brand-sub{
  display:block; font-size:8.5px; font-weight:500; letter-spacing:0.42em;
  text-transform:uppercase; color:var(--on-deep); opacity:.85;
  margin-top:3px;
}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{
  color:var(--on-deep-muted); font-size:14.5px; font-weight:500;
  transition:color .2s var(--ease);
  position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--on-deep);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  padding:10px 18px; border-radius:var(--radius-md);
  background:var(--gold); color:var(--ink) !important;
  font-weight:600; font-size:14px;
  transition:filter .2s var(--ease);
}
.nav-cta:hover{filter:brightness(1.07);}
.nav-cta::after, .nav-demat::after{display:none !important;}
/* Demat referral: a quiet text link now, so the nav carries exactly one
   gold action and one outlined one (Log in). */
.nav-demat{
  color:var(--on-deep-muted) !important; font-weight:500; font-size:14px;
  border-bottom:1px dashed rgba(255,255,255,0.25); padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-demat:hover{color:var(--gold) !important; border-color:var(--gold);}
.nav-login{position:relative;}
.nav-login-btn{
  background:none; border:1px solid rgba(255,255,255,0.22); color:var(--on-deep);
  font-weight:500; font-size:14px; padding:9px 16px; border-radius:var(--radius-md); cursor:pointer;
  font-family:'Outfit', sans-serif;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.nav-login-btn:hover{border-color:var(--gold); color:var(--gold);}
.login-dropdown{
  position:absolute; top:calc(100% + 12px); right:0; width:280px;
  background:var(--ink-soft); border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  padding:20px;
  box-shadow:0 24px 48px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:200; text-align:left;
}
.login-dropdown.open{opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;}
.login-dropdown label{
  display:block; font-size:11.5px; font-family:var(--mono); letter-spacing:0.04em;
  color:var(--on-deep-muted); margin:12px 0 6px;
}
.login-dropdown label:first-of-type{margin-top:0;}
.login-dropdown input{
  width:100%; padding:10px 12px; border-radius:7px; border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05); color:var(--on-deep); font-size:14px; font-family:'Outfit', sans-serif;
}
.login-dropdown input:focus{outline:none; border-color:var(--gold);}
.login-password-field{position:relative;}
.login-password-field input{padding-right:54px;}
.login-toggle-password{
  position:absolute; right:4px; top:0; bottom:0; height:100%; display:flex; align-items:center;
  background:none; border:none; color:var(--on-deep-muted); font-size:12px; font-weight:500;
  cursor:pointer; padding:0 8px; appearance:none; -webkit-appearance:none;
}
.login-toggle-password:hover{color:var(--gold);}
.login-dropdown-error{color:var(--down); font-size:12.5px; margin-top:10px; line-height:1.4;}
.login-dropdown-error a{
  color:var(--gold); font-weight:600; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(217,166,87,0.45); transition:border-color .2s ease;
}
.login-dropdown-error a:hover{color:var(--gold); border-bottom-color:var(--gold);}
.login-dropdown-submit{
  width:100%; margin-top:16px; text-align:center; justify-content:center;
  background:var(--gold); color:var(--ink); font-weight:600; font-size:14px;
  padding:11px; border:none; border-radius:var(--radius-md); cursor:pointer; font-family:'Outfit', sans-serif;
  transition:filter .2s var(--ease);
}
.login-dropdown-submit:hover{filter:brightness(1.07);}
.login-dropdown-submit:disabled{opacity:0.6; cursor:default;}
@media (max-width:1023px){
  .login-dropdown{
    position:static; width:auto; margin-top:14px; transform:none; box-shadow:none;
    border-color:rgba(255,255,255,0.1);
  }
  .login-dropdown.open{transform:none;}
  .login-dropdown:not(.open){display:none;}
  .nav-login{margin-top:12px;}
  .nav-login-btn{ width:100%; text-align:center; padding:14px 20px; appearance:none; -webkit-appearance:none; }
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:38px; height:38px; padding:8px;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; width:100%; height:2px; background:var(--on-deep); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ---------- HERO ---------- */
/* Flat ink with a faint dot grid instead of the drifting glow: the only
   motion left in the hero is live data. */
.hero{
  position:relative;
  background:var(--ink);
  padding:calc(var(--nav-h) + 96px) 0 112px;
  overflow:hidden;
  color:var(--on-deep);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to left, #000 5%, transparent 65%);
  mask-image:linear-gradient(to left, #000 5%, transparent 65%);
}
.hero.has-strip{padding-top:var(--nav-h);}
.hero-glow{display:none;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
  position:relative; z-index:2;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.1em;
  color:var(--gold); text-transform:uppercase;
  padding:6px 12px; border:1px solid rgba(217,166,87,0.35); border-radius:99px;
  background:var(--gold-soft);
  opacity:0; animation:riseIn .7s var(--ease) forwards;
}
/* The pulsing dot is the site-wide "this is live" signal. */
.eyebrow-dot, .live-dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.eyebrow-dot::after, .live-dot::after{
  content:''; position:absolute; inset:0; border-radius:inherit; background:inherit;
  animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(1); opacity:.55;} 80%,100%{transform:scale(3); opacity:0;}}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

.hero h1{
  font-size:clamp(38px, 5vw, 58px);
  line-height:1.04;
  letter-spacing:-0.03em;
  margin-top:22px;
  font-weight:600;
  opacity:0; animation:riseIn .8s .08s var(--ease) forwards;
}
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero p.lead{
  margin-top:24px; font-size:18.5px; font-weight:300; line-height:1.6; color:var(--on-deep-muted);
  max-width:500px;
  opacity:0; animation:riseIn .8s .16s var(--ease) forwards;
}
.hero-ctas{
  display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;
  opacity:0; animation:riseIn .8s .24s var(--ease) forwards;
}
.btn-primary{
  background:var(--gold); color:var(--ink); font-weight:600; font-size:15px;
  height:46px; padding:0 22px; border-radius:var(--radius-md); display:inline-flex; align-items:center; gap:8px;
  border:none; cursor:pointer; font-family:'Outfit', sans-serif;
  transition:filter .2s var(--ease);
}
.btn-primary svg{transition:transform .2s var(--ease);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-primary:hover svg{transform:translateX(3px);}
.btn-primary:disabled{opacity:.6; cursor:default;}
.btn-ghost{
  border:1px solid rgba(255,255,255,0.22); color:var(--on-deep); font-weight:500; font-size:15px;
  height:46px; padding:0 22px; border-radius:var(--radius-md); display:inline-flex; align-items:center;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

.hero-meta{
  display:flex; gap:32px; margin-top:48px; padding-top:24px; border-top:1px solid var(--deep-line);
  opacity:0; animation:riseIn .8s .32s var(--ease) forwards;
}
.hero-meta div{border-left:none; padding-left:0;}
.hero-meta .num{font-family:'Outfit',sans-serif; font-size:15px; font-weight:500; color:var(--on-deep);}
.hero-meta .lbl{font-size:13px; color:var(--on-deep-muted); margin-top:2px;}

@keyframes riseIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* Signal graphic (the weak-day chart, drawn by site.js) */
.signal-card{
  position:relative; z-index:2;
  background:var(--ink);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  padding:24px 24px 20px;
}
.signal-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.chart-tabs{display:flex; gap:2px; margin-bottom:16px; padding:3px; border-radius:var(--radius-md); background:rgba(255,255,255,0.05);}
.chart-tab{
  flex:1; font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:500;
  color:var(--on-deep-muted); background:transparent;
  border:none; border-radius:6px; padding:8px 6px;
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); white-space:nowrap;
}
.chart-tab:hover{color:var(--on-deep);}
.chart-tab.active{ color:var(--ink); background:var(--gold); }
.live-bars rect{ transition:y .55s cubic-bezier(.34,.05,.2,1), height .55s cubic-bezier(.34,.05,.2,1), fill .35s ease; }
.live-labels text{ transition:opacity .3s ease; }
.signal-card-top .ticker{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--on-deep-muted);}
.signal-card-top .delta-badge{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--on-deep-muted); background:transparent; border:1px solid rgba(255,255,255,0.16);
  padding:4px 9px; border-radius:99px;
}
.signal-svg-wrap{width:100%; height:150px;}
.signal-path{
  fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.2s .6s var(--ease) forwards;
}
.signal-fill{opacity:0; animation:fadeIn 1s 1.8s var(--ease) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}
.signal-dot{ animation:blink 2.4s ease-in-out 2.6s infinite; }
@keyframes blink{0%,100%{opacity:1; r:4.5;} 50%{opacity:0.4; r:6.5;}}
.signal-rows{display:flex; flex-direction:column; gap:0; margin-top:10px;}
.signal-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:14px; color:var(--on-deep-muted);
  padding:12px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.signal-row b{color:var(--on-deep); font-weight:600;}
.up{color:var(--up);}
.down{color:var(--down);}

/* ---------- SECTION SHARED ---------- */
section{padding:104px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--purple); font-weight:500;
}
.section-head h2{
  font-size:clamp(28px,3.4vw,38px); line-height:1.15; margin-top:14px; font-weight:600; color:var(--text);
}
.section-head p{color:var(--text-dim); font-size:17px; font-weight:300; line-height:1.65; margin-top:16px;}

/* Visible by default; site.js opts in to the fade (see its comment). */
.js-reveal-enabled .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.js-reveal-enabled .reveal.in{opacity:1; transform:translateY(0);}

/* ---------- FEATURES ---------- */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.features-grid.features-grid-4{grid-template-columns:repeat(4,1fr);}
.features-grid-4 .feature-card{padding:24px 22px;}
.features-grid-4 .feature-card h3{font-size:17px;}
/* Borders, not shadows: hover changes the border, the card never moves. */
.feature-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; transition:border-color .2s var(--ease);
}
.feature-card:hover{ border-color:var(--purple-bright); }
.feature-icon{
  width:24px; height:24px; border-radius:0; background:none;
  display:flex; align-items:center; justify-content:flex-start; margin-bottom:28px;
}
.feature-icon svg{width:24px; height:24px;}
.feature-card h3{font-size:19px; font-weight:600;}
.feature-card p{margin-top:8px; font-size:15px; line-height:1.6; color:var(--text-dim);}
.inline-link{color:var(--gold); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(217,166,87,0.35); transition:border-color .2s ease;}
.inline-link:hover{border-color:var(--gold);}

/* ---------- HOW IT WORKS / DARK SECTIONS ---------- */
.how{background:var(--ink); color:var(--on-deep);}
#insight.how{background:var(--ink); border-top:1px solid var(--deep-line); border-bottom:1px solid var(--deep-line);}
.how .section-eyebrow{color:var(--gold);}
.how .section-head p{color:var(--on-deep-muted);}
.how .section-head h2{color:var(--on-deep);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
.steps.steps-4{grid-template-columns:repeat(4,1fr);}
.step{padding:0 28px 0 0; position:relative;}
.step:not(:last-child)::after{
  content:''; position:absolute; top:20px; right:12px; width:calc(100% - 68px); height:1px;
  background:var(--deep-line);
}
.step-index{
  font-family:var(--mono); color:var(--gold); font-size:14px; font-weight:500;
  width:40px; height:40px; border-radius:50%; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:transparent;
  border:1px solid rgba(217,166,87,0.4);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.step:hover .step-index{ background:var(--gold); color:var(--ink); }
.step h3{font-size:18px; font-weight:600; margin-bottom:8px;}
.step p{font-size:15px; line-height:1.6; color:var(--on-deep-muted);}

/* Security icon badges (other pages) */
.secure-grid .step:not(:last-child)::after{display:none;}
.secure-icon{
  width:48px; height:48px; border-radius:12px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  background:transparent;
  border:1px solid rgba(217,166,87,0.4);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.secure-icon svg{width:24px; height:24px;}
.step:hover .secure-icon{ background:var(--gold); color:var(--ink); }

/* ---------- METRICS ---------- */
/* One bordered strip split by hairlines; numbers in mono so the count-up
   (site.js) never shifts the layout. */
.metrics-strip{ background:var(--paper); padding:0 0 104px; border:0; }
.metrics-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:0;
}
.metrics-strip .wrap.metrics-grid{ max-width:calc(var(--maxw) - 48px); }
.metric{ padding:26px 24px; border-right:1px solid var(--line); min-width:0; }
.metric:last-child{ border-right:0; }
.metric .num{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(28px,3.2vw,40px);
  font-weight:500; letter-spacing:-0.02em; color:var(--text); white-space:nowrap;
}
.metric .lbl{margin-top:8px; font-size:14px; color:var(--text-dim); line-height:1.5;}
.metric .src{display:block; margin-top:6px; font-family:var(--mono); font-size:11.5px; color:var(--text-dim);}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch;}
.price-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:border-color .2s var(--ease);
}
.price-card:hover{border-color:var(--purple-bright);}
.price-card.highlight{
  background:var(--purple);
  color:var(--ivory); border-color:transparent; position:relative;
}
.price-badge{
  position:absolute; top:-13px; right:28px; background:var(--gold); color:var(--ink);
  font-size:12px; font-weight:500; padding:5px 12px; border-radius:99px;
  font-family:var(--mono);
}
.price-card h3{font-size:17px; font-weight:600;}
.price-card .price{ font-family:var(--mono); font-size:36px; font-weight:500; letter-spacing:-0.02em; margin-top:16px; }
.price-card .price span{font-family:'Outfit',sans-serif; font-size:14px; font-weight:400; opacity:.7; letter-spacing:0;}
.price-card .desc{font-size:14px; margin-top:10px; opacity:.75; line-height:1.5;}
.price-list{list-style:none; padding:0; margin:26px 0 30px; display:flex; flex-direction:column; gap:12px; flex-grow:1;}
.price-list li{font-size:14.5px; display:flex; gap:10px; align-items:flex-start; line-height:1.5;}
.price-list svg{width:15px; height:15px; margin-top:3px; flex-shrink:0;}
.price-cta{
  text-align:center; padding:12px; border-radius:var(--radius-md); font-weight:600; font-size:14.5px;
  border:1px solid var(--line); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.price-card:not(.highlight) .price-cta:hover{background:var(--ink); color:var(--ivory); border-color:var(--ink);}
.price-card.highlight .price-cta{background:var(--gold); color:var(--ink); border:none;}
.price-card.highlight .price-cta:hover{filter:brightness(1.07);}

.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;
}

/* ---------- COMPARISON ---------- */
.compare-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--white);}
.compare-table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px;}
.compare-table th, .compare-table td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line);}
.compare-table thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); font-weight:400; background:var(--paper-dim); vertical-align:bottom;
}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table td:first-child{font-weight:500;}
.compare-table td:not(:first-child){text-align:center; width:15%;}
.compare-table tr.is-us td{background:var(--purple); color:var(--ivory); font-weight:600;}
.compare-table tr.is-us td:first-child{border-radius:0 0 0 var(--radius);}
.compare-table tr.is-us td:last-child{border-radius:0 0 var(--radius) 0;}
.mark{font-size:16px; line-height:1; display:inline-block;}
.mark-yes{color:var(--purple);}
.compare-table tr.is-us .mark-yes{color:var(--gold);}
.mark-no{color:var(--line); font-size:19px;}
.mark-part{color:#B07A2A;}
.compare-note{font-size:12.5px; color:var(--text-dim); margin-top:18px; max-width:700px;}
.compare-hint{
  display:none; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--purple);
  margin:0 0 12px; align-items:center; gap:7px;
}
.compare-hint span{font-size:14px; animation:nudge 1.6s var(--ease) infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@media (prefers-reduced-motion: reduce){ .compare-hint span{animation:none;} }

/* ---------- PROOF STRIP ---------- */
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.proof-item{display:flex; flex-direction:column; gap:7px;}
.proof-item .pk{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--purple);
}
.proof-item h3{font-size:15.5px; font-weight:600; margin:0; line-height:1.35;}
.proof-item p{font-size:14px; color:var(--text-dim); margin:0; line-height:1.5;}

/* ---------- FOUNDER ---------- */
.founder-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 32px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start;
}
.founder-mark{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:22px; font-weight:600; color:var(--ivory);
}
.founder-name{font-size:19px; font-weight:600; margin:0;}
.founder-role{
  font-family:var(--mono); font-size:12px; color:var(--purple);
  letter-spacing:.05em; margin:3px 0 14px;
}
.founder-card p{font-size:15.5px; color:var(--text-dim); margin:0 0 12px; max-width:62ch; line-height:1.65;}
.founder-links{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:14px;}

/* ---------- PRICING NOTE ---------- */
.pricing-note{font-size:12.5px; color:var(--text-dim); margin-top:26px; max-width:680px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq-item summary{
  list-style:none; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:18px; font-weight:500; color:var(--text);
  padding:22px 44px 22px 0; position:relative;
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:''; position:absolute; right:6px; top:50%; width:10px; height:10px;
  border-right:1.5px solid var(--purple); border-bottom:1.5px solid var(--purple);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-item summary:hover{color:var(--purple);}
.faq-item p{ margin:0 0 22px; font-size:16px; line-height:1.7; color:var(--text-dim); max-width:680px; }

/* ---------- FINAL CTA ---------- */
.final-cta{
  background:var(--ink);
  color:var(--on-deep); text-align:center; padding:112px 0;
  border-top:1px solid var(--deep-line);
}
.final-cta h2{font-size:clamp(28px,4vw,42px); font-weight:600; line-height:1.12; max-width:22ch; margin:0 auto;}
.final-cta p{color:var(--on-deep-muted); margin-top:16px; font-size:17px; font-weight:300;}
.final-cta .hero-ctas{justify-content:center; margin-top:34px; opacity:1; animation:none;}

.early-access-form{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  margin:40px auto 0; max-width:760px;
  padding:28px; border:1px solid var(--deep-line); border-radius:var(--radius); background:var(--ink-soft);
}
.early-access-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%; }
.early-access-row input{
  flex:1 1 170px; min-width:150px; height:46px;
  padding:0 14px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04); color:var(--on-deep); font-size:15px;
  font-family:'Outfit', sans-serif; transition:border-color .2s var(--ease);
}
.early-access-row input::placeholder{color:rgba(255,255,255,0.45);}
.early-access-row input:focus{outline:none; border-color:var(--gold);}
.early-access-form button{flex:0 0 auto; white-space:nowrap;}
.early-access-brokers{text-align:center; width:100%;}
.early-access-brokers-label{
  display:block; font-size:12px; color:var(--on-deep-muted); margin-bottom:12px;
  font-family:var(--mono); letter-spacing:0.04em;
}
.early-access-broker-pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.broker-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:99px; border:1px solid rgba(255,255,255,0.16);
  background:transparent; color:var(--on-deep-muted);
  font-size:14px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.broker-pill:hover{border-color:rgba(217,166,87,0.5); color:var(--on-deep);}
.broker-pill input{accent-color:var(--gold); cursor:pointer; margin:0;}
.broker-pill:has(input:checked){ border-color:var(--gold); background:var(--gold-soft); color:var(--on-deep); }
.broker-pill:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px;}
.broker-other-input{
  display:block; margin:12px auto 0; height:40px; padding:0 14px; border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04);
  color:var(--on-deep); font-size:14px; font-family:'Outfit', sans-serif;
  width:220px; max-width:100%; text-align:center;
}
.broker-other-input::placeholder{color:rgba(255,255,255,0.45);}
.broker-other-input:focus{outline:none; border-color:var(--gold);}
.early-access-message{margin-top:16px; font-size:14.5px; min-height:1.3em;}
.early-access-message.success{color:var(--up);}
.early-access-message.error{color:var(--down);}
@media (max-width:640px){
  .early-access-row input{flex:1 1 100%;}
  .early-access-form{padding:20px 16px;}
}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--on-deep-muted); padding:40px 0; font-size:14px; border-top:1px solid var(--deep-line);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-row .brand{flex-direction:row; gap:12px; text-align:left;}
.footer-links{display:flex; flex-wrap:wrap; gap:12px 24px;}
.footer-links a{color:var(--on-deep-muted); transition:color .2s var(--ease);}
.footer-links a:hover{color:var(--on-deep);}

/* ---------- INTRO SPLASH (other pages / optional) ---------- */
#intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
}
#intro.done{ animation:introOut .5s ease forwards; }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }
.intro-logo{
  position:relative; width:138px; height:140px;
  opacity:0; transform:scale(.96);
  animation:introLogo .7s cubic-bezier(.16,.8,.24,1) .1s forwards;
}
.intro-logo-full{ width:min(300px, 74vw); height:auto; }
.intro-logo img{ width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:2; }
@keyframes introLogo{ 0%{ opacity:0; transform:scale(.96); } 100%{ opacity:1; transform:scale(1); } }
.intro-logo-full::before, .intro-logo-full::after{ content:none; }
@media (prefers-reduced-motion: reduce){
  #intro, .intro-logo, .intro-logo img{ animation:none !important; }
  #intro{ display:none; }
}

/* ---------- MULTI-PAGE NAV ---------- */
.nav-links a.nav-current{color:var(--on-deep);}
.nav-links a.nav-current::after{width:100%;}

/* =================================================================
   v2 LIVE PIECES (index.html + assets/live.js)
   ================================================================= */

/* Status strip under the nav: scrolling facts with pulsing dots. */
.live-strip{
  position:relative; z-index:2; display:flex; align-items:center; height:40px; overflow:hidden;
  border-top:1px solid var(--deep-line); border-bottom:1px solid var(--deep-line);
  margin-bottom:88px;
}
.live-strip-label{
  flex:none; display:flex; align-items:center; gap:8px; height:100%; padding:0 16px 0 24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep);
  background:var(--ink); border-right:1px solid var(--deep-line); position:relative; z-index:1;
}
.live-strip-label .live-dot, .live-item .live-dot{background:var(--up);}
.live-strip-track{display:flex; gap:44px; padding-left:28px; white-space:nowrap; animation:marquee 50s linear infinite;}
.live-strip:hover .live-strip-track{animation-play-state:paused;}
.live-item{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--on-deep-muted);}
.live-item b{color:var(--on-deep); font-weight:500;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* Illustrative live P&L panel (hero right). A light card on the dark hero. */
.pnl-panel{
  position:relative; z-index:2;
  background:var(--white); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
  opacity:0; animation:riseIn .8s .2s var(--ease) forwards;
}
.pnl-top{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.pill{
  display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:99px;
  border:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--text); white-space:nowrap;
}
.pill.muted{color:var(--text-dim);}
.pnl-panel .live-dot{background:var(--gain);}
.pnl-k{margin-top:20px; font-size:13.5px; color:var(--text-dim);}
.pnl-v{display:flex; align-items:baseline; gap:12px; margin-top:4px;}
.pnl-big{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:36px; font-weight:600; letter-spacing:-0.02em;
  padding:0 6px; margin-left:-6px; border-radius:6px; transition:background-color .6s ease;
}
.pnl-pct{font-family:var(--mono); font-size:14px; font-weight:500;}
.pnl-panel .gain{color:var(--gain);} .pnl-panel .loss{color:var(--loss);}
.pnl-spark{display:block; width:100%; height:84px; margin:14px 0 6px;}
.pnl-spark .l{fill:none; stroke:var(--gain); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
.pnl-spark .a{fill:rgba(21,128,61,0.10);}
.pnl-spark line{stroke:var(--line); stroke-dasharray:3 4;}
.pnl-spark circle{fill:var(--gain);}
.pnl-rows{border-top:1px solid var(--line);}
.pnl-row{display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.pnl-row:last-child{border-bottom:0;}
.pnl-row .n{display:flex; align-items:center; gap:10px; font-weight:500;}
.pnl-row .p{font-family:var(--mono); font-size:12px; color:var(--text-dim);}
.pnl-row .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; min-width:96px; text-align:right; padding:3px 4px; border-radius:4px; transition:background-color .6s ease;}
.pnl-bench{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.pnl-bench div{background:var(--paper-dim); border-radius:var(--radius-md); padding:10px 12px; font-size:12.5px; color:var(--text-dim);}
.pnl-bench b{display:block; margin-top:3px; font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text);}
.flash-up{background:rgba(21,128,61,0.14) !important; transition:none !important;}
.flash-down{background:rgba(185,28,28,0.12) !important; transition:none !important;}

/* Insight section: text + steps on the left, the chart on the right. */
.insight-split{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:start;}
.insight-split .section-head{margin-bottom:0;}
.steps.steps-list{grid-template-columns:1fr; margin-top:36px; border-top:1px solid var(--deep-line);}
.steps-list .step{display:grid; grid-template-columns:52px 1fr; gap:4px 16px; padding:20px 0; border-bottom:1px solid var(--deep-line);}
.steps-list .step::after{display:none;}
.steps-list .step-index{grid-row:span 2; margin:0;}
.steps-list .step h3{margin:6px 0 2px;}
.insight-note{margin-top:16px; font-size:13px; color:var(--on-deep-muted);}

/* ---------- RESPONSIVE ---------- */
/* The menu collapses to the hamburger below 1024px, not 900px: between the two
   the full menu did not fit (brand name touching the first link, buttons
   wrapping onto two lines). Layout rules still switch at 900px, below. */
@media (max-width: 1023px){
  :root{--nav-h:68px;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--deep-line);
    padding:8px 24px 24px;
    transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible; }
  .nav-links a{ padding:16px 0; font-size:16px; border-bottom:1px solid var(--deep-line); }
  .nav-links a::after{ display:none; }
  .nav-demat{ border-bottom:1px solid var(--deep-line) !important; padding:16px 0 !important; }
  .nav-cta{ text-align:center; margin-top:16px; padding:14px 20px !important; border-bottom:none !important; }
}
@media (max-width: 900px){
  .hero{padding-bottom:80px;}
  .hero-grid, .insight-split{grid-template-columns:1fr; gap:48px;}
  .hero-meta{flex-wrap:wrap; gap:16px 28px;}
  .features-grid, .features-grid.features-grid-4, .steps, .steps.steps-4, .pricing-grid{grid-template-columns:1fr;}
  .proof-grid{grid-template-columns:repeat(2,1fr); gap:28px;}
  .compare-hint{display:flex;}
  .founder-card{grid-template-columns:1fr; gap:20px; padding:28px 22px;}
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
  .metric:nth-child(2){border-right:0;}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .step:not(:last-child)::after{display:none;}
  .step{padding-right:0; margin-bottom:28px;}
  .steps-list .step{margin-bottom:0;}
  section{padding:72px 0;}
  .metrics-strip{padding-bottom:72px;}
  .wrap{padding:0 16px;}
  .live-strip{margin-bottom:56px;}
  .live-strip-label{padding-left:16px;}
}
@media (max-width: 480px){
  .metrics-grid{grid-template-columns:1fr;}
  .metric{border-right:0 !important; border-bottom:1px solid var(--line);}
  .metric:last-child{border-bottom:0;}
  .pnl-row{grid-template-columns:1fr auto;}
  .pnl-row .p{display:none;}
}

.price-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:4px 0 12px;padding:6px 12px;border-radius:99px;border:1px solid rgba(217,166,87,.55);background:rgba(217,166,87,.12);color:#8A5F1A;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;}
.price-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#D9A657;box-shadow:0 0 0 0 rgba(217,166,87,.6);animation:adBadgePulse 1.8s infinite;}
@keyframes adBadgePulse{0%{box-shadow:0 0 0 0 rgba(217,166,87,.6)}70%{box-shadow:0 0 0 7px rgba(217,166,87,0)}100%{box-shadow:0 0 0 0 rgba(217,166,87,0)}}
@media (prefers-reduced-motion: reduce){.price-badge::before{animation:none}}

/* Footer legal row and risk line. Shared by every page, so they live here and
   not only in motion.css (homepage) and legal.css (legal pages). */
.footer-legal{display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:18px; margin-top:18px; border-top:1px solid rgba(255,255,255,.1);}
.footer-legal a{font-size:14px;}
.footer-risk{font-size:12.5px; line-height:1.55; opacity:.75; margin-top:12px; margin-bottom:0;}

/* Phones. Form fields need 16px text or an iPhone zooms the whole page in
   when one is tapped, and stays zoomed. Footer and inline links get room
   enough to tap (24px is the WCAG 2.2 minimum target). */
@media (max-width: 760px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{font-size:16px !important;}
  .footer-links{gap:4px 20px;}
  .footer-links a, .footer-legal a{display:inline-block; padding:8px 0;}
  .footer-legal{gap:0 20px;}
  .inline-link{display:inline-block; padding:4px 0;}
}