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

:root{
  --bg:#FAF4EA;
  --surface:#F1E7D6;
  --surface-2:#E8DBC3;
  --line:#E1D2B3;
  --ink:#1B160E;
  --ink-dim:#5C5442;
  --lock:#1E7A54;
  --gap:#2F6690;
  --on-accent:#FAF4EA;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
::selection{background:var(--lock); color:var(--on-accent);}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,244,234,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:0.02em; display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none;}
.logo .mark{color:var(--ink); flex-shrink:0; display:block;}
.tabbar{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:3px;}
.nav-link{
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-dim);
  background:none; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; transition:all .15s;
  text-decoration:none; display:inline-block;
}
.nav-link.active{background:var(--lock); color:var(--on-accent); font-weight:600;}
.nav-link:not(.active):hover{color:var(--ink);}
.nav-cta{
  font-family:var(--mono); font-size:13px; font-weight:600;
  border:1px solid var(--lock); color:var(--lock); padding:8px 16px; border-radius:4px;
  text-decoration:none; white-space:nowrap;
}
@media(max-width:760px){ .tabbar{display:none;} }

/* MOBILE NAV STRIP */
.mobile-tabs{display:none; border-bottom:1px solid var(--line); background:var(--surface);}
@media(max-width:760px){ .mobile-tabs{display:flex;} }
.mobile-tabs .wrap{display:flex; gap:4px; height:auto; padding:8px 20px;}
.mobile-tabs .nav-link{flex:1; text-align:center;}

/* HERO */
header.hero{padding:88px 0 32px; position:relative; overflow:hidden;}
header.hero::before{
  content:''; position:absolute; top:-140px; right:-160px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle, var(--gap) 0%, transparent 70%);
  opacity:0.16; pointer-events:none;
}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gap); margin-bottom:22px; display:flex; align-items:center; gap:10px; position:relative;
}
.eyebrow::before{content:''; width:18px; height:1px; background:var(--gap);}
h1{
  font-family:var(--sans); font-weight:800; font-size:clamp(36px,5.6vw,60px);
  line-height:1.05; letter-spacing:-0.02em; max-width:820px; color:var(--ink); position:relative;
}
h1 span{color:var(--lock);}
.sub{font-size:18px; color:var(--ink-dim); max-width:560px; margin-top:22px; line-height:1.6; position:relative;}
.sub-note{font-size:13.5px; color:var(--ink-dim); max-width:560px; margin-top:12px; line-height:1.55; position:relative; font-family:var(--mono);}
.sub-note strong{color:var(--ink);}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; position:relative;}
.btn-primary{
  font-family:var(--mono); font-weight:600; font-size:14px;
  background:var(--lock); color:var(--on-accent); padding:14px 26px; border-radius:3px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s;
  border:1px solid var(--lock);
}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{
  font-family:var(--mono); font-weight:500; font-size:14px;
  border:1px solid var(--line); color:var(--ink); padding:14px 26px; border-radius:3px;
  text-decoration:none; transition:border-color .15s; cursor:pointer; background:none;
}
.btn-ghost:hover{border-color:var(--ink-dim);}

.example-tag{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gap); display:flex; align-items:center; gap:8px; margin-top:44px; margin-bottom:16px;}
.example-tag::before{content:''; width:18px; height:1px; background:var(--gap);}

/* stats mini strip on Overview */
.stats-strip{margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; position:relative;}
@media(max-width:760px){.stats-strip{grid-template-columns:1fr 1fr;}}
.stat-cell{background:var(--surface); padding:24px 20px;}
.stat-num{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--lock);}
.stat-label{font-size:12.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5;}

/* SECTIONS */
section{padding:64px 0; border-top:1px solid var(--line);}
section:first-of-type{border-top:none;}
.section-tag{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gap); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.section-tag::before{content:'\2192'; font-family:var(--sans);}
h2, section h1{font-size:clamp(24px,3.6vw,32px); font-weight:800; letter-spacing:-0.01em; max-width:640px; color:var(--ink);}
.lede{color:var(--ink-dim); font-size:16.5px; max-width:640px; margin-top:14px; line-height:1.65;}

