/* Hükümdar Rehber Merkezi — only loaded by /rehber hub pages. */
:root {
  --hub-blue: #65a8ff;
  --hub-red: #ff746f;
  --hub-yellow: #f6ca63;
  --hub-panel: rgba(16, 9, 6, .86);
  --hub-panel-strong: rgba(25, 14, 9, .96);
  --hub-line: rgba(231, 188, 96, .22);
  --hub-cream: #f7ead2;
}

html { overflow-x: hidden; }

.guide-header { position: sticky; top: 0; z-index: 100; }
.guide-header .guide-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.guide-nav-links a[aria-current="page"] { color: var(--gold-300); }

.hub-main { padding-bottom: 90px; }
.hub-hero {
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: center;
  gap: 56px;
  padding: 74px 0 68px;
}
.hub-hero::before {
  content: "";
  position: absolute;
  inset: 8% -10% 4%;
  background: radial-gradient(circle at 72% 42%, rgba(242, 182, 73, .17), transparent 40%);
  pointer-events: none;
}
.hub-kicker { display: flex; align-items: center; gap: 10px; color: var(--gold-300); font: 800 .78rem/1 var(--font-serif); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; }
.hub-kicker::before { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); }
.hub-title { font: 900 clamp(2.55rem, 6vw, 5rem)/.98 var(--font-serif); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.hub-title em { display: block; font-style: normal; color: transparent; background: linear-gradient(105deg,#fff6cf,#f0b84e 55%,#c77b21); background-clip: text; -webkit-background-clip: text; }
.hub-lead { max-width: 720px; margin: 28px 0 0; color: #d9c9b2; font-size: 1.12rem; line-height: 1.8; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hub-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid var(--hub-line); border-radius: 10px; color: var(--hub-cream); background: rgba(255,255,255,.045); text-decoration: none; font: 800 .82rem/1 var(--font-serif); letter-spacing: .06em; transition: .24s ease; }
.hub-button:hover { transform: translateY(-2px); border-color: rgba(247,202,99,.65); background: rgba(247,202,99,.1); }
.hub-button.primary { background: linear-gradient(135deg,#f0a629,#a85d12); border-color: #f2c25d; box-shadow: 0 12px 32px rgba(182,104,20,.35); color: #fff; }
.hub-visual { position: relative; min-height: 480px; }
.hub-visual-card { position: absolute; width: 58%; border-radius: 22px; overflow: hidden; border: 1px solid rgba(246,202,99,.38); box-shadow: 0 28px 65px rgba(0,0,0,.55); background: #130b07; aspect-ratio: .72; }
.hub-visual-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-visual-card::after { content: attr(data-label); position: absolute; inset: auto 12px 12px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(7,4,3,.78); backdrop-filter: blur(12px); color: #fff; font: 800 .76rem/1 var(--font-serif); letter-spacing: .08em; text-align: center; }
.hub-visual-card:nth-child(1) { left: 0; top: 72px; transform: rotate(-7deg); }
.hub-visual-card:nth-child(2) { right: 0; top: 0; transform: rotate(6deg); }
.hub-visual-card:nth-child(3) { left: 21%; bottom: 0; z-index: 3; transform: rotate(-1deg); }
.hub-visual-orbit { position: absolute; inset: 10%; border: 1px solid rgba(246,202,99,.13); border-radius: 50%; box-shadow: 0 0 80px rgba(218,148,42,.13); }

.hub-trustbar { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--hub-line); border-radius: 14px; background: rgba(12,7,5,.72); overflow: hidden; margin-bottom: 82px; }
.hub-trust { padding: 22px; text-align: center; border-right: 1px solid var(--hub-line); }
.hub-trust:last-child { border-right: 0; }
.hub-trust strong { display: block; color: #fff1c9; font: 800 1.45rem/1 var(--font-serif); }
.hub-trust span { display: block; color: #a99a87; font-size: .8rem; margin-top: 7px; letter-spacing: .04em; }

.hub-section { padding: 40px 0 72px; scroll-margin-top: 92px; }
.hub-section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.55fr); gap: 28px; align-items: end; margin-bottom: 30px; }
.hub-eyebrow { color: var(--gold-400); font: 800 .72rem/1 var(--font-serif); letter-spacing: .18em; text-transform: uppercase; }
.hub-section-title { color: #fff; font: 900 clamp(1.8rem,3.6vw,3rem)/1.1 var(--font-serif); margin-top: 12px; }
.hub-section-copy { color: #aa9e90; line-height: 1.75; }

.journey-rail { position: sticky; top: 85px; z-index: 70; display: flex; gap: 8px; padding: 9px; margin: 0 auto 40px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--hub-line); border-radius: 13px; background: rgba(11,6,4,.89); backdrop-filter: blur(16px); }
.journey-rail::-webkit-scrollbar { display: none; }
.journey-rail a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; border-radius: 8px; color: #bdb0a1; text-decoration: none; font-size: .78rem; font-weight: 700; transition: .2s ease; }
.journey-rail a:hover, .journey-rail a.active { color: #1b0e04; background: linear-gradient(135deg,#ffe6a2,#d99a31); }

.nation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.nation-profile { --nation: var(--hub-blue); position: relative; min-height: 510px; border: 1px solid color-mix(in srgb, var(--nation) 45%, transparent); border-radius: 18px; overflow: hidden; background: var(--hub-panel); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.nation-profile.red { --nation: var(--hub-red); }
.nation-profile.yellow { --nation: var(--hub-yellow); }
.nation-cover { height: 220px; position: relative; overflow: hidden; }
.nation-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.nation-profile:hover .nation-cover img { transform: scale(1.045); }
.nation-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 20%,var(--hub-panel-strong) 100%); }
.nation-body { padding: 0 22px 24px; position: relative; margin-top: -18px; }
.nation-code { display: inline-flex; padding: 5px 10px; border-radius: 999px; color: var(--nation); border: 1px solid color-mix(in srgb,var(--nation) 45%,transparent); background: color-mix(in srgb,var(--nation) 11%,transparent); font: 800 .68rem/1 var(--font-serif); letter-spacing: .12em; }
.nation-body h3 { color: #fff; font: 800 1.35rem/1.2 var(--font-serif); margin: 14px 0 10px; }
.nation-role { color: var(--nation); font-weight: 800; font-size: .84rem; }
.nation-lore { color: #bfb1a0; font-size: .92rem; line-height: 1.7; margin-top: 13px; }
.nation-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.nation-stat { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.nation-stat span { display:block; color:#887d70; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.nation-stat strong { color:#fff; font:800 1.04rem/1.2 var(--font-serif); }

.hub-link-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hub-text-link { color: var(--gold-300); text-decoration: none; font-weight: 800; font-size: .86rem; }
.hub-text-link:hover { color:#fff; }

.building-preview, .unit-preview { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.asset-card { position:relative; border:1px solid var(--hub-line); border-radius:14px; overflow:hidden; background:var(--hub-panel); min-width:0; }
.asset-card-media { height: 180px; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle,rgba(244,180,63,.13),transparent 67%); }
.asset-card-media img { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 16px 15px rgba(0,0,0,.45)); transition:transform .35s ease; }
.asset-card:hover .asset-card-media img { transform:translateY(-4px) scale(1.04); }
.asset-card-body { padding:16px; }
.asset-card-body h3 { color:#fff; font:800 1rem/1.25 var(--font-serif); }
.asset-card-body p { color:#a99d8f; font-size:.83rem; line-height:1.55; margin-top:7px; }
.asset-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.asset-pill { padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(255,255,255,.035); color:#dbc69e; font-size:.69rem; font-weight:700; }

.filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; padding:12px; border:1px solid var(--hub-line); border-radius:12px; background:rgba(10,6,4,.72); }
.filter-group { display:flex; flex-wrap:wrap; gap:7px; }
.filter-btn { border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.035); color:#c9bdad; padding:9px 12px; font:700 .75rem/1 var(--font-sans); cursor:pointer; }
.filter-btn:hover, .filter-btn.active { color:#241306; border-color:#e8b658; background:linear-gradient(135deg,#ffe6a2,#d99a31); }
.filter-search { min-width:240px; min-height:38px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#100906; color:#fff; font:500 .86rem var(--font-sans); }
.filter-search:focus { outline:2px solid rgba(245,158,11,.35); border-color:#e5ad47; }

.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.catalog-card { --nation:var(--hub-blue); display:grid; grid-template-rows:175px auto; border:1px solid color-mix(in srgb,var(--nation) 28%,transparent); border-radius:14px; overflow:hidden; background:var(--hub-panel); box-shadow:0 12px 28px rgba(0,0,0,.25); }
.catalog-card[data-nation="RED"] { --nation:var(--hub-red); }
.catalog-card[data-nation="YELLOW"] { --nation:var(--hub-yellow); }
.catalog-card[hidden] { display:none; }
.catalog-image { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--nation) 18%,transparent),transparent 65%); }
.catalog-image img { width:91%; height:91%; object-fit:contain; filter:drop-shadow(0 16px 18px rgba(0,0,0,.5)); }
.catalog-level { position:absolute; top:10px; left:10px; padding:6px 8px; border-radius:6px; background:rgba(7,4,3,.82); border:1px solid color-mix(in srgb,var(--nation) 45%,transparent); color:var(--nation); font:800 .67rem/1 var(--font-serif); }
.catalog-content { padding:16px; }
.catalog-kicker { color:var(--nation); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.catalog-content h3 { color:#fff; font:800 1.08rem/1.2 var(--font-serif); margin:7px 0; }
.catalog-desc { color:#a99d8e; font-size:.82rem; line-height:1.55; min-height:42px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:13px; }
.stat-cell { padding:8px 5px; border-radius:7px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.065); text-align:center; }
.stat-cell span { display:block; color:#80766c; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; }
.stat-cell strong { display:block; color:#f8e6c5; font-size:.88rem; margin-top:2px; }
.cost-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.cost-item { display:flex; align-items:center; gap:4px; color:#c8b99e; font-size:.68rem; }
.cost-item img { width:16px; height:16px; object-fit:contain; }

.building-catalog { display:grid; gap:18px; }
.building-card { display:grid; grid-template-columns:260px minmax(0,1fr); border:1px solid var(--hub-line); border-radius:16px; overflow:hidden; background:var(--hub-panel); }
.building-art { display:grid; place-items:center; min-height:280px; position:relative; overflow:hidden; background:radial-gradient(circle,rgba(244,180,63,.14),transparent 68%); }
.building-art img { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 18px 20px rgba(0,0,0,.48)); }
.building-art.wall img { width:100%; height:100%; object-fit:cover; opacity:.88; }
.building-info { padding:24px; min-width:0; }
.building-info-head { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.building-info h2 { color:#fff; font:900 1.35rem/1.2 var(--font-serif); }
.building-info p { color:#aa9e90; margin-top:8px; line-height:1.65; }
.building-category { flex:0 0 auto; padding:6px 9px; border-radius:999px; border:1px solid var(--hub-line); color:var(--gold-300); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.milestone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }
.milestone { border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.025); padding:12px; }
.milestone-level { color:var(--gold-400); font:800 .7rem/1 var(--font-serif); letter-spacing:.08em; }
.milestone-effect { color:#f7ead2; font-size:.82rem; font-weight:700; line-height:1.4; margin-top:7px; min-height:35px; }
.milestone-costs { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.milestone-time { color:#877d70; font-size:.68rem; margin-top:8px; }
.progression-details { margin-top:14px; border:1px solid rgba(246,202,99,.16); border-radius:11px; background:rgba(7,4,3,.34); overflow:hidden; scroll-margin-top:92px; }
.progression-details summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:12px 15px; cursor:pointer; list-style:none; user-select:none; }
.progression-details summary::-webkit-details-marker { display:none; }
.progression-details summary:hover { background:rgba(246,202,99,.045); }
.progression-details summary strong { display:block; color:#f8e8c7; font:800 .78rem/1.25 var(--font-serif); letter-spacing:.045em; }
.progression-details summary small { display:block; margin-top:4px; color:#857a6e; font-size:.68rem; }
.progression-toggle { position:relative; flex:0 0 28px; width:28px; height:28px; border:1px solid rgba(246,202,99,.3); border-radius:50%; background:rgba(246,202,99,.06); }
.progression-toggle::before, .progression-toggle::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; background:#efc666; transform:translate(-50%,-50%); transition:transform .2s ease; }
.progression-toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
.progression-details[open] .progression-toggle::after { transform:translate(-50%,-50%) rotate(0); }
.progression-list { border-top:1px solid rgba(246,202,99,.13); }
.progression-row { display:grid; grid-template-columns:70px minmax(170px,1.2fr) minmax(190px,1fr) 78px; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.055); }
.progression-row:last-child { border-bottom:0; }
.progression-row:not(.progression-head):hover { background:rgba(255,255,255,.018); }
.progression-head { min-height:35px; padding-top:8px; padding-bottom:8px; background:rgba(246,202,99,.045); color:#81776a; font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.progression-level { display:flex; align-items:baseline; gap:5px; color:#887b6d; }
.progression-level span { font-size:.6rem; font-weight:800; letter-spacing:.05em; }
.progression-level strong { color:var(--gold-300); font:900 1rem/1 var(--font-serif); }
.progression-effect { color:#ead9bd; font-size:.74rem; font-weight:700; line-height:1.45; }
.progression-costs > div { display:flex; flex-wrap:wrap; gap:5px; }
.progression-time { color:#938678; font-size:.69rem; white-space:nowrap; }
.progression-mobile-label { display:none; }

.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.flow-card { position:relative; min-height:210px; padding:22px; border:1px solid var(--hub-line); border-radius:14px; background:linear-gradient(145deg,rgba(28,15,9,.9),rgba(12,7,5,.92)); color:inherit; text-decoration:none; overflow:hidden; transition:.25s ease; }
.flow-card::before { content:attr(data-step); position:absolute; right:12px; top:2px; color:rgba(246,202,99,.07); font:900 4.8rem/1 var(--font-serif); }
.flow-card:hover { transform:translateY(-4px); border-color:rgba(246,202,99,.5); box-shadow:0 18px 38px rgba(0,0,0,.32); }
.flow-icon { font-size:1.7rem; }
.flow-card h3 { color:#fff; font:800 1.05rem/1.3 var(--font-serif); margin:15px 0 8px; }
.flow-card p { color:#a99d8f; font-size:.84rem; line-height:1.6; }
.flow-cta { display:inline-block; margin-top:14px; color:var(--gold-300); font-size:.74rem; font-weight:800; }

.truth-note { display:grid; grid-template-columns:auto 1fr; gap:15px; padding:18px; border:1px solid rgba(99,170,255,.26); border-radius:12px; background:rgba(44,104,173,.08); color:#bdd6ef; }
.truth-note strong { color:#e7f3ff; }
.truth-note p { font-size:.86rem; line-height:1.65; }

.evidence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.evidence-card { padding:21px; border:1px solid var(--hub-line); border-radius:14px; background:linear-gradient(145deg,rgba(28,15,9,.9),rgba(12,7,5,.92)); }
.evidence-card .hub-eyebrow { margin-bottom:10px; }
.evidence-card h3 { color:#fff1d4; font:800 1rem/1.35 var(--font-serif); }
.evidence-card p { margin-top:9px; color:#a99d8f; font-size:.82rem; line-height:1.65; }
.evidence-card strong { color:var(--gold-300); }
.data-table-shell { margin-top:22px; overflow:auto; border:1px solid rgba(246,202,99,.16); border-radius:14px; background:rgba(10,6,4,.55); }
.data-table { width:100%; min-width:720px; border-collapse:collapse; }
.data-table th,.data-table td { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.065); text-align:left; vertical-align:top; }
.data-table th { background:rgba(246,202,99,.055); color:#d7b96f; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; }
.data-table td { color:#b9ab99; font-size:.78rem; line-height:1.55; }
.data-table td strong { display:block; color:#f4e4c5; font:800 .88rem/1.35 var(--font-serif); }
.data-table tr:last-child td { border-bottom:0; }
.method-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; list-style:none; }
.method-list li { padding:16px 18px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(255,255,255,.025); color:#a99d8f; font-size:.8rem; line-height:1.6; }
.method-list strong { display:block; margin-bottom:5px; color:#f2dfbd; font:800 .8rem var(--font-serif); }
.screen-evidence { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1fr); gap:26px; align-items:center; margin-top:22px; padding:24px; border:1px solid rgba(246,202,99,.16); border-radius:16px; background:linear-gradient(145deg,rgba(26,14,9,.86),rgba(9,6,4,.92)); }
.screen-evidence img { width:100%; max-height:520px; object-fit:contain; border-radius:12px; box-shadow:0 18px 42px rgba(0,0,0,.4); }
.screen-evidence figcaption h3 { color:#fff1d4; font:800 1.12rem/1.35 var(--font-serif); }
.screen-evidence figcaption p { margin-top:10px; color:#a99d8f; font-size:.84rem; line-height:1.7; }

.hub-footer { margin-top:60px; padding:35px 0; border-top:1px solid var(--hub-line); color:#8f8376; }
.hub-footer-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.hub-footer-links { display:flex; flex-wrap:wrap; gap:14px; }
.hub-footer a { color:#c6b79f; text-decoration:none; font-size:.82rem; }
.hub-footer a:hover { color:var(--gold-300); }

@media (max-width: 980px) {
  .hub-hero { grid-template-columns:1fr; min-height:auto; text-align:center; }
  .hub-kicker, .hub-actions { justify-content:center; }
  .hub-lead { margin-left:auto; margin-right:auto; }
  .hub-visual { max-width:590px; width:100%; margin:0 auto; }
  .nation-grid { grid-template-columns:1fr; }
  .nation-profile { min-height:0; display:grid; grid-template-columns:42% 58%; }
  .nation-cover { height:100%; min-height:350px; }
  .nation-body { margin:0; padding:28px; align-self:center; }
  .building-preview, .unit-preview { grid-template-columns:repeat(2,1fr); }
  .catalog-grid, .flow-grid { grid-template-columns:repeat(2,1fr); }
  .evidence-grid { grid-template-columns:1fr; }
  .building-card { grid-template-columns:220px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .guide-header { position:relative; }
  .guide-header .guide-container { flex-direction:row; gap:12px; }
  .guide-nav-links { display:none; }
  .guide-header-actions { width:auto; gap:8px; }
  .guide-play-btn { width:46px; min-width:46px; height:42px; padding:0; }
  .guide-play-btn span { display:none; }
  .method-list,.screen-evidence { grid-template-columns:1fr; }
  .hub-hero { padding-top:45px; gap:34px; }
  .hub-title { font-size:clamp(2.3rem,13vw,3.8rem); }
  .hub-visual { min-height:390px; }
  .hub-trustbar { grid-template-columns:repeat(2,1fr); }
  .hub-trust:nth-child(2) { border-right:0; }
  .hub-trust:nth-child(-n+2) { border-bottom:1px solid var(--hub-line); }
  .hub-section-head { grid-template-columns:1fr; }
  .nation-profile { display:block; }
  .nation-cover { min-height:0; height:230px; }
  .nation-body { margin-top:-18px; padding:0 20px 24px; }
  .filter-bar { align-items:stretch; }
  .filter-search { width:100%; min-width:0; }
  .catalog-grid, .flow-grid { grid-template-columns:1fr; }
  .building-card { grid-template-columns:1fr; }
  .building-art { min-height:240px; }
  .milestone-grid { grid-template-columns:1fr; }
  .milestone-effect { min-height:0; }
  .progression-head { display:none; }
  .progression-row { grid-template-columns:62px minmax(0,1fr); gap:8px 12px; padding:13px; }
  .progression-level { grid-row:1 / span 3; align-self:start; padding-top:2px; }
  .progression-effect, .progression-costs, .progression-time { grid-column:2; min-width:0; }
  .progression-mobile-label { display:block; margin-bottom:4px; color:#71675d; font-size:.57rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .progression-time { white-space:normal; }
  .hub-footer-row { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 520px) {
  .guide-container { padding-left:16px; padding-right:16px; }
  .guide-logo-text { font-size:1.05rem; letter-spacing:1px; }
  .hub-actions { display:grid; }
  .hub-button { width:100%; }
  .hub-visual { min-height:330px; }
  .hub-visual-card { width:62%; border-radius:15px; }
  .hub-trust { padding:17px 9px; }
  .hub-trust strong { font-size:1.15rem; }
  .building-preview, .unit-preview { grid-template-columns:1fr; }
  .asset-card { display:grid; grid-template-columns:125px 1fr; }
  .asset-card-media { height:100%; min-height:145px; }
  .journey-rail { margin-left:-6px; margin-right:-6px; }
  .building-info { padding:18px; }
  .building-info-head { display:block; }
  .building-category { display:inline-block; margin-top:9px; }
  .progression-details summary { min-height:62px; padding:12px; }
  .progression-details summary strong { font-size:.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Live application screen guides */
.screen-guide-hero { max-width:980px; margin-inline:auto; padding-bottom:52px; text-align:center; }
.screen-guide-hero .guide-lead { max-width:830px; margin-inline:auto; }
.screen-guide-hero .hero-cta-group { justify-content:center; }
.screen-story { display:grid; grid-template-columns:minmax(300px,430px) minmax(0,1fr); gap:clamp(34px,6vw,82px); align-items:center; padding:48px clamp(22px,5vw,64px); border:1px solid rgba(246,202,99,.18); border-radius:24px; background:radial-gradient(circle at 20% 30%,rgba(204,151,53,.12),transparent 38%),linear-gradient(145deg,rgba(31,17,10,.95),rgba(9,5,4,.97)); box-shadow:0 30px 80px rgba(0,0,0,.32); overflow:hidden; scroll-margin-top:92px; }
.device-stage { position:relative; margin:0; text-align:center; }
.device-stage::before { content:""; position:absolute; inset:10% -18%; border-radius:50%; background:radial-gradient(circle,rgba(232,183,77,.19),transparent 67%); filter:blur(8px); pointer-events:none; }
.device-live-badge { position:relative; z-index:2; display:inline-flex; align-items:center; gap:7px; margin-bottom:13px; padding:7px 11px; border:1px solid rgba(97,220,149,.28); border-radius:999px; background:rgba(42,119,75,.14); color:#8ce6ad; font-size:.62rem; font-weight:900; letter-spacing:.11em; }
.device-live-badge span { width:7px; height:7px; border-radius:50%; background:#56d98a; box-shadow:0 0 0 4px rgba(86,217,138,.12),0 0 12px rgba(86,217,138,.65); }
.phone-frame { position:relative; z-index:1; width:min(100%,390px); margin-inline:auto; padding:8px; border:1px solid rgba(255,225,157,.38); border-radius:31px; background:linear-gradient(150deg,#5d4933,#160e09 12%,#060404 88%,#7a5b31); box-shadow:0 26px 60px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.07); }
.phone-frame::before { content:""; position:absolute; z-index:2; top:14px; left:50%; width:66px; height:5px; border-radius:5px; background:rgba(4,3,3,.78); transform:translateX(-50%); }
.live-screen-image { display:block; width:100%; height:auto; border-radius:23px; background:#0a0604; }
.device-stage figcaption { position:relative; z-index:1; max-width:370px; margin:13px auto 0; color:#83786d; font-size:.68rem; line-height:1.55; }
.screen-callouts > .hub-section-title { margin:8px 0 22px; }
.screen-callout { position:relative; min-height:82px; margin-bottom:10px; padding:15px 16px 15px 60px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.screen-callout:hover { transform:translateX(4px); border-color:rgba(246,202,99,.3); background:rgba(246,202,99,.045); }
.screen-callout::before { content:attr(data-marker); position:absolute; left:15px; top:16px; display:grid; place-items:center; width:31px; height:31px; border:1px solid rgba(246,202,99,.35); border-radius:9px; background:linear-gradient(145deg,rgba(246,202,99,.16),rgba(92,56,13,.12)); color:var(--gold-300); font:900 .64rem/1 var(--font-serif); }
.screen-callout h3 { margin:0 0 5px; color:#f9e7c7; font:800 .9rem/1.35 var(--font-serif); }
.screen-callout p { margin:0; color:#a99d8f; font-size:.77rem; line-height:1.55; }
.screen-callout strong { color:#e9ca80; }
.screen-rates { margin-top:24px; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mode-grid.three-up { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mode-card { position:relative; min-height:100%; padding:26px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:linear-gradient(150deg,rgba(30,17,11,.93),rgba(12,7,5,.94)); overflow:hidden; }
.mode-card::after { content:""; position:absolute; width:170px; height:170px; right:-85px; bottom:-105px; border-radius:50%; background:rgba(246,202,99,.06); }
.mode-card.featured { border-color:rgba(246,202,99,.33); background:radial-gradient(circle at 100% 0,rgba(246,202,99,.12),transparent 40%),linear-gradient(150deg,rgba(35,21,12,.97),rgba(13,8,5,.96)); }
.mode-kicker { color:var(--gold-300); font-size:.63rem; font-weight:900; letter-spacing:.12em; }
.mode-card h3 { margin:10px 0 10px; color:#fff4db; font:800 1.12rem/1.3 var(--font-serif); }
.mode-card p { color:#a99d8f; font-size:.82rem; line-height:1.65; }
.mode-card ul { display:grid; gap:8px; margin:17px 0 0; padding:0; list-style:none; }
.mode-card li { position:relative; padding-left:18px; color:#cabda9; font-size:.76rem; line-height:1.45; }
.mode-card li::before { content:"✓"; position:absolute; left:0; color:#e6bd61; font-weight:900; }
.mode-card .hub-text-link { position:relative; z-index:1; display:inline-block; margin-top:18px; }
.compact-flow { grid-template-columns:repeat(4,minmax(0,1fr)); }
.compact-flow .flow-card { min-height:230px; padding:20px; }
.next-guide { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:24px; padding:28px 30px; border:1px solid rgba(246,202,99,.22); border-radius:16px; background:linear-gradient(110deg,rgba(83,50,15,.18),rgba(20,11,7,.9)); }
.next-guide h2 { margin:7px 0 5px; color:#fff2d3; font:800 1.2rem/1.3 var(--font-serif); }
.next-guide p { max-width:700px; color:#a99d8f; font-size:.82rem; line-height:1.55; }
.next-guide .hub-button { flex:0 0 auto; }

@media (max-width:980px) {
  .screen-story { grid-template-columns:minmax(270px,360px) minmax(0,1fr); gap:35px; padding:36px 28px; }
  .compact-flow { grid-template-columns:repeat(2,1fr); }
  .mode-grid.three-up { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .screen-guide-hero { padding-top:45px; }
  .screen-story { grid-template-columns:1fr; padding:28px 18px; border-radius:18px; }
  .device-stage { max-width:390px; margin-inline:auto; }
  .screen-callouts > .hub-section-title { font-size:1.45rem; }
  .mode-grid { grid-template-columns:1fr; }
  .next-guide { align-items:flex-start; flex-direction:column; padding:24px; }
  .next-guide .hub-button { width:100%; }
}

@media (max-width:520px) {
  .screen-guide-hero .guide-lead { font-size:.98rem; }
  .screen-story { margin-inline:-4px; padding:24px 13px; }
  .phone-frame { padding:6px; border-radius:26px; }
  .live-screen-image { border-radius:20px; }
  .screen-callout { padding:14px 13px 14px 54px; }
  .screen-callout::before { left:12px; }
  .compact-flow { grid-template-columns:1fr; }
  .compact-flow .flow-card { min-height:190px; }
  .mode-card { padding:21px; }
}

/* Premium military unit database */
.units-page { --units-blue:#5ca8ff; --units-red:#ff6b6f; --units-yellow:#f4c85b; }
.units-page .hub-main { padding-bottom:20px; }
.units-hero { max-width:980px; margin-inline:auto; padding-bottom:50px; text-align:center; }
.units-hero .guide-lead { max-width:850px; margin-inline:auto; }
.units-hero .hero-cta-group { justify-content:center; }
.units-hero .guide-badge { display:inline-flex; align-items:center; gap:9px; }
.verified-dot { width:8px; height:8px; border-radius:50%; background:#5de195; box-shadow:0 0 0 5px rgba(93,225,149,.1),0 0 16px rgba(93,225,149,.6); }
.units-trustbar { margin-bottom:34px; box-shadow:0 22px 55px rgba(0,0,0,.25); }

.unit-benchmark-section { margin-bottom:74px; padding:24px; border:1px solid rgba(246,202,99,.16); border-radius:18px; background:linear-gradient(135deg,rgba(26,14,9,.92),rgba(10,6,4,.92)); box-shadow:0 18px 50px rgba(0,0,0,.24); }
.benchmark-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.benchmark-head h2 { margin-top:8px; color:#fff3d6; font:800 1.25rem/1.3 var(--font-serif); }
.benchmark-head p { color:#8f8375; font-size:.78rem; }
.benchmark-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.benchmark-card { --bench:#dcb251; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; min-width:0; padding:15px; border:1px solid color-mix(in srgb,var(--bench) 26%,transparent); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--bench) 8%,#160c08),rgba(11,6,4,.95)); color:inherit; text-align:left; cursor:pointer; transition:.22s ease; }
.benchmark-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--bench) 58%,transparent); box-shadow:0 15px 32px rgba(0,0,0,.28); }
.benchmark-card.red { --bench:var(--units-red); }.benchmark-card.blue { --bench:var(--units-blue); }.benchmark-card.yellow { --bench:var(--units-yellow); }.benchmark-card.neutral { --bench:#c2b49f; }
.benchmark-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--bench) 13%,transparent); font-size:1.25rem; }
.benchmark-card small,.benchmark-card em { display:block; color:#897e72; font-size:.62rem; font-style:normal; line-height:1.35; }
.benchmark-card small { color:var(--bench); font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.benchmark-card strong { display:block; margin:3px 0; overflow:hidden; color:#f8ead0; font:800 .86rem/1.25 var(--font-serif); text-overflow:ellipsis; white-space:nowrap; }

.units-catalog-section { padding-top:26px; }
.units-section-head { margin-bottom:24px; }
.unit-command-deck { position:sticky; z-index:65; top:82px; margin-bottom:22px; border:1px solid rgba(246,202,99,.2); border-radius:16px; background:rgba(13,8,5,.94); box-shadow:0 18px 50px rgba(0,0,0,.36); backdrop-filter:blur(18px); overflow:hidden; }
.command-row { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; padding:16px 18px; }
.command-row + .command-row { border-top:1px solid rgba(255,255,255,.055); }
.command-row-secondary { padding-top:12px; padding-bottom:12px; background:rgba(255,255,255,.012); }
.command-block { min-width:0; }
.command-label,.command-search>label,.sort-shell>label { display:block; margin-bottom:8px; color:#938575; font-size:.59rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.nation-filter-group,.role-filter-group { flex-wrap:nowrap; }
.units-page .filter-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:9px 13px; border-color:rgba(255,255,255,.09); border-radius:9px; white-space:nowrap; transition:.18s ease; }
.units-page .filter-btn:hover { border-color:rgba(246,202,99,.35); background:rgba(246,202,99,.07); color:#f2dfbd; }
.units-page .filter-btn.active { color:#241306; border-color:#efc665; background:linear-gradient(135deg,#ffe8a9,#d99b32); box-shadow:0 6px 18px rgba(218,145,31,.2); }
.filter-sigil { display:inline-grid; place-items:center; width:14px; height:14px; border-radius:50%; border:1px solid currentColor; }
.filter-sigil.blue { background:#397fc8; border-color:#72b9ff; }.filter-sigil.red { background:#b94045; border-color:#ff8588; }.filter-sigil.yellow { background:#c8962c; border-color:#f6d37d; }.filter-sigil.all { border:0; }
.command-search { flex:0 0 285px; }
.search-shell { position:relative; display:flex; align-items:center; min-height:42px; border:1px solid rgba(255,255,255,.11); border-radius:10px; background:#0d0806; color:#776d64; overflow:hidden; transition:.18s ease; }
.search-shell:focus-within { border-color:#d9a845; box-shadow:0 0 0 3px rgba(217,168,69,.12); color:#d9a845; }
.search-shell>svg { flex:0 0 auto; margin-left:12px; }
.units-page .filter-search { flex:1; min-width:0; width:100%; min-height:40px; padding:0 36px 0 9px; border:0; background:transparent; }
.units-page .filter-search:focus { outline:0; }
.search-clear { position:absolute; right:7px; display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:7px; background:rgba(255,255,255,.06); color:#cbbba5; font-size:1.05rem; cursor:pointer; }
.role-command { flex:1; }
.sort-shell { flex:0 0 205px; }
.unit-sort { width:100%; min-height:38px; padding:0 34px 0 11px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#100a07; color:#e9dac2; font:700 .74rem var(--font-sans); }
.command-status { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding:10px 18px; border-top:1px solid rgba(246,202,99,.12); background:linear-gradient(90deg,rgba(246,202,99,.055),transparent); }
.command-status strong { display:block; color:#f4dfb8; font-size:.77rem; }
.command-status span { display:block; margin-top:3px; color:#776d63; font-size:.65rem; }
.reset-filter-btn { padding:7px 10px; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:rgba(255,255,255,.035); color:#c9b9a2; font-size:.67rem; font-weight:800; cursor:pointer; }
.reset-filter-btn:hover { border-color:rgba(246,202,99,.38); color:#efd08a; }

.premium-unit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.units-page .premium-unit-card { --nation:var(--units-blue); position:relative; display:grid; grid-template-rows:380px 1fr; min-width:0; border-color:color-mix(in srgb,var(--nation) 32%,transparent); border-radius:17px; background:linear-gradient(160deg,rgba(25,14,9,.98),rgba(10,6,4,.98)); box-shadow:0 18px 42px rgba(0,0,0,.3); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.units-page .premium-unit-card[data-nation="RED"] { --nation:var(--units-red); }.units-page .premium-unit-card[data-nation="YELLOW"] { --nation:var(--units-yellow); }
.units-page .premium-unit-card[hidden] { display:none; }
.units-page .premium-unit-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--nation) 58%,transparent); box-shadow:0 25px 60px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--nation) 10%,transparent); }
.units-page .catalog-image { position:relative; display:grid; place-items:center; isolation:isolate; background:#0b0806; }
.units-page .catalog-image::before { content:"AGEOFKHANS.COM · RESMÎ REHBER"; position:absolute; z-index:4; left:12px; bottom:13px; max-width:150px; color:rgba(255,241,211,.48); font:800 .47rem/1 var(--font-serif); letter-spacing:.09em; text-shadow:0 1px 4px rgba(0,0,0,.9); pointer-events:none; }
.units-page .catalog-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,4,3,.04) 42%,rgba(10,6,4,.93) 100%); pointer-events:none; }
.units-page .catalog-image img { position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; pointer-events:none; }
.units-page .catalog-image .unit-art-backdrop { z-index:0; object-fit:cover; object-position:center 30%; filter:blur(18px) brightness(.34) saturate(.78); opacity:.72; transform:scale(1.12); }
.units-page .catalog-image .unit-art-main { z-index:1; box-sizing:border-box; padding:13px 30px 0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 18px 18px rgba(0,0,0,.58)); transition:transform .45s ease; }
.units-page .premium-unit-card:hover .unit-art-main { transform:translateY(-3px) scale(1.018); }
.catalog-image-shade { position:absolute; inset:0; box-shadow:inset 0 0 45px rgba(0,0,0,.3); pointer-events:none; }
.units-page .catalog-level,.catalog-role { z-index:2; top:11px; padding:7px 9px; border-radius:8px; background:rgba(8,5,4,.8); backdrop-filter:blur(10px); }
.catalog-role { position:absolute; right:11px; color:#eee0c7; border:1px solid rgba(255,255,255,.14); font:800 .61rem/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; }
.unit-compare-toggle { position:absolute; z-index:3; right:11px; bottom:11px; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(9,6,4,.78); backdrop-filter:blur(12px); color:#e7d6bd; font-size:.66rem; font-weight:900; cursor:pointer; transition:.18s ease; }
.unit-compare-toggle span { display:grid; place-items:center; width:17px; height:17px; border-radius:5px; background:rgba(246,202,99,.13); color:#efc768; font-size:.8rem; }
.unit-compare-toggle:hover,.unit-compare-toggle.selected { border-color:color-mix(in srgb,var(--nation) 60%,transparent); background:color-mix(in srgb,var(--nation) 17%,rgba(8,5,4,.88)); color:#fff; }
.unit-compare-toggle.selected span { background:var(--nation); color:#120b06; }
.units-page .catalog-content { display:flex; flex-direction:column; padding:18px; }
.unit-title-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; }
.units-page .catalog-kicker { font-size:.64rem; }
.units-page .catalog-content h3 { margin:6px 0 5px; font-size:1.28rem; }
.units-page .catalog-desc { min-height:38px; color:#b0a293; font-size:.76rem; }
.unit-standout { min-width:105px; padding:8px 9px; border:1px solid color-mix(in srgb,var(--nation) 20%,transparent); border-radius:9px; background:color-mix(in srgb,var(--nation) 6%,transparent); text-align:right; }
.unit-standout span { display:block; color:#776d63; font-size:.51rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.unit-standout strong { display:block; margin-top:4px; color:var(--nation); font-size:.66rem; }
.units-page .stat-grid { gap:7px; margin-top:15px; }
.units-page .stat-cell { position:relative; min-width:0; padding:9px 8px 8px; overflow:hidden; text-align:left; }
.stat-label { display:flex; align-items:center; gap:4px; }
.units-page .stat-cell .stat-label span:first-child { color:#bca678; font-size:.62rem; }
.units-page .stat-cell .stat-label span:last-child { overflow:hidden; color:#81776d; font-size:.52rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.units-page .stat-cell strong { margin-top:5px; color:#fff0cf; font:900 .92rem/1 var(--font-serif); }
.units-page .stat-cell i { display:block; height:2px; margin-top:7px; border-radius:2px; background:rgba(255,255,255,.055); overflow:hidden; }
.units-page .stat-cell i b { display:block; width:var(--stat-progress); height:100%; border-radius:2px; background:linear-gradient(90deg,color-mix(in srgb,var(--nation) 70%,#fff),var(--nation)); }
.cost-block { margin-top:auto; padding-top:14px; }
.cost-label { display:block; color:#6f665d; font-size:.53rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.units-page .cost-row { min-height:34px; margin-top:6px; padding:8px 0 0; gap:7px 9px; }
.units-page .cost-item { color:#cdbda5; font-size:.68rem; }
.units-page .cost-item img { width:18px; height:18px; }

.unit-load-more-wrap { display:flex; justify-content:center; padding-top:28px; }
.unit-load-more-wrap[hidden] { display:none; }
.unit-load-more { min-width:270px; min-height:58px; padding:9px 24px; border:1px solid rgba(246,202,99,.35); border-radius:12px; background:linear-gradient(135deg,rgba(246,202,99,.13),rgba(74,41,11,.18)); color:#f1d594; cursor:pointer; transition:.2s ease; }
.unit-load-more:hover { transform:translateY(-2px); border-color:#e8bd61; box-shadow:0 14px 30px rgba(0,0,0,.28); }
.unit-load-more span,.unit-load-more small { display:block; }
.unit-load-more span { font:800 .8rem/1.2 var(--font-serif); }.unit-load-more small { margin-top:4px; color:#837668; font-size:.63rem; }
.unit-empty-state { padding:60px 20px; border:1px dashed rgba(246,202,99,.22); border-radius:16px; background:rgba(10,6,4,.42); text-align:center; }
.unit-empty-state>span { color:#e5bc62; font-size:2rem; }.unit-empty-state h3 { margin-top:10px; color:#f6e6c8; font:800 1.05rem var(--font-serif); }.unit-empty-state p { margin:8px 0 18px; color:#8f8377; font-size:.78rem; }

.stat-guide-section { padding-bottom:32px; }
.stat-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-guide-card { display:grid; grid-template-columns:38px 1fr; gap:12px; min-height:118px; padding:18px; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:linear-gradient(145deg,rgba(25,14,9,.86),rgba(10,6,4,.9)); }
.stat-guide-card>span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:rgba(246,202,99,.08); font-size:1.1rem; }
.stat-guide-card h3 { color:#f5e4c4; font:800 .84rem var(--font-serif); }.stat-guide-card p { margin-top:6px; color:#918578; font-size:.72rem; line-height:1.55; }
.units-truth-note { margin-top:24px; }

.unit-compare-tray[hidden] { display:none; }
.unit-compare-tray { position:fixed; z-index:180; left:0; right:0; bottom:0; border-top:1px solid rgba(246,202,99,.35); background:rgba(11,7,5,.96); box-shadow:0 -20px 55px rgba(0,0,0,.55); backdrop-filter:blur(18px); animation:compareTrayIn .24s ease both; }
@keyframes compareTrayIn { from { transform:translateY(100%); opacity:0 } to { transform:none; opacity:1 } }
.compare-tray-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; min-height:82px; }
.compare-summary { display:flex; align-items:center; gap:10px; }
.compare-count { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(246,202,99,.3); border-radius:12px; background:rgba(246,202,99,.08); color:#efc96f; font:900 .75rem var(--font-serif); }
.compare-summary strong,.compare-summary small { display:block; }.compare-summary strong { color:#f4e4c8; font:800 .78rem var(--font-serif); }.compare-summary small { margin-top:3px; color:#756b62; font-size:.6rem; }
.compare-selected { display:flex; gap:7px; min-width:0; }
.compare-selected button { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 9px 0 11px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.04); color:#d9c9b1; font-size:.68rem; cursor:pointer; }
.compare-selected button:hover { border-color:rgba(255,111,111,.45); color:#fff; }
.compare-actions { display:flex; gap:8px; }.compare-clear,.compare-open { min-height:40px; padding:0 15px; border-radius:9px; font-size:.7rem; font-weight:900; cursor:pointer; }.compare-clear { border:1px solid rgba(255,255,255,.1); background:transparent; color:#a99c8b; }.compare-open { border:1px solid #efc15d; background:linear-gradient(135deg,#f4b441,#b76c16); color:#fff; box-shadow:0 8px 22px rgba(206,125,21,.25); }.compare-open:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.unit-compare-tray.limit-reached { animation:compareShake .32s ease; } @keyframes compareShake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.has-compare-tray { padding-bottom:82px; }

.unit-compare-dialog { inset:0; width:min(960px,calc(100% - 32px)); max-height:min(780px,calc(100vh - 40px)); margin:auto; padding:0; border:1px solid rgba(246,202,99,.32); border-radius:18px; background:linear-gradient(145deg,#1c100b,#0c0705); color:#eadcc5; box-shadow:0 35px 90px rgba(0,0,0,.7); }
.unit-compare-dialog::backdrop { background:rgba(3,2,2,.76); backdrop-filter:blur(8px); }
.compare-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px; border-bottom:1px solid rgba(255,255,255,.07); }
.compare-dialog-head h2 { margin-top:8px; color:#fff0d2; font:900 1.5rem var(--font-serif); }
.dialog-close { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.04); color:#cdbc9f; font-size:1.3rem; cursor:pointer; }
.compare-table-scroll { padding:10px 24px 22px; overflow:auto; }
.compare-table-scroll table { width:100%; min-width:680px; border-collapse:separate; border-spacing:0 7px; }
.compare-table-scroll th,.compare-table-scroll td { padding:12px; text-align:center; }
.compare-table-scroll thead th { color:#857a6e; font-size:.62rem; font-weight:800; }.compare-table-scroll thead th:first-child { text-align:left; }
.compare-table-scroll thead span,.compare-table-scroll thead strong,.compare-table-scroll thead small { display:block; }.compare-table-scroll thead span { color:#bc9653; font-size:.56rem; text-transform:uppercase; }.compare-table-scroll thead strong { margin:5px 0; color:#fff0d2; font:800 1rem var(--font-serif); }.compare-table-scroll thead small { color:#756b61; }
.compare-table-scroll tbody tr { background:rgba(255,255,255,.025); }.compare-table-scroll tbody th { color:#9f917f; font-size:.7rem; text-align:left; }.compare-table-scroll tbody td strong { color:#f5d990; font:900 1rem var(--font-serif); }
.compare-cost-row td>div { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }.compare-cost-row .cost-item { color:#b7a994; font-size:.62rem; }
.compare-dialog-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.018); }.compare-dialog-foot p { color:#80756b; font-size:.67rem; }

@media (max-width:1100px) {
  .benchmark-grid { grid-template-columns:repeat(2,1fr); }
  .premium-unit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-row { align-items:stretch; flex-direction:column; gap:13px; }
  .command-search,.sort-shell { flex-basis:auto; width:100%; }
  .nation-filter-group,.role-filter-group { flex-wrap:wrap; }
}

@media (max-width:760px) {
  .units-hero { padding-top:45px; }
  .unit-benchmark-section { padding:17px; margin-bottom:48px; }
  .benchmark-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .benchmark-grid { grid-template-columns:1fr; }
  .benchmark-card { grid-template-columns:38px 1fr; padding:12px; }
  .benchmark-icon { width:38px; height:38px; }
  .unit-command-deck { position:relative; top:auto; margin-left:-4px; margin-right:-4px; }
  .command-row { padding:14px; }
  .units-page .filter-group { display:grid; grid-template-columns:repeat(2,1fr); width:100%; }
  .units-page .filter-btn { width:100%; }
  .role-filter-group .filter-btn:first-child { grid-column:1/-1; }
  .premium-unit-grid { grid-template-columns:1fr; }
  .units-page .premium-unit-card { grid-template-rows:370px 1fr; }
  .units-page .catalog-content { padding:16px; }
  .unit-title-row { grid-template-columns:1fr; }
  .unit-standout { display:flex; align-items:center; justify-content:space-between; text-align:left; }
  .unit-standout strong { margin-top:0; }
  .stat-guide-grid { grid-template-columns:1fr; }
  .compare-tray-inner { grid-template-columns:1fr auto; padding-top:10px; padding-bottom:10px; }
  .compare-selected { grid-column:1/-1; grid-row:2; overflow-x:auto; }
  .compare-summary small { display:none; }
  .compare-dialog-foot { align-items:stretch; flex-direction:column; }
  .compare-dialog-foot .hub-button { width:100%; }
}

@media (max-width:520px) {
  .units-hero .guide-lead { font-size:.96rem; }
  .units-trustbar { margin-bottom:28px; }
  .unit-benchmark-section { margin-left:-4px; margin-right:-4px; }
  .command-status { align-items:flex-start; }
  .command-status span { max-width:210px; }
  .units-page .premium-unit-card { grid-template-rows:350px 1fr; }
  .units-page .stat-cell { padding:8px 6px; }
  .units-page .stat-cell .stat-label span:last-child { font-size:.49rem; }
  .unit-load-more { width:100%; min-width:0; }
  .compare-summary>div { display:none; }
  .compare-tray-inner { grid-template-columns:auto 1fr; gap:9px; }
  .compare-actions { justify-content:flex-end; }
  .compare-clear { display:none; }
  .compare-selected { padding-bottom:2px; }
  .compare-dialog-head { padding:18px; }
  .compare-dialog-head h2 { font-size:1.25rem; }
  .compare-table-scroll { padding:8px 14px 18px; }
  .unit-compare-dialog[data-units="2"] .compare-table-scroll table { width:100%; min-width:0; table-layout:fixed; }
  .unit-compare-dialog[data-units="2"] .compare-table-scroll th:first-child { width:84px; }
  .unit-compare-dialog[data-units="2"] .compare-table-scroll th,.unit-compare-dialog[data-units="2"] .compare-table-scroll td { padding:10px 5px; }
  .unit-compare-dialog[data-units="2"] .compare-table-scroll thead strong { font-size:.75rem; }
  .unit-compare-dialog[data-units="2"] .compare-table-scroll thead small { font-size:.51rem; }
  .unit-compare-dialog[data-units="2"] .compare-cost-row .cost-item { font-size:.55rem; }
  .unit-compare-dialog[data-units="2"] .compare-cost-row .cost-item img { width:13px; height:13px; }
}

[data-guide-protected="true"],[data-guide-visual-guard="true"] { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
[data-guide-protected="true"] { -webkit-user-drag:none; pointer-events:none; }
.guide-protection-notice { position:fixed; z-index:260; left:50%; bottom:24px; max-width:min(430px,calc(100% - 28px)); padding:12px 16px; border:1px solid rgba(246,202,99,.34); border-radius:10px; background:rgba(13,8,5,.95); color:#ead7b6; box-shadow:0 18px 50px rgba(0,0,0,.5); backdrop-filter:blur(14px); font-size:.72rem; font-weight:800; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.2s ease; }
.guide-protection-notice.visible { opacity:1; transform:translate(-50%,0); }

/* Premium long-form reading system for the strategy library. */
.premium-reading-page {
  --reading-panel: rgba(18,10,7,.92);
  --reading-line: rgba(239,193,93,.2);
  --reading-soft: #ad9f8e;
  background:
    radial-gradient(circle at 76% 12%,rgba(210,135,35,.11),transparent 26%),
    radial-gradient(circle at 9% 48%,rgba(114,51,24,.09),transparent 30%),
    var(--bg-dark);
}
.reading-progress { position:fixed; z-index:220; inset:0 0 auto; height:3px; background:rgba(255,255,255,.04); pointer-events:none; }
.reading-progress i { display:block; width:var(--reading-progress,0%); height:100%; background:linear-gradient(90deg,#bd6d18,#ffe398); box-shadow:0 0 14px rgba(255,198,87,.8); transition:width .08s linear; }
.premium-reading-page .reading-hero { position:relative; max-width:940px; margin-inline:auto; padding:64px 0 46px; }
.premium-reading-page .reading-hero::before { content:""; position:absolute; z-index:-1; inset:5% 10% 0; border-radius:50%; background:radial-gradient(circle,rgba(223,153,43,.1),transparent 67%); filter:blur(12px); }
.premium-reading-page .reading-hero .guide-title { max-width:900px; margin-inline:auto; font-size:clamp(2.25rem,5.5vw,4.35rem); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.premium-reading-page .reading-hero .guide-lead { max-width:780px; margin-inline:auto; color:#c9bca9; font-size:1.08rem; line-height:1.8; }
.reading-meta { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 34px; border:1px solid var(--reading-line); border-radius:12px; background:rgba(12,7,5,.72); box-shadow:0 18px 45px rgba(0,0,0,.24); overflow:hidden; }
.reading-meta span { display:flex; min-height:54px; align-items:center; justify-content:center; padding:10px 14px; border-right:1px solid var(--reading-line); color:#bfb19f; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-align:center; }
.reading-meta span:first-child { color:#efc76f; text-transform:uppercase; }
.reading-meta span:last-child { border-right:0; }
.reading-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:30px; align-items:start; margin:0 0 44px; }
.reading-toc { position:sticky; top:102px; }
.reading-toc-inner { padding:18px; border:1px solid var(--reading-line); border-radius:14px; background:linear-gradient(150deg,rgba(24,13,8,.95),rgba(10,6,4,.92)); box-shadow:0 20px 50px rgba(0,0,0,.28); }
.reading-toc-label { padding:0 8px 13px; color:#e8be66; font:900 .66rem/1 var(--font-serif); letter-spacing:.15em; text-transform:uppercase; }
.reading-toc nav { display:grid; gap:4px; }
.reading-toc nav a { display:grid; grid-template-columns:27px 1fr; gap:7px; align-items:center; min-height:43px; padding:7px 8px; border-radius:8px; color:#8f8376; font-size:.67rem; font-weight:700; line-height:1.35; text-decoration:none; transition:.2s ease; }
.reading-toc nav a span { color:#695d50; font:800 .55rem var(--font-serif); letter-spacing:.08em; }
.reading-toc nav a:hover,.reading-toc nav a.active { color:#f5e7ca; background:rgba(246,202,99,.09); }
.reading-toc nav a.active span { color:#e9b950; }
.reading-toc-home { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding:14px 8px 2px; border-top:1px solid rgba(255,255,255,.06); color:#c99e4e; font:800 .68rem var(--font-serif); text-decoration:none; }
.reading-content { min-width:0; }
.reading-mobile-toc { display:none; }
.reading-visual-stage { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:10px; height:310px; margin-bottom:24px; }
.reading-visual-stage figure { position:relative; min-width:0; margin:0; border:1px solid var(--reading-line); border-radius:14px; background:#110906; overflow:hidden; box-shadow:0 18px 42px rgba(0,0,0,.31); }
.reading-visual-stage figure::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(7,4,3,.9)); pointer-events:none; }
.reading-visual-stage img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
.reading-visual-stage figure:hover img { transform:scale(1.045); }
.reading-visual-stage figcaption { position:absolute; z-index:2; inset:auto 14px 13px; display:flex; align-items:center; gap:8px; color:#fff0d2; font:800 .69rem var(--font-serif); }
.reading-visual-stage figcaption span { color:#e8b958; font-size:.54rem; letter-spacing:.1em; }
.premium-reading-page .reading-article { margin:0 !important; padding:clamp(25px,4vw,44px) !important; border-color:var(--reading-line); border-radius:16px; background:linear-gradient(145deg,rgba(25,14,9,.94),rgba(10,6,4,.95)); box-shadow:0 24px 64px rgba(0,0,0,.34); transform:none !important; overflow:hidden; }
.premium-reading-page .reading-article::before { opacity:.8; }
.premium-reading-page .reading-section-title { scroll-margin-top:112px; }
.premium-reading-page .reading-article > h2 { position:relative; margin:42px 0 17px !important; padding:20px 20px 20px 58px; border:1px solid rgba(246,202,99,.13); border-radius:12px; background:linear-gradient(90deg,rgba(246,202,99,.075),transparent); color:#f8deb0 !important; font:900 clamp(1.18rem,2.2vw,1.55rem)/1.3 var(--font-serif) !important; }
.premium-reading-page .reading-article > h2:first-child { margin-top:0 !important; }
.premium-reading-page .reading-article > h2::before { content:counter(reading-section,decimal-leading-zero); position:absolute; left:18px; top:21px; color:#e8b64e; font:900 .7rem var(--font-serif); letter-spacing:.08em; }
.premium-reading-page .reading-article { counter-reset:reading-section; }
.premium-reading-page .reading-article > h2 { counter-increment:reading-section; }
.premium-reading-page .reading-article p { color:#bcb09f !important; font-size:.98rem !important; line-height:1.82 !important; }
.premium-reading-page .reading-article strong { color:#f1d58e; }
.premium-reading-page .reading-article ul,.premium-reading-page .reading-article ol { margin:18px 0 26px !important; padding:17px 20px 17px 40px !important; border-left:2px solid rgba(235,179,72,.43); border-radius:0 10px 10px 0; background:rgba(255,255,255,.025); color:#bcae9a !important; }
.premium-reading-page .reading-article li { margin:7px 0 !important; color:#bcae9a !important; }
.premium-reading-page .reading-article table { width:100% !important; margin:22px 0 !important; border-collapse:separate !important; border-spacing:0 !important; border:1px solid var(--reading-line); border-radius:11px; background:rgba(6,4,3,.52); overflow:hidden; }
.premium-reading-page .reading-article th,.premium-reading-page .reading-article td { padding:13px 14px !important; border-bottom:1px solid rgba(255,255,255,.055) !important; color:#bfb19e !important; text-align:left; }
.premium-reading-page .reading-article th { color:#ecc979 !important; font-size:.74rem; letter-spacing:.04em; }
.premium-reading-page .reading-article tr:last-child td { border-bottom:0 !important; }
.premium-reading-page .reading-article code { display:inline-block; padding:3px 7px; border:1px solid rgba(246,202,99,.18); border-radius:5px; background:rgba(246,202,99,.07); color:#f2d58d; font-size:.82em; }
.premium-reading-page .reading-timeline { display:grid; gap:13px; }
.premium-reading-page .timeline-item { position:relative; gap:18px; margin:0; padding:22px; border:1px solid var(--reading-line); border-radius:14px; background:linear-gradient(145deg,rgba(24,13,8,.9),rgba(10,6,4,.92)); box-shadow:0 15px 36px rgba(0,0,0,.24); }
.premium-reading-page .timeline-number { flex:0 0 46px; width:46px; height:46px; box-shadow:0 8px 23px rgba(203,124,20,.27); }
.premium-reading-page .timeline-content h3 { margin:2px 0 8px; color:#f7dfb3; font-size:1.08rem; }
.premium-reading-page .timeline-content p { color:#a99c8b; line-height:1.72; }
.premium-reading-page .faq-wrap { margin:32px 0 0; padding:26px; border:1px solid var(--reading-line); border-radius:15px; background:rgba(14,8,5,.72); }
.premium-reading-page .faq-section-title { margin:0 0 20px; text-align:left; color:#f5deb4; }
.premium-reading-page .faq-card { border-color:rgba(246,202,99,.13); background:rgba(255,255,255,.025); }
.reading-related { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:26px; }
.reading-related a { position:relative; min-height:105px; padding:22px 55px 20px 21px; border:1px solid var(--reading-line); border-radius:13px; background:linear-gradient(145deg,rgba(25,14,9,.88),rgba(10,6,4,.92)); color:#f5e5c8; text-decoration:none; transition:.22s ease; }
.reading-related a:hover { transform:translateY(-2px); border-color:rgba(246,202,99,.48); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.reading-related small,.reading-related strong { display:block; }
.reading-related small { color:#8e8173; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.reading-related strong { margin-top:8px; font:800 .88rem/1.35 var(--font-serif); }
.reading-related a > span { position:absolute; right:19px; top:50%; color:#dfa845; font-size:1.3rem; transform:translateY(-50%); }
.premium-reading-page .guide-promo-banner { margin-top:32px !important; border-radius:17px; box-shadow:0 24px 60px rgba(0,0,0,.32); }
.reading-to-top { position:fixed; z-index:90; right:22px; bottom:22px; display:flex; align-items:center; gap:8px; min-height:43px; padding:0 13px; border:1px solid rgba(246,202,99,.28); border-radius:10px; background:rgba(18,10,7,.91); color:#e8c36f; box-shadow:0 12px 32px rgba(0,0,0,.36); backdrop-filter:blur(12px); font-weight:900; opacity:0; pointer-events:none; transform:translateY(10px); transition:.22s ease; }
.reading-to-top.visible { opacity:1; pointer-events:auto; transform:none; }
.reading-to-top span { color:#b4a591; font-size:.65rem; }

@media (max-width:900px) {
  .reading-shell { grid-template-columns:1fr; }
  .reading-toc { display:none; }
  .reading-mobile-toc { display:block; margin-bottom:14px; border:1px solid var(--reading-line); border-radius:12px; background:rgba(18,10,7,.9); overflow:hidden; }
  .reading-mobile-toc summary { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 17px; color:#efd39a; cursor:pointer; list-style:none; font:800 .75rem var(--font-serif); }
  .reading-mobile-toc summary::-webkit-details-marker { display:none; }
  .reading-mobile-toc summary strong { color:#827566; font-size:.61rem; }
  .reading-mobile-toc nav { display:grid; padding:5px 10px 12px; border-top:1px solid rgba(255,255,255,.05); }
  .reading-mobile-toc nav a { display:grid; grid-template-columns:28px 1fr; gap:7px; align-items:center; min-height:40px; padding:5px 7px; color:#ab9d8a; font-size:.68rem; text-decoration:none; }
  .reading-mobile-toc nav a span { color:#dfac4d; font-size:.55rem; }
  .reading-meta { grid-template-columns:repeat(2,1fr); }
  .reading-meta span:nth-child(2) { border-right:0; }
  .reading-meta span:nth-child(-n+2) { border-bottom:1px solid var(--reading-line); }
}

@media (max-width:640px) {
  .premium-reading-page .reading-hero { padding:38px 0 30px; }
  .premium-reading-page .reading-hero .guide-title { font-size:clamp(1.85rem,9.5vw,2.75rem); }
  .premium-reading-page .reading-hero .guide-lead { font-size:.93rem; line-height:1.68; }
  .reading-meta { margin-bottom:20px; }
  .reading-meta span { min-height:46px; padding:8px; font-size:.61rem; }
  .reading-shell { gap:0; }
  .reading-visual-stage { grid-template-columns:1.25fr .75fr; grid-template-rows:repeat(2,1fr); height:300px; }
  .reading-visual-stage figure:first-child { grid-row:1/-1; }
  .reading-visual-stage figcaption { inset:auto 9px 10px; font-size:.59rem; }
  .premium-reading-page .reading-article { padding:19px !important; }
  .premium-reading-page .reading-article > h2 { margin:30px 0 14px !important; padding:16px 14px 16px 48px; font-size:1.04rem !important; }
  .premium-reading-page .reading-article > h2::before { left:14px; top:18px; }
  .premium-reading-page .reading-article p { font-size:.9rem !important; line-height:1.72 !important; }
  .premium-reading-page .reading-article ul,.premium-reading-page .reading-article ol { padding:13px 12px 13px 30px !important; }
  .premium-reading-page .reading-article table { display:block; overflow-x:auto; white-space:nowrap; }
  .premium-reading-page .timeline-item { padding:17px; }
  .premium-reading-page .timeline-number { flex-basis:38px; width:38px; height:38px; font-size:1rem; }
  .premium-reading-page .timeline-content h3 { font-size:.95rem; }
  .premium-reading-page .faq-wrap { padding:17px; }
  .reading-related { grid-template-columns:1fr; }
  .reading-related a { min-height:88px; padding:18px 50px 17px 17px; }
  .reading-to-top { right:13px; bottom:13px; }
  .reading-to-top span { display:none; }
}