/* theme.css — additions and overrides on top of clients-theme.css.
   Pushes the Mercury-inspired base in a more confident, contemporary
   direction: bigger display serif, layered paper backgrounds, lighter
   borders, more deliberate hover, intentional whitespace. */

:root {
  /* deeper paper tone for topbar/section accents (warm gray, no chroma) */
  --paper-deep: #E5E3DE;
  --paper-deeper: #DEDCD6;
  --surface-2: #FBFAF8;
  /* extra accent tones for hovers */
  --accent-soft: rgba(122, 96, 71, 0.06);
  --accent-medium: rgba(122, 96, 71, 0.2);
  /* dark cardboard chrome — used for sidebar + select dark surfaces */
  --chrome: #1B1812;
  --chrome-2: #26211a;
  --chrome-3: #3a3327;
  --chrome-text: #f4f0e8;
  --chrome-text-2: #b8b0a0;
  --chrome-text-3: #807868;
  --chrome-border: rgba(255, 255, 255, 0.08);
  --chrome-accent: #E8622A; /* hazard orange — surfaces only on dark chrome */
}

/* ── Type ─────────────────────────────────────────────────────────── */
/* Cormorant Garamond is the serif face introduced on holding/welcome
   for hero headlines. Reuse here for section openers across the portal
   so the "warmth budget" stays consistent. */
.serif {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.01em;
}

/* Eyebrow label — small uppercase kicker above section heads, matches
   the wizard's .wel-kicker / .hold-next-kicker pattern. */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}

/* ── Shell refinements ────────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--paper-deep) !important;
}
.topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}
.topbar-logo:hover { text-decoration: none; }
.topbar-logo img { height: 18px; width: auto; opacity: 0.96; flex-shrink: 0; }
.topbar-brand-divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.topbar-brand-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Global command-K search lives in the topbar of the active shell */
.topbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 36px;
  padding: 0 80px 0 38px;
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  outline: none;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.topbar-search input:hover { background: var(--paper-deep); }
.topbar-search input:focus { background: var(--surface); border-color: var(--accent); cursor: text; }
.topbar-search input::placeholder { color: var(--text-3); }
.topbar-search > svg.icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-3);
  pointer-events: none;
}
.topbar-search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 4px;
  pointer-events: none;
}

.topbar-pillnav {
  display: inline-flex;
  gap: 0;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  position: relative;
}
.topbar-pillnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 120ms;
  position: relative;
  z-index: 1;
}
.topbar-pillnav a:hover { color: var(--text); text-decoration: none; }
.topbar-pillnav a.active {
  background: var(--text);
  color: #FFFFFF;
}
.topbar-pillnav a.active:hover { color: #FFFFFF; }

/* Status chip in topbar — communicates account state */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--amber-light);
  color: var(--amber);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-chip.active { background: var(--green-light); color: var(--green); }
.status-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  position: relative;
}
.status-chip.active .status-chip-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.4; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ⌘K hint */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--paper-deep);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar (active state shell) ─────────────────────────────────── */
.shell-body { display: flex; flex: 1; }

.side {
  display: flex;
  flex-direction: column;
  padding: 22px 12px 18px;
  gap: 1px;
  background: var(--chrome);
  border-right: 1px solid var(--chrome);
}
.side-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--chrome-text-3);
  padding: 16px 12px 10px;
}
.side-section:first-child { padding-top: 6px; }

.side a.side-item {
  text-decoration: none;
  color: var(--chrome-text-2);
  cursor: pointer;
}
.side a.side-item:hover { background: var(--chrome-2); color: var(--chrome-text); text-decoration: none; }
.side a.side-item:hover .side-icon { color: var(--chrome-text); }
.side a.side-item.active {
  background: var(--chrome-2);
  color: var(--chrome-text);
  font-weight: 500;
  border-left: none;
  position: relative;
}
.side a.side-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--chrome-accent);
  border-radius: 0 2px 2px 0;
}
.side a.side-item.active .side-icon { color: var(--chrome-accent); }

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 0;
  border-left: none;
  transition: background 120ms, color 120ms;
}
.side-icon {
  width: 16px;
  height: 16px;
  color: var(--chrome-text-3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.side-spacer { flex: 1; }

/* Account-manager card pinned to bottom of sidebar */
.am-card {
  margin: 12px 4px 0;
  padding: 14px;
  background: var(--chrome-2);
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  transition: border-color 120ms, background 120ms;
}
.am-card:hover { border-color: rgba(255,255,255,0.18); background: var(--chrome-3); }
.am-card-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.am-card-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.am-card-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid var(--chrome-2);
}
.am-card:hover .am-card-avatar::after { border-color: var(--chrome-3); }
.am-card-name { font-size: 13px; font-weight: 500; color: var(--chrome-text); line-height: 1.2; }
.am-card-role { font-size: 11px; color: var(--chrome-text-3); margin-top: 1px; }
.am-card-actions { display: flex; gap: 6px; margin-top: 4px; }
.am-card-actions a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 8px;
  font-size: 11px; font-weight: 500;
  border: 1px solid var(--chrome-border);
  border-radius: 7px;
  color: var(--chrome-text-2);
  background: var(--chrome);
  text-decoration: none;
  transition: all 120ms;
}
.am-card-actions a:hover { color: var(--chrome-text); border-color: rgba(255,255,255,0.18); background: var(--chrome-3); text-decoration: none; }
.am-card-actions svg { width: 12px; height: 12px; }

/* ── Page header ──────────────────────────────────────────────────── */
.page-head {
  padding: 56px 0 36px;
  border-bottom: none;
  margin-bottom: 0;
}
.page-head .eyebrow {
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-head .eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--border-strong);
  display: inline-block;
}
.page-head h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  color: var(--text);
  max-width: 920px;
}
.page-head .lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
@media (max-width: 760px) {
  .page-head { padding: 36px 0 24px; }
  .page-head h1 { font-size: 42px; }
}

/* ── Density modes (set on app-shell as a class) ──────────────────── */
.density-compact .page-head { padding: 32px 0 24px; }
.density-compact .page-head h1 { font-size: 40px; }
.density-compact .card { padding: 16px 18px; }
.density-compact .res-row { padding: 10px 14px; }

/* ── Resources ────────────────────────────────────────────────────── */
.res-search-wrap {
  position: relative;
  margin: 8px 0 36px;
}
.res-search-wrap > svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-3);
  pointer-events: none;
}
.res-search-kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 4px;
  pointer-events: none;
}
.res-search {
  width: 100%;
  height: 56px;
  padding: 0 88px 0 50px;
  font-family: var(--font);
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  color: var(--text);
  outline: none;
  letter-spacing: -0.005em;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.res-search:hover { border-color: var(--border-strong); }
.res-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.res-search::placeholder { color: var(--text-3); letter-spacing: -0.005em; }

/* Bento-style category grid: featured card spans 2 columns + 2 rows */
.res-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(132px, auto);
  gap: 12px;
  margin-bottom: 48px;
}
.res-categories .res-cat-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 960px) {
  .res-categories { grid-template-columns: repeat(2, 1fr); }
  .res-categories .res-cat-card:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .res-categories { grid-template-columns: 1fr; }
  .res-categories .res-cat-card:first-child { grid-column: span 1; }
}

.res-cat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.res-cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}
.res-cat-card:hover {
  border-color: var(--accent-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  text-decoration: none;
}
.res-cat-card:hover::after { opacity: 1; }
.res-cat-card > * { position: relative; z-index: 1; }
.res-cat-card .icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.res-cat-card .icon-wrap svg { width: 20px; height: 20px; }
.res-cat-card .cat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.res-cat-card .cat-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
}
.res-cat-card .cat-desc {
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}
.res-cat-card .cat-cta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms, transform 160ms;
}
.res-cat-card:hover .cat-cta { opacity: 1; transform: translateY(0); }
/* Featured first card: richer typography */
.res-cat-card:first-child .cat-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin-top: 8px;
}
.res-cat-card:first-child .cat-desc {
  font-size: 14px;
  max-width: 380px;
}
.res-cat-card:first-child .icon-wrap { width: 48px; height: 48px; border-radius: 12px; }
.res-cat-card:first-child .icon-wrap svg { width: 22px; height: 22px; }