/* DOUBTS (objection-handling strip) */
.doubts-grid{margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
@media(max-width:860px){.doubts-grid{grid-template-columns:1fr;}}
.doubt{background:var(--surface); padding:26px 22px;}
.doubt-icon{width:38px; height:38px; border-radius:50%; background:var(--surface-2); border:2px solid var(--lock); color:var(--lock); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:15px; margin-bottom:14px;}
.doubt h3{font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.doubt p{font-size:13.5px; color:var(--ink-dim); line-height:1.5;}

/* FLOW DIAGRAM (icon-driven process, reused across pages) */
.flow{margin-top:40px; display:flex; gap:4px;}
@media(max-width:760px){.flow{flex-direction:column; gap:28px;}}
.flow-step{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; padding:0 10px;}
.flow-step:not(:last-child)::after{
  content:''; position:absolute; top:27px; left:calc(50% + 34px); width:calc(100% - 20px); height:2px;
  background:var(--line);
}
@media(max-width:760px){.flow-step:not(:last-child)::after{display:none;}}
.flow-icon{width:56px; height:56px; border-radius:50%; background:var(--surface); border:2px solid var(--lock); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; margin-bottom:14px; color:var(--lock); font-family:var(--mono); position:relative; z-index:1;}
.flow-step h4{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.flow-step p{font-size:12.5px; color:var(--ink-dim); line-height:1.5; max-width:190px;}

/* STORY WALKTHROUGH (plain-english, one fact per line, read top to bottom) */
.story{margin-top:36px; display:flex; flex-direction:column; max-width:640px;}
.story-line{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.story-num{font-family:var(--mono); color:var(--gap); font-weight:700; font-size:14px; flex-shrink:0; width:18px;}
.story-text{font-size:17px; color:var(--ink); line-height:1.55;}
.story-text strong{color:var(--lock); font-weight:700;}
.story-line.final{background:var(--surface); border:1px solid var(--lock); border-radius:8px; margin-top:14px; padding:20px 22px; border-bottom:1px solid var(--lock);}
.story-line.final .story-text{font-size:18.5px; font-weight:600;}

/* OUTCOME COMPARISON (per-side stake + payout, profit shown separately in math-strip) */
.outcome-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; margin-top:32px;}
@media(max-width:760px){.outcome-grid{grid-template-columns:1fr;}}
.outcome-card{background:var(--surface); border:2px solid var(--lock); border-radius:12px; padding:30px 26px; text-align:center;}
.outcome-card .oc-label{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); margin-bottom:12px;}
.outcome-card .oc-team{font-size:18px; font-weight:800; color:var(--ink); margin-bottom:16px;}
.outcome-card .oc-payout-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:4px;}
.outcome-card .oc-profit{font-family:var(--mono); font-size:36px; font-weight:700; color:var(--lock); line-height:1;}
.outcome-card .oc-check{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); margin-top:12px;}
.outcome-card .oc-profit-line{font-family:var(--mono); font-size:14px; color:var(--ink); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.outcome-card .oc-profit-line strong{color:var(--lock); font-size:16px;}
.outcome-vs{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--ink-dim); font-weight:600; padding:0 4px;}
.outcome-caption{margin-top:20px; font-size:14.5px; color:var(--ink-dim); line-height:1.65; max-width:660px;}
.outcome-caption strong{color:var(--ink);}
.outcome-caption a{color:var(--gap); text-decoration:underline;}

/* MATH STRIP (explicit combined arithmetic: total in, total back, profit) */
.math-strip{margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px 26px; max-width:440px;}
.math-row{display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-family:var(--mono); font-size:14px;}
.math-row .ml{color:var(--ink-dim);}
.math-row .mv{color:var(--ink); font-weight:700; text-align:right;}
.math-divider{border-top:1px dashed var(--line); margin:4px 0;}
.math-row.total{padding-top:14px;}
.math-row.total .ml{font-size:14.5px; color:var(--ink); font-weight:600;}
.math-row.total .mv{font-size:23px; color:var(--lock);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--ink); cursor:pointer; padding:20px 0; font-size:16px; font-weight:600; font-family:var(--sans); display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-q .plus{font-family:var(--mono); color:var(--gap); font-size:18px; transition:transform .2s; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{color:var(--ink-dim); font-size:14.5px; line-height:1.7; padding-bottom:20px; max-width:680px;}

/* CTA FOOTER */
.cta-final{padding:72px 0 64px;}
.cta-box{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:48px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; scroll-margin-top:84px;}
.cta-box h2{max-width:420px;}
.cta-box .lede{margin-top:10px;}

.contact-form{display:flex; flex-direction:column; gap:12px; min-width:280px; flex:1; max-width:380px;}
.contact-form input, .contact-form textarea{
  font-family:var(--sans); font-size:14px; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); padding:12px 14px; border-radius:4px; outline:none; resize:none; transition:border-color .15s;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--lock);}
.contact-form textarea{min-height:70px; font-family:var(--sans);}
.contact-form button{
  font-family:var(--mono); font-weight:600; font-size:14px; background:var(--lock); color:var(--on-accent);
  padding:13px 20px; border-radius:4px; border:none; cursor:pointer; transition:opacity .15s;
}
.contact-form button:disabled{opacity:0.6; cursor:default;}
.form-status{font-family:var(--mono); font-size:12.5px; min-height:16px;}
.form-status.ok{color:var(--lock);}
.form-status.err{color:#B4453A;}
.form-fallback{font-size:12.5px; color:var(--ink-dim); margin-top:2px;}
.form-fallback a{color:var(--lock); text-decoration:none;}
.hp-field{display:none !important;}

footer{border-top:1px solid var(--line); padding:32px 0;}
footer .logo{font-size:13px;}
.foot-tagline{font-size:13px; color:var(--ink-dim); margin-top:10px;}
.foot-note{font-size:11.5px; color:var(--ink-dim); max-width:640px; line-height:1.6; margin-top:14px;}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }