/* The Money Chronicle — shared marketing site styles.
   Mirrors the app's own dark/gold language so the site and the product
   feel like one thing. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0B0E14;
  --panel:#12161F;
  --panel-2:#171C27;
  --panel-3:#1C2230;
  --border:#232937;
  --border-soft:#1a2029;
  --text:#E7EAF0;
  --text-dim:#8A93A6;
  --text-faint:#525A6B;
  --gold:#F0B942;
  --gold-dim:#7A5E22;
  --gold-glow:rgba(240,185,66,0.14);
  --profit:#4ADE9C;
  --loss:#FB7185;
  --font-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
/* clip, not hidden: overflow-x:hidden makes html/body a scroll container, which
   silently kills position:sticky on every descendant — the top nav and the docs
   sidebar both stop sticking. clip contains overflow the same way without it. */
html,body{margin:0;padding:0;overflow-x:clip;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;max-width:100vw;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(240,185,66,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(74,222,156,0.05), transparent 60%);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* App screenshots are all captured at the same ratio. Declaring it up front
   reserves the space before the image loads — without this, lazy-loaded shots
   pop in and push content down, so an anchor link lands in the wrong place. */
.hero-shot img, .showcase-img img, .doc-shot img{aspect-ratio:1400 / 866;width:100%;height:auto;}

/* Wider than the old 1120px so large screens aren't mostly empty margin,
   but capped well short of the viewport — full-bleed text is unreadable. */
.wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 40px;}
.wrap-narrow{max-width:940px;}
@media (max-width:700px){ .wrap{padding:0 20px;} }

