/* Jisra landing.
   One template for every section after the hero: a centred head (title + one line), then one focal
   element (a row of equal cards, or one large visual). Sections alternate white / light grey.
   Hierarchy is set in tinted neutrals first; the single accent is the product's own action blue
   (the page's "Скачать" is the app's "Провести продажу"). Hex values instead of oklch() so older
   Chromium builds (still common on shop PCs) render the same page. */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --sunken: #f0f2f6;
  --plate: #e8ecf3;
  --text: #141a26;
  --text-2: #475063;
  --text-3: #737c8f;
  --line: #e3e7ee;
  --line-2: #d2d8e2;

  --primary: #2459e0;
  --primary-hover: #1d4abf;
  --primary-press: #183e9f;
  --primary-soft: #ebf1fe;
  --primary-ring: rgba(36, 89, 224, .32);

  --ok: #0f7b4f;
  --ok-soft: #e4f4ec;

  --font: 'Onest', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --fs-display: clamp(40px, 4.6vw, 64px);
  --fs-h2: clamp(30px, 3.2vw, 42px);
  --fs-lg: 19px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --e1: 0 1px 2px rgba(20, 26, 38, .06);
  --e2: 0 1px 2px rgba(20, 26, 38, .05), 0 8px 24px -8px rgba(20, 26, 38, .12);
  --e3: 0 0 0 1px rgba(20, 26, 38, .07), 0 2px 4px rgba(20, 26, 38, .04), 0 24px 56px -16px rgba(20, 26, 38, .22);

  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --t-fast: 150ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.03em; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
p { text-wrap: pretty; }

.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; margin: 0 1px;
  font: 600 12px/1 var(--font); color: var(--text-2); vertical-align: 1px;
  background: var(--surface); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-xs);
}

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: var(--r-sm); background: var(--text); color: #fff; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(20, 26, 38, .16); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-press); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); box-shadow: var(--e1); }
.btn-secondary:hover { background: var(--sunken); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.nav.is-stuck { background: rgba(247, 248, 250, .86); border-bottom-color: var(--line); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); }
.nav-row { display: flex; align-items: center; gap: 32px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.logo img { width: 28px; height: 28px; }
.logo-sm { font-size: 15px; gap: 8px; }
.logo-sm img { width: 20px; height: 20px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: var(--r-sm); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--text-2); transition: color var(--t-fast), background-color var(--t-fast); }
.nav-links a:hover { color: var(--text); background: var(--sunken); }

/* Hero: the section template, larger */
.hero { padding: 72px 0 112px; }
.head.head-hero { max-width: 960px; gap: 20px; margin-bottom: 56px; }
.head-hero h1 { max-width: 22ch; }
.head-hero p { font-size: 20px; max-width: 36em; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.screen { display: block; margin: 0; padding: 0; border: 0; background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e3); }
.screen img { width: 100%; height: auto; }
.screen-hero { max-width: 1120px; margin: 0 auto; }

/* ── Section template ───────────────────────────────────────────── */
.section { padding: 112px 0; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 680px; margin: 0 auto 56px; }
.head p { font-size: var(--fs-lg); color: var(--text-2); }

.grid { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.narrow { max-width: 960px; margin-inline: auto; }

/* One card style for the whole page */
.card { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); }
.alt .card { background: var(--bg); box-shadow: none; }
.card p { color: var(--text-2); font-size: 15px; }
.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.icon-tile .i { width: 22px; height: 22px; }
.card-row { grid-template-columns: auto 1fr; align-items: start; gap: 18px; }
.card-row .icon-tile { margin: 0; }
.card-row h3 { margin-bottom: 4px; }
.kbd-lg { width: 44px; height: 44px; min-width: 0; margin: 0; font-size: 15px; color: var(--primary); background: var(--primary-soft); border-color: #cbd9fb; border-bottom-width: 3px; border-radius: 12px; }

/* Tour: centred tabs, large screenshot */
.tablist { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 4px; background: var(--sunken); border-radius: 12px; }
.tablist [role=tab] { height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: 500 15px/1 var(--font); color: var(--text-2); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.tablist [role=tab]:hover { color: var(--text); }
.tablist [role=tab][aria-selected=true] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--e1), 0 0 0 1px var(--line); }
.panels { max-width: 1040px; margin: 0 auto; }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: fade .3s var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.shot { width: 100%; cursor: zoom-in; transition: box-shadow .25s var(--ease-out); }
.shot:hover { box-shadow: var(--e3), 0 0 0 4px var(--primary-soft); }

