/* ════════════════════════════════════════════════════════════════════════
   STYLE.CSS — Ringotel Knowledge Base frontend
   ────────────────────────────────────────────────────────────────────────
   Single stylesheet shared by all 6 pages (index, category, article,
   tag, search, action). Organized top-to-bottom roughly by visual
   hierarchy:

     1. VARIABLES           — :root design tokens (colors, fonts, sizes)
     2. HEADER              — site nav bar (logo, hamburger, platform btn)
     3. SEARCH (header)     — small header search input (where rendered)
     4. PAGE SHELL          — body / footer / scroll containers
     5. HERO SECTION        — title, search card, platform tabs (every page)
     6. TWO-COLUMN LAYOUT   — Topics sidebar + main content area
     7. HOMEPAGE SECTIONS   — section cards on index.html
     8. SUBCATEGORY CARDS   — masonry grid on category.html
     9. SECTION PAGE        — older subcategory variant (section.html)
     10. TAG PAGE           — article list filtered by tag
     11. ARTICLE PAGE       — title, body, TOC, tags, prev/next
     12. SKELETON LOADING   — gray-bar placeholders shown during fetch
     13. FOOTER, SCROLLBAR, ANIMATIONS — utilities
     14. RESPONSIVE         — breakpoints (tablet 768–1023, mobile ≤767)
     15. HAMBURGER MENU     — full-screen overlay (mobile/tablet only)

   Breakpoint convention used throughout:
     • Desktop: ≥1024px (default styles, no media query needed)
     • Tablet:  768–1023px  (@media min-width: 768px and max-width: 1023px)
     • Mobile:  ≤767px       (@media max-width: 767px)

   Bumping the cache: when changing this file, increment `style.css?v=N`
   in every HTML page so browsers fetch the new content.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;420;500;600;700&family=DM+Mono:wght@400;500&display=swap");

/* ════════════════════════════════════════════════════════════════════════
   VARIABLES
   ────────────────────────────────────────────────────────────────────────
   Design tokens consumed everywhere. --accent is the brand color and
   gets overridden at runtime by partner.js when a partner has a
   primary_color set, so any partner-domain visit can rebrand the
   whole site without code changes.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --bg-page: #ffffff;
  --bg-surface: #ffffff;
  --bg-hover: #f5f7fc;
  --bg-input: #f5f7fc;

  --text-primary: #0d1117;
  --text-secondary: #4a5568;
  --text-muted: #8a94a6;
  --text-label: #6b7280;

  --accent: #1d34b9;
  --accent-light: #eef1fb;
  --accent-hover: #1628a0;

  --warning: #b45309;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;

  --border: #e2e8f0;
  --border-strong: #c8d0dc;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07);

  --header-h: 72px;
  --sidebar-w: 141px;
  --toc-w: 220px;
  --content-max: 720px;

  --font-display: "Instrument Serif", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "DM Mono", monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER
   ────────────────────────────────────────────────────────────────────────
   Sticky top bar with logo, hamburger button, and the platform-wrap
   (which contains the scroll-activated platform button + search icon).
   The `.header__inner` flex container's layout differs by viewport:
   on desktop the platform-wrap is laid out naturally; on tablet/mobile
   we use `order:` and `margin-left:auto` to put hamburger on the right
   with the search icon (when shown by JS) immediately to its left.
   ════════════════════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  background: rgba(70, 99, 217, 0.05);
  border-bottom: 0.5px solid #4663d9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 300px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header__logo-icon {
  height: 26px;
  width: auto;
}

.header__logo-wordmark {
  height: 26px;
  width: auto;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 220px;
}

.header__logo-img {
  height: 28px;
  width: auto;
}

.header__logo-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.header__search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s;
}
.header__search-btn:hover {
  background: var(--bg-hover);
}

/* Hamburger menu button (mobile only — hidden by default, shown via media query) */
.header__hamburger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary, #1c1c1c);
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.header__hamburger:hover {
  background: var(--bg-hover, #f0f2ff);
}
.header__platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #1c1c1c;
  color: #fff;
  border: none;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.header__platform-btn:hover {
  background: #333;
}

/* Wrapper for platform button + its dropdown — gives the dropdown
   a positioning ancestor so it can drop down directly below the button. */
.header__platform-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header__platform-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}

