/* Главная go.priziva.net и хаб «Бесплатно». Только токены из pn-ds.css. */

.home { margin: 0; font-family: var(--font-text); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home img { max-width: 100%; height: auto; display: block; }
.home a:not(.pn-btn) { color: inherit; }
.home h1, .home h2, .home h3, .home p, .home figure, .home blockquote { margin: 0; }
.home button { font: inherit; }

main { overflow-x: clip; }
.home-wrap { width: 100%; max-width: var(--blog-width); margin: 0 auto; padding: 0 var(--gutter); }
.home-section { padding: 56px 0 0; }
.home-center { text-align: center; }
.home-h2 { font: 700 32px/1.02 var(--font-display); text-transform: uppercase; color: var(--ink); letter-spacing: -0.2px; }
.home .home-sub { margin-top: var(--s-3); color: var(--muted); font-size: 16px; line-height: 1.5; max-width: var(--blog-reading); }
.home .home-center .home-sub { margin-left: auto; margin-right: auto; }
.home-head { display: flex; flex-direction: column; margin-bottom: var(--s-6); }
.home-head.home-center { align-items: center; }
.home-kicker { font: 700 12px/1.3 var(--font-text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-deep); }
.home-hand-note { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ---------- полоса сверху и шапка ---------- */
.home-strip { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--gutter);
  background: var(--ink); color: var(--card); font-size: 13.5px; font-weight: 600; text-align: center; }
.home-strip a { flex-shrink: 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--red-strong); color: var(--card) !important; font-weight: 800; text-decoration: none; }
.home-top { position: sticky; top: 0; z-index: 30; padding: var(--s-2) 0; background: var(--bg); }
.home-top-pill { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: 0 var(--s-2) 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--shadow-card); }
.home-logo { width: var(--blog-logo-small); flex-shrink: 0; }
.home-nav { display: none; gap: var(--s-5); font-weight: 700; font-size: 14.5px; }
.home-nav a { text-decoration: none; color: var(--text); }
.home-nav a:hover { color: var(--red-deep); }
.home-top-cta { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--red-strong); color: var(--card) !important; font-weight: 800; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.home-top-cta:hover { background: var(--red-deep); }

/* ---------- первый экран: коллаж ---------- */
.home-hero { padding: var(--s-4) 0 0; }
.home-hero-stage { position: relative; display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); border-radius: var(--r-sheet); background: var(--paper); overflow: hidden; }
.home-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s-4); }
.home-hero h1 { font: 700 40px/1 var(--font-display); text-transform: uppercase; color: var(--ink); letter-spacing: -0.3px; }
.home-hero h1 .pn-fix { padding-top: 26px; }
.home-hero h1 .pn-fix .pn-hand { font-size: 30px; top: -2px; }
.home-lead { font-size: 17px; line-height: 1.5; color: var(--text); max-width: 520px; }
.home-ctas { display: flex; flex-direction: column; gap: var(--s-2); }
.home-ctas .pn-btn { width: 100%; }
.home-under { font-size: 13px; color: var(--muted); }
.home-hero-visual { position: relative; margin: var(--s-5) var(--s-2) var(--s-3); }
.home-hero-photo { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-paper); transform: rotate(var(--tilt-paper)); }
.home-chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-control);
  background: var(--card); box-shadow: var(--shadow-paper); }
.home-chip strong { font: 700 28px/1 var(--font-display); color: var(--ink); }
.home-chip span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.home-chip .pn-tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(var(--tilt-tape)); }
.home-chip--a { left: -6px; top: -14px; padding-top: var(--s-5); transform: rotate(-3deg); }
.home-chip--b { right: -6px; bottom: -14px; transform: rotate(2deg); }

/* ---------- три карточки доверия ---------- */
.home-trio { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.home-trio-card { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.home-trio-card strong { flex-shrink: 0; min-width: 96px; font: 700 34px/1 var(--font-display); color: var(--red); text-align: center; }
.home-trio-card b { display: block; font-size: 15.5px; color: var(--ink); }
.home-trio-card span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* ---------- ситуации: вкладки + список + большая карточка ---------- */
.home-tabs { display: inline-flex; gap: var(--s-1); padding: var(--s-1); margin: 0 auto var(--s-5); border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow-card); }
.home-tabs button { min-height: 40px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); font-weight: 800; font-size: 14.5px; cursor: pointer; }
.home-tabs button[aria-selected="true"] { background: var(--ink); color: var(--card); }
.home-picker { display: grid; gap: var(--s-3); }
.home-picker-list { display: flex; flex-direction: column; gap: var(--s-2); }
.home-pick { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--s-4) var(--s-5); border: 0; border-radius: var(--r-control);
  background: var(--card); box-shadow: var(--shadow-card); text-align: left; cursor: pointer; }
