/* CBET Planner — in-dashboard guides (/guides/*). Self-contained (no Tailwind). */
:root {
    --navy: #001529;
    --brand-1: #0d1f42;
    --brand-2: #1e3a7a;
    --gold: #ffb703;
    --gold-ink: #b45309;
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --line: #e5e9f0;
    --line-strong: #d3dae5;
    --strong: #0b1b2e;
    --body: #334155;
    --muted: #64748b;
    --sky: #0284c7;
    --sky-soft: #e0f2fe;
    --green: #059669;
    --green-soft: #ecfdf5;
    --red: #dc2626;
    --red-soft: #fef2f2;
    --amber-soft: #fffbeb;
    --shadow: 0 1px 2px rgba(11, 27, 46, .05), 0 10px 26px -14px rgba(11, 27, 46, .16);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--body); font: 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--strong); letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
a { color: var(--sky); }
strong { color: var(--strong); }
code { font-size: .88em; padding: .1em .4em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.g-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .g-wrap { padding: 0 24px; } }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Guide tabs ---------- */
.g-tabs { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.g-tabs-in { display: flex; align-items: center; gap: .4rem; overflow-x: auto; padding: .6rem 50px .45rem 16px; width: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.g-tabs-in::-webkit-scrollbar { height: 5px; }
.g-tabs.fade-left .g-tabs-in { padding-left: 50px; }
.g-tabs-in::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.g-tabs-in::-webkit-scrollbar-track { background: transparent; }
/* Edge fades + arrow buttons (shown by JS only when the row overflows that way) */
.g-tabs::before, .g-tabs::after { content: ''; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s ease; }
.g-tabs::before { left: 0; background: linear-gradient(90deg, var(--bg) 35%, transparent); }
.g-tabs::after { right: 0; background: linear-gradient(270deg, var(--bg) 35%, transparent); }
.g-tabs.fade-left::before, .g-tabs.fade-right::after { opacity: 1; }
.g-tabs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--strong); display: grid; place-items: center; cursor: pointer; font-size: 13px; box-shadow: 0 6px 16px -8px rgba(11, 27, 46, .45); transition: background-color .15s ease, color .15s ease; }
.g-tabs-arrow[hidden] { display: none; }
.g-tabs-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.g-tabs-arrow.prev { left: 8px; }
.g-tabs-arrow.next { right: 8px; }
.g-tabs-label { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 .25rem 0 .1rem; }
.g-tabs-sep { flex-shrink: 0; width: 1px; height: 22px; background: var(--line-strong); margin: 0 .35rem; }
.g-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--body); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.g-tab i { font-size: 12px; color: var(--muted); }
.g-tab:hover { border-color: var(--gold); }
.g-tab[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.g-tab[aria-current="page"] i { color: var(--gold); }

/* ---------- Hero ---------- */
.g-hero { position: relative; overflow: hidden; margin-top: 1.25rem; border-radius: 22px; padding: 1.75rem 1.5rem 1.6rem; color: #cbd5e1;
    background: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(125deg, #071430 0%, var(--brand-2) 70%, #2a4ea6 100%);
    box-shadow: 0 24px 50px -28px rgba(0, 21, 41, .8); }
@media (min-width: 640px) { .g-hero { padding: 2.25rem 2.25rem 2rem; } }
.g-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #ffb703, #f59e0b 50%, #38bdf8); }
.g-hero-glow { position: absolute; width: 380px; height: 380px; right: -120px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 183, 3, .35), rgba(255, 183, 3, 0) 65%); pointer-events: none; }
.g-hero-mark { position: absolute; right: 22px; bottom: -26px; font-size: 150px; color: rgba(255, 255, 255, .06); transform: rotate(-10deg); pointer-events: none; }
.g-hero-top { position: relative; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.g-hero-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; color: var(--navy); background: linear-gradient(135deg, #ffd166, #ffb703 55%, #f59e0b); box-shadow: 0 10px 22px -10px rgba(245, 158, 11, .9); flex-shrink: 0; }
.g-eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #ffd166; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.g-hero h1 { position: relative; color: #fff; font-size: clamp(1.6rem, 4.6vw, 2.35rem); font-weight: 800; margin-top: 1rem; }
.g-hero-sub { position: relative; margin: .6rem 0 0; font-size: clamp(1rem, 2.2vw, 1.1rem); color: #d6deea; max-width: 60ch; }
.g-chips { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.g-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #e2e8f0; font-size: 13px; font-weight: 600; }
.g-chip i { color: #ffc94d; }
.g-chip-gold { background: #ffb703; color: var(--navy); }
.g-chip-gold i { color: var(--navy); }

/* ---------- At a glance ---------- */
.g-glance { display: grid; gap: .75rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .g-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .g-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-glance-item { padding: 1rem 1.05rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-top: 4px solid var(--c, var(--sky)); }
.g-glance-item:nth-child(1) { --c: #0284c7; } .g-glance-item:nth-child(2) { --c: #7c3aed; } .g-glance-item:nth-child(3) { --c: #059669; } .g-glance-item:nth-child(4) { --c: #f59e0b; }
.g-glance-label { display: flex; align-items: center; gap: .45rem; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.g-glance-value { margin-top: .35rem; font-size: 14.5px; line-height: 1.5; color: var(--strong); font-weight: 600; }

/* ---------- Sections ---------- */
.g-section { margin-top: 1.25rem; padding: 1.4rem 1.25rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 640px) { .g-section { padding: 1.75rem 1.75rem; } }
.g-section > h2 { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.2rem, 3vw, 1.4rem); font-weight: 800; }
.g-h-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; background: var(--hc-soft, var(--sky-soft)); color: var(--hc, var(--sky)); }
.g-section > .g-lead { margin: .55rem 0 0; color: var(--muted); }
.g-section > * + * { margin-top: 1rem; }
.g-section p { margin: 0; }
.g-section p + p { margin-top: .75rem; }
.g-section ul, .g-section ol:not(.g-steps) { margin: 0; padding-left: 1.2rem; }
.g-section li { margin: .3rem 0; }
.g-section li::marker { color: var(--gold-ink); font-weight: 700; }

/* Upload / item cards */
.g-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-card { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.g-card-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); color: var(--sky); box-shadow: var(--shadow); font-size: 16px; }
.g-card h3 { font-size: 15.5px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.g-card p { margin-top: .25rem !important; font-size: 14.5px; color: var(--body); }
.g-tag { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font: 700 11px 'Inter', sans-serif; letter-spacing: .02em; }
.g-tag.req { background: var(--red-soft); color: var(--red); }
.g-tag.opt { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.g-tag.def { background: var(--green-soft); color: var(--green); }
.g-tag.price { background: #fff3c4; color: #92400e; }

/* Options */
.g-options { display: grid; gap: .75rem; }
.g-option { padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid var(--sky); background: var(--surface); }
.g-option h3 { font-size: 15.5px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.g-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.g-choice { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--strong); }
.g-choice.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.g-choice.on::before { content: '\2713'; color: var(--gold); font-weight: 800; }
.g-option p { margin-top: .55rem !important; font-size: 14.5px; }

/* Field list */
.g-fields { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-field { padding: .7rem .85rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.g-field b { display: block; color: var(--strong); font-size: 14px; }
.g-field span { color: var(--muted); font-size: 13.5px; }

/* Steps timeline */
.g-steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: gs; }
.g-steps::before { content: ''; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--gold), var(--line-strong)); border-radius: 2px; }
.g-steps > li { position: relative; counter-increment: gs; padding: 0 0 1.15rem 3.25rem; margin: 0; }
.g-steps > li:last-child { padding-bottom: 0; }
.g-steps > li::before { content: counter(gs); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 15px 'Plus Jakarta Sans', sans-serif; color: var(--navy); background: linear-gradient(135deg, #ffd166, #ffb703 55%, #f59e0b); box-shadow: 0 0 0 4px var(--surface), 0 6px 14px -6px rgba(245, 158, 11, .9); }
.g-steps h3 { font-size: 15.5px; font-weight: 800; padding-top: .45rem; }
.g-steps p { margin-top: .25rem !important; font-size: 14.5px; }

/* Callouts */
.g-note { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; border: 1px solid; font-size: 14.5px; }
.g-note > i { margin-top: .2rem; font-size: 15px; }
.g-note.info { background: var(--sky-soft); border-color: #bae6fd; color: #075985; }
.g-note.tip { background: var(--amber-soft); border-color: #fde68a; color: #92400e; }
.g-note.warn { background: var(--red-soft); border-color: #fecaca; color: #991b1b; }
.g-note.ok { background: var(--green-soft); border-color: #a7f3d0; color: #065f46; }
.g-note strong { color: inherit; }

/* Issues */
.g-issues { display: grid; gap: .65rem; }
.g-issue { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.g-issue-msg { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; background: var(--red-soft); color: #991b1b; font-weight: 600; font-size: 14px; }
.g-issue-fix { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; background: var(--surface); font-size: 14px; }
.g-issue-fix i { color: var(--green); margin-top: .2rem; }
.g-issue-msg i { margin-top: .2rem; }

/* Payment */
.g-pay-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .g-pay-grid { grid-template-columns: 1.15fr 1fr; } }
.g-recover { padding: 1rem 1.05rem; border-radius: 16px; background: linear-gradient(135deg, #0b1a3a, var(--brand-2)); color: #cbd5e1; font-size: 14px; }
.g-recover h3 { color: #fff; font-size: 15.5px; display: flex; align-items: center; gap: .5rem; }
.g-recover h3 i { color: var(--gold); }
.g-recover ul { margin: .6rem 0 0 !important; padding-left: 1.1rem !important; }
.g-recover li { margin: .35rem 0; }
.g-recover li::marker { color: var(--gold) !important; }
.g-recover strong { color: #fff; }

/* Tables */
.g-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.g-table th, .g-table td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.g-table th { background: linear-gradient(120deg, var(--brand-1), var(--brand-2)); color: #fff; font-weight: 700; }
.g-table tr:nth-child(even) td { background: var(--surface-2); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table td:first-child { font-weight: 700; color: var(--strong); }

/* Stage cards (BOPPPS) and building blocks */
.g-stages { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-stage { display: flex; gap: .85rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.g-stage-letter { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font: 800 20px 'Plus Jakarta Sans', sans-serif; color: #fff; background: var(--sc, var(--sky)); }
.g-stage:nth-child(1) { --sc: #0284c7; } .g-stage:nth-child(2) { --sc: #7c3aed; } .g-stage:nth-child(3) { --sc: #0d9488; }
.g-stage:nth-child(4) { --sc: #f59e0b; } .g-stage:nth-child(5) { --sc: #db2777; } .g-stage:nth-child(6) { --sc: #16a34a; }
.g-stage h3 { font-size: 15.5px; font-weight: 800; }
.g-stage p { margin-top: .2rem !important; font-size: 14px; }
.g-stage small { display: inline-block; margin-top: .35rem; font-size: 12px; font-weight: 700; color: var(--sc); }

/* Blog link + CTA + next */
.g-read { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: 16px; border: 1px dashed var(--line-strong); background: var(--surface); text-decoration: none; color: var(--body); margin-top: 1.25rem; transition: border-color .15s ease; }
.g-read:hover { border-color: var(--gold); }
.g-read-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #fff3c4; color: var(--gold-ink); }
.g-read b { display: block; color: var(--strong); font-family: 'Plus Jakarta Sans', sans-serif; }
.g-read span { font-size: 14px; color: var(--muted); }
.g-read .fa-arrow-right { margin-left: auto; color: var(--gold-ink); }
.g-cta { position: relative; overflow: hidden; margin-top: 1.25rem; padding: 1.5rem; border-radius: 20px; color: #cbd5e1; background: linear-gradient(125deg, #071430, var(--brand-2)); display: grid; gap: 1rem; }
@media (min-width: 640px) { .g-cta { grid-template-columns: 1fr auto; align-items: center; padding: 1.6rem 1.75rem; } }
.g-cta h2 { color: #fff; font-size: 1.2rem; }
.g-cta p { margin: .3rem 0 0; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.25rem; border-radius: 12px; border: 0; font: 700 15px 'Inter', sans-serif; cursor: pointer; text-decoration: none; background: var(--gold); color: var(--navy); transition: transform .15s ease, background-color .15s ease; }
.g-btn:hover { background: #ffc633; transform: translateY(-1px); }
.g-next { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 600px) { .g-next { grid-template-columns: 1fr 1fr; } }
.g-next a { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--strong); font: 700 15px 'Plus Jakarta Sans', sans-serif; box-shadow: var(--shadow); }
.g-next a:hover { border-color: var(--gold); }
.g-next small { font: 600 12.5px 'Inter', sans-serif; color: var(--muted); }
.g-next .nx { text-align: right; grid-column: -2; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .g-btn, .g-tab { transition: none; } }
@media print { .g-tabs, .g-cta, .g-next { display: none; } body { background: #fff; } }