.header__platform-dropdown-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.header__platform-dropdown-item:hover {
  background: var(--bg-hover);
}
.header__platform-dropdown-item.active {
  color: #4663d9;
}
.header--scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* ════════════════════════════════════════════════════════════════════════
   SEARCH (header)
   ────────────────────────────────────────────────────────────────────────
   Styles for the small search input that lives in the header on
   section.html. On most pages search lives in the hero card instead;
   the header just has the search icon-button revealed on scroll.
   ════════════════════════════════════════════════════════════════════════ */
.header__search-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.header__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.header__search {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px 8px 34px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.header__search::placeholder {
  color: var(--text-muted);
}
.header__search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 52, 185, 0.1);
  background: #fff;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  max-height: 360px;
  overflow-y: auto;
  z-index: 200;
}
.search-results.open {
  display: block;
}

.search-result-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.12s;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: var(--bg-hover);
}
.search-result-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.search-result-item__platform {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.search-no-results {
  padding: 1rem;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SHELL (shared by all pages)
   ────────────────────────────────────────────────────────────────────────
   Body background, default font, root stacking. Just enough to make
   every page consistent before the content sections take over.
   ════════════════════════════════════════════════════════════════════════ */
.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ────────────────────────────────────────────────────────────────────────
   The big top block — title, subtitle, search card with mic + clear +
   submit buttons, action chips (call/message/contact), and platform
   tabs. Same markup on every page (kept in sync across HTML files).
   The title has dual spans — `.hero__title-desktop` shows on >=768px
   and `.hero__title-mobile` shows below — so different copy can show
   per viewport without JS.
   ────────────────────────────────────────────────────────────────────────
   Mic button: visible on tablet/mobile only. Hidden on desktop via
   the @media (min-width: 1024px) override below. JS-driven `.listening`
   class makes it pulse red while voice search is active.
   ════════════════════════════════════════════════════════════════════════ */
.hero {
  width: 600px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
}
.hero__title {
  color: #1c1c1c;
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.01px;
  font-feature-settings:
    "liga" off,
    "clig" off;
}

/* Default (desktop) visibility for title-swap spans and mobile-only buttons.
   These come BEFORE the mobile @media query so the query can override them. */
.hero__title-desktop {
  display: block;
}
.hero__title-mobile {
  display: none;
}
.header__hamburger {
  display: none;
}

.hero__sub {
  color: #1c1c1c;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.01px;
  font-feature-settings:
    "liga" off,
    "clig" off;
  flex: 1 0 0;
}

/* ── Search card ── */
.hero__search-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid transparent;
  background: #f4f4f6;
  box-sizing: border-box;
  padding: 8px;
  gap: 8px;
  position: relative;
}

.hero__search-row {
  display: flex;
  height: 56px;
  padding: 0 8px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #e1e2e2;
  background: #ffffff;
  transition: border-color 0.15s;
}
.hero__search-row:hover {
  border-color: #4663d9;
}
.hero__search-row:focus-within {
  border-color: #4663d9;
}

/* ── Hero search dropdown (live results) ── */
.hero__dropdown {
  display: none;
  position: absolute;
  /* 8px card padding + 56px input row height + 8px gap = 72px */
  top: 72px;
  left: 8px;
  right: 8px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e1e2e2;
  padding: 8px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
  box-sizing: border-box;
}
.hero__dropdown.open {
  display: block;
}

.hero__dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f4f6;
  color: var(--text-primary, #1c1c1c);
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 4px;
  transition: background 0.12s;
  gap: 8px;
}
.hero__dropdown-item:last-child {
  margin-bottom: 0;
}
.hero__dropdown-item:hover {
  background: #e1e5ff;
}
.hero__dropdown-item__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero__dropdown-item__platform {
  font-size: 11px;
  font-weight: 500;
  color: #4663d9;
  background: #e1e5ff;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.hero__dropdown-empty {
  padding: 16px 12px;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  text-align: center;
}

.hero__dropdown-loading {
  padding: 16px 12px;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  text-align: center;
}

.hero__search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.hero__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
}
.hero__search-input::placeholder {
  color: var(--text-muted);
}