.home-pick b { font-size: 16px; color: var(--ink); }
.home-pick-sub { font-size: 13px; color: var(--muted); }
.home-pick[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--red-strong), var(--shadow-card); }
.home-pick .pn-sticker { position: absolute; top: -9px; left: var(--s-4); padding: 3px 9px 2px; font-size: 11px; }
.home-pick .pn-hand { display: none; position: absolute; right: var(--s-4); top: 50%; margin-top: -11px; }
.home-pick[aria-selected="true"] .pn-hand { display: inline-block; }
.home-show { display: grid; border-radius: var(--r-sheet); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.home-show-img { background: var(--paper); }
.home-show-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.home-show-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.home-show-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.home-show-chips span { padding: 6px 11px; border-radius: var(--r-pill); background: var(--soft); font-size: 12.5px; font-weight: 700; color: var(--text); }
.home-show h3 { font: 700 26px/1.05 var(--font-display); text-transform: uppercase; color: var(--ink); }
.home-show p { font-size: 15px; line-height: 1.5; }

/* ---------- экосистема: мозаика ---------- */
.home-eco { display: grid; gap: var(--s-3); }
.home-eco-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--card);
  box-shadow: var(--shadow-card); text-decoration: none; overflow: hidden; }
.home-eco-card h3 { font: 700 22px/1.08 var(--font-display); text-transform: uppercase; color: var(--ink); }
.home-eco-card p { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.home-eco-card .pn-pill, .home-eco-card .pn-sticker, .home-eco-card .pn-tape { align-self: flex-start; }
.home-eco-card--dark { background: var(--ink); }
.home-eco-card--dark h3 { color: var(--card); }
.home-eco-card--dark p { color: var(--muted-invert); }
.home-eco-card--red { background: var(--red-strong); }
.home-eco-card--red h3, .home-eco-card--red p { color: var(--card); }
.home-eco-card--paper { background: var(--paper); }
.home-eco-card--photo { padding: 0; }
.home-eco-card--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-eco-card--photo .home-eco-cap { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.home-eco-more { margin-top: auto; font-weight: 800; font-size: 14.5px; color: var(--red-deep); }
.home-eco-card--dark .home-eco-more { color: var(--red-invert); }
.home-eco-card--red .home-eco-more { color: var(--card); }
.home-bubble { padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--line-invert); color: var(--text-invert); font-size: 14px; line-height: 1.4; }
.home-bubble--me { align-self: flex-end; max-width: 85%; background: var(--red-strong); color: var(--card); }
.home-live { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: var(--r-pill); background: var(--live); }
.home-meter { display: flex; flex-direction: column; gap: var(--s-2); }
.home-meter-bar { height: 10px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.home-meter-bar i { display: block; width: 58%; height: 100%; background: var(--red-strong); }
.home-meter b { font: 700 40px/1 var(--font-display); color: var(--ink); }
.home-big { font: 700 52px/1 var(--font-display); color: var(--card); }
.home-eco-card .pn-doc { transform: rotate(-1.5deg); }
.home-doc-line { display: flex; gap: var(--s-2); align-items: center; padding: 3px 0; font-size: 13.5px; color: var(--text); }

/* ---------- слайдеры ---------- */
.home-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-1) var(--gutter) var(--s-4);
  margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.home-rail::-webkit-scrollbar { display: none; }
.home-rail > * { scroll-snap-align: start; }
.home-rail-nav { display: flex; justify-content: center; gap: var(--s-2); }
.home-rail-nav button { width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--card); font-size: 18px; cursor: pointer; }
.home-rail-nav button:first-child { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.home-art { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; }
.home-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.home-art div { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-4); }
.home-art .pn-pill { align-self: flex-start; }
.home-art h3 { font: 800 15.5px/1.35 var(--font-text); color: var(--ink); }
.home-art b { margin-top: auto; align-self: flex-start; padding: 7px 14px; border-radius: var(--r-tag); background: var(--soft); font-size: 13.5px; color: var(--ink); }

.home-gift { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; border-radius: var(--r-sheet); overflow: hidden; text-decoration: none; background: var(--ink); }
.home-gift img { position: absolute; inset: 0; width: 100%; height: 62%; object-fit: cover; }
.home-gift div { position: relative; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); background: var(--ink); text-align: center; }
.home-gift h3 { font: 700 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--card); }
.home-gift p { font-size: 13.5px; line-height: 1.4; color: var(--muted-invert); }
.home-gift--red div { background: var(--red-strong); }
.home-gift--red p { color: var(--card); }
.home-gift .pn-sticker { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; }