/* ---------- Nav ---------- */
.nav{border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:20;
  background:rgba(11,14,20,0.86);backdrop-filter:blur(12px);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:32px;height:32px;border-radius:7px;background:linear-gradient(155deg,var(--gold) 0%, #a3781f 100%);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(240,185,66,0.25);flex-shrink:0;}
.brand-mark svg{width:17px;height:17px;}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:0.3px;white-space:nowrap;}
.brand-text .dot{color:var(--gold);}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--text-dim);}
.nav-links a{padding:4px 0;border-bottom:1.5px solid transparent;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--gold);border-bottom-color:var(--gold-dim);}
.nav-cta{background:linear-gradient(155deg,var(--gold),#c99530);color:#1a1305;font-weight:600;
  font-size:13.5px;padding:9px 16px;border-radius:8px;white-space:nowrap;}
.nav-cta:hover{filter:brightness(1.08);}
@media (max-width:820px){ .nav-links{display:none;} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:9px;
  font-size:14.5px;font-weight:600;border:1px solid var(--border);transition:all .15s ease;}
.btn svg{width:16px;height:16px;flex-shrink:0;}
.btn-gold{background:linear-gradient(155deg,var(--gold),#c99530);border:none;color:#1a1305;}
.btn-gold:hover{filter:brightness(1.08);}
.btn-ghost{background:var(--panel-2);color:var(--text);}
.btn-ghost:hover{border-color:var(--text-faint);}
.btn-sm{padding:9px 15px;font-size:13px;}

/* ---------- Hero ---------- */
.hero{padding:84px 0 60px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--gold);
  background:var(--gold-glow);border:1px solid var(--gold-dim);padding:6px 14px;border-radius:20px;
  margin-bottom:26px;letter-spacing:0.3px;}
h1{font-family:var(--font-display);font-size:56px;line-height:1.08;font-weight:700;margin:0 0 20px;letter-spacing:-0.8px;}
h1 .gold{color:var(--gold);}
.hero-sub{font-size:18px;line-height:1.65;color:var(--text-dim);max-width:700px;margin:0 auto 34px;}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.hero-note{font-size:12.5px;color:var(--text-faint);}
.hero-shot{margin-top:52px;border-radius:16px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 30px 90px -20px rgba(0,0,0,0.7);}
.hero-shot img{width:100%;}
.hero-caption{font-size:13.5px;color:var(--text-faint);margin:14px auto 0;max-width:620px;line-height:1.6;}

/* Compact "what it is" strip directly under the hero, so the substance isn't
   only reachable by scrolling past three sections. */
.at-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
  background:var(--border-soft);border:1px solid var(--border-soft);border-radius:12px;overflow:hidden;}
.at-glance > div{background:var(--panel);padding:18px 20px;text-align:left;}
.ag-k{display:block;font-size:13.5px;font-weight:600;color:var(--gold);margin-bottom:3px;}
.ag-v{display:block;font-size:13px;color:var(--text-dim);line-height:1.5;}
@media (max-width:820px){ .at-glance{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .at-glance{grid-template-columns:1fr;} }
@media (max-width:700px){ h1{font-size:36px;} .hero{padding:56px 0 40px;} }

/* ---------- Sections ---------- */
section{padding:68px 0;}
.section-head{text-align:center;max-width:660px;margin:0 auto 46px;}
.section-tag{font-size:12.5px;font-weight:600;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.section-head h2{font-family:var(--font-display);font-size:34px;font-weight:700;margin:0 0 14px;letter-spacing:-0.4px;}
.section-head p{color:var(--text-dim);font-size:15.5px;line-height:1.65;margin:0;}

/* ---------- Trust strip ---------- */
.why{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:var(--panel);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.why-item{padding:32px 26px;text-align:center;border-left:1px solid var(--border-soft);}
.why-item:first-child{border-left:none;}
.why-num{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--gold);margin-bottom:8px;}
.why-label{font-size:13px;color:var(--text-dim);line-height:1.55;}
@media (max-width:820px){ .why-grid{grid-template-columns:repeat(2,1fr);} .why-item:nth-child(3){border-left:none;} }
@media (max-width:480px){ .why-grid{grid-template-columns:1fr;} .why-item{border-left:none;border-top:1px solid var(--border-soft);} .why-item:first-child{border-top:none;} }

/* ---------- Feature cards ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.feat-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;
  transition:border-color .15s ease,transform .15s ease;}
a.feat-card:hover{border-color:var(--gold-dim);transform:translateY(-2px);}
.feat-icon{width:38px;height:38px;border-radius:9px;background:var(--panel-3);display:flex;
  align-items:center;justify-content:center;margin-bottom:16px;}
.feat-icon svg{width:19px;height:19px;color:var(--gold);}
.feat-card h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0 0 8px;}
.feat-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}
@media (max-width:1080px){ .feat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .feat-grid{grid-template-columns:1fr;} }

/* ---------- Showcase rows ---------- */
.showcase{display:flex;flex-direction:column;gap:70px;}
.showcase-row{display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:center;}
.showcase-row.rev .showcase-text{order:2;}
.showcase-row.rev .showcase-img{order:1;}
.showcase-text h3{font-family:var(--font-display);font-size:27px;font-weight:700;margin:0 0 14px;letter-spacing:-0.3px;}
.showcase-text p{color:var(--text-dim);font-size:15px;line-height:1.75;margin:0 0 14px;}
.showcase-img{border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);}
@media (max-width:900px){
  .showcase-row, .showcase-row.rev{grid-template-columns:1fr;gap:28px;}
  .showcase-row.rev .showcase-text{order:1;}
  .showcase-row.rev .showcase-img{order:2;}
}

/* ---------- Sidebar layout (features + guide) ---------- */
.doc-layout{display:grid;grid-template-columns:236px 1fr;gap:56px;align-items:start;padding:52px 0 80px;}
.doc-nav{position:sticky;top:88px;}
.doc-nav-title{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:14px;}
.doc-nav a{display:block;font-size:13.5px;color:var(--text-dim);padding:7px 0 7px 14px;
  border-left:2px solid var(--border);line-height:1.45;}
.doc-nav a:hover{color:var(--text);border-left-color:var(--text-faint);}
.doc-nav a.active{color:var(--gold);border-left-color:var(--gold);}
.doc-nav .nav-group{margin-bottom:22px;}
.doc-main{min-width:0;}
.doc-section{scroll-margin-top:96px;margin-bottom:76px;}
.doc-section:last-child{margin-bottom:0;}
.doc-section > h2{font-family:var(--font-display);font-size:28px;font-weight:700;margin:0 0 6px;letter-spacing:-0.3px;}
.doc-section .lede{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin:0 0 22px;max-width:760px;}
.doc-section h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin:30px 0 10px;}
.doc-section p{color:var(--text-dim);font-size:14.5px;line-height:1.75;margin:0 0 14px;max-width:760px;}
.doc-shot{border-radius:12px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 18px 50px -18px rgba(0,0,0,0.6);margin:22px 0;}
.doc-shot img{width:100%;}
.shot-cap{font-size:12.5px;color:var(--text-faint);margin-top:-8px;margin-bottom:24px;line-height:1.6;}
@media (max-width:960px){
  .doc-layout{grid-template-columns:1fr;gap:0;padding-top:32px;}
  .doc-nav{display:none;}
}

/* ---------- Bullets ---------- */
.tick-list{list-style:none;padding:0;margin:0 0 16px;}
.tick-list li{position:relative;padding-left:24px;font-size:14.5px;color:var(--text-dim);
  line-height:1.7;margin-bottom:9px;max-width:760px;}
.tick-list li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--gold);}
.tick-list li strong{color:var(--text);font-weight:600;}

