/* SKS Market Help - shared stylesheet. Brand tokens match ../style.css. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --teal: #12b886;
    --teal-dark: #0c8f8a;
    --teal-soft: #e3f7f0;
    --ink: #0b3d36;
    --text: #1f2d2b;
    --muted: #5f6f6c;
    --bg: #f5f7f6;
    --card: #ffffff;
    --line: #e2e9e7;
    --shadow-sm: 0 1px 2px rgba(16, 40, 36, 0.06), 0 1px 3px rgba(16, 40, 36, 0.05);
    --shadow: 0 10px 30px rgba(16, 40, 36, 0.08);
    --radius: 16px;
    --nav-w: 268px;
    --head-h: 60px;
    --accent: #12b886;
    --accent-2: #0b6e63;
    --accent-soft: #e3f7f0;
    --hero-1: #0b6e63;
    --hero-2: #12b886;
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

/* One accent per kind of business: hero, tabs, timeline and cards follow it. */
[data-cat="retail"] { --accent: #0284c7; --accent-2: #075985; --accent-soft: #e0f2fe; --hero-1: #075985; --hero-2: #0284c7; }
[data-cat="food"] { --accent: #ea580c; --accent-2: #9a3412; --accent-soft: #ffedd5; --hero-1: #9a3412; --hero-2: #ea580c; }
[data-cat="health"] { --accent: #e11d48; --accent-2: #9f1239; --accent-soft: #ffe4e6; --hero-1: #9f1239; --hero-2: #e11d48; }
[data-cat="education"] { --accent: #7c3aed; --accent-2: #5b21b6; --accent-soft: #ede9fe; --hero-1: #5b21b6; --hero-2: #7c3aed; }
[data-cat="services"] { --accent: #b45309; --accent-2: #78350f; --accent-soft: #fef3c7; --hero-1: #78350f; --hero-2: #b45309; }
[data-cat="trade"] { --accent: #2563eb; --accent-2: #1e3a8a; --accent-soft: #dbeafe; --hero-1: #1e3a8a; --hero-2: #2563eb; }
[data-cat="subscription"] { --accent: #0d9488; --accent-2: #115e59; --accent-soft: #ccfbf1; --hero-1: #115e59; --hero-2: #0d9488; }
[data-cat="general"] { --accent: #475569; --accent-2: #1e293b; --accent-soft: #e2e8f0; --hero-1: #1e293b; --hero-2: #475569; }

* { box-sizing: border-box; }

/* The hidden attribute wins over any display rule (filtered cards, closed dialog). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 64px); }

body {
    font-family: var(--font);
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-dark); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ===== Header ===== */
.help-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--head-h);
    background: rgba(11, 61, 54, 0.97);
    backdrop-filter: saturate(1.4) blur(8px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12);
    color: #e7f5f1;
}
.help-header .wrap {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.help-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
    white-space: nowrap;
}
.help-brand:hover { color: #fff; }
.help-brand img { height: 34px; width: auto; border-radius: 6px; }
.help-brand .tag {
    background: var(--teal);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.help-search {
    position: relative;
    flex: 1;
    max-width: 520px;
    margin-left: auto;
}
.help-search input {
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 2.3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 0.93rem;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
}
.help-search input::placeholder { color: rgba(255, 255, 255, 0.6); }
.help-search input:focus { background: #fff; color: var(--text); border-color: var(--teal); }
.help-search .icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    pointer-events: none;
    font-size: 0.9rem;
}
.help-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--card);
    color: var(--text);
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    max-height: 60vh;
    overflow: auto;
    display: none;
}
.help-results.open { display: block; }
.help-results a {
    display: block;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    font-weight: 500;
}
.help-results a:last-child { border-bottom: 0; }
.help-results a:hover, .help-results a.active { background: var(--teal-soft); }
.help-results .group { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.help-results .empty { padding: 0.8rem 0.9rem; color: var(--muted); }
.help-site-link { color: #e7f5f1; text-decoration: none; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.help-site-link:hover { color: #fff; }
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 10px;
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ===== Layout ===== */
.help-body {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem 1.2rem;
}

/* ===== Sidebar ===== */
.help-nav {
    position: sticky;
    top: calc(var(--head-h) + 1.25rem);
    align-self: start;
    max-height: calc(100vh - var(--head-h) - 2.5rem);
    overflow: auto;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem 0;
    scrollbar-width: thin;
}
.help-nav details { border-bottom: 1px solid var(--line); }
.help-nav details:last-child { border-bottom: 0; }
.help-nav summary {
    cursor: pointer;
    list-style: none;
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-nav summary::-webkit-details-marker { display: none; }
.help-nav summary::after { content: '\25B8'; color: var(--muted); transition: transform 0.15s; }
.help-nav details[open] summary::after { transform: rotate(90deg); }
.help-nav ul { list-style: none; margin: 0; padding: 0 0.5rem 0.5rem; }
.help-nav li a {
    display: block;
    padding: 0.32rem 0.7rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.89rem;
    border-radius: 8px;
}
.help-nav li a:hover { background: var(--bg); }
.help-nav li a.current {
    background: var(--teal-soft);
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--teal);
}
.help-nav li.sub a { padding-left: 1.6rem; font-size: 0.84rem; color: var(--muted); }

/* ===== Content ===== */
.help-main {
    min-width: 0;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem 2.2rem 2.4rem;
}
.help-crumbs { font-size: 0.84rem; color: var(--muted); margin: 0 0 1rem; }
.help-crumbs a { color: var(--muted); text-decoration: none; }
.help-crumbs a:hover { color: var(--ink); }
.help-crumbs span { margin: 0 0.35rem; opacity: 0.6; }

.help-main h1 {
    color: var(--ink);
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}
.help-main h2 {
    color: var(--ink);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin: 2.4rem 0 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.help-main h3 { color: var(--ink); font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.help-main p { margin: 0.5rem 0 0.9rem; }
.help-main ul, .help-main ol { padding-left: 1.4rem; }
.help-main li { margin: 0.25rem 0; }
.lead { font-size: 1.08rem; color: #3b4a48; }
.help-main code, .help-main kbd {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.88em;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.05rem 0.35rem;
}
.path {
    display: inline-block;
    background: var(--teal-soft);
    color: var(--ink);
    border-radius: 7px;
    padding: 0.05rem 0.5rem;
    font-weight: 600;
    font-size: 0.88em;
    white-space: nowrap;
}
.help-main table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.8rem 0 1.2rem;
    font-size: 0.92rem;
}
.help-main th, .help-main td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.help-main th { background: var(--bg); color: var(--ink); font-weight: 700; font-size: 0.85rem; }
.help-main tr:first-child th:first-child { border-top-left-radius: 10px; }
.help-main tr:first-child th:last-child { border-top-right-radius: 10px; }
.help-main tr:hover td { background: #fafcfb; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 0.8rem 0 1.2rem; }
.table-wrap table { margin: 0; }
.table-wrap tr:last-child td { border-bottom: 0; }

.callout {
    border: 1px solid #c5ebdd;
    border-left: 4px solid var(--teal);
    background: var(--teal-soft);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}
.callout.warn { border-color: #f8deb0; border-left-color: #f59e0b; background: #fff8eb; }
.callout.plan { border-color: #ddd0f5; border-left-color: #7c3aed; background: #f5f0fd; }
.callout strong:first-child { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.4rem 0 1rem; }
.chip {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Diagrams */
.diagram {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    margin: 0.8rem 0 1.4rem;
    overflow-x: auto;
}
.diagram pre.mermaid {
    margin: 0;
    font-family: inherit;
    display: flex;
    justify-content: center;
    min-height: 60px;
}
.diagram pre.mermaid:not([data-processed]) { color: transparent; }
.diagram figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; text-align: center; }
.diagram .no-mermaid { color: var(--muted); font-size: 0.9rem; }

/* Video walkthrough (help.js builds it from a page's `video` id) */
.video { margin: 1rem 0 1.4rem; max-width: 760px; }
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow);
}
.video-frame iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { padding: 0; cursor: pointer; background: #000; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.15s; }
.video-play:hover img, .video-play:focus-visible img { opacity: 1; }
.video-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 50px;
    border-radius: 14px;
    background: rgba(11, 61, 54, 0.9);
    color: #fff;
    font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
}
.video-play:hover .video-btn { background: var(--accent); }
.video figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.card.video-card { padding: 0; overflow: hidden; }
.card.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card.video-card h3 { padding: 0.6rem 0.9rem 0.7rem; margin: 0; }

/* Cards / grids */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.5rem;
}
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--teal); color: var(--text); }
.card .ico { font-size: 1.6rem; line-height: 1; margin-bottom: 0.45rem; }
.card h3 { margin: 0 0 0.25rem; font-size: 0.98rem; color: var(--ink); }
.card p { margin: 0; font-size: 0.85rem; color: var(--muted); }

.hero {
    background: linear-gradient(135deg, var(--ink), #0b6e63);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    margin: -0.4rem 0 1.5rem;
}
.hero h1 { color: #fff; margin-bottom: 0.4rem; }
.hero p { color: rgba(255, 255, 255, 0.88); max-width: 720px; }

/* Related + prev/next */
.help-related { margin-top: 2.5rem; }
.help-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
    font-size: 0.92rem;
}
.help-pager a {
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.help-pager a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.help-pager .lbl { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.help-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 1rem 2.5rem; }
.help-footer a { color: var(--muted); }


/* ===== Vertical page template =====
 * Every business page is written in the same customer-first order:
 * .glance (at a glance) -> .steps (set up) -> .flow (how the work runs)
 * -> .seats (who signs in), then the reference sections. help.js lifts it
 * into the business profile below; these blocks also style plain pages. */

/* On this page (built by help.js from the h2s) */
.toc {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.4rem;
    font-size: 0.9rem;
}
.toc .lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0.35rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.toc li { margin: 0.1rem 0; break-inside: avoid; }
.toc a { text-decoration: none; }

/* At a glance */
.glance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.2rem;
}
.glance > div {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.75rem 0.95rem;
}
.glance .k { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.glance .v { display: block; font-size: 0.92rem; color: var(--text); margin-top: 0.2rem; }

/* Numbered setup steps */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0.8rem 0 1.2rem; }
ol.steps > li {
    counter-increment: step;
    position: relative;
    padding: 0.15rem 0 1rem 2.6rem;
    margin: 0 0 0 0.95rem;
    border-left: 2px solid var(--line);
}
ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0.2rem; }
ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: -0.95rem;
    top: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--card);
}
ol.steps > li > strong:first-child { color: var(--ink); display: block; }

/* How the work flows: a numbered timeline, one card per stage */
.flow { position: relative; margin: 1rem 0 1.6rem; counter-reset: stage; display: grid; gap: 0.85rem; }
.flow::before {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 1rem;
    bottom: 1rem;
    border-left: 2px dashed var(--line);
}
.flow > .stage {
    counter-increment: stage;
    position: relative;
    margin-left: 3.4rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.8rem 1.05rem 0.7rem;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.flow > .stage::before {
    content: counter(stage);
    position: absolute;
    left: -3.4rem;
    top: 0.65rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px var(--card);
}
.flow > .stage:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.flow .stage h4 { margin: 0 0 0.25rem; color: var(--ink); font-size: 1.02rem; }
.flow .stage p { margin: 0.2rem 0 0.5rem; }
.flow .stage ul { margin: 0.2rem 0 0.5rem; }
.who { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0.1rem; }
.who span {
    font-size: 0.76rem;
    background: var(--accent-soft);
    color: var(--accent-2);
    border-radius: 999px;
    padding: 0.1rem 0.65rem;
    font-weight: 600;
}
.who span:not(.out)::before { content: '👤 '; font-size: 0.85em; }
.who span.out { background: #fff6e5; color: #8a5a00; }
.who span.out::before { content: '🖨 '; }

/* Who signs in: one card per seat */
.seats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.4rem;
}
.seat {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0.95rem 1.05rem;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.seat:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seat .av, .ov-seats .av {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-weight: 800;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.seat h4 { margin: 0.2rem 0 0; color: var(--ink); font-size: 1.04rem; }
.seat .for { color: var(--muted); font-size: 0.88rem; margin: 0; }
.seat dl { margin: 0.3rem 0 0; font-size: 0.87rem; border-top: 1px solid var(--line); padding-top: 0.2rem; }
.seat dt { font-weight: 700; color: var(--accent); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.5rem; }
.seat dd { margin: 0.1rem 0 0; }
.seat dd.no { color: #9a4a00; }
.seat.top { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--card) 45%); }
.seat.top .av { background: var(--accent); color: #fff; }
.seat .badge {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* Reference divider (plain article pages) */
.ref-divider {
    margin: 2.8rem 0 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--bg);
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.88rem;
}
.ref-divider strong { color: var(--ink); }


/* ===== Business profile =====
 * help.js turns a business guide into: hero -> sticky tab bar -> panels.
 * The panels hold the guide's own sections, moved, never rewritten. */
.help-main.is-business { padding-top: 0; overflow: clip; }
.biz-hero {
    border-radius: var(--radius) var(--radius) 0 0;
    margin: 0 -2.2rem;
    padding: 1.2rem 2.2rem 1.4rem;
    color: #fff;
    background:
        radial-gradient(circle at 92% -20%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 0% 120%, rgba(0, 0, 0, 0.18), transparent 50%),
        linear-gradient(135deg, var(--hero-1), var(--hero-2));
}
.biz-hero .help-crumbs { color: rgba(255, 255, 255, 0.75); margin-bottom: 1.1rem; }
.biz-hero .help-crumbs a { color: rgba(255, 255, 255, 0.8); }
.biz-hero .help-crumbs a:hover { color: #fff; }
.biz-hero-main { display: flex; gap: 1.1rem; align-items: flex-start; }
.biz-ico {
    flex: none;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.biz-hero .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.biz-hero h1 { color: #fff; margin: 0.15rem 0 0.4rem; font-size: 2.15rem; }
.biz-hero .lead { color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 820px; font-size: 1.02rem; }
.biz-hero .biz-parent { margin: 0.6rem 0 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); }
.biz-hero .biz-parent a { color: #fff; font-weight: 600; }
.biz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
    margin-top: 1.3rem;
}
.biz-stats a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
.biz-stats a:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.biz-stats b { font-size: 1.6rem; line-height: 1; font-weight: 800; }
.biz-stats span { font-size: 0.82rem; opacity: 0.9; }

.biz-tabs {
    position: sticky;
    top: var(--head-h);
    z-index: 50;
    margin: 0 -2.2rem 1.2rem;
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.biz-tabs::-webkit-scrollbar { display: none; }
.biz-tabs a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.8rem 0.75rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.biz-tabs a .ti { font-size: 0.85rem; opacity: 0.8; }
.biz-tabs a:hover { color: var(--ink); }
.biz-tabs a.on { color: var(--accent-2); border-bottom-color: var(--accent); }
.biz-all-toggle {
    margin-left: auto;
    flex: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}
.biz-all-toggle:hover { color: var(--ink); border-color: var(--accent); }
.biz-sentinel { height: 0; }

.biz-panel { display: none; animation: panel-in 0.18s ease; }
.biz-panel.on, .biz-onepage .biz-panel { display: block; }
.biz-onepage .biz-tabs a.on { color: var(--muted); border-bottom-color: transparent; }
.biz-onepage .biz-panel + .biz-panel { border-top: 2px solid var(--line); margin-top: 2.4rem; padding-top: 0.4rem; }
.biz-panel > h2:first-child, .biz-panel > div:first-child > h2:first-child { margin-top: 0.6rem; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Overview tab */
.help-main h2.ov-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.1rem;
    border-bottom: 0;
    margin: 1.8rem 0 0.7rem;
    padding: 0;
}
.biz-panel > h2.ov-h:first-child { margin-top: 0.4rem; }
.ov-h .more { font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--accent); white-space: nowrap; }
.ov-day {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
    counter-reset: none;
}
.ov-day li { margin: 0; }
.ov-day a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6rem;
    height: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    background: var(--card);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ov-day a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--text); }
.ov-day .n {
    grid-row: span 2;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov-day .t { font-weight: 600; color: var(--ink); font-size: 0.9rem; line-height: 1.3; }
.ov-day .w { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }
.ov-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.ov-seats a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ov-seats a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); color: var(--text); }
.ov-seats a.top .av { background: var(--accent); color: #fff; }
.ov-seats strong { display: block; color: var(--ink); font-size: 0.9rem; line-height: 1.25; }
.ov-seats small { display: block; color: var(--muted); font-size: 0.76rem; line-height: 1.3; }
.ov-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.ov-presets div { background: var(--bg); border-radius: 14px; padding: 0.7rem 0.9rem; }
.ov-presets strong { display: block; color: var(--ink); font-size: 0.92rem; }
.ov-presets span { font-size: 0.84rem; color: var(--muted); }

/* Features tab */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin: 0.8rem 0 1.6rem; }
.feat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.feat:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.feat .grp { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.feat h4 { margin: 0; font-size: 1rem; color: var(--ink); }
.feat h4::before { content: '✦ '; color: var(--accent); }
.feat p { margin: 0; font-size: 0.86rem; color: var(--muted); }
.feat .go { margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--accent); }

/* Reference tab: jump list */
.ref-jump { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0.4rem 0 0.6rem; padding: 0.7rem 0.9rem; background: var(--bg); border-radius: 14px; }
.ref-jump .lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }

.is-business .help-related, .is-business .help-pager { border-top: 0; }

/* ===== Help home: business directory ===== */
.help-main.home { padding-top: 1.2rem; }
.home-hero {
    position: relative;
    margin: 0 -1rem 1.4rem;
    padding: 2.2rem 2rem 1.8rem;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0%, rgba(18, 184, 134, 0.55), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(14, 165, 164, 0.35), transparent 50%),
        linear-gradient(135deg, #0b3d36, #0b5c52);
}
.home-hero .eyebrow { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; opacity: 0.85; }
.home-hero h1 { color: #fff; font-size: 2.3rem; margin: 0.3rem 0 0.5rem; }
.home-hero p { color: rgba(255, 255, 255, 0.88); max-width: 720px; }
.home-hero .home-tip { font-size: 0.86rem; margin: 0.8rem 0 0; }
.home-hero .path { background: rgba(255, 255, 255, 0.16); color: #fff; }
.home-find { position: relative; max-width: 620px; margin-top: 1.1rem; }
.home-find input {
    width: 100%;
    font: inherit;
    font-size: 1.02rem;
    padding: 0.85rem 1rem 0.85rem 2.8rem;
    border-radius: 14px;
    border: 0;
    outline: none;
    color: var(--text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.home-find input:focus { box-shadow: 0 0 0 4px rgba(18, 184, 134, 0.45), 0 12px 30px rgba(0, 0, 0, 0.2); }
.home-find .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.4rem 0 1.2rem; }
.cat-chips button {
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}
.cat-chips button:hover { border-color: var(--teal); }
.cat-chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-chips small { opacity: 0.7; margin-left: 0.2rem; }

.biz-cat { margin-bottom: 1.6rem; }
.biz-cat h3 { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; margin: 0 0 0.7rem; }
.biz-cat h3 small { font-size: 0.75rem; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 0 0.5rem; }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 0.9rem; }
.biz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.05rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.biz-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.biz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); color: var(--text); }
.biz-card .top { display: flex; align-items: center; gap: 0.5rem; }
.biz-card .ico {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.biz-card .vid { margin-left: auto; font-size: 0.7rem; color: #fff; background: #e11d48; border-radius: 6px; padding: 0.05rem 0.4rem; }
.biz-card h3 { margin: 0.35rem 0 0; font-size: 1.04rem; color: var(--ink); line-height: 1.3; }
.biz-card p { margin: 0; font-size: 0.86rem; color: var(--muted); }
.biz-card p.who { font-size: 0.78rem; color: var(--accent-2); font-weight: 500; }
.biz-card .meta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: 0.76rem; font-weight: 600; color: var(--text); }
.biz-empty { color: var(--muted); }
.feat-row { display: grid; grid-template-columns: 230px 1fr; gap: 0.8rem; align-items: start; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.feat-row .chips { margin: 0; }
.feat-owner { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 0.92rem; padding-top: 0.15rem; }

@media (max-width: 640px) {
    .toc ol { columns: 1; }
    .feat-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .help-body { grid-template-columns: 1fr; padding: 0.8rem; }
    .help-nav {
        position: fixed;
        top: var(--head-h);
        left: 0;
        bottom: 0;
        width: min(320px, 85vw);
        max-height: none;
        border-radius: 0;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        z-index: 90;
        box-shadow: var(--shadow);
    }
    .help-nav.open { transform: translateX(0); }
    .nav-toggle { display: inline-block; }
    .help-site-link { display: none; }
    .help-main { padding: 1.2rem 1rem 2rem; }
    .help-main h1 { font-size: 1.65rem; }
    .hero { padding: 1.4rem; }
    .biz-hero { margin: 0 -1rem; padding: 1rem 1rem 1.2rem; }
    .biz-hero h1 { font-size: 1.6rem; }
    .biz-ico { width: 3.2rem; height: 3.2rem; font-size: 1.7rem; border-radius: 16px; }
    .biz-tabs { margin: 0 -1rem 1rem; padding: 0 0.6rem; }
    .home-hero { margin: 0 -0.4rem 1.2rem; padding: 1.5rem 1.1rem 1.3rem; }
    .home-hero h1 { font-size: 1.7rem; }
}
@media (max-width: 560px) {
    .help-brand span.name, .help-brand .tag { display: none; }
    .help-search { max-width: none; }
    .biz-hero-main { flex-direction: column; gap: 0.7rem; }
    .biz-stats { grid-template-columns: 1fr 1fr; }
    .biz-stats b { font-size: 1.3rem; }
    .flow::before { left: 0.9rem; }
    .flow > .stage { margin-left: 2.5rem; }
    .flow > .stage::before { left: -2.5rem; width: 1.9rem; height: 1.9rem; border-radius: 10px; font-size: 0.85rem; }
    .biz-all-toggle { display: none; }
    .help-pager { grid-template-columns: 1fr; }
}

@media print {
    .help-header, .help-nav, .biz-tabs, .help-pager, .help-related, .help-footer { display: none !important; }
    .help-body { display: block; padding: 0; }
    .help-main { border: 0; box-shadow: none; }
    .biz-panel { display: block !important; }
    .biz-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Guide pages =====
 * A guide walks one kind of customer through a whole set-up that spans several
 * pages -- the manufacturer with a channel, a field team and retailers. Same
 * tokens as the rest of the site; every block below is optional. */

/* Banner: the one-line promise and the picture of the whole thing */
.gd-hero {
    background: linear-gradient(135deg, var(--ink) 0%, #00695c 55%, var(--teal-dark) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.6rem 1.6rem 1.2rem;
    margin: 0.4rem 0 1.4rem;
    box-shadow: var(--shadow);
}
.gd-hero .eyebrow { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; font-weight: 700; }
.gd-hero h1 { color: #fff; margin: 0.2rem 0 0.4rem; }
.gd-hero p { color: rgba(255, 255, 255, 0.9); max-width: 760px; margin: 0 0 1rem; }

/* The channel ladder: one rung per tier, top to bottom */
.gd-ladder { display: grid; gap: 0.45rem; margin: 0.4rem 0 0.2rem; }
.gd-rung {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    position: relative;
}
.gd-rung + .gd-rung::before {
    content: '';
    position: absolute;
    left: 1.95rem;
    top: -0.5rem;
    height: 0.5rem;
    border-left: 2px dashed rgba(255, 255, 255, 0.45);
}
.gd-rung .ico { font-size: 1.45rem; text-align: center; }
.gd-rung .nm { font-weight: 700; }
.gd-rung .ds { font-size: 0.84rem; opacity: 0.85; }
.gd-rung .tag {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}
.gd-rung .tag.alt { background: #ffe8b3; color: #6b4500; }
.gd-rung.side { margin-left: 2.6rem; background: rgba(255, 255, 255, 0.06); border-style: dashed; }

/* Choose your shape: one card per way of running it */
.gd-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; margin: 0.8rem 0 1.4rem; }
.gd-pick {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 1rem 1rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}
.gd-pick.best { border: 2px solid var(--teal); box-shadow: var(--shadow); }
.gd-pick .plan {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--teal-soft);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}
.gd-pick .plan.hi { background: #efe7fb; color: #4b2a8a; }
.gd-pick h4 { margin: 0.1rem 0 0; color: var(--ink); font-size: 1.05rem; }
.gd-pick .you { color: var(--muted); font-size: 0.88rem; margin: 0; font-style: italic; }
.gd-pick ul { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.gd-pick .ribbon {
    position: absolute;
    top: -0.65rem;
    right: 0.9rem;
    background: var(--teal);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}

/* Timeline: phases of a set-up, each with who and how long */
.gd-timeline { list-style: none; padding: 0; margin: 0.8rem 0 1.4rem; counter-reset: ph; }
.gd-timeline > li {
    counter-increment: ph;
    position: relative;
    padding: 0 0 1.1rem 3.2rem;
}
.gd-timeline > li::before {
    content: counter(ph);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gd-timeline > li::after {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 2.3rem;
    bottom: 0.1rem;
    border-left: 2px solid var(--line);
}
.gd-timeline > li:last-child::after { display: none; }
.gd-timeline h4 { margin: 0.2rem 0 0.1rem; color: var(--ink); }
.gd-timeline .when { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.gd-timeline ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Access matrix: who can do what, as dots */
.gd-matrix td, .gd-matrix th { text-align: center; }
.gd-matrix td:first-child, .gd-matrix th:first-child { text-align: left; }
.gd-matrix .y::before { content: '●'; color: var(--teal); }
.gd-matrix .n::before { content: '—'; color: #b8c4c2; }
.gd-matrix .o::before { content: '◐'; color: #f39c12; }
.gd-legend { font-size: 0.82rem; color: var(--muted); margin: -0.4rem 0 1.2rem; }
.gd-legend span { margin-right: 1rem; }

/* Hiring tree: who may add whom inside one party's book */
.gd-tree { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 1rem 0 0.6rem; }
.gd-node {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem 0.9rem;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.gd-node strong { display: block; color: var(--ink); }
.gd-node small { color: var(--muted); }
.gd-node.office { background: var(--ink); color: #fff; border-color: var(--ink); }
.gd-node.office strong, .gd-node.office small { color: #fff; }
.gd-node.principal { border: 2px solid var(--teal); }
.gd-link { height: 1.2rem; border-left: 2px solid var(--teal); }
.gd-link.lbl { position: relative; height: 1.8rem; }
.gd-link.lbl span {
    position: absolute;
    left: 0.6rem;
    top: 0.25rem;
    white-space: nowrap;
    font-size: 0.74rem;
    color: var(--teal-dark);
    font-weight: 700;
}
.gd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; position: relative; padding-top: 0.9rem; }
.gd-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    border-top: 2px solid var(--teal);
}

/* Scenario: a worked example told as a short story */
.gd-story {
    border-radius: var(--radius);
    background: #fbfaf5;
    border: 1px solid #efe8d4;
    padding: 1rem 1.2rem;
    margin: 0.8rem 0 1.4rem;
}
.gd-story .cast { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.gd-story .cast span { background: #fff; border: 1px solid #efe8d4; border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.8rem; }
.gd-story ol { margin: 0.2rem 0 0; padding-left: 1.2rem; }
.gd-story li { margin: 0.25rem 0; }
.gd-story .t { font-weight: 700; color: #7a5c12; margin-right: 0.3rem; }

/* FAQ: native disclosure, one question per row */
.gd-faq details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    margin: 0 0 0.5rem;
    padding: 0.2rem 1rem;
}
.gd-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 0.5rem 0; }
.gd-faq details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.4rem; }
.gd-faq details p { margin: 0.3rem 0 0.6rem; }

@media (max-width: 640px) {
    .gd-hero { padding: 1.2rem 1rem 1rem; }
    .gd-rung { grid-template-columns: 2rem 1fr; }
    .gd-rung .tag { grid-column: 2; justify-self: start; }
    .gd-rung.side { margin-left: 1rem; }
    .gd-row::before { left: 4%; right: 4%; }
}

/* ===== Header extras: theme toggle ===== */
.theme-toggle {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); }

/* Full-text search: the matching sentence under a result */
.help-results .snip { font-size: 0.8rem; color: var(--muted); font-weight: 400; margin-top: 0.15rem; line-height: 1.4; }
.help-results mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }

/* Was this helpful? */
.help-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2.4rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
}
.help-feedback .q { font-weight: 600; color: var(--ink); }
.help-feedback button {
    font: inherit;
    font-size: 0.88rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.help-feedback button:hover { border-color: var(--teal); }

/* Business hero buttons: watch the video, print */
.biz-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.biz-act {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}
.biz-act:hover { background: rgba(255, 255, 255, 0.26); }

/* Which business fits me? (help home) */
.finder {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.1rem 1.2rem 1.2rem;
    background: linear-gradient(180deg, var(--teal-soft), var(--card) 70%);
    margin: 0.6rem 0 1.6rem;
}
.finder .fq { font-weight: 700; color: var(--ink); margin: 0 0 0.6rem; font-size: 1.02rem; }
.finder .fstep { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.finder .fopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.55rem; }
.finder .fopts button {
    font: inherit;
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.finder .fopts button:hover { border-color: var(--teal); transform: translateY(-1px); }
.finder .fopts button b { display: block; color: var(--ink); }
.finder .fopts button span { font-size: 0.82rem; color: var(--muted); }
.finder .fback { margin-top: 0.7rem; font: inherit; font-size: 0.85rem; background: none; border: 0; color: var(--teal-dark); cursor: pointer; padding: 0; }
.finder .fresult { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.7rem; }

/* ===== Dark theme =====
 * The reader's choice (or the system's) sets data-theme on <html>. Tokens
 * flip first; the few rules with fixed light colours follow. */
[data-theme="dark"] {
    color-scheme: dark;
    --teal: #2bd4a0;
    --teal-dark: #3cc7c0;
    --teal-soft: rgba(43, 212, 160, 0.12);
    --ink: #e6f2ef;
    --text: #d5e1de;
    --muted: #93a4a0;
    --bg: #0d1412;
    --card: #141d1b;
    --line: #25332f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] [data-cat="retail"] { --accent: #38bdf8; --accent-2: #7dd3fc; --accent-soft: rgba(56, 189, 248, 0.14); }
[data-theme="dark"] [data-cat="food"] { --accent: #fb923c; --accent-2: #fdba74; --accent-soft: rgba(251, 146, 60, 0.14); }
[data-theme="dark"] [data-cat="health"] { --accent: #fb7185; --accent-2: #fda4af; --accent-soft: rgba(251, 113, 133, 0.14); }
[data-theme="dark"] [data-cat="education"] { --accent: #a78bfa; --accent-2: #c4b5fd; --accent-soft: rgba(167, 139, 250, 0.14); }
[data-theme="dark"] [data-cat="services"] { --accent: #fbbf24; --accent-2: #fcd34d; --accent-soft: rgba(251, 191, 36, 0.14); }
[data-theme="dark"] [data-cat="trade"] { --accent: #60a5fa; --accent-2: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.14); }
[data-theme="dark"] [data-cat="subscription"] { --accent: #2dd4bf; --accent-2: #5eead4; --accent-soft: rgba(45, 212, 191, 0.14); }
[data-theme="dark"] [data-cat="general"] { --accent: #94a3b8; --accent-2: #cbd5e1; --accent-soft: rgba(148, 163, 184, 0.14); }
[data-theme="dark"] .help-header { background: rgba(9, 22, 19, 0.97); }
[data-theme="dark"] .lead { color: #c3d0cd; }
[data-theme="dark"] .help-main tr:hover td { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .callout { border-color: rgba(43, 212, 160, 0.25); }
[data-theme="dark"] .callout.warn { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .callout.plan { border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }
[data-theme="dark"] .who span.out { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }
[data-theme="dark"] .seat dd.no { color: #fdba74; }
[data-theme="dark"] .seat .badge,
[data-theme="dark"] .cat-chips button.on { background: var(--teal); border-color: var(--teal); color: #052e25; }
[data-theme="dark"] .biz-tabs { background: rgba(20, 29, 27, 0.96); }
[data-theme="dark"] .biz-hero, [data-theme="dark"] .home-hero { filter: saturate(0.9) brightness(0.92); }
[data-theme="dark"] .biz-ico { background: #1d2a27; }
[data-theme="dark"] .home-find input { background: #141d1b; color: var(--text); }
[data-theme="dark"] .help-results mark { background: rgba(253, 230, 138, 0.3); }
[data-theme="dark"] .gd-node.office { background: #0b6e63; border-color: #0b6e63; }
[data-theme="dark"] .gd-story { background: #1a1f17; border-color: #3a3524; }
[data-theme="dark"] .gd-story .cast span { background: #141d1b; border-color: #3a3524; }
[data-theme="dark"] .gd-rung .tag { background: #e6f2ef; }

@media print {
    .theme-toggle, .help-feedback, .biz-actions { display: none !important; }
    [data-theme="dark"] { --bg: #fff; --card: #fff; --text: #1f2d2b; --ink: #0b3d36; --line: #e2e9e7; --muted: #5f6f6c; }
}