/* Pippify Help Center. Layout: sticky top bar with search; home = search hero, role Start-here paths, channel
   directory, "Why didn't Pippin…?" + What's new, topics in 4 job sections, quick answers.
   Article = left topic rail + reading column + right "On this page"; one column below 900px (the app's own breakpoint).
   Brand from max-ai-inbound-frontend main: funnel mark #0F766E / #10B981 / #5EEAD4, ink #0B3B33, Inter.
   Layout, type, radii and shadows follow the Prosperna Help Center's Design System layout (white header and footer,
   content in white cards on the canvas, 12px controls, all-open topic menu, Related Articles cards); the colors stay Pippify's. */
:root {
  --bg: #f7faf9;             /* canvas */
  --surface: #ffffff;        /* cards */
  --sunken: #ecf7f6;
  --line: #d7e6e3;           /* control borders */
  --line-soft: #e6f0ee;      /* card borders */
  --fg: #0b3b33;
  --muted: #4f6b66;
  --accent: #0f766e;         /* links, icons, active text */
  --brand: #0f766e;          /* filled buttons */
  --brand-hover: #0b5f58;
  --on-brand: #ffffff;
  --accent-ink: #ffffff;
  --accent-soft: #d9f2ee;
  --accent-line: rgba(15, 118, 110, 0.25);
  --mid: #10b981;
  --ok: #0a7a55;
  --ok-ink: #0a7a55;
  --ok-soft: #e1f6ee;
  --soon: #8a5a00;
  --soon-soft: #fff4d6;
  --warn: #b42318;
  --warn-soft: #fdecea;
  --focus-ring: rgba(15, 118, 110, 0.40);
  --shadow: 0 1px 2px 0 rgba(11, 59, 51, 0.05);
  --shadow-2: 0 4px 8px -2px rgba(11, 59, 51, 0.10), 0 2px 4px -2px rgba(11, 59, 51, 0.06);
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --top: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1513; --surface: #10201d; --sunken: #142a26; --line: #23403a; --line-soft: #1b3530; --fg: #e3f3ef; --muted: #9bb8b2;
    --accent: #5eead4; --brand: #0f766e; --brand-hover: #11877e; --on-brand: #ffffff; --accent-ink: #062a25; --accent-soft: #163a34;
    --accent-line: rgba(94, 234, 212, 0.30); --mid: #34d399; --ok: #6ee7b7; --ok-ink: #6ee7b7; --ok-soft: #12302a;
    --soon: #f5c565; --soon-soft: #33290f; --warn: #f8a39a; --warn-soft: #3a1a17; --focus-ring: rgba(94, 234, 212, 0.45);
    --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1513; --surface: #10201d; --sunken: #142a26; --line: #23403a; --line-soft: #1b3530; --fg: #e3f3ef; --muted: #9bb8b2;
  --accent: #5eead4; --brand: #0f766e; --brand-hover: #11877e; --on-brand: #ffffff; --accent-ink: #062a25; --accent-soft: #163a34;
  --accent-line: rgba(94, 234, 212, 0.30); --mid: #34d399; --ok: #6ee7b7; --ok-ink: #6ee7b7; --ok-soft: #12302a;
  --soon: #f5c565; --soon-soft: #33290f; --warn: #f8a39a; --warn-soft: #3a1a17; --focus-ring: rgba(94, 234, 212, 0.45);
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 16px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 28px; } }

/* Top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { height: var(--top); display: flex; align-items: center; gap: 14px; }
.brand a { display: flex; align-items: center; text-decoration: none; color: inherit; }
.brand a:hover small { color: var(--accent); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; }
/* Official Pippify funnel mark (max-ai-inbound-frontend main: public/logo-icon.svg) + "Pippify" wordmark in Inter 700,
   letter-spacing -0.02em, ink #0B3B33, as in PippifyLogo.jsx. The wordmark follows --fg so it stays readable in dark mode. */
