/* Feature guide redesign: hierarchy-first, compact, and responsive. */
.feature-guide-page {
    --guide-bg: #0b0d16;
    --guide-surface: rgba(22, 25, 42, .92);
    --guide-surface-strong: #1a1e31;
    --guide-surface-soft: rgba(255, 255, 255, .045);
    --guide-line: rgba(255, 255, 255, .11);
    --guide-text: #f7f8ff;
    --guide-muted: #9da6bd;
    --guide-accent: #8a7cf6;
    --guide-accent-2: #4ed7b5;
    --guide-shadow: 0 22px 70px rgba(0, 0, 0, .22);
    background:
        radial-gradient(900px 480px at 78% -8%, rgba(100, 91, 235, .22), transparent 66%),
        radial-gradient(700px 420px at 22% 12%, rgba(57, 191, 166, .10), transparent 68%),
        var(--guide-bg) !important;
    color: var(--guide-text) !important;
}

.feature-guide-page .topbar {
    height: 68px;
    padding: 0 32px;
    gap: 28px;
    background: rgba(11, 13, 22, .76);
    border-color: rgba(255, 255, 255, .09);
    backdrop-filter: blur(20px);
}

.feature-guide-page .brand { font-size: 18px; letter-spacing: -.01em; }
.feature-guide-page .brand i { color: var(--guide-accent); }
.feature-guide-page .top-links { gap: 3px; }
.feature-guide-page .top-links a,
.feature-guide-page .top-right a { color: var(--guide-muted); }
.feature-guide-page .top-links a { border-radius: 10px; padding: 9px 12px; }
.feature-guide-page .top-links a:hover,
.feature-guide-page .top-links a.active { color: var(--guide-text); background: rgba(138, 124, 246, .16); }

.feature-guide-page .page {
    max-width: 1320px;
    padding: 52px 40px 84px;
}

.feature-guide-page .hero {
    position: relative;
    min-height: 260px;
    align-items: center;
    margin: 0 0 24px;
    padding: 42px 44px;
    overflow: hidden;
    border: 1px solid rgba(138, 124, 246, .25);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(138, 124, 246, .22), rgba(78, 215, 181, .06) 48%, rgba(255, 255, 255, .02)),
        rgba(21, 24, 40, .88);
    box-shadow: var(--guide-shadow);
}

.feature-guide-page .hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -145px;
    top: -190px;
    border: 1px solid rgba(138, 124, 246, .24);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(138, 124, 246, .04), 0 0 0 70px rgba(138, 124, 246, .025);
    pointer-events: none;
}

.feature-guide-page .hero > div { position: relative; z-index: 1; }
.feature-guide-page .eyebrow { color: var(--guide-accent-2); font-size: 11px; letter-spacing: .16em; }
.feature-guide-page h1 { margin: 12px 0 12px; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -.045em; }
.feature-guide-page .hero p { max-width: 700px; color: var(--guide-muted); font-size: 15px; line-height: 1.8; }
.feature-guide-page .updated {
    position: relative;
    z-index: 1;
    min-width: 190px;
    padding: 16px 18px;
    border-color: rgba(255, 255, 255, .13);
    border-radius: 15px;
    background: rgba(10, 12, 22, .28);
}
.feature-guide-page .updated span { color: var(--guide-accent-2); }
.feature-guide-page .updated strong { color: var(--guide-text); }

.feature-guide-page .guide-start {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0 0 24px;
}

.feature-guide-page .guide-start-card {
    position: relative;
    min-height: 174px;
    padding: 21px 21px 18px;
    gap: 10px;
    border-color: var(--guide-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 10px 34px rgba(0,0,0,.12);
}

.feature-guide-page .guide-start-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--guide-accent), var(--guide-accent-2));
    opacity: .85;
}

.feature-guide-page .guide-start-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 124, 246, .65);
    background: linear-gradient(180deg, rgba(138,124,246,.17), rgba(255,255,255,.04));
    box-shadow: 0 16px 38px rgba(0,0,0,.2);
}