/* ---------- истории: точка А → точка Б ---------- */
.home-story-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.home-story-pick button { padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; font-size: 13.5px; color: var(--text); cursor: pointer; }
.home-story-pick button[aria-selected="true"] { background: var(--ink); color: var(--card); box-shadow: none; }
.home-story { display: grid; gap: var(--s-3); }
.home-story[hidden] { display: none; }
.home-story-quote { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--shadow-paper); }
.home-story-quote h3 { font: 700 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.home-story-quote blockquote { font-size: 15.5px; line-height: 1.55; }
.home-story-quote a { font-size: 13px; color: var(--muted); }
.home-point { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.home-point p { font-size: 14.5px; line-height: 1.5; }
.home-point-tag { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; font-size: 14px; color: var(--ink); }
.home-point-tag span { padding: 5px 10px; border-radius: var(--r-tag); background: var(--soft); font: 600 13px/1 var(--font-display); text-transform: uppercase; }
.home-point--b { box-shadow: inset 0 0 0 2px var(--red-strong), var(--shadow-paper); }
.home-point--b .home-point-tag span { background: var(--red-strong); color: var(--card); }
.home .home-story-foot { display: flex; align-items: center; justify-content: center; margin-top: var(--s-4); font-size: 14px; color: var(--muted); }

/* ---------- бегущая лента ---------- */
.home-ribbon { margin: 56px 0 0; padding: var(--s-3) 0; background: var(--red-strong); transform: rotate(-1.5deg); overflow: hidden; }
.home-ribbon div { display: flex; gap: var(--s-8); width: max-content; font: 600 20px/1 var(--font-display); text-transform: uppercase; color: var(--card); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .home-ribbon div { animation: home-run 38s linear infinite; } }
@keyframes home-run { to { transform: translateX(-50%); } }

/* ---------- как разбираться: три формата ---------- */
.home-plans { display: grid; gap: var(--s-3); }
.home-plan { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); border-radius: var(--r-sheet); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.home-plan h3 { font: 700 26px/1.05 var(--font-display); text-transform: uppercase; color: var(--ink); }
.home-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.home-plan li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.home-plan .pn-btn { margin-top: auto; }
.home-plan-price { padding-top: var(--s-3); border-top: 1px solid var(--line); font: 700 22px/1 var(--font-display); color: var(--ink); }
.home-plan-tags { display: flex; gap: var(--s-2); }
.home-plan--dark { background: var(--ink); box-shadow: none; }
.home-plan--dark h3, .home-plan--dark .home-plan-price { color: var(--card); }
.home-plan--dark li { color: var(--text-invert); }
.home-plan--dark .pn-check { background: var(--red-invert); }
.home-plan--dark .home-plan-price { border-color: var(--line-invert); }
.home-plan-note { position: absolute; top: -26px; right: var(--s-5); }

/* ---------- не как у всех ---------- */
.home-diff { display: grid; gap: var(--s-4); align-items: center; }
.home-diff-list { display: flex; flex-direction: column; gap: var(--s-3); }
.home-diff-item { padding: var(--s-5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.home-diff-item:nth-child(2) { background: var(--ink); }
.home-diff-item:nth-child(2) h3 { color: var(--card); }
.home-diff-item:nth-child(2) p { color: var(--muted-invert); }
.home-diff-item h3 { font: 800 17px/1.3 var(--font-text); color: var(--ink); }
.home-diff-item p { margin-top: var(--s-1); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.home-diff-visual { position: relative; }
.home-diff-visual img { border-radius: var(--r-card); box-shadow: var(--shadow-paper); transform: rotate(1deg); }
.home-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.home-media a { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-control); background: var(--card); box-shadow: var(--shadow-card);
  font-size: 13px; line-height: 1.35; color: var(--muted); text-decoration: none; }
.home-media img { height: 22px; width: auto; object-fit: contain; object-position: left; }

/* ---------- финал ---------- */
.home-final { display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); border-radius: var(--r-sheet); background: var(--ink); color: var(--text-invert); overflow: hidden; }
.home-final .home-h2 { color: var(--card); }
.home-final p { font-size: 16px; line-height: 1.5; color: var(--muted-invert); }
.home-final .home-tabs { margin: 0 0 var(--s-4); background: var(--line-invert); box-shadow: none; }
.home-final .home-tabs button { color: var(--text-invert); }
.home-final .home-tabs button[aria-selected="true"] { background: var(--red-strong); color: var(--card); }
.home-final-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--card); color: var(--text); }
.home-final-card[hidden] { display: none; }
.home-final-card h3 { font: 800 18px/1.3 var(--font-text); color: var(--ink); }
.home-final-card p { color: var(--muted); font-size: 14.5px; }
.home-final-img img { border-radius: var(--r-card); }

/* ---------- вопросы ---------- */
.home-faq { display: flex; flex-direction: column; gap: var(--s-3); max-width: 880px; margin: 0 auto; }
.home-faq details { padding: var(--s-5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.home-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); cursor: pointer; list-style: none; font-weight: 800; font-size: 16.5px; color: var(--ink); }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--ink); color: var(--card); font: 700 20px/32px var(--font-text); text-align: center; }
.home-faq details[open] summary::after { content: "–"; }
.home-faq p { margin-top: var(--s-3); font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- хаб «Бесплатно»: плитки ---------- */
.home-tiles { display: grid; gap: var(--s-3); }
.home-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); text-decoration: none; }
.home-tile h3 { font: 800 17px/1.3 var(--font-text); color: var(--ink); }
.home-tile p { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.home-tile .pn-pill { align-self: flex-start; }
.home-tile b { margin-top: auto; padding-top: var(--s-2); font-size: 14.5px; color: var(--red-deep); }
.home-tile--soon { background: var(--soft); box-shadow: none; }

/* ---------- подвал ---------- */
.home-foot { margin-top: 72px; padding: var(--s-8) 0; background: var(--ink); color: var(--muted-invert); font-size: 13.5px; }
.home-foot-grid { display: grid; gap: var(--s-5); }
.home-foot b { display: block; margin-bottom: var(--s-2); color: var(--card); font-size: 14px; }
.home-foot a { display: block; padding: 3px 0; color: var(--text-invert); text-decoration: none; }
.home-foot a:hover { color: var(--red-invert); }
.home-foot-logo { width: var(--blog-logo); padding: var(--s-1) var(--s-2); border-radius: var(--r-tag); background: var(--card); }
.home .home-foot-note { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line-invert); line-height: 1.5; }