/* Section heading inside resources index */
.res-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 40px 0 18px;
}
.res-section-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0;
  flex-shrink: 0;
}

/* Resource list rows (within a category page) */
.res-list { display: flex; flex-direction: column; gap: 4px; }
.res-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.res-row:hover { border-color: var(--paper-deep); background: var(--surface-2); text-decoration: none; }
.res-row .type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-3);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.res-row .type-badge svg { width: 16px; height: 16px; }
.res-row .type-badge.pdf { background: rgba(181,64,61,0.08); color: var(--red); }
.res-row .type-badge.article { background: var(--accent-light); color: var(--accent); }
.res-row .type-badge.video { background: rgba(140,101,25,0.1); color: var(--amber); }
.res-row .type-badge.faq { background: var(--green-light); color: var(--green); }
.res-row .row-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; }
.res-row .row-meta { font-size: 12px; color: var(--text-3); }
.res-row .row-arrow {
  color: var(--text-3);
  margin-left: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms, transform 120ms;
}
.res-row:hover .row-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }

/* Article detail layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 64px;
  margin-top: 24px;
}
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
}

.article-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  max-width: 680px;
}
.article-body > p:first-child::first-letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.86;
  padding: 4px 12px 0 0;
  color: var(--text);
}
.article-body h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 48px 0 14px;
  padding-top: 12px;
  position: relative;
}
.article-body h2:first-child { margin-top: 0; padding-top: 0; }
.article-body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--accent);
}
.article-body h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.article-body p { color: var(--text-2); margin: 0 0 18px; }
.article-body p strong { color: var(--text); font-weight: 600; }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 18px; color: var(--text-2); }
.article-body li { margin-bottom: 6px; line-height: 1.65; }
.article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(122,96,71,0.3); text-underline-offset: 2px; }

.article-toc {
  position: sticky;
  top: 88px;
  align-self: flex-start;
}
.article-toc-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.article-toc-list { list-style: none; padding: 0; margin: 0; }
.article-toc-list li { margin: 0; }
.article-toc-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms;
}
.article-toc-list a::before {
  content: '';
  width: 6px; height: 1px;
  background: var(--border-strong);
  flex-shrink: 0;
  transition: width 160ms, background 160ms;
}
.article-toc-list a:hover { color: var(--text-2); text-decoration: none; }
.article-toc-list a:hover::before { width: 12px; background: var(--text-3); }
.article-toc-list a.active { color: var(--accent); font-weight: 500; }
.article-toc-list a.active::before { width: 16px; background: var(--accent); }

/* Article meta strip */
.article-meta {
  display: flex;
  gap: 20px;
  padding: 16px 0 20px;
  margin: 8px 0 22px;
  border-bottom: 1px solid var(--paper-deep);
  font-size: 12px;
  color: var(--text-3);
}
.article-meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.article-meta svg { width: 12px; height: 12px; }

/* Key-value tables inside articles */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.kv-table th, .kv-table td {
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.kv-table th {
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
}
.kv-table td { color: var(--text-2); }
.kv-table tr:last-child td { border-bottom: none; }
.kv-table td:first-child { color: var(--text); font-weight: 500; }

/* Pull-quote-ish callout used inline */
.article-callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  position: relative;
}
.article-callout::before {
  content: '';
  position: absolute;
  left: -1px; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.article-callout svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-2); }
.breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 120ms;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.open { border-color: var(--accent-medium); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.faq-q .chevron { color: var(--text-3); transition: transform 200ms, color 200ms; }
.faq-item.open .faq-q .chevron { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 640px;
}
.faq-a p { margin: 0 0 10px; color: var(--text-2); }

/* ── Invoices ─────────────────────────────────────────────────────── */
.inv-summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
.metric-tile {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.metric-tile .metric-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.metric-tile .metric-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metric-tile .metric-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 10px;
}
.metric-tile.accent { background: var(--text); color: #fff; border-color: var(--text); }
.metric-tile.accent .metric-label { color: rgba(255,255,255,0.55); }
.metric-tile.accent .metric-value { color: #fff; }
.metric-tile.accent .metric-sub { color: rgba(255,255,255,0.7); }

.inv-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.inv-table th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.inv-table th.num, .inv-table td.num { text-align: right; }
.inv-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr.clickable { cursor: pointer; }
.inv-table tr.clickable:hover td { background: rgba(0,0,0,0.015); }
.inv-table tr.selected td { background: var(--accent-light); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  text-transform: capitalize;
}
.status-pill.paid { background: var(--green-light); color: var(--green); }
.status-pill.open { background: var(--amber-light); color: var(--amber); }
.status-pill.overdue { background: var(--red-light); color: var(--red); }
.status-pill.draft { background: rgba(0,0,0,0.06); color: var(--text-3); }
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Two-column layout: invoice table + detail panel */
.inv-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .inv-grid { grid-template-columns: 1fr; }
}
.inv-detail {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  padding: 26px;
  position: sticky;
  top: 88px;
}
.inv-detail .inv-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.inv-detail .inv-total {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.022em;
  margin: 2px 0 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.inv-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.inv-line:first-of-type { border-top: none; }
.inv-line .line-amt { color: var(--text); font-weight: 500; }
.inv-line.subtotal { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-strong); font-weight: 500; color: var(--text); }

.doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background 120ms;
}
.doc-row:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.doc-row .doc-icon { color: var(--text-3); flex-shrink: 0; }
.doc-row .doc-name { flex: 1; }
.doc-row .doc-size { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Submission (locked) ──────────────────────────────────────────── */
.lock-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  margin-bottom: 28px;
}
.lock-banner .lock-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lock-banner .lock-text { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.lock-banner .lock-text strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; font-size: 14px; }
.lock-banner .lock-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--paper-deep);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 120ms, background 120ms;
}
.lock-banner .lock-cta:hover { border-color: var(--border-strong); background: var(--bg); text-decoration: none; }

.sub-section {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 120ms;
}
.sub-section.open { border-color: var(--border-strong); }
.sub-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms;
}
.sub-section-head:hover { background: var(--surface-2); }
.sub-section-head .step-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sub-section.open .sub-section-head .step-num { background: var(--accent-light); color: var(--accent); }
.sub-section-head .step-title { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.sub-section-head .step-summary { font-size: 12.5px; color: var(--text-3); margin-right: 10px; }
.sub-section-head .chevron { color: var(--text-3); transition: transform 200ms; }
.sub-section.open .sub-section-head .chevron { transform: rotate(180deg); }
.sub-section-body {
  padding: 6px 22px 22px;
  border-top: 1px solid var(--paper-deep);
}
.sub-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  padding-top: 14px;
}
.sub-fact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.sub-fact-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}
.sub-fact-value.muted { color: var(--text-3); }
.sub-fact-full { grid-column: 1 / -1; }

/* ── Empty states ─────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.empty h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.empty p { font-size: 13px; color: var(--text-3); margin: 0; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.55; }

/* ── Holding page Resources surface ───────────────────────────────── */
.hold-resources {
  margin: 24px auto 0;
  max-width: 640px;
  padding: 0 20px;
}
.hold-resources-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 20px;
  padding: 26px 30px;
  display: flex;
  gap: 22px;
  align-items: center;
  transition: border-color 180ms, transform 180ms, box-shadow 180ms;
  overflow: hidden;
}
.hold-resources-card:hover {
  border-color: var(--accent-medium);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.04);
  text-decoration: none;
}
.hold-resources-card.is-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.hold-resources-card.is-primary:hover {
  background: #2a2a26;
  border-color: #2a2a26;
}
.hold-resources-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hold-resources-card.is-primary .hold-resources-icon {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.hold-resources-text { flex: 1; min-width: 0; }
.hold-resources-eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.hold-resources-card.is-primary .hold-resources-eyebrow { color: rgba(255,255,255,0.5); }
.hold-resources-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.hold-resources-card.is-primary .hold-resources-title { color: #FFFFFF; }
.hold-resources-sub {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 360px;
}
.hold-resources-card.is-primary .hold-resources-sub { color: rgba(255,255,255,0.7); }
.hold-resources-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--text);
  border-radius: 999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 120ms, transform 120ms;
}
.hold-resources-cta:hover { background: var(--bg); color: var(--text); text-decoration: none; }

