/* Guides + free tools only (Batch 112): rules moved out of app.css so the money pages
   don't download them. Loaded by guides/_article_base.html, guides/index.html,
   tools/_tool_base.html, tools/index.html and tools/rank_up_time.html, between app.css
   and store.css. Every rule here needs a class that only templates/guides, templates/tools
   and their scripts use. These rules now come after the rest of app.css, so where one ties
   (same specificity) with an app.css rule on the same element, this file wins — the split
   was checked with a computed-style snapshot of 36 pages x 2 widths (no change), and
   `.ref-list b` stayed in app.css because `.pplaque b` must win. New guide/tool-only
   styles go here, not in app.css. */
/* ------------------------------------------------------ service catalog */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) {.svc-grid { grid-template-columns: 1fr; }}
.svc-card {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; color: var(--text); box-shadow: var(--shadow-1);
  transition: border-color .14s ease, transform .14s ease;
}
.svc-card:hover { text-decoration: none; border-color: rgba(var(--accent-rgb),.5);
  transform: translateY(-2px); }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.svc-head h3 { margin: 0; }
.svc-card p { margin: 6px 0 12px; font-size: 14px; }
.svc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.svc-cta { color: var(--accent-hot); font-weight: 650; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {.svc-card:hover { transform: none; }}
/* ---- service detail: banner + SEO content band + FAQ accordion ---- */
.svc-banner { position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.svc-banner-inner { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 34px; }
/* .container owns the side gutter */
.crumbs { font: 500 13px var(--font); color: var(--text-faint); margin-bottom: 12px; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }
.svc-banner-inner h1 { margin: 6px 0 10px; }
.svc-lead { color: var(--text-muted); max-width: 620px; font-size: 15.5px; line-height: 1.55; margin: 0; }
.svc-faq-head { margin-bottom: 14px; }
.faq-list { display: grid; gap: 10px; max-width: 900px; }
.guide-stats { --gaccent: #2dd4bf; }
.guide-banner { position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.guide-banner-inner { position: relative; z-index: 1; padding: 40px 20px 32px; }
.guide-banner-inner h1 { margin: 6px 0 10px; max-width: 760px; }
.guide-meta { color: var(--text-faint); font: 500 13px var(--font); margin-top: 14px; }
.guide-wrap { padding-top: 30px; max-width: 880px; }
/* hub grid */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) {.guide-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 620px) {.guide-grid { grid-template-columns: 1fr; }}
.guide-tag { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .05em;
  color: var(--gaccent, var(--accent)); }
.guide-readmore { font: 700 13px var(--font); color: var(--accent); margin-top: auto; }
/* article prose */
.guide-prose { font-size: 15.5px; line-height: 1.7; color: var(--text); }
.guide-prose > p { color: var(--text-muted); margin: 0 0 16px; }
.guide-prose h2 { font-size: 22px; margin: 30px 0 12px; }
.guide-prose h3 { font-size: 17px; margin: 22px 0 8px; }
.guide-prose ul, .guide-prose ol { margin: 0 0 16px; padding-left: 20px; color: var(--text-muted); }
.guide-prose li { margin: 6px 0; line-height: 1.6; }
.guide-prose table.data { margin: 6px 0 18px; width: 100%; }
.guide-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 18px; }
.guide-tablewrap > table.data { margin: 0; }
.guide-tablewrap > table.data th, .guide-tablewrap > table.data td { white-space: normal; min-width: 96px; }
.guide-tablewrap > table.data td:first-child { min-width: 130px; }
.guide-prose a { color: var(--accent-hot); }
.guide-prose strong { color: var(--text); }
.guide-callout { background: linear-gradient(180deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02));
  border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 14px; padding: 16px 18px; margin-top: 26px;
  font-size: 14px; line-height: 1.62; color: var(--text-muted); }
.guide-callout b { color: var(--text); }
.guide-more-list { display: grid; gap: 8px; }
.guide-more-item { display: block; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card); text-decoration: none; }
.guide-more-item:hover { border-color: var(--border-strong); }
.guide-more-item b { display: block; color: var(--text); font-size: 14px; }
.guide-more-item span { display: block; margin-top: 2px; }
.guide-hubcta { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 24px; }
.guide-hubcta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* icons */
.svc-card h3 { margin: 12px 0 0; }
.tool-banner { position: relative; overflow: hidden; color: var(--taccent);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg)); }
.tool-banner-in { position: relative; z-index: 1; padding: 34px 20px 60px; }
.tool-banner-in .crumbs { margin-bottom: 12px; }
.tool-kicker { color: var(--accent-hot); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-size: 12px; margin: 6px 0 6px; }
.tool-banner-in h1 { font-size: 40px; line-height: 1.08; margin: 0 0 12px;
  color: var(--text); max-width: 720px; }
