@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --karoo-ink: #0a0b0d;
    --karoo-panel: #13151a;
    --karoo-line: #2a2d35;
    --karoo-muted: #a6a9b1;
    --karoo-paper: #f1f2ed;
    --karoo-acid: #c7ff2e;
    --karoo-purple: #a78bfa;
}

.karoo-help-page {
    background: var(--karoo-ink);
    color: var(--karoo-paper);
    font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
    min-width: 0;
}

.karoo-help-page * { box-sizing: border-box; }
.karoo-help-page :where(a) { color: inherit; }
.karoo-help-page p { font-size: inherit !important; }
.karoo-help-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 80px; }

.karoo-help-header { align-items: center; border-bottom: 1px solid var(--karoo-line); display: flex; justify-content: space-between; padding-bottom: 20px; }
.karoo-help-brand { align-items: baseline; display: inline-flex; font-family: 'DM Mono', monospace; font-size: 0.91rem; font-weight: 500; letter-spacing: 0.13em; text-decoration: none; }
.karoo-help-brand a { text-decoration: none; }
.karoo-help-brand b { color: var(--karoo-acid); font-weight: 400; margin: 0 0.25em; }
.karoo-help-brand em { color: var(--karoo-purple); font-style: normal; }
.karoo-help-header-link, .karoo-help-back { color: var(--karoo-muted); font-family: 'DM Mono', monospace; font-size: 0.73rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.karoo-help-header-link:hover, .karoo-help-header-link:focus-visible, .karoo-help-back:hover, .karoo-help-back:focus-visible { color: var(--karoo-acid); }

.karoo-help-intro { max-width: 780px; padding: 86px 0 48px; }
.karoo-help-eyebrow, .karoo-help-card-kicker { color: var(--karoo-acid); font-family: 'DM Mono', monospace; font-size: 0.72rem !important; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; }
.karoo-help-intro h1, .karoo-help-article h1 { font-size: clamp(2.9rem, 7vw, 6.4rem); font-weight: 700; letter-spacing: -0.075em; line-height: 0.9; margin: 16px 0 24px; max-width: 900px; }
.karoo-help-lede { color: #c9cbd1; font-size: clamp(1.08rem, 2vw, 1.38rem) !important; line-height: 1.5; max-width: 710px; }
.karoo-help-search { margin-top: 42px; max-width: 610px; position: relative; }
.karoo-help-search label { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.karoo-help-search input { background: #191c22; border: 1px solid var(--karoo-line); border-radius: 0; color: var(--karoo-paper); font: 500 1rem 'Space Grotesk', sans-serif; margin-top: 10px; min-height: 56px; padding: 0 18px; width: 100%; }
.karoo-help-search input::placeholder { color: #767a84; }
.karoo-help-search input:focus { border-color: var(--karoo-acid); box-shadow: 4px 4px 0 var(--karoo-acid); outline: 0; }

.karoo-help-foundation { align-items:center; background:linear-gradient(120deg,rgba(199,255,46,.06),transparent 48%) var(--karoo-panel); border:1px solid var(--karoo-line); border-left:3px solid var(--karoo-acid); box-shadow:0 20px 45px rgba(0,0,0,.22); color:var(--karoo-paper); display:grid; gap:clamp(30px,5vw,70px); grid-template-columns:minmax(0,1fr) minmax(350px,.8fr); margin:6px 0 88px; overflow:hidden; padding:clamp(30px,4vw,46px); }
.karoo-help-foundation__copy { max-width:580px; }
.karoo-help-foundation .karoo-help-card-kicker { color:var(--karoo-acid); }
.karoo-help-foundation h2 { font-size:clamp(1.9rem,3.4vw,3.15rem); letter-spacing:-.055em; line-height:.98; margin:18px 0; }
.karoo-help-foundation__copy > p:not(.karoo-help-card-kicker) { color:#c9cbd1; font-size:1rem !important; line-height:1.5; max-width:430px; }
.karoo-help-foundation .karoo-help-action { margin-top:27px; }
.karoo-help-foundation__products { align-items:end; display:flex; gap:clamp(18px,3vw,38px); justify-content:center; min-width:0; }
.karoo-help-foundation__product { margin:0; text-align:center; }
.karoo-help-foundation__product img { display:block; filter:drop-shadow(0 20px 20px rgba(0,0,0,.34)); height:250px; object-fit:contain; width:auto; }
.karoo-help-foundation__product figcaption { color:var(--karoo-muted); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.08em; margin-top:12px; text-transform:uppercase; }
.karoo-help-action { background: #111407; color: var(--karoo-acid); display: inline-flex; font-family: 'DM Mono', monospace; font-size: 0.75rem; gap: 12px; letter-spacing: 0.04em; padding: 13px 15px; text-decoration: none; text-transform: uppercase; }
.karoo-help-foundation .karoo-help-action { background: var(--karoo-acid); color: var(--karoo-ink); }
.karoo-help-action:hover, .karoo-help-action:focus-visible { background: var(--karoo-purple); color: #110e19; outline: 0; }

.karoo-help-category { border-top: 1px solid var(--karoo-line); padding: 21px 0 50px; }
.karoo-help-category > h2, .karoo-help-related > h2, .karoo-help-support h2 { font-size: 1.25rem; letter-spacing: -0.035em; line-height: 1.05; }
.karoo-help-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 25px; }
.karoo-help-article-card { border: 1px solid var(--karoo-line); display: flex; flex-direction: column; min-height: 244px; padding: 22px; }
.karoo-help-article-card .karoo-help-card-kicker { color: var(--karoo-purple); }
.karoo-help-article-card h3 { font-size: 1.43rem; letter-spacing: -0.045em; line-height: 1.06; margin: 22px 0 14px; }
.karoo-help-article-card h3 a { text-decoration: none; }
.karoo-help-article-card h3 a:hover, .karoo-help-article-card h3 a:focus-visible { color: var(--karoo-acid); outline: 0; }
.karoo-help-article-card > p { color: var(--karoo-muted); font-size: 0.95rem !important; line-height: 1.45; }
.karoo-help-text-link { color: var(--karoo-acid); font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; margin-top: auto; padding-top: 26px; text-decoration: none; text-transform: uppercase; }
.karoo-help-text-link:hover, .karoo-help-text-link:focus-visible { color: var(--karoo-purple); outline: 0; }
.karoo-help-no-results { color: var(--karoo-muted); padding: 14px 0 45px; }

.karoo-help-support { align-items: end; background: #201a33; border-top: 2px solid var(--karoo-purple); display: flex; gap: 28px; justify-content: space-between; margin-top: 25px; padding: 30px 34px; }
.karoo-help-support .karoo-help-card-kicker { color: var(--karoo-purple); margin-bottom: 12px; }
.karoo-help-support h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.karoo-help-support p:not(.karoo-help-card-kicker) { color: #d2c9e7; font-size: 1rem !important; line-height: 1.5; margin-top: 10px; max-width: 600px; }
.karoo-help-action-secondary { background: var(--karoo-purple); color: #171222; flex: 0 0 auto; }

.karoo-help-breadcrumb { color: var(--karoo-muted); display: flex; font-family: 'DM Mono', monospace; font-size: 0.72rem; gap: 9px; letter-spacing: 0.04em; padding: 45px 0 35px; text-transform: uppercase; }
.karoo-help-breadcrumb a { color: var(--karoo-paper); text-decoration: none; }
.karoo-help-breadcrumb a:hover, .karoo-help-breadcrumb a:focus-visible { color: var(--karoo-acid); outline: 0; }
.karoo-help-article header { border-bottom: 1px solid var(--karoo-line); padding-bottom: 50px; }
.karoo-help-article-body { margin: 0 auto; max-width: 720px; padding: 56px 0 34px; }
.karoo-help-article-body section + section { border-top: 1px solid var(--karoo-line); margin-top: 46px; padding-top: 45px; }
.karoo-help-article-body h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -0.05em; line-height: 1.06; margin-bottom: 20px; }
.karoo-help-article-body p { color: #d3d5db; font-size: 1.08rem !important; line-height: 1.65; margin-bottom: 18px; }
.karoo-help-article-body ul { color: #d3d5db; list-style: square; margin: 0 0 18px 22px; }
.karoo-help-article-body li { font-size: 1.05rem; line-height: 1.55; margin: 8px 0; padding-left: 5px; }
.karoo-help-screenshot { display: grid; justify-items: center; margin: 38px auto 0; max-width: 380px; padding: 10px 0 0; width: 100%; }
.karoo-help-screenshot img { display: block; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.32)); height: auto; max-height: min(66vh, 620px); max-width: 100%; object-fit: contain; width: auto; }
.karoo-help-screenshot figcaption { color: var(--karoo-muted); font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; line-height: 1.4; margin-top: 14px; max-width: 40rem; text-align: center; }
.karoo-help-screenshot--wide { max-width: 380px; }
.karoo-help-related { border-top: 1px solid var(--karoo-line); margin-top: 30px; padding: 25px 0 55px; }
.karoo-help-related .karoo-help-card-kicker { color: var(--karoo-purple); margin-bottom: 10px; }
.karoo-help-related-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 23px; }
.karoo-help-related-grid a { border: 1px solid var(--karoo-line); min-height: 138px; padding: 17px; position: relative; text-decoration: none; }
.karoo-help-related-grid a:hover, .karoo-help-related-grid a:focus-visible { border-color: var(--karoo-acid); outline: 0; }
.karoo-help-related-grid span { color: var(--karoo-purple); display: block; font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; }
.karoo-help-related-grid strong { display: block; font-size: 1.1rem; letter-spacing: -0.035em; line-height: 1.1; margin-top: 16px; padding-right: 20px; }
.karoo-help-related-grid i { bottom: 15px; color: var(--karoo-acid); font-style: normal; position: absolute; right: 16px; }
.karoo-help-back { display: inline-block; margin-top: 40px; }

@media (max-width: 760px) {
    .karoo-help-shell { width: min(100% - 32px, 1180px); padding-bottom: 48px; }
    .karoo-help-intro { padding: 58px 0 34px; }
    .karoo-help-intro h1, .karoo-help-article h1 { font-size: clamp(2.75rem, 15vw, 4.4rem); }
    .karoo-help-foundation { display:block; margin-bottom:60px; padding:24px; }
    .karoo-help-foundation h2 { margin: 20px 0; }
    .karoo-help-foundation__copy > p:not(.karoo-help-card-kicker) { margin-bottom:26px; }
    .karoo-help-foundation__products { gap:26px; margin-top:38px; }
    .karoo-help-foundation__product img { height:220px; }
    .karoo-help-grid, .karoo-help-related-grid { grid-template-columns: 1fr; }
    .karoo-help-article-card { min-height: 0; }
    .karoo-help-support { align-items: start; display: block; padding: 25px; }
    .karoo-help-support .karoo-help-action { margin-top: 25px; }
    .karoo-help-breadcrumb { padding: 30px 0 28px; }
    .karoo-help-article header { padding-bottom: 35px; }
    .karoo-help-article-body { padding-top: 40px; }
    .karoo-help-screenshot { margin-top: 30px; max-width: min(100%, 340px); }
}

@media (max-width: 420px) {
    .karoo-help-header-link { font-size: 0.62rem; }
    .karoo-help-brand { font-size: 0.8rem; }
    .karoo-help-foundation__products { gap: 14px; }
    .karoo-help-foundation__product { flex: 1 1 0; min-width: 0; }
    .karoo-help-foundation__product img { width: 100%; height: auto; max-height: 220px; object-fit: contain; }
}

/* Brand lockup — minimal reusable product wordmark. 700/500, same size/baseline/color, DM Sans, no italic/extra space. Scoped to .karoo-help-page. */
.karoo-help-page .brand-product { color: inherit; display: inline; font-family: 'DM Sans', sans-serif; font-size: inherit; font-style: normal; font-weight: inherit; letter-spacing: -0.02em; line-height: inherit; }
.karoo-help-page .brand-product__root { font-weight: 700; }
.karoo-help-page .brand-product__suffix { font-weight: 500; }