/* ── Settings ─────────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
}
.settings-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

/* ── Avatar menu in topbar ────────────────────────────────────────── */
.av-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Small utility ────────────────────────────────────────────────── */
.spacer-24 { height: 24px; }
.spacer-36 { height: 36px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost-sm:hover { background: rgba(0,0,0,0.04); color: var(--text); text-decoration: none; }
.btn-ghost-sm svg { width: 13px; height: 13px; }

/* main content max width */
.main {
  flex: 1;
  padding: 0 40px 96px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}


/* ═════════════════════════════════════════════════════════════════ */
/* Entry animations — staggered fade-up                              */
/* ═════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.res-categories .res-cat-card {
  opacity: 0;
  animation: fadeUp 360ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
.res-categories .res-cat-card:nth-child(1) { animation-delay: 40ms; }
.res-categories .res-cat-card:nth-child(2) { animation-delay: 100ms; }
.res-categories .res-cat-card:nth-child(3) { animation-delay: 160ms; }
.res-categories .res-cat-card:nth-child(4) { animation-delay: 220ms; }
.res-categories .res-cat-card:nth-child(5) { animation-delay: 280ms; }
.res-categories .res-cat-card:nth-child(6) { animation-delay: 340ms; }
.res-categories .res-cat-card:nth-child(7) { animation-delay: 400ms; }

.res-list .res-row {
  opacity: 0;
  animation: fadeUp 320ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
.res-list .res-row:nth-child(1) { animation-delay: 30ms; }
.res-list .res-row:nth-child(2) { animation-delay: 80ms; }
.res-list .res-row:nth-child(3) { animation-delay: 130ms; }
.res-list .res-row:nth-child(4) { animation-delay: 180ms; }
.res-list .res-row:nth-child(5) { animation-delay: 230ms; }

.inv-summary .metric-tile {
  opacity: 0;
  animation: fadeUp 360ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
.inv-summary .metric-tile:nth-child(1) { animation-delay: 40ms; }
.inv-summary .metric-tile:nth-child(2) { animation-delay: 100ms; }
.inv-summary .metric-tile:nth-child(3) { animation-delay: 160ms; }

.page-head {
  animation: fadeUp 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ═════════════════════════════════════════════════════════════════ */
/* Linear-style command palette trigger badge in topbar              */
/* ═════════════════════════════════════════════════════════════════ */
.topbar-cmd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-3);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
  min-width: 280px;
}
.topbar-cmd:hover { color: var(--text-2); background: var(--paper-deep); border-color: var(--paper-deeper); }
.topbar-cmd > svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.topbar-cmd .label { flex: 1; text-align: left; }
.topbar-cmd .kbd { background: var(--surface); border-color: var(--border); }

/* ═════════════════════════════════════════════════════════════════ */
/* Numeric strength — make tabular numerals feel more confident      */
/* ═════════════════════════════════════════════════════════════════ */
.num-confident {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.015em;
  font-weight: 500;
}


/* ═════════════════════════════════════════════════════════════════ */
/* Type system override — Mercury / Stripe-class SaaS sans (Inter)   */
/* ═════════════════════════════════════════════════════════════════ */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

html, body, input, select, textarea, button {
  font-family: var(--font) !important;
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* Page headers: switch from Cormorant serif to Inter at heavy weight,
   tight tracking. This is the single biggest Mercury-mode move. */
.page-head h1 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 44px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.028em !important;
  margin: 0 0 16px !important;
  color: var(--text);
}
.page-head .lead {
  font-size: 15.5px !important;
  letter-spacing: -0.005em !important;
  max-width: 580px;
}
.page-head .eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Section heads inside pages */
.res-section-head h2 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: -0.018em !important;
  line-height: 1.2 !important;
}

/* Resource category card titles */
.res-cat-card .cat-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}
.res-cat-card:first-child .cat-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  letter-spacing: -0.022em !important;
  line-height: 1.18 !important;
}

/* Metric numerals: Inter heavy with tabular nums, not serif */
.metric-tile .metric-value {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

/* Invoice detail total */
.inv-detail .inv-total {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  letter-spacing: -0.026em !important;
}

/* Article body — sans for clean SaaS reading */
.article-body {
  font-size: 15.5px;
  line-height: 1.68;
  letter-spacing: -0.005em;
}
.article-body h2 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.018em !important;
  margin: 44px 0 12px !important;
}
.article-body h2::before { width: 28px; }
.article-body > p:first-child::first-letter {
  font-family: var(--font) !important;
  font-weight: 500;
  font-size: 3.2em;
  line-height: 0.96;
  float: left;
  padding: 4px 14px 0 0;
}

/* Holding page Resources hero: keep serif on the standout "While you wait"
   primary card and on the "Read the LW12 warehouse handbook" line because
   those ARE the brand moments. Sub copy switches to sans. */
.hold-resources-title {
  /* keep serif here — brand poetry */
}
.hold-resources-eyebrow {
  /* keep italic serif eyebrow */
}

/* Holding page Happily Handled heading: keep its Cormorant — it's brand. */

/* Sidebar text already inherits, just tighten tracking */
.side-item { letter-spacing: -0.005em; }
.side-section { letter-spacing: 0.9px; font-size: 10.5px; }

/* Topbar brand name */
.topbar-brand-name { letter-spacing: -0.012em; }

/* Buttons */
.btn { font-family: var(--font) !important; letter-spacing: -0.005em; }

/* FAQ question text — sans, slightly heavier */
.faq-q { font-weight: 500; letter-spacing: -0.005em; }

/* Submission section titles */
.sub-section-head .step-title { letter-spacing: -0.005em; }

/* Status chip more confident */
.status-chip { font-weight: 500; }

/* Dashboard greeting "Hi, Maya." — Inter heavy, big, Mercury-confident */
.dash-greeting {
  font-family: var(--font);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
}

/* Empty state headings — sans for SaaS feel */
.empty h3 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.015em !important;
}


/* ═════════════════════════════════════════════════════════════════ */
/* ORIGIN-STYLE — light sidebar, mono tracked labels, in-page tabs   */
/* The previous dark-chrome sidebar / Cormorant brand serif moves     */
/* are overridden here. Brand serif kept ONLY on Holding "Happily     */
/* Handled" and the "While you wait" hero.                            */
/* ═════════════════════════════════════════════════════════════════ */

:root {
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Universal mono tracked label — used for sidebar groups, page section
   labels, eyebrows. */
.label-mono,
.eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  color: var(--text-3);
  white-space: nowrap;
}
.eyebrow::after { display: none !important; }

/* ─── Sidebar (flip back to light, Origin-style) ─── */
.side {
  background: var(--surface) !important;
  border-right: 1px solid var(--paper-deep) !important;
  padding: 28px 14px 18px !important;
  gap: 2px !important;
}
.side-section {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--text-3) !important;
  padding: 18px 14px 8px !important;
}
.side-section:first-child { padding-top: 10px !important; }

.side a.side-item {
  color: var(--text-2) !important;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 10px 14px !important;
  border-radius: 10px !important;
}
.side a.side-item:hover {
  background: var(--bg) !important;
  color: var(--text-2) !important;
}
.side a.side-item:hover .side-icon { color: var(--text-2) !important; }
.side a.side-item.active {
  background: var(--text) !important;
  color: var(--surface) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.side a.side-item.active::before { display: none !important; }
.side a.side-item.active .side-icon { color: var(--surface) !important; }
.side-icon { color: var(--text-3) !important; }

/* Sidebar logo row: Origin shows the wordmark big at top */
.side-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 26px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--paper-deep);
}
.side-logo-row img { height: 22px; width: auto; }

