.page-pricing{
  --pricing-accent:#22c55e;
  --pricing-accent-2:#16a34a;
  --pricing-accent-3:#84cc16;
  background:
    radial-gradient(720px 420px at 78% 8%, color-mix(in oklab, var(--pricing-accent) 16%, transparent), transparent 68%),
    radial-gradient(560px 320px at 10% 22%, color-mix(in oklab, var(--pricing-accent-3) 9%, transparent), transparent 72%),
    var(--bg);
  overflow-x: clip;
}

.theme-light.page-pricing,
.theme-system.page-pricing{
  background:
    radial-gradient(720px 420px at 78% 8%, rgba(34,197,94,.16), transparent 68%),
    linear-gradient(180deg, #fbfdfb 0%, #f6faf7 100%);
}

.page-pricing .pricing-topbar{
  background: color-mix(in oklab, var(--topbar) 84%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.page-pricing .nav a{
  color: color-mix(in oklab, var(--pricing-accent) 72%, var(--text));
  font-weight: 650;
}

.page-pricing .nav a:hover,
.page-pricing .nav a:focus-visible{
  background: color-mix(in oklab, var(--pricing-accent) 8%, transparent);
  color: var(--pricing-accent);
}

.page-pricing .theme-btn{
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--pricing-accent) 18%, var(--border));
}

.page-pricing .pricing-shell{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 0 72px;
}

.page-pricing .pricing-hero{
  display:grid;
  gap: clamp(22px, 4vw, 44px);
  align-items:center;
}

@media (min-width: 900px){
  .page-pricing .pricing-hero{
    grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);
  }
}

.page-pricing .pricing-kicker{
  display:inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--pricing-accent);
  background: color-mix(in oklab, var(--pricing-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--pricing-accent) 22%, var(--border));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-pricing h1,
.page-pricing h2,
.page-pricing h3{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-pricing h1{
  max-width: 11ch;
  margin: 0;
  font-size: clamp(44px, 8vw, 88px);
  line-height: .95;
  letter-spacing: -.055em;
}

.page-pricing .pricing-hero__copy p{
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 21px);
}

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

.page-pricing .pricing-actions .btn,
.page-pricing .pricing-card .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}

.page-pricing .pricing-primary{
  background: linear-gradient(135deg, var(--pricing-accent), var(--pricing-accent-2) 62%, #15803d);
  box-shadow: 0 18px 42px color-mix(in oklab, var(--pricing-accent) 28%, transparent);
}

.page-pricing .pricing-secondary{
  border: 1px solid color-mix(in oklab, var(--text) 14%, var(--border));
}

.page-pricing .pricing-note{
  max-width: 560px;
  font-size: 14px !important;
}

.page-pricing .pricing-card{
  position:relative;
  overflow:hidden;
  scroll-margin-top: 140px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 32px;
  background:
    radial-gradient(420px 220px at 100% 0%, color-mix(in oklab, var(--pricing-accent) 19%, transparent), transparent 68%),
    color-mix(in oklab, var(--card) 95%, transparent);
  border: 1px solid color-mix(in oklab, var(--pricing-accent) 32%, var(--border));
  box-shadow: 0 28px 70px rgba(0,0,0,.2);
}

.theme-light.page-pricing .pricing-card,
.theme-system.page-pricing .pricing-card{
  box-shadow: 0 24px 60px rgba(21,128,61,.13);
}

.page-pricing .pricing-badge{
  display:inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  color: #052e16;
  background: var(--pricing-accent);
  font-size: 12px;
  font-weight: 900;
}

.page-pricing .pricing-card h2{
  margin: 18px 0 10px;
  font-size: 34px;
  line-height:1;
}

.page-pricing .price-row{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  margin: 0 0 14px;
}

.page-pricing .price-row strong{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: clamp(48px, 6vw, 68px);
  line-height: .9;
}

.page-pricing .price-row span,
.page-pricing .pricing-card p{
  color: var(--muted);
}

.page-pricing .pricing-card ul{
  display:grid;
  gap: 11px;
  margin: 22px 0;
  padding: 0;
  list-style:none;
}

.page-pricing .pricing-card li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.page-pricing .pricing-card li::before{
  content:"";
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--pricing-accent);
  flex: 0 0 auto;
}

