/* =============================================================================
   aguna.app guide pages, October 2026.                       (/css/guides-2026b.css)
   Loaded LAST in <head>, after each page's own <style>, and replaces
   /css/guides-2026.css. Same rules as the homepage (/css/site-2026b.css):
   Manrope for every word, Archivo Black for the wordmark only, no serif, no
   italics for emphasis, no gold glow or gold borders, no animated metal, no dot
   grids or radial washes. Gold-ink words only on navy at heading size.
   ============================================================================= */

@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/fonts2026/archivo-black-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --g-canvas: #0B1C38;
  --g-navy: #0F2547;
  --g-cream: #FAF6EC;
  --g-muted-on-navy: #A9B4C7;
  --g-line: #E4DFD2;
  --g-gold-fill: linear-gradient(in oklab 180deg, #F3E0A0 0%, #D5B660 52%, #B6943D 100%);
  --g-gold-ink: linear-gradient(in oklab 180deg, #FBEBB8 0%, #E8CB7A 38%, #CBA84E 66%, #A9852F 100%);
  --g-font: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* one type system */
body, h1, h2, h3, h4, p, li, td, th, summary, button, input, .faq h3, .compare thead th { font-family: var(--g-font) !important; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 800 !important; letter-spacing: -0.02em; text-wrap: balance; }
p, li { text-wrap: pretty; }
em, .em { font-style: normal !important; }

/* nav: solid navy, one hairline, no gold border */
nav.bar, header.site {
  background: var(--g-canvas) !important; color: var(--g-cream);
  border-bottom: 1px solid oklch(1 0 0 / 0.08) !important; border-image: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
nav.bar .brand, header.site .logo { font-family: 'Archivo Black', var(--g-font) !important; font-weight: 400 !important; letter-spacing: 0.06em; color: var(--g-cream) !important; }
.brand img, .logo img { border-radius: 8px; }
div.bar > a, div.bar > a .dot { font-family: 'Archivo Black', var(--g-font) !important; font-weight: 400 !important; letter-spacing: 0.06em; color: var(--g-cream) !important; text-decoration: none; }
header.site .nav a { color: var(--g-muted-on-navy); text-decoration: none; }

/* the one gold thing: the button fill. No glow, no moving metal, press scales. */
.navcta, .nav a.cta, .btn {
  background: var(--g-gold-fill) !important; color: var(--g-navy) !important; border: 0 !important;
  font-family: var(--g-font) !important; font-weight: 700 !important;
  box-shadow: 0 6px 16px oklch(0.12 0.05 260 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.55) !important;
  animation: none !important; filter: none !important; transform: none;
  transition: scale 150ms ease-out !important;
}
.navcta:active, .nav a.cta:active, .btn:active { scale: 0.96; }
.navcta:hover, .nav a.cta:hover, .btn:hover { transform: none !important; filter: none !important; }

/* hero: flat navy */
header.top, .hero { background: var(--g-canvas) !important; color: var(--g-cream); }
header.top::before, .hero::before, header.top::after, .hero::after { content: none !important; display: none !important; }
header.top h1, .hero h1 { color: var(--g-cream) !important; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  header.top h1 .em, header.top h1 em, .hero h1 em, .hero h1 .em, .hero h2 em {
    background: var(--g-gold-ink) !important; -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important; animation: none !important;
  }
}
/* on cream, emphasis stays in the text colour (gold ink measures below 3:1 there) */
main h1 em, main h2 em, main h2 .em, .pick .who {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: inherit !important; animation: none !important;
}

/* eyebrow: a quiet label, not a gold-bordered pill */
.eyebrow { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-muted-on-navy) !important; }
main .eyebrow { color: #5B6675 !important; }

/* body details */
p a, li a, .also a { text-decoration-color: oklch(0.3 0.05 260 / 0.35) !important; text-underline-offset: 3px; }
p a:hover, li a:hover { color: var(--g-navy) !important; text-decoration-color: currentColor !important; }
.verdict { background: #fff !important; border: 1px solid transparent !important; box-shadow: 0 0 0 1px var(--g-line) !important; border-radius: 20px !important; padding-left: 24px !important; }
.pick { border-radius: 20px; transition: none !important; }
.pick:hover { transform: none !important; box-shadow: none !important; }
tbody tr.us td { background: #F3EEDF !important; }
tbody tr.us td:first-child { box-shadow: inset 3px 0 0 var(--g-navy) !important; }
details.faq summary::after { background: none !important; color: var(--g-navy) !important; border-radius: 0 !important; font-weight: 700; }
ul.tips li::before { color: var(--g-navy) !important; }
.chip { background: #fff !important; border: 1px solid var(--g-line) !important; }
.shots img { border-radius: 26px; box-shadow: 0 24px 48px -28px oklch(0.2 0.05 260 / 0.55) !important; }
:focus-visible { outline: 2px solid var(--g-navy) !important; outline-offset: 3px; }
nav.bar :focus-visible, header.site :focus-visible, header.top :focus-visible, .hero :focus-visible,
section.cta :focus-visible, .cta-band :focus-visible, footer :focus-visible { outline-color: var(--g-cream) !important; }

/* closing call and footer: flat navy, hairline, no gold rule */
section.cta, .cta-band { background: var(--g-canvas) !important; color: var(--g-cream); }
section.cta h2, .cta-band h2 { color: var(--g-cream) !important; }
footer { background: var(--g-canvas) !important; color: var(--g-muted-on-navy) !important; border-top: 1px solid oklch(1 0 0 / 0.08) !important; }
footer a { color: var(--g-muted-on-navy) !important; }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--g-cream) !important; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }