/*
 * Styles for the static marketing and guide pages built by scripts/build-content.mjs.
 * Loaded after the app stylesheet so it inherits the felt, gold and typography tokens
 * and only adds what long-form prose needs.
 */

body.doc {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  background: radial-gradient(120% 80% at 22% 0%, #1f5c43 0%, #10402f 45%, #0a2a1f 100%);
  background-attachment: fixed;
  color: #e8efe8;
}
.doc-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
/* Felt weave. Kept on a pseudo element so its opacity does not fade the gold frame with it. */
.doc-bg::before { content: ""; position: absolute; inset: 0; opacity: 0.16; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 4px); }
.doc-bg .hero-frame { position: fixed; inset: 18px; border: 2px solid rgba(201, 162, 39, 0.38); }
.doc-bg .hero-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 162, 39, 0.18); }

/* Shared bits the app stylesheet also defines. Repeated here so a content page needs nothing else. */
.doc .brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.doc .brand img { display: block; width: auto; }
.doc .eyebrow { display: flex; align-items: center; gap: 12px; color: #c9a227; font-size: 17px; letter-spacing: 0.28em; text-transform: uppercase; }
.doc .eyebrow-rule { width: 44px; height: 1px; background: rgba(201, 162, 39, 0.6); flex: none; }
.doc .fine { margin: 0; color: #a3b1c2; font-size: 15px; line-height: 1.5; }
.doc * { box-sizing: border-box; }

/* Header */
.doc-bar { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 30px 40px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.doc-bar .brand img { height: 40px; width: auto; display: block; }
.doc-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.doc-nav a { color: #d8e5d8; text-decoration: none; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; }
.doc-nav a:hover { color: #e0bf4a; }
a.doc-cta { background: #c9a227; color: #14110f; font-weight: 600; padding: 10px 20px; border-radius: 8px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; display: inline-block; }
a.doc-cta:hover { background: #e0bf4a; color: #14110f; }
a.doc-cta.big { font-size: 22px; padding: 15px 34px; }

/* Article */
.doc-main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 40px 40px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.doc-article { min-width: 0; font-size: 19px; line-height: 1.62; }
.doc-article h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.015em; color: #fdfaf2; margin: 14px 0 0; }
.doc-article h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 32px; color: #fdfaf2; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid rgba(201, 162, 39, 0.25); }
.doc-article h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 23px; color: #fdfaf2; margin: 28px 0 8px; }
.doc-article h4 { font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; color: #c9a227; margin: 22px 0 6px; }
.doc-article p { margin: 0 0 16px; }
.doc-lede { font-size: 24px; line-height: 1.35; color: #d8e5d8; margin: 16px 0 8px; }
.doc-meta { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: #8fa89a; margin: 0 0 28px; }
/* The direct answer, set apart so a reader (or an answer engine) can lift it without the surrounding argument. */
.doc-answer { margin: 18px 0 24px; padding: 16px 20px; background: rgba(201, 162, 39, 0.1); border-left: 3px solid #c9a227; border-radius: 0 10px 10px 0; font-size: 20px; line-height: 1.5; color: #fdfaf2; }
.doc-answer a { color: #e0bf4a; }
.doc-article a { color: #e0bf4a; text-decoration: underline; text-underline-offset: 3px; }
.doc-article a:hover { color: #fdfaf2; }
.doc-article strong { color: #fdfaf2; }
.doc-article ul, .doc-article ol { margin: 0 0 18px; padding-left: 22px; }
.doc-article li { margin: 0 0 8px; }
.doc-article ul { list-style: none; padding-left: 0; }
.doc-article ul li { padding-left: 26px; position: relative; }
.doc-article ul li::before { content: "\2660"; position: absolute; left: 0; color: #c9a227; }
.doc-article blockquote { margin: 22px 0; padding: 14px 20px; background: rgba(0, 0, 0, 0.28); border-left: 3px solid #c9a227; border-radius: 0 10px 10px 0; }
.doc-article blockquote p { margin: 0; color: #d8e5d8; }
.doc-article code { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 162, 39, 0.3); padding: 2px 7px; border-radius: 5px; font-size: 0.9em; }
.doc-article hr { border: none; border-top: 1px solid rgba(201, 162, 39, 0.25); margin: 34px 0; }

.table-wrap { overflow-x: auto; margin: 0 0 22px; }
.doc-article table { border-collapse: collapse; width: 100%; font-size: 17px; }
.doc-article th, .doc-article td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(253, 250, 242, 0.14); }
.doc-article th { color: #c9a227; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; font-weight: 600; }

/* Calls to action */
.doc-cta-block { margin: 48px 0 0; padding: 30px 32px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 16px; text-align: center; }
.doc-cta-block h2 { border: none; padding: 0; margin: 0 0 8px; font-size: 30px; }
.doc-cta-block p { color: #d8e5d8; max-width: 520px; margin: 0 auto 20px; }

/* Related */
.doc-related { position: sticky; top: 30px; background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(253, 250, 242, 0.12); border-radius: 14px; padding: 22px 24px; }
.doc-related h2 { font-family: "Playfair Display", Georgia, serif; font-size: 21px; color: #fdfaf2; margin: 0 0 14px; }
.doc-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.doc-related a { display: block; color: #e0bf4a; text-decoration: none; font-size: 18px; line-height: 1.25; }
.doc-related a:hover { color: #fdfaf2; }
.doc-related span { display: block; color: #93a99b; font-size: 14px; line-height: 1.35; margin-top: 3px; }

/* Footer */
.doc-foot { position: relative; z-index: 1; margin-top: 60px; border-top: 1px solid rgba(201, 162, 39, 0.25); background: rgba(0, 0, 0, 0.3); }
.doc-foot-inner { max-width: 1080px; margin: 0 auto; padding: 40px 40px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.doc-foot h3 { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: #c9a227; margin: 6px 0 12px; }
.doc-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.doc-foot a { color: #d8e5d8; text-decoration: none; font-size: 17px; }
.doc-foot a:hover { color: #e0bf4a; }
.doc-foot .brand img { height: 30px; width: auto; }
.doc-foot .fine { margin-top: 12px; max-width: 340px; }
.doc-copy { max-width: 1080px; margin: 0 auto; padding: 0 40px 30px; }

/* Homepage crawlable section (rendered in index.html, below the app) */
.home-seo { position: relative; z-index: 1; background: #0a2a1f; border-top: 1px solid rgba(201, 162, 39, 0.28); font-family: "Barlow Condensed", system-ui, sans-serif; color: #e8efe8; }
.home-seo-inner { max-width: 1080px; margin: 0 auto; padding: 60px 40px; display: grid; gap: 40px; }
.home-seo h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 34px; color: #fdfaf2; margin: 0 0 12px; }
.home-seo h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 22px; color: #fdfaf2; margin: 0 0 6px; }
.home-seo p { margin: 0 0 14px; font-size: 19px; line-height: 1.6; color: #d8e5d8; max-width: 70ch; }
.home-seo a { color: #e0bf4a; }
.home-seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.home-seo-grid div { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(253, 250, 242, 0.12); border-radius: 14px; padding: 20px 22px; }
.home-seo-grid p { font-size: 17px; margin: 0; }
.home-seo-links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; }
.home-seo-links a { font-size: 18px; }
.home-seo .fine { margin: 6px 0 0; color: #a3b1c2; font-size: 15px; }

@media (max-width: 900px) {
  .doc-main { grid-template-columns: 1fr; gap: 34px; padding: 28px 22px 10px; }
  .doc-related { position: static; }
  /* Header keeps only the logo and the CTA on a phone. Every nav link is repeated in the footer. */
  .doc-bar { padding: 20px 22px 0; gap: 12px; flex-wrap: nowrap; }
  .doc-bar .brand img { height: 30px; }
  .doc-nav a:not(.doc-cta) { display: none; }
  a.doc-cta { padding: 9px 16px; font-size: 15px; }
  a.doc-cta.big { font-size: 19px; padding: 14px 26px; }
  .doc-article { font-size: 18px; }
  .doc-article h2 { font-size: 27px; }
  .doc-foot-inner { grid-template-columns: 1fr; padding: 32px 22px 20px; }
  .doc-copy { padding: 0 22px 24px; }
  .home-seo-inner { padding: 44px 22px; }
  .doc-bg .hero-frame { inset: 10px; }
  .doc .eyebrow { font-size: 14px; letter-spacing: 0.18em; }
}