.guide-index, .guide-article-page { position: relative; isolation: isolate; padding-top: 31px; padding-bottom: 78px; }
.guide-index::before, .guide-article-page::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: radial-gradient(ellipse at 12% 9%, #762b4c5a, transparent 42%), radial-gradient(ellipse at 92% 58%, #15566d3c, transparent 46%); pointer-events: none; }
.guide-index-hero { max-width: 850px; margin: 0 auto; padding: 20px 0 25px; text-align: center; }
.guide-index-hero .eyebrow { margin-bottom: 12px; }
.guide-index-hero h1, .guide-article-hero h1 { margin: 0; color: #e9f3f7; font-size: clamp(39px, 6vw, 65px); font-weight: 850; line-height: 1.04; letter-spacing: -.06em; }
.guide-index-hero h1 em { color: #56c3f1; font-style: normal; }
.guide-index-lead { max-width: 690px; margin: 12px auto 18px; color: #b8c8ce; font-size: 14px; line-height: 1.8; }
.guide-search-label { display: block; margin: 0 auto 8px; color: #c9d8dd; font-size: 11px; font-weight: 700; text-align: left; }
.guide-search { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #514052; border-radius: 6px; background: linear-gradient(110deg, #251a28, #172731); box-shadow: 0 8px 27px #07080942; color: #6bc0e5; }
.guide-search > span:first-child { font-size: 21px; line-height: 1; }
.guide-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #e5f0f4; font: inherit; font-size: 13px; }
.guide-search input::placeholder { color: #707f85; }
.guide-search:focus-within { border-color: #4b9abc; box-shadow: 0 0 0 3px #3ea9d719; }
.guide-search-shortcut { flex: 0 0 auto; color: #a8b9bf; font-size: 10px; }
.guide-topic-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px; }
.guide-topic-link { padding: 8px 11px; border: 1px solid #393b4c; border-radius: 20px; background: linear-gradient(110deg, #241b28, #18252e); color: #c2d0d6; font: inherit; font-size: 10px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.guide-topic-link:hover, .guide-topic-link.is-active { border-color: #3e7e9a; background: #3ea9d71a; color: #7ecdef; }
.guide-list-section { padding-top: 8px; }
.guide-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.guide-list-heading .eyebrow { margin-bottom: 6px; }
.guide-list-heading h2 { font-size: clamp(25px, 4vw, 36px); }
.guide-list-heading > p { margin: 0 0 4px; color: #acbbc1; font-size: 11px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-card { min-height: 187px; display: flex; flex-direction: column; padding: 17px 16px 15px; border: 1px solid #383646; border-radius: 7px; background: linear-gradient(145deg, #241b29, #15212b); transition: border-color .2s ease, transform .2s ease; }
.guide-card:hover { transform: translateY(-3px); border-color: #3b6d83; }
.guide-card[hidden] { display: none !important; }
.guide-card-category { margin: 0 0 9px; color: #70c8eb; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.guide-card h2 { margin: 0; color: #e8f0f4; font-size: 14px; line-height: 1.38; letter-spacing: -.02em; }
.guide-card h2 a:hover { color: #5ec6f3; }
.guide-card > p:not(.guide-card-category) { margin: 8px 0 12px; color: #b1c0c6; font-size: 11px; line-height: 1.7; }
.guide-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #7ed0f2; font-size: 10px; font-weight: 750; }
.guide-card-link span { color: #55c2f0; font-size: 12px; }
.guide-no-results { margin: 18px 0 0; padding: 22px; border: 1px dashed #344851; border-radius: 7px; color: #9dafb6; font-size: 11px; text-align: center; }
.guide-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin-top: 23px; padding: 12px 14px; border: 1px solid #3e3948; border-radius: 6px; background: linear-gradient(110deg, #281b29, #17232c); color: #c0cdd2; font-size: 10px; line-height: 1.7; }
.guide-disclaimer > span { flex: 0 0 auto; color: #5bbce6; font-size: 13px; }
.guide-disclaimer p { margin: 0; }
.guide-article-page { max-width: 1110px; }
.guide-article-hero { max-width: 900px; margin: 0 auto 34px; padding: 18px 0 22px; }
.guide-article-hero .eyebrow { margin-bottom: 13px; }
.guide-article-hero h1 { max-width: 850px; font-size: clamp(38px, 5.4vw, 61px); }
.guide-article-image { max-width: 900px; height: clamp(240px, 35vw, 420px); position: relative; overflow: hidden; margin: -12px auto 29px; background: radial-gradient(ellipse at 55% 44%, #145f7b48, transparent 60%), radial-gradient(ellipse at 12% 48%, #862e4a3b, transparent 55%); }
.guide-article-image img { width: min(100%, 780px); height: auto; position: absolute; top: 0; left: 50%; display: block; transform: translate(-50%, -31%); filter: drop-shadow(0 22px 32px #0009); }
.guide-article-image figcaption { position: absolute; right: 2%; bottom: 3px; color: #bccbd1; font-size: 10px; text-align: right; }
.guide-lead { max-width: 800px; margin: 17px 0 14px; color: #a9bac2; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.8; }
.guide-meta { display: flex; align-items: center; gap: 9px; margin: 0; color: #a4b3b8; font-size: 10px; }
.guide-article-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, .75fr); align-items: start; gap: clamp(28px, 5vw, 62px); }
.guide-article-content { min-width: 0; }
.guide-prose-section { padding: 0 0 21px; margin: 0 0 23px; border-bottom: 1px solid #283338; }
.guide-prose-section h2, .guide-sources h2 { margin: 0 0 12px; color: #e1edf2; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.22; letter-spacing: -.035em; }
.guide-prose-section p { margin: 0 0 12px; color: #b9c7cc; font-size: 14px; line-height: 1.8; }
.guide-prose-section p:last-child { margin-bottom: 0; }
.guide-prose-section ul, .guide-sources ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.guide-prose-section li { position: relative; padding-left: 20px; color: #b9c7cc; font-size: 13px; line-height: 1.75; }
.guide-prose-section li:before { content: "✦"; position: absolute; left: 0; top: 1px; color: #53bce9; font-size: 10px; }
.guide-sources { padding: 3px 0 22px; }
.guide-sources h2 { font-size: 19px; }
.guide-sources li { font-size: 12px; }
.guide-sources a { color: #6ec1e5; }
.guide-sources a:hover { color: #69caf3; }
.guide-sidebar { position: sticky; top: 100px; display: grid; gap: 13px; }
.guide-takeaway { padding: 18px 16px; border: 1px solid #4b5362; border-radius: 7px; background: radial-gradient(ellipse at 2% 4%, #8b34566b, transparent 58%), radial-gradient(ellipse at 100% 0%, #3995bd35, transparent 55%), linear-gradient(145deg, #241b29, #17232c); }
.guide-takeaway .eyebrow { margin-bottom: 10px; font-size: 10px; }
.guide-takeaway > p:not(.eyebrow) { margin: 0; color: #c1d3d9; font-size: 12px; line-height: 1.75; }
.guide-takeaway > a { display: inline-flex; gap: 8px; margin-top: 14px; color: #7ed0f2; font-size: 10px; font-weight: 750; }
.guide-related { padding: 17px 15px; border: 1px solid #373848; border-radius: 7px; background: linear-gradient(145deg, #211a26, #151f28); }
.guide-related h2 { margin: 0 0 9px; color: #dde9ee; font-size: 13px; }
.guide-related > a { display: block; padding: 10px 0; border-top: 1px solid #252f33; color: #bfd0d6; font-size: 11px; line-height: 1.55; }
.guide-related > a:hover { color: #64c6f0; }
.guide-related > a span { color: #53bce9; }
.guide-related > a.guide-all-link { color: #6ec1e5; font-weight: 750; }
.guide-disclaimer { margin-top: 22px; }

@media (max-width: 850px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-article-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
}
@media (max-width: 680px) {
  .guide-index, .guide-article-page { padding-top: 20px; padding-bottom: 55px; }
  .guide-index-hero { padding: 12px 0 18px; }
  .guide-index-hero h1 { font-size: clamp(31px, 9vw, 42px); }
  .guide-article-hero h1 { font-size: clamp(35px, 10vw, 48px); }
  .guide-index-lead { margin: 10px auto 15px; font-size: 12px; }
  .guide-search { min-height: 45px; }
  .guide-search-shortcut { display: none; }
  .guide-topic-nav { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; padding: 3px 0 7px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .guide-topic-link { flex: 0 0 auto; padding: 8px 9px; font-size: 10px; }
  .guide-list-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .guide-grid { grid-template-columns: 1fr; gap: 8px; }
  .guide-card { min-height: 0; padding: 15px 14px; }
  .guide-article-hero { margin-bottom: 23px; padding: 7px 0 13px; }
  .guide-lead { font-size: 12px; }
  .guide-meta { font-size: 10px; }
  .guide-article-layout { grid-template-columns: 1fr; gap: 18px; }
  .guide-sidebar { position: static; }
  .guide-takeaway { padding: 15px; }
  .guide-prose-section { padding-bottom: 17px; margin-bottom: 19px; }
  .guide-prose-section p { font-size: 13px; }
  .guide-prose-section li { font-size: 12px; }
}

/* Guide copy and controls stay readable on phones as well as desktop. */
.guide-search-label, .guide-search input, .guide-search-shortcut, .guide-topic-link,
.guide-list-heading > p, .guide-card-category, .guide-card h2,
.guide-card > p:not(.guide-card-category), .guide-card-link, .guide-no-results,
.guide-disclaimer, .guide-article-image figcaption, .guide-lead, .guide-meta,
.guide-prose-section p, .guide-prose-section li, .guide-sources li,
.guide-takeaway .eyebrow, .guide-takeaway > p:not(.eyebrow), .guide-takeaway > a,
.guide-related > a { font-weight: 600; }
.guide-search-label, .guide-search-shortcut, .guide-topic-link, .guide-list-heading > p,
.guide-card-category, .guide-card-link, .guide-disclaimer, .guide-article-image figcaption,
.guide-meta, .guide-takeaway .eyebrow, .guide-takeaway > a { font-size: 12px; }
.guide-search input, .guide-card > p:not(.guide-card-category), .guide-no-results,
.guide-takeaway > p:not(.eyebrow), .guide-related > a { font-size: 13px; }
.guide-card h2 { font-size: 16px; font-weight: 700; }
.guide-index-lead, .guide-lead { font-size: 16px; font-weight: 500; }
.guide-prose-section p { font-size: 15px; font-weight: 500; }
.guide-prose-section li, .guide-sources li { font-size: 14px; font-weight: 500; }
.guide-search input::placeholder { color: #aebdc3; }

/* Keep the guide hub and every article in the same cinematic visual system. */
.guide-index::before, .guide-article-page::before { background: radial-gradient(ellipse at 11% 8%, #75408c82, transparent 41%), radial-gradient(ellipse at 91% 28%, #087ba17b, transparent 44%), radial-gradient(ellipse at 52% 94%, #253d8160, transparent 48%); }
.guide-index-hero { position: relative; isolation: isolate; padding: 31px 22px 34px; }
.guide-index-hero:before { content: ""; position: absolute; z-index: -1; inset: 0 -10vw; background: radial-gradient(ellipse at 50% 25%, #174a6866, transparent 62%), radial-gradient(ellipse at 50% 60%, #7440783d, transparent 70%); pointer-events: none; }
.guide-index-hero:after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -53px; width: min(920px, 95vw); height: 230px; transform: translateX(-50%); border: 1px solid #75d9ff27; border-radius: 50%; box-shadow: 0 0 0 15px #5fc4ef0a, 0 0 48px #4ec5f01b; pointer-events: none; }
.guide-search { border-color: #68cbea72; border-radius: 15px; background: linear-gradient(110deg, #152b42eb, #242443eb); box-shadow: inset 0 1px #ffffff12, 0 13px 35px #020a1670, 0 0 32px #4fc2ed18; }
.guide-search:focus-within { border-color: #91e3ff; box-shadow: 0 0 0 3px #3ea9d726, 0 0 35px #43bdec24; }
.guide-topic-link { border-color: #52688a78; border-radius: 24px; background: linear-gradient(110deg, #1d2941, #17293c); box-shadow: inset 0 1px #ffffff0a; }
.guide-topic-link:hover, .guide-topic-link.is-active { border-color: #70d5ffb0; background: linear-gradient(110deg, #17405a, #352652); color: #a9eaff; box-shadow: 0 0 18px #45b9e626; }
.guide-grid { gap: 15px; }
.guide-card { position: relative; overflow: hidden; min-height: 205px; border-color: #526d8a82; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, #23618045, transparent 56%), linear-gradient(145deg, #1a2a42, #101e31); box-shadow: inset 0 1px #ffffff0d, 0 13px 30px #020a155c; }
.guide-card:before { content: ""; position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, #72dcff9c, #a17dff6e, transparent); }
.guide-card:hover { transform: translateY(-4px); border-color: #7bd9ffb0; box-shadow: 0 19px 42px #020a1680, 0 0 33px #41b8e927; }
.guide-card-category { color: #80ddff; text-shadow: 0 0 14px #4abce650; }
.guide-card h2 { color: #f2f7fc; }
.guide-card > p:not(.guide-card-category) { color: #c3d0dc; }
.guide-card-link { color: #92e1ff; }
.guide-no-results, .guide-disclaimer { border-color: #5d74867d; border-radius: 14px; background: linear-gradient(110deg, #162b3c, #20203b); color: #c9d8e2; box-shadow: inset 0 1px #ffffff0a; }
.guide-disclaimer > span { color: #7cddff; filter: drop-shadow(0 0 8px #4ec3f0); }
.guide-article-hero { position: relative; isolation: isolate; max-width: 940px; margin-bottom: 39px; padding: 27px 28px 26px; border: 1px solid #5d7b9491; border-radius: 21px; background: radial-gradient(ellipse at 0% 0%, #673c7647, transparent 53%), radial-gradient(ellipse at 100% 0%, #17688a4c, transparent 56%), linear-gradient(145deg, #14283c, #111d30 68%, #1d1d39); box-shadow: inset 0 1px #ffffff12, 0 20px 48px #020a1666; }
.guide-article-hero:after { content: ""; position: absolute; z-index: -1; top: -105px; right: 6%; width: 240px; height: 240px; border: 1px solid #67d7ff25; border-radius: 50%; box-shadow: 0 0 0 17px #53c4ef09, 0 0 0 38px #9b70ff08; pointer-events: none; }
.guide-article-image { border: 1px solid #67caef7d; border-radius: 22px; background: radial-gradient(ellipse at 55% 44%, #15789a6b, transparent 62%), radial-gradient(ellipse at 12% 48%, #8c3f765c, transparent 57%); box-shadow: 0 23px 60px #0209127a, 0 0 45px #47bce624; }
.guide-article-image figcaption { padding: 7px 10px; border: 1px solid #85dfff54; border-radius: 22px; background: #091a2cdb; }
.guide-article-layout { gap: clamp(28px, 4vw, 48px); }
.guide-prose-section { padding: 20px 21px; margin: 0 0 15px; border: 1px solid #435c7478; border-radius: 15px; background: linear-gradient(140deg, #15263aeb, #101d2eeb); box-shadow: inset 0 1px #ffffff09, 0 9px 24px #020a153a; }
.guide-prose-section h2, .guide-sources h2 { color: #eff7fc; }
.guide-prose-section p, .guide-prose-section li { color: #c4d0dc; }
.guide-prose-section li:before { color: #78dcff; text-shadow: 0 0 10px #4cbce8; }
.guide-sources { padding: 19px 21px 21px; border: 1px solid #435c7478; border-radius: 15px; background: linear-gradient(140deg, #15263aeb, #101d2eeb); }
.guide-sidebar { gap: 15px; }
.guide-takeaway, .guide-related { border-color: #5a78927e; border-radius: 16px; background: radial-gradient(ellipse at 3% 3%, #75418268, transparent 56%), radial-gradient(ellipse at 100% 0%, #2180a642, transparent 55%), linear-gradient(145deg, #192940, #101e30); box-shadow: inset 0 1px #ffffff0d, 0 13px 30px #020a1550; }
.guide-takeaway .eyebrow { color: #83dfff; }
.guide-takeaway > p:not(.eyebrow) { color: #d0dce5; }
.guide-related h2 { color: #f1f7fc; }
.guide-related > a { border-top-color: #3b5469; color: #cbd8e1; }
.guide-related > a:hover, .guide-related > a.guide-all-link { color: #8bdeff; }

@media (max-width: 680px) {
  .guide-index-hero { padding: 18px 10px 22px; }
  .guide-article-hero { padding: 20px 16px; border-radius: 17px; }
  .guide-card { min-height: 0; }
  .guide-prose-section, .guide-sources { padding: 16px; border-radius: 13px; }
}