/* Ask anything button at sidebar bottom */
.side-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--paper-deep);
  border-radius: 10px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  text-decoration: none;
}
.side-ask:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.side-ask .sparkle { color: #6F5AE8; flex-shrink: 0; }

/* Reset AM card for light surround */
.am-card {
  background: var(--surface) !important;
  border: 1px solid var(--paper-deep) !important;
}
.am-card:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.am-card-name { color: var(--text) !important; }
.am-card-role { color: var(--text-3) !important; }
.am-card-actions a {
  background: var(--bg) !important;
  border-color: var(--paper-deep) !important;
  color: var(--text-2) !important;
}
.am-card-actions a:hover { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.am-card-avatar { background: var(--text) !important; color: var(--surface) !important; }
.am-card-avatar::after { border-color: var(--surface) !important; }
.am-card:hover .am-card-avatar::after { border-color: var(--surface-2) !important; }

/* ─── Topbar: strip brand-name + add right-side floating utility buttons ─── */
.topbar {
  padding: 0 24px 0 28px !important;
  height: 64px !important;
}
.topbar-logo { display: none !important; } /* logo lives in sidebar now */
.topbar-brand-divider { display: none !important; }
.topbar-brand-name { display: none !important; }

/* Floating circular utility buttons */
.topbar-utils {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.util-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  flex-shrink: 0;
}
.util-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.util-btn svg { width: 16px; height: 16px; }
.util-btn.is-avatar {
  background: linear-gradient(135deg, #C8B8D8 0%, #8A95E0 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Topbar page title (Origin shows "Spending" / "Settings" at top-left of content) */
.topbar-page-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0;
  flex: 1;
  white-space: nowrap;
}

/* Remove pill nav default backgrounds — we'll use in-page tabs instead */
.topbar-pillnav,
.topbar-cmd { display: none !important; }
.status-chip { display: none !important; }

/* ─── In-page tabs (Origin signature) ─── */
.page-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--paper-deep);
}
.page-tabs a {
  padding: 12px 18px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.page-tabs a:hover { color: var(--text-2); }
.page-tabs a.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 500;
}

/* ─── Page header: Origin style — title + tabs, no big serif, no eyebrow rule ─── */
.page-head {
  padding: 28px 0 0 !important;
  margin-bottom: 0 !important;
  animation: none !important;
}
.page-head h1 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.022em !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
  color: var(--text);
}
.page-head .eyebrow {
  margin-bottom: 14px !important;
}
.page-head .eyebrow::after { display: none !important; }
.page-head .lead {
  font-size: 14.5px !important;
  color: var(--text-2) !important;
  line-height: 1.55 !important;
  max-width: 620px;
  margin-top: 4px !important;
}

/* ─── Resources: tighter, more Origin (denser cards, less serif) ─── */
.res-cat-card:first-child .cat-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: -0.018em !important;
  margin-top: 6px;
}
.res-cat-card .cat-meta {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}
.res-section-head h2 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.015em !important;
}

/* ─── Resource rows: Origin-style with mono meta ─── */
.res-row .row-meta {
  font-family: var(--font) !important;
  font-size: 12px;
}
.res-row .type-badge {
  width: 32px !important; height: 32px !important;
  border-radius: 999px !important;
}

/* ─── Metric tiles: Origin numbers — bold sans, tight, no serif ─── */
.metric-tile {
  border-radius: 12px !important;
  padding: 20px 22px !important;
}
.metric-tile .metric-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
}
.metric-tile .metric-value {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.028em !important;
}

/* ─── Invoice table tightening ─── */
.inv-table th {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--paper-deep) !important;
}
.inv-table td { border-bottom: 1px solid var(--paper-deep) !important; }
.status-pill {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px 4px 8px !important;
}

/* ─── Search input: Origin-style ─── */
.res-search {
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  background: var(--surface) !important;
}
.res-search-wrap > svg { width: 16px !important; height: 16px !important; }

/* ─── Submission section heads: mono summary chip ─── */
.sub-section-head .step-summary {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-3);
}
.sub-fact-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}

/* ─── Article meta strip ─── */
.article-meta .meta-item {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

/* ─── Floating toast notification (Origin pattern) ─── */
.toast {
  position: fixed;
  top: 18px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  z-index: 100;
  animation: toastIn 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.toast .toast-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-light); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
}
.toast .toast-close {
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: none; color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.toast .toast-close:hover { background: var(--bg); color: var(--text); }

/* Strip leftover Mercury moves we don't want anymore */
.page-head h1 + .lead { margin-top: 4px; }


/* Origin pattern: topbar already shows the page name. Reduce the page-head
   h1 below it so it acts as a section title (the lead-in text), not a
   duplicate. */
.page-head.has-topbar-title h1 { display: none; }
.page-head.has-topbar-title { padding: 24px 0 22px !important; }

/* Make sure metric tile values stay sans heavy */
.metric-tile.accent .metric-value { font-family: var(--font) !important; }


/* ═════════════════════════════════════════════════════════════════ */
/* HELP-CENTER (Brevo-style) — Resources index + Article patterns    */
/* Adapted to LW12 paper + cardboard palette                          */
/* ═════════════════════════════════════════════════════════════════ */

/* Hero band at top of Resources index */

.hc-hero {
  background: var(--paper-deep);
  border-radius: 28px;
  padding: 56px 56px 72px;
  margin: -24px -36px 64px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
@media (max-width: 980px) {
  .hc-hero { grid-template-columns: 1fr; padding: 36px 28px; margin: -24px -20px 40px; }
}
.hc-hero > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-hero h1 {
  font-family: var(--font);
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 0 0 24px;
  color: var(--accent);
  max-width: 580px;
}
.hc-hero .hc-hero-sub {
  font-size: 15px;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 460px;
  line-height: 1.5;
  font-weight: 500;
}
.hc-hero-search-wrap { position: relative; max-width: 540px; }
.hc-hero-search-wrap > svg {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-3);
}
.hc-hero-search {
  width: 100%;
  height: 64px;
  padding: 0 130px 0 54px;
  background: var(--surface);
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  letter-spacing: -0.005em;
}
.hc-hero-search::placeholder { color: var(--text-3); font-weight: 400; }
.hc-hero-search-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 13px 26px;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.hc-hero-search-btn:hover { background: var(--text-2); }
.hc-hero-common {
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 20px;
  letter-spacing: -0.005em;
}
.hc-hero-common a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-medium);
  text-underline-offset: 3px;
  margin: 0 2px;
}
.hc-hero-common a:hover { text-decoration-color: var(--accent); }
.hc-hero-feature {
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}
.hc-hero-feature-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.hc-hero-feature-icon svg { width: 28px; height: 28px; }
.hc-hero-feature h3 {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.024em;
  margin: 0 0 8px;
  color: #fff;
  line-height: 1.08;
}
.hc-hero-feature p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
  line-height: 1.5;
}
.hc-hero-feature .feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: #fff;
  color: var(--accent);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
  letter-spacing: -0.005em;
}
.hc-hero-feature .feature-cta:hover { background: var(--bg); color: var(--accent); text-decoration: none; }

/* Section header for help-center sections */
.hc-section {
  margin-bottom: 96px;
}
.hc-section-title {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.026em;
  text-align: center;
  margin: 0 0 36px;
  color: var(--accent);
  line-height: 1.05;
}

/* FAQ feature block — 2-column (FAQ list + illustration) */
.hc-faq-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) {
  .hc-faq-block { grid-template-columns: 1fr; }
  .hc-faq-illo { display: none; }
}
.hc-faq-list {
  background: transparent;
  border: 1px solid var(--accent-medium);
  border-radius: 16px;
  overflow: hidden;
  padding: 6px 0;
}
.hc-faq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-top: 1px solid var(--paper-deep);
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: background 120ms;
}
.hc-faq-row:first-child { border-top: none; }
.hc-faq-row:hover { background: var(--accent-light); text-decoration: none; color: var(--accent); }
.hc-faq-row:hover > svg { color: var(--accent); }
.hc-faq-row > svg { color: var(--text-3); }
.hc-faq-illo {
  background: var(--accent-light);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hc-faq-illo svg {
  width: 60%;
  height: auto;
  color: var(--accent);
}

/* Knowledge base 3-column grid */
.hc-kb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .hc-kb { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hc-kb { grid-template-columns: 1fr; }
}
.hc-kb-card {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 18px;
  padding: 36px 28px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.hc-kb-card:hover {
  border-color: var(--accent-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  text-decoration: none;
}
.hc-kb-icon {
  width: 56px; height: 56px;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hc-kb-icon svg { width: 44px; height: 44px; }
.hc-kb-title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 8px;
}
.hc-kb-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 220px;
}
.hc-kb-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}

/* "More resources" section — warmer paper background panel */
.hc-more {
  background: #F0EBE0;
  border-radius: 18px;
  padding: 56px 40px;
  margin-bottom: 64px;
}
.hc-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}
.hc-more-grid.row-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .hc-more-grid, .hc-more-grid.row-2 { grid-template-columns: 1fr; }
}
.hc-more-card {
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.hc-more-card:hover { text-decoration: none; }
.hc-more-icon {
  width: 36px; height: 36px;
  color: var(--accent);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-more-icon svg { width: 32px; height: 32px; }
.hc-more-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 6px;
}
.hc-more-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.hc-more-cta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* New articles section — 3 column */
.hc-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .hc-articles { grid-template-columns: 1fr; }
}
.hc-article-card {
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 120ms, transform 120ms;
}
.hc-article-card:hover { border-color: var(--accent-medium); transform: translateY(-1px); text-decoration: none; }
.hc-article-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 14px;
  align-self: flex-start;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* Row wrapper for multiple chips on one card. Resets per-chip margin
   and lets the wrapper own the gap below. */
