/* wwwroot/guide/guide.css — /getting-started quick-start guide (light pillar surface) */

.guide-page { color-scheme: light; }
.guide-page h1 { font-family: var(--sans, inherit); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink, #0c0c0a); margin: 0 0 .75rem; }
.guide-page h2 { font-family: var(--sans, inherit); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink, #0c0c0a); margin: 2.75rem 0 .75rem; }
.guide-page h3 { font-size: 1rem; font-weight: 700; color: var(--ink, #0c0c0a); margin: 0 0 .3rem; }
.guide-page p, .guide-page li, .guide-page figcaption { color: var(--ink-soft, #4a4945); }
.guide-page p b, .guide-page li b { color: var(--ink, #0c0c0a); font-weight: 600; }
.guide-page .lede { font-size: 1.1rem; line-height: 1.6; max-width: 46rem; }
.guide-page .eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700, #7a5618); margin: 0 0 .5rem; }

.guide-page .guide-hero { padding: 2.5rem 0 1rem; }
.guide-page .guide-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.guide-page .guide-toc a { display: inline-block; padding: .35rem .85rem; border: 1px solid var(--border, #e8e7e0); border-radius: 999px; background: var(--surface, #ffffff); color: var(--ink, #0c0c0a); font-size: .85rem; font-weight: 600; text-decoration: none; }
.guide-page .guide-toc a:hover { border-color: var(--gold-300, #d6ad55); }

/* Screenshot frames — dark app UI presented on the light page, landing app-frame style */
.guide-page .shot-frame { margin: 1.25rem 0 0; }
.guide-page .shot-chrome { display: flex; gap: 6px; padding: 10px 12px; background: #1b1c22; border-radius: 10px 10px 0 0; border: 1px solid #293036; border-bottom: 0; }
.guide-page .shot-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #3a3b44; }
.guide-page .shot-wrap { position: relative; background: #17181e; border: 1px solid #293036; border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: var(--shadow-md, 0 10px 30px rgba(12, 12, 10, .12)); }
.guide-page .shot-wrap img { display: block; width: 100%; height: auto; max-width: 100%; }
.guide-page .shot-frame figcaption { font-size: .85rem; margin-top: .6rem; }
.guide-page .shot-frame figcaption b { display: inline-block; min-width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold-500, #a87928); color: #fff; font-size: .7rem; line-height: 1.15rem; text-align: center; }

/* Hero overview gets the deepest shadow — it is the page's anchor visual */
.guide-page .shot-hero .shot-wrap { box-shadow: 0 18px 48px rgba(12, 12, 10, .18); }

/* Narrow/portrait shots (modal + settings column) render at natural width, letterboxed on the dark frame */
.guide-page .shot-narrow .shot-wrap { padding: 0 1rem; }
.guide-page .shot-narrow .shot-wrap img { width: auto; max-width: 100%; margin: 0 auto; }

.guide-page .pin { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #FFB800; color: #0A0A0D; font-size: .8rem; font-weight: 700; line-height: 24px; text-align: center; box-shadow: 0 0 0 4px rgba(255, 184, 0, .28); }

.guide-page .shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .guide-page .shot-pair { grid-template-columns: 1fr; } }

.guide-page .alert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; }
@media (max-width: 860px) { .guide-page .alert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guide-page .alert-grid { grid-template-columns: 1fr; } }
.guide-page .alert-card { background: var(--surface, #ffffff); border: 1px solid var(--border, #e8e7e0); border-radius: 10px; padding: 1rem 1.1rem; }
.guide-page .alert-card p { font-size: .9rem; line-height: 1.5; margin: 0; }

.guide-page .beyond-list { padding-left: 1.1rem; }
.guide-page .beyond-list li { margin: .4rem 0; }

.guide-page .band-legend { margin-top: 1.25rem; }
.guide-page .band { display: inline-block; margin: .25rem .35rem 0 0; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #17181e; }
.guide-page .band-exceptional { background: #5ec269; }
.guide-page .band-great { background: #d4e157; }
.guide-page .band-fair { background: #f5c842; }
.guide-page .band-poor { background: #db7474; color: #fff; }

.guide-page .guide-cta-final { text-align: center; padding: 2.5rem 0 3.5rem; }
.guide-page .guide-cta-final .btn-gold { display: inline-block; padding: .85rem 2rem; border-radius: 10px; background: linear-gradient(180deg, #e9c573, #d6ad55); color: var(--ink, #0c0c0a); font-weight: 700; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(168, 121, 40, .28); }
.guide-page .guide-cta-final .cta-sub { font-size: .9rem; margin-top: 1rem; }