.guides-page { overflow-x: clip; }
.guides-container { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.guides-page a:focus-visible, .guides-page summary:focus-visible, .guide-table-scroll:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 5px; border-radius: 3px; }
.guides-skip { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--brand-gold); color: var(--bg-0); }
.guides-skip:focus { top: 12px; }
.guides-nav { position: sticky; top: 0; z-index: 40; min-height: 76px; padding: 16px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(5, 6, 13, .94); border-bottom: 1px solid var(--line); }
.guides-nav img { width: 145px; height: auto; }
.guides-nav nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); font-size: .88rem; }
.guides-nav a:hover, .guides-nav [aria-current] { color: var(--brand-gold); }
.guides-book { padding: 10px 16px; border: 1px solid var(--line-gold); border-radius: var(--radius-pill); color: var(--brand-gold); white-space: nowrap; }
.guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 28px 0; font-size: .78rem; color: var(--text-dim); }
.guide-breadcrumb a:hover { color: var(--brand-gold); }
.guide-kicker { color: var(--brand-gold); font: 500 .7rem/1.6 var(--font-mono); letter-spacing: .06em; margin: 0 0 16px; }
.guide-kicker span { color: var(--text-dim); }
.guides-intro { max-width: 890px; padding-block: 52px 46px; }
.guides-intro h1 { font: 600 clamp(2.6rem, 5.7vw, 4.6rem)/1.12 var(--font-display); letter-spacing: -.035em; margin: 0 0 24px; }
.guides-intro h1 em { font-style: normal; color: var(--brand-gold); }
.guides-intro > p:last-child { max-width: 610px; font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--text-dim); line-height: 1.8; }
.guide-featured { display: grid; grid-template-columns: 1.12fr 1fr; overflow: hidden; border: 1px solid var(--line-gold); border-radius: var(--radius-lg); background: var(--bg-1); }
.guide-featured-copy { padding: clamp(24px, 4vw, 44px); align-self: center; }
.guide-featured h2 { margin: 0 0 20px; font: 600 clamp(1.8rem, 3.1vw, 2.5rem)/1.25 var(--font-display); }
.guide-featured-copy > p:not(.guide-kicker) { color: var(--text-dim); font-size: .96rem; line-height: 1.8; }
.guide-read { display: inline-flex; align-items: center; gap: 16px; color: var(--brand-gold); font-size: .85rem; font-weight: 600; margin-top: 16px; }
.guide-featured-photo { position: relative; display: block; min-height: 350px; background: var(--bg-2); }
.guide-featured-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.guide-featured-photo span { position: absolute; right: 14px; bottom: 14px; padding: 6px 9px; background: rgba(5, 6, 13, .82); color: #fff; font: .65rem/1.5 var(--font-mono); }
.guides-all, .guide-related { margin-block: 64px; }
.guides-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.guides-section-head h2 { font: 600 clamp(1.6rem, 2.7vw, 2rem)/1.3 var(--font-display); margin: 0; }
.guides-section-head p, .guides-section-head > a { color: var(--text-dim); font-size: .8rem; margin: 0; }
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.guide-card { min-width: 0; border-bottom: 1px solid var(--line-strong); }
.guide-card > a { display: flex; height: 100%; flex-direction: column; padding-bottom: 24px; }
.guide-card img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: center 32%; border-radius: var(--radius-sm); }
.guide-card-copy { display: flex; flex-direction: column; flex: 1; padding-top: 22px; }
.guide-card .guide-kicker { margin-bottom: 10px; font-size: .63rem; }
.guide-card h3 { margin: 0 0 12px; font: 600 1.23rem/1.4 var(--font-display); }
.guide-card-copy > p:not(.guide-kicker) { color: var(--text-dim); font-size: .84rem; line-height: 1.75; margin: 0 0 12px; }
.guide-card .guide-read { margin-top: auto; padding-top: 12px; }
.guide-card a:hover h3, .guide-featured h2 a:hover { color: var(--brand-gold); }
.guide-heading { max-width: 930px; margin: 48px 0 40px; }
.guide-heading h1 { font: 600 clamp(2.2rem, 4.7vw, 3.6rem)/1.17 var(--font-display); letter-spacing: -.025em; margin: 0 0 26px; }
.guide-lede { max-width: 800px; font-size: 1.09rem; color: var(--text-dim); line-height: 1.85; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-dim); font-size: .73rem; line-height: 1.8; margin-top: 24px; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 740px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.guide-sidebar { position: sticky; top: 108px; }
.guide-toc { border-top: 1px solid var(--line-gold); padding-top: 20px; }
.guide-toc h2 { font: 600 .85rem/1.5 var(--font-sans); margin: 0 0 16px; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; }
.guide-toc li { margin-bottom: 14px; font-size: .8rem; line-height: 1.65; color: var(--text-dim); }
.guide-toc a:hover { color: var(--brand-gold); }
.guide-toc-back { display: inline-block; margin-top: 16px; font-size: .8rem; color: var(--brand-gold); }
.guide-prose { min-width: 0; font-size: 1rem; line-height: 1.9; }
.guide-prose section { scroll-margin-top: 105px; }
.guide-prose section > h2 { font: 600 clamp(1.55rem, 2.5vw, 2rem)/1.3 var(--font-display); margin: 44px 0 20px; }
.guide-prose p { margin: 0 0 18px; }
.guide-prose section > p, .guide-prose li { color: #d5d9eb; }
.guide-prose ul { padding-left: 22px; }
.guide-prose li { padding-left: 5px; margin-bottom: 10px; }
.guide-prose li::marker { color: var(--brand-gold); }
.guide-takeaway { padding: 22px 26px; background: var(--bg-2); border-left: 3px solid var(--brand-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.guide-takeaway strong { display: block; font-size: .77rem; color: var(--brand-gold); margin-bottom: 8px; }
.guide-takeaway p { margin: 0; font-size: .96rem; }
.guide-takeaway p + p { margin-top: 12px; }
.guide-takeaway a { color: var(--brand-gold); text-decoration: underline; text-underline-offset: 4px; }
.guide-comparisons { margin-block: 28px; }
.guide-comparisons .wv-case-rail { max-width: 100%; padding-inline: 0; }
.guide-comparisons .wv-case-track { overscroll-behavior-x: contain; }
.guide-comparisons .wv-case.empty { flex-basis: min(360px, 78vw); }
.guide-comparisons .wv-case.empty .wv-case-foot { flex: 1; align-content: start; }
.guide-comparisons .wv-case.empty .wv-btn { margin-top: 16px; justify-self: start; }
.guide-comparisons .wv-compare { touch-action: pan-x pan-y pinch-zoom; }
.guide-comparisons .wv-compare-divider::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--brand-gold); color: var(--brand-gold); font: 600 1.1rem/1 var(--font-sans); box-shadow: 0 2px 12px #0008; }
.guide-comparison-help { font-size: .78rem; line-height: 1.7; color: var(--text-dim); }
.guide-compare-label { position: absolute; top: 12px; z-index: 6; padding: 4px 8px; border-radius: var(--radius-pill); background: #05060dcc; color: #fff; font: .66rem/1.6 var(--font-mono); pointer-events: none; }
.guide-compare-label-ai { left: 12px; }
.guide-compare-label-original { right: 12px; }
.guide-case-controls { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
.guide-case-controls button { border: 1px solid var(--line-gold); border-radius: var(--radius-pill); background: var(--bg-1); color: var(--brand-gold); padding: 10px 18px; min-height: 44px; font: 500 .82rem/1.5 var(--font-sans); cursor: pointer; }
.guide-case-controls button:disabled { opacity: .35; cursor: default; }
.guide-case-controls button:focus-visible, .guide-comparisons .wv-case-track:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 4px; }
.guide-image { margin: 32px 0; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.guide-image img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.guide-image figcaption { color: var(--text-dim); font-size: .75rem; line-height: 1.7; padding-top: 10px; }
.guide-table-scroll { overflow-x: auto; margin-block: 28px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.guide-prose table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .84rem; line-height: 1.7; text-align: left; }
.guide-prose th, .guide-prose td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-prose thead { background: var(--bg-2); color: var(--brand-gold); }
.guide-prose tbody th { font-weight: 500; }
.guide-prose tr:last-child > * { border-bottom: 0; }
.guide-faq details { border-top: 1px solid var(--line-strong); padding-block: 18px; }
.guide-faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; padding-right: 8px; }
.guide-faq details p { margin: 14px 0 0; color: var(--text-dim); font-size: .92rem; }
.guide-cta { margin-block: 48px; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line-gold); background: var(--bg-1); border-radius: var(--radius-lg); }
.guide-cta h2 { font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.3 var(--font-display); margin: 0 0 16px; }
.guide-cta > p:not(.guide-kicker) { color: var(--text-dim); line-height: 1.8; max-width: 680px; }
.guide-cta-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.guide-cta-links > a:not(.wv-btn) { text-decoration: underline; text-underline-offset: 4px; color: var(--text-dim); font-size: .82rem; }
.guide-source { font-size: .79rem; color: var(--text-dim); }
.guide-source a { color: var(--brand-gold); text-decoration: underline; text-underline-offset: 3px; }
.guides-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid var(--line-strong); padding-block: 40px; }
.guides-footer strong { font: 600 1.5rem var(--font-display); color: var(--brand-gold); }
.guides-footer p { color: var(--text-dim); font-size: .8rem; line-height: 1.8; }
.guides-footer nav { display: flex; flex-wrap: wrap; align-content: start; gap: 14px 24px; font-size: .8rem; }
.guides-footer nav a:hover { color: var(--brand-gold); }
.guides-copyright { grid-column: 1 / -1; margin: 0; }
@media (max-width: 960px) {
  .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .guides-nav { min-height: 66px; padding-block: 14px; gap: 12px; }
  .guides-nav img { width: 106px; }
  .guides-nav nav { gap: 16px; font-size: .78rem; }
  .guides-nav nav > a[href="/#packages"] { display: none; }
  .guides-book { padding: 7px 10px; }
  .guides-intro { padding-block: 34px; }
  .guide-featured { grid-template-columns: 1fr; }
  .guide-featured-photo { min-height: 280px; }
  .guide-layout { grid-template-columns: 1fr; gap: 28px; }
  .guide-sidebar { position: static; }
  .guide-toc ol { columns: 2; column-gap: 24px; }
  .guide-toc li { break-inside: avoid; }
  .guide-toc-back { display: none; }
  .guide-heading { margin-top: 34px; }
  .guide-lede { font-size: 1rem; }
  .guide-meta { font-size: .7rem; }
  .guide-prose { font-size: .96rem; }
  .guides-section-head { flex-direction: column; gap: 10px; }
  .guides-all, .guide-related { margin-block: 44px; }
}
@media (max-width: 480px) {
  .guides-grid { grid-template-columns: 1fr; gap: 28px; }
  .guide-card > a { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .guide-card img { aspect-ratio: 3 / 4; border-radius: var(--radius-xs); }
  .guide-card-copy { padding-top: 0; }
  .guide-card h3 { font-size: 1.1rem; }
  .guide-card-copy > p:not(.guide-kicker) { font-size: .78rem; }
  .guide-card .guide-kicker { font-size: .59rem; }
  .guide-card .guide-kicker span { display: none; }
  .guide-toc ol { columns: 1; }
  .guide-image figcaption { font-size: .68rem; }
  .guides-footer { grid-template-columns: 1fr; }
}