.doc{ max-width:52rem; margin:0 auto; padding:0 1.25rem; }
    .doc h2{ font-family:'Playfair Display',Georgia,serif; font-size:1.65rem; font-weight:700; color:#103b27; margin:2.4rem 0 .5rem; letter-spacing:-.01em; }
    .doc h3{ font-family:"Space Grotesk",sans-serif; font-size:1.05rem; font-weight:700; color:#1a6e41; margin:1.5rem 0 .4rem; }
    .doc p, .doc li{ color:rgba(18,68,44,.9); line-height:1.75; }
    .doc p{ margin:.7rem 0; }
    .doc ul,.doc ol{ margin:.6rem 0 .6rem 1.2rem; }
    .doc ul li{ list-style:disc; margin:.35rem 0; }
    .doc ol li{ list-style:decimal; margin:.35rem 0; }
    .doc strong{ color:#0d3322; }
    .doc a{ color:#16543a; text-decoration:underline; text-underline-offset:2px; }
    .doc-lead{ font-size:1.1rem; color:rgba(18,68,44,.92); }
    .doc-answer{ margin:1.1rem 0; padding:1rem 1.2rem; border-radius:1rem; background:rgba(47,163,98,.08); border:1px solid rgba(47,163,98,.22); }
    .doc-answer p{ margin:0; }
    .doc-note{ margin:1.4rem 0; padding:1rem 1.2rem; border-radius:1rem; background:rgba(233,173,42,.1); border:1px solid rgba(233,173,42,.35); }
    .doc-note p{ margin:0; color:#6b4a12; font-size:.94rem; }
    .crumbs{ font-size:.82rem; color:rgba(18,68,44,.65); margin-bottom:.4rem; }
    .crumbs a{ color:#16543a; }
    .card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:1.4rem 0; }
    .mini-card{ display:block; padding:1.1rem 1.2rem; border-radius:1rem; background:#fff; border:1px solid rgba(47,163,98,.2); text-decoration:none !important; box-shadow:0 10px 30px -22px rgba(16,68,44,.4); transition:transform .2s ease, box-shadow .2s ease; }
    .mini-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -24px rgba(16,68,44,.5); }
    .mini-card h3{ margin:0 0 .3rem; font-size:1rem; }
    .mini-card p{ margin:0; font-size:.9rem; color:rgba(18,68,44,.78); }
    .term{ margin:1.1rem 0; padding-bottom:1rem; border-bottom:1px solid rgba(47,163,98,.14); }
    .term h3{ margin:0 0 .25rem; }
    .term p{ margin:0; }
    html[data-theme="dark"] .doc h2, html[data-theme="dark"] .doc strong{ color:#eaf6ee; }
    html[data-theme="dark"] .doc h3{ color:#7fd4a0; }
    html[data-theme="dark"] .doc p, html[data-theme="dark"] .doc li, html[data-theme="dark"] .doc-lead{ color:rgba(214,236,222,.88); }
    html[data-theme="dark"] .doc a, html[data-theme="dark"] .crumbs a{ color:#7fd4a0; }
    html[data-theme="dark"] .doc-answer{ background:rgba(127,212,160,.1); border-color:rgba(127,212,160,.24); }
    html[data-theme="dark"] .doc-note{ background:rgba(240,198,94,.09); border-color:rgba(240,198,94,.3); }
    html[data-theme="dark"] .doc-note p{ color:#f3ddb0; }
    html[data-theme="dark"] .crumbs{ color:rgba(190,216,199,.74); }
    html[data-theme="dark"] .mini-card{ background:#0f2b1e; border-color:rgba(127,212,160,.18); }
    html[data-theme="dark"] .mini-card p{ color:rgba(214,236,222,.8); }
    html[data-theme="dark"] .term{ border-bottom-color:rgba(127,212,160,.14); }
    html.theme-switching *{ transition:none !important; }
    /* the shared .footer-link / faint Tailwind inks are tuned for the dark
       footer on the home page; these pages sit on a light canvas, so restate
       them for both themes instead of inheriting an unreadable colour. */
    body > footer .footer-link{ color:rgba(18,68,44,.82) !important; }
    body > footer .footer-link:hover{ color:#0d3322 !important; }
    body > footer p{ color:rgba(18,68,44,.72) !important; }
    html[data-theme="dark"] body > footer .footer-link{ color:rgba(214,236,222,.82) !important; }
    html[data-theme="dark"] body > footer .footer-link:hover{ color:#eaf6ee !important; }
    html[data-theme="dark"] body > footer p{ color:rgba(214,236,222,.72) !important; }
    .crumbs{ color:rgba(18,68,44,.8); }
    html[data-theme="dark"] .crumbs{ color:rgba(214,236,222,.8); }