/* Clear (×) button inside the search row — visible only when input has text */
.hero__search-clear {
  display: none;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.hero__search-clear.visible {
  display: inline-flex;
}
.hero__search-clear:hover {
  background: #f0f2ff;
}
.hero__search-clear:active {
  background: #e1e5ff;
}

/* Search (magnifier) icon becomes a button-like hover zone too */
.hero__search-submit {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__search-submit:hover {
  background: #f0f2ff;
}
.hero__search-submit:active {
  background: #e1e5ff;
}

/* Mic button (voice search) */
.hero__search-mic {
  display: inline-flex;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.hero__search-mic:hover {
  background: #f0f2ff;
}
.hero__search-mic:active {
  background: #e1e5ff;
}
.hero__search-mic.listening {
  color: #e11d48;
  background: #fee2e2;
  animation: hero-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes hero-mic-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Hide mic on desktop — voice search is mobile/tablet only */
@media (min-width: 1024px) {
  .hero__search-mic {
    display: none !important;
  }
}

/* ── Chips ── */
.hero__chips {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 4px;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #e1e7ff;
  color: #000;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 420;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  transition: opacity 0.15s;
}
.hero__chip:hover {
  opacity: 0.7;
  text-decoration: none;
}
.hero__chip svg {
  flex-shrink: 0;
}

/* ── Platform tabs ── */
.platform-tabs {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

.platform-tabs__inner {
  display: inline-flex;
  height: 38px;
  padding: 4px;
  align-items: center;
  gap: 8px;
  border-radius: 19px;
  background: linear-gradient(0deg, #1c1c1c 0%, #525252 100%);
  width: auto;
}

.platform-tab {
  display: flex;
  height: 32px;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 17px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.1px;
  color: #efeff1;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
  font-feature-settings:
    "liga" off,
    "clig" off;
}
.platform-tab:hover {
  color: #ffffff;
}
.platform-tab.active {
  background: #ffffff;
  color: #1c1c1c;
  font-weight: 600;
}
.platform-tab.active:hover {
  color: #1c1c1c;
}
/* ════════════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT (sidebar + content)
   ────────────────────────────────────────────────────────────────────────
   Used by index.html and category.html. Left = Topics sidebar,
   right = main content area (sections grid / subcategory grid).
   Article page uses a different layout (.article-layout, three cols).
   ════════════════════════════════════════════════════════════════════════ */
.two-col-wrapper {
  display: flex;
  justify-content: flex-start;
  padding-left: calc(50vw - 300px - 157px);
}

.two-col {
  width: 757px;
  padding: 2rem 0 3rem;
  display: grid;
  grid-template-columns: 141px 600px;
  gap: 16px;
  align-items: start;
  margin: 0;
}
/* ── Topics sidebar ── */
.topics-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 141px;
}

.topics-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topics-sidebar__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding: 5px;
}

.topics-sidebar__link {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.12s;
  line-height: 1.5;
}
.topics-sidebar__link:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.topics-sidebar__link.active {
  font-weight: 700;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS GRID
   ────────────────────────────────────────────────────────────────────────
   The grid of category cards on index.html. One card per category,
   each with up to 4 article links and a "View all →" link to the
   full category page. Filled by app.js → switchPlatform().
   ════════════════════════════════════════════════════════════════════════ */
.sections-area__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sections-area__platform-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}
.section-card {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 16px;
  background: #f4f4f6;
  align-self: stretch;
}

.section-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-card__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
}
.section-card__name {
  color: #1c1c1c;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 520;
  line-height: 18px;
  letter-spacing: -0.1px;
  font-feature-settings:
    "liga" off,
    "clig" off;
}

.section-card__articles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.section-card__article-link {
  color: rgba(28, 28, 28, 0.7);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 420;
  line-height: 1.35;
  font-feature-settings:
    "liga" off,
    "clig" off;
  text-decoration: none;
  align-self: stretch;
  transition: color 0.15s;
}
.section-card__article-link:hover {
  color: #4663d9;
  text-decoration: none;
}

.section-card__view-all {
  color: #4663d9;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 420;
  line-height: 18px;
  text-decoration: none;
  font-feature-settings:
    "liga" off,
    "clig" off;
}
.section-card__view-all:hover {
  text-decoration: underline;
}

.section-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   SUBCATEGORY CARDS (category page) — matches Figma
   ────────────────────────────────────────────────────────────────────────
   Used on category.html. Masonry CSS columns produce the
   varied-height layout you see in Figma. Each card title links to
   the subcategory's primary article; chapter links jump to TOC
   anchors inside that article.
   ════════════════════════════════════════════════════════════════════════ */
.subcategory-card {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid #e1e1e2;
  background: #ffffff;
  align-self: start;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Masonry-style packing for the subcategory grid:
   CSS columns lets cards stack tightly without vertical gaps.
   Note: reading order is top-to-bottom-left, then top-to-bottom-right.
   Scope to #subcategoriesGrid so the homepage section cards aren't affected. */
#subcategoriesGrid {
  display: block !important;
  column-count: 2;
  column-gap: 24px;
}
#subcategoriesGrid > .subcategory-card {
  /* Prevent a card from being split across columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  /* Bottom margin = vertical "gap" between cards inside a column */
  margin-bottom: 16px;
  width: 100%;
}
.subcategory-card:hover {
  border-color: var(--border-strong, #cacbcf);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.05));
}

.subcategory-card__name {
  color: #1c1c1c;
  font-family: var(--font-body);
  font-size: 24px;
  font-style: normal;
  font-weight: 520;
  line-height: normal;
  letter-spacing: -0.1px;
  font-feature-settings:
    "liga" off,
    "clig" off;
}

/* Clickable wrapper around the subcategory title — inherits color, underlines on hover */
.subcategory-card__name-link {
  color: inherit;
  text-decoration: none;
  align-self: stretch;
}
.subcategory-card__name-link:hover .subcategory-card__name {
  text-decoration: underline;
}

.subcategory-card__articles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.subcategory-card__article-link {
  color: rgba(28, 28, 28, 0.7);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 420;
  line-height: 1.35;
  font-feature-settings:
    "liga" off,
    "clig" off;
  text-decoration: none;
  align-self: stretch;
  transition: color 0.15s;
}
.subcategory-card__article-link:hover {
  color: #4663d9;
  text-decoration: none;
}

.subcategory-card__view-all {
  color: #4663d9;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 420;
  line-height: 18px;
  text-decoration: none;
  font-feature-settings:
    "liga" off,
    "clig" off;
}
.subcategory-card__view-all:hover {
  text-decoration: underline;
}

/* skeleton cards */
.skeleton-card {
  height: 200px;
  background: linear-gradient(90deg, #f0f4fa 25%, #e8edf5 50%, #f0f4fa 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION PAGE — subcategory cards
   ════════════════════════════════════════════════════════════════════════ */
.section-breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.section-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.section-breadcrumb a:hover {
  color: var(--accent);
}
.section-breadcrumb__sep {
  color: var(--text-muted);
  font-size: 10px;
}
.section-breadcrumb__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 2px;
  vertical-align: middle;
}
.section-breadcrumb__current {
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.subcategory-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.subcategory-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.subcategory-card__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subcategory-card__item {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-page);
  transition:
    background 0.12s,
    color 0.12s;
}
.subcategory-card__item:hover {
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}

.breadcrumb__link {
  color: #4663d9;
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--text-muted);
}

.breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   TAG PAGE — article list
   ════════════════════════════════════════════════════════════════════════ */
.tag-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

.tag-article-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tag-article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
  gap: 1rem;
}
.tag-article-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.tag-article-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.tag-article-item__arrow {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 12px;
  transition: background 0.12s;
}
.tag-article-item:hover .tag-article-item__arrow {
  background: var(--accent-light);
  color: var(--accent);
  border-color: #c7cff5;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.pagination__pages {
  display: flex;
  gap: 6px;
}

.pagination__page {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  transition: all 0.12s;
}
.pagination__page.active {
  background: var(--accent-light);
  border-color: #c7cff5;
  color: var(--accent);
}
.pagination__page:hover:not(.active) {
  background: var(--bg-hover);
}

.pagination__next {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.12s;
}
.pagination__next:hover {
  background: var(--bg-hover);
}

/* ════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ────────────────────────────────────────────────────────────────────────
   The full article view. Three-column grid:
     • Left:  .sidebar       — topics + subcategory articles
     • Center: .article-main — breadcrumb, title, body, tags, prev/next
     • Right: .toc           — TOC card with jump links + tags + related
   The .article-body styles are the most stylistically detailed —
   they target the HTML emitted by renderBlocks() in article.js
   (h2/h3/p/ul/ol/img/blockquote/code).
   ════════════════════════════════════════════════════════════════════════ */
.article-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--toc-w);
  gap: 2.5rem;
  align-items: start;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb__sep {
  color: var(--text-muted);
}
.breadcrumb__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 2px;
  vertical-align: middle;
}

