.guide-hub-page {
  --hub-navy: #071d43;
  --hub-blue: #175dc4;
  --hub-gold: #f1b62e;
  --hub-green: #21a46c;
  --hub-ink: var(--text-main, #14243a);
  --hub-muted: var(--text-sub, #5d6d82);
  --hub-card: var(--bg-card, #fff);
  --hub-border: var(--border-color, #dce5ef);
}

.guide-hub-main { width:min(1160px,calc(100% - 36px)); margin:0 auto; padding:22px 0 56px; color:var(--hub-ink); }
.guide-hub-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--hub-muted); font-size:.86rem; }
.guide-hub-breadcrumb a { color:#2864ad; text-decoration:none; }
.guide-hub-breadcrumb a:hover { text-decoration:underline; }

.guide-hub-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); min-height:470px; overflow:hidden; border:1px solid rgba(94,145,218,.34); border-radius:29px; background:radial-gradient(circle at 80% 27%,rgba(46,116,225,.34),transparent 30%),linear-gradient(135deg,#061a3b 0%,#0a2d65 58%,#1157af 100%); box-shadow:0 22px 55px rgba(8,36,76,.2); color:#fff; }
.guide-hub-hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 90%); pointer-events:none; }
.guide-hub-hero-copy { position:relative; z-index:2; align-self:center; padding:52px 28px 52px 56px; }
.guide-hub-eyebrow,.guide-hub-kicker { margin:0 0 10px; color:#b87900; font-size:.8rem; font-weight:850; letter-spacing:.08em; }
.guide-hub-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#ffd86e; }
.guide-hub-hero h1 { margin:0; color:#fff; font-size:clamp(2.25rem,4.5vw,4.1rem); line-height:1.13; letter-spacing:-.035em; }
.guide-hub-hero h1 span { color:#ffd15c; }
.guide-hub-hero-copy > p:not(.guide-hub-eyebrow) { max-width:670px; margin:21px 0 0; color:#d7e8fb; font-size:1.04rem; line-height:1.82; }
.guide-hub-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; }
.guide-hub-btn { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:10px; padding:11px 20px; border:1px solid transparent; border-radius:14px; font-weight:850; text-decoration:none; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.guide-hub-btn:hover { transform:translateY(-2px); }
.guide-hub-btn-primary { background:linear-gradient(135deg,#ffdc6b,#efac1f); color:#1d2c42; box-shadow:0 10px 25px rgba(241,182,46,.27); }
.guide-hub-btn-secondary { border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.07); color:#fff; }
.guide-hub-hero-visual { position:relative; z-index:1; display:flex; min-height:470px; align-items:flex-end; justify-content:center; }
.guide-hub-hero-visual img { width:min(94%,420px); height:auto; max-height:440px; object-fit:contain; filter:drop-shadow(0 22px 18px rgba(0,0,0,.34)); }
.guide-hub-count-card { position:absolute; right:27px; bottom:27px; display:flex; align-items:baseline; gap:8px; min-width:180px; padding:13px 16px; border:1px solid rgba(255,255,255,.32); border-radius:15px; background:rgba(4,21,54,.78); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.2); backdrop-filter:blur(13px); }
.guide-hub-count-card strong { color:#ffd15c; font-size:1.35rem; }
.guide-hub-count-card span { color:#d9e8fb; font-size:.75rem; }

.guide-hub-status { display:grid; grid-template-columns:repeat(4,1fr); margin:-1px 28px 0; border:1px solid var(--hub-border); border-top:0; border-radius:0 0 19px 19px; background:var(--hub-card); box-shadow:0 12px 32px rgba(24,48,82,.08); }
.guide-hub-status > div { padding:17px 18px; border-left:1px solid var(--hub-border); text-align:center; }
.guide-hub-status > div:first-child { border-left:0; }
.guide-hub-status small,.guide-hub-status strong { display:block; }
.guide-hub-status small { color:var(--hub-muted); font-size:.7rem; }
.guide-hub-status strong { margin-top:5px; color:var(--hub-ink); font-size:.9rem; }
.guide-hub-collection-note { max-width:760px; margin:12px auto 0; color:var(--hub-muted); font-size:.78rem; line-height:1.65; text-align:center; }

.guide-hub-section { padding:65px 0 15px; scroll-margin-top:20px; }
.guide-hub-heading { max-width:700px; margin:0 auto 27px; text-align:center; }
.guide-hub-heading-left { margin:0 0 27px; text-align:left; }
.guide-hub-heading h2,.guide-hub-search-section h2,.guide-hub-recent h2,.guide-hub-faq h2 { margin:0; color:var(--hub-ink); font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.28; }
.guide-hub-heading > p:last-child { margin:10px 0 0; color:var(--hub-muted); }

.guide-hub-intents { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.guide-hub-intent { position:relative; overflow:hidden; display:grid; grid-template-columns:56px 1fr; align-content:start; gap:14px; min-height:245px; padding:25px; border:1px solid var(--hub-border); border-radius:22px; background:var(--hub-card); box-shadow:0 12px 32px rgba(25,51,87,.085); }
.guide-hub-intent::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--intent-color); }
.guide-hub-intent-newbie { --intent-color:#2fa66c; }
.guide-hub-intent-trade { --intent-color:#e1a31b; }
.guide-hub-intent-guide { --intent-color:#2d6fca; }
.guide-hub-intent-icon { display:grid; width:56px; height:56px; place-items:center; border-radius:17px; background:color-mix(in srgb,var(--intent-color) 13%,transparent); font-size:1.55rem; }
.guide-hub-intent small { color:var(--intent-color); font-size:.72rem; font-weight:850; }
.guide-hub-intent h3 { margin:3px 0 0; color:var(--hub-ink); font-size:1.25rem; }
.guide-hub-intent p { margin:7px 0 0; color:var(--hub-muted); font-size:.84rem; line-height:1.65; }
.guide-hub-intent-actions { grid-column:1/-1; display:grid; gap:8px; margin-top:auto; }
.guide-hub-intent-actions a { display:flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:1px solid var(--hub-border); border-radius:12px; background:var(--bg-soft,#f6f8fb); color:#24598f; font-size:.8rem; font-weight:850; text-decoration:none; }
.guide-hub-intent-actions a:first-child { border-color:transparent; background:var(--intent-color); color:#fff; }
.guide-hub-intent-actions a:hover { filter:brightness(.97); }

.guide-hub-main > .bf-ad { margin-top:30px; margin-bottom:9px; }

.guide-hub-search-section { margin-top:48px; padding:32px; border:1px solid var(--hub-border); border-radius:25px; background:linear-gradient(130deg,var(--hub-card),rgba(229,242,255,.8)); box-shadow:0 14px 38px rgba(25,51,87,.09); scroll-margin-top:20px; }
.guide-hub-search-copy { max-width:740px; }
.guide-hub-search-copy > p:last-child { margin:10px 0 0; color:var(--hub-muted); }
.guide-hub-search-form { margin-top:22px; }
.guide-hub-search-form > label { display:block; margin-bottom:7px; color:#31465f; font-size:.78rem; font-weight:850; }
.guide-hub-search-box { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:5px; padding:5px 5px 5px 13px; border:2px solid #aac6e9; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(25,68,123,.08); }
.guide-hub-search-box:focus-within { border-color:#2d6fc9; box-shadow:0 0 0 4px rgba(45,111,201,.12); }
.guide-hub-search-box > span { color:#3d6ca6; font-size:1.5rem; }
.guide-hub-search-box input { min-width:0; padding:12px 5px; border:0; outline:0; background:transparent; color:#15243b; font:inherit; }
.guide-hub-search-box button { min-height:44px; padding:10px 20px; border:0; border-radius:11px; background:#1d63bd; color:#fff; cursor:pointer; font:inherit; font-weight:850; }
.guide-hub-search-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.guide-hub-search-chips button { padding:7px 11px; border:1px solid #c7d8ed; border-radius:999px; background:#fff; color:#285c96; cursor:pointer; font:inherit; font-size:.75rem; font-weight:800; }
.guide-hub-search-chips button:hover,.guide-hub-search-chips button:focus-visible { border-color:#5593db; background:#edf5ff; outline:0; }
.guide-hub-search-status { min-height:22px; margin-top:13px; color:var(--hub-muted); font-size:.78rem; }
.guide-hub-search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:4px; }
.guide-hub-search-result { display:grid; grid-template-columns:1fr auto; gap:9px; padding:15px; border:1px solid var(--hub-border); border-radius:15px; background:var(--hub-card); color:var(--hub-ink); text-decoration:none; }
.guide-hub-search-result:hover { border-color:#66a0df; transform:translateY(-1px); }
.guide-hub-search-result span { display:block; min-width:0; }
.guide-hub-search-result b { display:inline-block; margin-bottom:4px; color:#1762b2; font-size:.68rem; }
.guide-hub-search-result strong { display:block; color:var(--hub-ink); font-size:.88rem; line-height:1.38; }
.guide-hub-search-result small { display:-webkit-box; overflow:hidden; margin-top:5px; color:var(--hub-muted); font-size:.72rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.guide-hub-search-result > em { color:#2a6fc5; font-style:normal; }

.guide-hub-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.guide-hub-category { position:relative; overflow:hidden; padding:24px; border:1px solid var(--hub-border); border-radius:21px; background:var(--hub-card); box-shadow:0 10px 30px rgba(25,51,87,.075); }
.guide-hub-category::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--category-color); }
.guide-hub-category-newbie{--category-color:#2ca46a}.guide-hub-category-trade{--category-color:#d99c16}.guide-hub-category-world{--category-color:#b8534c}.guide-hub-category-race{--category-color:#704eb3}.guide-hub-category-combat{--category-color:#2870bd}.guide-hub-category-events{--category-color:#168f91}
.guide-hub-category-head { display:grid; grid-template-columns:50px 1fr; gap:13px; align-items:center; }
.guide-hub-category-head > span { display:grid; width:50px; height:50px; place-items:center; border-radius:15px; background:color-mix(in srgb,var(--category-color) 12%,transparent); font-size:1.4rem; }
.guide-hub-category h3 { margin:0; color:var(--hub-ink); font-size:1.06rem; }
.guide-hub-category-head p { margin:4px 0 0; color:var(--hub-muted); font-size:.75rem; }
.guide-hub-category-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:17px; }
.guide-hub-category-links a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:41px; padding:9px 11px; border:1px solid var(--hub-border); border-radius:11px; background:var(--bg-soft,#f6f8fb); color:#294b70; font-size:.77rem; font-weight:780; text-decoration:none; }
.guide-hub-category-links a:hover { border-color:var(--category-color); color:var(--category-color); }

.guide-hub-recent,.guide-hub-faq { margin-top:47px; padding:31px; border:1px solid var(--hub-border); border-radius:24px; background:var(--hub-card); box-shadow:0 12px 34px rgba(25,51,87,.08); }
.guide-hub-recent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.guide-hub-recent-grid a { display:grid; grid-template-columns:48px 1fr; align-content:start; gap:4px 12px; padding:18px; border:1px solid var(--hub-border); border-radius:17px; background:var(--bg-soft,#f6f8fb); color:var(--hub-ink); text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.guide-hub-recent-grid a:hover { transform:translateY(-3px); border-color:#78a8df; }
.guide-hub-recent-icon { grid-row:1/5; display:grid; width:48px; height:48px; place-items:center; border-radius:14px; background:#e9f2ff; font-size:1.25rem; }
.guide-hub-recent-grid time { color:#3370b7; font-size:.68rem; font-weight:850; }
.guide-hub-recent-grid strong { font-size:.9rem; }
.guide-hub-recent-grid small { color:var(--hub-muted); font-size:.72rem; line-height:1.5; }
.guide-hub-recent-grid b { margin-top:7px; color:#2462a7; font-size:.72rem; }

.guide-hub-faq { display:grid; grid-template-columns:minmax(230px,.6fr) minmax(0,1.4fr); gap:27px; }
.guide-hub-faq-list { display:grid; gap:9px; }
.guide-hub-faq-list details { border:1px solid var(--hub-border); border-radius:14px; background:var(--bg-soft,#f6f8fb); }
.guide-hub-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; color:var(--hub-ink); cursor:pointer; font-weight:820; list-style:none; }
.guide-hub-faq-list summary::-webkit-details-marker { display:none; }
.guide-hub-faq-list summary span { color:#2c70c6; font-size:1.2rem; transition:transform .18s ease; }
.guide-hub-faq-list details[open] summary span { transform:rotate(45deg); }
.guide-hub-faq-list details p { margin:0; padding:0 16px 16px; color:var(--hub-muted); font-size:.82rem; line-height:1.72; }

.guide-hub-trust { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:21px; padding:18px 21px; border:1px solid #bad4ee; border-radius:17px; background:#edf6ff; }
.guide-hub-trust > div { display:flex; align-items:flex-start; gap:12px; }
.guide-hub-trust > div > span { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:50%; background:#51c388; color:#07391f; font-weight:900; }
.guide-hub-trust p { margin:0; color:#3f607b; font-size:.8rem; line-height:1.6; }
.guide-hub-trust p strong { display:block; color:#173d62; }
.guide-hub-trust nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 17px; }
.guide-hub-trust nav a { color:#175fa8; font-size:.75rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.guide-hub-trust nav a:hover { text-decoration:underline; }

.guide-hub-page.dark-mode .guide-hub-search-section { background:linear-gradient(130deg,var(--hub-card),rgba(29,76,133,.2)); }
.guide-hub-page.dark-mode .guide-hub-search-box { border-color:#536b8b; background:#101f33; }
.guide-hub-page.dark-mode .guide-hub-search-box input { color:#e6eef8; }
.guide-hub-page.dark-mode .guide-hub-trust { border-color:#345d7b; background:#132e43; }
.guide-hub-page.dark-mode .guide-hub-trust p { color:#a9c4d7; }
.guide-hub-page.dark-mode .guide-hub-trust p strong { color:#dcebf7; }
.guide-hub-page a:focus-visible,.guide-hub-page button:focus-visible,.guide-hub-page input:focus-visible { outline:3px solid #ffcf4c; outline-offset:3px; }

@media (max-width:980px) {
  .guide-hub-hero { grid-template-columns:minmax(0,1fr) minmax(290px,.9fr); }
  .guide-hub-hero-copy { padding-left:38px; }
  .guide-hub-status { grid-template-columns:repeat(2,1fr); }
  .guide-hub-status > div:nth-child(3) { border-left:0; border-top:1px solid var(--hub-border); }
  .guide-hub-status > div:nth-child(4) { border-top:1px solid var(--hub-border); }
  .guide-hub-intents,.guide-hub-recent-grid { grid-template-columns:1fr; }
  .guide-hub-intent { min-height:0; }
}

@media (max-width:760px) {
  .guide-hub-page .line-float,.guide-hub-page .bf-assistant { display:none!important; }
  .guide-hub-main .bf-ad-guide_after_intro { width:min(100%,336px); }
  .guide-hub-main { width:min(100% - 24px,680px); padding-top:14px; }
  .guide-hub-hero { grid-template-columns:1fr; min-height:0; border-radius:23px; }
  .guide-hub-hero-copy { padding:34px 23px 8px; text-align:center; }
  .guide-hub-hero h1 { font-size:clamp(2rem,8.6vw,3rem); }
  .guide-hub-hero-copy > p:not(.guide-hub-eyebrow) { margin-top:17px; font-size:.96rem; line-height:1.72; }
  .guide-hub-hero-actions { justify-content:center; margin-top:23px; }
  .guide-hub-btn { flex:1 1 180px; }
  .guide-hub-hero-visual { min-height:285px; }
  .guide-hub-hero-visual img { width:min(78%,330px); max-height:305px; }
  .guide-hub-count-card { right:50%; bottom:17px; min-width:195px; transform:translateX(50%); justify-content:center; }
  .guide-hub-status { margin-inline:12px; }
  .guide-hub-section { padding-top:48px; }
  .guide-hub-search-section,.guide-hub-recent,.guide-hub-faq { padding:24px 20px; border-radius:20px; }
  .guide-hub-search-box { grid-template-columns:28px 1fr; }
  .guide-hub-search-box button { grid-column:1/-1; }
  .guide-hub-search-results,.guide-hub-category-grid,.guide-hub-faq { grid-template-columns:1fr; }
  .guide-hub-category { padding:21px 19px; }
  .guide-hub-trust { align-items:flex-start; flex-direction:column; }
  .guide-hub-trust nav { justify-content:flex-start; }
}

@media (max-width:440px) {
  .guide-hub-main { width:min(100% - 18px,420px); }
  .guide-hub-hero-copy { padding-inline:18px; }
  .guide-hub-status { grid-template-columns:1fr; }
  .guide-hub-status > div { border-top:1px solid var(--hub-border); border-left:0; }
  .guide-hub-status > div:first-child { border-top:0; }
  .guide-hub-category-links { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .guide-hub-page *,.guide-hub-page *::before,.guide-hub-page *::after { scroll-behavior:auto!important; transition:none!important; }
}