/* ---------- Numbered steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 20px;}
.steps li{counter-increment:step;position:relative;padding-left:44px;margin-bottom:20px;max-width:760px;}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;
  border-radius:8px;background:var(--panel-3);border:1px solid var(--border);color:var(--gold);
  font-family:var(--font-mono);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.steps li strong{display:block;color:var(--text);font-size:15px;font-weight:600;margin-bottom:4px;}
.steps li p{margin:0;font-size:14px;}

/* ---------- Callouts ---------- */
.callout{border-radius:10px;padding:16px 18px;margin:20px 0;font-size:14px;line-height:1.7;
  color:var(--text-dim);border:1px solid var(--border);background:var(--panel);max-width:760px;}
.callout strong{color:var(--text);}
.callout.warn{border-color:var(--gold-dim);background:var(--gold-glow);}
.callout.warn strong{color:var(--gold);}

code{font-family:var(--font-mono);font-size:0.9em;background:var(--panel-3);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px;color:var(--text);}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;}
.faq details{border:1px solid var(--border);border-radius:10px;background:var(--panel);margin-bottom:10px;}
.faq summary{cursor:pointer;padding:16px 20px;font-size:15px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);font-size:20px;font-weight:400;line-height:1;flex-shrink:0;}
.faq details[open] summary::after{content:"\2212";}
.faq details[open] summary{border-bottom:1px solid var(--border-soft);}
.faq .faq-body{padding:16px 20px;font-size:14.5px;color:var(--text-dim);line-height:1.75;}
.faq .faq-body p{margin:0 0 12px;}
.faq .faq-body p:last-child{margin:0;}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:14px;max-width:760px;margin:8px 0 20px;}
.spec td{padding:11px 0;border-bottom:1px solid var(--border-soft);color:var(--text-dim);vertical-align:top;}
.spec td:first-child{color:var(--text);font-weight:500;width:210px;padding-right:20px;}
.spec tr:last-child td{border-bottom:none;}

/* ---------- Download ---------- */
.download{background:var(--panel);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:0 auto;}
.dl-card{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;}
.dl-icon{width:44px;height:44px;border-radius:10px;background:var(--panel-3);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.dl-icon svg{width:24px;height:24px;color:var(--gold);}
.dl-card h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 6px;}
.dl-card .dl-sub{font-size:12.5px;color:var(--text-faint);margin-bottom:16px;}
.dl-steps{list-style:none;padding:0;margin:0 0 20px;font-size:13px;color:var(--text-dim);line-height:1.9;}
.dl-steps li{padding-left:20px;position:relative;}
.dl-steps li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold);}
.dl-card .btn{width:100%;justify-content:center;margin-top:auto;}
.dl-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--text-faint);background:var(--panel-3);
  border:1px solid var(--border);padding:4px 10px;border-radius:20px;margin-bottom:14px;width:fit-content;}
@media (max-width:900px){ .dl-grid{grid-template-columns:1fr;} }

/* ---------- Page header (features/guide) ---------- */
.page-head{padding:56px 0 8px;text-align:center;}
.page-head h1{font-size:40px;margin-bottom:14px;}
.page-head p{color:var(--text-dim);font-size:16px;line-height:1.65;max-width:640px;margin:0 auto;}

/* ---------- Footer ---------- */
footer{padding:44px 0 64px;text-align:center;border-top:1px solid var(--border-soft);}
footer .brand{justify-content:center;margin-bottom:14px;}
footer p{font-size:12.5px;color:var(--text-faint);line-height:1.7;max-width:520px;margin:0 auto;}
footer .foot-links{margin-top:18px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--text-dim);}
footer .foot-links a:hover{color:var(--text);}