/* Article sidebar */
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding-top: 2rem;
  max-height: calc(100vh - var(--header-h) - 3rem);
  overflow-y: auto;
}

.sidebar__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__link {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.12s;
  line-height: 1.5;
}
.sidebar__link:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.sidebar__link.active {
  font-weight: 700;
  color: var(--text-primary);
}

/* Article main */
.article-main {
  padding-top: 2rem;
  min-width: 0;
}

/* Feature flag notice */
.feature-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--warning);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.feature-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Cross-platform links */
.cross-platform {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.cross-platform__label {
  color: var(--text-secondary);
  font-style: italic;
}
.cross-platform__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cross-platform__link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--accent);
  border-radius: 99px;
  transition: all 0.15s;
}
.cross-platform__link:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* Article header */
.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

.article-header__title {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.article-header__meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Article body */
.article-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
}
.article-body p {
  margin-bottom: 1rem;
}
.article-body p.caption em,
.article-body p.caption {
  display: block;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}
.article-body h2 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
}
.article-body h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
}
.article-body h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.5rem 0 0.5rem;
}
.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.article-body li {
  margin-bottom: 0.4rem;
}
.article-body strong {
  font-weight: 600;
}
.article-body p em,
.article-body p a,
.article-body p strong {
  display: inline;
}
.article-body em {
  font-style: italic;
  color: var(--text-secondary);
}
.article-body a em {
  color: var(--accent);
  text-decoration: none;
}
.article-body a em:hover {
  text-decoration: underline;
}
.article-body a {
  font-style: italic;
}

