@font-face{
  font-family:"Onest";
  src:url("/assets/fonts/Onest-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

:root{
  --green:#0b6745;
  --green-2:#13845b;
  --deep:#082f24;
  --ink:#13201c;
  --muted:#66736e;
  --cream:#f1eee5;
  --paper:#faf9f5;
  --white:#fff;
  --line:#d8ddd7;
  --soft:#e9eee9;
  --gold:#c8a85e;
  --error:#b42318;
  --shadow:0 24px 70px rgba(8,47,36,.12);
  --radius:8px;
  --container:1320px
}

body{
  overflow-x:clip;
  background:#f8f7f2;
  color:var(--ink);
  font-family:"Onest","Segoe UI",Arial,sans-serif;
  letter-spacing:-.012em
}

body::selection{background:#c8a85e;color:#082f24}

.site-header{
  height:84px;
  grid-template-columns:1fr auto 1fr;
  padding-inline:max(28px,calc((100vw - var(--container))/2));
  background:rgba(248,247,242,.92);
  border-bottom:1px solid rgba(19,32,28,.12);
  backdrop-filter:blur(20px)
}

.brand img{width:154px}
.brand span{
  color:#52605a;
  font-size:11px;
  font-weight:650;
  letter-spacing:.05em;
  text-transform:uppercase
}

.site-header nav{gap:38px;color:#3f4b46;font-size:13px;font-weight:520}
.site-header nav a{position:relative}
.site-header nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-9px;
  left:0;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease
}
.site-header nav a:hover::after{transform:scaleX(1)}

.text-action{font-size:14px;font-weight:650}

.button{
  min-height:50px;
  border-radius:4px;
  padding-inline:24px;
  font-weight:680;
  letter-spacing:-.015em
}
.button.primary{background:var(--deep)}
.button.primary:hover{
  background:var(--green);
  box-shadow:none;
  transform:translateY(-1px)
}
.button.compact{min-height:44px;border-radius:3px;padding-inline:19px}
.button.large{min-height:56px;padding-inline:30px}

.hero{
  width:calc(100% - 48px);
  max-width:var(--container);
  min-height:650px;
  margin:28px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:0;
  align-items:stretch;
  overflow:hidden;
  background:var(--deep);
  border-radius:5px
}

.hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:68px 58px 68px 64px;
  color:var(--white)
}

.hero-copy::after{
  content:"";
  position:absolute;
  right:-46px;
  bottom:48px;
  width:110px;
  height:1px;
  background:rgba(200,168,94,.8);
  z-index:3
}

.kicker{
  margin-bottom:28px;
  color:var(--green);
  font-size:12px;
  font-weight:650;
  letter-spacing:.09em;
  text-transform:uppercase
}
.hero .kicker{color:#d7c486}
.kicker>span{width:34px;background:currentColor}

.hero h1{
  max-width:620px;
  color:#fff;
  font-size:clamp(50px,4.7vw,72px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:680
}

.lead{
  max-width:560px;
  margin-top:30px;
  color:#c8d6d1;
  font-size:18px;
  line-height:1.62;
  letter-spacing:-.015em
}

.hero-actions{margin-top:38px;gap:28px}
.hero .button.primary{background:#f5f1e6;color:var(--deep)}
.hero .button.primary:hover{background:#fff}
.hero .quiet-link{color:#eef4f1;font-size:14px;font-weight:560}
.hero .quiet-link:hover{color:#d7c486}
.microcopy{margin-top:20px;color:#9fb5ad;font-size:12px;letter-spacing:.01em}

.hero-visual{
  position:relative;
  min-width:0;
  min-height:650px;
  margin:0;
  overflow:hidden;
  background:#d9d4c7
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,47,36,.24),transparent 28%),linear-gradient(0deg,rgba(8,47,36,.28),transparent 38%)
}
.hero-visual>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:57% center;
  transform:scale(1.005)
}
.hero-visual figcaption{
  position:absolute;
  z-index:2;
  right:24px;
  bottom:24px;
  left:24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 20px;
  align-items:end;
  padding:20px 22px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.42);
  background:rgba(8,47,36,.54);
  backdrop-filter:blur(15px)
}
.hero-visual figcaption span{
  grid-column:1/-1;
  margin-bottom:8px;
  color:#d7c486;
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase
}
.hero-visual figcaption strong{font-size:17px;font-weight:650}
.hero-visual figcaption small{color:#d7e2de;font-size:12px}
.hero-order{
  position:absolute;
  z-index:3;
  top:28px;
  right:28px;
  display:grid;
  min-width:205px;
  padding:17px 18px;
  color:var(--ink);
  background:#f7f3e8;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 55px rgba(8,47,36,.2)
}
.hero-order span{
  color:var(--green);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.hero-order b{margin-top:7px;font-size:26px;font-weight:680;font-variant-numeric:tabular-nums}
.hero-order small{margin-top:2px;color:#6d766f;font-size:11px}

.numbers{
  width:calc(100% - 48px);
  max-width:var(--container);
  margin:0 auto 150px;
  border-color:rgba(19,32,28,.16);
  background:#f8f7f2
}
.numbers article{padding:28px 30px;border-color:rgba(19,32,28,.16)}
.numbers strong{font-size:28px;font-weight:620}
.numbers span{max-width:225px;color:#68736e;font-size:12px;line-height:1.5}

.model-section,.start-section,.closing{
  width:calc(100% - 48px);
  max-width:var(--container)
}
.model-section,.start-section{margin-bottom:150px}

.section-intro{
  grid-template-columns:.88fr 1.12fr;
  column-gap:92px;
  align-items:start
}
.section-intro h2{
  max-width:590px;
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:640
}
.section-intro>p:last-child{
  max-width:535px;
  padding-top:7px;
  color:#5e6a65;
  font-size:17px;
  line-height:1.7
}

.responsibility-grid{
  margin-top:60px;
  overflow:visible;
  border:0;
  border-radius:0;
  gap:18px;
  background:transparent
}
.responsibility{
  min-height:430px;
  padding:42px 44px;
  border:1px solid rgba(19,32,28,.15)
}
.responsibility:first-child{border-right:1px solid rgba(19,32,28,.15)}
.responsibility>p{
  margin-bottom:28px;
  font-size:12px;
  font-weight:680;
  letter-spacing:.07em;
  text-transform:uppercase
}
.responsibility li{
  min-height:96px;
  grid-template-columns:48px 1fr;
  border-color:rgba(19,32,28,.14)
}
.responsibility li>span{font-size:11px}
.responsibility li b{font-size:16px;font-weight:620}
.responsibility li small{font-size:13px;line-height:1.5}
.seller-side{background:#fcfbf7}
.platform-side{
  color:#fff;
  background:var(--deep)
}
.platform-side>p{color:#d7c486}
.platform-side li{border-color:rgba(255,255,255,.14)}
.platform-side li>span,.platform-side li small{color:#aebfb9}

.economics{
  margin-bottom:150px;
  padding-block:102px;
  background:#0a3328;
  gap:100px
}
.economics-copy h2{
  font-size:58px;
  line-height:1;
  font-weight:620
}
.economics-copy>p:not(.kicker){color:#b8c9c3;font-size:17px;line-height:1.7}
.economics-rule{border-color:rgba(255,255,255,.2)}
.economics-rule b{font-weight:600}

.calculator-card{
  padding:40px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 34px 90px rgba(0,18,12,.22)
}
.calculator-head{padding-bottom:25px}
.calculator-head span{font-weight:650}
.rate-pill{border-radius:2px;font-weight:650}
input,select,textarea{border-radius:3px}
.calculation-total strong{font-size:31px;font-weight:670}

.compact-intro{max-width:680px}
.start-list{margin-top:58px}
.start-list li{
  grid-template-columns:82px .75fr 1.25fr;
  padding:34px 0
}
.start-list li>span{color:var(--green);font-size:12px;font-weight:650}
.start-list h3{font-size:21px;font-weight:620}
.start-list p{line-height:1.65}

.closing{
  margin-bottom:0;
  padding:72px 66px;
  border-radius:0;
  color:var(--deep);
  background:#d0b46c
}
.closing .kicker.light{color:var(--deep)}
.closing h2{font-size:56px;font-weight:640}
.closing>div:last-child p{color:#29443b}
.closing .button.inverse{
  color:#fff;
  background:var(--deep);
  border-radius:3px
}
.closing .button.inverse:hover{background:var(--green)}

.site-footer{
  padding-top:64px;
  color:#dce6e2;
  background:#061f18;
  border:0
}
.footer-main{padding-bottom:50px}
.footer-brand img{filter:brightness(0) invert(1);opacity:.96}
.footer-brand span{color:#b7c8c1;border-color:rgba(255,255,255,.22)}
.footer-main>p{color:#9db0a8}
.footer-main nav{color:#ced9d5}
.footer-bottom{border-color:rgba(255,255,255,.14);color:#91a49c}

dialog{
  border-radius:5px;
  padding:38px;
  box-shadow:0 34px 100px rgba(5,31,23,.34)
}
.dialog-close{border-radius:2px}
.auth-tabs{border-radius:3px}
.auth-tabs button{border-radius:2px}
.auth-panel h2{font-weight:650}

@media(max-width:1100px){
  .hero{grid-template-columns:.95fr 1.05fr}
  .hero-copy{padding-inline:44px 38px}
  .hero h1{font-size:56px}
  .hero-order{display:none}
  .economics{gap:54px}
}

@media(max-width:820px){
  .site-header{height:70px}
  .hero{
    width:calc(100% - 32px);
    min-height:0;
    margin-top:16px;
    grid-template-columns:1fr
  }
  .hero-copy{padding:58px 34px}
  .hero-copy::after{display:none}
  .hero-visual{min-height:520px}
  .hero-visual figcaption{right:18px;bottom:18px;left:18px}
  .numbers{
    width:calc(100% - 32px);
    margin-bottom:104px
  }
  .model-section,.start-section,.closing{
    width:calc(100% - 32px)
  }
  .responsibility-grid{gap:0}
  .responsibility:first-child{border-bottom:0}
  .platform-side{border-top:0}
  .section-intro h2{font-size:44px}
  .closing{padding:52px 38px}
}

@media(max-width:520px){
  .site-header{
    grid-template-columns:auto 1fr;
    padding-inline:14px
  }
  .brand img{width:126px}
  .header-actions{gap:2px}
  .header-actions .text-action{
    display:inline-flex;
    min-height:42px;
    padding-inline:8px;
    font-size:12px
  }
  .button.compact{
    min-height:42px;
    padding-inline:11px;
    font-size:12px
  }
  .hero{
    width:calc(100% - 20px);
    border-radius:3px
  }
  .hero-copy{padding:48px 24px 44px}
  .hero h1{font-size:43px}
  .lead{font-size:16px;line-height:1.65}
  .hero-actions{margin-top:30px}
  .hero-visual{min-height:410px}
  .hero-visual>img{object-position:60% center}
  .hero-visual figcaption{
    right:12px;
    bottom:12px;
    left:12px;
    display:grid;
    grid-template-columns:1fr;
    padding:16px
  }
  .hero-visual figcaption small{margin-top:3px}
  .numbers{width:calc(100% - 32px)}
  .numbers article{padding:24px 20px}
  .model-section,.start-section,.closing{width:auto}
  .section-intro h2,.economics-copy h2,.closing h2{font-size:38px}
  .responsibility{min-height:0;padding:30px 24px}
  .economics{padding-block:72px}
  .calculator-card{padding:25px 19px}
  .start-list li{grid-template-columns:46px 1fr}
  .closing{padding:42px 24px}
  dialog{padding:30px 20px}
}