.logo { display: block; height: 26px; width: 26px; flex: none; }
.brand a.home-mark { gap: 9px; }
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--fg); line-height: 1; }
.brand small { font-family: var(--font-body); font-weight: 600; color: var(--muted); font-size: 15px; padding-left: 12px; border-left: 1px solid var(--line); line-height: 22px; }
.top-search { flex: 1; max-width: 520px; margin-left: auto; position: relative; }
.top-search input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding: 0 40px 0 38px; font: inherit; font-size: 15px; color: var(--fg); }
.top-search svg, .hero-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 18px; height: 18px; }
/* Night-mode button: moon in day mode, sun in night mode (whether night comes from the device or the button). */
#themeBtn .sun { display: none; }
:root[data-theme="dark"] #themeBtn .sun { display: block; }
:root[data-theme="dark"] #themeBtn .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #themeBtn .sun { display: block; } :root:not([data-theme="light"]) #themeBtn .moon { display: none; } }
.menu-btn { display: none; }
/* Links out: marketing site + dashboard login. Text link drops first, both move to the menu/footer on phones. */
.site-links { display: flex; align-items: center; gap: 6px; flex: none; }
.site-links a { text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; border-radius: 10px; padding: 9px 12px; }
.site-links .login { background: var(--brand); color: var(--on-brand); }
.site-links .login:hover { filter: brightness(1.08); }
/* Footer: social icons (44px tap targets, divided by thin lines) | support email */
.foot-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.socials { display: flex; align-items: center; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); border-radius: 12px; position: relative; transition: color .15s, background .15s; }
.socials a + a::before { content: ""; position: absolute; left: -1px; top: 13px; bottom: 13px; width: 1px; background: var(--line); }
.socials a:hover, .socials a:focus-visible { color: var(--accent); background: var(--accent-soft); }
.socials a:hover::before, .socials a:hover + a::before { opacity: 0; }
.socials svg { width: 19px; height: 19px; }
.foot-sep { width: 1px; height: 22px; background: var(--line); }
.foot-mail { color: var(--muted); text-decoration: none; font-weight: 600; }
.foot-mail:hover { color: var(--accent); }
@media (max-width: 520px) { .foot-sep { display: none; } footer.site .wrap { justify-content: center; text-align: center; } .foot-right { justify-content: center; } }
.rail-links { display: none; }
@media (max-width: 380px) { .logo { height: 20px !important; width: 20px !important; } .wordmark { font-size: 17px; } .topbar .wrap { gap: 8px !important; } .site-links .login { padding: 8px 11px !important; } }
@media (max-width: 720px) {
  .brand small { display: none; }
  .logo { height: 22px; width: 22px; }
  .kbd { display: none; }
  .top-search input { padding-right: 12px; }
  .menu-btn { display: grid; }
  /* Phones: row 1 = menu, logo, Log in, theme; row 2 = full-width search on every page (the big home search is hidden). */
  .topbar .wrap { height: auto; min-height: var(--top); flex-wrap: wrap; row-gap: 8px; padding-block: 12px; gap: 10px; }
  body { --top: 112px; }
  .site-links { margin-left: auto; }
  .site-links .login { padding: 8px 14px; }
  .top-search { order: 5; flex: 1 0 100%; max-width: none; margin-left: 0; }
  body.home-view .top-search { visibility: visible; opacity: 1; }
  .hero-search { display: none; }
  .hero .chips { margin-top: 0; }
  .brand a.hc-label { display: none; }
  .home-view .menu-btn { display: none; }
  .rail-links { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .rail-links a { display: block; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; font-weight: 700; color: var(--fg); }
  .rail-links a.login { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
}

/* Search results dropdown */
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: min(70vh, 520px); overflow: auto; padding: 6px; z-index: 30; }
.result { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--fg); }
.result:hover, .result.active { background: var(--accent-soft); }
.result b { display: block; font-weight: 700; font-size: 15px; }
.result span { display: block; font-size: 13.5px; color: var(--muted); }
.result mark { background: none; color: var(--accent); font-weight: 700; }
.result .cat { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.no-results { padding: 14px; color: var(--muted); font-size: 15px; }

/* Home */
.hero { padding-block: 56px 36px; text-align: left; }
.hero h1 { font-family: var(--font-display); font-size: clamp(32px, 6vw, 52px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; max-width: 16ch; }
.hero p { color: var(--muted); font-size: 19px; margin: 0 0 24px; max-width: 54ch; }
.hero-find { max-width: 760px; }
/* Wide screens: the "What's new" card fills the space beside the hero. Below 1000px it moves down next to
   "Why didn't Pippin…?" instead (the .duo copy), so it is on the page once at every width. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center; padding-block: 48px 8px; }
.news { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); }
.news h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.news h2 svg { width: 18px; height: 18px; color: var(--accent); }
.news > p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.news ul { list-style: none; margin: 0; padding: 0; }
.news li { border-top: 1px solid var(--line); }
.news li a { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--fg); font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.news li a:hover { color: var(--accent); }
.news time { font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; text-align: center; padding: 2px 0; align-self: start; }
.news .all { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
@media (max-width: 1000px) { .hero { display: block; } .news { display: none; } }
@media (min-width: 1001px) { .duo .news { display: none !important; } }
.hero-search { position: relative; }
.hero-search input { width: 100%; height: 58px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 18px 0 46px; font: inherit; font-size: 18px; color: var(--fg); box-shadow: var(--shadow); }
.hero-search svg { left: 16px; width: 20px; height: 20px; }
/* Chips span exactly the width of the search box: 3 per row on desktop, 2 on phones. */
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 520px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 13px; font-size: 14.5px; cursor: pointer; text-decoration: none; color: var(--fg); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The top-bar search stays hidden on the home page until the big search scrolls out of view. */
.home-view .top-search { visibility: hidden; opacity: 0; transition: opacity .2s; }
.home-view.hero-gone .top-search { visibility: visible; opacity: 1; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 44px 0 14px; }
.section-head h2 { font-family: var(--font-display); font-size: 26px; margin: 0; letter-spacing: -.01em; }
.section-head p { margin: 0; color: var(--muted); font-size: 15px; }

/* Start here path */
.path { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.path-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.progress { flex: 1; min-width: 180px; max-width: 320px; height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .3s; }
.progress-label { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; counter-reset: s; }
.steps li { counter-increment: s; }
.step-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); text-decoration: none; color: var(--fg); height: 100%; }
.step-card:hover { border-color: var(--accent); }
.step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--accent-soft); color: var(--accent); }
.step-card.done .step-num { background: var(--ok); color: var(--surface); }

