* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.guide-page { margin: 0; background: #050505; color: #f8f7f2; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.7; }
body.guide-page a { color: inherit; }
.guide-wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.article-wrap { width: min(800px, calc(100% - 40px)); margin: 0 auto; }
.guide-hero { padding: 84px 0 66px; background: radial-gradient(circle at 82% 24%, rgba(214,180,92,.13), transparent 30%); }
.guide-kicker { display: block; margin-bottom: 13px; color: #d6b45c; font-size: 12px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.guide-page h1 { margin: 0 0 20px; font-size: clamp(45px, 6.5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.guide-page h2 { margin: 54px 0 13px; font-size: clamp(29px, 4vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.guide-page h3 { margin: 32px 0 7px; font-size: 23px; line-height: 1.2; }
.guide-intro { max-width: 790px; margin: 0; color: #c8c4bb; font-size: 20px; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.guide-meta span { padding: 6px 9px; border: 1px solid #5d4b2d; border-radius: 999px; background: #111; color: #d8d4cb; font-size: 12px; }
.guide-body { padding: 66px 0 82px; border-top: 1px solid #5d4b2d; }
.guide-body p, .guide-body li { color: #d1cdc4; }
.guide-body strong { color: #fff; }
.guide-body a { color: #efd68a; text-underline-offset: 3px; }
.guide-body ul, .guide-body ol { padding-left: 24px; }
.guide-body li { margin: 8px 0; }
.guide-callout { margin: 34px 0; padding: 22px 24px; border: 1px solid #806a42; border-left: 4px solid #d6b45c; border-radius: 0 14px 14px 0; background: linear-gradient(135deg,#211b10,#111); }
.guide-callout strong { display: block; margin-bottom: 5px; font-size: 19px; }
.guide-example { margin: 27px 0; padding: 22px; border: 1px solid #5d4b2d; border-radius: 14px; background: #131313; }
.guide-example span { display: block; margin-bottom: 9px; color: #d6b45c; font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.guide-cta { margin-top: 58px; padding: 27px; border: 1px solid #8b7038; border-radius: 18px; background: linear-gradient(135deg,#211b10,#111); }
.guide-cta h2 { margin-top: 0; }
.guide-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.guide-button { display: inline-flex; justify-content: center; padding: 11px 16px; border: 1px solid #d6b45c; border-radius: 8px; background: #d6b45c; color: #080706 !important; text-decoration: none; font-weight: 900; }
.guide-button.secondary { background: transparent; color: #f8f7f2 !important; border-color: #806a42; }
.hub-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin-top: 34px; }
.hub-card { min-height: 260px; display: flex; flex-direction: column; padding: 24px; border: 1px solid #5d4b2d; border-radius: 16px; background: linear-gradient(180deg,#191919,#101010); }
.hub-card h2 { margin: 0 0 10px; font-size: 29px; }
.hub-card p { margin: 0; color: #c8c4bb; }
.hub-card a { margin-top: auto; padding-top: 20px; color: #efd68a; font-weight: 900; text-decoration: none; }
.hub-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-card img { width: 46px; height: 46px; margin-bottom: 18px; object-fit: cover; border-radius: 50%; clip-path: circle(49% at 50% 50%); box-shadow: 0 0 0 1px rgba(214,180,92,.58); }
@media (max-width: 980px) { .product-nav { display: none; } .product-menu { display: block; } }
@media (max-width: 680px) { .guide-hero { padding: 57px 0 49px; } .guide-body { padding: 49px 0 62px; } .hub-grid { grid-template-columns: 1fr; } .guide-page h1 { font-size: 43px; } .guide-buttons a { width: 100%; } }