/* PulseTrader Pro - shared site stylesheet (redesign Phase 3)
   Design tokens inherited from the existing brand (see WEBSITE_DESIGN.md). Australian English,
   no em-dashes in content. Mobile first. */

/* ---------- tokens ---------- */
:root{
  --bg-base:#0B0F14; --bg-surface:#121A24; --bg-raised:#1A2431;
  --border:#243040; --border-strong:#34465C;
  --primary:#3B82F6; --primary-text:#4488F6; --primary-hover:#2563EB; --primary-soft:#1E3A5F;
  --secondary:#14B8A6; --secondary-soft:#0E3A36;
  --text:#E6EDF3; --text-2:#9AA8B8; --text-muted:#7F8B99;
  --gain:#22C55E; --loss:#F05252; --warning:#F59E0B;

  --display:'Saira Condensed',Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:96px;
  --r-sm:8px; --r-md:16px; --r-pill:999px;
  --maxw:1120px; --gutter:20px;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-base); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.08; margin:0 0 var(--s4); letter-spacing:.2px}
h1{font-size:clamp(2.1rem,6vw,3.4rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-size:1.45rem; font-weight:700}
p{margin:0 0 var(--s4); max-width:68ch}
a{color:var(--primary-text); text-decoration:none}
a:hover{text-decoration:underline}
.eyebrow{font-family:var(--body); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:.78rem; color:var(--secondary); margin:0 0 var(--s3)}
.muted{color:var(--text-2)}
.small{font-size:.86rem}
.center{text-align:center}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
section{padding:var(--s8) 0}
@media (max-width:640px){ section{padding:var(--s7) 0} }
.section-tight{padding:var(--s7) 0}
.grid{display:grid; gap:var(--s5)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s4); top:var(--s4); z-index:100; background:var(--primary); color:var(--bg-base);
  padding:var(--s2) var(--s4); border-radius:var(--r-sm)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--body); font-weight:600; font-size:1rem; line-height:1;
  min-height:44px; padding:0 var(--s5); border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s; text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary); color:var(--bg-base)}
.btn-primary:hover{background:var(--primary-hover); color:#fff}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--bg-raised); border-color:var(--text-2)}
.btn-lg{min-height:52px; padding:0 var(--s6); font-size:1.05rem}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(11,15,20,.85);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border)}
.nav-in{display:flex; align-items:center; gap:var(--s5); height:64px}
.brand{display:flex; align-items:center; gap:var(--s2); font-family:var(--display);
  font-weight:800; font-size:1.15rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--secondary);
  box-shadow:0 0 0 4px var(--secondary-soft)}
.nav-links{display:flex; align-items:center; gap:var(--s5); margin-left:auto}
.nav-links a{color:var(--text-2); font-weight:500; font-size:.95rem}
.nav-links a:hover{color:var(--text); text-decoration:none}
.nav-cta{margin-left:var(--s3)}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--border-strong);
  color:var(--text); width:44px; height:44px; border-radius:var(--r-sm); font-size:1.2rem; cursor:pointer}
@media (max-width:860px){
  .nav-links{position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--bg-surface); border-bottom:1px solid var(--border);
    padding:var(--s3) var(--gutter) var(--s5); margin:0; display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:var(--s3) 0; border-bottom:1px solid var(--border); font-size:1.05rem}
  .nav-cta{margin:var(--s3) 0 0}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
}

/* ---------- hero ---------- */
.hero{padding-top:var(--s8); padding-bottom:var(--s7)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s7); align-items:center}
.hero h1{margin-bottom:var(--s4)}
.hero .lede{font-size:1.15rem; color:var(--text-2); margin-bottom:var(--s5)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:var(--s6)} }

