/* Reading pages: guides, articles, and the bundles and subscriptions pages. Loaded by scripts/website/sitePage.ts for those paths. */
.doc .container { max-width: 900px; }
.doc .hero-c { padding-top: 48px !important; padding-bottom: 8px; }
.doc h1 { font-size: clamp(30px, 4.6vw, 44px); }
.doc .lead, .doc .guide .answer { font-size: 19px; line-height: 1.6; color: var(--ink-secondary); max-width: none; }
.doc .answer { background: var(--surface-white); border: 2px solid var(--ink-primary); border-radius: 18px; padding: 20px 24px; box-shadow: 0 5px 0 rgba(53, 40, 74, .14); color: var(--ink-primary); }

/* each section is its own card */
.doc section.container:not(.hero-c) { width: min(900px, calc(100% - 32px)); padding: 28px 32px; margin: 0 auto 18px; background: var(--surface-white); border: 1px solid #eee3d6; border-radius: 20px; }
.doc h2 { font-size: 25px; line-height: 1.25; margin: 0 0 14px; }
.doc p, .doc li { font-size: 17px; line-height: 1.7; }
.doc .prose p, .doc .guide p { max-width: none; margin: 0 0 14px; }
.doc section > :last-child { margin-bottom: 0; }
.doc a:not(.btn) { color: var(--green-deep, #00875a); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.doc .btn { margin-top: 10px; }
.doc p + .btn { margin-top: 16px; }

/* steps: numbered cards */
.doc ol.steps { list-style: none; counter-reset: step; padding: 0; max-width: none; display: grid; gap: 12px; }
.doc ol.steps li { counter-increment: step; position: relative; margin: 0; padding: 12px 16px 12px 58px; background: #fbf7ff; border: 1px solid rgba(124, 92, 255, .18); border-radius: 14px; }
.doc ol.steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--purple, #7c5cff); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }

/* bullet lists: one column, check marks */
.doc .rowlist { columns: 1; list-style: none; padding: 0; }
.doc .rowlist li { position: relative; padding-left: 32px; margin: 0 0 12px; }
.doc .rowlist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft, #e3f7ee) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300875a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; border: 2px solid var(--ink-primary); }
.doc .rowlist li:has(> a:only-child)::before { background: var(--purple-soft, #efe9ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* cards (bundle and subscription types) */
.doc .cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.doc .card { background: #fbf7ff; border-color: rgba(124, 92, 255, .2); }
.doc section.container:has(> .cards) { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.doc .card h3 { margin-top: 0; }
.doc .card h3 a { text-decoration: none; }
.doc .card p { font-size: 15px; line-height: 1.5; }

/* tables */
.doc .table-wrap { margin: 6px 0 4px; }
.doc table.cmp { font-size: 15px; }
.doc table.cmp th, .doc table.cmp td { padding: 11px 14px; }

/* questions */
.doc .faq details { border: 1px solid #eee3d6; border-radius: 14px; padding: 0; margin: 0 0 10px; background: #fff; }
.doc .faq summary { list-style: none; cursor: pointer; padding: 15px 52px 15px 18px; font-size: 17px; line-height: 1.4; position: relative; }
.doc .faq summary::-webkit-details-marker { display: none; }
.doc .faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--purple-soft, #efe9ff); color: var(--purple-deep, #5a3fd6); display: grid; place-items: center; font-weight: 800; }
.doc .faq details[open] summary::after { content: "\2212"; }
.doc .faq details[open] summary { border-bottom: 1px solid #f1e8dc; }
.doc .faq details p { padding: 14px 18px 16px; margin: 0; }

/* guide and article index lists */
.doc ul.guide-list { grid-template-columns: 1fr; gap: 12px; }
.doc ul.guide-list li { padding: 14px 18px; background: #fbf7ff; border: 1px solid rgba(124, 92, 255, .18); border-radius: 14px; }
.doc ul.guide-list a { font-size: 18px; text-decoration: none; }

/* on this page */
.toc { width: min(900px, calc(100% - 32px)); margin: 4px auto 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toc b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-right: 4px; }
.toc a { padding: 6px 13px; border-radius: 999px; background: var(--surface-white); border: 1px solid #e3d8c9; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink-primary); }
.toc a:hover { background: var(--purple-soft, #efe9ff); }
.doc h2[id] { scroll-margin-top: 90px; }
@media (max-width: 640px) { .doc section.container:not(.hero-c) { padding: 22px 18px; } .doc ol.steps li { padding-left: 52px; } }
.doc .hero-c, .doc section.container:has(> .cards) { width: min(900px, calc(100% - 32px)); padding-left: 0; padding-right: 0; }
.doc .lead.answer { color: var(--ink-primary); font-size: 19px; }
.doc .rowlist + p { margin-top: 18px; }