:root {
  color-scheme: dark;
  --night: #071723;
  --night2: #0b1e2a;
  --panel: #102a38;
  --panel2: #133443;
  --ink: #f4f7f3;
  --muted: #b4c4c9;
  --teal: #81e5e1;
  --teal2: #39c8cb;
  --mint: #bff2df;
  --line: #31505c;
  --cream: #f7f5ef;
  --dark: #071720;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Baskerville, Georgia, serif;
  --max: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 84% 0, #143b7b22, transparent 38rem), var(--night);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}
.container, .wrap { width: min(calc(100% - 56px), var(--max)); margin-inline: auto; }
.skip { position: fixed; z-index: 100; top: -80px; left: 16px; padding: 12px 16px; border-radius: 12px; background: var(--cream); color: var(--dark); }
.skip:focus { top: 16px; }

/* The guide shell mirrors the homepage navigation and CTA. */
.topbar, .top {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid #ffffff14;
  background: #071723e8;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav { display: flex; height: 76px; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 38px; height: 38px; padding: 4px; border-radius: 12px; background: #f6f8f6; object-fit: contain; box-shadow: 0 0 22px #69baff24; }
.brand strong { font-size: 13px; letter-spacing: .18em; }
.brand small { display: block; margin-top: 1px; color: #a9b8bb; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.nav-links, .navlinks { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.nav-links a, .navlinks a { color: #c2ced0; font-size: 11px; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav-links a:hover, .navlinks a:hover, .nav-links a[aria-current="page"] { color: var(--teal); }
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid #a8c7c53d; border-radius: 50%; background: #ffffff05; color: var(--ink); font-size: 18px; }
.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid #b7ffff40;
  border-radius: 999px;
  background: linear-gradient(115deg, var(--mint), var(--teal));
  box-shadow: 0 8px 30px #5fe0dc22;
  color: var(--night);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 38px #5fe0dc45; }

/* Collection page: a shared campaign hero followed by a clear editorial library. */
.guide-landing { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid #ffffff12; background: linear-gradient(120deg, #061520, #0b1e2a 62%, #0a2237); }
.guide-landing::before { position: absolute; z-index: -1; top: -30%; right: -6%; width: min(62vw, 760px); aspect-ratio: 1; border: 1px solid #82dfff25; border-radius: 50%; content: ""; box-shadow: 0 0 0 48px #5baeff08, 0 0 0 110px #5baeff05; }
.guide-landing-grid { display: grid; min-height: 590px; grid-template-columns: minmax(0, 1fr) minmax(260px, .76fr); align-items: center; gap: clamp(26px, 5vw, 72px); padding-block: 66px 76px; }
.guide-landing-copy { position: relative; z-index: 2; max-width: 690px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--teal); font-size: 10px; font-weight: 780; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { width: 24px; height: 1px; flex: 0 0 auto; background: currentColor; content: ""; }
.guide-landing h1 { max-width: 720px; margin: 23px 0 18px; font-size: clamp(48px, 6.1vw, 84px); font-weight: 640; letter-spacing: -.075em; line-height: .98; }
.guide-landing h1 em { color: var(--teal); font-family: var(--serif); font-weight: 400; }
.guide-landing .dek { max-width: 590px; margin: 0; color: #cfdbdc; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; }
.guide-landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.guide-landing-actions .text-link { padding: 12px 6px; color: #d8e8e8; font-size: 12px; font-weight: 700; text-decoration: none; }
.guide-landing-note { margin: 16px 0 0; color: #a8bdc2; font-size: 10px; }
.guide-hero-art { position: relative; display: grid; min-height: 430px; place-items: center; }
.guide-hero-art::before { position: absolute; inset: 8% 2%; border: 1px solid #9ce8e333; border-radius: 50%; content: ""; transform: rotate(-14deg) scaleY(.76); }
.guide-hero-art::after { position: absolute; inset: 17% 10%; border: 1px solid #9ce8e320; border-radius: 50%; content: ""; transform: rotate(22deg) scaleY(.67); }
.guide-hero-art img { position: relative; z-index: 1; width: min(74%, 335px); max-height: 475px; object-fit: contain; filter: drop-shadow(0 24px 45px #0009) drop-shadow(0 0 34px #58bcff2b); animation: guide-float 7s ease-in-out infinite; }
@keyframes guide-float { 50% { transform: translateY(-8px); } }
.guide-library { position: relative; padding: clamp(68px, 8vw, 112px) 0 clamp(76px, 9vw, 122px); }
.guide-library::before { position: absolute; top: 0; left: 50%; width: min(100% - 56px, 1220px); height: 1px; background: linear-gradient(90deg, transparent, #73cbff30 18%, #73cbff30 82%, transparent); content: ""; transform: translateX(-50%); }
.guide-library-heading { display: grid; grid-template-columns: 1fr minmax(260px, .7fr); align-items: end; gap: 30px; margin-bottom: 32px; }
.guide-library-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -16px; }
.guide-library-heading h2 { max-width: 680px; margin: 0; font-size: clamp(34px, 4.8vw, 58px); letter-spacing: -.065em; line-height: 1.02; }
.guide-library-heading p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.card { position: relative; display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; overflow: hidden; padding: clamp(23px, 3vw, 34px); border: 1px solid #86bfff31; border-radius: 24px; background: radial-gradient(ellipse at 100% 0, #344bb51f, transparent 52%), linear-gradient(145deg, #0d2040, #08142a); box-shadow: inset 0 1px #ffffff0e; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.card::after { position: absolute; right: -58px; bottom: -78px; width: 190px; height: 190px; border: 1px solid #76c7ff16; border-radius: 50%; box-shadow: 0 0 0 22px #76c7ff08, 0 0 0 50px #76c7ff05; content: ""; pointer-events: none; }
.card:hover { transform: translateY(-4px); border-color: #82dfff70; box-shadow: 0 20px 54px #02091888, inset 0 1px #ffffff12; }
.card .eyebrow { color: #8caecc; font-size: 9px; letter-spacing: .14em; }
.card .eyebrow::before { display: none; }
.card h2 { max-width: 540px; margin: 19px 0 12px; font-size: clamp(23px, 2.5vw, 32px); font-weight: 620; letter-spacing: -.05em; line-height: 1.1; }
.card h2 a { text-decoration: none; }
.card p { max-width: 580px; margin: 0 0 24px; color: #b9c9e2; font-size: 13px; line-height: 1.75; }
.card .more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--teal); font-size: 11px; font-weight: 760; text-decoration: none; }
.card .more span { transition: transform .2s; }
.card:hover .more span { transform: translate(3px, -3px); }
.guide-reading-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: #91a8b6; font-size: 10px; }
.guide-reading-note::before { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px #69e2dc88; content: ""; }

/* Long-form pages retain a quiet reading column, using the same light, colors and surfaces. */
main > .hero { position: relative; isolation: isolate; overflow: hidden; padding: 62px 0 52px; border-bottom: 1px solid #ffffff12; background: radial-gradient(ellipse at 83% 8%, #244da64a, transparent 36rem), linear-gradient(120deg, #061520, #0b1e2a 62%, #0a1b34); }
main > .hero::after { position: absolute; z-index: -1; top: -44%; right: -8%; width: min(54vw, 690px); aspect-ratio: 1; border: 1px solid #8acaff22; border-radius: 50%; box-shadow: 0 0 0 52px #67b7ff07, 0 0 0 110px #67b7ff04; content: ""; }
.crumb { color: #9eb5c4; font-size: 10px; letter-spacing: .07em; }
.crumb a { color: var(--teal); text-decoration: none; }
main > .hero .eyebrow { margin: 28px 0 12px; }
main > .hero h1 { max-width: 950px; margin: 0; font-size: clamp(42px, 6.3vw, 80px); font-weight: 640; letter-spacing: -.07em; line-height: .98; }
.dek { max-width: 780px; margin: 20px 0; color: #c2d0e5; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; }
.direct-answer { max-width: 790px; }
.byline { display: flex; align-items: center; gap: 10px; color: #a8bbc9; font-size: 11px; }
.byline b { color: var(--ink); }
.author-link { text-decoration: none; }
.author-link:hover { color: var(--teal); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 23px; }
.hero-cta small { color: #a8bdc2; font-size: 10px; }
.reading { padding: 11px 0; border-bottom: 1px solid #ffffff14; background: #091a2b; color: #9eb5c4; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(210px, 250px); align-items: start; gap: clamp(34px, 6vw, 76px); padding: 48px 0 88px; }
.article { min-width: 0; }
.intro { margin: 0 0 26px; color: #e4edf7; font-size: 19px; line-height: 1.75; }
.article h2 { margin: 0 0 15px; color: var(--ink); font-size: clamp(26px, 3.1vw, 37px); font-weight: 630; letter-spacing: -.05em; line-height: 1.12; }
.article p { margin: 0 0 17px; color: #c2d0e5; font-size: 15px; line-height: 1.85; }
.article-section { margin: 0 0 32px; padding: 0 0 18px; border-bottom: 1px solid #86bfff1d; }
.article-section ul, .article-section ol { margin: 17px 0 22px; padding-left: 22px; color: #d5e0ef; }
.article-section li { padding: 0 0 10px 5px; }
.steps { padding: 0 !important; list-style: none; counter-reset: steps; }
.steps li { position: relative; min-height: 42px; padding: 0 0 22px 53px !important; }
.steps li::before { position: absolute; top: -2px; left: 0; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid #79dfff6a; border-radius: 50%; color: #8deaff; content: counter(steps, decimal-leading-zero); counter-increment: steps; font-size: 11px; font-weight: 800; }
.cite { color: #83e8ff; font-size: .77em; font-weight: 800; text-decoration: none; }
.callout, .quick-answer, .planner, .faq, .related, .toc, .guide-visual, .final { border: 1px solid #7cbaff40; background: linear-gradient(145deg, #0d2041, #08142b); box-shadow: inset 0 1px #ffffff0e; }
.callout { margin: 22px 0; padding: 18px 20px; border-radius: 17px; }
.callout span, .quick-answer h2, .toc b, .planner > .eyebrow { color: #83e8ff; }
.callout span { font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.callout p { margin: 8px 0 0 !important; color: #e0eaf7 !important; }
.quick-answer { margin: 0 0 28px; padding: 21px 24px; border-radius: 18px; }
.quick-answer h2 { margin: 0 0 9px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.quick-answer p { margin: 0; color: #eef6ff; font-size: 16px; line-height: 1.7; }
.toc { position: sticky; top: 96px; padding: 19px; border-radius: 18px; }
.toc b { display: block; margin-bottom: 11px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.toc a { display: block; padding: 9px 0; border-bottom: 1px solid #ffffff12; color: #b9c9e2; font-size: 10px; line-height: 1.5; text-decoration: none; }
.toc a:hover { color: var(--teal); }
.guide-visual { width: min(100%, 470px); margin: 0 auto 32px; padding: 13px; border-radius: 22px; }
.guide-visual img { width: 100%; max-height: 570px; border-radius: 14px; background: #06101e; object-fit: contain; }
.guide-visual figcaption { padding: 11px 4px 0; color: #aebfda; font-size: 10px; line-height: 1.6; }
.planner { margin: 42px 0; padding: clamp(22px, 4vw, 36px); border-radius: 25px; }
.planner .eyebrow { margin: 0 0 12px; }
.planner h2 { font-size: clamp(27px, 3.7vw, 40px); }
.planner > p { color: #b9c9e2; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.formgrid label { display: block; color: #c2d0e5; font-size: 11px; font-weight: 700; }
.formgrid label.full { grid-column: 1 / -1; }
.formgrid input { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #85b5e34a; border-radius: 12px; background: #06132a; color: #edf5ff; font: inherit; font-size: 14px; }
.plan-preview { padding: 18px; border: 1px solid #85baff44; border-radius: 17px; background: linear-gradient(140deg, #e7f2f0, #dce9f2); color: #101d2b; }
.plan-preview span { color: #087e92; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.plan-preview p { min-height: 24px; margin: 6px 0 15px; color: #22364d; font: 18px/1.4 var(--serif); }
.plan-preview p:last-child { margin-bottom: 0; }
.local-note { margin: 12px 0 0 !important; color: #9eb5c4 !important; font-size: 10px !important; }
.faq, .related { margin: 42px 0; padding: 24px; border-radius: 22px; }
.faq > h2, .related > h2 { margin-bottom: 16px; font-size: 24px; }
.faq-item { padding: 15px 0; border-top: 1px solid #86bfff26; }
.faq-item summary { color: #eaf3ff; cursor: pointer; font-weight: 700; }
.faq-item p { padding-top: 12px; margin: 0; }
.related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; padding-left: 20px; color: #c2d0e5; }
.related a, .sources a { color: #83e8ff; }
.final { margin: 52px 0 0; padding: clamp(24px, 4vw, 36px); border-radius: 24px; background: radial-gradient(ellipse at 88% 35%, #354ab64d, transparent 31rem), linear-gradient(125deg, #081731, #171b46); }
.final .eyebrow { margin: 0 0 13px; }
.final h2 { max-width: 650px; margin-bottom: 10px; font-size: clamp(30px, 4vw, 46px); }
.final p { max-width: 600px; }
.sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid #91b8e524; }
.sources h2 { color: #f1f7ff; font-size: 20px; }
.sources ol { padding-left: 20px; color: #b9c9e2; font-size: 12px; }
.sources li { margin: 8px 0; padding-left: 4px; }
.sources span { margin-right: 5px; color: #83e8ff; font-weight: 800; }
.footer { padding: 42px 0 76px; border-top: 1px solid #91b8e524; color: #9eb5c4; font-size: 10px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-inner > span:last-child { line-height: 2.3; }
.footer a { color: #b9d3e8; text-decoration: none; }
.footer a:hover { color: var(--teal); }

@media (max-width: 1080px) {
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 10px; }
  .nav > .button, .nav .button { min-height: 43px; padding: 10px 14px; font-size: 10px; }
}
@media (max-width: 900px) {
  .nav { height: 68px; }
  .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: 14px max(18px, calc((100% - 760px) / 2)) 20px; border-bottom: 1px solid #ffffff20; background: #071723fa; box-shadow: 0 20px 30px #0005; }
  .nav-links.open, .navlinks.open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .nav-links a, .navlinks a { padding: 12px 10px; border-radius: 9px; font-size: 11px; }
  .nav-links a:hover { background: #ffffff0d; }
  .menu-toggle { display: grid; }
  .guide-landing-grid { min-height: 530px; }
  .guide-hero-art { min-height: 370px; }
  .layout { grid-template-columns: 1fr; gap: 22px; }
  .toc { position: static; display: flex; align-items: center; gap: 9px; overflow-x: auto; padding: 12px; }
  .toc b { flex: 0 0 auto; margin: 0 5px 0 0; }
  .toc a { flex: 0 0 auto; padding: 5px; border: 0; white-space: nowrap; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .container, .wrap { width: calc(100% - 34px); }
  .brand img { width: 34px; height: 34px; }
  .nav-actions { gap: 7px; }
  .nav-actions .button { min-height: 40px; padding: 9px 12px; font-size: 9px; }
  .nav-links.open, .navlinks.open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-landing-grid { min-height: 0; grid-template-columns: 1fr; gap: 4px; padding-block: 48px 45px; }
  .guide-landing h1 { margin-top: 20px; font-size: clamp(45px, 12vw, 68px); }
  .guide-landing .dek { font-size: 15px; }
  .guide-landing-actions { margin-top: 22px; }
  .guide-landing-actions .button { width: 100%; }
  .guide-hero-art { min-height: 320px; margin-top: 9px; }
  .guide-hero-art img { width: min(61%, 250px); max-height: 340px; }
  .guide-library { padding: 58px 0 76px; }
  .guide-library-heading { grid-template-columns: 1fr; gap: 12px; }
  .guide-library-heading .eyebrow { margin-bottom: 0; }
  .guide-library-heading h2 { font-size: clamp(34px, 9vw, 48px); }
  .guide-library-heading p { font-size: 12px; }
  .grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .card { min-height: 0; padding: 23px; border-radius: 20px; }
  .card h2 { font-size: 25px; }
  .card p { font-size: 12px; }
  main > .hero { padding: 42px 0 34px; }
  main > .hero .eyebrow { margin-top: 23px; }
  main > .hero h1 { font-size: clamp(39px, 10vw, 60px); }
  .dek { font-size: 15px; }
  .hero-cta { gap: 10px; }
  .hero-cta .button { width: 100%; }
  .layout { padding-top: 28px; padding-bottom: 66px; }
  .intro { font-size: 17px; }
  .article p { font-size: 14px; }
  .guide-visual { width: min(100%, 410px); padding: 10px; }
  .guide-visual img { max-height: 470px; }
  .quick-answer, .faq, .related { padding: 19px; }
  .quick-answer p { font-size: 14px; }
  .formgrid { grid-template-columns: 1fr; }
  .formgrid label.full { grid-column: auto; }
  .planner { padding: 21px 17px; border-radius: 21px; }
  .related ul { grid-template-columns: 1fr; }
  .footer { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Glass campaign alignment: keep the guide layouts, share the homepage's visual system. */
:root {
  --night: #030817;
  --night2: #071329;
  --panel: #0a1931;
  --panel2: #0f2140;
  --ink: #f6f8ff;
  --muted: #bac8df;
  --teal: #62e6ff;
  --teal2: #398cff;
  --mint: #a5efff;
  --line: #273d64;
  --dark: #030817;
}

html { background: var(--night); }
body {
  background:
    radial-gradient(ellipse at 83% 8%, #10296655 0, transparent 30rem),
    radial-gradient(ellipse at 4% 52%, #10214944 0, transparent 38rem),
    var(--night);
}
.topbar, .top {
  border-bottom-color: #91baff24;
  background: #030817e8;
  box-shadow: 0 10px 32px #0004;
}
.brand img { box-shadow: 0 0 24px #84cfff32; }
.brand small { color: #a7b8d8; }
.nav-links a, .navlinks a { color: #c3d0e9; }
.nav-links a:hover, .navlinks a:hover, .nav-links a[aria-current="page"] { color: #7fe7ff; }
.menu-toggle { border-color: #98c8ff50; background: #07152ccc; }
.button {
  border-color: #a8dcff70;
  background: linear-gradient(112deg, #83efff 0%, #56aeff 52%, #a78cff 100%);
  box-shadow: 0 8px 32px #448fff3b, inset 0 1px #ffffffa0;
  color: #051126;
}
.button:hover { box-shadow: 0 13px 42px #4c8cff70, inset 0 1px #ffffffbd; }
.button.outline, .button.ghost {
  border-color: #9cc9ff48;
  background: linear-gradient(135deg, #0a1a34d9, #101a37c7);
  box-shadow: inset 0 1px #ffffff12, 0 8px 28px #0003;
  color: #eef5ff;
}
.button.outline:hover, .button.ghost:hover { border-color: #7ddfff9c; background: #10284ad9; }

.guide-landing {
  border-bottom-color: #5f9cff25;
  background:
    radial-gradient(ellipse at 79% 40%, #176dff35 0, transparent 34rem),
    radial-gradient(ellipse at 94% 13%, #8d6cff25 0, transparent 25rem),
    linear-gradient(115deg, #020613 0%, #061127 54%, #081936 100%);
}
.guide-landing::before {
  border-color: #78baff46;
  box-shadow: 0 0 65px #2c75ff20, inset 0 0 60px #6e72ff0d, 0 0 0 48px #5baeff0a, 0 0 0 110px #5baeff06;
}
.guide-landing-copy { text-shadow: 0 8px 38px #0006; }
.guide-landing h1 em {
  background: linear-gradient(110deg, #85f0ff 8%, #5caaff 56%, #b391ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #53a8ff35);
}
.guide-landing .dek { color: #d1def4; }
.guide-landing-actions .text-link { color: #d5e4f8; }
.guide-landing-note { color: #a9bad8; }
.guide-hero-art::before { border-color: #78baff62; box-shadow: 0 0 65px #2c75ff29, inset 0 0 65px #6e72ff12; }
.guide-hero-art::after { border-color: #9a7bff4a; box-shadow: 0 0 0 30px #6c72ff0b; }
.guide-hero-art img {
  padding: 8px;
  border: 1px solid #9cd4ff78;
  border-radius: 24px;
  background: linear-gradient(145deg, #0b1d39e8, #091328e8);
  box-shadow: 0 25px 75px #000c, 0 0 50px #318bff35, inset 0 1px #ffffff24;
}
.guide-library {
  background:
    radial-gradient(ellipse at 88% 12%, #1949a018, transparent 35rem),
    linear-gradient(150deg, #050c1d, #061127 55%, #07162c);
}
.guide-library::before { background: linear-gradient(90deg, transparent, #73c8ff38 18%, #947dff2c 82%, transparent); }
.guide-library-heading h2 { color: #f5f8ff; }
.guide-library-heading p { color: #b8c9e2; }
.eyebrow { color: #85e8ff; }
.card {
  border-color: #88bdff44;
  background:
    radial-gradient(ellipse at 100% 0, #344bb52b, transparent 54%),
    linear-gradient(145deg, #0c1d3bed, #081329e8);
  box-shadow: 0 20px 58px #0005, inset 0 1px #ffffff16;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.card::before {
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e1f5ff42, transparent);
  content: "";
  pointer-events: none;
}
.card::after { border-color: #76c7ff20; box-shadow: 0 0 0 22px #76c7ff0a, 0 0 0 50px #9a78ff08; }
.card:hover {
  transform: translateY(-5px);
  border-color: #82dfff8a;
  box-shadow: 0 24px 66px #020918a8, 0 0 34px #428dff1c, inset 0 1px #ffffff20;
}
.card .eyebrow { color: #9bb5da; }
.card p { color: #bac8df; }
.card .more { color: #7fe7ff; }
.guide-reading-note { color: #9eafce; }
.guide-reading-note::before { background: #7feaff; box-shadow: 0 0 15px #5db7ff99; }

main > .hero {
  border-bottom-color: #4b85ff35;
  background:
    radial-gradient(ellipse at 83% 8%, #244da64a, transparent 36rem),
    radial-gradient(ellipse at 96% 22%, #765dff18, transparent 27rem),
    linear-gradient(115deg, #020613 0%, #061127 54%, #081936 100%);
}
main > .hero::after {
  border-color: #8acaff32;
  box-shadow: 0 0 0 52px #67b7ff09, 0 0 0 110px #8367ff08, 0 0 55px #428dff1a;
}
main > .hero h1 { text-shadow: 0 8px 42px #0008; }
main > .hero .eyebrow { color: #85e8ff; }
.crumb { color: #9eb5d0; }
.crumb a, .author-link:hover { color: #7fe7ff; }
.dek { color: #c2d0e5; }
.byline { color: #a8bbd6; }
.byline b { color: var(--ink); }
.hero-cta small, .local-note { color: #a9bad8; }
.reading { border-bottom-color: #8cbcff20; background: #07152be8; color: #a9bad8; }
.intro { color: #e4edf7; }
.article h2 { color: #f6f8ff; }
.article p { color: #c2d0e5; }
.article-section { border-bottom-color: #86bfff24; }
.article-section ul, .article-section ol { color: #d5e0ef; }
.steps li::before { border-color: #79dfff78; color: #8deaff; background: #0a1a35ad; box-shadow: 0 0 18px #338dff22; }
.cite, .sources a, .related a { color: #83e8ff; }
.callout, .quick-answer, .planner, .faq, .related, .toc, .guide-visual, .final {
  border-color: #82baff48;
  background:
    radial-gradient(ellipse at 90% 0, #244da622, transparent 28rem),
    linear-gradient(145deg, #0c1d3bed, #081329ed);
  box-shadow: 0 24px 65px #0005, inset 0 1px #ffffff17;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.callout span, .quick-answer h2, .toc b, .planner > .eyebrow { color: #83e8ff; }
.callout p { color: #e0eaf7 !important; }
.quick-answer p { color: #eef6ff; }
.toc a { border-bottom-color: #ffffff16; color: #b9c9e2; }
.toc a:hover { color: #7fe7ff; }
.guide-visual img { border: 1px solid #6bbcff44; background: #030817; box-shadow: 0 14px 38px #0008; }
.guide-visual figcaption { color: #aebfda; }
.formgrid label { color: #c2d0e5; }
.formgrid input { border-color: #85b5e35c; background: #06132ae8; color: #edf5ff; box-shadow: inset 0 1px #ffffff0a; }
.formgrid input:focus { border-color: #7ddfff; box-shadow: 0 0 0 3px #489dff25; }
.plan-preview {
  border-color: #79cfff53;
  background: linear-gradient(135deg, #12365f, #202258);
  color: #f1f7ff;
  box-shadow: inset 0 1px #ffffff1b, 0 0 24px #327dff1c;
}
.plan-preview span { color: #a4eaff; }
.plan-preview p { color: #f1f7ff; }
.faq > h2, .related > h2 { color: #f5f8ff; }
.faq-item { border-top-color: #86bfff2b; }
.faq-item summary { color: #eaf3ff; }
.related ul, .sources ol { color: #c2d0e5; }
.final {
  background:
    radial-gradient(ellipse at 76% 26%, #3155b244, transparent 29rem),
    linear-gradient(125deg, #081731, #0d1a3a 58%, #171b46);
}
.final h2, .sources h2 { color: #f5f8ff; }
.sources { border-top-color: #91b8e52e; }
.footer { border-top-color: #8cbcff20; color: #a9bad8; }
.footer a { color: #b9d3e8; }
.footer a:hover { color: #7fe7ff; }

@media (max-width: 900px) {
  .nav-links { border-bottom-color: #8fbaff2c; background: #050d20f7; box-shadow: 0 20px 36px #0008; }
}
@media (max-width: 760px) {
  .topbar { background: #030817f2; }
  .guide-landing { background: radial-gradient(ellipse at 70% 61%, #1554bb38, transparent 24rem), linear-gradient(180deg, #030817 0%, #061127 54%, #07152b 100%); }
  .guide-hero-art img { box-shadow: 0 22px 56px #000b, 0 0 38px #318bff36, inset 0 1px #ffffff24; }
  .card { background: linear-gradient(145deg, #0b1b36ed, #081329ed); }
  main > .hero { background: radial-gradient(ellipse at 78% 4%, #1752a83a, transparent 26rem), linear-gradient(180deg, #030817 0%, #061127 70%, #07152b 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-hero-art img { animation: none; }
}

@media (max-width: 640px) { .nav { gap: 8px; } .brand { gap: 8px; } .brand small { font-size: 7px; letter-spacing: .085em; } .nav-actions { gap: 5px; } .nav-actions .button { padding-inline: 9px; font-size: 9px; } .menu-toggle { width: 38px; height: 38px; } }