/* PochtaHub — главная. Классы .lp-*; токены и компоненты — из ph.css.
   Белый фон, золото только в деталях. Анимация одна — живое окно ящика на первом экране. */

html{scroll-behavior:smooth}
.lp section[id]{scroll-margin-top:72px}

/* ---------- шапка на телефоне: логотип, «Войти», «Создать ящик» в одну строку ---------- */
@media (max-width:480px){
  .lp .site-header .container{gap:8px}
  .lp .site-actions{gap:2px}
  .lp .site-actions .btn{padding:0 14px}
  .lp .logo{gap:8px;font-size:22px}
  .lp .logo img{width:26px;height:26px}
}
/* самые узкие телефоны: остаётся знак логотипа */
@media (max-width:359px){.lp .site-header .logo span{display:none}}


/* ---------- первый экран ---------- */
.lp-hero{padding:96px 0 128px}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(40px,6vw,96px);align-items:center}
.lp-hero-title{font:500 clamp(50px,5.6vw,80px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.lp-hero-sub{margin:18px 0 0;font-size:19px;line-height:1.5;color:var(--muted);max-width:34ch;text-wrap:balance}
.lp-hero-lead{margin-top:26px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted)}
.lp-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:44px}
.lp-hero-fig{min-width:0}

/* окно ящика */
.lp-win{--row:72px;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden}
.lp-win-head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 24px;border-bottom:1px solid var(--line)}
.lp-win-title{font-weight:600;font-size:15px}
.lp-win-addr{min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-rows{position:relative;height:calc(var(--row) * 3);overflow:hidden}
.lp-row{position:absolute;left:0;right:0;top:0;height:var(--row);display:flex;align-items:center;gap:14px;padding:0 24px;box-shadow:inset 0 -1px 0 var(--line);background:var(--surface);transform:translateY(calc(var(--i, 0) * var(--row)));transition:transform .75s var(--ease),opacity .5s var(--ease),background-color .5s var(--ease)}
.lp-row.is-enter,.lp-row.is-leave{opacity:0}
.lp-row.is-sel{background:var(--bg-soft)}
.lp-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lp-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-row-top b{font-weight:600;font-size:14.5px;line-height:1.3}
.lp-row-time{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.lp-row-time .dot{width:6px;height:6px;opacity:0;transition:opacity .4s}
.lp-row.is-unread .lp-row-time .dot{opacity:1}
.lp-row-subj{font-size:14px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-row.is-unread .lp-row-subj{color:var(--ink-2)}

.lp-pane{padding:0 24px}
.lp-pane-body{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:104px;transition:opacity .28s var(--ease),transform .4s var(--ease)}
.lp-pane-body.is-out{opacity:0;transform:translateY(6px)}
.lp-pane-empty{width:100%;text-align:center;font-size:14px;color:var(--muted)}
.lp-copy{flex:none;min-width:148px}
.lp-copy .ic{color:var(--muted);transition:color var(--dur)}
.lp-copy.is-done{border-color:var(--gold);color:var(--gold-deep)}
.lp-copy.is-done .ic{color:var(--gold)}

/* барабаны кода: каждая буква прокручивается на место (только transform) */
.lp-code{display:inline-flex;gap:.06em;font:500 42px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.lp-reel{display:block;width:.66em;height:1.2em;overflow:hidden;text-align:center;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.lp-strip{display:block}
.lp-strip>span{display:block;height:1.2em;line-height:1.2em}
.lp-strip.is-run{will-change:transform;transition:transform var(--d,.9s) cubic-bezier(.16,.84,.24,1)}

/* ---------- три пункта ---------- */
.lp-points{padding-bottom:128px}
.lp-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
/* только заголовки: подробности — в первом экране и в вопросах */
.lp-pts li{padding-top:28px;border-top:1px solid var(--gold-line)}
.lp-pts h3{font:500 32px/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}

/* ---------- тарифы ---------- */
.lp-price{border-top:1px solid var(--line)}
/* одна цена: разовый взнос, тонкая золотая рамка */
.lp-price .h2{text-align:center}
.lp-fee{max-width:420px;margin:48px auto 0;padding:44px 40px 36px;border:1px solid var(--gold);border-radius:var(--r-xl);background:var(--surface)}
.lp-fee-price{display:flex;align-items:baseline;justify-content:center;gap:14px;line-height:1}
.lp-fee-price b{font:500 96px/.86 var(--serif);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.lp-fee-price span{font-size:16px;color:var(--muted)}
.lp-fee-feats{margin:36px 0 32px}
.lp-fee-feats li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.lp-fee-feats li:last-child{border-bottom:1px solid var(--line)}

/* ---------- вопросы ---------- */
.lp-faq{padding-top:0}
.lp-faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.lp-qa>div{padding:24px 0;border-top:1px solid var(--line)}
.lp-qa>div:first-child{padding-top:6px;border-top:0}
.lp-qa dt{font:500 25px/1.3 var(--serif);letter-spacing:-.005em;color:var(--ink);font-variant-numeric:lining-nums}
.lp-qa dd{margin:6px 0 0;max-width:34em;font-size:16px;line-height:1.6;color:var(--muted)}

/* ---------- планшет ---------- */
@media (max-width:980px){
  .lp-hero{padding:64px 0 96px}
  .lp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lp-hero-fig{max-width:560px}
  .lp-pts{gap:32px}
  .lp-faq-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}

/* ---------- телефон ---------- */
@media (max-width:720px){
  .lp-hero{padding:40px 0 72px}
  .lp-hero-grid{gap:44px}
  .lp-hero-title{font-size:clamp(40px,11.4vw,50px);line-height:1.02}
  .lp-hero-lead{margin-top:16px;font-size:16.5px}
  .lp-hero-actions{gap:12px 28px;margin-top:28px}
  .lp-win{--row:64px;border-radius:18px}
  .lp-win-head{height:52px;padding:0 18px}
  .lp-row{gap:12px;padding:0 18px}
  .lp-pane{padding:0 18px}
  .lp-pane-body{min-height:88px}
  .lp-code{font-size:34px}
  .lp-copy{min-width:0;padding:0 16px}

  .lp-points{padding-bottom:72px}
  .lp-pts{grid-template-columns:minmax(0,1fr);gap:0}
  .lp-pts li{padding:18px 0 20px}
  .lp-pts h3{font-size:27px}

  /* тарифы друг под другом — плотнее, чтобы три тарифа не растягивались на три экрана */
  .lp-fee{margin-top:28px;padding:32px 22px 24px}
  .lp-fee-price b{font-size:76px}
  .lp-fee-feats{margin:28px 0 24px}

  .lp-qa>div{padding:20px 0}
  .lp-qa dt{font-size:22px}
  .lp-qa dd{font-size:15.5px}
}

/* самые узкие телефоны: код помельче, кнопка без значка — чтобы код и «Скопировать» не наезжали друг на друга */
@media (max-width:374px){
  .lp-code{font-size:28px}
  .lp-copy .ic{display:none}
}

/* ---------- без анимаций ---------- */
@media (prefers-reduced-motion:reduce){
  .lp-strip.is-run{transition:none}
}