/* Shelfshoot guides — light prose theme on top of site-nav.css chrome (ITG-827) */
:root { --g-ink: #0f172a; --g-orange: #f97316; --g-orange-d: #ea580c; --g-paper: #fafaf9; --g-line: #e2e8f0; }
body.guide-body { margin: 0; background: var(--g-paper); color: var(--g-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }

.guide-wrap { max-width: 760px; margin: 0 auto; padding: 44px 24px 72px; }
.guide-wrap .g-back { display: inline-block; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--g-orange-d); text-decoration: none; }
.g-kicker { display: inline-block; font-size: 12px; font-weight: 760; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-orange-d); }
.guide-wrap h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; line-height: 1.1; margin: 10px 0 16px; }
.guide-lead { font-size: 19px; color: #475569; line-height: 1.6; margin: 0 0 8px; }
.guide-meta { font-size: 13px; color: #94a3b8; margin: 0 0 32px; }
.guide-wrap h2 { font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.guide-wrap h3 { font-size: 18px; margin: 28px 0 8px; }
.guide-wrap p, .guide-wrap li { font-size: 16.5px; line-height: 1.75; color: #1e293b; }
.guide-wrap ul, .guide-wrap ol { padding-left: 22px; }
.guide-wrap li { margin: 7px 0; }
.guide-wrap a { color: var(--g-orange-d); }
.guide-wrap strong { color: var(--g-ink); }

.guide-steps { counter-reset: gs; list-style: none; padding: 0; margin: 18px 0; }
.guide-steps > li { counter-increment: gs; position: relative; padding: 2px 0 18px 46px; }
.guide-steps > li::before { content: counter(gs); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff7ed; border: 1px solid #fed7aa; color: var(--g-orange-d); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.guide-cta { margin: 40px 0; padding: 28px; border-radius: 18px; background: radial-gradient(120% 140% at 90% -20%, rgba(249,115,22,.22), rgba(249,115,22,0) 50%), linear-gradient(180deg, #0b1628, #020617); }
.guide-cta h3 { color: #fff; margin: 0 0 8px; font-size: 21px; }
.guide-cta p { color: #cbd5e1; margin: 0 0 18px; }
.guide-cta .btn { display: inline-block; background: var(--g-orange); color: #fff; font-weight: 760; padding: 13px 24px; border-radius: 12px; text-decoration: none; box-shadow: 0 14px 30px rgba(249,115,22,.3); }
.guide-cta .btn:hover { background: var(--g-orange-d); }

.guide-faq { margin-top: 36px; }
.guide-faq details { border-top: 1px solid var(--g-line); padding: 15px 0; }
.guide-faq details:last-child { border-bottom: 1px solid var(--g-line); }
.guide-faq summary { cursor: pointer; font-weight: 680; font-size: 16px; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq p { margin: 10px 0 0; color: #475569; font-size: 15.5px; }

.guide-related { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--g-line); }
.guide-related h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin: 0 0 10px; }
.guide-related a { display: inline-block; padding: 5px 0; margin-right: 18px; font-weight: 600; }

/* Hub */
.guides-hero { max-width: 760px; margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
.guides-hero h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; margin: 10px 0 14px; }
.guides-hero p { font-size: 19px; color: #475569; margin: 0; line-height: 1.6; }
.guides-grid { max-width: 980px; margin: 0 auto; padding: 30px 24px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.guide-card { display: block; text-decoration: none; border: 1px solid var(--g-line); border-radius: 16px; padding: 24px; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,.08); border-color: #fed7aa; }
.guide-card h2 { font-size: 18px; color: var(--g-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.guide-card p { font-size: 14.5px; color: #64748b; margin: 0; line-height: 1.55; }
.guide-card .g-read { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--g-orange-d); }

/* ITG-840 — graphic card covers (category gradient + icon), keeps hub from feeling text-only */
.guides-hero { background: radial-gradient(120% 120% at 50% -10%, #fff7ed 0%, rgba(255,247,237,0) 55%); }
.guide-card { padding: 0; overflow: hidden; }
.guide-card::before {
  content: ""; display: block; height: 108px;
  background-color: #ea580c;
  background-image: var(--cov-icon), var(--cov-grad, linear-gradient(135deg, #fb923c, #ea580c));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 42px 42px, cover;
}
.guide-card > h2 { margin: 18px 22px 8px; }
.guide-card > p { margin: 0 22px; }
.guide-card > .g-read { display: inline-block; margin: 13px 22px 22px; }
[data-cat="optimise"]   { --cov-grad: linear-gradient(135deg, #fdba74, #ea580c); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3'/><path d='M12 7.5l1.6 2.9 2.9 1.6-2.9 1.6L12 16.5l-1.6-2.9L7.5 12l2.9-1.6z'/></svg>"); }
[data-cat="technique"]  { --cov-grad: linear-gradient(135deg, #5eead4, #0d9488); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><line x1='20' y1='4' x2='8.12' y2='15.88'/><line x1='14.47' y1='14.48' x2='20' y2='20'/><line x1='8.12' y1='8.12' x2='12' y2='12'/></svg>"); }
[data-cat="platform"]   { --cov-grad: linear-gradient(135deg, #818cf8, #4338ca); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>"); }
[data-cat="commercial"] { --cov-grad: linear-gradient(135deg, #fcd34d, #b45309); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>"); }
[data-cat="vertical"]   { --cov-grad: linear-gradient(135deg, #6ee7b7, #059669); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>"); }
[data-cat="reference"]  { --cov-grad: linear-gradient(135deg, #c4b5fd, #6d28d9); --cov-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2h6v3H9z'/><path d='M16 4h3v17H5V4h3'/><line x1='9' y1='11' x2='15' y2='11'/><line x1='9' y1='15' x2='13' y2='15'/></svg>"); }

/* ITG-841 — richer per-category theming on guide article pages */
[data-cat="optimise"]   { --cov-tint: #fff7ed; }
[data-cat="technique"]  { --cov-tint: #f0fdfa; }
[data-cat="platform"]   { --cov-tint: #eef2ff; }
[data-cat="commercial"] { --cov-tint: #fffbeb; }
[data-cat="vertical"]   { --cov-tint: #ecfdf5; }
[data-cat="reference"]  { --cov-tint: #f5f3ff; }

.guide-body[data-cat] { background-image: radial-gradient(115% 55% at 50% -6%, var(--cov-tint, #fff7ed), rgba(255,255,255,0) 60%); background-repeat: no-repeat; }
.guide-wrap .g-kicker { display: inline-flex; align-items: center; gap: 9px; }
.guide-body[data-cat] .g-kicker::before {
  content: ""; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background-color: #ea580c;
  background-image: var(--cov-icon), var(--cov-grad, linear-gradient(135deg,#fb923c,#ea580c));
  background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: 17px 17px, cover;
  box-shadow: 0 4px 12px rgba(15,23,42,.14);
}
.guide-related a { display: inline-block; border: 1px solid var(--g-line); border-radius: 999px; padding: 7px 14px; margin: 0 8px 9px 0; background: #fff; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.guide-related a:hover { border-color: #fdba74; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(249,115,22,.12); }