/* Страницы-инструкции для репетитора и ученика. Гость видит их в оформлении главной, вошедший пользователь — внутри кабинета.
   Цвета только из theme.css: тёмная тема работает без отдельных правил. */
.hp{max-width:1120px;margin:0 auto;padding:clamp(18px,3vw,36px) 0 56px;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
/* у гостя вокруг страницы нет отступов (main без полей), как у главной: ширина и поля те же, что у .wrap */
html.site .hp{max-width:1180px;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.hp-crumbs{margin:0 0 18px;font-size:14.5px;color:var(--ink-2)}
.hp-crumbs a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.hp h1{margin:0 0 12px;font:650 clamp(30px,4.4vw,48px)/1.1 var(--serif);letter-spacing:-.015em}
.hp-lead{margin:0 0 22px;max-width:36em;font-size:clamp(16.5px,1.6vw,19px);color:var(--ink-2)}
.hp-actions{display:flex;flex-wrap:wrap;gap:10px}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1.5px solid transparent;border-radius:10px;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.hp .hp-btn:hover{text-decoration:none}
.hp .hp-btn-solid{background:var(--accent);color:var(--on-accent)}
.hp .hp-btn-solid:hover{background:var(--accent-d);color:var(--on-accent)}
.hp .hp-btn-line{border-color:var(--ink);background:transparent;color:var(--ink)}
.hp .hp-btn-line:hover{background:var(--ink);color:var(--on-ink)}
.hp .hp-btn[aria-current="page"]{border-color:var(--line-3);background:var(--inset);color:var(--ink-2);pointer-events:none}
.hp :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.hp-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;margin-top:40px;align-items:start}
.hp-toc{position:sticky;top:88px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.hp-toc-title{margin:0 0 8px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.hp-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hp-toc a{display:block;padding:6px 8px;margin:0 -8px;border-radius:8px;color:var(--ink);font-size:15.5px;line-height:1.35;text-decoration:none}
.hp-toc a:hover{background:var(--raised);text-decoration:none}

.hp-main{min-width:0}
.hp-sec{padding:0 0 44px;scroll-margin-top:88px}
.hp-sec h2{margin:0 0 14px;padding-top:18px;border-top:1.5px solid var(--ink);font:650 clamp(24px,2.8vw,32px)/1.15 var(--serif);letter-spacing:-.01em}
.hp-text{margin:0 0 12px;max-width:42em;color:var(--ink-2)}
.hp-steps{list-style:none;counter-reset:hp;margin:18px 0 0;padding:0;display:grid;gap:18px;max-width:46em}
.hp-steps li{counter-increment:hp;position:relative;padding:0 0 0 54px;min-height:38px}
.hp-steps li::before{content:counter(hp);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 17px/1 var(--sans)}
.hp-steps h3{margin:1px 0 4px;font:650 19px/1.3 var(--serif)}
.hp-steps p{margin:0;color:var(--ink-2)}
.hp-cards{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp-cards li{padding:16px 18px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.hp-cards h3{margin:0 0 6px;font:650 19px/1.3 var(--serif)}
.hp-cards p{margin:0;font-size:15.5px;color:var(--ink-2)}
.hp-tip{margin:22px 0 0;max-width:46em;padding:12px 16px;border-left:4px solid var(--warn-line);border-radius:8px;background:var(--warn-bg);color:var(--warn-ink);font-size:15.5px}

.hp-faq{max-width:46em}
.hp-faq details{border-top:1.5px solid var(--ink)}
.hp-faq details:last-child{border-bottom:1.5px solid var(--ink)}
.hp-faq summary{position:relative;display:block;padding:16px 40px 16px 0;cursor:pointer;list-style:none;font:650 18px/1.35 var(--serif)}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::before,.hp-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--accent);transition:transform .2s}
.hp-faq summary::after{transform:rotate(90deg)}
.hp-faq details[open] summary::after{transform:rotate(0)}
.hp-faq p{margin:0;padding:0 40px 18px 0;color:var(--ink-2)}

.hp-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:8px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.hp-next-text{margin:0;font:650 19px/1.35 var(--serif)}
.hp-updated{margin:18px 0 0;font-size:14px;color:var(--ink-2)}

@media (max-width:900px){
  .hp-body{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .hp-toc{position:static}
  .hp-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@media (max-width:620px){
  .hp{font-size:16.5px}
  .hp-cards{grid-template-columns:minmax(0,1fr)}
  .hp-toc ol{grid-template-columns:minmax(0,1fr)}
  .hp-actions .hp-btn{flex:1 1 100%}
  .hp-next .hp-btn{flex:1 1 100%}
}
@media print{
  .hp-toc,.hp-actions,.hp-next{display:none}
  .hp-body{display:block}
  .hp-sec{break-inside:avoid-page}
}