.page-pricing .pricing-card .btn{
  width:100%;
  text-align:center;
  min-height: 56px;
}
.page-pricing .pricing-pay-form{
  display:grid;
  gap: 12px;
  margin-top: 18px;
  scroll-margin-top: 140px;
}
.page-pricing .pricing-offer-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.page-pricing .pricing-offer-check input{ width:auto; margin-top: 3px; }
.page-pricing .pricing-offer-check a,
.page-pricing .pricing-offer-note a{ color: var(--pricing-accent); font-weight: 800; }
.page-pricing .pricing-offer-note{ margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.page-offer .offer-shell{ max-width: 920px; }
.page-offer .offer-doc{
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid color-mix(in oklab, var(--pricing-accent) 18%, var(--border));
  border-radius: 28px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.page-offer .offer-doc h1{
  max-width: 14ch;
  margin-bottom: 20px;
  font-size: clamp(34px, 6vw, 64px);
}
.page-offer .offer-doc h2{ margin: 28px 0 10px; font-size: clamp(22px, 3vw, 30px); }
.page-offer .offer-doc p{ color: var(--muted); line-height: 1.7; }
.page-offer .offer-doc a{ color: var(--pricing-accent); }

.page-blog .blog-shell{ max-width: 1080px; padding-top: clamp(14px, 2.5vw, 28px); }
.page-blog .blog-hero{ max-width: 820px; padding: clamp(6px, 1.4vw, 14px) 0 clamp(16px, 4vw, 34px); }
.page-blog .blog-hero h1{ max-width: 18ch; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.03em; }
.page-blog .blog-hero p,
.page-blog .blog-lead{ color: var(--muted); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.6; }
.page-blog .blog-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-blog .blog-card,
.page-blog .blog-empty,
.page-blog .blog-post{ border: 1px solid color-mix(in oklab, var(--pricing-accent) 18%, var(--border)); border-radius: 24px; background: color-mix(in oklab, var(--card) 94%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.page-blog .blog-card,
.page-blog .blog-empty{ padding: 22px; overflow: hidden; }
.page-blog .blog-card time,
.page-blog .blog-post time{ color: var(--pricing-accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.page-blog .blog-card h2{ margin: 12px 0 10px; font-size: 24px; line-height: 1.12; }
.page-blog .blog-card h2 a{ color: var(--text); text-decoration: none; }
.page-blog .blog-card p{ color: var(--muted); line-height: 1.6; }
.page-blog .blog-more,
.page-blog .blog-back{ color: var(--pricing-accent); font-weight: 900; text-decoration: none; }
.page-blog .blog-post{ width: min(860px, 100%); margin: clamp(24px, 5vw, 54px) auto; padding: clamp(24px, 5vw, 52px); }
.page-blog .blog-post h1{ max-width: 24ch; margin: 14px 0 18px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.page-blog .blog-content{ margin-top: 30px; }
.page-blog .blog-content h2{ margin: 30px 0 12px; font-size: clamp(24px, 3vw, 34px); }
.page-blog .blog-content h3{ margin: 24px 0 10px; font-size: clamp(20px, 2.4vw, 28px); }
.page-blog .blog-content p{ color: var(--text); font-size: 18px; line-height: 1.78; }
.page-blog .blog-content ul{ padding-left: 1.4em; margin: 12px 0; }
.page-blog .blog-content li{ font-size: 18px; line-height: 1.78; color: var(--text); margin-bottom: 4px; }

/* Изображения внутри статьи */
.page-blog .blog-figure{
  margin: 2rem 0;       /* сброс UA-стилей margin: 1em 40px */
  padding: 0;
  max-width: 100%;
  text-align: center;
}
.page-blog .blog-figure-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 10px);
  margin: 0 auto;
}
.page-blog .blog-inline-img{
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  margin: 0.25em 0;
  border-radius: 6px;
}
.page-blog .blog-figure figcaption{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
/* Страховка от переполнения контентной зоны */
.page-blog .blog-content{ overflow-x: hidden; }

/* --- Обложки статей --- */
.page-blog .blog-card-cover{
  display: block;
  /* Растягиваем за padding карточки (22px с каждой стороны) */
  width: calc(100% + 44px);
  margin: -22px -22px 0.75rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.page-blog .blog-post-cover{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 420px;
  border-radius: var(--radius, 12px);
  margin-bottom: 1.5rem;
}

@media (max-width: 900px){
  .page-blog .blog-grid{ grid-template-columns: 1fr; }
}

.page-pricing .pricing-section{
  margin-top: clamp(42px, 7vw, 78px);
}

.page-pricing .pricing-section h2{
  max-width: 800px;
  margin: 0 0 22px;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.page-pricing .premium-grid{
  display:grid;
  gap: 14px;
}

@media (min-width: 820px){
  .page-pricing .premium-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-pricing .premium-grid article,
.page-pricing .pricing-flow,
.page-pricing .pricing-faq details{
  border-radius: 24px;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--pricing-accent) 16%, var(--border));
  box-shadow: 0 12px 32px rgba(0,0,0,.055);
}

.page-pricing .premium-grid article{
  padding: 20px;
}

.page-pricing .premium-grid span{
  color: var(--pricing-accent);
  font-weight: 900;
}

.page-pricing .premium-grid h3{
  margin: 14px 0 8px;
  font-size: 24px;
  line-height:1.1;
}

.page-pricing .premium-grid p{
  margin:0;
  color:var(--muted);
}

.page-pricing .pricing-flow{
  display:grid;
  gap: 20px;
  padding: clamp(20px, 3vw, 28px);
}

@media (min-width: 900px){
  .page-pricing .pricing-flow{
    grid-template-columns: .85fr 1.15fr;
  }
}

.page-pricing .pricing-flow ol{
  display:grid;
  gap: 12px;
  margin:0;
  padding:0;
  list-style:none;
}

.page-pricing .pricing-flow li{
  display:grid;
  gap: 3px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--pricing-accent) 7%, var(--panel));
}

.page-pricing .pricing-flow span,
.page-pricing .pricing-faq p{
  color: var(--muted);
}

.page-pricing .pricing-faq details{
  padding: 18px 20px;
  margin-top: 12px;
}

.page-pricing .pricing-faq summary{
  cursor:pointer;
  font-weight: 800;
}

.page-pricing .pricing-faq p{
  margin-bottom:0;
}

@media (max-width: 720px){
  .page-pricing .pricing-shell{
    width: min(100% - 28px, 1120px);
    padding-top: 34px;
  }

  .page-pricing h1{
    max-width: 12ch;
    font-size: clamp(38px, 13vw, 54px);
  }

  .page-pricing .pricing-actions .btn,
  .page-pricing .top-actions .btn{
    width:100%;
    text-align:center;
  }

  .page-pricing .top-actions .theme-btn{
    display:none;
  }

  .page-pricing .pricing-card,
  .page-pricing .premium-grid article,
  .page-pricing .pricing-flow,
  .page-pricing .pricing-faq details{
    border-radius: 20px;
  }
}