.tool-sub { color: var(--text-muted); font-size: 16px; max-width: 620px;
  line-height: 1.55; margin: 0; }
.tool-body { padding: 0 20px 70px; max-width: 900px; }
.tool-note { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-muted); margin-top: 20px; }
/* calculator card — lifts over the banner */
.rut-card { background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.38);
  margin-top: -40px; position: relative; }
.rut-title { font-size: 20px; margin: 0 0 14px; }
.rut-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rut-tab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text-muted); font-weight: 600;
  font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.rut-tab:hover { border-color: var(--border-strong); color: var(--text); }
.rut-tab.is-on { background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  border-color: var(--accent-deep); color: var(--accent-ink); }
.rut-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.rut-field label { display: block; font-size: 12px; font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.rut-arrow { align-self: center; color: var(--text-muted); padding-top: 20px; }
.rut-input { width: 100%; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  font-size: 15px; font-weight: 600; }
.rut-input:focus { outline: none; border-color: var(--accent); }
.rut-num { display: flex; flex-direction: column; gap: 9px; }
.rut-range { width: 100%; accent-color: var(--accent); }
.rut-tierbadge { margin-top: 8px; font-size: 13px; font-weight: 650; color: var(--text);
  min-height: 18px; display: flex; align-items: center; gap: 6px; }
.rut-result { margin: 20px 0 4px; padding: 18px; border-radius: var(--radius);
  background: radial-gradient(120% 150% at 82% 0%, rgba(var(--accent-rgb),.10), transparent 60%), var(--bg);
  border: 1px solid var(--border-strong); text-align: center; }
.rut-result.is-empty { background: var(--bg); }
.rut-result-main { display: flex; align-items: baseline; justify-content: center;
  gap: 10px; flex-wrap: wrap; }
.rut-days { font-size: 46px; font-weight: 800; color: var(--accent-hot); line-height: 1;
  font-variant-numeric: tabular-nums; }
.rut-days-lab { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.rut-meta { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
.rut-cta { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.rut-from { color: var(--text-muted); font-size: 14px; font-weight: 600; }
.rut-fine { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.rut-claim a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.rut-claim a:hover { color: var(--text); }
.tool-how, .tool-ref, .tool-faq, .tool-guides, .tool-endcta { margin-top: 40px; }
.tool-how h2, .tool-ref h2, .tool-faq h2, .tool-guides h2, .tool-endcta h2 {
  font-size: 22px; margin: 0 0 12px; }
.tool-how p { color: var(--text-muted); line-height: 1.65; margin: 0 0 12px; max-width: 720px; }
.tool-how strong { color: var(--text); }
.ref-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ref-block { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; }
.ref-block h3 { font-size: 14px; margin: 0 0 12px; color: var(--text); }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-bottom: 1px dashed var(--border); font-size: 14px; }
.ref-list li:last-child { border-bottom: 0; }
.ref-range { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ref-more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 13.5px; }
.tool-guide-links { display: grid; gap: 10px; }
.tool-guide-links a { display: block; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px; transition: border-color .15s, background .15s; }
.tool-guide-links a:hover { border-color: var(--border-strong); background: var(--panel); text-decoration: none; }
.tool-guide-links b { display: block; color: var(--text); margin-bottom: 3px; }
.tool-guide-links span { color: var(--text-muted); font-size: 13.5px; }
.tool-endcta { background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; text-align: center; }
.tool-endcta p { color: var(--text-muted); max-width: 560px; margin: 0 auto 18px; line-height: 1.6; }
.tool-endcta .wrap { justify-content: center; }
@media (max-width: 720px) {.tool-banner-in h1 { font-size: 30px; }.rut-grid { grid-template-columns: 1fr; }.rut-arrow { transform: rotate(90deg); padding: 4px 0; justify-self: center; }.ref-cols { grid-template-columns: 1fr; }}
/* ladder badge (Wingman / Competitive) — icon + rank name */
.lbadge { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.lbadge img { width: 30px; height: 30px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4)); }
.lbadge b { font-weight: 700; font-size: 13px; color: var(--text); }
/* rank-distribution block on the calculator page */
.tool-dist .dist-h { font-size: 14px; color: var(--text-muted); font-weight: 650;
  margin: 18px 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.tool-dist-lead { color: var(--text-muted); line-height: 1.6; max-width: 720px; margin: 0 0 6px; }
.tool-dist-lead strong { color: var(--text); }
/* free-tool cross-link inside guide articles */
.guide-toolcta { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px;
  padding: 15px 18px; border-radius: var(--radius); text-decoration: none;
  background: radial-gradient(120% 160% at 6% 0%, rgba(var(--accent-rgb),.10), transparent 62%), var(--bg-raised);
  border: 1px solid var(--border-strong); transition: border-color .15s, transform .15s; }
.guide-toolcta:hover { border-color: var(--accent-deep); text-decoration: none; transform: translateY(-1px); }
.guide-toolcta-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: rgba(var(--accent-rgb),.13); color: var(--accent-hot); }
.guide-toolcta-tx { display: flex; flex-direction: column; gap: 2px; }
.guide-toolcta-tx b { color: var(--text); font-size: 15px; }
.guide-toolcta-tx span { color: var(--text-muted); font-size: 13.5px; line-height: 1.45; }
.guide-toolcta-go { margin-left: auto; color: var(--accent-hot); font-size: 22px; font-weight: 700; flex: none; }
@media (max-width: 560px) {.guide-toolcta-go { display: none; }}
/* ---- article UI: reading progress, key-facts strip, on-this-page TOC ---- */
.guide-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: transparent; pointer-events: none; }
.guide-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
/* Batch 101 — live price box under the facts */
.guide-pricebox { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),.35);
  background: linear-gradient(120deg, rgba(var(--accent-rgb),.10), var(--panel) 65%); }
