/* Shared look for /guides/* and /methodology. Loaded after each page's own <style>.
   Page is plain white and reads as an editorial article: no full-width bands, no
   white cards. Tint (cream / coral-light) is reserved for the parts that need to
   stand out: callouts, worked examples, criteria blocks, the CTA. */

body { background: #fff; }

/* Hero: white, big type, nothing behind it. */
.g-hero { background: #fff !important; padding: 80px 0 24px; }
.g-eyebrow {
  background: var(--coral-l); color: var(--coral-d);
  padding: 5px 12px; border-radius: 999px; letter-spacing: 1px;
}
.g-h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -1.8px; text-wrap: balance; }
.g-lede { color: #57514B; }
.g-meta { margin-top: 4px; padding-top: 14px; border-top: 1px solid #EEE8E0; display: inline-block; }

/* Strip the full-width white bands (TOC strip + CTA strip). */
article > section[style*="background:var(--surface)"] { background: transparent !important; border: 0 !important; }
article > section.py-4[style*="background:var(--surface)"] { padding-top: 8px !important; padding-bottom: 8px !important; }

/* TOC / "short version": open lists with a coral rule, not boxes. */
.g-toc, .g-short {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-left: 3px solid var(--coral); padding: 4px 0 4px 22px;
}
.g-short { padding-bottom: 0; }
.g-toc a { border-bottom: 0; padding: 5px 0; transition: color .15s, padding-left .15s; }
.g-toc a:hover { color: var(--coral-d); padding-left: 4px; }

/* Article text sits directly on the page. */
.g-prose { max-width: 740px; background: none; border: 0; box-shadow: none; padding: 0; }
.g-prose h2 { margin-top: 56px; letter-spacing: -.8px; }
.g-prose h2::before {
  content: ''; display: block; width: 36px; height: 3px; border-radius: 3px;
  background: var(--coral); margin-bottom: 14px;
}
.g-prose a { text-decoration-color: rgba(194,97,62,.4); transition: text-decoration-color .15s; }
.g-prose a:hover { text-decoration-color: currentColor; }

/* Blocks that used to be white boxes: soft cream tint, no outline. */
.crit, .g-flow-step, .g-help-item, .g-author, .g-example {
  background: #FAF7F2; border: 0; border-radius: 14px;
}
.g-example { border: 1px dashed #E3D9CE; }
.g-example-label { background: #fff; }
.g-table-wrap { background: transparent; border: 0; border-radius: 0; }
.g-table th { background: none; border-bottom: 2px solid #1C1917; color: var(--warm); }
.g-table td { border-bottom: 1px solid #EEE8E0; }
.crit { transition: box-shadow .15s; }
.crit:hover { box-shadow: inset 3px 0 0 var(--coral); }
.crit-n { background: #fff; }
.g-callout { border-radius: 14px; }

/* FAQ items from the layout are white cards too; make them plain rows. */
.pub-faq-item { background: none !important; border: 0 !important; border-bottom: 1px solid #EEE8E0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* CTA: the one dark block. */
.g-cta { background: linear-gradient(160deg, #26201D 0%, #1C1917 60%, #2A1D17 100%); }

@media (max-width: 767px) { .g-hero { padding: 52px 0 16px; } }