/* Страница обзора приложения.
   Подключается после site.css. Здесь только то, чего нет в общей системе:
   экран-обещание, оглавление, два яруса экранов и печатная вёрстка буклета. */

/* ─────────────────────────── экран-обещание ─────────────────────────── */

.hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,5vw,64px)}
.hero h1{max-width:14em}
.hero .lead{max-width:31em;margin-bottom:0}

/* ─────────────────────────── оглавление ─────────────────────────── */

.toc{
  position:sticky;top:58px;z-index:20;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-soft);
  margin:0 0 8px;
}
.toc .inner{
  max-width:var(--w);margin:0 auto;padding:11px 24px;
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
}
.toc .inner::-webkit-scrollbar{display:none}
.toc a{
  color:var(--muted);text-decoration:none;font-size:.88rem;white-space:nowrap;
  padding:6px 12px;border-radius:8px;transition:color .18s var(--ease),background .18s var(--ease)
}
.toc a:hover{color:var(--fg);background:var(--surface)}
:target{scroll-margin-top:118px}

/* ─────────────────────────── первый ярус: главные экраны ─────────────────────────── */

.feature{
  display:grid;grid-template-columns:360px 1fr;gap:clamp(32px,5vw,64px);
  align-items:center;padding:clamp(44px,6vw,76px) 0;
  border-top:1px solid var(--line-soft);
}
.feature:first-of-type{border-top:0}
.feature.flip .shot{order:2}
.feature.flip .say{order:1}
.feature .say{max-width:34em}
.feature h3{font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.025em;margin:0 0 14px}
.feature .say > p{color:var(--muted);font-size:1.04rem}
.feature ul{margin:0;padding-left:1.15em;color:var(--muted)}
.feature li{margin:9px 0}
.feature li strong{color:var(--fg);font-weight:620}

@media (max-width:820px){
  .feature,.feature.flip{grid-template-columns:1fr;gap:28px}
  .feature.flip .shot,.feature.flip .say{order:initial}
}

/* рамка телефона описана в site.css, здесь только раскладка */
.shot{display:flex;justify-content:center}

/* ─────────────────────────── разбор строки расчёта ─────────────────────────── */

.calc{margin:26px 0 10px}
.calc table{min-width:560px;font-size:.95rem}
.calc .slicer{color:var(--muted)}
.calc .money{font-variant-numeric:tabular-nums;font-weight:620}
.calc .profit{color:var(--accent)}
.calc thead th{font-size:.83rem;letter-spacing:.02em}
.calc thead .grp{
  text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--muted);
  font-weight:700;text-align:center;border-bottom:1px solid var(--line)
}
.calc thead .grp.us{color:var(--accent)}

/* ─────────────────────────── второй ярус: галерея ─────────────────────────── */

.gallery{
  display:grid;gap:clamp(24px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:36px 0 0
}
.tile{display:flex;gap:20px;align-items:flex-start}
.tile .phone{width:132px;border-radius:16px;flex:none;box-shadow:var(--shadow)}
.tile h3{font-size:1.04rem;margin:2px 0 8px}
.tile p{color:var(--muted);font-size:.93rem;margin:0 0 8px}
.tile ul{margin:0;padding-left:1.05em;color:var(--muted);font-size:.9rem}
.tile li{margin:4px 0}
.tile li strong{color:var(--fg);font-weight:620}

/* ─────────────────────────── свёрнутый полный перечень ─────────────────────────── */

.deets{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--elev);margin:8px 0 0;overflow:hidden
}
.deets > summary{
  cursor:pointer;list-style:none;padding:20px 26px;
  font-weight:620;font-size:1.02rem;display:flex;align-items:center;gap:12px;
  transition:background .18s var(--ease)
}
.deets > summary::-webkit-details-marker{display:none}
.deets > summary:hover{background:var(--surface)}
.deets > summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease)
}
.deets[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.deets > summary .hint{font-weight:400;color:var(--muted);font-size:.9rem}
.deets .body{padding:4px 26px 28px;border-top:1px solid var(--line-soft)}
.deets .grid{margin-top:24px}
.deets .card{background:var(--surface)}

/* ─────────────────────────── набор в тестирование ─────────────────────────── */

.invite{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(28px,4vw,44px)
}
.invite h2{margin-top:0}
.invite .terms{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin:26px 0 30px;padding:0;list-style:none
}
.invite .terms li{margin:0}
.invite .terms b{display:block;margin-bottom:5px}
.invite .terms span{color:var(--muted);font-size:.93rem}

/* ─────────────────────────── печать буклета ─────────────────────────── */

@page{size:A4;margin:14mm 13mm}
.printonly{display:none}

@media print{
  :root{
    --bg:#fff; --surface:#f6f7f9; --elev:#fff; --line:#d5d9de; --line-soft:#e4e7ec;
    --fg:#14171b; --muted:#4a5058; --accent:#0a7a41; --brand:#16a34a;
    --shot-bg:#eceff3; --shadow:none; --shadow-lg:none;
  }
  body{font-size:10.5pt;line-height:1.5}
  .wrap{max-width:none;padding:0}
  .toc{display:none !important}
  .printonly{display:block !important}
  .hero{padding:0 0 8pt;page-break-after:avoid}
  h1{font-size:30pt}
  .hero .lead{font-size:12pt}
  h2{font-size:15pt;page-break-after:avoid}
  .pullquote{font-size:16pt;margin:14pt 0}
  .feature{
    page-break-inside:avoid;padding:14pt 0;gap:20pt;
    grid-template-columns:200px 1fr;border-top:1px solid var(--line-soft)
  }
  .feature.flip{grid-template-columns:1fr 200px}
  .feature h3{font-size:12pt}
  .phone{width:190px;box-shadow:none}
  .tile .phone{width:110px}
  .gallery{gap:14pt;grid-template-columns:1fr 1fr}
  .tile{page-break-inside:avoid}
  .callout,.card,.stat,.stats,.grid,.invite,.calc{page-break-inside:avoid}
  table{font-size:9pt;min-width:0}
  tr{page-break-inside:avoid}
  .deets{border:0}
  .deets > summary{display:none}
  .deets .body{padding:0;border-top:0}
  .pagebreak{page-break-before:always}
}