/* ---------- screenshot frame (placeholder-friendly) ---------- */
.shot{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.shot .bar{display:flex; align-items:center; gap:6px; padding:10px var(--s4); border-bottom:1px solid var(--border);
  background:var(--bg-raised)}
.shot .bar i{width:10px; height:10px; border-radius:50%; background:var(--border-strong)}
.shot .bar span{margin-left:var(--s3); color:var(--text-muted); font-size:.8rem}
.shot .ph{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.85rem; text-align:center; padding:var(--s5);
  background:repeating-linear-gradient(135deg,var(--bg-surface),var(--bg-surface) 10px,#0f1620 10px,#0f1620 20px)}
.shot .ph b{display:block; color:var(--text-2); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}

/* ---------- proof strip ---------- */
.proof{background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.proof-in{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s5); padding:var(--s5) 0}
.proof-item{display:flex; align-items:center; gap:var(--s2); color:var(--text-2); font-weight:500; font-size:.95rem}
.proof-item svg{flex:0 0 20px; color:var(--secondary)}

/* ---------- Q section blocks ---------- */
.q{border-top:1px solid var(--border)}
.q-head{display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s5)}
.q-num{font-family:var(--mono); color:var(--primary-text); font-size:.9rem; font-weight:600}
.q-eyebrow{color:var(--text-muted); font-size:.85rem; margin-bottom:var(--s2)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center}
.two-col.rev .col-visual{order:-1}
@media (max-width:860px){ .two-col{grid-template-columns:1fr; gap:var(--s6)} .two-col.rev .col-visual{order:0} }
.jump{display:inline-flex; align-items:center; gap:6px; font-weight:600; margin-top:var(--s2)}
.jump::after{content:"\2192"; transition:transform .15s}
.jump:hover::after{transform:translateX(3px)}

/* ---------- cards ---------- */
.card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.card.rec{border-color:var(--primary)}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.cards-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
@media (max-width:860px){ .cards-3{grid-template-columns:1fr} .cards-4{grid-template-columns:1fr} }
.card h3{margin-bottom:var(--s2)}
.card .ic{width:40px; height:40px; border-radius:var(--r-sm); background:var(--primary-soft);
  display:flex; align-items:center; justify-content:center; color:var(--secondary); margin-bottom:var(--s3)}
.card p{color:var(--text-2); margin-bottom:0}

/* ---------- step diagram ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); counter-reset:step}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.stepc{position:relative; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--s5)}
.stepc .n{width:32px; height:32px; border-radius:50%; background:var(--primary-soft); color:var(--text);
  font-family:var(--mono); font-weight:600; display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3)}
.stepc h3{font-size:1.15rem; margin-bottom:var(--s2)}
.stepc p{font-size:.95rem; color:var(--text-2); margin:0}

/* ---------- fit lists ---------- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
@media (max-width:860px){ .fit{grid-template-columns:1fr} }
.fit ul{list-style:none; margin:0; padding:0}
.fit li{display:flex; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--border); color:var(--text-2)}
.fit li svg{flex:0 0 20px; margin-top:2px}
.fit .yes li svg{color:var(--gain)} .fit .no li svg{color:var(--loss)}

/* ---------- chart card ---------- */
.chart-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.chart-label{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-bottom:var(--s4);
  font-size:.82rem; color:var(--text-muted)}
.chart-label b{color:var(--text-2); font-weight:600}
.chart-stats{display:flex; flex-wrap:wrap; gap:var(--s6); margin-bottom:var(--s4)}
.chart-stats .stat .v{font-family:var(--mono); font-size:1.6rem; font-weight:600; line-height:1}
.chart-stats .stat .k{color:var(--text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-top:4px}
.v.gain{color:var(--gain)} .v.loss{color:var(--loss)}
.chart-svg{width:100%; height:auto; display:block}
.pp-warn{display:flex; gap:var(--s2); margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border);
  color:var(--text-muted); font-size:.82rem}
.pp-warn svg{flex:0 0 16px; color:var(--warning); margin-top:2px}

/* ---------- risk card (inline) ---------- */
.risk-card{background:var(--bg-surface); border:1px solid var(--border); border-left:3px solid var(--warning);
  border-radius:var(--r-md); padding:var(--s5)}
.risk-card h3{color:var(--warning); font-size:1.1rem}
.risk-card p{color:var(--text-2); margin-bottom:0}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--border); padding:var(--s4) 0}
.faq summary{font-family:var(--display); font-weight:700; font-size:1.15rem; cursor:pointer; list-style:none;
  display:flex; gap:var(--s3); align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--primary-text); font-weight:700; width:1em}
