/* Volyia Plus guide — dedicated editorial layout. */

main{
  padding:0 0 20px;
}

.article{
  width:min(820px,calc(100% - 48px));
  margin:0 auto;
  padding:132px 0 54px;
}

.article-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 30px;
  color:var(--muted)!important;
  font-size:.78rem;
  line-height:1.4;
}

.article-breadcrumb a{
  color:var(--forest2)!important;
  font-weight:650;
  text-decoration:none;
}

.article-breadcrumb a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.article-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:7px 11px;
  border:1px solid #C4DDCB;
  border-radius:999px;
  background:var(--mint);
  color:var(--forest2);
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
}

.article-kicker::before{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--leaf);
  content:"";
}

.article>h1{
  max-width:790px;
  margin:0 0 22px;
  color:var(--forest);
  font-size:clamp(2.55rem,6vw,4.65rem);
  font-weight:790;
  letter-spacing:-.055em;
  line-height:.99;
  text-wrap:balance;
}

.article-deck{
  max-width:750px;
  margin:0;
  color:var(--dim)!important;
  font-size:1.18rem;
  letter-spacing:-.012em;
  line-height:1.68;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px 22px;
  margin:30px 0 0;
  padding:18px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
}

.article-meta span+span::before{
  margin-right:22px;
  color:#9EB1A7;
  content:"•";
}

.article-toc{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:38px 0 12px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--paper);
  box-shadow:0 14px 38px rgba(23,61,45,.065);
}

.article-toc strong{
  grid-column:1/-1;
  margin:0 0 7px;
  color:var(--forest);
  font-size:.77rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.article-toc a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--forest2);
  font-size:.9rem;
  font-weight:650;
  line-height:1.35;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}

.article-toc a::before{
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--leaf);
  content:"";
}

.article-toc a:hover{
  background:var(--mint);
  transform:translateX(2px);
}

.article>h2{
  margin:54px 0 15px;
  padding-top:38px;
  border-top:1px solid var(--border);
  color:var(--forest);
  font-size:clamp(1.75rem,3.5vw,2.25rem);
  font-weight:760;
  letter-spacing:-.035em;
  line-height:1.12;
  scroll-margin-top:96px;
  text-wrap:balance;
}

.article-toc+h2{
  margin-top:34px;
}

.article>h3{
  margin:30px 0 9px;
  color:var(--forest2);
  font-size:1.18rem;
  font-weight:730;
  letter-spacing:-.018em;
  line-height:1.3;
}

.article>p{
  max-width:760px;
  margin:0 0 20px;
  color:var(--dim)!important;
  font-size:1.03rem;
  line-height:1.82;
}

.article>p strong{
  color:var(--forest);
  font-weight:750;
}

.article>p a,
.article-sources a{
  color:var(--forest2)!important;
  font-weight:650;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.article-cta{
  margin:46px 0;
  padding:34px 36px;
  overflow:hidden;
  border:0!important;
  border-radius:24px;
  box-shadow:0 18px 48px rgba(23,61,45,.1);
}

.article-cta-early{
  position:relative;
  background:linear-gradient(145deg,#E8F5EB,#FFFEF9)!important;
  outline:1px solid #B9DCC3;
}

.article-cta-early::after{
  position:absolute;
  top:-52px;
  right:-38px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(224,239,146,.58);
  content:"";
  pointer-events:none;
}

.article-cta h2{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  color:var(--forest)!important;
  font-size:1.7rem;
  font-weight:760;
  letter-spacing:-.03em;
  line-height:1.15;
}

.article-cta p{
  position:relative;
  z-index:1;
  max-width:650px;
  margin:0 0 20px;
  color:var(--dim)!important;
  font-size:.98rem;
  line-height:1.68;
}

.article-cta .btn-download{
  position:relative;
  z-index:1;
  margin:0;
  padding:13px 21px;
  border-radius:999px;
  font-size:.92rem;
}

.article-cta-final{
  background:linear-gradient(145deg,var(--forest),#24543E)!important;
  box-shadow:0 22px 56px rgba(23,61,45,.2);
}

.article-cta-final h2{
  color:#FFF!important;
}

.article-cta-final p{
  color:#DCEBE1!important;
}

.article-cta-final .store-badges{
  gap:12px;
  margin:4px 0 0;
}

.article-cta-final .store-badge{
  display:flex!important;
  align-items:center;
  height:54px;
}

.article-cta-final .store-badge img{
  max-height:48px;
}

.article-cta-final .store-badge.gp img{
  max-height:69px;
}

.article-sources{
  margin:50px 0 0;
  padding:28px 30px!important;
  border:1px solid var(--border)!important;
  border-radius:18px;
  background:rgba(255,254,249,.66);
}

.article-sources h2{
  margin:0 0 8px!important;
  color:var(--forest)!important;
  font-size:1rem;
  font-weight:750;
  letter-spacing:-.01em;
}

.article-sources p{
  margin:0;
  color:var(--muted)!important;
  font-size:.85rem;
  line-height:1.65;
}

.article+.related{
  width:min(900px,calc(100% - 48px));
  max-width:none;
  margin:0 auto;
  padding:44px 0 0!important;
  border-top:1px solid var(--border);
}

.article+.related .related-label{
  color:var(--forest2)!important;
}

.article+.related .related-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.article+.related .related-card{
  padding:20px;
  border-radius:16px;
}

#ckb{
  left:18px!important;
  bottom:18px!important;
  padding:20px!important;
  border-radius:18px!important;
}

#ckb button{
  min-height:36px;
  padding:8px 13px;
  border:1px solid var(--border2);
  border-radius:999px;
  font:650 .8rem/1 var(--font);
  cursor:pointer;
}

#ckbNo{
  margin-right:5px;
}

@media(max-width:700px){
  .article{
    width:min(100% - 32px,820px);
    padding-top:108px;
  }

  .article>h1{
    font-size:clamp(2.35rem,12vw,3.3rem);
    line-height:1.01;
  }

  .article-deck{
    font-size:1.06rem;
    line-height:1.64;
  }

  .article-meta{
    display:grid;
    gap:4px;
  }

  .article-meta span+span::before{
    display:none;
  }

  .article-toc{
    grid-template-columns:1fr;
    padding:18px;
    border-radius:18px;
  }

  .article>h2{
    margin-top:44px;
    padding-top:32px;
    font-size:1.75rem;
  }

  .article>h3{
    font-size:1.1rem;
  }

  .article>p{
    font-size:1rem;
    line-height:1.75;
  }

  .article-cta{
    margin:38px 0;
    padding:28px 24px;
    border-radius:20px;
  }

  .article-cta h2{
    font-size:1.5rem;
  }

  .article-sources{
    padding:24px!important;
  }

  .article+.related{
    width:min(100% - 32px,900px);
  }

  .article+.related .related-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:390px){
  .article{
    width:calc(100% - 28px);
  }

  .article-breadcrumb{
    margin-bottom:24px;
  }

  .article-kicker{
    font-size:.66rem;
    letter-spacing:.075em;
  }

  .article>h1{
    font-size:2.3rem;
  }

  .article-toc a{
    padding:9px 8px;
  }

  .article-cta .btn-download{
    width:100%;
    justify-content:center;
  }
}

@media print{
  .article{
    width:100%;
    padding:20px 0;
  }

  .article-toc,
  .article-cta,
  .article-sources{
    box-shadow:none!important;
  }
}