.gpb-l { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.gpb-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1.2 var(--font); letter-spacing: .09em;
  text-transform: uppercase; color: #5be0b0; }
.gpb-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(61,220,132,.7); }
.gpb-l b { font-size: 16px; color: var(--text); }
.gpb-l small { font-size: 12.5px; color: var(--text-muted); }
.gpb-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gpb-from { font: 800 18px/1.1 var(--font); color: var(--text); }
.gpb-from small { font-size: 12px; font-weight: 600; color: var(--text-faint); }
@media (max-width: 560px) {.gpb-r { width: 100%; justify-content: space-between; }}
/* Batch 111: the dated lowest-price line under the live price (guides + tools) */
.gpb-claim { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.gpb-claim a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.gpb-claim a:hover { color: var(--text); }
.tool-pricebox { text-align: left; margin: 0 0 22px; }
/* sticky "exact price" bar on guides/tools (guidebar.js) — reuses .sk-buybar */
.gb-bar .sk-buybar-price small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; letter-spacing: .06em; }
.gb-bar .sk-buybar-price b { font-size: 18px; }
.gb-bar .sk-buybar-price b .sp-was { font-size: 12px; margin-right: 4px; }
.gb-bar .sk-buybar-price b small { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.gb-bar .sk-buybar-btn { max-width: 150px; padding: 12px 14px; }
.gb-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-muted); font: 500 20px/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.gb-x:hover { color: var(--text); border-color: var(--text-faint); }
.guide-facts li span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text); }
.guide-facts li span::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gaccent, var(--accent)); flex: none; box-shadow: 0 0 6px var(--gaccent, var(--accent)); }
.guide-toc { background: var(--bg-raised); border: 1px solid var(--border); border-left: 3px solid var(--gaccent, var(--accent));
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 26px; }
.guide-toc > b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 8px; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.guide-toc li { margin: 0 0 5px; break-inside: avoid; }
.guide-toc a { color: var(--text-muted); font-size: 13.5px; font-weight: 550; }
.guide-toc a:hover { color: var(--text); text-decoration: none; }
.guide-toc a.is-cur { color: var(--accent-hot); font-weight: 700; }
@media (max-width: 560px) {.guide-toc ul { columns: 1; }}
/* rank tables (badges + share) */
.rank-table td { vertical-align: middle; }
.rank-table td:last-child { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.rank-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rank-eg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600; color: var(--text); }
.rank-eg-x { color: var(--text-muted); font-size: 18px; }
.lp-sec-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* ---- game hub heroes with key art ---- */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-faint); }
.crumbs a { color: var(--text-muted); }
/* ---- generic art banner for service/guide pages ---- */
.svc-banner-img { position: absolute; inset: 0; z-index: 0; background: center 35%/cover no-repeat; }
.svc-banner-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,10,.95) 0%, rgba(6,7,10,.85) 45%, rgba(6,7,10,.5) 75%, rgba(6,7,10,.3) 100%),
              linear-gradient(180deg, rgba(6,7,10,.1), rgba(6,7,10,.55) 70%, #06070a 100%); }
.svc-banner.has-art .svc-banner-inner { padding-top: 54px; padding-bottom: 42px; }
.svc-banner.has-art h1 { font-size: 40px; }
@media (max-width: 640px) {.svc-banner.has-art h1 { font-size: 30px; }}
@media (max-width: 640px) {.ref-more { padding-top: 7px; padding-bottom: 7px; }.ref-more { display: inline-block; }.guide-toc a { padding-top: 7px; padding-bottom: 7px; }}
.guide-prose .guide-fig { margin: 22px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.guide-prose .guide-fig img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; }
.guide-prose .guide-fig.tall img { aspect-ratio: 16 / 9; }
.guide-prose .guide-fig figcaption { padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.guide-prose .guide-fig figcaption b { color: var(--text-muted); }
.guide-prose ul.guide-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 24px; padding: 0; list-style: none; color: var(--text); }
.guide-prose .guide-roles > li { margin: 0; display: flex; flex-direction: column; position: relative; border-radius: 16px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); transition: border-color .18s, transform .18s; }
.guide-prose .guide-roles > li:hover { border-color: color-mix(in srgb, var(--wdc, var(--gaccent)) 55%, transparent); transform: translateY(-2px); }
.guide-role-art { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.guide-role-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,18,0) 35%, rgba(10,12,18,.9)); }
.guide-role-art .wd-badge { position: absolute; left: 12px; bottom: 10px; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.guide-role-art .lvl { position: absolute; right: 12px; bottom: 12px; z-index: 2; font: 700 11.5px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: #0b0d12; background: var(--wdc, var(--gaccent)); padding: 6px 8px; border-radius: 8px; }
.guide-role-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.guide-role-body h3 { margin: 0; font: 600 17px/1.2 var(--font-display); color: var(--text); }
.guide-role-body .xp { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wdc, var(--gaccent)); }
.guide-role-body p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.guide-role-body .kit { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.guide-role-body .kit b { color: var(--text-muted); font-weight: 600; }
.guide-role-body .more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent-hot); }
.guide-prose ul.guide-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; padding: 0; list-style: none; }
.guide-prose .guide-stats > li { margin: 0; padding: 16px 14px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--gaccent, var(--accent)); }
.guide-prose ul.guide-stats b { display: block; font: 800 24px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.guide-prose ul.guide-stats span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--text-faint); }
.guide-prose ol.guide-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: none; }
.guide-prose .guide-timeline > li { margin: 0; position: relative; padding: 14px 14px 14px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.guide-prose .guide-timeline > li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--gaccent, var(--accent)); }
.guide-timeline small { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gaccent, var(--accent)); }
.guide-timeline b { display: block; font: 600 15px/1.25 var(--font-display); color: var(--text); }
.guide-timeline p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.guide-prose .guide-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 18px 0; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--gaccent, var(--accent)) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gaccent, var(--accent)) 35%, transparent); color: var(--text-muted); font-size: 14.5px; }
.guide-prose .guide-tip .wd-badge { flex: none; }
.guide-prose .guide-tip b { color: var(--text); }
@media (max-width: 900px) {.guide-prose ul.guide-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }.guide-prose ul.guide-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.guide-prose ol.guide-timeline { grid-template-columns: minmax(0, 1fr); }}
@media (max-width: 560px) {.guide-prose ul.guide-roles { grid-template-columns: minmax(0, 1fr); }.guide-prose ul.guide-stats b { font-size: 21px; }}
/* ------------------------------------------------ Guides v2 (Batch 75) */
/* Key-takeaways box, numbered step cards, two-column comparison, image
   credits, a sources footer and a compact "quick answer" strip. Colour comes
   from --gaccent (set per theme) so the same furniture works for CS2 + WARDOGS. */
