:root{
  --bg:#fbfaf8;
  --card:#fff;
  --text:#1f2428;
  --muted:#66707a;
  --accent:#6d2032;
  --line:#e7e2dc;
  --good:#2f6f4e;
  --warn:#a47315;
  --bad:#9c2f2f
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45
}

a{
  color:inherit;
  text-decoration:none
}

header{
  position:sticky;
  top:0;
  background:rgba(251,250,248,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10
}

.nav{
  max-width:1180px;
  margin:auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  gap:24px
}

.brand{
  font-weight:800;
  letter-spacing:.06em
}

.navlinks{
  display:flex;
  gap:18px;
  margin-left:auto;
  align-items:center
}

.btn{
  display:inline-block;
  padding:11px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:650;
  cursor:pointer
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed
}

main{
  max-width:1180px;
  margin:auto;
  padding:42px 24px 80px
}

.hero{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:28px;
  align-items:stretch
}

.panel,
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--muted);
  font-weight:700
}

h1{
  font-size:54px;
  line-height:1.03;
  margin:10px 0 18px
}

h2{
  font-size:30px;
  margin:0 0 18px
}

h3{
  margin:0 0 8px
}

.lead{
  font-size:20px;
  color:var(--muted);
  max-width:760px
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px
}

.trust{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:22px
}

.trust .card{
  padding:18px
}

.section{
  margin-top:48px
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.small{
  font-size:14px;
  color:var(--muted)
}

.process{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}

.step{
  padding:10px 14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px
}

.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden
}

.table th,
.table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  text-align:left
}

.status{
  font-weight:700
}

.good{
  color:var(--good)
}

.warn{
  color:var(--warn)
}

.bad{
  color:var(--bad)
}

.timeline{
  display:grid;
  gap:12px
}

.milestone{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:14px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff
}

.badge{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff
}

footer{
  border-top:1px solid var(--line);
  padding:28px 24px;
  color:var(--muted)
}

footer .wrap{
  max-width:1180px;
  margin:auto;
  display:flex;
  gap:18px;
  flex-wrap:wrap
}

/* =========================================================
   BUSINESS CORE
   ========================================================= */

.subnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 24px
}

.subnav a{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:14px
}

.subnav a.active{
  background:var(--text);
  color:#fff;
  border-color:var(--text)
}

.stagebar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:18px 0 28px
}

.stagebar .stage{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  background:#fff
}

.stagebar .done{
  border-color:#b7d1c2;
  color:var(--good);
  background:#f5faf7
}

.stagebar .current{
  border-color:#d7c08a;
  color:#7b5812;
  background:#fffaf0
}

.kpirow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0 30px
}

.kpi{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff
}

.kpi b{
  font-size:24px;
  display:block
}

.match-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:20px;
  margin-bottom:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center
}

.match-tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:750
}

.dot{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
  background:#999
}

.dot.good{
  background:var(--good)
}

.dot.warn{
  background:#d39b2c
}

.dot.bad{
  background:var(--bad)
}

.meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:8px;
  color:var(--muted);
  font-size:14px
}

.compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden
}

.compare th,
.compare td{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}

.compare th{
  background:#faf8f5;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}

.compare th:nth-child(1),
.compare td:nth-child(1){
  width:38%
}

.compare th:nth-child(2),
.compare td:nth-child(2){
  width:24%;
  text-align:center
}

.compare th:nth-child(3),
.compare td:nth-child(3){
  width:38%
}

.compare tr:last-child td{
  border-bottom:0
}

.interp{
  font-weight:760
}

.interp.good{
  color:var(--good)
}

.interp.warn{
  color:var(--warn)
}

.interp.bad{
  color:var(--bad)
}

.compromise-box{
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:#fffaf0;
  border:1px solid #eed8a3;
  text-align:left;
  font-size:13px;
  color:#6b551e
}

.locked{
  background:#f7faf8
}

.round{
  font-size:12px;
  color:var(--muted);
  margin-left:7px
}

.actionbar{
  position:sticky;
  bottom:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px)
}

.flow-money{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center
}

.money-box{
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff
}

.arrow{
  font-size:26px;
  color:var(--muted)
}

.summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.summary-item{
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff
}

.label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:700
}

.value{
  font-size:17px;
  margin-top:4px
}

.timeline2{
  position:relative;
  margin-left:12px
}

.timeline2:before{
  content:"";
  position:absolute;
  left:16px;
  top:10px;
  bottom:10px;
  width:2px;
  background:var(--line)
}

.mile{
  position:relative;
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:14px;
  padding:14px 0
}

.mile .node{
  z-index:1;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700
}

.mile.done .node{
  background:#f5faf7;
  border-color:#b7d1c2;
  color:var(--good)
}

.mile.current .node{
  background:#fffaf0;
  border-color:#e6c978;
  color:#8a6416
}

.docsection{
  margin-bottom:18px
}

.docrow{
  display:grid;
  grid-template-columns:1.5fr .7fr .5fr;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  align-items:center
}

.docrow:last-child{
  border-bottom:0
}

.tiny{
  font-size:12px;
  color:var(--muted)
}

.notice{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff
}

.notice.good{
  border-color:#bdd8c8;
  background:#f7fbf8
}

.notice.warn{
  border-color:#ead6a3;
  background:#fffaf0
}

.notice ul{
  margin:10px 0 0 20px;
  padding:0
}

/* =========================================================
   HUMAN-IN-THE-LOOP NEGOTIATION
   ========================================================= */

.wa-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(31,36,40,.42)
}

/*
   IMPORTANT:
   HTML elements with the hidden attribute must remain invisible.
   This rule must override .wa-modal { display:flex; }.
*/

.wa-modal[hidden]{
  display:none !important
}

.wa-modal-panel{
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.18)
}

.wa-modal-panel h2{
  margin:0 0 10px
}

.wa-modal-panel label{
  display:block;
  margin-top:16px;
  font-weight:650
}

.wa-modal-panel input,
.wa-modal-panel textarea{
  display:block;
  width:100%;
  margin-top:7px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font:inherit
}

.wa-modal-panel input:focus,
.wa-modal-panel textarea:focus{
  outline:2px solid #d7c08a;
  outline-offset:1px
}

.wa-counter-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 16px;
  margin-top:4px
}

.wa-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line)
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:820px){

  .hero{
    grid-template-columns:1fr
  }

  .grid2,
  .grid3,
  .grid4,
  .trust{
    grid-template-columns:1fr 1fr
  }

  .navlinks{
    display:none
  }

  h1{
    font-size:40px
  }

  .kpirow{
    grid-template-columns:1fr 1fr
  }

  .summary-grid{
    grid-template-columns:1fr
  }

  .flow-money{
    grid-template-columns:1fr
  }

  .arrow{
    transform:rotate(90deg);
    text-align:center
  }

  .compare th,
  .compare td{
    padding:10px 8px;
    font-size:13px
  }
}

@media(max-width:650px){

  .wa-modal{
    padding:12px;
    align-items:flex-start
  }

  .wa-modal-panel{
    margin-top:20px;
    max-height:94vh;
    padding:20px
  }

  .wa-counter-fields{
    grid-template-columns:1fr
  }

  .wa-modal-actions{
    flex-direction:column-reverse
  }

  .wa-modal-actions .btn{
    width:100%;
    text-align:center
  }
}

@media(max-width:560px){

  .grid2,
  .grid3,
  .grid4,
  .trust{
    grid-template-columns:1fr
  }
}