/* Текстові сторінки (інструкції, оферта, політика): шапка з ілюстрацією, зміст збоку, охайний текст. */
.phero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:40px 28px}
@media(max-width:820px){.phero{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:24px}.phero .art{max-width:260px;justify-self:center}}
.phero h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.025em}
.phero .lead{color:var(--muted);font-size:18px;margin:14px 0 0;max-width:56ch}
.phero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.phero .meta span{font-size:13px;font-weight:600;color:var(--accent-strong);background:var(--accent-soft);border-radius:99px;padding:5px 12px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--accent-strong);text-decoration:none}
.art svg{width:100%;height:auto;display:block}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:56px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr);gap:16px}}
.toc{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 12px;font-size:14px}
.toc b{display:block;color:var(--ink);margin-bottom:8px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:6px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover,.toc a.on{color:var(--accent-strong)}
@media(max-width:900px){.toc{position:static}}

.prose{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px 40px;min-width:0;box-shadow:0 2px 6px rgba(26,31,87,.03)}
@media(max-width:560px){.prose{padding:24px 18px;border-radius:16px}}
.prose section+section{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.prose h2{font-size:22px;margin-bottom:12px;scroll-margin-top:16px;display:flex;align-items:center;gap:10px}
.prose h2 .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-size:14px;display:grid;place-items:center}
.prose p,.prose li{color:var(--text);max-width:72ch}
.prose p{margin:0 0 10px}
.prose ul{margin:0 0 10px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent-strong)}
.prose .note{font-size:14px;color:var(--muted)}
.ph{background:var(--hl);color:var(--hl-ink);border-radius:3px;padding:0 4px}

.table{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 12px}
.table div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;flex-wrap:wrap}
.table div+div{border-top:1px solid var(--line)}
.table div:nth-child(odd){background:var(--bg)}
.table b{color:var(--ink);white-space:nowrap}
@media(max-width:560px){.table b{white-space:normal}}
.ticks{list-style:none;padding:0!important}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-9' fill='none' stroke='%23067A5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.steps{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;max-width:none}
.steps li::before{content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;display:grid;place-items:center}
.steps b{color:var(--ink)}
.steps span{color:var(--muted)}
.tip{background:var(--accent-soft);border-radius:12px;padding:14px 18px;color:var(--text)}
.tip b{color:var(--ink)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:16px;padding:26px 28px;margin-top:34px;border-top:0!important}
.cta h2{color:#fff;margin:0 0 4px}
.cta p{color:#C9CCE6;margin:0}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

/* поява блоків під час прокручування */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.float{animation:none}}
.phero{position:relative}
.phero h1{font-weight:800}
.prose h2{font-weight:800}