/* Scoped companion to the existing welcome-assets/landing.css. */
.guide-body { color: #e7edf2; }
.guide-page { width: min(1120px, calc(100% - 40px)); margin: 44px auto 64px; }
.guide-page h1, .guide-page h2, .guide-page h3, .guide-page h4 { font-family: Georgia, 'Times New Roman', serif; text-wrap: balance; }
.guide-page h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; margin: 12px 0 24px; }
.guide-page h1 em { color: #f3d48e; font-style: normal; }
.guide-page h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; margin: 8px 0 24px; color: #f3d48e; }
.guide-page h3 { color: #f5deb0; font-size: 1.4rem; line-height: 1.25; margin: 0 0 12px; }
.guide-page p, .guide-page dd { line-height: 1.75; max-width: 70ch; }
.guide-page p { margin: 0 0 18px; }
.guide-page a { text-underline-offset: .2em; }
.guide-intro, .guide-section, .guide-closing { background: #102236f2; border: 1px solid #d4b87a55; border-radius: 16px; padding: clamp(22px, 4vw, 44px); margin-bottom: 28px; scroll-margin-top: 20px; }
.guide-lead { font-size: 1.2rem; color: #fff2d6; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.guide-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #62768a; border-radius: 8px; color: #f7e4b5; background: #1b3045; text-decoration: none; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0; }
.guide-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card { background: #192e42; border: 1px solid #c6ad793d; border-radius: 12px; padding: 22px; min-width: 0; }
.guide-card p:last-child, .guide-feature p:last-child, .guide-character p:last-child { margin-bottom: 0; }
.guide-kicker { color: #c9d8e4; font-size: .8rem; letter-spacing: .06em; }
.guide-feature { display: grid; grid-template-columns: minmax(160px, 250px) 1fr; align-items: center; gap: 28px; margin-bottom: 22px; }
.guide-feature img { display: block; width: 100%; height: auto; border-radius: 12px; }
.guide-character { display: grid; grid-template-columns: minmax(90px, 32%) 1fr; gap: 18px; align-items: center; padding: 22px; background: #192e42; border: 1px solid #c6ad793d; border-radius: 12px; }
.guide-character img { width: 100%; height: auto; display: block; }
.guide-earned { margin: 26px 0; grid-template-columns: minmax(110px, 180px) 1fr; }
.guide-spoilers { border: 1px solid #b29252; border-radius: 10px; overflow: hidden; margin-top: 22px; background: #13283b; }
.guide-spoilers summary { cursor: pointer; padding: 20px; min-height: 48px; color: #ffe3a0; font-weight: 700; background: #26394a; }
.guide-spoiler-content { padding: clamp(18px, 3vw, 30px); }
.guide-spoiler-content > h3:not(:first-child) { margin-top: 30px; }
.guide-field-list { margin: 20px 0 30px; }
.guide-field-list dt { font-weight: 700; color: #f5deb0; margin-top: 16px; }
.guide-field-list dd { margin: 4px 0 0; }
.guide-skip { position: absolute; left: 16px; top: -120px; z-index: 100; background: #fff2d6; color: #102236; padding: 16px; }
.guide-skip:focus { top: 16px; }
.guide-body :focus-visible { outline: 3px solid #84d8f5; outline-offset: 4px; }
.guide-nav a:hover { background: #314a60; }
@media (max-width: 850px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .guide-page { width: calc(100% - 24px); margin-top: 24px; } .guide-grid { grid-template-columns: 1fr; } .guide-feature { grid-template-columns: 1fr; } .guide-feature img { max-width: 200px; } .guide-character, .guide-earned { grid-template-columns: 1fr; padding: 16px; gap: 12px; } .guide-character img { max-width: 160px; margin: 0 auto; } .guide-nav a { flex: 1 1 40%; justify-content: center; } .guide-closing .actions { flex-direction: column; } }
/* Release review: at phone width the spoiler cards sat five paddings deep (the page, its section, the details, their content, the card), leaving a 163 px text column at 360 px. The page drops the shared 6% side padding and each level keeps a little. */
@media (max-width: 420px) { .guide-page { padding: 0; } .guide-intro, .guide-section, .guide-closing { padding: 18px 14px; } .guide-spoilers summary { padding: 16px 14px; } .guide-spoiler-content { padding: 14px 12px; } .guide-spoiler-content .guide-card, .guide-spoiler-content .guide-character { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .guide-body { scroll-behavior: auto; } }

.guide-page h4 { color: #f5deb0; font-size: 1.4rem; line-height: 1.25; margin: 0 0 12px; }