.hc-article-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.hc-article-chips .hc-article-chip { margin-bottom: 0; }
/* Type chips — filled variants that pop next to the (light) category
   chip. Uppercase + tight letterspacing makes them read as a tag. */
.hc-article-chip--howto,
.hc-article-chip--sop,
.hc-article-chip--overview {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}
.hc-article-chip--howto    { background: var(--accent); color: #fff; }
.hc-article-chip--sop      { background: var(--text-2); color: #fff; }
/* Overview uses an outlined treatment so it reads as visually distinct
   from the filled How-to/SOP chips without introducing a foreign hue. */
.hc-article-chip--overview {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  padding: 2.5px 9px;  /* trim a hair so the border doesn't grow the chip */
}
.hc-article-title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.25;
}
.hc-article-desc {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 16px;
  line-height: 1.5;
  flex: 1;
}
.hc-article-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Still have questions CTA — dark cardboard panel */
.hc-cta {
  background: var(--chrome);
  color: var(--chrome-text);
  border-radius: 18px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 36px;
  align-items: center;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .hc-cta { grid-template-columns: 1fr; }
  .hc-cta-illo { display: none; }
}
.hc-cta h2 {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.026em;
  margin: 0 0 14px;
  color: #fff;
  max-width: 420px;
  line-height: 1.05;
}
.hc-cta p {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 22px;
  max-width: 440px;
  line-height: 1.5;
}
.hc-cta-actions { display: flex; gap: 10px; }
.hc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.hc-cta-btn.primary {
  background: #fff;
  color: var(--chrome);
}
.hc-cta-btn.primary:hover { background: var(--bg); text-decoration: none; color: var(--chrome); }
.hc-cta-btn.secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.hc-cta-btn.secondary:hover { background: rgba(255,255,255,0.05); text-decoration: none; color: #fff; }
.hc-cta-illo {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--chrome-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
}
.hc-cta-illo svg { width: 80px; height: 80px; }

/* ─── Article page (help-center style with left TOC) ─── */

.hc-article-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .hc-article-layout { grid-template-columns: 1fr; gap: 24px; }
  .hc-article-toc { position: static !important; }
}
.hc-article-toc {
  position: sticky;
  top: 96px;
}
.hc-article-toc-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-deep);
  margin-bottom: 12px;
}
.hc-article-toc ol { list-style: none; padding: 0; margin: 0; }
.hc-article-toc ol li { margin: 0; }
.hc-article-toc a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-2);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  transition: color 120ms, border-color 120ms, background 120ms;
  line-height: 1.4;
  margin-left: -2px;
}
.hc-article-toc a:hover { color: var(--text); }
.hc-article-toc a.active {
  background: var(--accent-light);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

.hc-article {
  max-width: 720px;
}
.hc-article > h1 {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--text);
  margin: 0 0 18px;
  line-height: 1.15;
}

.hc-plans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 10px;
  font-size: 13px;
}
.hc-plans-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-right: 8px;
  white-space: nowrap;
}
.hc-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: var(--bg);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-plan-chip > svg { width: 12px; height: 12px; color: var(--green); flex-shrink: 0; }

.hc-article p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 18px;
}
.hc-article p strong { color: var(--text); font-weight: 600; }
.hc-article > p:first-of-type { font-size: 16px; }
.hc-article a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(122,96,71,0.3); text-underline-offset: 2px; }

.hc-article h2 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 48px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hc-article h2 .h2-glyph {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hc-article h2 .h2-glyph svg { width: 16px; height: 16px; }
.hc-article h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 28px 0 10px;
}

/* Numbered ordered lists with circular accent numbers */
.hc-article .hc-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
  counter-reset: hcstep;
}
.hc-article .hc-steps > li {
  counter-increment: hcstep;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}
.hc-article .hc-steps > li::before {
  content: counter(hcstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px; height: 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* "Good to know" callout — calm, paper card with serif italic eyebrow */
.hc-callout {
  background: #EFEAE1;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 18px 0 22px;
  position: relative;
}
.hc-callout-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.hc-callout-eyebrow svg { width: 14px; height: 14px; }
.hc-callout p { font-size: 14px; color: var(--text-2); margin: 0; line-height: 1.55; }

.hc-callout.warn { background: #FAF1E2; }
.hc-callout.warn .hc-callout-eyebrow { color: var(--amber); }
.hc-callout.danger { background: #FCEEED; }
.hc-callout.danger .hc-callout-eyebrow { color: var(--red); }

/* Screenshot placeholders inside article */
.hc-screenshot {
  background: var(--bg);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  aspect-ratio: 16 / 6;
  margin: 8px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* What's next section */
.hc-whats-next {
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--paper-deep);
}
.hc-whats-next h2 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hc-whats-next h2 svg { width: 18px; height: 18px; color: var(--accent); }
.hc-whats-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hc-whats-next li {
  padding: 8px 0;
  font-size: 14px;
}
.hc-whats-next li::before {
  content: '•';
  color: var(--text-3);
  margin-right: 10px;
}
.hc-whats-next a {
  color: var(--accent);
  text-decoration: none;
}
.hc-whats-next a:hover { text-decoration: underline; }

/* Have a question footer */
.hc-have-q {
  margin-top: 36px;
  padding: 22px 0 0;
  border-top: 1px solid var(--paper-deep);
}
.hc-have-q h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.015em;
}
.hc-have-q h3 svg { width: 16px; height: 16px; color: var(--accent); }
.hc-have-q p {
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0 0 10px;
  line-height: 1.55;
}

/* Was this helpful? footer */
.hc-helpful {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--surface-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hc-helpful-label {
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 500;
}
.hc-helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 120ms;
}
.hc-helpful-btn:hover { border-color: var(--border-strong); }
.hc-helpful-btn svg { width: 14px; height: 14px; }
.hc-helpful-stat {
  font-size: 12px;
  color: var(--text-3);
  margin-left: auto;
}

.topbar-logo-row {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-logo-row img { height: 22px; width: auto; opacity: 0.96; }
.topbar-logo-row:hover { text-decoration: none; }

.side-logo-row { display: none !important; }

.hc-hero {
  margin: 16px -36px 64px !important;
  padding: 64px 56px 72px !important;
}
@media (max-width: 980px) {
  .hc-hero { margin: 16px -20px 40px !important; padding: 40px 28px !important; }
}

.topbar { justify-content: space-between; }


/* ── Glossary ─────────────────────────────────────────────────────── */
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.glossary-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--paper-deep);
  align-items: start;
}
.glossary-item:first-child { border-top: 1px solid var(--paper-deep); }
@media (max-width: 760px) {
  .glossary-item { grid-template-columns: 1fr; gap: 4px; }
}
.glossary-term {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
}
.glossary-def {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
  letter-spacing: -0.005em;
}


/* Sub-header bar (breadcrumb + search) shown on category and article pages */
.hc-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 20px;
  border-bottom: 1px solid var(--paper-deep);
  margin-bottom: 28px;
}
.hc-subheader .breadcrumb { margin-bottom: 0; }
.hc-subheader-search {
  position: relative;
  width: 560px;
  max-width: 60%;
  flex-shrink: 0;
}
.hc-subheader-search > svg {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-3);
  pointer-events: none;
}
.hc-subheader-search input {
  width: 100%;
  height: 56px;
  padding: 0 120px 0 48px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  outline: none;
  letter-spacing: -0.005em;
  transition: border-color 120ms;
}
.hc-subheader-search input:hover { border-color: var(--border-strong); }
.hc-subheader-search input:focus { border-color: var(--accent); }
.hc-subheader-search input::placeholder { color: var(--text-3); }
.hc-subheader-search button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 11px 26px;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.hc-subheader-search button:hover { background: var(--text-2); }
@media (max-width: 760px) {
  .hc-subheader { flex-direction: column; align-items: stretch; gap: 12px; }
  .hc-subheader-search { width: 100%; }
}


/* Polished category page (Brevo-style) */
.hc-cat-head {
  margin: 28px 0 36px;
}
.hc-cat-head h1 {
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--accent);
}
.hc-cat-head p {
  font-size: 15.5px;
  color: var(--text-2);
  max-width: 640px;
  margin: 0;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.hc-cat-head::after { display: none; }

.hc-cat-section { margin: 0 0 36px; }
.hc-cat-section-head {
  margin-bottom: 8px;
}
.hc-cat-section-head h2 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 4px;
}
.hc-cat-section-head .hc-cat-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hc-cat-section-head { padding-bottom: 12px; border-bottom: 1px solid var(--paper-deep); }

.hc-cat-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hc-cat-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 14px 18px 8px;
  border-bottom: 1px solid var(--paper-deep);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 120ms, color 120ms;
  cursor: pointer;
  border-radius: 8px;
}
.hc-cat-article-row:last-child { border-bottom: none; }
.hc-cat-article-row:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.hc-cat-article-row .row-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hc-cat-article-row .row-icon svg { width: 16px; height: 16px; }
.hc-cat-article-row .row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-cat-article-row .row-text .meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hc-cat-article-row > .row-chev {
  color: var(--text-3);
  flex-shrink: 0;
  transition: color 120ms, transform 120ms;
}
.hc-cat-article-row:hover > .row-chev { color: var(--accent); transform: translateX(2px); }

.hc-cat-seeall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 22px;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.hc-cat-seeall:hover { background: var(--text-2); color: var(--surface); text-decoration: none; }
.hc-cat-seeall svg { width: 14px; height: 14px; }

/* Two-column category layout: category tree on left, content right */
.hc-cat-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 960px) {
  .hc-cat-layout { grid-template-columns: 1fr; gap: 32px; }
}
.hc-cat-tree {
  position: sticky;
  top: 96px;
}
.hc-cat-tree-head {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.hc-cat-tree ul { list-style: none; padding: 0; margin: 0; }
.hc-cat-tree li { margin: 0; }
.hc-cat-tree a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 120ms;
}
.hc-cat-tree a:hover { color: var(--text); }
.hc-cat-tree a.active { color: var(--accent); font-weight: 500; }
.hc-cat-tree a > svg.tree-caret {
  width: 12px; height: 12px;
  color: var(--text-3);
  transition: transform 160ms;
}
.hc-cat-tree a.active > svg.tree-caret { color: var(--accent); transform: rotate(180deg); }


/* ── Article prose subsection cards (PDF-like layout) ─────────────── */
.hc-article .hc-prose-section {
  position: relative;
  margin: 36px 0 28px;
  padding: 32px 32px 26px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 16px;
}
.hc-article .hc-prose-section + .hc-prose-section {
  margin-top: 16px;
}
.hc-article .hc-prose-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -3px;
}
.hc-article .hc-prose-section > h2 {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0;
}
.hc-article .hc-prose-section > h2::before { display: none; }
.hc-article .hc-prose-section > h2 .h2-glyph { display: none; }
.hc-article .hc-prose-section > p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 14px;
}
.hc-article .hc-prose-section > p:last-child { margin-bottom: 0; }

/* Bigger separation between primary H2 sections (Top things / Warehouse / etc) */
.hc-article > h2:not(.hc-prose-section h2) {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-deep);
}
.hc-article > h2:not(.hc-prose-section h2):first-of-type {
  margin-top: 36px;
  padding-top: 12px;
  border-top: none;
}

/* "References & Policies" group header above the cards */
.hc-prose-group-header {
  margin: 56px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-deep);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hc-prose-group-header .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hc-prose-group-header .title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  flex: 1;
}


/* ── Enhanced prose elements inside hc-prose-section ──────────────── */
.hc-prose-section h3 {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text);
  margin: 16px 0 8px;
  text-transform: none;
}
.hc-prose-section h3:first-child { margin-top: 0; }
.hc-prose-section ul.bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hc-prose-section ul.bullets li {
  position: relative;
  padding: 0 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.hc-prose-section ul.bullets li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hc-prose-section ul.bullets li strong { color: var(--text); font-weight: 600; }

/* Danger callout for penalties / fines */
.hc-prose-section .penalty {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: #FBEFEE;
  border: 1px solid rgba(181, 64, 61, 0.22);
  border-radius: 10px;
  margin: 14px 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}
.hc-prose-section .penalty .penalty-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  flex-shrink: 0;
  white-space: nowrap;
  padding-top: 1px;
}
.hc-prose-section .penalty .penalty-label svg { width: 14px; height: 14px; }
.hc-prose-section .penalty .penalty-body { color: var(--text-2); }
.hc-prose-section .penalty .penalty-body strong { color: var(--text); font-weight: 600; }

/* Info/note callout */
.hc-prose-section .info-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--accent-light);
  border-radius: 10px;
  margin: 14px 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.hc-prose-section .info-note .info-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 1px;
}
.hc-prose-section .info-note .info-label svg { width: 14px; height: 14px; }

/* Compact KV table style for "Type / Billing Method" data */
.hc-prose-section .prose-table {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1px;
  background: var(--paper-deep);
  border: 1px solid var(--paper-deep);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0 16px;
}
.hc-prose-section .prose-table .ph,
.hc-prose-section .prose-table .pc {
  padding: 10px 14px;
  background: var(--surface);
  font-size: 13.5px;
}
.hc-prose-section .prose-table .ph {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg);
}
.hc-prose-section .prose-table .pc { color: var(--text); line-height: 1.5; }
.hc-prose-section .prose-table .pc strong { font-weight: 600; }

/* Key/value pill row (used when prose has short list of key facts) */
.hc-prose-section .prose-kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 18px;
  margin: 8px 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--paper-deep);
  border-bottom: 1px solid var(--paper-deep);
}
.hc-prose-section .prose-kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 0;
}
.hc-prose-section .prose-kv dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  padding: 4px 0;
}


/* ── Article polish (Brevo-style) ─────────────────────────────────── */

/* Bigger, brand-color article H1 */
.hc-article > h1 {
  font-family: var(--font);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--accent);
  line-height: 1.06;
  margin: 0 0 22px;
}

/* Big primary H2s in accent brown */
.hc-article > h2:not(.hc-prose-section h2) {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--accent);
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--paper-deep);
  display: block;
}
.hc-article > h2:not(.hc-prose-section h2):first-of-type {
  margin-top: 32px;
  padding-top: 0;
  border-top: none;
}
.hc-article > h2:not(.hc-prose-section h2) .h2-glyph {
  display: none !important;
}

/* Override prose-section h2 to be larger but stay inside the card */
.hc-article .hc-prose-section > h2 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 18px;
  border-top: none !important;
  padding-top: 0 !important;
  display: flex;
  align-items: center;
}
.hc-article .hc-prose-section > h2::before { display: none !important; }

/* Strip the card border on prose-section — looks cleaner without */
.hc-article .hc-prose-section {
  background: var(--surface);
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--paper-deep);
  padding-top: 28px;
}
.hc-article .hc-prose-section + .hc-prose-section { margin-top: 0; }

