/* dibslyapp.com's other pages (support, help, features, privacy, terms, split; 2026-10-29, owner: «в стиле нового
   лендинга… не магия лендинга, но чтобы не выбивались»): the landing's palette, Geologica and Manrope, its nav pill,
   buttons, plans, questions and footer, without the particles, the 3D or the scenes. Cards and grids fold to one
   column on their own; nothing is wider than a 320 px screen. */
:root {
    --bg: #0E0C0B;
    --bg-2: #120F0D;
    --card: #1D1815;
    --card-2: #241E1A;
    --ink: #F6EBDD;
    --soft: #CDBFB2;
    --muted: #A89A8D;
    --dim: #8C7F74;
    --line: rgba(246, 235, 221, 0.10);
    --line-2: rgba(246, 235, 221, 0.16);
    --orange: #FF8A3D;
    --orange-ink: #1A0E06;
    --orange-soft: #FFA153;
    --peach-ink: #F6D7BC;
    --green: #5BD08A;
    --red: #FF7A6B;
    --display: "Geologica", "SF Pro Display", system-ui, sans-serif;
    --text: "Manrope", "SF Pro Text", system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
    background: radial-gradient(900px 520px at 78% -120px, rgba(232, 110, 28, 0.14), rgba(232, 110, 28, 0)) no-repeat, var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-soft); text-decoration: none; }
a:hover { color: #FFC08A; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
main { flex: 1; padding-top: 112px; }
main p, main li, main td, main dd { overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.narrow > * { max-width: 800px; }
.muted { color: var(--muted); }

/* The header: v3/nav.css (every page's, from tools/pages.py). */

/* Buttons, as on the landing */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; font-size: 16px; font-weight: 600; padding: 15px 24px; border-radius: 16px; transition: background .3s, color .3s, border-color .3s; text-align: center; }
.button.light { background: var(--ink); color: var(--bg); }
.button.light:hover { background: #fff; color: var(--bg); }
.button.ghost { color: var(--ink); border: 1px solid var(--line-2); font-weight: 500; }
.button.ghost:hover { border-color: var(--orange); color: var(--ink); }
.button.hot { background: var(--orange); color: var(--orange-ink); }
.button.hot:hover { background: #FF9B57; color: var(--orange-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* A page's own top */
.page-hero { padding: 40px 0 16px; }
.kicker { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); flex: none; }
.page-hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; max-width: 820px; }
.page-hero h1 .hot { color: var(--orange); }
.lead { margin: 22px 0 0; font-size: 19px; line-height: 1.6; color: var(--soft); max-width: 640px; }
.updated { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* Sections and cards */
.section { padding: 56px 0 8px; scroll-margin-top: 96px; }
.section > .wrap > h2, .section-head h2 { font-size: clamp(28px, 3.2vw, 40px); }
.section-lead { margin: 14px 0 0; font-size: 17px; color: var(--soft); max-width: 680px; }
.grid { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.card { position: relative; padding: 28px; border-radius: 24px; background: rgba(29, 24, 21, 0.86); border: 1px solid var(--line); min-width: 0; }
.card h3 { font-size: 21px; margin: 0 0 10px; }
.card p { margin: 0 0 12px; color: var(--soft); }
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.card .tag { display: inline-block; margin-left: 6px; vertical-align: 2px; }
.card + .card { margin-top: 16px; }
h2 + .card { margin-top: 28px; }
.grid .card + .card { margin-top: 0; }
.note { color: var(--orange-soft); }
.warn { color: var(--peach-ink); }
.tag, .badge { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 138, 61, 0.16); color: var(--orange-soft); white-space: nowrap; }
.badge { background: var(--orange); color: var(--orange-ink); }

/* Steps inside a card (the guides) */
.steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.steps li { position: relative; padding-left: 38px; color: var(--soft); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--orange-ink); background: var(--orange-soft); }
.card ul { margin: 0 0 12px; padding-left: 20px; color: var(--soft); }
.card li + li { margin-top: 6px; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--card-2); color: var(--ink); overflow-wrap: anywhere; }

/* Free / Premium, as on the landing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; margin-top: 32px; }
.plan { position: relative; padding: 36px; border-radius: 32px; background: rgba(29, 24, 21, 0.9); border: 1px solid var(--line); min-width: 0; }
.plan h3 { font-size: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan .price { margin: 16px 0 0; font-family: var(--display); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { display: block; margin-top: 10px; font-family: var(--text); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan.premium { background: linear-gradient(160deg, rgba(58, 38, 27, 0.95), rgba(29, 24, 21, 0.95) 70%); border-color: rgba(255, 138, 61, 0.45); }
.plan.premium .price small { color: var(--peach-ink); }
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.45; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }
.checks.green li::before { color: var(--green); }
.checks.orange li::before { color: var(--orange-soft); }
.checks span { color: var(--muted); }
.plan .button { margin-top: 28px; }
.plans-note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

/* Questions, as on the landing */
.faq { display: flex; flex-direction: column; margin-top: 20px; }
.faq details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 24px; line-height: 1; transition: transform .4s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 680px; }

/* A long text: the privacy policy and the terms */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 48px 0 14px; scroll-margin-top: 96px; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; scroll-margin-top: 96px; }
.prose h4 { font-size: 17px; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--soft); line-height: 1.7; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose .table { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 16px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--soft); }
.prose th { color: var(--ink); background: var(--card-2); }
.prose tr:last-child td { border-bottom: 0; }

/* A page with its sections' list on the left (a scrolling row on a phone) */
.with-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; max-height: calc(100vh - 120px); overflow-y: auto; min-width: 0; }
.toc a { color: var(--muted); padding: 7px 12px; border-radius: 10px; }
.toc a:hover, .toc a.on { color: var(--ink); background: var(--card); }

/* The guides: a column of sections beside the list */
.guide .section { padding: 48px 0 0; }
.guide .section:first-child { padding-top: 16px; }
.guide .section > h2 { font-size: clamp(26px, 2.8vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guide h2 + .card { margin-top: 20px; }
.guide .card + .card { margin-top: 12px; }
.guide > .section-lead { margin-top: 48px; }

/* Footer, as on the landing */
footer { border-top: 1px solid var(--line); padding: 32px 0 48px; margin-top: 96px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 14px; }
.foot-row a { color: var(--muted); }
.foot-row a:hover { color: var(--ink); }
.foot-row b { font-family: var(--display); }
.copy-r { margin-left: auto; color: var(--muted); }

/* A soft rise as things come in (v3/pages.js turns it on; «reduce motion» or no script: simply there). */
.rise-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rise-on .reveal { opacity: 1; transform: none; transition: none; }
    .faq summary::after { transition: none; }
}

/* Tablets */
@media (max-width: 1080px) {
    .with-toc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .toc { position: sticky; top: 76px; z-index: 5; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; gap: 6px; padding: 10px 0;
        background: var(--bg); box-shadow: 0 14px 16px -6px var(--bg); scrollbar-width: none; }
    .toc::-webkit-scrollbar { display: none; }
    .toc a { white-space: nowrap; background: var(--card); }
}
/* Phones */
@media (max-width: 640px) {
    .wrap { padding: 0 20px; }
    main { padding-top: 96px; }
    .page-hero { padding-top: 24px; }
    .lead { font-size: 17px; }
    .card { padding: 22px; border-radius: 20px; }
    .plan { padding: 26px; border-radius: 26px; }
    .plan .price { font-size: 44px; }
    .faq summary { font-size: 17px; }
    .copy-r { margin-left: 0; width: 100%; }
    footer { margin-top: 64px; }
}