.faq details[open] summary::before{content:"\2212"}
.faq details p{margin:var(--s3) 0 0 calc(1em + var(--s3)); color:var(--text-2)}

/* ---------- CTA block ---------- */
.cta-block{background:linear-gradient(180deg,var(--bg-surface),var(--bg-raised)); border-top:1px solid var(--border)}
.cta-block .wrap{text-align:center}
.cta-block p{margin:0 auto var(--s5); color:var(--text-2)}

/* ---------- diagram (custody 3-node, inline svg wrapper) ---------- */
.diagram{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.diagram svg{width:100%; height:auto}
.diagram figcaption{color:var(--text-muted); font-size:.82rem; margin-top:var(--s3); text-align:center}

/* ---------- footer + risk band ---------- */
.risk-band{background:#1a1206; border-top:1px solid #3a2a0a; color:#F5C879}
.risk-band .wrap{display:flex; gap:var(--s3); padding:var(--s4) var(--gutter); font-size:.85rem; align-items:flex-start}
.risk-band svg{flex:0 0 18px; color:var(--warning); margin-top:1px}
footer.site{background:var(--bg-surface); border-top:1px solid var(--border); color:var(--text-2)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s5); padding:var(--s7) 0 var(--s5)}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h4{font-family:var(--body); font-weight:600; color:var(--text); font-size:.85rem;
  text-transform:uppercase; letter-spacing:.08em; margin:0 0 var(--s3)}
.foot-grid a{display:block; color:var(--text-2); padding:var(--s1) 0; font-size:.92rem}
.foot-grid a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--border); padding:var(--s4) 0; font-size:.82rem; color:var(--text-muted);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important; transition:none!important} }

/* inline icon placeholder (filled by JS; empty before, so no raw-token flash) */
.svgi{display:inline-flex; align-items:center}
.svgi svg{display:block}

/* ---------- legal pages ---------- */
.legalbody{max-width:800px; margin:0 auto}
.legalbody h1{font-size:clamp(1.9rem,5vw,2.6rem); margin-bottom:var(--s5)}
.legalbody h2{font-size:1.4rem; margin:var(--s7) 0 var(--s3)}
.legalbody h3{font-size:1.1rem; margin:var(--s5) 0 var(--s2)}
.legalbody p, .legalbody li{color:var(--text-2)}
.legalbody ul, .legalbody ol{padding-left:var(--s5); margin:0 0 var(--s4)}
.legalbody li{margin:var(--s2) 0}
.legalbody a{color:var(--primary-text)}
.legalbody strong{color:var(--text)}
.legalbody .muted, .legalbody small{color:var(--text-muted)}
.legalbody table{width:100%; border-collapse:collapse; margin:var(--s4) 0; font-size:.92rem}
.legalbody th, .legalbody td{text-align:left; padding:var(--s3); border:1px solid var(--border); color:var(--text-2); vertical-align:top}
.legalbody th{color:var(--text); font-weight:600; background:var(--bg-raised)}

/* ---------- logo lockup (P mark left of the two-tone wordmark) ---------- */
.brandmark{height:30px;width:auto;display:block;flex:0 0 auto}
.brandword{display:inline-flex;letter-spacing:.2px}
.bw-pulse{color:var(--text)}
.bw-trader{color:var(--primary-text)}
.bw-pro{color:var(--text-muted)}
.foot-grid .brandmark{height:34px}