/* Information pages (pricing, terms, privacy, refunds, contact). Builds on app.css: the painted sky,
   Cormorant for headings, DM Sans for text, and a cream leaf to read on. */
main.doc{max-width:760px}

/* Long-form reading */
.doc-body{padding:34px 36px 40px;font:400 1.03rem/1.72 var(--sans)}
@media (max-width:520px){.doc-body{padding:28px 22px 32px}}
.doc-body h2{margin:2em 0 .3em;font:700 1.6rem/1.2 var(--serif);color:var(--dusk);scroll-margin-top:18px}
.doc-body > h2:first-child{margin-top:0}
.doc-body p,.doc-body li{margin:.65em 0;max-width:68ch}
.doc-body ul{padding-left:1.25em}
.doc-body li::marker{color:var(--rose)}
.doc-body a{color:#7a3d8f;text-underline-offset:3px}
.doc-body a:hover{color:var(--dusk)}
.doc-body strong{color:var(--ink)}
.doc-body code{padding:1px 6px;border-radius:6px;background:rgba(74,42,122,.09);font-size:.92em}
.doc-body .note{font-size:.92rem;color:var(--muted)}

/* "On this page" */
.toc{margin:1.6em 0 0;padding:18px 22px 14px;border-radius:14px;background:rgba(74,42,122,.07)}
.toc strong{display:block;margin-bottom:6px;font:700 1.2rem var(--serif);color:var(--dusk)}
.toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:30px}
@media (max-width:600px){.toc ol{columns:1}}
.toc li{margin:.3em 0;max-width:none;break-inside:avoid;font-size:.95rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* Pricing */
.plans{display:grid;gap:18px;margin:4px 0 26px}
@media (min-width:700px){.plans{grid-template-columns:1fr 1.12fr;align-items:stretch}}
.plan{position:relative;display:flex;flex-direction:column;padding:28px 28px 26px}
.plan h2{margin:0;font:700 1.8rem/1.1 var(--serif)}
.plan .tag{margin:2px 0 0;font:italic 500 1.15rem/1.3 var(--serif);opacity:.85}
.plan ul{flex:1;margin:18px 0 24px;padding:0;list-style:none}
.plan li{position:relative;margin:.65em 0;padding-left:24px}
.plan li::before{content:'';position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%}
.plan .btn{align-self:flex-start}
@media (max-width:520px){.plan .btn{align-self:stretch;min-height:52px}}
.price{margin:14px 0 0}
.amount{font:700 3.2rem/1 var(--serif)}
.per{margin-left:6px;font:500 1rem var(--sans);opacity:.75}
.price-alt{margin:6px 0 0;font:500 .95rem var(--sans)}

.plan-free{color:var(--cream);background:rgba(27,22,71,.58);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(6px)}
.plan-free li::before{background:var(--gold);box-shadow:0 0 8px rgba(243,207,122,.7)}

.plan-plus{color:var(--ink);background:var(--cream);border-radius:6px 6px 22px 22px;box-shadow:0 22px 50px rgba(10,6,36,.5)}
.plan-plus::before{content:'';position:absolute;inset:8px;border:1px solid rgba(74,42,122,.22);border-radius:3px 3px 16px 16px;pointer-events:none}
.plan-plus h2{color:var(--dusk)}
.plan-plus .price-alt{color:var(--muted)}
.plan-plus li::before{background:var(--rose);box-shadow:0 0 8px rgba(232,120,154,.55)}

.buy{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.plan .buy .btn{align-self:stretch}
.btn.ghost-ink{background:transparent;color:var(--dusk);border:1px solid rgba(74,42,122,.4)}
.btn.ghost-ink:hover:not(:disabled){border-color:var(--dusk);background:rgba(74,42,122,.08)}
.buy-msg{min-height:1.4em;margin:10px 0 0;font:500 .92rem var(--sans);color:#8a2346}

/* Blog: an article is a hero picture and a cream leaf; the index and "keep reading" are cards on the sky */
main.post{max-width:820px}
.crumbs{margin:0 0 4px;font:700 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.crumbs a{color:var(--gold);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.post-fig{margin:18px 0 22px}
.post-fig img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 22px 50px rgba(10,6,36,.5);background:#241a55}
.post-body .meta{margin:0 0 1.2em;font:700 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-body p{font-size:1.08rem;line-height:1.78}
.post-body em{font-family:var(--serif);font-size:1.08em}
.blog-intro{max-width:62ch;margin:0 0 26px;font-size:1.02rem;line-height:1.65;opacity:.92}
.blog-grid,.related-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.blog-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card,.related-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--veil);color:var(--cream);text-decoration:none;
  backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}
.blog-card:hover,.related-card:hover,.blog-card:focus-visible,.related-card:focus-visible{transform:translateY(-3px);border-color:var(--gold)}
.blog-card img,.related-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#241a55}
.card-title{display:block;padding:14px 16px 0;font:700 1.3rem/1.22 var(--serif)}
.card-sum{display:block;padding:6px 16px 18px;font-size:.9rem;line-height:1.5;opacity:.85}
.related{margin:38px 0 0}
.related h2{margin:0 0 14px;font:700 1.7rem/1.2 var(--serif)}
.related-card .card-title{font-size:1.1rem}
.related-card .card-sum{display:none}
.post-cta{margin:34px 0 0;padding:26px 22px;text-align:center;border:1px solid var(--gold);border-radius:18px;background:rgba(243,207,122,.1)}
.post-cta p{margin:0 0 14px;font:italic 500 1.35rem/1.35 var(--serif)}
@media (prefers-reduced-motion:reduce){.blog-card,.related-card{transition:none}.blog-card:hover,.related-card:hover{transform:none}}