/* Book record: the one visual of "made for books" */
.record { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2); overflow: hidden; }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; }
.record-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.record-sub { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.record-editions { width: 100%; border-collapse: collapse; font-size: 15px; }
.record-editions th { padding: 10px 28px; background: var(--sunken); font-size: 12px; font-weight: 500; color: var(--text-3); text-align: left; }
.record-editions td { padding: 14px 28px; border-top: 1px solid var(--line); }
.record-editions .num { text-align: right; white-space: nowrap; }
.record-editions .code { color: var(--text-2); letter-spacing: .02em; }

/* First day */
.steps .card { position: relative; }
.step-n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 9px; background: var(--text); color: #fff; font-size: 14px; font-weight: 600; }
.steps .card:last-child .step-n { background: var(--primary); }
.center-cta { display: flex; justify-content: center; margin-top: 40px; }

/* FAQ: one centred column */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; transition: color var(--t-fast); }
.faq summary:hover { color: var(--primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 20px; height: 20px; background: var(--text-3); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transition: transform .25s var(--ease-out); }
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 48px 22px 4px; color: var(--text-2); }
.faq details[open] p { animation: fade .25s var(--ease-out); }

/* Final */
.final { padding: 112px 0 0; }
.final-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 64px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2); }
.final-box h2 { max-width: 20ch; }
.final-box p { margin-top: 12px; font-size: var(--fs-lg); color: var(--text-2); }
.final-cta { display: grid; justify-items: center; gap: 12px; }
.final-note { font-size: 13px; color: var(--text-3); }
.footer { margin-top: 112px; border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--text-3); }
.footer-row { display: flex; align-items: center; gap: 24px; }
.footer-row p { margin-right: auto; }
.footer-link { color: var(--text-2); text-decoration: none; }
.footer-link:hover { color: var(--primary); text-decoration: underline; }

/* Zoom */
.zoom { width: min(1400px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e3); overflow: auto; }
.zoom::backdrop { background: rgba(20, 26, 38, .6); }
.zoom[open] { animation: fade .2s var(--ease-out); }
.zoom img { width: 100%; height: auto; }
.zoom-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--e1); }
.zoom-close:hover { background: var(--sunken); }

/* Motion: the hero rises on load; each section's parts arrive in order when it comes into view. */
[data-rise] { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.js [data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-anim=media] { transform: translateY(28px) scale(.985); transition-duration: .9s; }
.js .is-in [data-anim] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-anim] { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 88px 0; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 32px); }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding: 40px 0 64px; }
  .head-hero { margin-bottom: 36px; }
  .cta { width: 100%; }
  .cta .btn { flex: 1 1 100%; }
  .section { padding: 64px 0; }
  .head { margin-bottom: 36px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .tablist { width: 100%; }
  .tablist [role=tab] { flex: 1 1 30%; padding: 0 8px; font-size: 14px; }
  .record-head, .record-editions th, .record-editions td { padding-left: 16px; padding-right: 16px; }
  .record-editions th:nth-child(2), .record-editions td:nth-child(2) { display: none; }
  .faq details p { padding-right: 0; }
  .final-box { grid-template-columns: 1fr; padding: 32px 24px; }
  .final-cta { justify-items: stretch; text-align: center; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* "Возможности" fits one screen when reached from the nav: less padding, a slightly smaller shot. */
.section.tour { padding: 80px 0; }
#tour { scroll-margin-top: -60px; }
.tour .head { margin-bottom: 32px; }
.tour .tablist { margin-bottom: 24px; }
.tour .panels { max-width: none; }
.tour .shot { display: block; max-width: min(880px, max(560px, (100svh - 380px) * 1.66)); margin: 0 auto; }

/* Tour: one plain sentence per screen, always in the same place, so switching tabs never moves anything. */
.caption { max-width: 760px; min-height: 1.6em; margin: 0 auto 20px; text-align: center; font-size: 17px; color: var(--text-2); }
@media (max-width: 760px) {
  .caption { min-height: 4.8em; font-size: 15px; }
}