/* Brevo-style "Important" / "Good to know" callouts — paper-cream */
.hc-callout {
  background: #FFF5D6;
  border: none;
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin: 22px 0 26px;
}
.hc-callout::before { display: none; }
.hc-callout-eyebrow {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: #B5862C;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.008em;
  white-space: nowrap;
}
.hc-callout-eyebrow svg {
  color: #B5862C;
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex-shrink: 0;
}
.hc-callout p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.hc-callout p:last-child { margin-bottom: 0; }
.hc-callout p a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(122,96,71,0.4); }

/* Variant: warn (orange/amber) */
.hc-callout.warn { background: #FFF1E6; }
.hc-callout.warn .hc-callout-eyebrow,
.hc-callout.warn .hc-callout-eyebrow svg { color: #B36A2B; }

/* Variant: danger (red) for penalty callouts */
.hc-callout.danger { background: #FEEEEC; }
.hc-callout.danger .hc-callout-eyebrow,
.hc-callout.danger .hc-callout-eyebrow svg { color: var(--red); }

/* "Good to know" — soft cream / blue */
.hc-callout.note { background: #EFEAE1; }
.hc-callout.note .hc-callout-eyebrow,
.hc-callout.note .hc-callout-eyebrow svg { color: var(--accent); }

/* Image / screenshot placeholders inside article */
.hc-screenshot,
.hc-image-frame {
  background: var(--bg);
  border: 1px solid var(--paper-deep);
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  margin: 14px 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  position: relative;
  overflow: hidden;
}
.hc-image-frame::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1.5px dashed var(--paper-deeper);
  border-radius: 8px;
}
.hc-image-frame .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  position: relative;
  z-index: 1;
}
.hc-image-frame .sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Refine penalty callout in prose */
.hc-prose-section .penalty {
  background: #FEEEEC;
  border: none;
  border-left: 4px solid var(--red);
  border-radius: 0 12px 12px 0;
  padding: 14px 20px;
  flex-direction: column;
  gap: 6px;
}
.hc-prose-section .penalty .penalty-label {
  color: var(--red);
  letter-spacing: 0.18em;
}
.hc-prose-section .penalty .penalty-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* Refine info note in prose */
.hc-prose-section .info-note {
  background: #FFF5D6;
  border: none;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-radius: 12px;
}
.hc-prose-section .info-note .info-label { color: #B5862C; }

/* Better article paragraph rhythm */
.hc-article p { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0 0 16px; }
.hc-article > p:first-of-type { font-size: 17px; line-height: 1.6; color: var(--text); margin-bottom: 22px; }

/* Article TOC active state — closer to Brevo (purple-cream bg) */
.hc-article-toc a.active { background: var(--accent-light); color: var(--accent); }

/* H1 → "Available in / Applies to" chip strip tighter */
.hc-plans { margin-bottom: 32px; }



/* ── Brevo-style flat article (no cards, big H2 sections) ───────── */
.hc-article .hc-prose-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 56px 0 0 !important;
  border-top: none !important;
}
.hc-article .hc-prose-section:first-of-type { margin-top: 48px !important; }

.hc-article .hc-prose-section > h2 {
  font-family: var(--font) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.026em !important;
  color: var(--accent) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: block !important;
  border: none !important;
  line-height: 1.1 !important;
}
.hc-article .hc-prose-section > h2 .hc-prose-letter { display: none !important; }
.hc-article .hc-prose-section > h2 .h2-glyph { display: none !important; }

/* Big numbered "Step" anchor numbers for cheat sheet items */
.hc-article .hc-steps > li::before {
  background: var(--accent);
}

/* Brevo-style "Important" callout: vertical red bar + paper-cream bg */
.hc-callout {
  background: #FFF1E6 !important;
  border: none !important;
  border-left: 4px solid #E8622A !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px 18px !important;
  margin: 22px 0 26px !important;
}
.hc-callout::before { display: none !important; }
.hc-callout-eyebrow {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #B36A2B !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
.hc-callout-eyebrow svg { color: #B36A2B; width: 18px; height: 18px; }
.hc-callout p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--text); }
.hc-callout p:last-child { margin-bottom: 0; }
.hc-callout p strong { color: var(--text); font-weight: 700; }
.hc-callout p a { color: var(--text); text-decoration: underline; }

/* "Good to know" variant — lavender/cream background, no left bar */
.hc-callout.note {
  background: #F2EFE9 !important;
  border-left: none !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
}
.hc-callout.note .hc-callout-eyebrow { color: var(--accent) !important; }
.hc-callout.note .hc-callout-eyebrow svg { color: var(--accent); }

/* "Penalty" / danger variant — vertical red bar */
.hc-callout.danger {
  background: #FEEEEC !important;
  border-left: 4px solid var(--red) !important;
  border-radius: 0 12px 12px 0 !important;
}
.hc-callout.danger .hc-callout-eyebrow,
.hc-callout.danger .hc-callout-eyebrow svg { color: var(--red); }

/* Bullets inside prose — Brevo-style with bigger accent dot */
.hc-prose-section ul.bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-prose-section ul.bullets li {
  position: relative;
  padding: 0 0 0 28px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.hc-prose-section ul.bullets li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hc-prose-section ul.bullets li strong { color: var(--text); font-weight: 700; }

/* Sub-subheadings inside subsections (e.g., "Pallet Identification & Labeling") */
.hc-prose-section h3 {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 32px 0 10px;
  text-transform: none;
}
.hc-prose-section h3:first-child { margin-top: 18px; }

/* Tables inside prose */
.hc-prose-section .prose-table {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 0;
  background: transparent;
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0 24px;
}
.hc-prose-section .prose-table .ph {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg);
  padding: 14px 18px;
  border-bottom: 1px solid var(--paper-deep);
}
.hc-prose-section .prose-table .pc {
  padding: 14px 18px;
  background: var(--surface);
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  border-bottom: 1px solid var(--paper-deep);
}
.hc-prose-section .prose-table .pc strong { font-weight: 700; }
.hc-prose-section .prose-table > .pc:nth-last-child(-n+2) { border-bottom: none; }

/* Strip the "REFERENCE & POLICIES" group header — too noisy */
.hc-prose-group-header { display: none !important; }

/* Paragraphs in prose-section */
.hc-prose-section > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 14px;
}

/* PENALTY callout inside prose: full-width, red bar */
.hc-prose-section .penalty {
  background: #FEEEEC !important;
  border: none !important;
  border-left: 4px solid var(--red) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 22px !important;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 24px;
}
.hc-prose-section .penalty .penalty-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  text-transform: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hc-prose-section .penalty .penalty-label svg { width: 18px; height: 18px; }
.hc-prose-section .penalty .penalty-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.hc-prose-section .penalty .penalty-body strong { font-weight: 700; }

/* Info note inside prose */
.hc-prose-section .info-note {
  background: #F2EFE9 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 24px;
}
.hc-prose-section .info-note .info-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hc-prose-section .info-note .info-label svg { color: var(--accent); width: 18px; height: 18px; }

/* H1 even bigger */
.hc-article > h1 {
  font-size: 48px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
}

/* First paragraph (lead) */
.hc-article > p:first-of-type {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
  margin-bottom: 24px !important;
}
.hc-article > p:first-of-type strong { color: var(--text); font-weight: 700; }


/* ── White background override ────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFAF9;
  --paper-deep: #ECEAE5;
  --paper-deeper: #DEDCD6;
}
html, body { background: #FFFFFF !important; }

/* Hero band still uses a tinted bg for contrast — soft warm gray */
.hc-hero { background: #F5F2EC !important; }

/* "More resources" panel also tinted slightly */
.hc-more { background: #F5F2EC !important; }

/* Sidebar stays white */
.side { background: #FFFFFF !important; border-right: 1px solid var(--paper-deep) !important; }

/* Topbar stays white */
.topbar { background: #FFFFFF !important; border-bottom: 1px solid var(--paper-deep) !important; }

/* Cards keep accent border but white fill */
.metric-tile, .card, .res-cat-card, .hc-kb-card, .hc-article-card, .faq-item, .sub-section,
.inv-table, .inv-detail, .am-card, .lock-banner {
  background: #FFFFFF !important;
}

/* Search input fields white */
.res-search, .hc-hero-search, .hc-subheader-search input { background: #FFFFFF !important; }

/* Topbar utility buttons */
.util-btn { background: #FFFFFF !important; }
.util-btn:hover { background: #F5F2EC !important; }

/* Side-ask */
.side-ask { background: #F5F2EC !important; }
.side-ask:hover { background: #FFFFFF !important; border-color: var(--border-strong) !important; }

/* Status chip avatar (active) — keep green dot but base on white */


/* Brown-accent tables inside prose */
.hc-prose-section .prose-table {
  border-color: var(--accent-medium) !important;
}
.hc-prose-section .prose-table .ph {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  letter-spacing: 0.14em !important;
  border-bottom-color: var(--accent-medium) !important;
}
.hc-prose-section .prose-table .pc {
  border-bottom-color: var(--paper-deep) !important;
}
.hc-prose-section .prose-table .pc strong {
  color: var(--accent) !important;
}

/* Also brown-tint the cheat-sheet numbered list circles to use accent */
.hc-article .hc-steps > li::before {
  background: var(--accent) !important;
  color: #fff !important;
}


/* ── Requirement cards (grid of checked items) ─────────────────── */
.hc-article .req-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 28px;
}
@media (max-width: 720px) {
  .hc-article .req-grid { grid-template-columns: 1fr; }
}
.hc-article .req-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  transition: border-color 120ms, background 120ms;
}
.hc-article .req-card:hover { border-color: var(--accent-medium); background: var(--surface-2); }
.hc-article .req-card .req-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.hc-article .req-card .req-check svg { width: 13px; height: 13px; }
.hc-article .req-card .req-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: -0.003em;
}
.hc-article .req-card .req-body strong { font-weight: 600; color: var(--text); }
.hc-article .req-card .req-body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
}

/* When a requirement block has a label/intro (e.g. "Each carton must be labeled with:") */
.hc-article .req-intro {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 24px 0 10px;
}

/* Soft explanation paragraph distinct from requirements */
.hc-article .explanation {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 22px;
}

/* Subsection eyebrow + title pair */
.hc-article .subsec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 56px 0 4px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-deep);
}
.hc-article .subsec-head .num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hc-article .subsec-head h2 {
  border-top: none !important;
  padding-top: 0 !important;
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
}

/* The first subsection in an article doesn't need the divider */
.hc-article .hc-prose-section:first-of-type .subsec-head {
  border-top: none;
  padding-top: 0;
  margin-top: 16px;
}

/* Reset prose-section padding so subsec-head shows */
.hc-article .hc-prose-section {
  margin: 0 !important;
  padding: 0 !important;
}

/* Big stat callouts (used for max heights, sizes etc) */
.hc-article .stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 24px;
}
.hc-article .stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-light);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hc-article .stat-pill .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
}
.hc-article .stat-pill .value {
  font-weight: 700;
  font-size: 15px;
}


/* 3-column prose table */
.hc-prose-section .prose-table.prose-table-3 {
  grid-template-columns: 1fr 1.6fr 1.4fr !important;
}


/* ── FAQ — Origin reference (numbered pill cards) ────────────────── */
.faq-section-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
  margin: 24px 0 48px;
}
@media (max-width: 880px) {
  .faq-section-layout { grid-template-columns: 1fr; gap: 24px; }
}
.faq-section-layout .faq-side .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  display: block;
}
.faq-section-layout .faq-side h1 {
  font-family: var(--font);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 32px;
}
.faq-section-layout .faq-side p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}