/* Default: images without an explicit width attribute. */
/* All body images render inline-block, vertically aligned with the
   surrounding text. Width comes from the natural image size unless the
   editor's image-resize module has stamped a width="N" attribute, in
   which case attr() honors that exact pixel value. */
.article-body img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
  border: none;
  border-radius: 4px;
}

.article-body figure img,
.article-body img.wp-block-image,
.article-body .wp-block-image img {
  display: block;
  max-width: 100%;
  max-height: 500px;
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-primary);
}
.article-body pre {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid #c7cff5;
  border-radius: 99px;
  padding: 3px 12px;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.tag:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  text-decoration: none;
}

/* Prev/Next nav */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s;
}
.article-nav__link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.article-nav__link--next {
  text-align: right;
}
.article-nav__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.article-nav__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

/* ── TOC ── */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding-top: 2rem;
}

.toc__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.toc__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.toc__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc__link {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  line-height: 1.4;
}
.toc__link:hover {
  color: var(--accent);
  background: var(--accent-light);
  text-decoration: none;
}
.toc__link.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 500;
}

/* Tags in TOC panel */
.toc__tags {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.toc__tags-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.toc__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Related articles in TOC panel */
.toc__related {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.toc__related-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.toc__related-item {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.12s;
  line-height: 1.4;
}
.toc__related-item:hover {
  color: var(--accent);
  background: var(--accent-light);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   SKELETON LOADING
   ════════════════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.skeleton-card,
.skeleton-line,
.skeleton-title {
  background: linear-gradient(
    90deg,
    var(--bg-page) 25%,
    #e4e9f2 50%,
    var(--bg-page) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.skeleton-title {
  height: 36px;
  margin-bottom: 12px;
  border-radius: 6px;
}
.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  background: #fff;
}
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}

/* ════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* anchor scroll offset */
.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────
   Three breakpoints in order of specificity (narrowest first wins
   when they overlap):
     • @media (max-width: 1100px)               — narrow desktop tweaks
     • @media (min-width: 768px) and (max-width: 1023px) — TABLET
     • @media (max-width: 767px)                 — MOBILE
   Anything above is desktop default. Touch-only behaviors (hamburger
   nav, bottom-aligned mic button etc.) live in the tablet + mobile
   blocks.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: var(--sidebar-w) 1fr;
  }
  .toc {
    display: none;
  }
}

/* ══════════════════════════════
   TABLET LAYOUT (768px – 1023px)
   Same content layout as desktop, but with a simplified header
   (hamburger instead of full nav) and no Topics sidebar.
══════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ── HEADER ── */
  .header__inner {
    padding: 0 24px;
    justify-content: space-between;
  }
  .header__logo {
    margin-right: 0;
  }
  /* Hide desktop's platform button and dropdown (not used at this size).
     Keep .header__platform-wrap and .header__search-btn rendered so the
     scroll-activated search icon can appear. margin-left:auto on the wrap
     pushes it (and the hamburger) flush to the right edge; flex order
     places the hamburger visually AFTER the wrap (DOM has it before). */
  .header__platform-btn,
  .header__platform-dropdown {
    display: none !important;
  }
  .header__platform-wrap {
    margin-left: auto;
    order: 1;
  }
  /* Show hamburger on tablet, render it last */
  .header__hamburger {
    display: inline-flex !important;
    order: 2;
  }

  /* ── HERO ── */
  .hero {
    width: auto;
    max-width: 100%;
    padding: 32px 24px 24px;
    align-items: stretch;
    text-align: left;
  }
  .hero__title {
    text-align: left;
    font-size: 36px;
  }
  .hero__sub {
    text-align: left;
  }
  /* Tablet uses desktop H1 copy */
  .hero__title-desktop {
    display: block;
  }
  .hero__title-mobile {
    display: none;
  }

  /* ── TWO-COL LAYOUT ── */
  .two-col-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .two-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px;
  }
  /* Homepage: the unclassed wrapper <div> around sectionsHeading + grid.
     Force it to fill the grid cell so cards aren't left-pinned. */
  .two-col > div {
    width: 100%;
    min-width: 0;
  }
  /* Hide Topics sidebar — hamburger menu handles nav */
  .topics-sidebar {
    display: none;
  }
  /* Keep section cards in 2-column grid per Figma */
  .sections-grid,
  .subcategory-grid,
  #subcategoriesGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* ── ARTICLE PAGE on tablet ── */
  /* Per Figma: no left sidebar, no TOC, article fills width */
  .article-layout {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 0;
  }
  .sidebar,
  .toc {
    display: none;
  }
  .article-main {
    padding: 0;
  }
  .article-nav {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ── TAG / SEARCH / ACTION pages on tablet ── */
  .tag-page__title {
    font-size: 24px;
    padding: 0 24px;
  }
  .tag-article-list {
    padding: 0 24px;
  }
}