/* ---------- планшет ---------- */
@media (min-width: 640px) {
  .home-ctas { flex-direction: row; }
  .home-ctas .pn-btn { width: auto; flex: 1; }
  .home-trio { grid-template-columns: repeat(3, 1fr); }
  .home-trio-card { flex-direction: column; text-align: center; }
  .home-eco { grid-template-columns: repeat(2, 1fr); }
  .home-eco-wide { grid-column: span 2; }
  .home-rail { grid-auto-columns: 44%; }
  .home-story { grid-template-columns: 1fr 1fr; }
  .home-story-quote { grid-column: span 2; }
  .home-media { grid-template-columns: repeat(4, 1fr); }
  .home-tiles { grid-template-columns: repeat(2, 1fr); }
  .home-foot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- десктоп ---------- */
@media (min-width: 960px) {
  .home-nav { display: flex; }
  .home-logo { width: var(--blog-logo); }
  .home-section { padding-top: 88px; }
  .home-h2 { font-size: 46px; }
  .home-hero-stage { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--s-10); padding: 56px; }
  .home-hero h1 { font-size: 64px; }
  .home-hero-visual { margin: 0; }
  .home-chip--a { left: -34px; top: 24px; }
  .home-chip--b { right: -18px; bottom: 30px; }
  .home-picker { grid-template-columns: 340px 1fr; align-items: start; }
  .home-show { grid-template-columns: 1fr 1fr; min-height: 420px; }
  .home-show-img img { height: 100%; aspect-ratio: auto; }
  .home-show-body { justify-content: center; padding: var(--s-8); }
  .home-eco { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: var(--s-4); }
  .home-eco-tall { grid-row: span 2; }
  .home-eco-wide { grid-column: span 3; }
  .home-rail { grid-auto-columns: calc((100% - var(--s-3) * 3) / 4); margin: 0; padding-left: 0; padding-right: 0; }
  .home-rail--gifts { grid-auto-columns: calc((100% - var(--s-3) * 4) / 5); }
  .home-story { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; }
  .home-story-quote { grid-column: 1; grid-row: span 2; padding: var(--s-8); }
  .home-point--a { transform: rotate(-1deg); }
  .home-point--b { transform: rotate(1deg) translateX(-24px); }
  .home-plans { grid-template-columns: repeat(3, 1fr); }
  .home-diff { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
  .home-final { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 56px; }
  .home-tiles { grid-template-columns: repeat(3, 1fr); }
  .home-foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}