.faq-pills { display: flex; flex-direction: column; gap: 12px; }
.faq-pill {
  background: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 20px 32px 20px 32px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 16px;
  align-items: center;
  transition: background 160ms, border-radius 200ms;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.faq-pill:hover { background: #FAFAF9; }
.faq-pill .faq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.faq-pill .faq-q {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.faq-pill .faq-icon {
  font-size: 22px;
  color: var(--accent);
  font-weight: 300;
  text-align: center;
  transition: transform 200ms;
  line-height: 1;
}
.faq-item.open .faq-pill {
  border-radius: 24px;
  background: #FFFFFF;
  padding-bottom: 18px;
}
.faq-item.open .faq-pill .faq-icon { transform: rotate(45deg); }
.faq-item.open .faq-answer {
  display: block;
}
.faq-answer {
  display: none;
  background: #FFFFFF;
  border-radius: 0 0 24px 24px;
  margin-top: -8px;
  padding: 0 32px 24px 84px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.faq-answer p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  max-width: 640px;
}

/* ── Top nav bar (replace sidebar) ──────────────────────────────── */
.app-shell.toplevel-nav .shell-body { display: block; }
.app-shell.toplevel-nav .side { display: none !important; }
.app-shell.toplevel-nav .main { padding: 0 40px 96px; max-width: 1200px; margin: 0 auto; }
.topbar-nav {
  display: inline-flex;
  gap: 4px;
  margin-left: 24px;
}
.topbar-nav a {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.topbar-nav a:hover { color: var(--text); background: var(--surface-2); }
.topbar-nav a.active { color: var(--text); background: var(--bg); font-weight: 500; }
.topbar-logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.topbar-logo-mark img { height: 22px; width: auto; }


/* FAQ font override — Inter throughout, no serif */
.faq-section-layout .faq-side h1 {
  font-family: var(--font) !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.04 !important;
  text-transform: none !important;
}
.faq-section-layout .faq-side p {
  font-family: var(--font) !important;
  font-style: normal !important;
  font-size: 15px !important;
  color: var(--text-2) !important;
}
.faq-pill .faq-q {
  font-family: var(--font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}


/* ── FAQ section on Resources home — two-column hero + floating pills */
.hc-faq-section {
  background: var(--paper-deep);
  border-radius: 28px;
  padding: 64px 56px;
  margin: 0 -16px 96px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .hc-faq-section { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; }
}
.hc-faq-section > .hc-section-title { display: none; }
.hc-faq-home-side .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
  display: block;
}
.hc-faq-home-side h2 {
  font-family: var(--font);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 28px;
}
.hc-faq-home-side p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 280px;
}

/* Override .faq-pills inside the FAQ home section for richer separation from bg */
.hc-faq-section .faq-pills {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none !important;
  margin: 0 !important;
}
.hc-faq-section .faq-pill {
  background: #FFFFFF;
  border-radius: 999px;
  padding: 24px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.04);
  transition: transform 160ms, box-shadow 160ms;
}
.hc-faq-section .faq-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 36px rgba(0,0,0,0.07);
  background: #FFFFFF;
}
.hc-faq-section .faq-pill .faq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-3);
}
.hc-faq-section .faq-pill .faq-q {
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.012em;
  color: var(--text);
}
.hc-faq-section .faq-pill .faq-icon {
  font-size: 24px;
  color: var(--accent);
  font-weight: 300;
}


/* Inline FAQ answer for home page pills (white card, no background tint) */
.hc-faq-section .faq-item.open .faq-pill {
  border-radius: 28px 28px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 -2px 0 #FFFFFF inset;
}
.hc-faq-section .faq-item .faq-answer {
  background: #FFFFFF;
  border-radius: 0 0 28px 28px;
  padding: 4px 36px 26px 84px;
  margin-top: -4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.04);
}
.hc-faq-section .faq-item .faq-answer p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  max-width: 600px;
}
.hc-faq-section .faq-item.open .faq-pill .faq-icon { transform: rotate(45deg); }

/* ── Hotfix: keep resource-article callouts wrapping inside their box ──
   The article body sits in the 1fr track of `.hc-article-layout`
   (grid-template-columns: 200px 1fr). A grid/flex item defaults to
   min-width:auto, so a no-wrap eyebrow (.hc-callout-eyebrow) or any wide
   descendant could expand the 1fr column past its container and push
   callout body text beyond the colored box. min-width:0 lets the column
   shrink to the available width so text wraps; the rest is defensive
   wrapping for long unbroken tokens (URLs, long barcode numbers, etc.). */
.hc-article { min-width: 0; }
.hc-article .hc-callout,
.hc-article .penalty,
.hc-article .info-note { overflow-wrap: break-word; }
.hc-article .hc-callout p,
.hc-article .penalty .penalty-body,
.hc-article .info-note > span {
  min-width: 0;
  overflow-wrap: break-word;
}
/* Let a long callout label wrap rather than force the column wider. */
.hc-article .hc-callout-eyebrow { white-space: normal; }