.feature-guide-page .guide-start-card i { color: var(--guide-accent-2); font-size: 20px; }
.feature-guide-page .guide-start-card strong { font-size: 16px; color: var(--guide-text); }
.feature-guide-page .guide-start-card span { color: var(--guide-muted); font-size: 13px; line-height: 1.65; }
.feature-guide-page .guide-start-card em { color: #bdb6ff; font-size: 12px; }

.feature-guide-page .overview { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 16px; margin-bottom: 24px; min-width: 0; }
.feature-guide-page .overview > *,
.feature-guide-page .guide-start > *,
.feature-guide-page .guide-detail-panel > * { min-width: 0; }
.feature-guide-page .panel {
    padding: 24px;
    border-color: var(--guide-line);
    border-radius: 20px;
    background: var(--guide-surface);
    box-shadow: 0 14px 44px rgba(0,0,0,.14);
    min-width: 0;
}
.feature-guide-page .panel h2 { font-size: 19px; letter-spacing: -.02em; }
.feature-guide-page .panel .sub { margin-bottom: 18px; color: var(--guide-muted); font-size: 13px; }

.feature-guide-page .guide-flow {
    gap: 9px;
    padding: 4px 2px 7px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: rgba(138,124,246,.65) transparent;
}
.feature-guide-page .guide-step {
    min-width: 148px;
    min-height: 92px;
    padding: 13px;
    border-color: rgba(138,124,246,.22);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(138,124,246,.13), rgba(138,124,246,.035));
}
.feature-guide-page .guide-step-number { background: linear-gradient(145deg, #9c8eff, #6c5ce7); box-shadow: 0 5px 14px rgba(108,92,231,.3); }
.feature-guide-page .guide-step strong { color: var(--guide-text); font-size: 13px; }
.feature-guide-page .guide-step span { color: var(--guide-muted); }
.feature-guide-page .guide-arrow { color: var(--guide-accent); }

.feature-guide-page .guide-capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.feature-guide-page .guide-capability { padding: 15px; border-color: var(--guide-line); border-radius: 14px; background: var(--guide-surface-soft); }
.feature-guide-page .guide-capability-title { gap: 9px; }
.feature-guide-page .guide-icon { color: var(--guide-accent-2); background: rgba(78,215,181,.11); }
.feature-guide-page .guide-capability h3 { color: var(--guide-text); font-size: 14px; }
.feature-guide-page .guide-capability ul { margin-top: 10px; color: var(--guide-muted); line-height: 1.75; }

.feature-guide-page .guide-nav {
    position: sticky;
    top: 82px;
    z-index: 4;
    gap: 7px;
    margin: 0 0 16px;
    padding: 8px;
    border: 1px solid var(--guide-line);
    border-radius: 16px;
    background: rgba(17, 20, 33, .82);
    box-shadow: 0 12px 26px rgba(0,0,0,.15);
    backdrop-filter: blur(16px);
}
.feature-guide-page .guide-nav button { flex: 1; min-width: 150px; border: 0; border-radius: 11px; padding: 11px 14px; color: var(--guide-muted); background: transparent; }
.feature-guide-page .guide-nav button:hover,
.feature-guide-page .guide-nav button.is-active { color: #fff; background: linear-gradient(135deg, rgba(138,124,246,.55), rgba(108,92,231,.34)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

.feature-guide-page .guide-detail-panel { padding: 27px; }
.feature-guide-page .section-head { align-items: center; margin-bottom: 18px; }
.feature-guide-page .section-head h2 { font-size: 24px; }
.feature-guide-page .section-head p { margin-top: 7px; color: var(--guide-muted); line-height: 1.55; }
.feature-guide-page .section-head > a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(138,124,246,.3); border-radius: 10px; color: #c5bfff !important; background: rgba(138,124,246,.08); }
.feature-guide-page .guide-detail-panel > .guide-flow { padding-bottom: 10px; }
.feature-guide-page .guide-detail-panel > .guide-capabilities { margin-top: 18px !important; }
.feature-guide-page .guide-note { margin-top: 20px; border-left-color: var(--guide-accent-2); color: #c9d2e6; background: rgba(78,215,181,.07); }
.feature-guide-page .guide-note i { color: var(--guide-accent-2); }
.feature-guide-page .footer-links { margin-top: 26px; padding: 0 4px; color: var(--guide-muted); }

/* Light theme keeps the same hierarchy while switching surfaces and contrast. */
html[data-theme="light"] .feature-guide-page,
html.theme-light .feature-guide-page {
    --guide-bg: #f5f7fb;
    --guide-surface: rgba(255,255,255,.94);
    --guide-surface-strong: #fff;
    --guide-surface-soft: #f5f6fb;
    --guide-line: rgba(36,45,66,.13);
    --guide-text: #202334;
    --guide-muted: #5d6678;
    --guide-shadow: 0 18px 48px rgba(36,45,66,.09);
    background: radial-gradient(900px 420px at 78% -8%, rgba(108,92,231,.14), transparent 68%), var(--guide-bg) !important;
}
html[data-theme="light"] .feature-guide-page .topbar,
html.theme-light .feature-guide-page .topbar { background: rgba(255,255,255,.86); border-color: var(--guide-line); }
html[data-theme="light"] .feature-guide-page .hero,
html.theme-light .feature-guide-page .hero { background: linear-gradient(135deg, rgba(108,92,231,.14), rgba(78,215,181,.08) 48%, #fff); }
html[data-theme="light"] .feature-guide-page .updated,
html.theme-light .feature-guide-page .updated { background: rgba(255,255,255,.58); }
html[data-theme="light"] .feature-guide-page .guide-nav,
html.theme-light .feature-guide-page .guide-nav { background: rgba(255,255,255,.88); }
html[data-theme="light"] .feature-guide-page .guide-step,
html.theme-light .feature-guide-page .guide-step { background: linear-gradient(145deg, rgba(108,92,231,.09), rgba(108,92,231,.025)); }
html[data-theme="light"] .feature-guide-page .guide-note,
html.theme-light .feature-guide-page .guide-note { color: #4d5a6f; }

@media (max-width: 1040px) {
    .feature-guide-page .page { padding-left: 24px; padding-right: 24px; }
    .feature-guide-page .hero { padding: 34px; }
    .feature-guide-page .guide-start { grid-template-columns: 1fr; }
    .feature-guide-page .guide-start-card { min-height: 132px; }
}

@media (max-width: 780px) {
    .feature-guide-page .topbar { padding: 0 17px; gap: 14px; }
    .feature-guide-page .page { padding: 24px 14px 58px; }
    .feature-guide-page .hero { display: block; min-height: 0; padding: 28px 24px; border-radius: 20px; }
    .feature-guide-page .updated { margin-top: 20px; }
    .feature-guide-page .overview { grid-template-columns: 1fr; }
    .feature-guide-page .guide-capabilities { grid-template-columns: 1fr; }
    .feature-guide-page .guide-nav { top: 74px; overflow-x: auto; flex-wrap: nowrap; }
    .feature-guide-page .guide-nav button { flex: 0 0 auto; min-width: auto; white-space: nowrap; }
    .feature-guide-page .guide-detail-panel { padding: 20px 16px; }
    .feature-guide-page .section-head { display: block; }
    .feature-guide-page .section-head > a { display: inline-block; margin-top: 12px; }
}

@media (max-width: 520px) {
    .feature-guide-page .brand span { display: none; }
    .feature-guide-page .top-links { display: none; }
    .feature-guide-page .top-right { gap: 8px; }
    .feature-guide-page .top-right a { font-size: 12px; }
    .feature-guide-page h1 { font-size: 34px; }
    .feature-guide-page .hero p { font-size: 13px; }
    .feature-guide-page .panel { padding: 18px 15px; }
}