.guide-prose .guide-key { margin: 18px 0 24px; padding: 16px 18px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--gaccent, var(--accent)) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gaccent, var(--accent)) 30%, transparent); }
.guide-prose .guide-key > b { display: block; margin-bottom: 10px; font: 700 11.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gaccent, var(--accent)); }
.guide-prose .guide-key ul { margin: 0; padding-left: 18px; }
.guide-prose .guide-key li { margin: 6px 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.guide-prose .guide-key li b { color: var(--text); }
.guide-prose ol.guide-steps { list-style: none; padding: 0; margin: 18px 0 22px; counter-reset: gstep; display: grid; gap: 12px; }
.guide-prose .guide-steps > li { counter-increment: gstep; position: relative; margin: 0; padding: 14px 16px 14px 62px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.guide-prose .guide-steps > li::before { content: counter(gstep, decimal-leading-zero); position: absolute; left: 16px; top: 15px; font: 800 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--gaccent, var(--accent)); }
.guide-prose .guide-steps > li > b { display: block; margin-bottom: 4px; font: 600 16px/1.25 var(--font-display); color: var(--text); }
.guide-prose .guide-steps > li p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.guide-prose .guide-steps > li p + p { margin-top: 6px; }
.guide-prose .guide-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.guide-prose .guide-compare > div { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--cc, var(--gaccent, var(--accent))); }
.guide-prose .guide-compare h3 { margin: 0 0 8px; font: 600 17px/1.2 var(--font-display); color: var(--text); }
.guide-prose .guide-compare ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.guide-prose .guide-compare li { margin: 5px 0; }
.guide-prose .guide-compare li b { color: var(--text); }
.guide-prose .guide-fig figcaption .credit { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); opacity: .85; }
.guide-prose .guide-fig.wide img { aspect-ratio: 21 / 9; }
.guide-prose .guide-answer { margin: 0 0 20px; padding: 14px 16px; border-left: 3px solid var(--gaccent, var(--accent)); background: var(--panel); border-radius: 0 14px 14px 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.guide-prose .guide-answer b { color: var(--gaccent, var(--accent)); }
.guide-prose .guide-src { margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.guide-prose .guide-src b { color: var(--text-muted); }
.guide-prose .guide-src ul { margin: 6px 0 0; padding-left: 18px; }
.guide-prose .guide-src li { margin: 3px 0; }
.guide-prose .guide-src a { color: var(--text-muted); word-break: break-word; }
.guide-prose table.data td:first-child { color: var(--text); }
@media (max-width: 760px) {.guide-prose .guide-compare { grid-template-columns: minmax(0, 1fr); }.guide-prose .guide-steps > li { padding-left: 54px; }.guide-prose .guide-steps > li::before { font-size: 17px; left: 14px; }}
/* ============================================================= *
 *  Free tools v2 (Batch 76) — hub, season calendar, percentile,
 *  FACEIT Elo, WARDOGS XP / loadout / gold. Builds on .tool/.rut-*.
 * ============================================================= */
.tool-body-wide { max-width: 1040px; }
.tool-section { margin-top: 40px; }
.tool-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-section-head h2 { margin: 0; font-size: 24px; }
.tool-section-head .eyebrow { margin-bottom: 6px; }
.tool-tile-go { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--text); }
.tool-more { margin-top: 40px; }
.tool-more h2 { font-size: 22px; margin: 0 0 12px; }
.tool .fe-stats, .tool .lo-stats, .tool .xp-stats, .tool .gx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.tool .fe-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 12px 10px; min-width: 0; }
.tool .fe-stat b { display: block; font: 800 24px/1.1 var(--font-display); color: var(--accent-hot); font-variant-numeric: tabular-nums; word-break: break-word; }
.tool .fe-stat > span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.tool .wd-tabs .rut-tab { display: inline-flex; align-items: center; gap: 7px; }
.tool .wd-tabs .rut-tab.is-on { background: linear-gradient(180deg, color-mix(in srgb, var(--wdc, #b8e35a) 85%, #fff), var(--wdc, #b8e35a)); border-color: var(--wdc, #b8e35a); color: #10180a; }
.tool .guide-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.tool .guide-compare > div { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--cc, var(--accent)); }
.tool .guide-compare h3 { margin: 0 0 8px; font: 600 17px/1.2 var(--font-display); color: var(--text); }
.tool .guide-compare ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.tool .guide-compare li { margin: 5px 0; }
.tool ol.guide-steps { list-style: none; padding: 0; margin: 18px 0 22px; counter-reset: gstep; display: grid; gap: 12px; }
.tool .guide-steps > li { counter-increment: gstep; position: relative; margin: 0; padding: 14px 16px 14px 62px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.tool .guide-steps > li::before { content: counter(gstep, decimal-leading-zero); position: absolute; left: 16px; top: 15px; font: 800 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--taccent); }
.tool .guide-steps > li > b { display: block; margin-bottom: 4px; font: 600 16px/1.25 var(--font-display); color: var(--text); }
.tool .guide-steps > li p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.tool .guide-src { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.tool .guide-src b { color: var(--text-muted); }
.tool .guide-src ul { margin: 6px 0 0; padding-left: 18px; }
.tool .dist-h { font-size: 15px; margin: 18px 0 4px; color: var(--text); }
.tool .tool-ref h3.dist-h { margin-top: 22px; }
/* season countdown tiles */
.sc-strip-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px; border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 14%, var(--bg)), var(--bg) 70%); border: 1px solid var(--border);
  border-left: 4px solid var(--sc); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
.sc-tile:hover { text-decoration: none; border-color: var(--sc); transform: translateY(-2px); }
.sc-tile-name { font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sc); }
.sc-tile-now { font-size: 12.5px; color: var(--text-muted); }
.sc-tile-count { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sc-tile-count .sc-n { font: 800 34px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sc-tile-count .sc-u { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sc-tile-count .sc-hm { font: 600 12px/1 var(--mono); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.sc-tiles-lg .sc-tile { padding: 18px 18px 16px; }
.sc-tiles-lg .sc-tile-count .sc-n { font-size: 48px; }
.sc-tile-ev { font-size: 13px; color: var(--text); line-height: 1.4; }
.sc-status { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; font: 700 10.5px/1.4 var(--font); letter-spacing: .04em; text-transform: uppercase; font-style: normal; vertical-align: middle; }
.sc-projected { background: rgba(245,197,24,.14); color: #f5c518; border: 1px solid rgba(245,197,24,.35); }
.sc-tile-count.is-past .sc-n { color: var(--sc); }
.sc-card .rut-fine b { color: var(--text); }
/* season ladder sections */
.sc-ladder { margin-top: 44px; padding-top: 8px; }
.sc-ladder-head { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.sc-ladder-art { aspect-ratio: 16 / 10; border-radius: 14px; background-size: cover; background-position: center; border: 1px solid var(--border); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 40%, transparent); }
.sc-ladder-title h2 { margin: 0 0 6px; font-size: 26px; }
.sc-ladder-title .eyebrow { margin-bottom: 4px; }
.sc-ladder-title p { margin: 0; }
.sc-now { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.sc-now-row { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--text-muted); }
.sc-now-row > b { font-size: 16px; color: var(--text); }
.sc-now-next { margin-left: auto; color: var(--text); }
.sc-now-next b { color: var(--sc); font-variant-numeric: tabular-nums; }
.sc-bar { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin-top: 12px; }
.sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 60%, #fff), var(--sc)); border-radius: 999px; }
.sc-bar-lab { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.sc-h3 { font-size: 17px; margin: 18px 0 8px; }
.sc-table tr.is-now td { background: color-mix(in srgb, var(--sc) 8%, transparent); }
.sc-table td, .sc-table th { vertical-align: top; }
.sc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sc-src { margin-top: 14px; }
/* percentile */
.pct-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: stretch; }
.pct-result { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.pct-charts { margin-top: 14px; }
.pct-charts .distchart { margin: 10px 0 0; }
.pct-result .rut-days { font-size: 40px; }
/* FACEIT Elo */
.fe-grid .rut-field select.rut-input { appearance: auto; }
.fe-bar { position: relative; height: 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin: 12px 0 4px; }
.fe-bar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s; }
.fe-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10.5px/1 var(--font); color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.fe-planner { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.fe-planner h3 { margin: 0 0 10px; font-size: 15px; }
.fe-planner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fe-planner-grid label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.fe-planner-grid output { float: right; color: var(--text); font-variant-numeric: tabular-nums; }
.fe-planner-grid input[type=range] { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.fe-planner-out { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); }
/* League of Legends tools (Batch 93) — rank selects, Riot emblem chips, distribution chart */
.lru-rank { display: grid; grid-template-columns: 1fr 72px; gap: 8px; }
.lru-rank .rut-input { appearance: auto; }
.lru-rank .lru-lp { grid-column: 1 / -1; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.lru-planner { margin-top: 16px; }
.lru-planner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lru-stats { margin-top: 14px; }
.lru-result { margin-top: 14px; }
.rut-tierbadge img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.lwr-grid { grid-template-columns: 1fr 1fr 1.4fr; }
.lol-distchart .distbar-emblem { width: 30px; height: 30px; object-fit: contain; margin: 4px auto 0; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.lpc-table tr.is-hi td { background: rgba(10,200,185,.09); }
.lpc-table tr.is-hi td:first-child { box-shadow: inset 3px 0 0 #0ac8b9; }
.tool-lol .rut-tab.is-on { background: linear-gradient(180deg, #2fe0d1, #0ac8b9); border-color: #0a8f84; color: #04221f; }
.tool-lol .rut-days { color: #2fe0d1; }
.tool-lol .fe-planner-grid input[type=range], .tool-lol .rut-range { accent-color: #0ac8b9; }
@media (max-width: 760px) {.lru-planner-grid { grid-template-columns: 1fr 1fr; }.lwr-grid { grid-template-columns: 1fr; }.lru-rank { grid-template-columns: 1fr 64px; }}
/* WARDOGS XP */
.xp-strip { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin: 18px 0 4px; padding: 0 2px; border-bottom: 1px solid var(--border); }
.xp-strip i { flex: 1 1 0; display: block; background: color-mix(in srgb, var(--text-faint) 45%, transparent); border-radius: 2px 2px 0 0; transition: background .15s; }
.xp-strip i.is-on { background: linear-gradient(180deg, #cdeb7a, #6daf2a); }
.xp-strip-lab { margin: 0 0 6px; }
.xp-pace { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.xp-pace h3 { margin: 0 0 10px; font-size: 15px; }
.xp-pace-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.xp-pace-opt { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; background: var(--panel); }
.xp-pace-opt:has(input:checked) { border-color: var(--taccent); box-shadow: 0 0 0 1px var(--taccent) inset; }
.xp-pace-opt input[type=radio] { grid-row: 1 / span 3; margin-top: 3px; accent-color: var(--taccent); }
.xp-pace-opt b { font-size: 14px; color: var(--text); }
.xp-pace-opt span { font-size: 13px; color: var(--text); font-weight: 600; }
.xp-pace-opt span .rut-input { display: inline-block; width: 110px; padding: 4px 8px; font-size: 13px; margin-right: 4px; }
.xp-pace-opt em { font-size: 11.5px; color: var(--text-faint); font-style: normal; line-height: 1.4; }
.xp-hours { display: block; margin-top: 12px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.xp-hours output { float: right; color: var(--text); }
.xp-hours input[type=range] { width: 100%; accent-color: var(--taccent); margin-top: 6px; }
.xp-table tr.is-anchor td { font-weight: 600; }
/* WARDOGS loadout */
.lo-inputs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.lo-in { display: grid; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.lo-in .rut-input { width: 150px; text-transform: none; letter-spacing: 0; }
.lo-nr { align-self: center; font-size: 12.5px; color: var(--text-faint); padding: 6px 10px; border-radius: 999px; border: 1px dashed var(--border); }
.lo-nr.is-on { color: #cdeb7a; border-color: rgba(184,227,90,.5); background: rgba(184,227,90,.08); }
.lo-unlocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lo-unlock label { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.lo-unlock input { grid-row: 1 / span 2; accent-color: var(--taccent); }
.lo-unlock.is-on label { border-color: var(--taccent); }
.lo-unlock.is-locked label { opacity: .72; }
.lo-u-name { font-weight: 600; color: var(--text); font-size: 14px; }
.lo-u-acct { font-size: 10.5px; font-style: normal; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.lo-u-gate { grid-column: 2; font-size: 12px; color: var(--text-faint); }
.lo-u-price { grid-column: 3; grid-row: 1 / span 2; font: 700 14px var(--mono); color: var(--accent-hot); font-variant-numeric: tabular-nums; text-align: right; }
.lo-u-price s { display: block; font-size: 11px; color: var(--text-faint); font-weight: 500; }
.lo-card2 { margin-top: 18px; }
.lo-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lo-k { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 13px; color: var(--text); }
.lo-k input { accent-color: var(--taccent); }
.lo-k b { font: 700 13px var(--mono); color: var(--accent-hot); }
.lo-k.is-on { border-color: var(--taccent); }
.lo-custom { margin-top: 12px; }
.lo-table td:nth-child(4) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* WARDOGS gold */
.gx-grid .rut-field .rut-range { margin-top: 9px; }
.gx-rate-note { font-size: 12px; color: var(--text-faint); font-weight: 500; line-height: 1.45; display: block; }
.gx-result .rut-result-main { gap: 14px; align-items: center; }
.gx-result .wd-badge { margin-right: 4px; }
.gx-target { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.gx-wipe { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); border-left: 4px solid var(--sc); background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 12%, var(--bg)), var(--bg) 70%); }
.gx-wipe .sc-tile-count { margin: 0; flex: none; }
.gx-wipe .sc-tile-count .sc-n { font-size: 36px; }
.gx-wipe-tx { display: grid; gap: 3px; font-size: 13px; color: var(--text-muted); }
.gx-wipe-tx b { color: var(--text); font-size: 14px; }
@media (max-width: 860px) {.sc-tiles { grid-template-columns: 1fr; }.tool .fe-stats, .tool .lo-stats, .tool .xp-stats, .tool .gx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pct-grid { grid-template-columns: 1fr; }.sc-ladder-head { grid-template-columns: 1fr; }.sc-ladder-art { max-width: 320px; }.lo-unlocks, .xp-pace-opts { grid-template-columns: 1fr; }.lo-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }.fe-planner-grid { grid-template-columns: 1fr; }.tool .guide-compare { grid-template-columns: 1fr; }.sc-now-next { margin-left: 0; }}
@media (max-width: 520px) {.lo-kit { grid-template-columns: 1fr; }.sc-tiles-lg .sc-tile-count .sc-n { font-size: 40px; }}
/* season phases: today / live / here banner / site ribbon (Batch 76) */
.sc-today { background: rgba(184,227,90,.16); color: #cdeb7a; border: 1px solid rgba(184,227,90,.45); }
.sc-new { background: rgba(70,192,122,.16); color: #6fdc9a; border: 1px solid rgba(70,192,122,.4); }
.sc-tile-sub { font-size: 12px; color: var(--text-faint); line-height: 1.4; }
.sc-tile.sc-ph-today, .sc-tile.sc-ph-new { border-color: var(--sc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 45%, transparent), 0 10px 30px rgba(0,0,0,.35); }
.sc-tile.sc-ph-today .sc-n, .sc-tile.sc-ph-new .sc-n, .sc-tile-count.is-today .sc-n, .sc-tile-count.is-live .sc-n { color: var(--sc); letter-spacing: .02em; }
.sc-tile.sc-ph-new .sc-tile-count .sc-u, .sc-tile-count.is-live .sc-u { color: var(--text); }
.sc-here { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 18%, var(--bg)), var(--bg) 70%); border: 1px solid color-mix(in srgb, var(--sc) 55%, var(--border)); }
.sc-here-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--sc); animation: sc-pulse 1.8s ease-out infinite; }
.sc-here-tx { display: grid; gap: 3px; min-width: 0; }
.sc-here-tx b { font-size: 16px; color: var(--text); }
.sc-here-tx span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.sc-here-cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {.sc-here { grid-template-columns: auto 1fr; }.sc-here-cta { grid-column: 1 / -1; justify-content: flex-start; }}
.guide-prose .sale-callout { margin: 26px 0; }
/* guide CTA cards: live from-price (Batch 83) */
.svc-from { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); }
.svc-from small { font: 600 12px/1 var(--font); color: var(--text-faint); }
.svc-from .sp-was { font-family: var(--font); font-size: 12px; }
.svc-head .sale-off { flex: none; margin-top: 2px; }
.svc-banner.gf-banner .svc-banner-inner { padding-bottom: 30px; }
.gf-tools { display: grid; gap: 12px; margin-top: 14px; }
.gf-search { position: relative; display: flex; align-items: center; gap: 8px; }
.gf-search-ico { position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-50%); display: flex;
  color: var(--text-faint); pointer-events: none; }
.gf-search input { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 16px 0 44px; border-radius: 13px;
  border: 1px solid var(--border-strong); background: rgba(9,10,17,.78); color: var(--text);
  font: 500 15px var(--font); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .15s ease, box-shadow .15s ease; }
.gf-search input { text-overflow: ellipsis; }
.gf-search input::placeholder { color: var(--text-faint); text-overflow: ellipsis; }
.gf-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.22); }
.gf-search:focus-within .gf-search-ico { color: var(--accent); }
.gf-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px;
  font: 600 13px var(--font); color: var(--text-muted); }
.gf-toolslink { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.gf-toolslink:hover { color: var(--text); text-decoration: none; }
.guide-card.has-thumb { padding: 0; }
.guide-card.has-thumb::before { display: none; }
.guide-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0f18;
  border-bottom: 2px solid var(--gaccent, var(--accent)); }
.guide-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease; }
.guide-card:hover .guide-thumb img { transform: scale(1.045); }
.guide-thumb-topic, .guide-thumb-read { position: absolute; bottom: 9px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 7px; background: rgba(8,9,15,.8); color: #e8eaf1;
  font: 700 11px/1.1 var(--font); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.guide-thumb-topic { left: 9px; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.guide-thumb-read { right: 9px; color: #c3c8d4; font-weight: 600; }
.guide-card-body { display: flex; flex-direction: column; flex: 1; padding: 15px 18px 17px; }
.guide-card-body .guide-tag { margin-bottom: 8px; }
.gf-tools-sec .tool-tile[hidden] { display: none !important; }
@media (max-width: 760px) {.gf-search input { height: 46px; font-size: 16px; }.gf-toolslink { display: none; }}
@media (max-width: 620px) {.guide-card.has-thumb { flex-direction: row; min-height: 118px; }.guide-thumb { width: 112px; flex: none; aspect-ratio: auto; border-bottom: 0;
    border-right: 2px solid var(--gaccent, var(--accent)); }.guide-thumb-topic { display: none; }.guide-thumb-read { left: 6px; right: auto; bottom: 6px; padding: 3px 6px; font-size: 10.5px; }.guide-card-body { padding: 12px 14px 13px; min-width: 0; }.guide-card-body .guide-tag { margin-bottom: 5px; font-size: 10.5px; }.guide-card.has-thumb h3 { font-size: 15.5px; margin-bottom: 5px; }.guide-card.has-thumb p { font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }.guide-card.has-thumb .guide-readmore { display: none; }}
@media (prefers-reduced-motion: reduce) {.guide-thumb img { transition: none; }.guide-card:hover .guide-thumb img { transform: none; }}