@media (max-width: 767px) {
  /* NOTE: do NOT put overflow-x:hidden on html/body — it breaks the
     position:sticky header. Instead we rely on individual overrides
     of fixed-width elements (.hero, .two-col) below. */

  /* ── HEADER ── */
  .header__inner {
    padding: 0 16px;
    justify-content: space-between;
  }
  .header__logo {
    margin-right: 0;
  }
  .header__logo-img,
  .header__logo-wordmark {
    height: 28px;
    width: auto;
  }
  /* Hide desktop's platform button and dropdown (not used at this size).
     Keep .header__platform-wrap and .header__search-btn rendered so the
     scroll-activated search icon can appear. margin-left:auto on the wrap
     pushes it (and the hamburger) flush to the right edge; flex order
     places the hamburger visually AFTER the wrap (DOM has it before). */
  .header__platform-btn,
  .header__platform-dropdown {
    display: none !important;
  }
  .header__platform-wrap {
    margin-left: auto;
    order: 1;
  }
  /* Hamburger button (shown only on mobile), rendered last */
  .header__hamburger {
    display: inline-flex !important;
    order: 2;
  }

  /* ── HERO ── */
  .hero {
    width: auto;
    max-width: 100%;
    padding: 24px 16px 16px;
    align-items: stretch;
    text-align: left;
  }
  /* Swap H1 copy: hide desktop text, show mobile text */
  .hero__title-desktop {
    display: none;
  }
  .hero__title-mobile {
    display: block;
  }
  .hero__title {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-align: left;
    margin-bottom: 8px;
  }
  .hero__sub {
    font-size: 15px;
    text-align: left;
    margin-bottom: 16px;
  }

  /* Search card — flat on mobile, no gray wrapper */
  .hero__search-card {
    background: transparent;
    padding: 0;
    gap: 12px;
  }
  .hero__search-row {
    height: 48px;
    border-radius: 12px;
    border: 1px solid #e1e2e2;
    background: #ffffff;
  }
  .hero__search-input {
    font-size: 15px;
  }
  /* Mic button (shown only on mobile) */
  .hero__search-mic {
    display: inline-flex !important;
  }
  /* Hide the chips on mobile — Figma doesn't show them */
  .hero__chips {
    display: none;
  }

  /* Platform tabs — keep visible, allow horizontal scroll if too wide */
  .platform-tabs {
    margin-top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .platform-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Dropdown — fill nearly full width of hero */
  .hero__dropdown {
    top: 56px;
    left: 0;
    right: 0;
  }

  /* ── TWO-COL LAYOUT (homepage, category, tag, action, search) ── */
  .two-col-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .two-col {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  /* Hide the Topics sidebar on mobile — hamburger will handle nav later */
  .topics-sidebar {
    display: none;
  }

  /* Homepage section cards — flat list, no gray bg, divider between */
  .sections-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .section-card {
    background: transparent;
    border-radius: 0;
    padding: 16px 0;
    border-bottom: 1px solid #e1e2e2;
  }
  .section-card:last-child {
    border-bottom: none;
  }
  .section-card:hover {
    border-color: #e1e2e2;
    box-shadow: none;
  }
  .sections-area__heading {
    padding: 0 16px;
    font-size: 14px;
  }

  /* Subcategory cards — stack vertically, thinner visually */
  .subcategory-grid,
  #subcategoriesGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .subcategory-card {
    padding: 12px 16px;
    gap: 8px;
  }
  .subcategory-card__name {
    font-size: 20px;
  }

  /* ── ARTICLE PAGE ── */
  .article-layout {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 0;
  }
  .sidebar,
  .toc {
    display: none;
  }
  .article-main {
    padding: 0;
  }
  .breadcrumb {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .article-header__title {
    font-size: 24px;
    line-height: 1.25;
  }
  .article-body {
    font-size: 15px;
  }
  .article-body img {
    max-width: 100%;
    height: auto;
  }
  .article-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* ── TAG / SEARCH / ACTION article lists ── */
  .tag-page__title {
    font-size: 20px;
    padding: 0 16px;
    margin-top: 8px;
  }
  .tag-article-list {
    padding: 0 16px;
  }
  .tag-article-item {
    padding: 12px 16px;
  }

  /* Back button */
  .search-back,
  .action-back {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Footer */
  .footer__inner {
    padding: 16px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HAMBURGER MENU (mobile full-screen overlay)
   ────────────────────────────────────────────────────────────────────────
   Full-screen slide-in menu shown when the user taps the header
   hamburger button on tablet/mobile. Markup is inserted by
   hamburger.js into <div id="hamburgerMenu">. Body scroll is locked
   while open via .hamburger-menu-open on <body>.
   ════════════════════════════════════════════════════════════════════════ */
.hamburger-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #f4f4f6;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.hamburger-menu.open {
  display: flex;
}

.hamburger-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: sticky;
  top: 0;
  background: #f4f4f6;
  z-index: 1;
}

.hamburger-menu__logo-img {
  height: 28px;
  width: auto;
}

.hamburger-menu__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary, #1c1c1c);
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hamburger-menu__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Active platform indicator (shown under logo) */
.hamburger-menu__platform {
  padding: 0 16px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #1c1c1c);
  border-bottom: 1px solid #e1e2e2;
  margin-bottom: 12px;
}

.hamburger-menu__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 24px;
}

.hamburger-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--text-primary, #1c1c1c);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.12s;
}
.hamburger-menu__item:hover {
  background: #f0f2ff;
}
.hamburger-menu__item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hamburger-menu__item-name {
  flex: 1;
}
.hamburger-menu__item-chevron {
  color: var(--text-muted, #6b7280);
  flex-shrink: 0;
}

/* Prevent body scroll while menu is open */
body.hamburger-menu-open {
  overflow: hidden;
}
/* (end of stylesheet) */

/* ── Multi-article subcategory cards ──────────────────────────────────────
   Used when a subcategory has 2+ visible articles. The subcategory name
   becomes a non-link header; articles appear as bold links, with their
   card_chapters listed muted beneath each. Layout reuses the existing
   .subcategory-card__articles vertical stack. */

.subcategory-card--multi .subcategory-card__name--header {
  /* Same typography as the single-article card name, but not clickable */
  display: block;
  align-self: stretch;
}

.subcategory-card__article-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
}

.subcategory-card__article-title {
  color: #1c1c1c;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.05px;
  font-feature-settings:
    "liga" off,
    "clig" off;
  text-decoration: none;
  align-self: stretch;
  transition: color 0.15s;
}
.subcategory-card__article-title:hover {
  color: #4663d9;
  text-decoration: none;
}

.subcategory-card__chapters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  padding-left: 12px;
}

.subcategory-card__chapter-link {
  color: rgba(28, 28, 28, 0.55);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  font-feature-settings:
    "liga" off,
    "clig" off;
  text-decoration: none;
  align-self: stretch;
  transition: color 0.15s;
}
.subcategory-card__chapter-link:hover {
  color: #4663d9;
  text-decoration: none;
}

.subcategory-card__more-link {
  color: #4663d9;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 420;
  line-height: 18px;
  text-decoration: none;
  font-feature-settings:
    "liga" off,
    "clig" off;
}
.subcategory-card__more-link:hover {
  text-decoration: underline;
}

/* Phase 2d — Quill alignment + image resize support */
.article-body .ql-align-center  { text-align: center; }
.article-body .ql-align-right   { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }


/* ══════════════════════════════════════════════════════════════════════════