.step-card b { display: block; font-size: 15.5px; line-height: 1.3; }
.step-card span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.step-card .step-num { display: grid; place-items: center; margin-top: 0; font-size: 14px; line-height: 1; color: var(--accent); }
.step-card.done .step-num { color: var(--surface); }

/* Category grid */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cat-card { display: grid; grid-template-columns: 42px 1fr; gap: 4px 14px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); transition: border-color .15s, transform .15s; }
.cat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cat-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.cat-ico svg { width: 21px; height: 21px; }
.cat-card b { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.cat-card span { font-size: 14.5px; color: var(--muted); line-height: 1.4; }
.cat-card em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }

/* Quick answers: the answer opens in place; the full guide is one click further. */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 10px; align-items: start; }
.qa { border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.qa[open], .qa:hover { border-color: var(--accent); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 700; line-height: 1; transition: transform .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] summary { color: var(--accent); }
.qa .ans { padding: 0 16px 14px; color: var(--fg); font-size: 15.5px; line-height: 1.55; }
.qa .ans p { margin: 0 0 8px; }
.qa .ans a { font-weight: 700; font-size: 14.5px; text-decoration: none; }

.support-band { margin: 48px 0 56px; padding: 26px; border-radius: 16px; background: var(--brand); color: var(--on-brand); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.support-band h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 24px; }
.support-band p { margin: 0; opacity: .9; }
.email-pill { max-width: 100%; flex-wrap: wrap; justify-content: center; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 8px; background: var(--accent-ink); color: var(--accent); border-radius: 999px; padding: 8px 8px 8px 16px; font-weight: 700; }
.email-pill button { border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 14px; }

/* Article / category layout */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 36px; padding-block: 28px 64px; }
.rail { position: sticky; top: calc(var(--top) + 20px); align-self: start; max-height: calc(100vh - var(--top) - 40px); overflow: auto; font-size: 15px; }
.rail h3 { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
/* Rail = collapsible topic groups; only the current topic starts open. */
.rail details { border-radius: 10px; }
.rail summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; user-select: none; }
.rail summary::-webkit-details-marker { display: none; }
.rail summary:hover { background: var(--sunken); }
.rail summary svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.rail summary span { flex: 1 1 auto; min-width: 0; }
.rail summary .chev { flex: 0 0 8px; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.rail details[open] > summary .chev { transform: rotate(45deg); }
.rail details.here > summary .chev { border-color: var(--accent); }
/* Thin scrollbar that only shows while the pointer is over the menu. */
.rail { scrollbar-width: thin; scrollbar-color: transparent transparent; padding-right: 4px; }
.rail:hover { scrollbar-color: var(--line) transparent; }
.rail details.here > summary { color: var(--accent); }
.rail details.here > summary svg { color: var(--accent); }
.rail .group { margin: 2px 0 8px 17px; padding-left: 10px; border-left: 1px solid var(--line); }
.rail .group a { display: block; padding: 5px 8px; border-radius: 7px; color: var(--muted); text-decoration: none; line-height: 1.35; font-size: 14.5px; }
.rail .group a:hover { background: var(--sunken); color: var(--fg); }
.rail .group a.current { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.rail .group a.all { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.toc { position: sticky; top: calc(var(--top) + 20px); align-self: start; font-size: 14px; }
.toc h3 { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a.h3 { padding-left: 24px; font-size: 13.5px; }
.toc a.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
@media (max-width: 1100px) { .doc { grid-template-columns: 230px minmax(0, 1fr); } .toc { display: none; } }
/* Menu header: "All topics" + collapse button. Collapsed = icon-only strip (desktop/tablet), remembered per viewer. */
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding-left: 8px; }
.rail-title { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rail-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.rail-toggle:hover, .rail-toggle:focus-visible { color: var(--accent); background: var(--sunken); }
.rail-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
@media (min-width: 721px) {
  html.rail-mini .doc { grid-template-columns: 52px minmax(0, 1fr) 210px; }
  html.rail-mini .rail { overflow-x: hidden; padding-right: 0; }
  html.rail-mini .rail-head { justify-content: center; padding-left: 0; }
  html.rail-mini .rail-title { display: none; }
  html.rail-mini .rail-toggle svg { transform: scaleX(-1); }
  html.rail-mini .rail summary { justify-content: center; padding: 9px 0; }
  html.rail-mini .rail summary svg { width: 20px; height: 20px; }
  html.rail-mini .rail summary span, html.rail-mini .rail summary .chev, html.rail-mini .rail .group,
  html.rail-mini .rail-links, html.rail-mini .path-rail h3, html.rail-mini .path-progress,
  html.rail-mini .path-rail b, html.rail-mini .path-rail small { display: none; }
  html.rail-mini .path-rail li a { justify-content: center; padding: 7px 0; }
  html.rail-mini .rail details.here > summary { background: var(--accent-soft); }
}
@media (min-width: 721px) and (max-width: 1100px) { html.rail-mini .doc { grid-template-columns: 52px minmax(0, 1fr); } }
@media (max-width: 720px) { .rail-toggle { display: none; } }
@media (max-width: 720px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 16px 48px; }
  .rail { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; background: var(--bg); padding: calc(var(--top) + 26px) 16px 24px; z-index: 15; display: none; }
  body.rail-open .rail { display: block; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.article { min-width: 0; max-width: 760px; }
.article h1 { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
.article h2 { font-family: var(--font-display); font-size: 25px; margin: 40px 0 10px; letter-spacing: -.01em; }
.article h3 { font-size: 19px; margin: 26px 0 8px; }
.article p, .article li { max-width: 70ch; }
.article li { margin: 5px 0; }
.article ul, .article ol { padding-left: 1.4em; }
.article code { font-family: var(--font-mono); font-size: .82em; background: var(--sunken); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.article strong { font-weight: 700; }
.wn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.date-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.6; }
.see-guide { display: block; margin-top: 6px; font-size: .94em; font-weight: 600; color: var(--muted); }
.see-guide a { text-decoration: none; }
.see-guide a:hover { text-decoration: underline; }
.article hr { display: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pill svg { width: 15px; height: 15px; color: var(--accent); }
.pill small { color: var(--muted); font-weight: 600; font-size: 14px; }
.quickinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 24px; }
.quickinfo div { background: var(--surface); padding: 12px 14px; display: grid; gap: 3px; align-content: start; }
.quickinfo dt { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.quickinfo dt svg { width: 14px; height: 14px; }
.quickinfo dd { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
.summary-box { background: var(--sunken); border-radius: 14px; padding: 4px 18px; }
.summary-box { padding-top: 14px; }
.summary-box h2 { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; scroll-margin-top: calc(var(--top) + 20px); }
/* Numbered steps get large counters */
.article ol.steps-list { list-style: none; padding-left: 0; counter-reset: st; }
.article ol.steps-list > li { counter-increment: st; position: relative; padding-left: 44px; margin: 12px 0; }
.article ol.steps-list > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14.5px; display: grid; place-items: center; }
.article ol.steps-list ol, .article ol.steps-list ul { margin-top: 6px; }
.callout { border-radius: 12px; padding: 12px 16px; margin: 16px 0; background: var(--accent-soft); display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.callout svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.callout p { margin: 0; }
.sec-verify { border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); border-radius: 14px; padding: 2px 18px 6px; margin-top: 28px; }
.sec-verify h2 { color: var(--ok-ink); font-size: 21px; margin-top: 16px; }
.sec-trouble h2::before { content: ""; }
.soon { margin-top: 10px; border-radius: 12px; background: var(--soon-soft); padding: 10px 14px; }
.soon > strong { color: var(--soon); }
.soon-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soon); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 2px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 14px 0; background: var(--surface); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.table-wrap th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--sunken); }
.table-wrap tr:last-child td { border-bottom: 0; }
.faq h3 { font-family: var(--font-body); }
.helpful { margin-top: 36px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); }
.helpful b { font-size: 16px; }
.helpful .btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.helpful .faces { display: flex; gap: 6px; }
.helpful button { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 7px 16px; cursor: pointer; font-weight: 600; color: var(--fg); }
.helpful button:hover, .helpful button:focus-visible { border-color: var(--accent); color: var(--accent); }
.helpful .face { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.helpful .face svg { width: 28px; height: 28px; }
.helpful .thanks { color: var(--ok-ink); font-weight: 600; }
.support-card { margin-top: 14px; padding: 18px; border-radius: 14px; background: var(--accent-soft); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.support-card b { font-family: var(--font-display); font-size: 19px; display: block; }
.support-card .email-pill { background: var(--surface); }
.updated { color: var(--muted); font-size: 14px; margin-top: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.pager a { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--fg); background: var(--surface); min-width: 0; }
.pager a:hover { border-color: var(--accent); }
.pager small { display: block; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pager span { font-weight: 600; font-size: 15px; }
.pager .next { text-align: right; grid-column: 2; }
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; } }

/* Category page */
.cat-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.cat-hero .cat-ico { width: 54px; height: 54px; border-radius: 14px; }
.cat-hero .cat-ico svg { width: 26px; height: 26px; }
.cat-hero h1 { margin: 0; }
.cat-hero p { margin: 4px 0 0; color: var(--muted); }
.cat-list { display: grid; gap: 10px; }
.cat-list a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--fg); }
.cat-list a:hover { border-color: var(--accent); }
.cat-list b { display: block; font-size: 16.5px; }
.cat-list span { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.cat-list span.sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Start-here mode */
.path-rail h3 { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.path-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.path-progress .progress { min-width: 0; }
.path-rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.path-rail li a { display: flex; gap: 11px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; text-decoration: none; color: var(--fg); }
.path-rail li a:hover { background: var(--sunken); }
.path-rail li.here a { background: var(--accent-soft); }
.path-rail li.here b { color: var(--accent); }
.path-rail li.ok .step-num { background: var(--ok); color: var(--surface); }
.path-rail li.here .step-num { background: var(--brand); color: var(--on-brand); }
.path-rail b { display: block; font-size: 14.5px; line-height: 1.3; }
.path-rail small { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.path-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.path-banner .dots { display: flex; gap: 6px; }
.path-banner .dots a { width: 22px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.path-banner .dots a.ok { background: var(--ok); }
.path-banner .dots a.on { background: var(--accent); }
.cat-list .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tag { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-weight: 600; }
/* Start here: one path per role, switched with tabs. */
.role-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.role-tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--fg); }
.role-tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.role-tabs button:hover { border-color: var(--accent); }
/* Phones: the three roles share one row as equal buttons (they only wrap if even that can't fit). */
@media (max-width: 520px) {
  .role-tabs { gap: 4px; }
  .role-tabs button { flex: 1 1 0; min-width: max-content; padding: 6px 8px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 360px) { .path { padding: 12px; } .role-tabs button { padding: 5px 6px; font-size: 12.5px; } }
.path-note { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
/* Channel directory: plan and prerequisite on every card. */
.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ch-card { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); }
.ch-card:hover { border-color: var(--accent); }
.ch-card .cat-ico { width: 34px; height: 34px; border-radius: 9px; grid-row: span 2; }
.ch-card .cat-ico svg { width: 18px; height: 18px; }
.ch-card b { font-size: 15px; line-height: 1.25; }
.ch-card small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
/* "Why didn't Pippin…?" + What's new side by side. */
.why-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 10px; }
.why-list a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); }
.why-list a:hover { border-color: var(--accent); }
.why-list .cat-ico { width: 34px; height: 34px; border-radius: 9px; grid-row: span 2; }
.why-list .cat-ico svg { width: 18px; height: 18px; }
.why-list b { font-size: 15px; line-height: 1.3; }
.why-list em { font-style: normal; font-size: 12.5px; color: var(--accent); font-weight: 600; }
/* Below 1000px the What's new card sits here (it is beside the hero on wide screens). */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin-top: 14px; }
.duo:empty { display: none; }
.why { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.why h2 { font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.why h2 svg { width: 18px; height: 18px; color: var(--accent); }
.why > p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.why ul { list-style: none; margin: 0; padding: 0; }
.why li a { display: block; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); font-weight: 600; font-size: 15px; }
.why li a:hover { color: var(--accent); }
.duo .news { display: block; box-shadow: none; border-radius: 14px; }
/* Topics grouped into the four job sections. */
.sec-label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 22px 0 10px; }
.rail .rail-sec { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 14px 0 4px 8px; }
html.rail-mini .rail .rail-sec { display: none; }
/* AI guides: "How Pippin decides" box and Limits. */
.sec-decide { background: var(--accent-soft); border-radius: 12px; padding: 2px 18px 8px; margin-top: 28px; }
.sec-decide h2 { color: var(--accent); font-size: 21px; margin-top: 16px; }
.sec-limits h2 { font-size: 21px; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer.site .wrap { padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 520px) { footer.site .wrap { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- Design System alignment (same layout as the Prosperna Help Center; Pippify colors) -------------
   White header and footer on the canvas; content in white cards (16px radius, 1px border, elevation 1);
   Inter with 800-weight headings; 12px controls; tinted callouts (Note = brand, Tip = success, Warning). */
body { font-size: 16px; line-height: 1.625; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.topbar { background: var(--surface); backdrop-filter: none; border-bottom: 1px solid var(--line-soft); }
.brand small { font-size: 14px; font-weight: 700; color: var(--fg); border-left-color: var(--line); }
.top-search input { border-radius: 12px; border-color: var(--line); font-size: 14px; }
.icon-btn { border-radius: 12px; border-color: var(--line); }
.site-links a { border-radius: 12px; font-size: 14px; font-weight: 600; padding: 8px 16px; transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.site-links .login:hover { filter: none; background: var(--brand-hover); }
/* Home */
.hero h1 { font-weight: 800; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.02em; }
.hero p { font-size: 18px; }
.hero-search input { border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 17px; }
.chip { border-color: var(--line); font-size: 14px; font-weight: 500; }
.chip:hover { border-color: var(--brand); color: var(--accent); background: var(--accent-soft); }
.section-head h2 { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.news, .path, .cat-card, .qa, .step-card, .pager a, .cat-list a, .helpful, .results, .ch-card, .why-list a, .why { border-color: var(--line-soft); box-shadow: var(--shadow); }
.news, .path, .why { border-radius: 16px; }
.news h2, .why h2 { font-weight: 800; }
.step-card { background: var(--surface); border-radius: 12px; }
.cat-card { border-radius: 16px; padding: 20px; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms; }
.ch-card, .why-list a { transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms; }
.cat-card:hover, .pager a:hover, .cat-list a:hover, .step-card:hover, .ch-card:hover, .why-list a:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cat-card b { font-weight: 700; font-size: 16px; }
.cat-ico, .cat-hero .cat-ico { border-radius: 12px; }
.ch-card .cat-ico, .why-list .cat-ico { border-radius: 10px; }
.qa { border-radius: 12px; }
.qa summary { font-size: 15px; }
.role-tabs button { border-color: var(--line); }
.role-tabs button:hover { border-color: var(--brand); background: var(--accent-soft); color: var(--accent); }
.role-tabs button[aria-selected="true"]:hover { background: var(--brand-hover); color: var(--on-brand); }
.sec-label { font-size: 12px; letter-spacing: .05em; }
.support-band { border-radius: 16px; }
.support-band h2 { font-weight: 800; }
.email-pill button { border-radius: 12px; }
/* Article layout: the menu and the article are white cards on the canvas */
.rail { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 12px; }
.rail summary { border-radius: 8px; font-size: 14px; }
.rail summary:hover, .rail .group a:hover { background: var(--sunken); }
.rail .group a { font-size: 14px; border-radius: 8px; }
.rail .group a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail-title, .toc h3, .rail h3, .path-rail h3 { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.article { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); padding: 40px 48px; max-width: none; }
.article > * { max-width: 720px; }
.crumbs { font-size: 12px; font-weight: 600; }
.article h1 { font-weight: 800; font-size: clamp(26px, 3.6vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
.article h2 { font-weight: 800; font-size: 20px; line-height: 28px; margin: 32px 0 12px; }
.article h3 { font-weight: 700; font-size: 17px; }
.article code { font-family: var(--font-mono); background: var(--sunken); border-color: var(--line-soft); border-radius: 8px; }
.pill { border-radius: 9999px; background: var(--accent-soft); border-color: transparent; color: var(--accent); font-size: 13px; }
.pill svg { color: var(--accent); }
.quickinfo { border-color: var(--line-soft); background: var(--line-soft); border-radius: 12px; }
.quickinfo dt { font-size: 12px; letter-spacing: .05em; }
.summary-box { background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 12px; }
.summary-box h2 { font-size: 12px; line-height: 16px; letter-spacing: .05em; margin: 0 0 2px; }
.sec-decide { border: 1px solid var(--accent-line); border-radius: 12px; }
.sec-decide h2, .sec-limits h2 { font-size: 20px; }
.callout { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 16px; font-size: 15px; }
.sec-verify { border-color: color-mix(in srgb, var(--ok) 25%, transparent); background: var(--ok-soft); border-radius: 12px; }
.sec-verify h2 { font-size: 20px; }
.table-wrap { border-color: var(--line-soft); border-radius: 12px; }
.table-wrap th { font-size: 12px; font-weight: 700; letter-spacing: .05em; background: var(--sunken); }
.table-wrap th, .table-wrap td { border-bottom-color: var(--line-soft); padding: 12px 16px; }
.helpful { border-radius: 12px; }
.helpful button { border-radius: 12px; border-color: var(--line); color: var(--fg); }
.helpful button:hover, .helpful button:focus-visible { background: var(--sunken); }
.support-card { border-radius: 12px; }
.support-card b { font-weight: 700; font-size: 17px; }
.pager a { border-radius: 12px; }
.cat-list a { border-radius: 12px; }
.toc a { border-left-color: var(--line); }
.toc a.on { border-color: var(--brand); color: var(--accent); }
.tag { border-radius: 9999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.date-pill { background: var(--accent-soft); color: var(--accent); }
footer.site { background: var(--surface); border-top-color: var(--line-soft); font-size: 13px; }
@media (max-width: 767px) { .article { padding: 20px 16px; border-radius: 12px; } }
@media (max-width: 720px) { .rail { border-radius: 0; border: 0; box-shadow: none; } }

/* ===== Help-article layout (Design System) ===== */
svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 1440px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }
/* Header: logo | Help Center, search beside it, buttons on the right */
.topbar .wrap { min-height: 64px; }
@media (min-width: 721px) {
  .top-search { flex: 1 1 320px; max-width: 420px; margin-left: 24px; }
  .top-search input { height: 40px; }
  .site-links { margin-left: auto; gap: 12px; }
}
.site-links .hdr-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 12px; padding: 8px 16px; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.site-links .hdr-support { background: var(--brand); color: var(--on-brand); }
.site-links .hdr-support:hover { background: var(--brand-hover); }
.site-links .hdr-login { background: var(--surface); color: var(--fg); border-color: var(--line); }
.site-links .hdr-login:hover { background: var(--sunken); }
@media (max-width: 720px) { .site-links .hdr-support { display: none; } .site-links .hdr-login { padding: 8px 14px; } }
@media (max-width: 380px) { .site-links .hdr-login svg { display: none; } }
/* Three columns: 248px topics | article | 200px "On this page" */
@media (min-width: 721px) {
  .doc { grid-template-columns: 248px minmax(0, 1fr) 200px; gap: 24px; padding-block: 24px 64px; }
  html.rail-mini .doc:has(.ds-rail) { grid-template-columns: 248px minmax(0, 1fr) 200px; }
}
@media (min-width: 721px) and (max-width: 1279px) { .doc, html.rail-mini .doc:has(.ds-rail) { grid-template-columns: 248px minmax(0, 1fr); } }
.doc-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* Topics card: every group open, uppercase group names, an icon on each guide */
.ds-rail { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 720px) { .ds-rail { display: none; } body.rail-open .ds-rail { display: flex; } }
.ds-group { display: flex; flex-direction: column; gap: 2px; }
.ds-label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px; text-decoration: none; }
.ds-label:hover { color: var(--fg); }
.ds-rail .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--fg); text-decoration: none; transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.ds-rail .nav-item svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ds-rail .nav-item:hover { background: var(--sunken); }
.ds-rail .nav-item.current { font-weight: 600; color: var(--accent); background: var(--accent-soft); }
.ds-rail .nav-item.current svg { color: currentColor; }
/* Article card */
.article h1 { font-size: 28px; line-height: 34px; font-weight: 800; margin: 0 0 8px; }
.crumbs { font-size: 12px; line-height: 16px; font-weight: 600; margin-bottom: 16px; }
.ds-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.ds-when { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ds-meta .pill { margin: 0; font-size: 12px; line-height: 16px; padding: 2px 10px; }
.ds-meta .pill svg { width: 13px; height: 13px; }
.article :not(pre) > code { font-family: var(--font-mono); font-size: 14px; background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 8px; padding: 2px 6px; }
/* Note / Tip / Warning */
.callout { display: flex; gap: 12px; padding: 16px; margin: 24px 0; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); grid-template-columns: none; }
.callout > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.callout .callout-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.callout .callout-body, .callout .callout-body p { font-size: 14px; line-height: 22px; color: var(--fg); }
.callout.tip { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.callout.tip > svg { color: var(--ok); }
.callout.warn { background: var(--soon-soft); border-color: color-mix(in srgb, var(--soon) 35%, transparent); }
.callout.warn > svg { color: var(--fg); }
/* "Was this guide helpful?" row */
.helpful { margin-top: 40px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; box-shadow: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.helpful b { font-size: 14px; line-height: 20px; font-weight: 600; }
/* Related Articles cards under the article */
.ds-related { display: flex; flex-direction: column; gap: 16px; }
.ds-related h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ds-related .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ds-related .rel { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ds-related .rel:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.ds-related .rel svg { width: 22px; height: 22px; color: var(--accent); }
.ds-related .reltitle { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg); }
.ds-related .rel:hover .reltitle { color: var(--accent); }
.ds-related .reldesc { font-size: 14px; line-height: 20px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* "On this page" + "Still need help?" */
.toc { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
@media (max-width: 1279px) { .toc { display: none; } }
.toc h3 { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); text-decoration: none; margin: 0; }
.toc a.h3 { padding-left: 24px; font-size: 13px; }
.toc a:hover { color: var(--fg); }
.toc a.on { border-left-color: var(--brand); color: var(--accent); font-weight: 600; }
.ds-help { margin-top: 24px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.ds-help b { font-size: 14px; line-height: 20px; font-weight: 600; }
.ds-help span.note { font-size: 12px; line-height: 16px; color: var(--muted); }
@media (min-width: 1280px) { .article .support-card { display: none; } }
/* Footer */
footer.site { background: var(--surface); border-top: 1px solid var(--line-soft); }
footer.site .wrap { padding-block: 20px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ds-foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.ds-foot-links a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ds-foot-links a:hover { color: var(--fg); }
.toc .ds-help a.ds-help-btn { align-self: flex-start; display: inline-flex; align-items: center; border: 0; border-radius: 12px; padding: 6px 12px; font-size: 13px; line-height: 20px; font-weight: 600; text-decoration: none; background: var(--brand); color: var(--on-brand); }
.toc .ds-help a.ds-help-btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.support-band .ds-cta { display: inline-flex; align-items: center; border-radius: 12px; padding: 10px 20px; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; background: #ffffff; color: #0f766e; }
.support-band .ds-cta:hover { background: #ecf7f6; }
.support-card .ds-cta { display: inline-flex; align-items: center; border-radius: 12px; padding: 8px 16px; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; background: var(--brand); color: var(--on-brand); }
.support-card .ds-cta:hover { background: var(--brand-hover); }

/* ===== Polish: even grids, headings with their descriptions, topic columns, scannable troubleshooting ===== */
/* Section headings: the description sits right under the heading instead of across the page. */
.section-head { display: block; margin: 56px 0 16px; }
.section-head h2 { margin: 0 0 4px; }
.section-head p { font-size: 15px; max-width: 70ch; }
/* Hero: the search fills its column, so there is no dead gap before the What's new card. */
@media (min-width: 1001px) { .hero { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; padding-block: 56px 8px; } }
.hero h1 { max-width: 20ch; }
.hero-find { max-width: none; }
/* Start here: progress label next to its bar; 8 steps = 2 even rows of 4 on wide screens. */
.path-top { justify-content: flex-start; }
.progress { max-width: 360px; }
.steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Channels: wider cards so plan notes stay on one line; troubleshooting in two even columns. */
/* Nine channels: an even 3 × 3 from tablet width up, one column on phones (never 4 + 4 + 1). */
.channels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ch-card { padding: 14px 16px; }
.why-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-list a { padding: 14px 16px; }
/* Browse by topic: four job sections side by side, topics as rows. */
/* Always an even split of the four sections: 4 across, 2 × 2, or 1 column (never 3 + 1). */
.topic-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 640px) { .topic-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .topic-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.topic-col { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 10px 10px; }
.topic-col .sec-label { margin: 0 0 6px; padding: 0 10px; color: var(--accent); }
.topic-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--fg); transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.topic-row:hover { background: var(--sunken); }
.topic-row .cat-ico { grid-row: auto; width: 36px; height: 36px; border-radius: 10px; }
.topic-row .cat-ico svg { width: 18px; height: 18px; }
.topic-row b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; line-height: 20px; }
.topic-row:hover b { color: var(--accent); }
.topic-row em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sunken); border-radius: 9999px; padding: 0 8px; }
.topic-row small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.not-found { padding-block: 56px 72px; }
/* Topic menu: the topic you are in is labelled in the brand color. */
.ds-group.here .ds-label { color: var(--accent); }
/* Troubleshooting: each "Common errors" entry is its own card with a red edge, so messages are easy to scan. */
.sec-trouble > p > strong:only-child { display: block; font-size: 12px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.sec-trouble > ul:first-of-type { list-style: none; padding: 0; display: grid; gap: 10px; }
.sec-trouble > ul:first-of-type > li { margin: 0; max-width: none; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--warn); border-radius: 12px; font-size: 15px; line-height: 1.55; }
/* Limits: a quiet bordered box, so it reads as part of "How Pippin Decides". */
.sec-limits { border: 1px solid var(--line-soft); border-radius: 12px; padding: 2px 18px 8px; margin-top: 16px; background: var(--bg); }
.loading-msg { padding-block: 40px; }