/* ============================================================
   normies-pages.css  —  Design system for every hand-authored page
   (contact, partnerships, careers, faq, support, legal/*).
   Mirrors the visual language of the homepage + card page:
   full-bleed colored sections, huge display type, decorative
   N-shapes and yellow circles, alternating white / cream / dark.
   ============================================================ */

:root {
  --n-ink: #1d1d1b;
  --n-ink-soft: #242424;
  --n-body: #3a3a35;
  --n-muted: #6b6b66;
  --n-quiet: #9e9e9e;
  --n-hair: #eeeee5;
  --n-hair-soft: #f2f2ed;
  --n-cream: #fafaf6;
  --n-warm: #f5f5f0;
  --n-off: #f5f5f7;
  --n-y: #fffca2;
  --n-y-deep: #f6dd4a;
  --n-y-glow: rgba(255,252,162,0.55);
  --n-green: #0c8a3c;
  --n-red: #ff3b30;
  --n-amber: #b97400;
  --n-radius-xl: 32px;
  --n-radius-lg: 28px;
  --n-radius-md: 20px;
  --n-radius-sm: 14px;
  --n-ring: 0 1px 0 rgba(20,20,18,0.02), 0 22px 60px -32px rgba(20,20,18,0.22);
  --n-ring-hard: 0 12px 48px -12px rgba(20,20,18,0.22);
  --n-font: "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", system-ui, Arial, sans-serif;
  --n-font-display: "SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
  --n-font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --n-ease: cubic-bezier(.22,.61,.36,1);
  --n-ease-out: cubic-bezier(.2,.65,.2,1);
}

/* ============================================================
   Page container — full-bleed, not a centered shell.
   ============================================================ */
body.nr-page {
  font-family: var(--n-font);
  color: var(--n-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nr { /* the main wrapper replaces .nr-shell */
  font-family: var(--n-font);
  color: var(--n-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  padding-top: 68px; /* clear fixed .blog-navbar */
}
.nr a { color: var(--n-ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-thickness .15s; }
.nr a:hover { text-decoration-thickness: 2px; }
.nr strong { color: var(--n-ink); font-weight: 600; }

/* Section — full-bleed with inner max-width */
.nr-section {
  position: relative;
  width: 100%;
  padding: 96px 28px;
  overflow: hidden;
}
.nr-section--tight { padding: 64px 28px; }
.nr-section--loose { padding: 140px 28px; }
.nr-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.nr-section__inner--narrow { max-width: 860px; }
.nr-section__inner--wide { max-width: 1320px; }

/* Backgrounds */
.nr-section--white  { background: #fff; }
.nr-section--cream  { background: var(--n-warm); }
.nr-section--yellow { background: var(--n-y); }
.nr-section--dark   { background: #1a1a18; color: #fff; }
.nr-section--dark h1, .nr-section--dark h2, .nr-section--dark h3 { color: #fff; }
.nr-section--dark p { color: rgba(255,255,255,0.82); }
.nr-section--dark a { color: var(--n-y); }

/* Rounded floating sections (homepage uses this heavily) */
.nr-section--float {
  margin: 28px 20px;
  padding: 84px 44px;
  border-radius: var(--n-radius-xl);
  width: auto;
}
@media (max-width: 720px) {
  .nr-section--float { margin: 16px 12px; padding: 56px 26px; border-radius: 24px; }
  .nr-section { padding: 64px 22px; }
  .nr-section--loose { padding: 96px 22px; }
  .nr-section--tight { padding: 44px 22px; }
}

/* ============================================================
   HERO — big yellow opener with optional decoration
   ============================================================ */
.nr-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 28px 108px;
  background: var(--n-y);
  border-radius: 0 0 var(--n-radius-xl) var(--n-radius-xl);
  margin-bottom: 0;
  color: var(--n-ink);
}
.nr-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Giant "N" letter shape as background decoration */
.nr-hero::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 520px;
  height: 520px;
  background:
    radial-gradient(circle at 30% 70%, rgba(246,221,74,0.55), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.45), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
/* Secondary glow */
.nr-hero::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(29,29,27,0.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.nr-hero--dark { background: #1a1a18; color: #fff; }
.nr-hero--dark::before {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,252,162,0.18), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(255,252,162,0.10), transparent 60%);
}
.nr-hero--dark .nr-hero-eyebrow { color: rgba(255,255,255,0.55); }
.nr-hero--dark .nr-hero-eyebrow::before { background: rgba(255,255,255,0.4); }
.nr-hero--dark h1 { color: #fff; }
.nr-hero--dark .nr-hero-lede { color: rgba(255,255,255,0.78); }

.nr-hero--cream { background: var(--n-warm); }
.nr-hero--cream::before {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,252,162,0.6), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(246,221,74,0.3), transparent 60%);
}

.nr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--n-ink);
  padding: 10px 18px 10px 14px;
  border-radius: 100px;
  font-family: var(--n-font);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 32px;
  box-shadow: 0 2px 10px rgba(20,20,18,0.06);
}
.nr-hero-badge .dot { width: 7px; height: 7px; border-radius: 100px; background: var(--n-green); box-shadow: 0 0 0 4px rgba(12,138,60,0.22); animation: nr-pulse 2.2s ease-in-out infinite; }
@keyframes nr-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(12,138,60,0.22); }
  50% { box-shadow: 0 0 0 7px rgba(12,138,60,0.08); }
}

.nr-hero-eyebrow {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(29,29,27,0.55);
  margin: 0 0 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nr-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(29,29,27,0.35);
  display: inline-block;
}

.nr-hero h1 {
  font-family: var(--n-font-display);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 22px;
  color: var(--n-ink);
  max-width: 920px;
}
.nr-hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 65%, rgba(255,255,255,0.65) 65%);
  padding: 0 8px;
  border-radius: 4px;
}
.nr-hero--cream h1 em, .nr-hero--dark h1 em {
  background: linear-gradient(180deg, transparent 65%, var(--n-y) 65%);
}

.nr-hero-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  color: rgba(29,29,27,0.72);
  margin: 0;
  max-width: 680px;
  font-weight: 400;
}

.nr-hero-actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Typography inside sections
   ============================================================ */
.nr-section h2, .nr h2 {
  font-family: var(--n-font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--n-ink);
}
.nr-section--dark h2 { color: #fff; }
.nr-section h3, .nr h3 {
  font-family: var(--n-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 26px 0 8px;
}
.nr-section p, .nr p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--n-body);
  margin: 0 0 14px;
}
.nr-section--dark p { color: rgba(255,255,255,0.78); }
.nr-section ul, .nr-section ol, .nr ul, .nr ol { padding-left: 22px; margin: 0 0 18px; }
.nr-section li, .nr li { line-height: 1.65; margin-bottom: 7px; color: var(--n-body); }
.nr-section--dark li { color: rgba(255,255,255,0.78); }

.nr-section__title {
  font-family: var(--n-font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 14px;
  max-width: 780px;
}
.nr-section__eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--n-muted);
  margin: 0 0 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nr-section__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.nr-section--dark .nr-section__eyebrow { color: rgba(255,255,255,0.55); }
.nr-section__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: #4a4a44;
  max-width: 680px;
  margin: 0 0 40px;
}
.nr-section--dark .nr-section__lede { color: rgba(255,255,255,0.74); }

/* ============================================================
   Cards
   ============================================================ */
.nr-grid { display: grid; gap: 16px; margin: 8px 0 0; }
.nr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.nr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.nr-card {
  background: #fff;
  border: 1px solid var(--n-hair);
  border-radius: var(--n-radius-md);
  padding: 28px 30px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}
.nr-card:hover { transform: translateY(-2px); border-color: #ddddd3; box-shadow: var(--n-ring); }
.nr-card h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.nr-card p { font-size: 0.96rem; color: #4a4a44; margin: 0; line-height: 1.55; }

.nr-section--dark .nr-card { background: #252523; border-color: rgba(255,255,255,0.08); color: #fff; }
.nr-section--dark .nr-card:hover { border-color: rgba(255,255,255,0.18); }
.nr-section--dark .nr-card h3 { color: #fff; }
.nr-section--dark .nr-card p { color: rgba(255,255,255,0.72); }

.nr-card .tag {
  display: inline-block;
  background: var(--n-y);
  color: var(--n-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.nr-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--n-y);
  color: var(--n-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.nr-ico svg { width: 24px; height: 24px; }

.nr-card--accent { padding-left: 32px; }
.nr-card--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: var(--n-y);
  border-radius: 3px;
}

/* ============================================================
   Feature / content row — alternating text + illustration
   ============================================================ */
.nr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin: 0;
}
.nr-row--reverse > .nr-row__visual { order: -1; }
@media (max-width: 900px) {
  .nr-row { grid-template-columns: 1fr; gap: 28px; }
  .nr-row--reverse > .nr-row__visual { order: 0; }
}
.nr-row__visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--n-radius-lg);
  background: linear-gradient(135deg, var(--n-y) 0%, var(--n-y-deep) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nr-row__visual--dark { background: linear-gradient(135deg, #2a2a26 0%, #1a1a18 100%); color: #fff; }
.nr-row__visual--cream { background: var(--n-warm); border: 1px solid var(--n-hair); }

.nr-row__visual-svg { width: 70%; height: 70%; }

/* ============================================================
   Callout boxes
   ============================================================ */
.nr-callout {
  background: #fffdf0;
  border: 1px solid #f3ecc0;
  border-radius: var(--n-radius-md);
  padding: 22px 28px;
  margin: 28px 0;
  position: relative;
}
.nr-callout::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--n-y-deep);
  border-radius: 3px;
}
.nr-callout p { margin: 0; font-weight: 500; color: var(--n-ink); }
.nr-callout--dark { background: var(--n-ink); color: #fff; border-color: var(--n-ink); }
.nr-callout--dark::before { background: var(--n-red); }
.nr-callout--dark p { color: #fff; }
.nr-callout--dark strong { color: #fff; }

/* ============================================================
   CTA bar
   ============================================================ */
.nr-ctabar {
  background: var(--n-ink);
  color: #fff;
  border-radius: var(--n-radius-xl);
  padding: 56px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) { .nr-ctabar { grid-template-columns: 1fr; padding: 38px 28px; } }
.nr-ctabar::before {
  content: "";
  position: absolute;
  right: -110px; bottom: -110px;
  width: 300px; height: 300px;
  background: var(--n-y);
  border-radius: 100px;
  opacity: 0.14;
  pointer-events: none;
}
.nr-ctabar::after {
  content: "";
  position: absolute;
  right: 80px; top: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,252,162,0.3), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
.nr-ctabar h3 { color: #fff; font-family: var(--n-font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; position: relative; }
.nr-ctabar p { color: rgba(255,255,255,0.82); font-size: 1.02rem; line-height: 1.55; margin: 0; max-width: 560px; position: relative; }
.nr-ctabar .nr-btn { position: relative; }

/* ============================================================
   Buttons
   ============================================================ */
.nr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--n-ink);
  color: #fff;
  padding: 16px 28px;
  border-radius: 100px;
  text-decoration: none !important;
  font-family: var(--n-font);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  transition: transform .18s ease, filter .18s ease;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nr-btn::after { content: "→"; font-weight: 400; font-size: 1.1em; }
.nr-btn:hover { transform: translateY(-1px); background: #000; color: #fff; }
.nr-btn--yellow { background: var(--n-y); color: var(--n-ink); }
.nr-btn--yellow:hover { background: var(--n-y); color: var(--n-ink); filter: brightness(0.97); }
.nr-btn--ghost { background: transparent; color: var(--n-ink); border: 1px solid var(--n-hair); }
.nr-btn--ghost:hover { background: var(--n-cream); color: var(--n-ink); }
.nr-btn--large { padding: 18px 32px; font-size: 1.05rem; }

/* ============================================================
   Pills / chips
   ============================================================ */
.nr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.nr-pill {
  background: var(--n-cream);
  border: 1px solid var(--n-hair);
  color: #4b4b44;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.nr-section--dark .nr-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }

/* ============================================================
   Decorative "N" shape — floating background element
   ============================================================ */
.nr-deco-n {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
  z-index: 1;
}
.nr-deco-n--tr { top: -40px; right: -40px; width: 320px; height: 320px; }
.nr-deco-n--bl { bottom: -40px; left: -40px; width: 280px; height: 280px; }

.nr-deco-circle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 100%;
}
.nr-deco-circle--y { background: var(--n-y); opacity: 0.4; filter: blur(40px); }
.nr-deco-circle--dark { background: var(--n-ink); opacity: 0.08; }

/* ============================================================
   Decorative divider between sections
   ============================================================ */
.nr-div {
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--n-hair), transparent);
  opacity: 0.6;
  margin: 0;
}

/* ============================================================
   Footnote strip at bottom of page
   ============================================================ */
.nr-footnote {
  border-top: 1px solid var(--n-hair);
  padding-top: 24px;
  margin-top: 56px;
  color: var(--n-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================================
   Legal page support
   (preserves older .legal-* class structure used on the 4 legal
   pages so we don't have to rewrite their markup)
   ============================================================ */
.legal-shell {
  font-family: var(--n-font);
  color: var(--n-ink);
  max-width: 820px;
  margin: 0 auto;
  padding: 148px 28px 112px !important;
}
.legal-shell a { color: var(--n-ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal-shell strong { color: var(--n-ink); font-weight: 600; }

.legal-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--n-muted);
  margin: 0 0 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.legal-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--n-muted); display: inline-block; }

.legal-shell h1 {
  font-family: var(--n-font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  margin: 0 0 20px !important;
}
.legal-shell .lede {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem) !important;
  line-height: 1.5 !important;
  color: #3e3e38 !important;
  margin: 0 0 44px !important;
  max-width: 680px;
}
.legal-shell h2 {
  font-family: var(--n-font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.2 !important;
  margin: 56px 0 14px !important;
}
.legal-shell h3 { font-family: var(--n-font-display); font-size: 1.05rem !important; font-weight: 600 !important; margin: 28px 0 8px !important; }
.legal-shell p, .legal-shell li { font-size: 1rem !important; line-height: 1.68 !important; color: var(--n-body) !important; margin: 0 0 14px !important; }
.legal-shell ul, .legal-shell ol { padding-left: 22px; margin: 0 0 18px; }
.legal-shell li { margin-bottom: 7px !important; }

.legal-callout {
  background: #fffdf0 !important;
  border: 1px solid #f3ecc0;
  border-radius: var(--n-radius-md) !important;
  padding: 22px 28px !important;
  margin: 32px 0 !important;
  position: relative;
}
.legal-callout::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--n-y-deep); border-radius: 3px; }
.legal-callout p { margin: 0 !important; font-weight: 500 !important; color: var(--n-ink) !important; }
.legal-callout.warn { background: var(--n-ink) !important; border-color: var(--n-ink) !important; color: #fff !important; }
.legal-callout.warn::before { background: var(--n-red); }
.legal-callout.warn p { color: #fff !important; }

.legal-toc { background: var(--n-cream) !important; border: 1px solid var(--n-hair); border-radius: var(--n-radius-sm) !important; padding: 22px 26px !important; margin: 0 0 48px !important; font-size: 0.94rem !important; }
.legal-toc strong { display: block; font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.12em; color: var(--n-muted); font-weight: 600; margin: 0 0 12px; }
.legal-toc ol { margin: 0 !important; padding-left: 22px; columns: 2; column-gap: 28px; }
.legal-toc li { break-inside: avoid; margin-bottom: 6px !important; color: var(--n-body) !important; }
.legal-toc a { text-decoration: none; color: var(--n-ink); border-bottom: 1px dashed var(--n-hair); }
.legal-toc a:hover { border-bottom-color: var(--n-ink); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.legal-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 0.96rem !important; background: #fff; border-radius: var(--n-radius-sm); overflow: hidden; border: 1px solid var(--n-hair); }
.legal-table th, .legal-table td { text-align: left !important; padding: 14px 16px !important; border-bottom: 1px solid var(--n-hair); vertical-align: top; line-height: 1.55; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { background: var(--n-cream) !important; font-weight: 600 !important; color: var(--n-ink); font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.09em; }
.legal-table td { color: var(--n-body) !important; }

.legal-meta { border-top: 1px solid var(--n-hair) !important; padding-top: 24px !important; margin-top: 72px !important; color: var(--n-muted) !important; font-size: 0.88rem !important; line-height: 1.6 !important; font-style: italic; }
.legal-shell .muted { color: var(--n-muted); font-size: 0.9rem; }

/* ============================================================
   SECURITY PAGE
   Editorial threat-model document. Page-locks Geist for display,
   Geist Mono for data, Fraunces for editorial accents.
   ============================================================ */

.sec-shell {
  --n-font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --sec-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sec-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sec-ink: #1d1d1b;
  --sec-ink-soft: #2a2a26;
  --sec-rule: rgba(29,29,27,0.10);
  --sec-rule-strong: rgba(29,29,27,0.22);
  --sec-paper: #fbfaf3;
  --sec-y: var(--n-y);
  --sec-y-edge: #e8de4f;
  --sec-can: #1f5933;
  --sec-cant: #8a2a2a;
  font-family: var(--n-font-display);
  font-feature-settings: "ss01", "cv11", "kern";
  max-width: 1200px;
  padding-left: 28px;
  padding-right: 28px;
}

.sec-grid {
  display: grid;
  grid-template-columns: 224px minmax(0, 760px);
  gap: 88px;
  align-items: start;
}
@media (max-width: 1099px) { .sec-grid { grid-template-columns: 1fr; gap: 0; } .sec-rail { display: none; } }

/* Sidebar rail */
.sec-rail { position: sticky; top: 104px; font-size: 0.84rem; padding: 4px 0 8px; align-self: start; }
.sec-rail__label { display: block; font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--n-muted); font-weight: 500; margin: 0 0 18px; }
.sec-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: secr; border-left: 1px solid var(--sec-rule); }
.sec-rail li { counter-increment: secr; margin: 0; padding: 0; }
.sec-rail a { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--n-muted); line-height: 1.4; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.sec-rail a::before { content: counter(secr, decimal-leading-zero); font-family: var(--sec-mono); font-variant-numeric: tabular-nums; font-size: 0.7rem; color: #c9c9be; letter-spacing: 0.04em; }
.sec-rail a:hover { color: var(--sec-ink); transform: translateX(1px); }
.sec-rail a.is-active { color: var(--sec-ink); border-left-color: var(--sec-ink); font-weight: 500; }
.sec-rail a.is-active::before { color: var(--sec-ink); }

/* Header */
.sec-head { padding: 8px 0 6px; }
.sec-head__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--sec-rule); }
.sec-eyebrow { margin: 0 !important; font-family: var(--sec-mono); font-size: 0.72rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-muted); font-weight: 500; }
.sec-eyebrow::before { background: var(--sec-ink); width: 28px; }
.sec-head__date { margin: 0 !important; font-family: var(--sec-mono); font-size: 0.74rem !important; letter-spacing: 0.06em; color: var(--n-muted); display: inline-flex; align-items: center; gap: 10px; }
.sec-head__date span:nth-child(2) { color: #c9c9be; }
.sec-shell .sec-h1 { font-family: var(--n-font-display) !important; font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important; font-weight: 600 !important; letter-spacing: -0.035em !important; line-height: 0.98 !important; margin: 0 0 28px !important; color: var(--sec-ink); text-wrap: balance; }
.sec-shell .sec-h1 em { font-family: var(--sec-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--sec-ink); }
.sec-shell .sec-lede { font-family: var(--n-font-display) !important; font-size: 1.18rem !important; line-height: 1.55 !important; color: var(--sec-ink-soft) !important; max-width: 60ch; margin: 0 0 8px !important; letter-spacing: -0.005em; text-wrap: pretty; }

/* Trust ledger */
.sec-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--sec-ink); border-bottom: 1px solid var(--sec-rule); margin: 40px 0 64px; padding: 4px 0 0; }
.sec-ledger__cell { padding: 26px 28px 28px 0; border-right: 1px solid var(--sec-rule); display: grid; grid-template-rows: auto auto auto; align-content: start; }
.sec-ledger__cell + .sec-ledger__cell { padding-left: 28px; }
.sec-ledger__cell:last-child { border-right: 0; padding-right: 0; }
.sec-ledger__tag { font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-muted); margin-bottom: 18px; font-weight: 500; }
.sec-ledger__n { font-family: var(--n-font-display); font-size: clamp(3rem, 5.5vw, 4.2rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.92; color: var(--sec-ink); font-variant-numeric: tabular-nums; display: inline-block; }
.sec-ledger__unit { display: inline-block; margin-left: 8px; font-family: var(--sec-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--n-muted); font-weight: 500; text-transform: lowercase; vertical-align: 0.85em; }
.sec-ledger__k { display: block; margin-top: 14px; font-size: 0.86rem; color: var(--n-muted); line-height: 1.5; max-width: 28ch; text-wrap: pretty; }
@media (max-width: 760px) {
  .sec-ledger { grid-template-columns: 1fr; }
  .sec-ledger__cell { border-right: 0; border-bottom: 1px solid var(--sec-rule); padding: 22px 0 !important; }
  .sec-ledger__cell:last-child { border-bottom: 0; }
}

/* Section numbering & subtitles */
.sec-num { display: block; font-family: var(--sec-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--n-muted); font-weight: 500; margin: 80px 0 8px; font-variant-numeric: tabular-nums; padding-top: 24px; border-top: 1px solid var(--sec-rule); width: 100%; }
.sec-num::before { content: "§ "; color: #c9c9be; }
.sec-shell h2 { font-family: var(--n-font-display) !important; font-size: clamp(1.55rem, 2.6vw, 2rem) !important; font-weight: 600 !important; letter-spacing: -0.022em !important; line-height: 1.18 !important; margin: 6px 0 8px !important; color: var(--sec-ink); text-wrap: balance; }
.sec-shell h3 { font-family: var(--n-font-display) !important; font-size: 1.02rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin: 32px 0 6px !important; color: var(--sec-ink); }
.sec-shell h2 + .sec-sub { margin-top: 0 !important; color: var(--n-muted); font-size: 1.02rem !important; line-height: 1.55 !important; margin-bottom: 22px !important; max-width: 58ch; font-style: normal; }
.sec-shell article > p, .sec-shell article > ul li { font-size: 1rem !important; line-height: 1.72 !important; color: var(--n-body) !important; text-wrap: pretty; }
.sec-shell article > p { max-width: 64ch; }

/* Architecture diagram */
.sec-arch { margin: 22px 0 12px; border: 1px solid var(--sec-rule); border-radius: 6px; background: var(--sec-paper); padding: 28px 28px 26px; position: relative; overflow: hidden; }
.sec-arch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--sec-ink); opacity: 0.4; }
.sec-arch__caption { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px dashed var(--sec-rule); }
.sec-arch__caplabel { font-family: var(--sec-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec-ink); font-weight: 500; }
.sec-arch__captext { font-family: var(--sec-serif); font-style: italic; font-size: 0.96rem; color: var(--n-muted); letter-spacing: -0.005em; }
.sec-arch__band { margin-bottom: 18px; }
.sec-arch__band:last-of-type { margin-bottom: 6px; }
.sec-arch__bandtag { display: block; font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--n-muted); margin: 0 0 10px; font-weight: 500; }
.sec-arch__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: relative; }
.sec-arch__row--four { grid-template-columns: repeat(4, 1fr); }
.sec-arch__node { background: #fff; border: 1px solid var(--sec-rule); border-radius: 5px; padding: 14px 16px 16px; position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 4px; transition: border-color .2s ease, transform .2s ease; }
.sec-arch__node:hover { border-color: var(--sec-rule-strong); transform: translateY(-1px); }
.sec-arch__node-num { position: absolute; top: 10px; right: 12px; font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: #b6b6ad; font-weight: 500; }
.sec-arch__node h4 { margin: 0 !important; font-family: var(--n-font-display); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sec-ink); }
.sec-arch__node p { margin: 0 !important; font-size: 0.82rem !important; color: var(--n-muted) !important; line-height: 1.5 !important; padding-right: 14px; }
.sec-arch__node.is-key { background: var(--sec-y); border-color: var(--sec-y-edge); }
.sec-arch__node.is-key .sec-arch__node-num { color: rgba(29,29,27,0.45); }
.sec-arch__node.is-key p { color: rgba(29,29,27,0.7) !important; }
.sec-arch__legend { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sec-rule); font-family: var(--sec-mono); font-size: 0.72rem; color: var(--n-muted); letter-spacing: 0.02em; }
.sec-arch__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sec-arch__legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--sec-y); border: 1px solid var(--sec-y-edge); display: inline-block; }
.sec-arch__legend i.is-plain { background: #fff; border-color: var(--sec-rule-strong); }
.sec-arch__legend-rule { display: block; height: 1px; background: var(--sec-rule); }
.sec-arch__legend-note { font-family: var(--n-font-display); font-size: 0.82rem; color: var(--n-muted); text-align: right; letter-spacing: -0.005em; }
.sec-arch__legend-note strong { color: var(--sec-ink); font-weight: 600; }
@media (max-width: 760px) {
  .sec-arch__row, .sec-arch__row--four { grid-template-columns: 1fr; }
  .sec-arch__legend { grid-template-columns: 1fr; gap: 10px; }
  .sec-arch__legend-note { text-align: left; }
  .sec-arch__legend-rule { display: none; }
}

/* Capability matrix */
.sec-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 22px 0 12px; border-top: 1px solid var(--sec-ink); border-bottom: 1px solid var(--sec-rule); }
.sec-matrix__col { padding: 22px 26px 24px 0; border-right: 1px solid var(--sec-rule); }
.sec-matrix__col:last-child { border-right: 0; padding-right: 0; padding-left: 26px; }
.sec-matrix__col h4 { margin: 0 0 16px; font-family: var(--sec-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sec-matrix__col h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sec-matrix__col.is-can h4 { color: var(--sec-can); }
.sec-matrix__col.is-can h4::before { background: var(--sec-can); }
.sec-matrix__col.is-cant h4 { color: var(--sec-cant); }
.sec-matrix__col.is-cant h4::before { background: var(--sec-cant); }
.sec-matrix__col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sec-matrix__col li { margin: 0 !important; padding: 11px 0 11px 26px !important; position: relative; font-size: 0.96rem !important; line-height: 1.5 !important; color: var(--n-body) !important; border-top: 1px solid var(--sec-rule); }
.sec-matrix__col li:first-child { border-top: 0; }
.sec-matrix__col li::before { position: absolute; left: 0; top: 13px; font-family: var(--sec-mono); font-weight: 600; font-size: 0.92rem; line-height: 1; }
.sec-matrix__col.is-can li::before { content: "+"; color: var(--sec-can); }
.sec-matrix__col.is-cant li::before { content: "\2212"; color: var(--sec-cant); }
@media (max-width: 760px) {
  .sec-matrix { grid-template-columns: 1fr; }
  .sec-matrix__col { border-right: 0; padding: 18px 0 !important; border-bottom: 1px solid var(--sec-rule); }
  .sec-matrix__col:last-child { border-bottom: 0; }
}

/* Partner ledger */
.sec-partners { margin: 18px 0 12px !important; padding: 0 !important; border-top: 1px solid var(--sec-ink); border-bottom: 1px solid var(--sec-rule); }
.sec-partners__row { display: grid; grid-template-columns: 280px 1fr; gap: 28px; padding: 18px 0; border-top: 1px solid var(--sec-rule); align-items: baseline; }
.sec-partners__row:first-child { border-top: 0; }
.sec-partners dt { display: grid; gap: 4px; margin: 0 !important; }
.sec-partners__name { font-family: var(--n-font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; color: var(--sec-ink); }
.sec-partners__role { font-family: var(--sec-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--n-muted); text-transform: lowercase; font-weight: 400; }
.sec-partners dd { margin: 0 !important; font-size: 0.96rem !important; line-height: 1.55 !important; color: var(--n-body) !important; text-wrap: pretty; }
.sec-partners__lbl { display: inline-block; font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a8a89e; margin-right: 8px; font-weight: 500; }
@media (max-width: 760px) { .sec-partners__row { grid-template-columns: 1fr; gap: 6px; } }

/* Disclosure card (signature element) */
.sec-disclose { border: 1px solid var(--sec-ink); border-radius: 6px; padding: 26px 28px 22px; background: var(--sec-ink); color: #fff; margin: 22px 0 6px; position: relative; overflow: hidden; }
.sec-disclose::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--sec-y) 0%, var(--sec-y) 60%, transparent 60%); }
.sec-disclose__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sec-disclose__tag { font-family: var(--sec-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sec-y); font-weight: 500; }
.sec-shell .sec-disclose .sec-disclose__addr { color: #fff !important; margin: 0 !important; font-family: var(--sec-mono) !important; font-size: 1.16rem !important; font-weight: 500 !important; letter-spacing: -0.005em !important; }
.sec-disclose__body { color: rgba(255,255,255,0.78) !important; margin: 0 0 12px !important; font-size: 0.96rem !important; line-height: 1.6 !important; max-width: 60ch; }
.sec-disclose__cta { margin: 0 0 8px !important; }
.sec-disclose a { color: var(--sec-y) !important; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255,252,162,0.4); padding-bottom: 1px; }
.sec-disclose a:hover { border-bottom-color: var(--sec-y); }
.sec-disclose__sla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); }
.sec-disclose__sla > div { padding: 0 22px 0 0; border-right: 1px solid rgba(255,255,255,0.10); }
.sec-disclose__sla > div + div { padding-left: 22px; }
.sec-disclose__sla > div:last-child { border-right: 0; padding-right: 0; }
.sec-disclose__sla dt { font-family: var(--sec-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 8px; font-weight: 500; }
.sec-disclose__sla dd { margin: 0; color: #fff; font-family: var(--n-font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.sec-disclose__sla dd.is-text { font-family: var(--sec-serif); font-style: italic; font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; }
.sec-disclose__u { display: block; font-family: var(--sec-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin-top: 6px; text-transform: lowercase; }
@media (max-width: 760px) {
  .sec-disclose__sla { grid-template-columns: 1fr; }
  .sec-disclose__sla > div { padding: 14px 0 !important; border-right: 0; border-top: 1px solid rgba(255,255,255,0.10); }
  .sec-disclose__sla > div:first-child { border-top: 0; padding-top: 0; }
}

/* Timeline */
.sec-timeline { list-style: none !important; margin: 14px 0 22px !important; padding: 0 !important; border-left: 1px solid var(--sec-rule); }
.sec-timeline li { margin: 0 0 18px !important; padding: 0 0 0 24px !important; position: relative; font-size: 0.98rem !important; line-height: 1.55 !important; color: var(--n-body) !important; text-wrap: pretty; }
.sec-timeline li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sec-ink); position: absolute; left: -4px; top: 9px; }
.sec-timeline li.is-pending::before { background: #fff; border: 1px solid var(--sec-ink); }
.sec-timeline b { font-family: var(--sec-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--n-muted); text-transform: uppercase; display: block; margin-bottom: 4px; font-weight: 500; }

/* Callout refresh */
.sec-shell .legal-callout { background: transparent !important; border: 0 !important; border-left: 2px solid var(--sec-ink) !important; border-radius: 0 !important; padding: 4px 0 4px 22px !important; margin: 28px 0 !important; }
.sec-shell .legal-callout::before { display: none !important; }
.sec-shell .legal-callout p { font-family: var(--sec-serif) !important; font-style: italic !important; font-size: 1.08rem !important; line-height: 1.55 !important; letter-spacing: -0.005em !important; color: var(--sec-ink) !important; font-weight: 400 !important; max-width: 56ch; }

/* Contact-legal & meta tweaks */
.sec-shell .nr-contact-legal { background: var(--sec-paper) !important; color: var(--sec-ink) !important; border: 1px solid var(--sec-rule); border-radius: 6px; }
.sec-shell .nr-contact-legal p { color: var(--n-body) !important; font-size: 0.92rem !important; }
.sec-shell .nr-contact-legal a { color: var(--sec-ink) !important; border-bottom: 1px solid var(--sec-y-edge); }
.sec-shell .legal-meta { font-style: normal !important; font-size: 0.84rem !important; color: var(--n-muted) !important; font-family: var(--n-font-display) !important; }

/* Page-load reveal — transform + opacity only */
@media (prefers-reduced-motion: no-preference) {
  .sec-head, .sec-ledger, .sec-arch, .sec-matrix, .sec-partners, .sec-disclose, .sec-timeline {
    animation: secFade .7s cubic-bezier(.2,.7,.2,1) both;
  }
  .sec-ledger { animation-delay: 60ms; }
  .sec-arch { animation-delay: 30ms; }
  @keyframes secFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Print */
@media print {
  .sec-rail, .nr-progress, .nr-top, .nr-skip, .blog-navbar, .supfooter, .footer-main { display: none !important; }
  .sec-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sec-shell { font-family: Georgia, "Iowan Old Style", serif; }
  .sec-shell .sec-h1 { font-family: Georgia, serif !important; }
  .sec-arch, .sec-matrix, .sec-partners, .sec-ledger, .sec-disclose, .sec-timeline { break-inside: avoid; }
  .sec-arch__node.is-key { background: #fff !important; border: 2px solid #000 !important; }
  .sec-disclose { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
  .sec-disclose::after { display: none !important; }
  .sec-disclose h3, .sec-disclose .sec-disclose__addr, .sec-disclose p, .sec-disclose a { color: #000 !important; }
  .sec-disclose__tag, .sec-disclose__sla dt, .sec-disclose__u { color: #555 !important; }
  .sec-disclose__sla dd { color: #000 !important; }
  .sec-disclose__sla > div { border-color: #ccc !important; }
}

/* ============================================================
   MOTION LAYER — scroll-reveal, stagger, keyframes
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Progressive enhancement: only hide for animation when JS has flagged the page ready.
     Without this guard, users with JS disabled / slow network see permanently invisible content. */
  html.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1); transition-delay: var(--nr-stagger, 0ms); will-change: transform, opacity; }
  html.js-reveal [data-reveal="fade"] { transform: none; }
  html.js-reveal [data-reveal="left"] { transform: translateX(-24px); }
  html.js-reveal [data-reveal="right"] { transform: translateX(24px); }
  html.js-reveal [data-reveal="scale"] { transform: scale(0.96); }
  html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Floating decoration motion */
@keyframes nr-float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes nr-float-fast { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes nr-spin-slow { to { transform: rotate(360deg); } }

/* Parallax */
[data-parallax] { transform: translate3d(0, var(--nr-parallax, 0), 0); will-change: transform; }

/* ============================================================
   PAGE-WIDE BRAND POLISH
   ============================================================ */
body.nr-page ::selection { background: #fffca2; color: #1d1d1b; }
body.nr-page { scroll-behavior: smooth; }
body.nr-page :focus-visible { outline: 2px solid #1d1d1b; outline-offset: 2px; border-radius: 4px; }

/* Subtle grain overlay on yellow sections (tier-1 studios love this) */
.nr-hero, .nr-section--yellow {
  position: relative;
}
.nr-hero::before, .nr-section--yellow::before { z-index: 1; }

/* Noise texture utility — opt-in with .nr-noise */
.nr-noise { position: relative; }
.nr-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Cursor-reactive hero glow */
.nr-hero { --nr-glow-x: 70%; --nr-glow-y: 30%; }
.nr-hero .nr-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at var(--nr-glow-x) var(--nr-glow-y), rgba(255,255,255,0.55), transparent 45%);
  transition: background .18s ease-out;
  mix-blend-mode: soft-light;
}

/* ============================================================
   EDITORIAL COMPONENTS — pull quotes, stats, process strips
   ============================================================ */

/* Pull quote */
.nr-quote {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  position: relative;
}
.nr-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--n-font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--n-y-deep);
  margin-bottom: -12px;
}
.nr-quote blockquote {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  font-family: var(--n-font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: var(--n-ink);
}
.nr-quote blockquote em { font-style: normal; background: linear-gradient(180deg, transparent 65%, var(--n-y) 65%); padding: 0 4px; }
.nr-quote cite {
  display: block;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--n-muted);
  font-weight: 500;
  font-style: normal;
}

/* Stats strip */
.nr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding: 8px 0;
  margin: 12px 0 0;
}
.nr-stat { border-left: 1px solid rgba(29,29,27,0.12); padding-left: 24px; }
.nr-stat:first-child { border-left: 0; padding-left: 0; }
.nr-stat-num {
  font-family: var(--n-font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--n-ink);
  display: block;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.nr-stat-label {
  font-size: 0.9rem;
  color: var(--n-body);
  line-height: 1.45;
  margin: 0;
  max-width: 220px;
}
.nr-section--dark .nr-stat { border-left-color: rgba(255,255,255,0.14); }
.nr-section--dark .nr-stat-num { color: var(--n-y); }
.nr-section--dark .nr-stat-label { color: rgba(255,255,255,0.72); }

/* Process strip — numbered steps arranged in a row with connectors */
.nr-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding-top: 12px;
  counter-reset: nrstep;
}
.nr-process-step { counter-increment: nrstep; position: relative; padding-top: 62px; }
.nr-process-step::before {
  content: counter(nrstep, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 100px;
  background: var(--n-ink);
  color: var(--n-y);
  font-family: var(--n-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nr-process-step h3 { font-size: 1.08rem; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.008em; }
.nr-process-step p { font-size: 0.96rem; color: #4a4a44; line-height: 1.55; margin: 0; }
.nr-section--dark .nr-process-step::before { background: var(--n-y); color: var(--n-ink); }
.nr-section--dark .nr-process-step p { color: rgba(255,255,255,0.72); }

/* Feature row with visual (homepage rhythm) */
.nr-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 12px 0;
}
.nr-feature--reverse { grid-template-columns: 1fr 1fr; }
.nr-feature--reverse .nr-feature__visual { order: -1; }
@media (max-width: 900px) {
  .nr-feature { grid-template-columns: 1fr; gap: 32px; }
  .nr-feature--reverse .nr-feature__visual { order: 0; }
}
.nr-feature__visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--n-radius-lg);
  overflow: hidden;
  background: linear-gradient(145deg, #fffca2 0%, #f6dd4a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 80px -24px rgba(20,20,18,0.18);
}
.nr-feature__visual--dark { background: linear-gradient(145deg, #2a2a28 0%, #17171a 100%); color: #fff; }
.nr-feature__visual--cream { background: var(--n-cream); border: 1px solid var(--n-hair); box-shadow: 0 18px 46px -22px rgba(20,20,18,0.1); }
.nr-feature__title { font-family: var(--n-font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 16px; }
.nr-feature__body { font-size: 1.02rem; color: var(--n-body); line-height: 1.6; margin: 0 0 18px; }

/* Floating accent dots inside heroes */
.nr-float {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-radius: 100px;
  animation: nr-float-slow 6s ease-in-out infinite;
}
.nr-float--y { background: var(--n-y-deep); }
.nr-float--d { background: var(--n-ink); }
.nr-float--fast { animation: nr-float-fast 4s ease-in-out infinite; }

/* Magnetic button base (JS adds the translate) */
.nr-btn--mag { transition: transform .25s cubic-bezier(.2,.65,.2,1); }

/* Tagline eyebrow alt — yellow bar with serial number feel */
.nr-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--n-ink);
  background: var(--n-y);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.nr-tag-num { color: rgba(29,29,27,0.55); font-weight: 500; }

/* Display numeric (big hero numbers) */
.nr-display-num {
  font-family: var(--n-font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--n-ink);
  font-variant-numeric: tabular-nums;
  display: block;
}

/* "N" watermark — display an enormous outlined N as a background element */
.nr-watermark-n {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 40%;
  aspect-ratio: 1/1;
  opacity: 0.06;
  background:
    linear-gradient(90deg, currentColor 0 8%, transparent 8% 92%, currentColor 92% 100%),
    linear-gradient(to bottom right, transparent 44%, currentColor 46% 54%, transparent 56%);
}

/* Improved .nr-btn hover arrow glide */
.nr-btn { position: relative; }
.nr-btn::after { transition: transform .22s ease; }
.nr-btn:hover::after { transform: translateX(3px); }

/* ============================================================
   Shared hero search component (used on /faq, /support)
   ============================================================ */
.faq-hero-search-wrap {
  position: relative;
  max-width: 640px;
  margin-top: 32px;
}
.faq-hero-search-wrap::before {
  content: "";
  position: absolute;
  left: 22px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  border-radius: 100px;
  border: 2px solid #6b6b66;
  box-shadow: 8px 8px 0 -5px #6b6b66;
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 1;
}
.faq-hero-search {
  width: 100%;
  box-sizing: border-box;
  height: 62px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0 24px 0 56px;
  font: 500 1.08rem "SF Pro", Arial, sans-serif;
  color: #242424;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: 0 10px 30px -12px rgba(20,20,18,0.18);
}
.faq-hero-search::placeholder { color: #9e9e9e; font-weight: 400; }
.faq-hero-search:focus {
  border-color: #242424;
  box-shadow: 0 14px 40px -12px rgba(20,20,18,0.22);
}

/* ============================================================
   ===== FAQ PAGE =====
   Polish layer: TOC rail, callouts, last-updated, noise,
   grid-row accordion, copy checkmark, result-count pill,
   parallax orbs, kbd auto-peek.
   ============================================================ */

.faq-shell { position: relative; }
.faq-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(17,17,17,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 95%);
  pointer-events: none;
  z-index: 0;
}
.faq-shell > * { position: relative; z-index: 1; }

/* Desktop TOC rail */
.faq-toc-rail {
  position: fixed;
  left: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px;
  background: rgba(255,253,244,0.72);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 100px;
  box-shadow: 0 12px 40px -18px rgba(17,17,17,0.25);
  opacity: 0;
  transition: opacity .4s ease;
}
.faq-toc-rail.is-in { opacity: 1; }
@media (min-width: 1180px) { .faq-toc-rail { display: flex; } }
.faq-toc-dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(17,17,17,0.22);
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .25s;
}
.faq-toc-dot::after {
  content: attr(data-label);
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  font: 500 .78rem "SF Pro", Arial, sans-serif;
  background: #242424;
  color: #fff;
  padding: 6px 12px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s cubic-bezier(.2,.8,.2,1);
}
.faq-toc-dot:hover { transform: scale(1.25); }
.faq-toc-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.faq-toc-dot.is-active { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255,252,162,0.9); }

/* Grid-row accordion (smoother than max-height) */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  transition: grid-template-rows .42s cubic-bezier(.2,.8,.2,1), padding .42s cubic-bezier(.2,.8,.2,1);
}
.faq-a > * { min-height: 0; overflow: hidden; }
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  max-height: none;
  padding: 0 10% 26px 0;
}

/* Last-updated chip */
.faq-updated {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  font: 500 .72rem "SF Pro", Arial, sans-serif;
  color: rgba(17,17,17,0.42);
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.faq-updated::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(17,17,17,0.28);
}
@media (max-width: 640px) { .faq-updated { display: none; } }

/* Inline callouts */
.faq-callout {
  margin: 14px 0 6px;
  padding: 14px 16px 14px 18px;
  border-radius: 14px;
  border-left: 3px solid currentColor;
  background: #fafaf6;
  font: 400 .96rem "SF Pro", Arial, sans-serif;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}
.faq-callout__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem;
  background: currentColor;
  color: #fff;
}
.faq-callout__icon svg { width: 12px; height: 12px; color: #fff; stroke: #fff; }
.faq-callout__body { color: #3d3d3d; }
.faq-callout__body strong { color: #242424; font-weight: 600; }
.faq-callout--note { color: #0c6a8a; background: #eef7fb; }
.faq-callout--tip { color: #0c8a3c; background: #ecf8f0; }
.faq-callout--warn { color: #a04a08; background: #fdf3e6; }

/* Permalink copy checkmark */
.faq-permalink { position: relative; }
.faq-permalink__link { transition: opacity .18s; }
.faq-permalink.is-copied .faq-permalink__link { opacity: 0; }
.faq-permalink__check {
  width: 16px; height: 16px;
  position: absolute;
  left: 10px; top: 50%;
  margin-top: -8px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  color: #0c8a3c;
}
.faq-permalink.is-copied .faq-permalink__check {
  opacity: 1;
  transform: scale(1);
  animation: faq-check-draw .45s .05s forwards cubic-bezier(.2,.8,.2,1);
}
@keyframes faq-check-draw { to { stroke-dashoffset: 0; } }

/* Result count pill */
.faq-result-count {
  display: none;
  margin: 0 0 20px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 100px;
  font: 500 .88rem "SF Pro", Arial, sans-serif;
  color: #3d3d3d;
  width: fit-content;
  box-shadow: 0 6px 16px -10px rgba(17,17,17,0.15);
}
.faq-result-count.is-visible {
  display: inline-flex; align-items: center; gap: 10px;
  animation: faq-count-in .3s cubic-bezier(.2,.8,.2,1);
}
.faq-result-count strong { color: #242424; font-weight: 700; }
.faq-result-count button {
  margin-left: 4px; background: transparent; border: 0;
  font: 500 .82rem "SF Pro", Arial, sans-serif;
  color: rgba(17,17,17,0.55); cursor: pointer; padding: 2px 8px; border-radius: 6px;
}
.faq-result-count button:hover { color: #242424; background: #fafaf6; }
@keyframes faq-count-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Hero: noise overlay */
.faq-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(17,17,17,0.06) 1px, transparent 1px),
    radial-gradient(rgba(17,17,17,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.faq-hero__orb { will-change: transform; }

/* Helpful widget polish */
.faq-helpful.is-answered .faq-helpful-lbl { display: none; }

/* ====== 3rd-pass polish ====== */

/* Softer callout icon (reduce harsh saturated disc) */
.faq-callout { border-left-width: 2px; }
.faq-callout__icon { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }

/* Updated-chip: "fresh" pulse variant */
.faq-updated[data-fresh="1"]::before {
  background: #23b26d;
  animation: faq-fresh-pulse 2.4s ease-in-out infinite;
}
.faq-updated[data-fresh="1"] { color: #0c6a3c; font-weight: 600; }
@keyframes faq-fresh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35,178,109,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(35,178,109,0); }
}

/* TOC rail dot — per-section scroll-progress arc */
.faq-toc-dot {
  background:
    conic-gradient(#111 calc(var(--progress, 0) * 1%), rgba(17,17,17,0.22) 0);
}
.faq-toc-dot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fffdf4;
  transition: background .2s;
  z-index: 0;
}
.faq-toc-dot.is-active::before { background: #fffca2; }
.faq-toc-dot:hover::before { background: #fff; }

/* Chevron bounce on hover (micro-delight) */
.faq-q:hover .faq-q__chev { animation: faq-chev-bounce .55s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-chev-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.faq-item.is-open .faq-q:hover .faq-q__chev { animation: none; }

/* Section number + title draw-in when revealed */
.faq-section-num {
  display: inline-block;
  transform: translateY(-4px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
.faq-section.is-seen .faq-section-num { transform: translateY(0); opacity: 1; }
.faq-section-title {
  background-image: linear-gradient(90deg, #fffca2, #fffca2);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 10px;
  transition: background-size .9s cubic-bezier(.2,.8,.2,1);
  padding-bottom: 2px;
}
.faq-section.is-seen .faq-section-title { background-size: 36% 10px; }

/* Copy-as-markdown action next to permalink */
.faq-md {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(17,17,17,0.55);
  font: 500 .85rem "SF Pro", Arial, sans-serif;
  padding: 6px 10px; border-radius: 8px;
  transition: color .15s cubic-bezier(.2,.8,.2,1), background .15s cubic-bezier(.2,.8,.2,1);
}
.faq-md:hover { color: #242424; background: #fafaf6; }
.faq-md svg { width: 14px; height: 14px; }
.faq-md.is-copied { color: #0c8a3c; }
.faq-a__foot .faq-actions { display: inline-flex; align-items: center; gap: 2px; }

/* Active category tab — capsule around count */
.faq-cat-tab.is-active .faq-cat-tab__count {
  background: rgba(17,17,17,0.08);
  padding: 1px 8px;
  border-radius: 100px;
  margin-left: 8px;
}

/* Tighten italic tracking at display size */
.faq-hero h1 em { letter-spacing: -0.045em; }

/* Subtle ambient yellow wash inside the shell */
.faq-shell::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1100px 420px at 50% 22%, rgba(255,252,162,0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

/* Reduced motion overrides for new animations */
@media (prefers-reduced-motion: reduce) {
  .faq-q:hover .faq-q__chev { animation: none !important; }
  .faq-updated[data-fresh="1"]::before { animation: none !important; }
  .faq-section-num, .faq-section-title { transition: none !important; }
}

/* Print */
@media print {
  .faq-hero__glow, .faq-hero__orb, .faq-progress, .faq-progress-track, .faq-hero-bridge, .faq-categories, .faq-toc-rail, .faq-sidebar, .faq-kbd-hint, .faq-toast, .faq-cta, .faq-a__foot { display: none !important; }
  .faq-item { page-break-inside: avoid; }
  .faq-a { grid-template-rows: 1fr !important; padding: 0 0 16px !important; }
  .faq-hero { padding: 24px !important; background: #fff !important; }
  .faq-hero::before, .faq-hero::after { display: none; }
}

/* ============================================================
   ===== FAQ SIDEBAR (desktop-only two-column layout) =====
   ============================================================ */

/* Default (mobile + tablet): hidden — existing sticky chip bar handles nav */
.faq-sidebar { display: none; }

@media (min-width: 1200px) {
  .faq-sidebar { display: block; }
  .faq-sidebar__inner {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding-right: 4px;
    /* Subtle mask to fade scroll edges */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
    scrollbar-width: thin;
  }
  .faq-sidebar__inner::-webkit-scrollbar { width: 4px; }
  .faq-sidebar__inner::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.12); border-radius: 100px; }

  .faq-sidebar__section { display: flex; flex-direction: column; gap: 10px; }
  .faq-sidebar__label {
    font: 600 .68rem/1 "SF Pro Display", "SF Pro", Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(17,17,17,0.42);
    padding: 0 10px;
  }

  .faq-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
  .faq-sidebar__link {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none !important;
    color: rgba(17,17,17,0.62);
    font: 500 .94rem/1.2 "SF Pro", Arial, sans-serif;
    letter-spacing: -0.005em;
    position: relative;
    transition: color .18s, background .18s;
  }
  .faq-sidebar__link:hover { color: var(--n-ink, #242424); background: rgba(17,17,17,0.04); text-decoration: none !important; }
  .faq-sidebar__num {
    font: 600 .72rem/1 "SF Pro Display", "SF Pro", Arial, sans-serif;
    color: rgba(17,17,17,0.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }
  .faq-sidebar__name { font-weight: 500; }
  .faq-sidebar__count {
    font: 500 .74rem/1 "SF Pro", Arial, sans-serif;
    color: rgba(17,17,17,0.38);
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: 100px;
    background: transparent;
    transition: background .18s, color .18s;
  }
  .faq-sidebar__link.is-active {
    color: var(--n-ink, #242424);
    font-weight: 600;
    background: rgba(255,252,162,0.55);
  }
  .faq-sidebar__link.is-active::before {
    content: "";
    position: absolute;
    left: -14px; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--n-ink, #242424);
    border-radius: 100px;
  }
  .faq-sidebar__link.is-active .faq-sidebar__num { color: var(--n-ink, #242424); }
  .faq-sidebar__link.is-active .faq-sidebar__count { background: rgba(17,17,17,0.1); color: var(--n-ink, #242424); }

  .faq-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .faq-sidebar__list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background .18s;
  }
  .faq-sidebar__list li:hover { background: rgba(17,17,17,0.04); }
  .faq-sidebar__list a {
    font: 500 .88rem/1.4 "SF Pro", Arial, sans-serif;
    color: #2b2b2b;
    text-decoration: none !important;
    letter-spacing: -0.003em;
  }
  .faq-sidebar__list a:hover { color: #000; text-decoration: none !important; }
  .faq-sidebar__meta {
    font: 500 .7rem/1 "SF Pro", Arial, sans-serif;
    color: rgba(17,17,17,0.42);
    letter-spacing: 0.02em;
  }

  .faq-sidebar__kbd {
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 12px 12px;
    background: #fafaf6;
    border: 1px solid var(--n-hair, #eeeee5);
    border-radius: 12px;
    font: 500 .82rem/1.3 "SF Pro", Arial, sans-serif;
    color: rgba(17,17,17,0.65);
  }
  .faq-sidebar__kbd kbd {
    font: 600 .74rem/1 ui-monospace, SFMono-Regular, monospace;
    background: #fff;
    border: 1px solid rgba(17,17,17,0.14);
    border-bottom-width: 2px;
    padding: 3px 7px;
    border-radius: 6px;
    color: #1d1d1b;
  }

  .faq-sidebar__cta {
    padding: 16px 16px 18px;
    background: var(--n-ink, #242424);
    color: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .faq-sidebar__cta p {
    font: 500 .88rem/1.45 "SF Pro", Arial, sans-serif;
    margin: 0;
    color: rgba(255,255,255,0.82);
  }
  .faq-sidebar__cta-btn {
    align-self: flex-start;
    font: 600 .86rem/1 "SF Pro Display", "SF Pro", Arial, sans-serif;
    color: var(--n-ink, #242424) !important;
    background: var(--n-y, #fffca2);
    padding: 10px 14px;
    border-radius: 56px;
    text-decoration: none !important;
    transition: transform .2s;
  }
  .faq-sidebar__cta-btn:hover { transform: translateX(3px); text-decoration: none !important; }

  /* Hide floating TOC rail on desktop — sidebar replaces it */
  .faq-toc-rail { display: none !important; }

  /* Accordion padding: tighter right gutter in narrower main column */
  .faq-item.is-open .faq-a { padding-right: 4% !important; }
}

/* Ultra-wide polish: cap shell and keep elegant rather than adding a third rail */
@media (min-width: 1600px) {
  /* faq-shell already caps at 1280px — just add a bit more breathing room */
  .faq-shell { column-gap: 88px; }
}

/* ============================================================
   ===== SUPPORT PAGE =====
   Tier-1 redesign. Calm editorial register. One moment of taste:
   the SLA commitments slab on dark, with a yellow rule animating in.
   Scope: .sup-page only. Tokens: --n-y #fffca2, --n-ink #111,
   --n-cream #fffdf4, --n-hair #eeeee5.
   ============================================================ */

.sup-page { background: #fff; color: #242424; }
.sup-page .sup-rev { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.sup-page .sup-rev.is-in { opacity: 1; transform: none; }

/* ---------- Incident banner (kept; quieter) ---------- */
.sup-incident { display: none; background: #fffca2; color: #242424; padding: 11px 28px; text-align: center; font: 500 0.92rem/1.4 "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif; position: relative; }
body[data-incident="1"] .sup-incident { display: block; }
.sup-incident a { font-weight: 600; margin-left: 6px; color: #242424; text-underline-offset: 3px; }
.sup-incident-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; font-size: 1.2rem; cursor: pointer; color: #242424; padding: 4px 8px; line-height: 1; }
.sup-incident-x:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* ============================================================
   HERO — editorial type, calm, one breathing signal
   ============================================================ */
.sup-hero2 {
  position: relative;
  padding: 124px 24px 88px;
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(255,252,162,0.45), transparent 62%),
    radial-gradient(900px 520px at -10% 110%, rgba(255,253,244,1), transparent 60%),
    #fff;
  overflow: hidden;
  isolation: isolate;
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif;
}
.sup-hero2::before {
  content: ""; position: absolute; left: 0; right: 0; top: 78px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,20,18,0.08) 18%, rgba(20,20,18,0.08) 82%, transparent);
  z-index: 0; pointer-events: none;
}
.sup-hero2__inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.sup-hero2__lead { max-width: 880px; }

.sup-status2 {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--n-hair, #eeeee5); color: #242424;
  padding: 8px 16px 8px 12px; border-radius: 100px;
  font: 600 0.78rem/1 "SF Pro Display","SF Pro",Arial,sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 2px 14px -8px rgba(20,20,18,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sup-status2:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(20,20,18,0.22); text-decoration: none; }
.sup-status2__dot { width: 8px; height: 8px; border-radius: 100px; background: #0c8a3c; position: relative; flex-shrink: 0; }
.sup-status2__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 100px; background: #0c8a3c; opacity: 0.3; animation: sup-ping 2.4s ease-out infinite; }
@keyframes sup-ping { 0% { transform: scale(0.55); opacity: 0.55; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.sup-status2__sep { color: rgba(20,20,18,0.3); font-weight: 400; }
.sup-status2__meta { color: #6b6b66; font-weight: 500; }

.sup-hero2__h1 {
  margin: 28px 0 22px;
  font-family: "SF Pro", "SF Pro Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: #242424;
  max-width: 14ch;
}
.sup-hero2__h1 em {
  /* italic removed (brand) */
  font-family: "SF Pro", Georgia, serif;
  font-weight: 400;
  position: relative;
  padding: 0 0.04em;
}
.sup-hero2__h1 em::before {
  content: ""; position: absolute; left: 0.02em; right: 0.04em; bottom: 0.06em; height: 0.34em;
  background: var(--n-y, #fffca2);
  z-index: -1;
  border-radius: 2px;
  transform: skewX(-6deg);
}
.sup-hero2__line { display: block; }
.sup-hero2__line:nth-child(1) { animation: sup-rise 0.85s cubic-bezier(.2,.7,.2,1) both; animation-delay: 80ms; }
.sup-hero2__line:nth-child(2) { animation: sup-rise 0.85s cubic-bezier(.2,.7,.2,1) both; animation-delay: 220ms; }
@keyframes sup-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.sup-hero2__lede {
  font: 400 1.18rem/1.6 "SF Pro Display","SF Pro",Arial,sans-serif;
  color: #4a4a44;
  max-width: 56ch;
  margin: 0 0 36px;
  letter-spacing: -0.005em;
  animation: sup-fade 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: 380ms;
}
@keyframes sup-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sup-hero2__search { position: relative; max-width: 620px; animation: sup-fade 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: 480ms; }
.sup-hero2__search-ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7a7a72; pointer-events: none; }
.sup-hero2__search-input {
  width: 100%; box-sizing: border-box; height: 62px;
  background: #fff;
  border: 1.5px solid rgba(20,20,18,0.12);
  border-radius: 62px;
  padding: 0 64px 0 52px;
  font: 500 1.04rem "SF Pro Display","SF Pro",Arial,sans-serif;
  color: #242424; outline: none;
  letter-spacing: -0.005em;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sup-hero2__search-input::placeholder { color: #8a8a82; font-weight: 400; }
.sup-hero2__search-input:hover { border-color: rgba(20,20,18,0.22); }
.sup-hero2__search-input:focus { border-color: #242424; box-shadow: 0 12px 44px -20px rgba(20,20,18,0.4), 0 0 0 4px rgba(255,252,162,0.55); }
.sup-hero2__search-kbd { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 0.76rem/1 ui-monospace,SFMono-Regular,monospace; background: #fff; border: 1px solid rgba(20,20,18,0.14); border-bottom-width: 2px; padding: 5px 9px; border-radius: 7px; color: #3a3a35; pointer-events: none; }

.sup-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px -18px rgba(20,20,18,0.22), 0 0 0 1px rgba(20,20,18,0.06); display: none; overflow: hidden; z-index: 30; max-height: 360px; overflow-y: auto; }
.sup-search-results.show { display: block; }
.sup-search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; text-decoration: none; color: #242424; border-bottom: 1px solid #f4f4ed; transition: background .15s; cursor: pointer; }
.sup-search-result:last-child { border-bottom: 0; }
.sup-search-result.is-active, .sup-search-result:hover { background: #fffdf4; text-decoration: none; }
.sup-search-result strong { display: block; font: 500 0.98rem/1.3 "SF Pro Display","SF Pro",Arial,sans-serif; margin-bottom: 2px; }
.sup-search-result .cat { font: 500 0.78rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; color: #8a8a82; }
.sup-search-result .pill { display: inline-flex; align-items: center; padding: 4px 10px; background: #fafaf6; border: 1px solid var(--n-hair, #eeeee5); border-radius: 56px; font: 600 0.7rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; color: #3a3a35; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; }

.sup-hero2__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; animation: sup-fade 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: 580ms; }
.sup-hero2__chips-lbl { font: 600 0.7rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.16em; color: #8a8a82; margin-right: 6px; }
.sup-hero2__chip { background: #fff; border: 1px solid rgba(20,20,18,0.1); color: #242424; font: 500 0.86rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; padding: 9px 14px; border-radius: 100px; cursor: pointer; transition: transform .18s, background .18s, border-color .18s; letter-spacing: -0.005em; }
.sup-hero2__chip:hover { background: #242424; color: var(--n-y, #fffca2); border-color: #242424; transform: translateY(-1px); }
.sup-hero2__chip:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* ============================================================
   SHELL + section rhythm
   ============================================================ */
.sup-shell2 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 96px;
  font-family: "SF Pro Display","SF Pro",-apple-system,BlinkMacSystemFont,"Inter",Arial,sans-serif;
  color: #242424;
}
.sup-sec { margin-top: 112px; }
.sup-sec__head { max-width: 740px; margin: 0 0 36px; }
.sup-sec__eyebrow { font: 600 0.74rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.18em; color: #8a8a82; margin: 0 0 14px; }
.sup-sec__h {
  font-family: "SF Pro", "SF Pro Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: #242424;
}

/* ============================================================
   EMERGENCY — calm, single accent
   ============================================================ */
.sup-em {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 22px 50px -32px rgba(20,20,18,0.18);
}
.sup-em__rule { background: #ff3b30; height: 100%; min-height: 100%; }
.sup-em__body { padding: 28px 32px 26px; }
.sup-em__eyebrow { font: 600 0.72rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.16em; color: #ff3b30; margin: 0 0 10px; }
.sup-em__h { font-family: "SF Pro", Georgia, serif; font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 10px; color: #242424; max-width: 38ch; }
.sup-em__p { font: 400 1.02rem/1.6 "SF Pro Display","SF Pro",Arial,sans-serif; color: #4a4a44; margin: 0 0 18px; max-width: 60ch; }
.sup-em__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 14px; }
.sup-em__btn { display: inline-flex; align-items: center; gap: 10px; background: #ff3b30; color: #fff; padding: 12px 20px; border-radius: 56px; text-decoration: none; font: 600 0.94rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; letter-spacing: -0.005em; transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 10px 24px -10px rgba(255,59,48,0.5); }
.sup-em__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(255,59,48,0.6); text-decoration: none; }
.sup-em__btn-dot { width: 8px; height: 8px; border-radius: 56px; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
.sup-em__link { color: #242424; font: 600 0.94rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sup-em__link:hover { color: #ff3b30; }
.sup-em__sla { font: 500 0.84rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; color: #6b6b66; margin: 6px 0 0; letter-spacing: -0.005em; }

/* ============================================================
   TRIAGE — three lanes
   ============================================================ */
.sup-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .sup-lanes { grid-template-columns: 1fr; } }
.sup-lane {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 24px;
  background: #fff;
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 18px;
  text-decoration: none;
  color: #242424;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
  min-height: 200px;
}
.sup-lane::before {
  content: ""; position: absolute; inset: auto -30% -50% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,162,0.7), transparent 65%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 0;
}
.sup-lane > * { position: relative; z-index: 1; }
.sup-lane:hover { transform: translateY(-3px); border-color: #d8d8cd; box-shadow: 0 24px 50px -24px rgba(20,20,18,0.22); text-decoration: none; }
.sup-lane:hover::before { opacity: 1; }
.sup-lane__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 100px;
  background: var(--n-cream, #fffdf4); border: 1px solid var(--n-hair, #eeeee5);
  font: 700 0.9rem/1 "SF Pro", Georgia, serif;
  color: #242424;
  margin-bottom: 4px;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.sup-lane:hover .sup-lane__num { background: var(--n-y, #fffca2); border-color: #242424; transform: rotate(-6deg); }
.sup-lane__h { font-family: "SF Pro", Georgia, serif; font-weight: 400; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.1; margin: 0; color: #242424; }
.sup-lane__p { font: 400 0.96rem/1.55 "SF Pro Display","SF Pro",Arial,sans-serif; color: #4a4a44; margin: 0; max-width: 32ch; }
.sup-lane__cta { margin-top: auto; padding-top: 12px; font: 600 0.86rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; color: #242424; display: inline-flex; align-items: center; gap: 8px; opacity: 0.75; transition: opacity .2s, gap .2s; }
.sup-lane__cta .arw { transition: transform .2s; }
.sup-lane:hover .sup-lane__cta { opacity: 1; }
.sup-lane:hover .sup-lane__cta .arw { transform: translateX(4px); }
.sup-lane:focus-visible { outline: 2px solid #111; outline-offset: 3px; border-color: #242424; }

/* ============================================================
   SELF-SERVE — editorial accordion
   ============================================================ */
.sup-ss2 { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--n-hair, #eeeee5); }
.sup-ss2__item { border-bottom: 1px solid var(--n-hair, #eeeee5); }
.sup-ss2__q {
  width: 100%; background: transparent; border: 0;
  display: grid; grid-template-columns: 56px 1fr 24px; gap: 18px; align-items: center;
  padding: 22px 4px;
  text-align: left; cursor: pointer;
  font: 500 1.08rem/1.3 "SF Pro Display","SF Pro",Arial,sans-serif;
  color: #242424;
  letter-spacing: -0.01em;
  transition: background .2s ease;
}
.sup-ss2__q:hover { background: rgba(255,253,244,0.6); }
.sup-ss2__q:focus-visible { outline: 2px solid #111; outline-offset: 2px; border-radius: 6px; }
.sup-ss2__n { font: 700 0.78rem/1 "SF Pro", Georgia, serif; letter-spacing: 0.06em; color: #8a8a82; font-variant-numeric: tabular-nums; }
.sup-ss2__t { letter-spacing: -0.01em; }
.sup-ss2__chev { width: 14px; height: 14px; position: relative; justify-self: end; }
.sup-ss2__chev::before, .sup-ss2__chev::after { content: ""; position: absolute; left: 50%; top: 50%; background: #242424; border-radius: 1px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.sup-ss2__chev::before { width: 14px; height: 1.6px; transform: translate(-50%, -50%); }
.sup-ss2__chev::after { width: 1.6px; height: 14px; transform: translate(-50%, -50%); }
.sup-ss2__item.is-open .sup-ss2__chev::after { transform: translate(-50%, -50%) scaleY(0); }
.sup-ss2__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.sup-ss2__item.is-open .sup-ss2__a { max-height: 600px; }
.sup-ss2__a dl { display: grid; grid-template-columns: 140px 1fr; gap: 12px 28px; margin: 0; padding: 4px 0 28px 74px; }
.sup-ss2__a dt { font: 600 0.7rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.14em; color: #8a8a82; padding-top: 4px; }
.sup-ss2__a dd { margin: 0; font: 400 0.98rem/1.55 "SF Pro Display","SF Pro",Arial,sans-serif; color: #3a3a35; max-width: 60ch; }
.sup-ss2__a code { font: 500 0.86rem/1 ui-monospace,SFMono-Regular,monospace; background: #fffdf4; border: 1px solid var(--n-hair,#eeeee5); padding: 2px 6px; border-radius: 4px; color: #242424; }
.sup-ss2__a a { color: #242424; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
@media (max-width: 640px) {
  .sup-ss2__q { grid-template-columns: 40px 1fr 20px; gap: 12px; padding: 20px 4px; font-size: 1rem; }
  .sup-ss2__a dl { grid-template-columns: 1fr; gap: 4px 0; padding: 0 0 22px 52px; }
  .sup-ss2__a dt { padding-top: 10px; }
}

/* ============================================================
   SLA — THE MOMENT OF TASTE (dark slab, editorial numerals)
   ============================================================ */
.sup-sla {
  margin-top: 128px;
  background: #242424;
  color: #fff;
  border-radius: 32px;
  padding: 80px 24px 72px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sup-sla::before {
  content: ""; position: absolute; right: -160px; top: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,162,0.16), transparent 62%);
  pointer-events: none; z-index: 0;
}
.sup-sla::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px; opacity: 0.05; mix-blend-mode: overlay; z-index: 0;
}
.sup-sla__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; padding: 0 16px; }
.sup-sla__head { max-width: 760px; margin: 0 0 56px; }
.sup-sla__eyebrow { font: 600 0.74rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.18em; color: var(--n-y, #fffca2); margin: 0 0 16px; }
.sup-sla__h {
  font-family: "SF Pro", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: #fff;
}
.sup-sla__h em { /* italic removed (brand) */ color: var(--n-y, #fffca2); font-family: "SF Pro", Georgia, serif; }
.sup-sla__lede { font: 400 1.05rem/1.55 "SF Pro Display","SF Pro",Arial,sans-serif; color: rgba(255,255,255,0.72); margin: 0; max-width: 56ch; letter-spacing: -0.005em; }

.sup-sla__list { list-style: none; padding: 0; margin: 0; }
.sup-sla__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.3fr) auto;
  grid-template-areas:
    "num main target"
    "bar bar    bar";
  column-gap: 28px; row-gap: 18px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: baseline;
  position: relative;
}
.sup-sla__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.sup-sla__rownum { grid-area: num; font: 700 0.86rem/1 "SF Pro", Georgia, serif; color: rgba(255,252,162,0.55); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; padding-top: 14px; }
.sup-sla__rowmain { grid-area: main; min-width: 0; }
.sup-sla__rowt { font-family: "SF Pro", Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.95rem); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 6px; color: #fff; }
.sup-sla__rowsub { font: 400 0.96rem/1.5 "SF Pro Display","SF Pro",Arial,sans-serif; color: rgba(255,255,255,0.68); margin: 0; max-width: 50ch; }
.sup-sla__rowtarget { grid-area: target; text-align: right; padding-top: 6px; min-width: 140px; }
.sup-sla__num {
  display: inline-block;
  font-family: "SF Pro", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--n-y, #fffca2);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sup-sla__num .u { font-size: 0.5em; font-weight: 600; vertical-align: 0.45em; margin-left: 2px; letter-spacing: 0; }
.sup-sla__lbl { display: block; margin-top: 6px; font: 600 0.7rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.sup-sla__rowbar { grid-area: bar; height: 2px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; position: relative; margin-left: 84px; }
.sup-sla__fill { display: block; height: 100%; width: var(--pct, 0%); background: linear-gradient(90deg, #f6dd4a 0%, var(--n-y, #fffca2) 100%); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 14px rgba(255,252,162,0.55); }
.sup-sla__fill.is-in { transform: scaleX(1); }

@media (max-width: 760px) {
  .sup-sla { padding: 56px 18px 48px; border-radius: 24px; }
  .sup-sla__row { grid-template-columns: 44px 1fr; grid-template-areas: "num main" "num target" "bar bar"; column-gap: 16px; row-gap: 8px; padding: 22px 0; }
  .sup-sla__rowtarget { text-align: left; padding-top: 0; min-width: 0; }
  .sup-sla__num { font-size: 2rem; }
  .sup-sla__lbl { margin-top: 4px; }
  .sup-sla__rowbar { margin-left: 60px; }
}

.sup-sla__note { font: 400 0.94rem/1.6 "SF Pro Display","SF Pro",Arial,sans-serif; color: rgba(255,255,255,0.58); margin: 36px 0 0; max-width: 64ch; letter-spacing: -0.005em; }
.sup-sla__note a { color: var(--n-y, #fffca2); text-underline-offset: 3px; text-decoration-thickness: 1.2px; }

/* ============================================================
   CHANNELS — three doors
   ============================================================ */
.sup-channels2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .sup-channels2 { grid-template-columns: 1fr; } }
.sup-ch2 {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px 28px 26px;
  background: #fff;
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 20px;
  text-decoration: none;
  color: #242424;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
  min-height: 200px;
}
.sup-ch2::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(255,252,162,0.4));
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 0;
}
.sup-ch2 > * { position: relative; z-index: 1; }
.sup-ch2:hover { transform: translateY(-3px); border-color: #242424; box-shadow: 0 24px 50px -24px rgba(20,20,18,0.22); text-decoration: none; }
.sup-ch2:hover::after { opacity: 1; }
.sup-ch2__index { font: 600 0.72rem/1 "SF Pro", Georgia, serif; color: #8a8a82; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.sup-ch2__h { font-family: "SF Pro", Georgia, serif; font-weight: 400; font-size: 1.65rem; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: #242424; }
.sup-ch2__p { font: 400 0.96rem/1.55 "SF Pro Display","SF Pro",Arial,sans-serif; color: #4a4a44; margin: 0; max-width: 36ch; }
.sup-ch2__cta { margin-top: auto; padding-top: 14px; font: 600 0.88rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; color: #242424; display: inline-flex; align-items: center; gap: 8px; opacity: 0.85; }
.sup-ch2__cta .arw { transition: transform .25s ease; }
.sup-ch2:hover .sup-ch2__cta { opacity: 1; }
.sup-ch2:hover .sup-ch2__cta .arw { transform: translateX(4px); }
.sup-ch2:focus-visible { outline: 2px solid #111; outline-offset: 3px; border-color: #242424; }

/* ============================================================
   END NOTE — quiet, signed
   ============================================================ */
.sup-end { margin-top: 128px; padding: 88px 24px 72px; background: var(--n-cream, #fffdf4); border-radius: 32px; text-align: center; position: relative; overflow: hidden; }
.sup-end__inner { max-width: 720px; margin: 0 auto; }
.sup-end__pre { font: 600 0.74rem/1 "SF Pro Display","SF Pro",Arial,sans-serif; text-transform: uppercase; letter-spacing: 0.18em; color: #8a8a82; margin: 0 0 18px; }
.sup-end__h { font-family: "SF Pro", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; color: #242424; }
.sup-end__h em { /* italic removed (brand) */ color: #242424; position: relative; padding: 0 0.04em; }
.sup-end__h em::before { content: ""; position: absolute; left: 0.04em; right: 0.06em; bottom: 0.08em; height: 0.32em; background: var(--n-y, #fffca2); z-index: -1; border-radius: 2px; transform: skewX(-6deg); }
.sup-end__p { font: 400 1.08rem/1.6 "SF Pro Display","SF Pro",Arial,sans-serif; color: #4a4a44; margin: 0 auto 32px; max-width: 52ch; letter-spacing: -0.005em; }
.sup-end__cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: #242424; color: #fff;
  padding: 17px 30px; border-radius: 56px;
  border: 0; cursor: pointer;
  font: 600 1rem/1 "SF Pro Display","SF Pro",Arial,sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 36px -14px rgba(20,20,18,0.45);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.sup-end__cta:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px rgba(20,20,18,0.55); }
.sup-end__cta-arw { transition: transform .25s ease; display: inline-block; }
.sup-end__cta:hover .sup-end__cta-arw { transform: translateX(4px); }
.sup-end__cta:focus-visible { outline: 3px solid var(--n-y, #fffca2); outline-offset: 3px; }

/* Footer links */
.sup-foot { margin-top: 64px; padding-top: 28px; border-top: 1px solid #f2f2ed; text-align: center; font: 500 0.86rem/1.6 "SF Pro Display","SF Pro",Arial,sans-serif; color: #8a8a82; }
.sup-foot a { color: #6b6b66; margin: 0 8px; text-decoration: none; transition: color .15s; }
.sup-foot a:hover { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
.sup-foot span { margin: 0 2px; opacity: 0.4; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sup-page .sup-rev { opacity: 1; transform: none; transition: none; }
  .sup-status2__dot::after,
  .sup-hero2__line,
  .sup-hero2__lede,
  .sup-hero2__search,
  .sup-hero2__chips { animation: none !important; }
  .sup-hero2__line { opacity: 1; transform: none; }
  .sup-lane, .sup-ch2, .sup-end__cta { transition: none !important; }
  .sup-lane:hover, .sup-ch2:hover, .sup-end__cta:hover { transform: none; }
  .sup-sla__fill { transition: none; transform: scaleX(1); }
}

/* Small-screen polish */
@media (max-width: 720px) {
  .sup-hero2 { padding: 96px 18px 64px; }
  .sup-hero2__h1 { font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .sup-hero2__lede { font-size: 1.05rem; }
  .sup-shell2 { padding: 0 18px 80px; }
  .sup-sec { margin-top: 80px; }
  .sup-em__body { padding: 24px 22px 22px; }
  .sup-end { padding: 64px 20px 56px; }
}

/* ============================================================
   SUPPORT PAGE — taste-skill override pass (DV8/MI6/VD4)
   Page-scoped tokens, Geist over Inter, asymmetric hero,
   magnetic CTAs, spotlight rows, staggered reveal cascade.
   ============================================================ */
.sup-page {
  --sup-font: "SF Pro", "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
  --sup-serif: "SF Pro", Georgia, serif;
  --sup-ink: #242424;
  --sup-ink-2: #1a1a18;
  --sup-mute: #4a4a44;
  --sup-soft: #6b6b66;
  --sup-faint: #8a8a82;
  --sup-hair: #eeeee5;
  --sup-cream: #fffdf4;
  --sup-y: #fffca2;
  --sup-y-deep: #f6dd4a;
  font-family: var(--sup-font);
  color: var(--sup-ink);
}
.sup-page .blog-navbar,
.sup-page .blog-nav-logo,
.sup-page .blog-nav-link,
.sup-page .blog-nav-cta,
.sup-page .sup-incident,
.sup-page .sup-hero2,
.sup-page .sup-hero2__lede,
.sup-page .sup-hero2__search-input,
.sup-page .sup-hero2__chip,
.sup-page .sup-hero2__chips-lbl,
.sup-page .sup-status2,
.sup-page .sup-status2__meta,
.sup-page .sup-shell2,
.sup-page .sup-sec__eyebrow,
.sup-page .sup-em__eyebrow,
.sup-page .sup-em__p,
.sup-page .sup-em__btn,
.sup-page .sup-em__link,
.sup-page .sup-em__sla,
.sup-page .sup-lane__p,
.sup-page .sup-lane__cta,
.sup-page .sup-ss2__q,
.sup-page .sup-ss2__a dt,
.sup-page .sup-ss2__a dd,
.sup-page .sup-sla__eyebrow,
.sup-page .sup-sla__lede,
.sup-page .sup-sla__rowsub,
.sup-page .sup-sla__lbl,
.sup-page .sup-sla__note,
.sup-page .sup-ch2__p,
.sup-page .sup-ch2__cta,
.sup-page .sup-end__pre,
.sup-page .sup-end__p,
.sup-page .sup-end__cta,
.sup-page .sup-foot { font-family: var(--sup-font); }

/* Pure-black -> ink-zinc */
.sup-page .sup-incident,
.sup-page .sup-incident a,
.sup-page .sup-incident-x,
.sup-page .sup-status2,
.sup-page .sup-hero2__h1,
.sup-page .sup-hero2__search-kbd,
.sup-page .sup-hero2__search-input,
.sup-page .sup-hero2__chip,
.sup-page .sup-hero2__chip:hover,
.sup-page .sup-em__h,
.sup-page .sup-em__link,
.sup-page .sup-lane,
.sup-page .sup-lane__num,
.sup-page .sup-lane__h,
.sup-page .sup-lane__cta,
.sup-page .sup-ss2__q,
.sup-page .sup-ss2__a code,
.sup-page .sup-ss2__a a,
.sup-page .sup-ch2,
.sup-page .sup-ch2__h,
.sup-page .sup-ch2__cta,
.sup-page .sup-end__h,
.sup-page .sup-end__h em { color: var(--sup-ink); }
.sup-page .sup-sla { background: var(--sup-ink); }
.sup-page .sup-end__cta { background: var(--sup-ink); }
.sup-page .sup-em__btn,
.sup-page .sup-end__cta { color: #fff; }
.sup-page .sup-ss2__chev::before,
.sup-page .sup-ss2__chev::after { background: var(--sup-ink); }
.sup-page .sup-hero2__chip:hover { background: var(--sup-ink); border-color: var(--sup-ink); color: var(--sup-y); }

/* HERO — asymmetric split-screen, no centered hero, dampen H1 scale */
.sup-page .sup-hero2 { padding: 132px 32px 96px; min-height: 100dvh; display: flex; align-items: center; }
.sup-page .sup-hero2__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  width: 100%;
}
.sup-page .sup-hero2__lead { max-width: 640px; }
.sup-page .sup-hero2__h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  letter-spacing: -0.028em;
  line-height: 1.0;
  font-weight: 400;
  margin: 24px 0 20px;
  max-width: 13ch;
}
.sup-page .sup-hero2__h1 em { font-weight: 500; color: var(--sup-ink); }
.sup-page .sup-hero2__lede {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--sup-mute);
  font-weight: 400;
  max-width: 48ch;
}
.sup-page .sup-hero2__chroma {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,20,18,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,18,0.035) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 30%, transparent 80%);
}

/* Right asset — editorial metric slab + stroked chrono glyph */
.sup-page .sup-hero2__aside {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  padding: 36px 32px;
  border-left: 1px solid var(--sup-hair);
  align-self: stretch;
  min-height: 380px;
}
.sup-page .sup-hero2__metric {
  display: grid; gap: 8px;
}
.sup-page .sup-hero2__metric-eyebrow {
  font: 600 0.7rem/1 var(--sup-font);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sup-faint);
}
.sup-page .sup-hero2__metric-num {
  font-family: var(--sup-serif); font-weight: 400;
  font-size: clamp(3.6rem, 7vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--sup-ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.sup-page .sup-hero2__metric-num::before {
  content: "";
  width: 10px; height: 10px; border-radius: 100px;
  background: var(--sup-y); margin-right: 14px; align-self: center;
  box-shadow: inset 0 0 0 1px rgba(20,20,18,0.18);
}
.sup-page .sup-hero2__metric-u {
  font-size: 0.42em; color: var(--sup-soft);
  margin-left: 4px; letter-spacing: 0;
}
.sup-page .sup-hero2__metric-foot {
  font: 500 0.78rem/1.4 var(--sup-font);
  color: var(--sup-soft); letter-spacing: -0.005em;
}
.sup-page .sup-hero2__glyph {
  width: 100%; max-width: 220px; height: auto;
  color: var(--sup-ink-2); opacity: 0.82;
  justify-self: end; align-self: end;
  animation: sup-glyph-rotate 60s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sup-glyph-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sup-page .sup-hero2__glyph { animation: none; } }
@media (max-width: 880px) {
  .sup-page .sup-hero2 { padding: 96px 20px 56px; min-height: auto; }
  .sup-page .sup-hero2__inner { grid-template-columns: 1fr; gap: 40px; }
  .sup-page .sup-hero2__aside { border-left: 0; border-top: 1px solid var(--sup-hair); padding: 28px 0 0; min-height: auto; }
  .sup-page .sup-hero2__glyph { max-width: 140px; }
}

/* TRIAGE — distinct framed cards, asymmetric first card */
.sup-page .sup-lanes {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  border-top: 0;
  border-bottom: 0;
}
.sup-page .sup-lane {
  border-radius: 10px;
  border: 1px solid var(--sup-hair);
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,20,18,0.02);
  min-height: 240px;
  padding: 32px 28px 28px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.sup-page .sup-lane:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: #d8d8cd;
  box-shadow: 0 18px 36px -22px rgba(20,20,18,0.18);
}
.sup-page .sup-lane:first-child { background: linear-gradient(165deg, #fff 0%, var(--sup-cream) 100%); }
.sup-page .sup-lane:first-child .sup-lane__num { background: var(--sup-y); border-color: var(--sup-ink); }
.sup-page .sup-lane:first-child .sup-lane__h { font-size: 1.65rem; }
@media (max-width: 880px) {
  .sup-page .sup-lanes { grid-template-columns: 1fr; gap: 12px; }
}

/* CHANNELS — divide-y not 3-equal cards */
.sup-page .sup-channels2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--sup-hair);
  border-bottom: 1px solid var(--sup-hair);
}
.sup-page .sup-ch2 {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--sup-hair);
  background: #fff;
  box-shadow: none;
  padding: 40px 30px 32px;
  min-height: 220px;
}
.sup-page .sup-ch2:last-child { border-right: 0; }
.sup-page .sup-ch2:hover {
  transform: none;
  background: var(--sup-cream);
  box-shadow: none;
  border-color: var(--sup-hair);
}
.sup-page .sup-ch2::after { display: none; }
@media (max-width: 880px) {
  .sup-page .sup-channels2 { grid-template-columns: 1fr; }
  .sup-page .sup-ch2 { border-right: 0; border-bottom: 1px solid var(--sup-hair); }
  .sup-page .sup-ch2:last-child { border-bottom: 0; }
}

/* SLA — kill neon glow, add spotlight border, inner hairline + tinted ink shadow */
.sup-page .sup-sla__fill {
  box-shadow: inset 0 0 0 1px rgba(255,252,162,0.4);
  background: linear-gradient(90deg, var(--sup-y-deep) 0%, var(--sup-y) 100%);
}
.sup-page .sup-sla__row::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: radial-gradient(220px 180px at var(--mx, 50%) var(--my, 50%), rgba(255,252,162,0.12), transparent 65%);
  opacity: 0;
  transition: opacity .25s ease;
}
.sup-page .sup-sla__row:hover::before { opacity: 1; }
.sup-page .sup-sla__num {
  position: relative;
  display: inline-block;
}
.sup-page .sup-sla { box-shadow: 0 30px 80px -40px rgba(20,20,18,0.6); }

/* Staggered orchestration via --i */
.sup-page .sup-lane.sup-rev,
.sup-page .sup-ch2.sup-rev,
.sup-page .sup-ss2__item.sup-rev { transition-delay: calc(var(--i, 0) * 90ms); }

/* CTAs — magnetic-friendly: no transition on transform during pointer move */
.sup-page .sup-em__btn[data-magnetic],
.sup-page .sup-end__cta[data-magnetic] {
  transition: box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.sup-page .sup-em__btn[data-magnetic]:hover,
.sup-page .sup-end__cta[data-magnetic]:hover { transform: none; }
.sup-page .sup-em__btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 14px 30px -16px rgba(20,20,18,0.55); }
.sup-page .sup-end__cta { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 40px -18px rgba(20,20,18,0.55); }

/* Search results refresh */
.sup-page .sup-search-result strong,
.sup-page .sup-search-result .cat,
.sup-page .sup-search-result .pill { font-family: var(--sup-font); }

/* End-section — keep but trade pure-cream for tinted hairline framing */
.sup-page .sup-end { box-shadow: inset 0 0 0 1px var(--sup-hair); }

/* Footer */
.sup-page .sup-foot { color: var(--sup-soft); }

/* ============================================================
   SUPPORT PAGE — VIBRANT BRAND LANGUAGE PASS
   Match home-page energy: yellow flood hero, bold sans, illustrated
   floating cards, no Fraunces italic, lively triage tiles.
   ============================================================ */
.sup-page {
  --n-y: #fffca2;
  --n-y-deep: #f6dd4a;
  --n-ink: #242424;
}

/* Kill all serif/italic on this page */
.sup-page .sup-hero2__h1,
.sup-page .sup-sec__h,
.sup-page .sup-em__h,
.sup-page .sup-sla__h,
.sup-page .sup-end__h,
.sup-page .sup-hero2__metric-num {
  font-family: "SF Pro", "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", system-ui, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
}
.sup-page .sup-sla__h em,
.sup-page .sup-end__h em {
  font-style: normal !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  background: linear-gradient(180deg, transparent 62%, var(--n-y) 62%);
  padding: 0 0.08em;
  border-radius: 2px;
}
.sup-page .sup-hero2__h1 em {
  font-style: normal !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}
.sup-page .sup-hero2__h1 em::before { display: none; }

/* HERO — full yellow flood with brand union illustration */
.sup-page .sup-hero2 {
  background:
    radial-gradient(900px 480px at 88% 18%, rgba(255,255,255,0.55), transparent 65%),
    radial-gradient(700px 420px at 8% 92%, rgba(246,221,74,0.35), transparent 65%),
    var(--n-y) !important;
  padding: 96px 32px 88px !important;
  min-height: auto !important;
}
.sup-page .sup-hero2::before { display: none; }
.sup-page .sup-hero2__chroma {
  background-image: url('../images/hero-bg-union.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.18 !important;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%) !important;
}

.sup-page .sup-hero2__inner {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
  gap: 48px !important;
}
.sup-page .sup-hero2__lead { max-width: 680px; }

.sup-page .sup-hero2__h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
  line-height: 1.0 !important;
  margin: 22px 0 18px !important;
  color: var(--n-ink) !important;
  max-width: 14ch;
}

.sup-page .sup-hero2__lede {
  color: var(--n-ink) !important;
  font-weight: 600 !important;
  font-size: 1.12rem !important;
  line-height: 1.55 !important;
  max-width: 52ch;
  margin: 0 0 26px !important;
  opacity: 0.92;
}

/* Status pill — visible white card on yellow */
.sup-page .sup-status2 {
  background: #fff !important;
  border: 0;!important;
  box-shadow: 0 4px 0 0 var(--n-ink) !important;
  font-weight: 700 !important;
  padding: 9px 18px 9px 14px !important;
}
.sup-page .sup-status2:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 0 6px 0 0 var(--n-ink) !important;
}
.sup-page .sup-status2__dot { width: 9px; height: 9px; background: #0c8a3c !important; }
.sup-page .sup-status2__meta { color: #4a4a44 !important; font-weight: 600 !important; }

/* Primary CTA — talk to support */
.sup-page .sup-hero2__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 22px; margin: 0 0 28px;
}
.sup-page .sup-hero2__cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--n-ink); color: #fff;
  border: 0; cursor: pointer;
  padding: 16px 26px; border-radius: 56px;
  font: 700 1rem/1 "SF Pro", "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 28px -12px rgba(20,20,18,0.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sup-page .sup-hero2__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px rgba(20,20,18,0.55);
}
.sup-page .sup-hero2__cta-arw { font-size: 1.15rem; }
.sup-page .sup-hero2__cta-meta {
  font: 600 0.86rem/1.4 "SF Pro", system-ui, sans-serif;
  color: #2a2a26;
}
.sup-page .sup-hero2__cta-meta strong { font-weight: 500; }

/* Search — sit on yellow with bold border */
.sup-page .sup-hero2__search-input {
  border: 0;!important;
  background: #fff !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 0 0 var(--n-ink) !important;
}
.sup-page .sup-hero2__search-input:focus {
  border-color: var(--n-ink) !important;
  box-shadow: 0 6px 0 0 var(--n-ink), 0 0 0 4px rgba(255,255,255,0.6) !important;
}
.sup-page .sup-hero2__search-kbd {
  border-color: rgba(20,20,18,0.2) !important;
  background: #fffdf4 !important;
}

/* Chips — bold pill, lift on hover */
.sup-page .sup-hero2__chip {
  background: #fff !important;
  border: 0;!important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  box-shadow: 0 3px 0 0 var(--n-ink);
}
.sup-page .sup-hero2__chip:hover {
  background: var(--n-ink) !important;
  color: var(--n-y) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 0 5px 0 0 var(--n-ink);
}
.sup-page .sup-hero2__chips-lbl { color: #2a2a26 !important; font-weight: 500 !important; }

/* Central character anchor + orbiting hero-cards (right aside) */
.sup-page .sup-hero2__aside {
  border-left: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative;
  min-height: 540px !important;
}
.sup-page .sup-hero2__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  display: flex; align-items: center; justify-content: center;
}
.sup-page .sup-hero2__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 45%, transparent 72%);
  z-index: 1;
  filter: blur(2px);
}
.sup-page .sup-hero2__halo::after {
  content: "";
  position: absolute; inset: 18px;
  border-radius: 100%;
  border: 1.5px dashed rgba(20,20,18,0.18);
  animation: sup-orbit-rotate 80s linear infinite;
}
@keyframes sup-orbit-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sup-page .sup-hero2__halo::after { animation: none; } }

.sup-page .sup-hero2__anchor {
  position: relative;
  z-index: 2;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
  animation: sup-anchor-bob 6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sup-anchor-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .sup-page .sup-hero2__anchor { animation: none; } }
.sup-page .sup-hero2__anchor-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(20,20,18,0.18));
}
.sup-page .sup-hero2__anchor-badge {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--n-ink); color: #fff;
  font: 700 0.78rem/1 "SF Pro", system-ui, sans-serif;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 100px;
  border: 0;
  box-shadow: 0 4px 0 0 rgba(20,20,18,0.4);
  white-space: nowrap;
}
.sup-page .sup-hero2__anchor-dot {
  width: 7px; height: 7px; border-radius: 100px;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.35);
  animation: sup-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes sup-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0.18); }
}
@media (prefers-reduced-motion: reduce) { .sup-page .sup-hero2__anchor-dot { animation: none; } }

/* Orbiting hero-cards — bigger, stacked, illustrated icon tile */
.sup-page .sup-hero2__float {
  position: absolute;
  background: #fff;
  border: 0;
  border-radius: 20px;
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  box-shadow: 0 4px 0 0 var(--n-ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  width: 218px;
  z-index: 3;
}
.sup-page .sup-hero2__float:hover {
  transform: translate(-2px, -3px) rotate(0deg) !important;
  box-shadow: 0 8px 0 0 var(--n-ink);
}
.sup-page .sup-hero2__float-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--n-y);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--n-ink);
  flex-shrink: 0;
}
.sup-page .sup-hero2__float-icon svg { width: 22px; height: 22px; display: block; }
.sup-page .sup-hero2__float-icon--alert { background: #ffd6d3; }
.sup-page .sup-hero2__float-text { width: 100%; min-width: 0; }
.sup-page .sup-hero2__float-title {
  font: 700 0.74rem/1 "SF Pro", system-ui, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4a4a44 !important;
  margin-bottom: 6px;
}
.sup-page .sup-hero2__float-metric {
  font: 700 1.85rem/1 "SF Pro", system-ui, sans-serif;
  color: var(--n-ink);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.sup-page .sup-hero2__float-metric span {
  font-size: 0.55em;
  font-weight: 600;
  margin-left: 2px;
  color: #4a4a44;
  letter-spacing: 0;
}
.sup-page .sup-hero2__float-desc {
  font: 600 0.84rem/1.35 "SF Pro", system-ui, sans-serif !important;
  color: #4a4a44 !important;
}
.sup-page .sup-hero2__float--a { top: 4%;  left: -4%;  transform: rotate(-4deg); }
.sup-page .sup-hero2__float--b { top: 36%; right: -6%; transform: rotate(3deg); z-index: 4; }
.sup-page .sup-hero2__float--c { bottom: 4%; left: 4%; transform: rotate(-2deg); }

@media (max-width: 1080px) {
  .sup-page .sup-hero2__float { width: 200px; }
  .sup-page .sup-hero2__halo { width: 320px; height: 320px; }
  .sup-page .sup-hero2__anchor { width: 260px; height: 260px; }
}

@media (max-width: 880px) {
  .sup-page .sup-hero2__inner { grid-template-columns: 1fr !important; }
  .sup-page .sup-hero2__aside { min-height: 460px !important; margin-top: 24px; }
  .sup-page .sup-hero2__stage { min-height: 460px; }
  .sup-page .sup-hero2__halo { width: 280px; height: 280px; }
  .sup-page .sup-hero2__anchor { width: 220px; height: 220px; }
  .sup-page .sup-hero2__float { width: 188px; padding: 12px 14px 14px; }
  .sup-page .sup-hero2__float-metric { font-size: 1.5rem; }
  .sup-page .sup-hero2__float--a { top: 0; left: 0; }
  .sup-page .sup-hero2__float--b { top: 32%; right: 0; left: auto; }
  .sup-page .sup-hero2__float--c { bottom: 0; left: 6%; }
}

/* TRIAGE — clean editorial frames (white card, hairline, subtle hover lift) */
.sup-page .sup-lanes {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.sup-page .sup-lane {
  background: #fff !important;
  border: 1px solid var(--sup-hair, #eeeee5) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(20,20,18,0.03) !important;
  padding: 28px 24px 24px !important;
  min-height: 220px !important;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
.sup-page .sup-lane:hover {
  transform: translateY(-2px) !important;
  background: #fff !important;
  border-color: #d8d8cd !important;
  box-shadow: 0 18px 36px -22px rgba(20,20,18,0.18) !important;
}
.sup-page .sup-lane:first-child {
  background: linear-gradient(165deg, #fff 0%, #fcfaee 100%) !important;
}
.sup-page .sup-lane__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--n-y) !important;
  border: 0;!important;
  border-radius: 12px;
  font: 700 1.1rem/1 "SF Pro", system-ui, sans-serif !important;
  color: var(--n-ink) !important;
  margin-bottom: 6px;
}
.sup-page .sup-lane:first-child .sup-lane__num {
  background: var(--n-y) !important;
}
.sup-page .sup-lane__h {
  font: 700 1.35rem/1.18 "SF Pro", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}
.sup-page .sup-lane__p {
  font-weight: 500 !important;
  color: #4a4a44 !important;
}
.sup-page .sup-lane__cta {
  font: 700 0.9rem/1 "SF Pro", system-ui, sans-serif !important;
  margin-top: auto;
}

@media (max-width: 880px) {
  .sup-page .sup-lanes { grid-template-columns: 1fr !important; }
}

/* SECTION headers — bold sans */
.sup-page .sup-sec__h,
.sup-page .sup-sla__h,
.sup-page .sup-end__h,
.sup-page .sup-em__h {
  font-weight: 700 !important;
}

/* CHANNELS — match brand cards too */
.sup-page .sup-channels2 {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.sup-page .sup-ch2 {
  background: #fff !important;
  border: 0;!important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 0 var(--n-ink) !important;
  padding: 28px 24px 24px !important;
  min-height: 200px !important;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease !important;
}
.sup-page .sup-ch2:hover {
  transform: translate(-2px, -3px) !important;
  background: #fff !important;
  box-shadow: 0 10px 0 0 var(--n-ink) !important;
}
.sup-page .sup-ch2__index {
  font: 700 0.78rem/1 "SF Pro", system-ui, sans-serif !important;
  color: #8a8a82 !important;
  letter-spacing: 0.16em;
}
.sup-page .sup-ch2__h {
  font: 700 1.25rem/1.2 "SF Pro", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}
.sup-page .sup-ch2__p { font-weight: 500 !important; color: #4a4a44 !important; }
.sup-page .sup-ch2__cta { font-weight: 400 !important; }

@media (max-width: 880px) {
  .sup-page .sup-channels2 { grid-template-columns: 1fr !important; }
}

/* Emergency card — keep red urgency but tighten brand language */
.sup-page .sup-em {
  border: 0;!important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 0 var(--n-ink) !important;
}
.sup-page .sup-em__btn { font-weight: 400 !important; }

/* End CTA */
.sup-page .sup-end {
  background: var(--n-y) !important;
  border-radius: 28px !important;
  box-shadow: 0 6px 0 0 var(--n-ink), inset 0 0 0 1.5px var(--n-ink) !important;
}
.sup-page .sup-end__cta {
  font-weight: 400 !important;
}

/* ===== PARTNERSHIPS PAGE =====
   Vibrant consumer brand language. Yellow flood. Bold sans.
   Hero-card grid. Scope: .nr-partnerships only. */

.nr-partnerships {
  --n-font-display: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --prt-ink: #242424;
  --prt-muted: #5a5a55;
  --prt-rule: rgba(17,17,17,0.10);
  --prt-paper: #ffffff;
  --prt-cream: #fffdf4;
  --prt-y: var(--n-y, #fffca2);
  --prt-y-deep: var(--n-y-deep, #f6dd4a);

  font-family: var(--n-font-display);
  color: var(--prt-ink);
  background: var(--prt-paper);
}
.nr-partnerships h1, .nr-partnerships h2, .nr-partnerships h3,
.nr-partnerships p, .nr-partnerships li, .nr-partnerships span,
.nr-partnerships button, .nr-partnerships a, .nr-partnerships strong {
  font-family: var(--n-font-display);
  font-style: normal;
}
.nr-partnerships strong { font-weight: 700; }

/* ============= HERO — asymmetric split ============= */
.prt-hero {
  position: relative;
  padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 64px) clamp(72px, 9vw, 120px);
  background: var(--prt-y);
  overflow: hidden;
}
.prt-hero__bg {
  position: absolute; inset: 0;
  background: url("../images/hero-bg-union.png") center/cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.prt-hero__inner {
  max-width: 1240px; margin: 0 auto; position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 880px) {
  .prt-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}
.prt-hero__copy { max-width: 560px; }
.prt-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--prt-ink);
  background: rgba(17,17,17,0.06);
  padding: 8px 14px; border-radius: 999px;
  margin: 0 0 24px;
}
.prt-hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1d8a4d; box-shadow: 0 0 0 3px rgba(29,138,77,0.22);
}
.prt-hero__h1 {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 22px;
  max-width: 12ch;
  color: var(--prt-ink);
}
.prt-hero__h1-accent { display: inline-block; }
.prt-hero__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55; color: #2c2c28;
  max-width: 48ch; margin: 0 0 30px;
}
.prt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.prt-hero__primary,
.prt-hero__ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1rem/1 var(--n-font-display);
  padding: 16px 24px; border-radius: 999px;
  border: 2px solid var(--prt-ink);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, box-shadow .2s;
  letter-spacing: -0.005em;
}
.prt-hero__primary { background: var(--prt-ink); color: var(--prt-y); box-shadow: 0 4px 0 0 rgba(17,17,17,0.18); }
.prt-hero__primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(17,17,17,0.22); }
.prt-hero__ghost { background: #fff; color: var(--prt-ink); }
.prt-hero__ghost:hover { transform: translateY(-2px); background: var(--prt-ink); color: var(--prt-y); }
.prt-hero__arrow { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.prt-hero__primary:hover .prt-hero__arrow,
.prt-hero__ghost:hover .prt-hero__arrow { transform: translateX(3px); }

/* Visual anchor — phone with flying cards + orbiting brand chips */
.prt-hero__visual {
  position: relative;
  min-height: clamp(360px, 44vw, 540px);
  display: flex; align-items: center; justify-content: center;
}
.prt-hero__phone {
  width: 110%;
  max-width: 620px;
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 40px rgba(17,17,17,0.18)) drop-shadow(0 8px 14px rgba(17,17,17,0.10));
  position: relative; z-index: 1;
}
.prt-hero__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.85rem/1 var(--n-font-display);
  padding: 10px 14px; border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--prt-ink);
  color: var(--prt-ink);
  box-shadow: 0 6px 0 0 rgba(17,17,17,0.10);
  z-index: 2;
  white-space: nowrap;
}
.prt-hero__chip .pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.prt-hero__chip .pip--green { background: #1d8a4d; box-shadow: 0 0 0 3px rgba(29,138,77,0.22); }
.prt-hero__chip .pip--ink { background: var(--prt-ink); }
.prt-hero__chip--1 { top: 8%; left: -2%; transform: rotate(-4deg); }
.prt-hero__chip--2 { top: 44%; right: -4%; transform: rotate(3deg); }
.prt-hero__chip--3 { bottom: 10%; left: 6%; transform: rotate(-2deg); }
@media (max-width: 880px) {
  .prt-hero__visual { min-height: 320px; }
  .prt-hero__chip--1 { top: 4%; left: 2%; }
  .prt-hero__chip--2 { top: 40%; right: 2%; }
  .prt-hero__chip--3 { bottom: 6%; left: 8%; }
}
@media (max-width: 520px) {
  .prt-hero__chip { font-size: 0.74rem; padding: 8px 11px; }
}

/* ============= PARTNERS — hero-card style grid ============= */
.prt-partners {
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 64px);
  background: #fff;
}
.prt-partners__inner { max-width: 1240px; margin: 0 auto; }
.prt-partners__head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.prt-partners__eyebrow {
  font: 600 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-muted);
  margin: 0 0 14px;
}
.prt-partners__title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 auto 16px;
  max-width: 22ch;
  color: var(--prt-ink);
}
.prt-partners__note {
  font-size: 1.02rem; font-weight: 500;
  line-height: 1.5; color: var(--prt-muted);
  max-width: 50ch; margin: 0 auto;
}

.prt-partners__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 920px) { .prt-partners__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 580px) { .prt-partners__grid { grid-template-columns: 1fr; } }

/* 4-column variant for the 11-partner grid */
.prt-partners__grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1140px) {
  .prt-partners__grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .prt-partners__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .prt-partners__grid--four { grid-template-columns: 1fr; }
}
.prt-partners__grid--four .prt-card { padding: 22px 20px; }
.prt-partners__grid--four .prt-card__name { font-size: 1.35rem; }
.prt-partners__grid--four .prt-card__role { font-size: 0.76rem; }
.prt-partners__grid--four .prt-card__detail { font-size: 0.88rem; line-height: 1.4; }
.prt-partners__grid--four .prt-card__logo { width: 48px; height: 48px; border-radius: 12px; }
.prt-partners__grid--four .prt-card__logo svg { width: 40px; height: 40px; }
.prt-partners__grid--four .prt-card__status { font-size: 0.68rem; padding: 5px 9px; }

.prt-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--prt-ink);
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 4px 0 0 var(--prt-ink);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s;
  display: flex; flex-direction: column;
}
.prt-card:hover {
  transform: translate(-2px, -4px);
  box-shadow: 0 8px 0 0 var(--prt-ink);
  background: var(--prt-y);
}
.prt-card__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.prt-card__logo {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(17,17,17,0.04);
  overflow: hidden;
}
.prt-card__status {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 0.74rem/1 var(--n-font-display);
  letter-spacing: 0.04em;
  padding: 7px 12px; border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--prt-ink);
  color: var(--prt-ink);
}
.prt-card__status .pip { width: 6px; height: 6px; border-radius: 50%; }
.prt-card__status--live .pip { background: #1d8a4d; box-shadow: 0 0 0 3px rgba(29,138,77,0.22); }
.prt-card__status--signed .pip { background: var(--prt-ink); }
.prt-card__name {
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 1.6rem; letter-spacing: -0.025em; line-height: 1.05;
  margin: 0 0 4px; color: var(--prt-ink);
}
.prt-card__role {
  font: 600 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.04em;
  color: var(--prt-muted);
  margin: 0 0 12px;
}
.prt-card__detail {
  font-size: 0.96rem; font-weight: 500;
  line-height: 1.45; color: #2c2c28;
  margin: 0;
}

.prt-partners__flow {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 28px 32px;
  background: var(--prt-y);
  border: 2px solid var(--prt-ink);
  border-radius: 20px;
  font-size: 1.02rem; font-weight: 500;
  line-height: 1.55; color: var(--prt-ink);
  text-align: center;
  max-width: 980px;
  margin-left: auto; margin-right: auto;
}
.prt-partners__flow strong { font-weight: 700; }

/* ============= TRACKS — feature card grid ============= */
.prt-tracks {
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 64px);
  background: var(--prt-cream);
}
.prt-tracks__inner { max-width: 1240px; margin: 0 auto; }
.prt-tracks__head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.prt-tracks__eyebrow {
  font: 600 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-muted);
  margin: 0 0 14px;
}
.prt-tracks__title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 auto 16px;
  color: var(--prt-ink);
}
.prt-tracks__lede {
  font-size: 1.02rem; font-weight: 500;
  line-height: 1.5; color: var(--prt-muted);
  max-width: 56ch; margin: 0 auto;
}
.prt-tracks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 920px) { .prt-tracks__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 580px) { .prt-tracks__grid { grid-template-columns: 1fr; } }

.prt-track {
  background: #fff;
  border: 2px solid var(--prt-ink);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow: 0 4px 0 0 var(--prt-ink);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s;
  display: flex; flex-direction: column;
}
.prt-track:hover {
  transform: translate(-2px, -4px);
  box-shadow: 0 8px 0 0 var(--prt-ink);
  background: var(--prt-y);
}
.prt-track__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--prt-y);
  border: 2px solid var(--prt-ink);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.prt-track__name {
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 10px; color: var(--prt-ink);
}
.prt-track__copy {
  font-size: 0.98rem; font-weight: 500;
  line-height: 1.5; color: #2c2c28;
  margin: 0 0 16px;
  flex: 1;
}
.prt-track__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.prt-track__tags span {
  font: 600 0.74rem/1 var(--n-font-display);
  letter-spacing: 0.03em;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(17,17,17,0.06);
  color: var(--prt-ink);
}
.prt-track:hover .prt-track__tags span { background: rgba(17,17,17,0.12); }

/* ============= PRINCIPLES ============= */
.prt-principles {
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 64px);
  background: var(--prt-ink);
  color: #fff;
}
.prt-principles__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.prt-principles__eyebrow {
  font: 600 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-y);
  margin: 0 0 14px;
}
.prt-principles__title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 auto clamp(48px, 5vw, 64px);
  max-width: 22ch;
  color: #fff;
}
.prt-principles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}
@media (max-width: 720px) { .prt-principles__grid { grid-template-columns: 1fr; } }
.prt-principles__item {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 26px;
  transition: background .25s, border-color .25s;
}
.prt-principles__item:hover {
  background: rgba(255,252,162,0.08);
  border-color: var(--prt-y);
}
.prt-principles__num {
  display: inline-block;
  font: 700 0.78rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-y);
  background: rgba(255,252,162,0.12);
  padding: 6px 12px; border-radius: 999px;
  margin: 0 0 14px;
}
.prt-principles__h {
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.018em; line-height: 1.2;
  margin: 0 0 10px; color: #fff;
}
.prt-principles__p {
  font-size: 0.96rem; font-weight: 400;
  line-height: 1.55; color: rgba(255,255,255,0.78);
  margin: 0;
}

/* ============= APPLY ============= */
.prt-apply {
  padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 64px);
  background: var(--prt-y);
  position: relative;
}
.prt-apply__inner { max-width: 1180px; margin: 0 auto; }
.prt-apply__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 36px;
  align-items: stretch;
}
@media (max-width: 880px) { .prt-apply__grid { grid-template-columns: 1fr; } }
.prt-apply__main {
  background: #fff;
  border: 2px solid var(--prt-ink);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 6px 0 0 var(--prt-ink);
}
.prt-apply__eyebrow {
  font: 600 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-muted);
  margin: 0 0 14px;
}
.prt-apply__title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.06; letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--prt-ink);
}
.prt-apply__line {
  font-size: 1.02rem; font-weight: 500;
  line-height: 1.55; color: #2c2c28;
  margin: 0 0 24px;
}
.prt-apply__brief {
  list-style: none; margin: 0 0 28px; padding: 0;
  counter-reset: brief;
  display: grid; gap: 12px;
}
.prt-apply__brief li {
  counter-increment: brief;
  padding: 14px 16px 14px 52px;
  background: rgba(255,252,162,0.35);
  border: 1.5px solid var(--prt-ink);
  border-radius: 14px;
  font-size: 0.98rem; font-weight: 500;
  line-height: 1.45; color: var(--prt-ink);
  position: relative;
}
.prt-apply__brief li::before {
  content: counter(brief);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--prt-ink); color: var(--prt-y);
  display: grid; place-items: center;
  font: 700 0.84rem/1 var(--n-font-display);
}
.prt-apply__brief li strong { font-weight: 700; }
.prt-apply__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prt-apply__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1rem/1 var(--n-font-display);
  padding: 16px 24px; border-radius: 999px;
  background: var(--prt-ink); color: var(--prt-y);
  border: 2px solid var(--prt-ink);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 4px 0 0 rgba(17,17,17,0.18);
}
.prt-apply__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(17,17,17,0.22); }
.prt-apply__copy {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.92rem/1 var(--n-font-display);
  padding: 14px 18px; border-radius: 999px;
  background: #fff;
  border: 2px solid var(--prt-ink);
  color: var(--prt-ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.prt-apply__copy svg { width: 16px; height: 16px; }
.prt-apply__copy:hover { background: var(--prt-ink); color: var(--prt-y); }
.prt-apply__copy.is-copied { background: #1d8a4d; color: #fff; border-color: #1d8a4d; }

.prt-apply__aside {
  background: var(--prt-ink);
  color: #fff;
  border: 2px solid var(--prt-ink);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 6px 0 0 var(--prt-ink);
}
.prt-apply__aside-h {
  font: 700 0.82rem/1 var(--n-font-display);
  letter-spacing: 0.06em;
  color: var(--prt-y);
  margin: 0 0 16px;
}
.prt-apply__aside-p {
  font-size: 0.96rem; font-weight: 400;
  line-height: 1.55; color: rgba(255,255,255,0.82);
  margin: 0 0 14px;
}
.prt-apply__aside-list {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid; gap: 10px;
}
.prt-apply__aside-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
}
.prt-apply__aside-list li strong {
  color: #fff; font-weight: 600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .prt-card, .prt-track, .prt-hero__primary, .prt-hero__ghost,
  .prt-apply__cta, .prt-hero__arrow, .prt-principles__item { transition: none !important; }
}

/* ============================================================
   ===== CONTACT PAGE =====
   Scoped to /contact (contact.html). All selectors prefixed .ctc-
   Vibrant consumer marketing — yellow flood, bold sans, hero-cards.
   ============================================================ */

/* CTA color override (per CAVEAT) */
.nr .nr-btn { color: var(--n-ink); }

.ctc {
  --ctc-ink: #242424;
  --ctc-ink-soft: #2a2a28;
  --ctc-muted: #6b6b66;
  --ctc-paper: #fff;
  --ctc-hair: #eeeee5;
  --ctc-hair-soft: #f4f4ed;
  background: #fff;
  color: var(--ctc-ink);
  font-family: var(--n-font-display);
}

.ctc *,
.ctc *::before,
.ctc *::after { box-sizing: border-box; }

.ctc :focus-visible {
  outline: 3px solid var(--n-y-deep, #f6dd4a);
  outline-offset: 3px;
  border-radius: 6px;
}

.ctc .ctc-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ============================================================
   HERO — Yellow flood, bold sans, marketing energy
   ============================================================ */
.ctc-hero {
  position: relative;
  background: var(--n-y, #fffca2);
  padding: clamp(80px, 9vw, 140px) 24px clamp(72px, 8vw, 120px);
  border-radius: 0 0 var(--n-radius-xl, 32px) var(--n-radius-xl, 32px);
  overflow: hidden;
}
.ctc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.55) 0%, transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(246,221,74,0.45) 0%, transparent 38%);
  pointer-events: none;
}
.ctc-hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ctc-hero__copy { position: relative; z-index: 2; text-align: left; }
@media (max-width: 900px) {
  .ctc-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .ctc-hero__copy { text-align: center; }
}
.ctc-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--ctc-ink);
  font-family: var(--n-font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(17,17,17,0.08);
  box-shadow: 0 1px 2px rgba(17,17,17,0.04);
  margin-bottom: 28px;
}
.ctc-tag__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1a6f3f;
  box-shadow: 0 0 0 4px rgba(26,111,63,0.18);
}
.ctc-headline {
  font-family: var(--n-font-display, "SF Pro"), -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ctc-ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.ctc-headline__alt {
  display: inline-block;
  position: relative;
  color: var(--ctc-ink);
}
.ctc-headline__alt::after {
  content: "";
  position: absolute;
  left: -0.05em; right: -0.05em;
  bottom: 0.08em;
  height: 0.32em;
  background: rgba(255,255,255,0.6);
  z-index: -1;
  border-radius: 6px;
}
.ctc-sub {
  font-family: var(--n-font-display);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--ctc-ink-soft);
  max-width: 58ch;
  margin: 0 auto 36px;
  font-weight: 400;
}
.ctc-cta-row {
  display: flex; gap: 18px; justify-content: flex-start; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .ctc-cta-row { justify-content: center; }
}
.ctc-cta-primary.nr-btn {
  background: var(--ctc-ink);
  color: #fff !important;
  font-family: var(--n-font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 28px;
  border-radius: 56px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ctc-ink);
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.ctc-cta-primary.nr-btn:hover {
  background: #000;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17,17,17,0.18);
}
.ctc-cta-primary.nr-btn::after { content: "→"; font-weight: 400; font-size: 1.05em; margin-left: 4px; }
.ctc-cta-ghost {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ctc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.ctc-cta-ghost:hover { color: var(--ctc-ink); border-bottom-color: var(--ctc-ink); }

.ctc-stat-row {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.ctc-stat-row li {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(17,17,17,0.06);
  border-radius: var(--n-radius-md, 20px);
  padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ctc-stat-row strong {
  font-family: var(--n-font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--ctc-ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ctc-stat-row span {
  font-size: 0.82rem;
  color: var(--ctc-muted);
  font-weight: 500;
  text-align: center;
}
@media (max-width: 720px) {
  .ctc-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Hero stage: phone anchor + orbiting brand cards ---------- */
.ctc-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-width: 560px;
  margin: 0 auto;
  z-index: 1;
}
.ctc-hero__phone-wrap {
  position: absolute;
  inset: 6% 14% 6% 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 24px 40px rgba(17,17,17,0.18));
}
.ctc-hero__phone {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: ctc-float 7s ease-in-out infinite;
}
@keyframes ctc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ctc-hero__phone { animation: none; }
}

.ctc-orbit {
  position: absolute;
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 16px 10px;
  box-shadow: 0 18px 46px rgba(125, 119, 0, 0.3);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 124px;
  z-index: 2;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.ctc-orbit:hover {
  box-shadow: 0 18px 46px rgba(125, 119, 0, 0.3);
}
.ctc-orbit strong {
  font-family: var(--n-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--n-ink, #242424);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ctc-orbit span {
  font-family: var(--n-font-display);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ctc-ink-soft, #2a2a28);
  line-height: 1.25;
}
.ctc-orbit--tl { top: 4%;  left: -6%;  transform: rotate(15deg); }
.ctc-orbit--tr { top: 10%; right: 0%; transform: rotate(-15deg); background: var(--n-ink, #242424); }
.ctc-orbit--tr strong { color: var(--n-y, #fffca2); }
.ctc-orbit--tr span   { color: rgba(255,255,255,0.78); }
.ctc-orbit--bl { bottom: 14%; left: -10%; transform: rotate(-22deg); }
.ctc-orbit--br { bottom: 4%;  right: 2%; transform: rotate(11deg); background: var(--n-y, #fffca2); }

@media (max-width: 900px) {
  .ctc-hero__stage { max-width: 460px; aspect-ratio: 1 / 1; }
  .ctc-orbit--tl { left: 2%; }
  .ctc-orbit--tr { right: 2%; }
  .ctc-orbit--bl { left: 2%; }
  .ctc-orbit--br { right: 2%; }
}
@media (max-width: 560px) {
  .ctc-hero__stage { max-width: 360px; }
  .ctc-orbit { min-width: 108px; padding: 10px 12px 8px; }
  .ctc-orbit strong { font-size: 1.25rem; }
  .ctc-orbit span { font-size: 0.72rem; }
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.ctc-section-title {
  font-family: var(--n-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.02;
  color: var(--ctc-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ctc-section-title--inv,
.ctc-after .ctc-section-title { color: #fff; }
.ctc-section-sub {
  font-family: var(--n-font-display);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ctc-ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}

/* ============================================================
   INBOX CARDS — hero-card style grid
   ============================================================ */
.ctc-inbox {
  background: #fff;
  padding: clamp(80px, 9vw, 130px) 24px;
}
.ctc-inbox__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ctc-inbox__head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.ctc-inbox__head .ctc-section-sub { margin: 0 auto; }

.ctc-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .ctc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ctc-cards { grid-template-columns: 1fr; }
}

.ctc-card {
  position: relative;
  background: var(--ctc-hair-soft);
  border: 1px solid var(--ctc-hair);
  border-radius: var(--n-radius-lg, 28px);
  padding: 32px 28px 28px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s, background .2s;
  display: flex; flex-direction: column;
  min-height: 260px;
}
.ctc-card:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: rgba(17,17,17,0.12);
  box-shadow: 0 16px 36px rgba(17,17,17,0.08);
}
.ctc-card--security { background: #242424; color: #fff; border-color: #242424; }
.ctc-card--security:hover { background: #000; box-shadow: 0 16px 36px rgba(0,0,0,0.3); }
.ctc-card--security .ctc-card__title,
.ctc-card--security .ctc-card__desc,
.ctc-card--security .ctc-card__link,
.ctc-card--security .ctc-card__sla,
.ctc-card--security .ctc-card__sla a { color: #fff; }
.ctc-card--security .ctc-card__icon { background: var(--n-y); color: #242424; }

.ctc-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--n-y, #fffca2);
  color: var(--ctc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.ctc-card:hover .ctc-card__icon { transform: rotate(-4deg) scale(1.05); }
.ctc-card__icon svg { width: 28px; height: 28px; display: block; }

.ctc-card__title {
  font-family: var(--n-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ctc-ink);
  margin: 0 0 8px;
}
.ctc-card__desc {
  font-family: var(--n-font-display);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ctc-ink-soft);
  margin: 0 0 20px;
  flex: 1;
}
.ctc-card__link {
  font-family: var(--n-font-display);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ctc-ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  word-break: break-word;
  transition: gap .18s;
}
.ctc-card__link:hover { gap: 10px; }
.ctc-card__sla {
  font-family: var(--n-font-display);
  font-size: 0.8rem;
  color: var(--ctc-muted);
  font-weight: 500;
}
.ctc-card__sla a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   COMPOSER — premium sans form
   ============================================================ */
.ctc-composer {
  background: var(--ctc-hair-soft);
  padding: clamp(80px, 9vw, 130px) 24px;
}
.ctc-composer__inner {
  max-width: 760px;
  margin: 0 auto;
}
.ctc-composer__head {
  text-align: center;
  margin-bottom: 48px;
}
.ctc-composer__head .ctc-section-sub { margin: 0 auto; }

.ctc-form {
  background: #fff;
  border: 1px solid var(--ctc-hair);
  border-radius: var(--n-radius-lg, 28px);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 1px 0 rgba(17,17,17,0.02), 0 18px 44px rgba(17,17,17,0.05);
}
.ctc-form__row { display: grid; gap: 18px; margin-bottom: 18px; }
.ctc-form__row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .ctc-form__row--two { grid-template-columns: 1fr; } }

.ctc-field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 18px; }
.ctc-form__row .ctc-field { margin-bottom: 0; }
.ctc-field__label {
  font-family: var(--n-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ctc-ink);
  letter-spacing: -0.005em;
}
.ctc-field__input {
  font-family: var(--n-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ctc-ink);
  background: #fff;
  border: 1.5px solid var(--ctc-hair);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.ctc-field__input::placeholder { color: #a4a39c; font-weight: 400; }
.ctc-field__input:hover { border-color: rgba(17,17,17,0.18); }
.ctc-field__input:focus {
  outline: none;
  border-color: var(--ctc-ink);
  box-shadow: 0 0 0 4px rgba(255,252,162,0.55);
  background: #fff;
}
.ctc-field--select .ctc-field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}
.ctc-field--message .ctc-field__input { resize: vertical; min-height: 140px; line-height: 1.55; font-weight: 400; }
.ctc-field__count {
  position: absolute;
  right: 6px; bottom: -22px;
  font-size: 0.76rem;
  color: var(--ctc-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ctc-field.is-near-limit .ctc-field__count em { color: #c23a3a; font-style: normal; }
.ctc-field.is-invalid .ctc-field__input { border-color: #c23a3a; box-shadow: 0 0 0 4px rgba(194,58,58,0.12); }

.ctc-form__sec {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(255,252,162,0.4);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--ctc-ink);
}
.ctc-form__sec a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.ctc-form__status {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--ctc-ink);
  display: none;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
}
.ctc-form__status--success { background: rgba(26,111,63,0.08); color: #1a6f3f; }
.ctc-form__status--error { background: rgba(194,58,58,0.08); color: #c23a3a; }
.ctc-form.is-success .ctc-form__status--success { display: flex; }
.ctc-form.is-error   .ctc-form__status--error   { display: flex; }

.ctc-form__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--ctc-hair);
  gap: 18px;
  flex-wrap: wrap;
}
.ctc-form__foot-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.84rem;
  color: var(--ctc-muted);
  margin: 0;
  flex-wrap: wrap;
}
.ctc-form__foot-meta kbd {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  background: var(--ctc-hair-soft);
  border: 1px solid var(--ctc-hair);
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0 1px;
}
.ctc-form__foot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ctc-hair); }

.ctc-form__send.nr-btn {
  background: var(--ctc-ink);
  color: #fff !important;
  font-family: var(--n-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 56px;
  border: 1px solid var(--ctc-ink);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.ctc-form__send.nr-btn::after { content: "→"; font-weight: 400; font-size: 1.05em; margin-left: 4px; }
.ctc-form__send.nr-btn:hover {
  background: #000; color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17,17,17,0.2);
}
.ctc-form__send.nr-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }

/* ============================================================
   AFTER YOU SEND — dark inverted block
   ============================================================ */
.ctc-after {
  background: var(--ctc-ink);
  color: #fff;
  padding: clamp(80px, 9vw, 130px) 24px;
}
.ctc-after__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ctc-after__head {
  text-align: center;
  margin-bottom: 56px;
}
.ctc-after__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 800px) { .ctc-after__steps { grid-template-columns: 1fr; } }

.ctc-after__steps li {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--n-radius-lg, 28px);
  padding: 32px 28px;
  transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.ctc-after__steps li:hover {
  background: rgba(255,252,162,0.08);
  border-color: rgba(255,252,162,0.3);
  transform: translateY(-3px);
}
.ctc-after__num {
  display: inline-block;
  font-family: var(--n-font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-y, #fffca2);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.ctc-after__steps h3 {
  font-family: var(--n-font-display);
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}
.ctc-after__steps p {
  font-family: var(--n-font-display);
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ============================================================
   HQ + PUBLIC CHANNELS
   ============================================================ */
.ctc-public {
  background: #fff;
  padding: clamp(80px, 9vw, 130px) 24px;
}
.ctc-public__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 860px) {
  .ctc-public__inner { grid-template-columns: 1fr; }
}

.ctc-hq {
  background: var(--n-y, #fffca2);
  border-radius: var(--n-radius-lg, 28px);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
}
.ctc-hq::after {
  content: "";
  position: absolute;
  right: -20px; bottom: -20px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
}
.ctc-hq__eyebrow {
  display: inline-block;
  font-family: var(--n-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ctc-ink);
  margin-bottom: 14px;
  position: relative;
}
.ctc-hq .ctc-section-title { margin-bottom: 18px; position: relative; }
.ctc-hq__addr {
  font-family: var(--n-font-display);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ctc-ink);
  font-weight: 500;
  margin: 0 0 18px;
  position: relative;
}
.ctc-hq__legal {
  font-family: var(--n-font-display);
  font-size: 0.92rem;
  color: var(--ctc-ink-soft);
  margin: 0;
  position: relative;
}
.ctc-hq__legal a { color: var(--ctc-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.ctc-social {
  background: var(--ctc-hair-soft);
  border: 1px solid var(--ctc-hair);
  border-radius: var(--n-radius-lg, 28px);
  padding: 36px;
}
.ctc-social__label {
  display: block;
  font-family: var(--n-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ctc-ink);
  margin-bottom: 18px;
}
.ctc-social__list { list-style: none; margin: 0; padding: 0; }
.ctc-social__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ctc-hair);
  font-family: var(--n-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ctc-ink);
  text-decoration: none;
  transition: padding .18s, color .18s;
}
.ctc-social__list li:last-child .ctc-social__item { border-bottom: 0; }
.ctc-social__item:hover { padding-left: 10px; }
.ctc-social__r {
  font-family: var(--n-font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ctc-muted);
}
.ctc-social__item--soon { pointer-events: none; opacity: 0.55; }

/* ============================================================
   A11Y — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ctc-card,
  .ctc-card__icon,
  .ctc-after__steps li,
  .ctc-cta-primary,
  .ctc-form__send,
  .ctc-social__item { transition: none !important; }
}

/* min-height uses 100dvh, not 100vh, where applicable */
@supports (height: 100dvh) {
  .ctc-hero { min-height: auto; }
}


/* ===== CARD PAGE ===== */
/* Tier-1 flagship product page enhancements. Scoped to .card-page and card- prefixed components. */

/* Headline shimmer on the emphasized word */
.card-page .nr-hero h1 em { position: relative; display: inline-block; }
.card-page .nr-hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.38em;
  background: linear-gradient(120deg, rgba(255,252,162,0.9), rgba(255,252,162,0.55));
  z-index: -1; border-radius: 2px;
}

/* Balance presets under calculator */
.card-calc-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.card-calc-preset {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-family: var(--n-font); font-size: 0.86rem; font-weight: 600;
  padding: 8px 14px; border-radius: 100px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.card-calc-preset:hover { background: rgba(255,252,162,0.1); border-color: rgba(255,252,162,0.35); color: var(--n-y); }
.card-calc-preset.is-active { background: var(--n-y); color: #242424; border-color: var(--n-y); }
.card-calc-preset:active { transform: scale(0.97); }

/* Testimonial carousel */
.card-testimonials { position: relative; margin-top: 32px; }
.card-testi-track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px) { .card-testi-track { grid-template-columns: 1fr; } }
.card-testi {
  background: #fff; border: 1px solid var(--n-hair); border-radius: var(--n-radius-lg);
  padding: 30px 28px; position: relative; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.card-testi::before {
  content: "\201C"; position: absolute; top: 6px; left: 22px;
  font-family: "Times New Roman", serif; font-weight: 700;
  font-size: 4rem; color: var(--n-y); line-height: 1;
}
.card-testi:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -20px rgba(20,20,18,0.2); }
.card-testi blockquote { margin: 28px 0 22px; font-size: 1.02rem; line-height: 1.55; color: #2b2b27; font-weight: 500; }
.card-testi-who { display: flex; align-items: center; gap: 12px; }
.card-testi-avatar {
  width: 40px; height: 40px; border-radius: 100px;
  background: linear-gradient(135deg, var(--n-y), #f6dd4a);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--n-font-display); font-weight: 700; font-size: 0.95rem; color: #242424;
  box-shadow: 0 0 0 3px rgba(255,252,162,0.3);
}
.card-testi-meta { font-size: 0.86rem; color: var(--n-muted); line-height: 1.35; }
.card-testi-meta strong { color: var(--n-ink); font-weight: 600; display: block; font-size: 0.95rem; }

/* Globe / acceptance map */
.card-globe {
  margin-top: 32px;
  background: #fff; border: 1px solid var(--n-hair);
  border-radius: var(--n-radius-xl); padding: 40px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) { .card-globe { grid-template-columns: 1fr; padding: 28px; } }
.card-globe-visual { position: relative; aspect-ratio: 16/10; }
.card-globe-visual svg { width: 100%; height: 100%; display: block; }
.card-globe-visual .g-land { fill: #f3f3eb; stroke: #ddddd3; stroke-width: 0.5; }
.card-globe-visual .g-dot {
  fill: var(--n-ink); opacity: 0.82;
  animation: g-dot-pulse 3.2s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.card-globe-visual .g-dot.g-y { fill: #b89a00; }
@keyframes g-dot-pulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 0.32; } }
.card-globe-visual .g-halo {
  fill: none; stroke: var(--n-y); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: g-halo-pulse 3.2s ease-out infinite;
}
@keyframes g-halo-pulse {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.card-globe-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.card-globe-stat {
  padding: 14px 16px; background: var(--n-cream); border: 1px solid var(--n-hair); border-radius: 8px;
}
.card-globe-stat .gs-n { font-family: var(--n-font-display); font-weight: 700; font-size: 1.4rem; color: var(--n-ink); letter-spacing: -0.02em; }
.card-globe-stat .gs-l { font-size: 0.82rem; color: var(--n-muted); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card-globe-visual .g-dot, .card-globe-visual .g-halo { animation: none; }
}

/* Security shield with orbiting shards */
.card-shield-wrap { position: relative; aspect-ratio: 1/1; max-width: 340px; margin: 20px auto 0; }
.card-shield-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.card-shield-wrap .cs-orbit { fill: none; stroke: rgba(255,252,162,0.22); stroke-width: 1; stroke-dasharray: 3 5; }
.card-shield-wrap .cs-shield-bg { fill: rgba(255,252,162,0.08); stroke: var(--n-y); stroke-width: 1.2; }
.card-shield-wrap .cs-check { stroke: var(--n-y); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card-shield-wrap .cs-shard {
  fill: var(--n-y); stroke: rgba(17,17,17,0.9); stroke-width: 0.6;
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255,252,162,0.6));
}
.card-shield-wrap .cs-rot-1 { animation: cs-rotate 18s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
.card-shield-wrap .cs-rot-2 { animation: cs-rotate-rev 26s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
@keyframes cs-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cs-rotate-rev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-shield-wrap .cs-rot-1, .card-shield-wrap .cs-rot-2 { animation: none; }
}

/* Spec / limits progressive disclosure */
.card-specs { margin-top: 28px; }
.card-spec {
  border-top: 1px solid var(--n-hair);
  padding: 0;
}
.card-spec:last-child { border-bottom: 1px solid var(--n-hair); }
.card-spec summary {
  list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative;
  font-family: var(--n-font-display); font-weight: 600; font-size: 1.02rem; color: var(--n-ink);
  display: flex; align-items: center; gap: 14px;
}
.card-spec summary::-webkit-details-marker { display: none; }
.card-spec summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  width: 24px; height: 24px; margin-top: -12px;
  font-family: var(--n-font-display); font-weight: 400; font-size: 1.4rem; color: var(--n-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s;
  line-height: 1;
}
.card-spec[open] summary::after { transform: rotate(45deg); color: var(--n-ink); }
.card-spec summary .spec-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--n-muted); font-weight: 600;
  background: var(--n-cream); border: 1px solid var(--n-hair); padding: 3px 9px; border-radius: 100px;
}
.card-spec-body { padding: 0 48px 22px 0; color: #4a4a44; font-size: 0.98rem; line-height: 1.6; }
.card-spec-body ul { margin: 10px 0 0; padding-left: 18px; }
.card-spec-body li { margin-bottom: 6px; }
.card-spec-body code {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.9em;
  background: var(--n-cream); border: 1px solid var(--n-hair); padding: 1px 6px; border-radius: 6px;
}

/* 3D card tilt showcase upgrade */
.card-showcase .card-showcase-visual { perspective: 1000px; }
.card-showcase .mini-card {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  transform-style: preserve-3d;
  position: relative;
}
.card-showcase .mini-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.card-showcase-visual:hover .mini-card {
  transform: rotateX(var(--ty, -6deg)) rotateY(var(--tx, 8deg)) translateZ(6px);
  box-shadow: 0 40px 80px -20px rgba(20,20,18,0.5);
}
.card-showcase-visual:hover .mini-card::after { opacity: 1; }

/* Trust chip row just under hero form */
.card-hero-trust {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--n-hair);
}
.card-hero-trust-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--n-muted); font-weight: 500;
}
.card-hero-trust-chip svg { width: 18px; height: 18px; color: var(--n-ink); opacity: 0.7; flex-shrink: 0; }

/* Enhanced dark-section shield grid layout */
.card-sec-layout {
  display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center;
  margin-top: 28px;
}
@media (max-width: 860px) { .card-sec-layout { grid-template-columns: 1fr; gap: 24px; } .card-shield-wrap { max-width: 260px; } }

/* Calculator — animated gap bar visualizing Normies vs Chase */
.card-page .card-calc-gap {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.card-page .card-calc-gap-label {
  display: flex; justify-content: space-between; font-size: 0.78rem;
  color: rgba(255,255,255,0.6); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.card-page .card-calc-gap-label strong { color: var(--n-y); font-variant-numeric: tabular-nums; }
.card-page .card-calc-gap-bars { display: flex; flex-direction: column; gap: 6px; }
.card-page .card-calc-gap-row {
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; gap: 10px;
  font-size: 0.8rem; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums;
}
.card-page .card-calc-gap-row .ccg-bar {
  height: 8px; border-radius: 100px; background: rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.card-page .card-calc-gap-row .ccg-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--ccg-w, 5%); background: var(--ccg-c, rgba(255,255,255,0.35));
  border-radius: 100px;
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.card-page .card-calc-gap-row.is-normies .ccg-bar::after { background: linear-gradient(90deg, #f6dd4a, var(--n-y)); box-shadow: 0 0 18px rgba(255,252,162,0.4); }
.card-page .card-calc-gap-row.is-normies strong { color: var(--n-y); font-weight: 700; }

/* Comparison table row-by-row reveal on scroll */
.card-page .card-compare tbody tr { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.card-page .card-compare tbody tr.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .card-page .card-compare tbody tr { opacity: 1; transform: none; } }

/* Testimonials scroll-snap carousel on smaller screens */
@media (max-width: 900px) {
  .card-page .card-testi-track {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 16px; margin: 32px -20px 0; padding: 4px 20px 18px;
    scrollbar-width: none;
  }
  .card-page .card-testi-track::-webkit-scrollbar { display: none; }
  .card-page .card-testi { flex: 0 0 85%; scroll-snap-align: center; }
}

/* Security shield — live encrypted-transactions ticker */
.card-page .card-sec-ticker {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 18px; padding: 10px 16px; border-radius: 100px;
  background: rgba(255,252,162,0.08); border: 1px solid rgba(255,252,162,0.2);
  font-family: var(--n-font-display);
}
.card-page .card-sec-ticker .sct-dot {
  width: 7px; height: 7px; border-radius: 100px; background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  animation: sct-pulse 1.8s ease-in-out infinite;
}
@keyframes sct-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.card-page .card-sec-ticker .sct-num { font-weight: 700; font-size: 1.08rem; color: var(--n-y); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.card-page .card-sec-ticker .sct-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.7); }
@media (prefers-reduced-motion: reduce) { .card-page .card-sec-ticker .sct-dot { animation: none; } }

/* Global map — click-to-zoom interactive regions */
.card-page .card-globe-visual svg { cursor: default; }
.card-page .card-globe-visual .g-region {
  fill: transparent; stroke: transparent; cursor: pointer;
  transition: fill .25s;
}
.card-page .card-globe-visual .g-region:hover { fill: rgba(255,252,162,0.18); }
.card-page .card-globe-visual .g-region.is-active { fill: rgba(255,252,162,0.28); stroke: var(--n-y); stroke-width: 1.2; stroke-dasharray: 3 3; }
.card-page .card-globe-regions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.card-page .card-globe-region-chip {
  font-size: 0.76rem; color: var(--n-muted); font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
  background: var(--n-cream); border: 1px solid var(--n-hair);
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.card-page .card-globe-region-chip:hover { background: rgba(255,252,162,0.3); border-color: var(--n-y); color: var(--n-ink); }
.card-page .card-globe-region-chip.is-active { background: var(--n-y); border-color: var(--n-y); color: var(--n-ink); }

/* Feature grid — sticky feature highlight while scrolling */
.card-page .card-features { position: relative; }
.card-page .card-feature { scroll-margin-top: 100px; }
.card-page .card-feature.is-highlight {
  box-shadow: 0 22px 50px -18px rgba(20,20,18,0.22), 0 0 0 2px var(--n-y);
  border-color: var(--n-y);
}
.card-page .card-feature.is-highlight::before { transform: translateX(0); }

/* Flow diagram — smoother curve easing */
.card-page .card-flow-svg .pulse { animation-timing-function: cubic-bezier(.25,.6,.35,1); }

/* Spec chevron — subtle gradient on open */
.card-page .card-spec[open] > summary {
  background: linear-gradient(90deg, rgba(255,252,162,0.12), transparent 40%);
  margin-left: -12px; padding-left: 12px; border-radius: 8px;
}

/* Hero-meta numeric refinement — tabular */
.card-page .card-wait-meta { font-variant-numeric: tabular-nums; }

/* Microcopy emphasis — kbd-like key affordance for "tap" */
.card-page .kbd-inline {
  display: inline-flex; align-items: center; padding: 1px 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.82em;
  background: var(--n-cream); border: 1px solid var(--n-hair);
  border-bottom-width: 2px; border-radius: 5px; color: var(--n-ink);
}

/* Settle the hero CTA ghost buttons — finer hairline and consistent radius */
.card-page .card-hero-cta-row .nr-btn.nr-btn--ghost {
  border-color: rgba(29,29,27,0.12); transition: border-color .2s, background .2s, transform .2s;
}
.card-page .card-hero-cta-row .nr-btn.nr-btn--ghost:hover { transform: translateY(-1px); }


/* ============================================================
   ===== CARD PAGE · TIER-1 ELEVATION (v2) =====
   Signature: editorial Fraunces italic on a single phrase + Geist on body.
   Removes oversized H1, yellow-highlight slop, CSS-painted globe, fake numbers.
   Inter is banned page-locally via inline override in card.html <head>.
   ============================================================ */

/* Card hero — aligned to the home-page brand: yellow flood, bold sans, floating chips.
   Re-enables the base .nr-hero yellow background and decorative glows. No cream paper, no Fraunces. */
.card-page .nr-hero {
  padding: 110px 28px 100px;
  background: var(--n-y) !important;
  border-bottom: 0;
}
@media (min-width: 1100px) { .card-page .nr-hero { padding: 120px 28px 110px; } }
/* Restore the home-page hero glow shapes (override the earlier "display:none" intent) */
.card-page .nr-hero::before,
.card-page .nr-hero::after { display: block !important; }
.card-page .nr-hero .nr-float { display: block !important; }

/* Home-page H1: confident bold sans, big scale, no italic, yellow highlight on emphasis */
.card-page .nr-hero h1.card-h1 {
  font-family: var(--n-font-display);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 0.99;
  margin: 0 0 22px;
  max-width: 18ch;
  color: var(--n-ink);
  text-wrap: balance;
}
.card-page .nr-hero h1 em,
.card-page .nr-hero h1.card-h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(180deg, transparent 62%, rgba(255,255,255,0.7) 62%);
  padding: 0 6px;
  border-radius: 4px;
  letter-spacing: -0.005em;
  color: var(--n-ink);
  position: relative;
  display: inline;
  white-space: normal;
}
.card-page .nr-hero h1 em::before,
.card-page .nr-hero h1 em::after { content: none; background: none; }

.card-page .nr-hero-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: rgba(29,29,27,0.78);
  max-width: 52ch;
  font-weight: 400;
}

.card-page .nr-hero-badge {
  background: #fff;
  border: 1px solid rgba(29,29,27,0.06);
  font-size: 0.88rem; font-weight: 500;
  color: var(--n-ink);
  padding: 9px 16px 9px 13px;
  margin-bottom: 28px;
  box-shadow: 0 2px 10px rgba(20,20,18,0.06);
}
.card-page .nr-hero-badge .dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(12,138,60,0.22); }

/* Hero waitlist form sits on yellow — keep the white pill, but bold yellow CTA matches home-page button */
.card-page .nr-hero .card-waitform { background: #fff; }
.card-page .nr-hero .card-waitform button {
  background: var(--n-ink);
  color: #fff;
  font-weight: 600;
}
.card-page .nr-hero .card-waitform button:hover { background: #000; }
.card-page .nr-hero .card-wait-meta { color: rgba(29,29,27,0.62); }

/* Floating chips on the product image — pop on yellow */
.card-page .nr-hero .card-hero-stage::before {
  inset: 14% 10%;
  background: radial-gradient(ellipse at 50% 65%, rgba(20,20,18,0.18), transparent 64%);
  filter: blur(48px);
}
.card-page .nr-hero .card-hero-badge--apy { background: #fff; }
.card-page .nr-hero .card-hero-badge--earn { background: #1d1d1b; border-color: #1d1d1b; }
.card-page .nr-hero .card-hero-badge--earn .chb-label { color: rgba(255,252,162,0.85); }
.card-page .nr-hero .card-hero-badge--earn .chb-value { color: #fff; }

.card-page .card-hero-stage::before {
  inset: 16% 12%;
  background: radial-gradient(ellipse at 50% 65%, rgba(20,20,18,0.18), transparent 64%);
  filter: blur(56px);
}
.card-page .card-hero-stage img {
  filter: drop-shadow(0 60px 90px rgba(20,20,18,0.32)) drop-shadow(0 14px 22px rgba(20,20,18,0.10));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.card-page .card-hero-badge { font-family: var(--n-font-display); border-radius: 12px; }
.card-page .card-hero-badge .chb-label { font-weight: 500; letter-spacing: 0.08em; }
.card-page .card-hero-badge .chb-value { font-weight: 600; letter-spacing: -0.012em; }

.card-page .card-stack { padding-top: 40px; padding-bottom: 40px; }
.card-page .card-stack-eyebrow {
  font-family: var(--n-font-display); font-style: normal; font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--n-muted); margin: 0 0 18px;
}
.card-page .card-stack-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0 28px;
  border-top: 1px solid var(--n-hair);
  padding-top: 22px;
}
.card-page .card-stack-item {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--n-font-display);
  font-size: 1.06rem; font-weight: 600; letter-spacing: -0.018em; color: var(--n-ink);
}
.card-page .card-stack-item em {
  font-family: var(--n-font); font-style: normal;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--n-muted);
  margin-bottom: 4px;
}
.card-page .card-stack-by {
  font-family: var(--n-font); font-style: normal; font-weight: 400;
  font-size: 0.84rem; color: var(--n-muted); margin-top: 2px;
}
.card-page .card-stack-divider { width: 1px; height: 36px; background: var(--n-hair); justify-self: center; }
@media (max-width: 880px) {
  .card-page .card-stack-row { grid-template-columns: 1fr 1fr; gap: 24px 28px; padding-top: 20px; }
  .card-page .card-stack-divider { display: none; }
}

.card-page .card-where {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--n-hair);
}
.card-page .card-where > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid var(--n-hair);
  margin: 0; gap: 24px;
}
.card-page .card-where > div:nth-child(odd) { padding-right: 36px; border-right: 1px solid var(--n-hair); }
.card-page .card-where > div:nth-child(even) { padding-left: 36px; }
.card-page .card-where dt {
  font-family: var(--n-font); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--n-muted); margin: 0;
}
.card-page .card-where dd {
  margin: 0;
  font-family: var(--n-font-display);
  font-size: 1.18rem; font-weight: 600; letter-spacing: -0.016em; color: var(--n-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (max-width: 720px) {
  .card-page .card-where { grid-template-columns: 1fr; }
  .card-page .card-where > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .card-page .card-where > div:nth-child(even) { padding-left: 0; }
}

.card-page .nr-section__title {
  font-weight: 600; letter-spacing: -0.026em;
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  line-height: 1.06; text-wrap: balance;
  max-width: 22ch;
}
.card-page .nr-section__title em {
  font-family: var(--n-font-serif); /* italic removed (brand) */ font-weight: 400;
}
.card-page .nr-section__eyebrow {
  font-family: var(--n-font-serif); /* italic removed (brand) */ font-weight: 400;
  text-transform: none; letter-spacing: 0.005em;
  font-size: 0.98rem; color: var(--n-muted);
}
.card-page .nr-section__eyebrow::before { background: currentColor; opacity: 0.5; }
.card-page .nr-section--dark .nr-section__eyebrow { color: rgba(255,255,255,0.62); }

.card-page .card-feature::after { display: none !important; }
.card-page .card-feature { padding: 28px 28px 26px; border-radius: 18px; }
.card-page .card-feature h3 { font-weight: 600; }
.card-page .card-feature.is-highlight {
  box-shadow: 0 24px 50px -22px rgba(20,20,18,0.18), 0 0 0 1.5px var(--n-y);
}

.card-page .card-calc { padding: 56px 56px; border-radius: 26px; }
.card-page .card-calc-result-label {
  font-family: var(--n-font-serif); /* italic removed (brand) */ font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: rgba(255,252,162,0.85); font-size: 1rem;
}
.card-page .card-calc-big { font-weight: 600; letter-spacing: -0.04em; font-size: clamp(3rem, 5.6vw, 4.4rem); }
.card-page .card-calc-amount { font-weight: 600; }
.card-page .card-calc-sub {
  font-family: var(--n-font-serif); /* italic removed (brand) */ font-weight: 400;
  font-size: 0.92rem; color: rgba(255,255,255,0.62);
}
@media (max-width: 780px) { .card-page .card-calc { padding: 36px 26px; } }

.card-page .card-compare { border-radius: 8px; }
.card-page .card-compare th, .card-page .card-compare td { padding: 18px 22px; }
.card-page .card-compare thead th { font-weight: 500; }
.card-page .card-compare thead th.n-col { background: var(--n-ink); color: #fff; }
.card-page .card-compare tbody th { font-weight: 500; color: var(--n-body); }
.card-page .card-compare .n-col {
  background: rgba(255,252,162,0.18);
  font-weight: 500;
  border-left: 1px solid var(--n-hair);
}
.card-page .card-compare .ok { font-weight: 600; }

.card-page .card-flow-node { border-radius: 18px; padding: 36px 26px 24px; }
.card-page .card-flow-node h3 { font-weight: 600; }
.card-page .card-flow-node .num {
  width: 32px; height: 32px; font-size: 0.88rem;
  background: var(--n-ink); color: var(--n-y);
  box-shadow: 0 4px 12px rgba(20,20,18,0.18);
}
.card-page .card-flow-node .ico { width: 44px; height: 44px; border-radius: 11px; }
.card-page .card-flow-node .ico svg { width: 22px; height: 22px; }

.card-page .card-testi { padding: 32px 30px 28px; border-radius: 8px; }
.card-page .card-testi blockquote {
  font-family: var(--n-font-serif); /* italic removed (brand) */ font-weight: 400;
  font-size: 1.08rem; line-height: 1.5;
  color: var(--n-ink); letter-spacing: -0.005em;
  margin: 26px 0 22px;
}
.card-page .card-testi::before {
  font-family: var(--n-font-serif);
  color: rgba(20,20,18,0.12);
  font-size: 5rem; top: -2px; left: 22px;
}
.card-page .card-testi-meta { font-size: 0.84rem; color: var(--n-muted); }
.card-page .card-testi-meta strong { font-size: 0.94rem; font-weight: 600; }

.card-page .card-showcase-item { border-radius: 8px; padding: 32px; }
.card-page .card-showcase-item h3 { font-weight: 600; }
.card-page .card-showcase-tag { font-weight: 500; }

.card-page .card-spec summary { font-weight: 500; }

.card-page .card-faq-item summary { font-family: var(--n-font); font-weight: 500; font-size: 1.02rem; }
.card-page .card-faq-item p { font-family: var(--n-font); font-size: 0.98rem; }

.card-page .card-waitform {
  box-shadow: 0 6px 24px -10px rgba(20,20,18,0.16);
  border: 1px solid rgba(29,29,27,0.05);
}
.card-page .card-waitform input[type="email"] { font-weight: 500; }
.card-page .card-waitform button { font-weight: 600; letter-spacing: -0.005em; }

.card-page #waitlist .nr-section__title { max-width: 18ch; margin-left: auto; margin-right: auto; }

.card-page .card-appshot-list .cal-dot { background: var(--n-ink); box-shadow: none; opacity: 0.85; }


/* ============================================================
   ===== TERMS PAGE =====
   Editorial-agreement craft for /legal/terms.html.
   Reads at 1m+ and prints clean. Signature: Material-clause chip
   system + hanging numerals on each section.
   Position-4: binding agreement, clear, honest, capacity-15.
   ============================================================ */
.terms-page {
  --terms-ink: #15140f;
  --terms-mute: #6b6a63;
  --terms-hair: #e6e3d4;
  --terms-cream: var(--n-cream);
  --terms-y: var(--n-y);
  --terms-radius: 14px;
  --terms-rail: 260px;
}
.terms-page .legal-shell { max-width: 980px; padding-top: 132px !important; padding-bottom: 96px !important; color: var(--terms-ink); }

/* --- Masthead: editorial title block --- */
.terms-page .terms-masthead { margin: 0 0 8px; }
.terms-page .legal-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terms-mute); font-weight: 600; margin: 0 0 22px;
}
.terms-page .legal-eyebrow .eyebrow-sep {
  width: 26px; height: 1px; background: var(--terms-ink); display: inline-block;
}
.terms-page .legal-shell h1 {
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  line-height: 0.96; letter-spacing: -0.025em;
  font-weight: 600; color: var(--terms-ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.terms-page .legal-shell h1 .h1-accent {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif !important;
  font-style: italic; font-weight: 400;
  color: var(--terms-ink);
}
.terms-page .legal-shell .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.5 !important; color: var(--terms-mute) !important;
  max-width: 60ch; margin: 0 !important;
}

/* --- Metabar: status / version / effective / read time / print --- */
.terms-metabar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch; gap: 0;
  margin: 16px 0 40px;
  padding: 0;
  border-top: 1px solid var(--terms-ink);
  border-bottom: 1px solid var(--terms-hair);
  background: transparent;
  border-radius: 0;
  font-size: 0.92rem;
}
.terms-metabar .tm-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 22px 16px 0; margin: 0;
  border-right: 1px solid var(--terms-hair);
}
.terms-metabar .tm-item:first-child { padding-left: 2px; }
.terms-metabar .tm-label {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terms-mute); font-weight: 600; margin: 0;
}
.terms-metabar .tm-value {
  margin: 0; font-size: 0.98rem; font-weight: 500; color: var(--terms-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.terms-metabar .tm-value.tm-mono {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}
.terms-metabar .tm-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2fae5b;
  box-shadow: 0 0 0 3px rgba(47,174,91,0.18);
  position: relative;
}
.terms-metabar .tm-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(47,174,91,0.4);
  animation: tm-dot-pulse 2.4s ease-out infinite;
}
@keyframes tm-dot-pulse {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .terms-metabar .tm-dot::after { animation: none; }
}
.terms-metabar .tm-print {
  align-self: center; justify-self: end; margin-left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--terms-ink); color: var(--terms-ink);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.terms-metabar .tm-print:hover {
  background: var(--terms-ink); color: var(--terms-y);
  transform: translateY(-1px);
}
.terms-metabar .tm-print:active { transform: translateY(0); }
.terms-metabar .tm-print .tm-print-ico { display: block; }
@media (max-width: 760px) {
  .terms-metabar { grid-template-columns: repeat(2, 1fr); }
  .terms-metabar .tm-item { padding: 14px 16px 14px 0; }
  .terms-metabar .tm-item:nth-child(2n) { border-right: 0; }
  .terms-metabar .tm-print {
    grid-column: 1 / -1; justify-self: stretch; margin: 4px 0 14px;
    border-top: 1px solid var(--terms-hair);
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 16px; background: var(--terms-cream);
  }
  .terms-metabar .tm-print:hover { background: var(--terms-ink); }
}

/* --- Snapshot: 6-tile "short version" panel --- */
.terms-snapshot {
  border: 1px solid var(--terms-ink);
  background: var(--terms-cream);
  border-radius: var(--terms-radius);
  padding: 28px 30px 30px;
  margin: 0 0 32px;
  position: relative;
}
.terms-snapshot-title {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--terms-ink); font-weight: 700; margin: 0 0 22px !important;
  display: flex; align-items: center; gap: 12px;
}
.terms-snapshot-title .snap-rule { width: 24px; height: 1px; background: var(--terms-ink); display: inline-block; }
.terms-snapshot-title em {
  text-transform: lowercase; letter-spacing: 0; font-weight: 500; color: var(--terms-ink);
}
.terms-snapshot-title .snap-counter {
  margin-left: auto;
  font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--terms-mute); font-weight: 600;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
}
.terms-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--terms-hair);
  border-left: 1px solid var(--terms-hair);
}
@media (min-width: 720px) {
  .terms-snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.terms-snapshot-grid .snap-tile {
  position: relative;
  padding: 18px 18px 20px !important;
  border-right: 1px solid var(--terms-hair);
  border-bottom: 1px solid var(--terms-hair);
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: var(--terms-ink) !important;
  margin: 0 !important;
  background: #fff;
  transition: background .18s ease;
}
.terms-snapshot-grid .snap-tile:hover { background: var(--terms-y); }
.terms-snapshot-grid .snap-num {
  display: block;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--terms-mute);
  font-weight: 600; margin-bottom: 10px;
}
.terms-snapshot-grid strong {
  display: block; color: var(--terms-ink); font-weight: 600;
  font-size: 1rem; margin-bottom: 4px; letter-spacing: -0.005em;
}
.terms-snapshot-grid .snap-tile--flag {
  background: var(--terms-ink); color: var(--terms-y) !important;
}
.terms-snapshot-grid .snap-tile--flag strong { color: var(--terms-y); }
.terms-snapshot-grid .snap-tile--flag .snap-num { color: rgba(255,252,162,0.55); }
.terms-snapshot-grid .snap-tile--flag::after {
  content: "\00a7 14";
  position: absolute; top: 14px; right: 14px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.66rem; letter-spacing: 0.05em;
  color: var(--terms-y); opacity: 0.75;
}
.terms-snapshot-grid .snap-tile--flag:hover { background: var(--terms-ink); }

/* --- §14 Material callout (replaces .legal-callout.warn for terms) --- */
.terms-page .legal-callout.warn { display: none; }
.terms-arb-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center; gap: 18px;
  margin: 0 0 48px;
  padding: 18px 22px;
  background: var(--terms-ink);
  color: #fff;
  border-radius: var(--terms-radius);
  position: relative;
  overflow: hidden;
}
.terms-arb-callout .arb-tag {
  display: inline-flex; align-items: center;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--terms-ink);
  background: var(--terms-y);
  padding: 7px 11px; border-radius: 6px;
  white-space: nowrap;
}
.terms-arb-callout p {
  margin: 0 !important; color: #fff !important;
  font-size: 0.95rem !important; line-height: 1.55 !important;
}
.terms-arb-callout strong { color: var(--terms-y); font-weight: 600; }
.terms-arb-callout a {
  color: var(--terms-y); border-bottom: 1px solid rgba(255,252,162,0.3);
  text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: border-color .18s;
}
.terms-arb-callout a:hover { border-bottom-color: var(--terms-y); }
@media (max-width: 640px) {
  .terms-arb-callout { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Section headings: hanging numerals (signature) --- */
.terms-page .legal-shell h2[id] {
  position: relative;
  padding-top: 28px;
  margin-top: 72px !important;
  margin-bottom: 14px !important;
  border-top: 1px solid var(--terms-hair);
  scroll-margin-top: 96px;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--terms-ink);
}
.terms-page .legal-shell h2[id] .tm-num {
  display: block;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terms-mute);
  margin-bottom: 8px;
}
@media (min-width: 900px) {
  .terms-page .legal-shell h2[id] .tm-num {
    position: absolute; left: -110px; top: 30px;
    width: 86px; text-align: right;
    font-size: 0.74rem;
  }
}

/* Material clause: black chip after H2 */
.terms-page .legal-shell h2[id].is-material::after {
  content: "Material clause";
  display: inline-block;
  margin-left: 14px;
  vertical-align: 4px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--terms-ink);
  color: var(--terms-y);
  padding: 5px 9px;
  border-radius: 4px;
  position: relative;
  top: -2px;
}

/* --- "Plain English" panel (refined) --- */
.terms-page .tm-plain {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--terms-ink);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  margin: 14px 0 22px !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--terms-ink) !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.terms-page .tm-plain::before {
  content: "Plain English";
  flex: 0 0 auto;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--terms-ink);
  background: var(--terms-y);
  padding: 4px 8px; border-radius: 3px;
  margin-top: 3px;
  white-space: nowrap;
  align-self: start;
}
.terms-page .tm-plain p {
  margin: 0 !important;
  color: var(--terms-ink) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
}
.terms-page .tm-plain p strong { font-weight: 600; }
@media (max-width: 640px) {
  .terms-page .tm-plain { grid-template-columns: 1fr; gap: 10px; padding-left: 16px; }
}

/* --- Body prose tightening --- */
.terms-page .legal-shell p,
.terms-page .legal-shell li {
  font-size: 0.99rem;
  line-height: 1.68;
  color: #2a2924;
  max-width: 70ch;
}
.terms-page .legal-shell ol,
.terms-page .legal-shell ul { margin-top: 12px; }
.terms-page .legal-shell a {
  color: var(--terms-ink);
  border-bottom: 1px solid var(--terms-ink);
  text-decoration: none;
  font-weight: 500;
  transition: background .15s, color .15s;
  padding: 0 1px;
}
.terms-page .legal-shell a:hover {
  background: var(--terms-y);
  color: var(--terms-ink);
}

/* --- Contact-legal block (override yellow) --- */
.terms-page .nr-contact-legal {
  background: var(--terms-ink);
  border-radius: var(--terms-radius);
  padding: 26px 28px;
  margin: 56px 0 28px;
}
.terms-page .nr-contact-legal p { font-size: 0.98rem; }
.terms-page .nr-contact-legal a {
  color: var(--terms-y);
  border-bottom: 1px solid rgba(255,252,162,0.4);
  font-weight: 500;
}
.terms-page .nr-contact-legal a:hover { background: transparent; border-bottom-color: var(--terms-y); }

/* --- Revision history: monospace dates --- */
.terms-revisions {
  margin: 56px 0 0;
  border: 1px solid var(--terms-hair);
  border-radius: var(--terms-radius);
  background: #fff;
  overflow: hidden;
}
.terms-revisions summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--terms-ink);
  font-size: 0.92rem;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  letter-spacing: -0.005em;
  transition: background .18s;
}
.terms-revisions summary::-webkit-details-marker { display: none; }
.terms-revisions summary::after {
  content: "+"; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1.1rem; color: var(--terms-mute); font-weight: 400;
  transition: transform .2s;
}
.terms-revisions:hover summary { background: var(--terms-cream); }
.terms-revisions[open] summary { border-bottom-color: var(--terms-hair); background: var(--terms-cream); }
.terms-revisions[open] summary::after { content: "\2212"; }
.terms-revisions ol { margin: 0 !important; padding: 8px 24px 18px 24px !important; list-style: none; counter-reset: none; }
.terms-revisions li {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px dashed var(--terms-hair);
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  color: #3a3a34 !important;
  margin: 0 !important;
}
.terms-revisions li:last-child { border-bottom: 0; }
.terms-revisions .rev-date {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--terms-ink);
  background: transparent;
  border: 1px solid var(--terms-ink);
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}
.terms-revisions li strong { color: var(--terms-ink); font-weight: 600; margin-right: 4px; }

/* --- TOC: sticky reading rail at >=1120px, 2-col card below --- */
@media (min-width: 1120px) {
  .terms-page .legal-shell {
    max-width: 1200px !important;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .terms-page .terms-masthead,
  .terms-page .terms-metabar,
  .terms-page .terms-snapshot,
  .terms-page .terms-arb-callout,
  .terms-page .legal-shell h2,
  .terms-page .legal-shell h3,
  .terms-page .legal-shell p,
  .terms-page .legal-shell ul,
  .terms-page .legal-shell ol:not(.terms-toc-list):not(.terms-rev-list),
  .terms-page .nr-contact-legal,
  .terms-page .terms-revisions,
  .terms-page .legal-meta { grid-column: 2; }

  .terms-page .legal-toc {
    grid-column: 1;
    grid-row: 4 / span 50;
    position: sticky;
    top: 112px;
    margin: 0 !important;
    padding: 0 0 0 22px !important;
    font-size: 0.86rem !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid var(--terms-hair) !important;
    border-radius: 0 !important;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
  }
  .terms-page .legal-toc strong {
    display: block;
    font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--terms-mute); font-weight: 600; margin: 0 0 18px;
  }
  .terms-page .legal-toc ol { columns: 1 !important; padding-left: 0 !important; list-style: none; counter-reset: toc-counter; margin: 0; }
  .terms-page .legal-toc li {
    counter-increment: toc-counter;
    padding-left: 30px; position: relative;
    margin-bottom: 10px !important;
    font-size: 0.84rem; line-height: 1.4;
  }
  .terms-page .legal-toc li::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute; left: 0; top: 2px;
    font-family: "Geist Mono", ui-monospace, Menlo, monospace;
    font-size: 0.66rem; color: var(--terms-mute); font-weight: 600;
    letter-spacing: 0.04em;
  }
  .terms-page .legal-toc a {
    border: 0 !important;
    color: var(--terms-mute);
    transition: color .15s, transform .15s;
    padding: 2px 0; display: block;
    font-weight: 400;
  }
  .terms-page .legal-toc a:hover { color: var(--terms-ink); background: transparent; transform: translateX(2px); }
  .terms-page .legal-toc a.is-active { color: var(--terms-ink); font-weight: 600; }
  .terms-page .legal-toc a.is-active::before {
    content: ""; position: absolute; left: -23px; top: 50%;
    width: 14px; height: 1px; background: var(--terms-ink);
    transform: translateY(-50%);
  }
}
@media (max-width: 1119px) {
  .terms-page .legal-toc {
    background: var(--terms-cream) !important;
    border: 1px solid var(--terms-hair) !important;
    border-radius: var(--terms-radius) !important;
    padding: 22px 26px !important;
    margin: 32px 0 36px !important;
  }
  .terms-page .legal-toc strong {
    display: block;
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--terms-mute); font-weight: 600; margin-bottom: 14px;
  }
  .terms-page .legal-toc ol {
    columns: 2; column-gap: 32px;
    list-style: none; padding: 0; margin: 0;
    counter-reset: toc-counter;
  }
  .terms-page .legal-toc li {
    counter-increment: toc-counter;
    padding-left: 28px; position: relative;
    margin-bottom: 8px;
    break-inside: avoid;
    font-size: 0.88rem;
  }
  .terms-page .legal-toc li::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute; left: 0; top: 1px;
    font-family: "Geist Mono", ui-monospace, Menlo, monospace;
    font-size: 0.68rem; color: var(--terms-mute); font-weight: 600;
  }
  .terms-page .legal-toc a {
    border: 0 !important;
    color: var(--terms-ink);
    text-decoration: none;
  }
  .terms-page .legal-toc a:hover { background: transparent; color: var(--terms-mute); }
}
@media (max-width: 540px) {
  .terms-page .legal-toc ol { columns: 1; }
}

/* --- Print: clean monochrome --- */
@media print {
  .terms-page .terms-metabar { border: 1px solid #000; padding: 12px 16px; display: flex; gap: 22px; grid-template-columns: none; }
  .terms-page .terms-metabar .tm-item { border: 0 !important; padding: 0 !important; }
  .terms-page .terms-metabar .tm-print { display: none !important; }
  .terms-page .terms-metabar .tm-dot { background: #000 !important; box-shadow: none !important; }
  .terms-page .terms-metabar .tm-dot::after { display: none !important; }
  .terms-page .terms-snapshot { border: 1px solid #000 !important; background: #fff !important; page-break-inside: avoid; }
  .terms-page .terms-snapshot-grid { border-color: #000 !important; }
  .terms-page .terms-snapshot-grid .snap-tile { border-color: #000 !important; background: #fff !important; color: #000 !important; }
  .terms-page .terms-snapshot-grid .snap-tile--flag { background: #000 !important; color: #fff !important; }
  .terms-page .terms-snapshot-grid .snap-tile--flag strong { color: #fff !important; }
  .terms-page .terms-snapshot-grid .snap-tile--flag .snap-num { color: rgba(255,255,255,0.6) !important; }
  .terms-page .terms-snapshot-grid .snap-tile--flag::after { color: #fff !important; }
  .terms-page .terms-arb-callout { background: #000 !important; color: #fff !important; page-break-inside: avoid; }
  .terms-page .terms-arb-callout .arb-tag { background: #fff !important; color: #000 !important; }
  .terms-page .tm-plain { border-left: 2px solid #000 !important; background: #fff !important; }
  .terms-page .tm-plain::before { background: #000 !important; color: #fff !important; }
  .terms-page .terms-revisions { border: 1px solid #000 !important; }
  .terms-page .terms-revisions summary { background: #f3f3f3 !important; }
  .terms-page .terms-revisions[open] { page-break-inside: avoid; }
  .terms-page details.terms-revisions:not([open]) > *:not(summary) { display: none; }
  .terms-page .legal-shell h2[id] { border-top: 1px solid #000 !important; }
  .terms-page .legal-shell h2[id].is-material::after { background: #000 !important; color: #fff !important; }
  .terms-page .nr-contact-legal { background: #fff !important; border: 1px solid #000 !important; }
  .terms-page .nr-contact-legal p, .terms-page .nr-contact-legal a { color: #000 !important; }
}

/* ============================================================
   DISCLOSURES PAGE
   Risk-forward fintech disclosures. TOC sidebar rail on desktop,
   callout cards for material risks, partner + fee tables,
   plain-English "TL;DR" asides, printable.
   ============================================================ */
.disclosures-page .legal-shell { max-width: 1180px !important; padding: 132px 32px 96px !important; }
.disclosures-layout { display: grid; grid-template-columns: 240px minmax(0, 780px); gap: 64px; align-items: start; max-width: 100%; }
.disclosures-rail { position: sticky; top: 96px; align-self: start; font-size: 0.9rem; }
.disclosures-rail .rail-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--n-muted); font-weight: 600; margin: 0 0 14px; display: block; }
.disclosures-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--n-hair); }
.disclosures-rail li { margin: 0; padding: 0; }
.disclosures-rail a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--n-muted); text-decoration: none !important; border-bottom: 0 !important;
  line-height: 1.35; transition: color .15s, border-color .15s;
}
.disclosures-rail a:hover { color: var(--n-ink); }
.disclosures-rail a.is-active { color: var(--n-ink); border-left-color: var(--n-ink); font-weight: 600; }
.disclosures-rail .rail-print {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--n-muted); background: none; border: 1px solid var(--n-hair);
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
  text-decoration: none !important;
}
.disclosures-rail .rail-print:hover { color: var(--n-ink); border-color: var(--n-ink); }

.disclosures-page .legal-hero { border-bottom: 1px solid var(--n-hair); padding-bottom: 28px; margin-bottom: 40px; }
.disclosures-page .legal-hero .legal-meta-inline {
  display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; font-size: 0.85rem; color: var(--n-muted);
}
.disclosures-page .legal-hero .legal-meta-inline span { display: inline-flex; align-items: center; gap: 6px; }
.disclosures-page .legal-hero .legal-meta-inline strong { color: var(--n-ink); font-weight: 600; }

.disclosures-content h2 { scroll-margin-top: 92px; }
.disclosures-content .section-eyebrow {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--n-muted);
  font-weight: 600; margin: 72px 0 4px !important; display: block;
}
.disclosures-content .section-eyebrow + h2 { margin-top: 6px !important; }

/* TL;DR plain-English aside */
.plain-aside {
  background: var(--n-y);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0 22px !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--n-ink) !important;
  display: flex; gap: 12px; align-items: flex-start;
}
.plain-aside::before {
  content: "TL;DR";
  flex-shrink: 0;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--n-ink); color: var(--n-y);
  padding: 4px 7px; border-radius: 4px;
  margin-top: 1px; line-height: 1;
}
.plain-aside p { margin: 0 !important; }

/* Risk callout cards (stronger than .legal-callout) */
.risk-card {
  background: #fff;
  border: 1px solid var(--n-hair);
  border-left: 4px solid var(--n-amber);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 14px;
}
.risk-card.severe { border-left-color: var(--n-red); }
.risk-card h3 {
  margin: 0 0 8px !important;
  font-size: 1rem !important;
  letter-spacing: -0.005em !important;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.risk-card h3 .risk-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
  background: #fff5d6; color: var(--n-amber); border: 1px solid #f0dca0; line-height: 1;
}
.risk-card.severe h3 .risk-tag { background: #ffe7e4; color: #b5221a; border-color: #f5c3bf; }
.risk-card p { margin: 0 !important; font-size: 0.96rem !important; color: var(--n-body) !important; line-height: 1.6 !important; }
.risk-card p + p { margin-top: 8px !important; }

/* Partners / fee table tweaks */
.disclosures-page .legal-table td strong { display: block; margin-bottom: 2px; color: var(--n-ink); }
.disclosures-page .legal-table td .muted { font-size: 0.86rem; color: var(--n-muted); }
.disclosures-page .legal-table .fee-amount { font-feature-settings: "tnum" 1; font-weight: 600; color: var(--n-ink); white-space: nowrap; }
.disclosures-page .legal-table .badge-free { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: #e7f5ec; color: var(--n-green); }

/* Heroic "not a bank" banner */
.not-a-bank {
  background: var(--n-ink); color: #fff;
  border-radius: 18px; padding: 26px 30px;
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  margin: 8px 0 36px;
}
.not-a-bank .nab-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--n-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; font-family: var(--n-font-display);
}
.not-a-bank p { margin: 0 !important; color: #fff !important; font-size: 1rem !important; line-height: 1.55 !important; }
.not-a-bank p strong { color: #fff; }
.not-a-bank p + p { margin-top: 8px !important; color: rgba(255,255,255,0.78) !important; font-size: 0.92rem !important; }

/* Jurisdictional notices grid */
.juris-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 22px; }
.juris-item { border: 1px solid var(--n-hair); border-radius: 10px; padding: 14px 16px; background: #fff; }
.juris-item strong { font-size: 0.85rem; color: var(--n-ink); display: block; margin-bottom: 4px; }
.juris-item span { font-size: 0.88rem; color: var(--n-body); line-height: 1.45; }

/* Version history */
.version-log { border: 1px solid var(--n-hair); border-radius: 10px; margin: 16px 0 8px; background: #fff; overflow: hidden; }
.version-log dt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--n-ink); font-size: 0.88rem; padding: 12px 18px 4px; }
.version-log dd { margin: 0 !important; padding: 0 18px 12px !important; font-size: 0.9rem !important; color: var(--n-body) !important; border-bottom: 1px solid var(--n-hair); line-height: 1.5 !important; }
.version-log dd:last-of-type { border-bottom: 0; }

/* Hide the old inline .legal-toc on this page only; rail replaces it */
.disclosures-page .legal-shell > .legal-toc { display: none; }

/* Responsive: collapse rail into chip row */
@media (max-width: 980px) {
  .disclosures-layout { grid-template-columns: 1fr; gap: 0; }
  .disclosures-rail { position: static; border-bottom: 1px solid var(--n-hair); padding-bottom: 24px; margin-bottom: 32px; }
  .disclosures-rail ol { border-left: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .disclosures-rail a { border: 1px solid var(--n-hair); border-radius: 999px; padding: 6px 12px; margin: 0; }
  .disclosures-rail a.is-active { background: var(--n-ink); color: #fff; border-color: var(--n-ink); }
  .disclosures-rail .rail-print { margin-top: 14px; }
}

@media print {
  .disclosures-rail, .disclosures-page .nr-contact-legal, .not-a-bank .nab-icon { display: none !important; }
  .disclosures-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .risk-card { border: 1px solid #000 !important; break-inside: avoid; page-break-inside: avoid; }
  .not-a-bank { background: #fff !important; color: #000 !important; border: 2px solid #000; grid-template-columns: 1fr !important; }
  .not-a-bank p { color: #000 !important; }
  .plain-aside { background: #fff !important; border: 1px dashed #000; }
  .plain-aside::before { background: #000 !important; color: #fff !important; }
  .disclosures-page .legal-shell { max-width: none !important; padding: 0 !important; }
}

/* ============================================================
   HIGH-END POLISH LAYER
   Applied globally after tokens. Kept selectors low-specificity
   so page-level overrides still win.
   ============================================================ */

/* Typography system ------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "cv02", "cv03", "cv04";
}

/* Force SF Pro site-wide to match home page brand spec */
body, .sup-shell, .page-shell, .legal-shell, .nr, .nr-page, [class*="-shell"] {
  font-family: var(--n-font) !important;
}

/* Serif italic for display <em> in hero H1s — chunky warm serif accent
   Uses Fraunces at its "softest" opsz for the friendly Normies feel */
h1 em,
.nr-hero h1 em,
.sup-shell h1 em,
.page-shell h1 em,
.ctc-kinetic-wrap em,
.part-h1-word em,
h1 em.sup-serif,
h1 .serif,
.nr-serif {
  font-family: var(--n-font-serif);
  font-style: italic;
  font-weight: 450;
  font-size: 1em;
  letter-spacing: -0.015em;
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-feature-settings: "ss01", "ss02", "dlig", "liga", "calt";
}

/* Balanced, justified headlines */
h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.022em;
}
p {
  text-wrap: pretty;
}

/* Footnote superscripts — global baseline */
sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* Footnote superscripts — de-emphasised in display type */
h1 sup, h2 sup, h3 sup,
.hero-headline sup,
.display-text sup {
  font-size: 0.35em;
  vertical-align: super;
  opacity: 0.45;
  font-weight: 400;
  letter-spacing: 0;
}

/* Tabular numbers for any stat/currency cell */
.tabular,
.card-calc-big,
.card-calc-amount,
.card-calc-gap-label strong,
.part-stat__num,
.ctc-stat__n,
.ctc-sla__l strong,
.sup-sla__val,
.sup-endcta__stats strong,
.ccg-bar + strong,
time,
[data-count],
.version-log dt {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum", "ss01";
}

/* Focus — refined ring, not the default browser halo ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--n-ink);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .12s ease;
}
.nr-btn:focus-visible,
button:focus-visible,
a.nr-btn:focus-visible {
  outline: 2px solid var(--n-ink);
  outline-offset: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,252,162,0.9), 0 0 0 4px rgba(29,29,27,0.85);
  border-color: var(--n-ink) !important;
}

/* Selection ---------------------------------------------------- */
::selection { background: var(--n-y); color: var(--n-ink); }
::-moz-selection { background: var(--n-y); color: var(--n-ink); }

/* Scrollbar polish (non-destructive — only where visible) ----- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(29,29,27,0.18) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(29,29,27,0.14);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(29,29,27,0.28); background-clip: padding-box; border: 2px solid transparent; }

/* Elevation / card refinement -------------------------------- */
.nr-card,
.inbox-card,
.role,
.part-voice,
.card-testi,
.status-card {
  background: #fff;
  border: 1px solid var(--n-hair);
  border-radius: var(--n-radius-md);
  transition: transform .28s var(--n-ease-out), box-shadow .28s var(--n-ease-out), border-color .22s;
  will-change: transform;
}
.nr-card:hover,
.inbox-card:hover,
.role:hover,
.part-voice:hover,
.card-testi:hover,
.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(20,20,18,0.02), 0 24px 48px -24px rgba(20,20,18,0.16);
  border-color: #e2e2d9;
}

/* Button refinements ----------------------------------------- */
.nr-btn, button.nr-btn, a.nr-btn {
  transition: transform .18s var(--n-ease-out), box-shadow .2s var(--n-ease-out), background .2s, color .2s;
  will-change: transform;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
.nr-btn:active { transform: translateY(1px) scale(0.99); }
.nr-btn--yellow { box-shadow: 0 1px 0 rgba(20,20,18,0.04), 0 12px 24px -14px rgba(246,221,74,0.7); }
.nr-btn--yellow:hover { box-shadow: 0 1px 0 rgba(20,20,18,0.04), 0 18px 32px -14px rgba(246,221,74,0.85); }

/* Subtle grain on dark sections (premium texture) ------------ */
.nr-section--dark,
.nr-hero--dark {
  position: relative;
}
.nr-section--dark::after,
.nr-hero--dark::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Image/figure defaults -------------------------------------- */
img { image-rendering: auto; }
figure { margin: 0; }

/* Smooth reveal fade — respects reduced motion AND no-JS fallback --------- */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--n-ease), transform .7s var(--n-ease);
}
html.js-reveal [data-reveal].is-in,
html.js-reveal [data-reveal][data-seen] {
  opacity: 1;
  transform: none;
}

/* Reduced motion: disable all animations & transitions ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .contact-envelope__svg .env-paper { animation: none !important; }
  .sup-hero-typing circle { animation: none !important; }
}

/* Skip link — universal ------------------------------------- */
.nr-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--n-ink); color: #fff !important;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  font-weight: 600; z-index: 9999;
  text-decoration: none !important;
}
.nr-skip:focus { left: 0; outline: 3px solid var(--n-y); }

/* Print — sensible defaults --------------------------------- */
@media print {
  .blog-navbar, .supfooter, .nr-hero::before, .nr-hero::after { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* ============================================================
   NAVBAR — high-end: fades to frosted glass on scroll
   ============================================================ */
.blog-navbar {
  transition: background .28s var(--n-ease-out), backdrop-filter .28s, border-color .28s, padding .28s;
  background-color: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(240,240,240,0.6) !important;
}
body.is-scrolled .blog-navbar,
.blog-navbar.is-scrolled {
  background-color: rgba(255,255,255,0.88) !important;
  border-bottom-color: rgba(20,20,18,0.08) !important;
  box-shadow: 0 1px 0 rgba(20,20,18,0.02), 0 12px 32px -24px rgba(20,20,18,0.14);
}

/* Nav links — animated underline */
.blog-nav-links a,
.blog-nav-link,
.nav-menu-link {
  position: relative;
  transition: color .2s;
}
.blog-nav-links a:not(.primary):not(.button)::after,
.nav-menu-link:not(.primary):not(.button)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .32s var(--n-ease-out);
}
.blog-nav-links a:not(.primary):not(.button):hover::after,
.nav-menu-link:not(.primary):not(.button):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ============================================================
   INLINE LINK POLISH — body-copy anchors get a refined underline
   ============================================================ */
.nr p a:not(.nr-btn),
.page-shell p a,
.sup-shell p a,
.legal-shell p a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .28s var(--n-ease-out), color .2s;
}
.nr p a:not(.nr-btn):hover,
.page-shell p a:hover,
.sup-shell p a:hover,
.legal-shell p a:hover {
  background-size: 100% 2px;
}

/* ============================================================
   FORM INPUT POLISH
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
  font-family: var(--n-font);
  font-feature-settings: "ss01";
}
input::placeholder,
textarea::placeholder {
  color: #a5a5a0;
  font-weight: 400;
}

/* ============================================================
   STAT / NUMBER DISPLAY — for the premium "data feel"
   ============================================================ */
.part-stat__num,
.ctc-stat__n,
.card-calc-big,
.card-calc-amount {
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}


/* ============================================================
   EDITORIAL SYSTEM (.ed-*)
   Stripe-Press / Mercury / editorial-magazine direction.
   Dominant serif, asymmetric grid, hairline rules, restrained
   palette (cream + ink), monospace for data.
   ============================================================ */

:root {
  --ed-cream: #f5f2ea;
  --ed-cream-soft: #faf8f2;
  --ed-ink: #1b1b17;
  --ed-ink-soft: rgba(27,27,23,0.72);
  --ed-quiet: rgba(27,27,23,0.52);
  --ed-hair: rgba(27,27,23,0.14);
  --ed-hair-soft: rgba(27,27,23,0.08);
  --ed-accent: #1b1b17;
  --ed-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.ed { font-family: var(--n-font); color: var(--ed-ink); background: #fff; padding-top: 68px; }
.ed ::selection { background: #fffca2; color: var(--ed-ink); }

/* HERO ------------------------------------------------------- */
.ed-hero {
  background: var(--ed-cream);
  padding: clamp(88px, 14vw, 180px) clamp(24px, 5vw, 72px) clamp(72px, 10vw, 120px);
  border-bottom: 1px solid var(--ed-hair);
  position: relative;
  overflow: hidden;
}
.ed-hero__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr 280px;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.ed-eyebrow {
  font: 500 0.72rem/1 var(--n-font);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ed-quiet);
  display: block;
}
.ed-meta {
  display: block;
  font: 400 0.68rem/1 var(--ed-mono);
  color: var(--ed-quiet);
  letter-spacing: 0.06em;
  margin-top: 14px;
}
.ed-display {
  font-family: var(--n-font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--ed-ink);
  margin: 0 0 clamp(24px, 3vw, 44px);
  text-wrap: balance;
  hyphens: none;
}
.ed-display em {
  font-style: italic;
  color: var(--ed-quiet);
  font-feature-settings: "dlig", "liga", "calt";
}
.ed-dek {
  font-family: var(--n-font);
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  line-height: 1.48;
  color: var(--ed-ink-soft);
  max-width: 56ch;
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.ed-kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--ed-hair);
  border-bottom: 1px solid var(--ed-hair);
  font-family: var(--ed-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ed-ink-soft);
}
.ed-kicker-row a { color: var(--ed-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ed-kicker-row .sep { width: 4px; height: 4px; border-radius: 100px; background: var(--ed-quiet); }

.ed-commitments {
  margin: 0;
  font-family: var(--n-font);
  font-size: 0.86rem;
  border-top: 1px solid var(--ed-hair);
}
.ed-commitments > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--ed-hair);
  gap: 16px;
}
.ed-commitments dt {
  color: var(--ed-quiet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.68rem;
}
.ed-commitments dd {
  margin: 0;
  font-family: var(--ed-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ed-ink);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

@media (max-width: 960px) {
  .ed-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .ed-hero__standfirst { max-width: 420px; }
}

/* SECTION ---------------------------------------------------- */
.ed-section {
  padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 72px);
  border-bottom: 1px solid var(--ed-hair-soft);
  background: #fff;
  position: relative;
}
.ed-section--cream { background: var(--ed-cream-soft); }
.ed-section--ink { background: var(--ed-ink); color: #fff; border-color: rgba(255,255,255,0.08); }
.ed-section--ink .ed-h2, .ed-section--ink .ed-num { color: #fff; }

.ed-section__rail {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(28px, 4vw, 72px);
  max-width: 1320px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  align-items: baseline;
}
.ed-num {
  font-family: var(--ed-mono);
  font-size: 0.74rem;
  color: var(--ed-quiet);
  letter-spacing: 0.08em;
}
.ed-h2 {
  font-family: var(--n-font-serif);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ed-ink);
  text-wrap: balance;
}
.ed-h2 em { font-style: italic; color: var(--ed-quiet); }
.ed-section__intro {
  max-width: 56ch;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--ed-ink-soft);
  margin: 18px 0 0;
}

@media (max-width: 900px) {
  .ed-section__rail { grid-template-columns: 1fr; gap: 14px; }
}

/* EDITORIAL LIST (inboxes, contacts, etc.) ------------------- */
.ed-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1320px;
  border-top: 1px solid var(--ed-hair);
}
.ed-entry {
  display: grid;
  grid-template-columns: 160px minmax(0,1fr) 300px 80px;
  gap: clamp(24px, 3vw, 56px);
  padding: 32px 0;
  border-bottom: 1px solid var(--ed-hair);
  align-items: baseline;
  transition: background .3s var(--n-ease);
  position: relative;
}
.ed-entry::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--ed-ink);
  transform: scaleY(0); transform-origin: top;
  transition: transform .42s var(--n-ease-out);
}
.ed-entry:hover::before { transform: scaleY(1); }
.ed-entry:hover { background: rgba(27,27,23,0.015); }

.ed-entry__tag {
  font: 500 0.7rem/1 var(--n-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-quiet);
  font-variant-numeric: tabular-nums;
}
.ed-entry__tag .ed-idx {
  font-family: var(--ed-mono);
  color: var(--ed-quiet);
  margin-right: 10px;
  letter-spacing: 0.04em;
}
.ed-entry__title h3 {
  font-family: var(--n-font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.12;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
}
.ed-entry__title p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ed-ink-soft);
  margin: 0;
  max-width: 50ch;
}
.ed-entry__addr a,
.ed-mono-link {
  font-family: var(--ed-mono);
  font-size: 0.84rem;
  color: var(--ed-ink);
  text-decoration: none;
  background: none;
  border-bottom: 1px solid var(--ed-hair);
  padding-bottom: 2px;
  transition: border-color .25s, color .2s;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.ed-entry__addr a:hover,
.ed-mono-link:hover { border-bottom-color: var(--ed-ink); }
.ed-entry__sla {
  font-family: var(--ed-mono);
  font-size: 0.8rem;
  color: var(--ed-ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ed-entry--priority .ed-entry__tag { color: var(--ed-ink); }
.ed-entry--priority .ed-entry__tag::after {
  content: "·priority";
  margin-left: 8px;
  color: #8a6a00;
  background: #fff2b3;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .ed-entry { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .ed-entry__sla { text-align: left; padding-top: 4px; }
}

/* FIGURE / SIDEBAR NOTE ------------------------------------- */
.ed-aside {
  font-family: var(--n-font);
  border-left: 1px solid var(--ed-hair);
  padding: 4px 0 4px 24px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ed-ink-soft);
  max-width: 44ch;
}
.ed-aside strong { color: var(--ed-ink); font-weight: 600; }
.ed-aside__label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ed-quiet);
  margin-bottom: 10px;
  font-weight: 500;
}

/* EDITORIAL FORM -------------------------------------------- */
.ed-form {
  max-width: 720px;
  margin: 0 auto;
}
.ed-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ed-form__row--full { grid-template-columns: 1fr; }
.ed-field { position: relative; border-bottom: 1px solid var(--ed-hair); padding: 18px 0 14px; transition: border-color .22s; }
.ed-field:focus-within { border-bottom-color: var(--ed-ink); }
.ed-field label {
  display: block;
  font-family: var(--n-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-quiet);
  margin-bottom: 8px;
  font-weight: 500;
}
.ed-field input,
.ed-field select,
.ed-field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-family: var(--n-font);
  font-size: 1.05rem;
  color: var(--ed-ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}
.ed-field textarea { resize: vertical; min-height: 120px; }
.ed-field select { cursor: pointer; }
.ed-field input::placeholder,
.ed-field textarea::placeholder { color: var(--ed-quiet); }
.ed-form__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 24px; flex-wrap: wrap; }
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ed-ink);
  color: #fff !important;
  border: 0;
  padding: 18px 28px 18px 28px;
  font-family: var(--n-font);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none !important;
  transition: background .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.ed-btn::after {
  content: "→";
  font-family: var(--ed-mono);
  transition: transform .28s var(--n-ease-out);
}
.ed-btn:hover { background: #000; }
.ed-btn:hover::after { transform: translateX(6px); }
.ed-btn:active { transform: translateY(1px); }
.ed-meta-note { font-family: var(--ed-mono); font-size: 0.72rem; color: var(--ed-quiet); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .ed-form__row { grid-template-columns: 1fr; gap: 4px; }
}

/* MARQUEE / SIGNATURE ROW ----------------------------------- */
.ed-signature {
  padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 72px) clamp(60px, 6vw, 90px);
  background: var(--ed-ink);
  color: #fff;
  text-align: left;
}
.ed-signature h2 {
  font-family: var(--n-font-serif);
  font-size: clamp(3rem, 8vw, 8.2rem);
  line-height: 0.94;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 36px;
  max-width: 1320px;
  text-wrap: balance;
}
.ed-signature h2 em { color: rgba(255,255,255,0.5); }
.ed-signature__meta {
  max-width: 1320px;
  display: flex;
  gap: 32px;
  font-family: var(--ed-mono);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 28px;
  flex-wrap: wrap;
}
.ed-signature__meta a { color: rgba(255,255,255,0.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; }
.ed-signature__meta a:hover { border-bottom-color: #fff; color: #fff; }


/* Override legacy .ctc-field floating-label when combined with .ed-field */
.ed-field.ctc-field label {
  position: static;
  transform: none;
  background: transparent;
  padding: 0;
  font-size: 0.66rem;
  color: var(--ed-quiet);
  margin-bottom: 8px;
  pointer-events: auto;
}
.ed-field.ctc-field input,
.ed-field.ctc-field select,
.ed-field.ctc-field textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  box-shadow: none;
}
.ed-field.ctc-field input:focus,
.ed-field.ctc-field select:focus,
.ed-field.ctc-field textarea:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ed-field.ctc-field.is-invalid { border-bottom-color: #d14646; }
.ed-field .ed-char-count {
  position: absolute; right: 0; bottom: 4px;
  font-family: var(--ed-mono); font-size: 0.68rem;
  color: var(--ed-quiet); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Toast: hidden by default; shows on success */
.ed-toast {
  position: fixed; left: 50%; bottom: 36px;
  transform: translate(-50%, 16px);
  background: var(--ed-ink); color: #fff;
  padding: 14px 22px;
  font-family: var(--n-font); font-size: 0.9rem;
  letter-spacing: -0.005em;
  border-radius: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--n-ease), transform .28s var(--n-ease);
  z-index: 9999;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.28);
}
.ed-toast.is-visible {
  opacity: 1; transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ============================================================
   EDITORIAL — extra signature polish
   ============================================================ */

/* Kicker row — refined arrow animation */
.ed-kicker-row a:hover { color: var(--ed-ink); }
.ed-kicker-row a { transition: color .2s; }

/* Hero CTA pair — editorial button set */
.ed-actions {
  display: flex;
  gap: 20px;
  margin: 36px 0 28px;
  flex-wrap: wrap;
  align-items: center;
}
.ed-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ed-ink);
  color: #fff !important;
  padding: 16px 26px;
  font-family: var(--n-font);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none !important;
  transition: background .2s, letter-spacing .2s;
  position: relative;
}
.ed-cta-primary::after {
  content: "→";
  font-family: var(--ed-mono);
  transition: transform .3s var(--n-ease-out);
}
.ed-cta-primary:hover { background: #000; letter-spacing: 0.015em; }
.ed-cta-primary:hover::after { transform: translateX(6px); }
.ed-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ed-ink) !important;
  font-family: var(--n-font);
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none !important;
  padding: 16px 0;
  border-bottom: 1px solid var(--ed-ink);
  letter-spacing: 0.005em;
  transition: padding .25s;
}
.ed-cta-ghost:hover { padding-right: 10px; }
.ed-cta-ghost::after {
  content: "↗";
  font-family: var(--ed-mono);
  color: var(--ed-quiet);
  transition: transform .3s var(--n-ease-out), color .2s;
}
.ed-cta-ghost:hover::after { transform: translate(3px, -3px); color: var(--ed-ink); }

/* Cream hero — paper grain baked into background, no overlay */
.ed-hero {
  background-color: var(--ed-cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0.055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply;
}
.ed-hero__grid, .ed-section__rail, .ed-list, .ed-form { position: relative; z-index: 1; }

/* Ornamental rule under hero heading — only on the signature section */
.ed-signature { position: relative; overflow: hidden; }
.ed-signature::before {
  content: "";
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  right: clamp(24px, 5vw, 72px);
  top: clamp(80px, 10vw, 140px);
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.ed-signature h2 {
  position: relative;
  padding-top: 24px;
}

/* Marginalia — small editorial brackets, type detail */
.ed-num::before {
  content: "⌜ ";
  color: var(--ed-quiet);
  margin-right: 2px;
}

/* Entry priority chip restyle */
.ed-entry--priority .ed-entry__tag::after {
  background: transparent;
  color: var(--ed-ink);
  border: 1px solid #8a6a00;
  padding: 2px 6px;
  content: "priority";
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 10px;
  vertical-align: middle;
}

/* Focused input: underline thickens + ink color */
.ed-field:focus-within label { color: var(--ed-ink); }

/* Nav — editorial bare on .ed pages (no frosted glass; clean hairline) */
.ed ~ .blog-navbar,
body:has(.ed) .blog-navbar {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(27,27,23,0.08) !important;
}

/* Editorial search — used on FAQ hero */
.ed-search {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 560px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--ed-ink);
  padding: 12px 0;
  transition: border-color .22s;
}
.ed-search::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px; margin-right: 12px;
  border-radius: 100px;
  border: 1.5px solid var(--ed-ink);
  box-shadow: 8px 8px 0 -6px var(--ed-ink);
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.ed-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--n-font);
  font-size: 1.08rem;
  color: var(--ed-ink);
  padding: 4px 0;
  letter-spacing: -0.005em;
}
.ed-search input::placeholder { color: var(--ed-quiet); font-weight: 400; }
.ed-search__kbd {
  font-family: var(--ed-mono);
  font-size: 0.7rem;
  color: var(--ed-quiet);
  border: 1px solid var(--ed-hair);
  padding: 4px 8px;
  letter-spacing: 0.06em;
}

/* a11y helper used on several pages */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Editorial waitlist form — bottom-hairline with inline button */
.ed-waitform {
  display: flex;
  align-items: stretch;
  max-width: 540px;
  margin: 36px 0 14px;
  border-bottom: 1px solid var(--ed-ink);
  padding-bottom: 2px;
  transition: border-color .22s;
}
.ed-waitform input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--n-font);
  font-size: 1.05rem;
  color: var(--ed-ink);
  padding: 14px 0;
  letter-spacing: -0.005em;
}
.ed-waitform input::placeholder { color: var(--ed-quiet); }
.ed-waitform button {
  background: var(--ed-ink);
  color: #fff;
  border: 0;
  padding: 0 22px;
  font-family: var(--n-font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  margin: 6px 0;
  letter-spacing: 0.005em;
  transition: background .2s, letter-spacing .2s;
}
.ed-waitform button:hover { background: #000; letter-spacing: 0.015em; }
.ed-waitform:focus-within { border-bottom-width: 2px; padding-bottom: 1px; }

/* Override legacy pill radius on ed-waitform */
.ed-waitform.card-waitform { border-radius: 0; background: transparent; padding-bottom: 2px; box-shadow: none; }
.ed-waitform.card-waitform input { border-radius: 0; background: transparent; }
.ed-waitform.card-waitform button { border-radius: 0; padding: 0 22px; height: auto; align-self: stretch; }

/* Fix dark-on-dark CTA text — .nr-btn without an inline override */
.nr .nr-btn,
.nr-hero .nr-btn,
.nr-hero-actions .nr-btn {
  color: #fff !important;
  text-decoration: none !important;
}
.nr .nr-btn--yellow,
.nr-hero .nr-btn--yellow,
.nr-hero-actions .nr-btn--yellow {
  color: var(--n-ink) !important;
}
.nr .nr-btn--ghost,
.nr-hero .nr-btn--ghost,
.nr-hero-actions .nr-btn--ghost {
  color: var(--n-ink) !important;
  background: transparent !important;
}

/* ===== BLOG PAGE =====
   Vibrant consumer marketing. Yellow flood hero, bold sans, illustrated cards.
   Same brand language as home page: --n-y #fffca2 + Geist 700 + floating cards. */

body.blog-page {
  --n-font-display: "SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  --bp-ink: #242424;
  --bp-mute: #5b5b58;
  --bp-soft: #8a8a80;
  --bp-paper: #ffffff;
  --bp-line: #ececec;
  --bp-yellow: var(--n-y, #fffca2);
  --bp-yellow-deep: var(--n-y-deep, #f6dd4a);
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--n-font-display);
}
body.blog-page .blog-navbar { font-family: var(--n-font-display); }

/* Hero — yellow flood, bold sans, marketing energy */
.bp-masthead {
  position: relative;
  padding: 120px 0 56px;
  background: var(--bp-yellow);
  background-image: url("../images/hero-bg-union.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.bp-masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bp-paper) 100%);
  pointer-events: none;
}
.bp-masthead-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.bp-masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 40px;
}
.bp-masthead-headline { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.bp-masthead-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.bp-masthead-art-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(17,17,17,0.18));
  transform: rotate(-2deg);
  transition: transform .4s ease;
}
.bp-masthead-art-img:hover { transform: rotate(0deg) scale(1.02); }
.bp-eyebrow {
  font: 600 12px/1 var(--n-font-display);
  letter-spacing: 0.04em;
  color: var(--bp-ink);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px 10px 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
  align-self: flex-start;
  width: fit-content;
}
.bp-eyebrow-dot {
  width: 8px; height: 8px;
  background: var(--bp-ink);
  border-radius: 50%;
  display: inline-block;
}
.bp-display {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--bp-ink);
  margin: 0;
  max-width: 14ch;
}
.bp-lede {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.5;
  color: var(--bp-ink);
  margin: 0;
  max-width: 42ch;
}

/* Filter rail — bold pills */
.bp-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}
.bp-rail-chip {
  appearance: none;
  background: #fff;
  border: 1.5px solid var(--bp-ink);
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 13px/1 var(--n-font-display);
  letter-spacing: -0.005em;
  color: var(--bp-ink);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bp-rail-chip .bp-rail-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-mute);
  background: #f3f3ef;
  padding: 2px 7px;
  border-radius: 999px;
  font-feature-settings: "tnum" 1;
}
.bp-rail-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.bp-rail-chip.is-active {
  background: var(--bp-yellow);
  color: var(--bp-ink);
  border-color: var(--bp-ink);
  box-shadow: 0 3px 0 var(--bp-ink);
}
.bp-rail-chip.is-active .bp-rail-count {
  background: var(--bp-ink);
  color: #fff;
}
.bp-rail-spacer { flex: 1 1 auto; }
.bp-rail-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: 500 12px/1 var(--n-font-display);
  color: var(--bp-mute);
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
}
.bp-rail-sort select {
  appearance: none;
  background: transparent;
  border: 0;
  font: 600 13px/1 var(--n-font-display);
  color: var(--bp-ink);
  padding: 2px 18px 2px 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.bp-rail-sort select:focus { outline: 0; }

/* Body */
.bp-body { background: var(--bp-paper); padding: 56px 0 120px; }
.bp-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.bp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 64px 0 24px;
  margin-bottom: 8px;
}
.bp-section-head h2 {
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--bp-ink);
}
.bp-section-head .bp-section-meta {
  font: 600 12px/1 var(--n-font-display);
  letter-spacing: -0.005em;
  color: var(--bp-mute);
  background: #f6f5ef;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Lead story — big floating card */
.bp-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  margin: 0 0 32px;
  background: #fff;
  border: 1.5px solid var(--bp-ink);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bp-lead:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 0 -2px rgba(17,17,17,0.08);
}
.bp-lead a.bp-lead-link { position: absolute; inset: 0; z-index: 2; }
.bp-lead-image {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--bp-yellow);
  border-right: 1.5px solid var(--bp-ink);
}
.bp-lead-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.bp-lead:hover .bp-lead-image img { transform: scale(1.03); }
.bp-lead-text {
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bp-kicker {
  font: 600 11px/1 var(--n-font-display);
  letter-spacing: 0.02em;
  color: var(--bp-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  background: var(--bp-yellow);
  padding: 7px 12px;
  border-radius: 999px;
  align-self: flex-start;
  border: 1.5px solid var(--bp-ink);
}
.bp-kicker span { color: var(--bp-mute); font-weight: 500; }
.bp-kicker-feature { background: var(--bp-yellow); }
.bp-kicker::before { display: none; }
.bp-lead-title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  color: var(--bp-ink);
}
.bp-lead-excerpt {
  font: 400 1.0625rem/1.55 var(--n-font-display);
  color: #3a3a35;
  margin: 0 0 22px;
  max-width: 52ch;
}
.bp-byline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1 var(--n-font-display);
  color: var(--bp-mute);
  padding-top: 0;
  border-top: 0;
}
.bp-byline-sep { color: #d4d4cf; }
.bp-byline strong { color: var(--bp-ink); font-weight: 600; }

/* Card grid — floating illustrated cards */
.bp-secondary {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 28px;
  row-gap: 36px;
  padding: 8px 0 0;
}
.bp-story {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1.5px solid var(--bp-ink);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.bp-story:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 -2px rgba(17,17,17,0.08);
}
.bp-story a.bp-story-link { position: absolute; inset: 0; z-index: 2; }
.bp-story-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bp-yellow);
  margin: 0;
  border-bottom: 1.5px solid var(--bp-ink);
}
.bp-story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.bp-story:hover .bp-story-image img { transform: scale(1.04); }
.bp-story-title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--bp-ink);
  margin: 22px 22px 10px;
}
.bp-story-excerpt {
  font: 400 0.95rem/1.5 var(--n-font-display);
  color: var(--bp-mute);
  margin: 0 22px 18px;
}
.bp-story-meta {
  margin: auto 22px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--bp-line);
  font: 600 11.5px/1 var(--n-font-display);
  color: var(--bp-mute);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-transform: none;
  letter-spacing: -0.005em;
}
.bp-story-meta .bp-story-cat {
  color: var(--bp-ink);
  background: var(--bp-yellow);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.bp-story.span-7 { grid-column: span 7; }
.bp-story.span-5 { grid-column: span 5; }
.bp-story.span-6 { grid-column: span 6; }
.bp-story.span-4 { grid-column: span 4; }
.bp-story.offset-1 { margin-top: 32px; }
.bp-story.span-7 .bp-story-title,
.bp-story.span-6 .bp-story-title { font-size: 1.5rem; }
.bp-story.span-7 .bp-story-image,
.bp-story.span-6 .bp-story-image { aspect-ratio: 16/9; }
.bp-story.span-4 .bp-story-image { aspect-ratio: 4/3; }

/* Tail — compact pill cards */
.bp-tail {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border-top: 0;
}
.bp-tail-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1.5px solid var(--bp-ink);
  border-radius: 20px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.bp-tail-item:hover {
  transform: translateY(-2px);
  background: var(--bp-yellow);
  box-shadow: 0 8px 0 -2px rgba(17,17,17,0.08);
}
.bp-tail-item a.bp-tail-link { position: absolute; inset: 0; z-index: 2; }
.bp-tail-thumb {
  width: 96px; height: 96px;
  background: var(--bp-yellow);
  overflow: hidden;
  position: relative;
  border-radius: 14px;
  border: 1.5px solid var(--bp-ink);
}
.bp-tail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-tail-title {
  font-family: var(--n-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--bp-ink);
}
.bp-tail-excerpt {
  font: 400 0.875rem/1.45 var(--n-font-display);
  color: var(--bp-mute);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-tail-meta {
  text-align: left;
  font: 500 11.5px/1.4 var(--n-font-display);
  color: var(--bp-mute);
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
  text-transform: none;
  letter-spacing: -0.005em;
}
.bp-tail-meta strong {
  display: inline-block;
  margin-bottom: 0;
  color: var(--bp-ink);
  font-weight: 600;
  background: var(--bp-yellow);
  padding: 3px 8px;
  border-radius: 999px;
}
.bp-tail-item:hover .bp-tail-meta strong { background: #fff; }

/* Filter hidden */
.bp-story.is-hidden,
.bp-tail-item.is-hidden,
.bp-lead.is-hidden { display: none !important; }

/* Empty state */
.bp-empty {
  display: none;
  text-align: center;
  padding: 80px 20px;
  font-family: var(--n-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--bp-mute);
}
.bp-empty.is-visible { display: block; }

/* Responsive */
@media (max-width: 960px) {
  .bp-masthead { padding: 100px 0 40px; }
  .bp-masthead-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
  .bp-display { font-size: clamp(2.2rem, 8vw, 3.6rem); max-width: none; }
  .bp-masthead-art { order: -1; justify-content: flex-start; }
  .bp-masthead-art-img { max-width: 220px; }
  .bp-lead { grid-template-columns: 1fr; }
  .bp-lead-image { border-right: 0; border-bottom: 1.5px solid var(--bp-ink); }
  .bp-lead-text { padding: 28px 24px 28px; }
  .bp-secondary { grid-template-columns: repeat(6, 1fr); column-gap: 20px; row-gap: 28px; }
  .bp-story.span-7, .bp-story.span-6, .bp-story.span-5, .bp-story.span-4 { grid-column: span 6; }
  .bp-story.offset-1 { margin-top: 0; }
  .bp-tail { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bp-masthead-inner, .bp-container { padding: 0 20px; }
  .bp-rail { gap: 8px; }
  .bp-rail-chip { padding: 9px 14px; font-size: 12px; }
  .bp-secondary { grid-template-columns: 1fr; }
  .bp-story.span-7, .bp-story.span-6, .bp-story.span-5, .bp-story.span-4 { grid-column: 1 / -1; }
  .bp-tail-item { grid-template-columns: 72px 1fr; gap: 14px; padding: 12px; }
  .bp-tail-thumb { width: 72px; height: 72px; }
  .bp-tail-excerpt { display: none; }
}
.disclosures-page .disclosures-rail .rail-print {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem;
  color: #6b6b66;
  background: transparent;
  border: 1px solid #e6e6dc;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color .15s, border-color .15s, transform .15s;
}
.disclosures-page .disclosures-rail .rail-print::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #242424;
  display: inline-block;
}
.disclosures-page .disclosures-rail .rail-print:hover {
  color: #242424; border-color: #242424; transform: translateY(-1px);
}

/* ---------- Hero --------------------------------------------- */
.disclosures-page .legal-hero {
  border-bottom: 1px solid #e6e6dc;
  padding-bottom: 36px;
  margin-bottom: 44px;
}
.disclosures-page .legal-hero .legal-eyebrow {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6b6b66 !important;
  font-weight: 600;
  margin: 0 0 24px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.disclosures-page .legal-hero .legal-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255,59,48,0.12);
  animation: nrPulse 2.4s ease-in-out infinite;
}
@keyframes nrPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.disclosures-page .legal-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  margin: 0 0 22px !important;
  color: #242424;
  max-width: 14ch;
}
.disclosures-page .legal-hero h1 .editorial {
  /* italic removed (brand) */
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #242424;
}
.disclosures-page .legal-hero .lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.55 !important;
  color: #3a3a35 !important;
  margin: 0 0 28px !important;
  max-width: 56ch;
}

/* Hero metadata as definition list ---------------------------- */
.disclosures-page .legal-hero .legal-meta-inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 0;
  margin: 28px 0 0 !important;
  padding: 0;
  border-top: 1px solid #e6e6dc;
}
.disclosures-page .legal-hero .legal-meta-inline > div {
  padding: 16px 28px 0 0;
  border-right: 1px solid #e6e6dc;
  margin-right: 28px;
  min-width: 0;
}
.disclosures-page .legal-hero .legal-meta-inline > div:last-child {
  border-right: 0; margin-right: 0; padding-right: 0;
}
.disclosures-page .legal-hero .legal-meta-inline dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #6b6b66;
  font-weight: 600;
  margin: 0 0 6px;
}
.disclosures-page .legal-hero .legal-meta-inline dd {
  margin: 0 !important;
  font-size: 0.95rem;
  color: #242424;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.disclosures-page .legal-hero .legal-meta-inline .meta-soft {
  color: #6b6b66; font-weight: 400;
}
.disclosures-page .legal-hero .legal-meta-inline a {
  color: #242424;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 1px;
}

/* ---------- "Not a bank" hero banner — dark full card -------- */
.disclosures-page .not-a-bank {
  background: #242424;
  color: #fff;
  border-radius: 22px;
  padding: 36px 40px 32px !important;
  margin: 12px 0 56px !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px -28px rgba(17,17,17,0.55);
}
.disclosures-page .not-a-bank::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(255,59,48,0.18), transparent 55%),
    radial-gradient(400px 240px at 0% 100%, rgba(255,252,162,0.10), transparent 60%);
  pointer-events: none;
}
.disclosures-page .not-a-bank > * { position: relative; z-index: 1; }
.disclosures-page .not-a-bank .nab-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  width: max-content;
}
.disclosures-page .not-a-bank .nab-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5a4d;
  box-shadow: 0 0 0 3px rgba(255,90,77,0.18);
}
.disclosures-page .not-a-bank .nab-headline {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  line-height: 1.4 !important;
  color: #fff !important;
  margin: 0 !important;
  max-width: 56ch;
  font-weight: 400 !important;
}
.disclosures-page .not-a-bank .nab-mark {
  font-family: "SF Pro", "SF Pro", serif !important;
  /* italic removed (brand) */
  font-weight: 500;
  font-size: 1.15em;
  color: #fffca2;
  letter-spacing: -0.01em;
  margin-right: 4px;
}
.disclosures-page .not-a-bank .nab-grid {
  list-style: none;
  margin: 6px 0 0 !important;
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.disclosures-page .not-a-bank .nab-grid li {
  padding: 0 22px 0 0;
  margin: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.disclosures-page .not-a-bank .nab-grid li:last-child { border-right: 0; }
.disclosures-page .not-a-bank .nab-grid li + li { padding-left: 22px; }
.disclosures-page .not-a-bank .nab-k {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.62);
  font-weight: 600;
}
.disclosures-page .not-a-bank .nab-v {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.disclosures-page .not-a-bank .nab-foot {
  margin: 4px 0 0 !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  max-width: 60ch;
}

/* ---------- Section eyebrows + headings ---------------------- */
.disclosures-page .disclosures-content .section-eyebrow {
  font-size: 0.66rem !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6b6b66 !important;
  font-weight: 600;
  margin: 88px 0 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid #ececdf;
  width: 100%;
}
.disclosures-page .disclosures-content > .section-eyebrow:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}
.disclosures-page .disclosures-content h2 {
  font-size: clamp(1.55rem, 2.2vw, 1.95rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  color: #242424;
  margin: 8px 0 16px !important;
  max-width: 22ch;
  scroll-margin-top: 112px;
}
.disclosures-page .disclosures-content h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #242424;
  letter-spacing: -0.005em !important;
}

/* ---------- Body text ---------------------------------------- */
.disclosures-page .disclosures-content p,
.disclosures-page .disclosures-content li {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #2a2a27 !important;
  max-width: 70ch;
}
.disclosures-page .disclosures-content ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 22px;
}
.disclosures-page .disclosures-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px !important;
}
.disclosures-page .disclosures-content ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.78em;
  width: 10px; height: 1px;
  background: #242424;
}
.disclosures-page .disclosures-content a {
  color: #242424;
  text-decoration: none;
  border-bottom: 1px solid #d9d9cc;
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
.disclosures-page .disclosures-content a:hover { border-bottom-color: #242424; }
.disclosures-page .disclosures-content p.muted,
.disclosures-page .disclosures-content .muted {
  color: #6b6b66 !important;
  font-size: 0.86rem !important;
}

/* ---------- Plain-aside (TL;DR yellow) ----------------------- */
.disclosures-page .plain-aside {
  background: #fffca2 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 20px 0 28px !important;
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid #f0e780;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  position: relative;
}
.disclosures-page .plain-aside::before {
  content: "TL;DR";
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #242424;
  color: #fffca2;
  padding: 5px 8px;
  border-radius: 4px;
  margin-top: 1px;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.disclosures-page .plain-aside p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: #242424 !important;
  font-weight: 500;
  max-width: 64ch;
}

/* ---------- Severity-card system (the page's signature) ----- */
.disclosures-page .risk-card {
  background: #fff !important;
  border: 1px solid #ececdf !important;
  border-left: 4px solid #b97400 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 0 0 12px !important;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform, opacity;
}
.disclosures-page .risk-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px rgba(17,17,17,0.18);
}
.disclosures-page .risk-card.severe {
  border-left: 4px solid #ff3b30 !important;
  background:
    linear-gradient(180deg, rgba(255,59,48,0.025) 0%, transparent 60%),
    #fff !important;
}
.disclosures-page .risk-card.severe::before {
  content: "";
  position: absolute;
  left: -4px; top: 0; bottom: 0;
  width: 4px;
  background: #ff3b30;
  box-shadow: 0 0 12px rgba(255,59,48,0.35);
  border-radius: 2px 0 0 2px;
}
.disclosures-page .risk-card h3 {
  margin: 0 0 10px !important;
  font-size: 1.02rem !important;
  letter-spacing: -0.005em !important;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 600 !important;
  color: #242424 !important;
}
.disclosures-page .risk-card h3 .risk-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff5d6;
  color: #b97400;
  border: 1px solid #f0dca0;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.disclosures-page .risk-card.severe h3 .risk-tag {
  background: #ffe7e4;
  color: #b5221a;
  border-color: #f5c3bf;
}
.disclosures-page .risk-card p {
  margin: 0 !important;
  font-size: 0.96rem !important;
  color: #2a2a27 !important;
  line-height: 1.6 !important;
  max-width: 72ch;
}
.disclosures-page .risk-card p + p { margin-top: 8px !important; }

/* "Ordinary" tag visual — softer than amber */
.disclosures-page .risk-card:not(.severe) h3 .risk-tag:not([class*="material"]):not([class*="severe"]) {
  /* default amber for Material */
}
/* Explicit Ordinary tag treatment via attribute */
.disclosures-page .risk-card h3 .risk-tag {
  /* baseline above */
}
/* Lighter grey for Ordinary risk visually (selector via :has fallback) */
.disclosures-page .risk-card h3:has(.risk-tag) {
  /* no-op, just ensures :has support is present where available */
}

/* ---------- Tables (partners, fees) -------------------------- */
.disclosures-page .nr-table-scroll {
  margin: 18px 0 28px;
  border-radius: 14px;
  border: 1px solid #ececdf;
  background: #fff;
  overflow: hidden;
}
.disclosures-page .legal-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.94rem !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-width: 600px;
}
.disclosures-page .legal-table thead th {
  background: #fafaf3 !important;
  border-bottom: 1px solid #ececdf !important;
  padding: 12px 18px !important;
  font-size: 0.62rem !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #6b6b66 !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.disclosures-page .legal-table tbody td {
  padding: 16px 18px !important;
  border-bottom: 1px solid #f0f0e6 !important;
  vertical-align: top;
  line-height: 1.55;
  color: #2a2a27 !important;
}
.disclosures-page .legal-table tbody tr:last-child td { border-bottom: 0 !important; }
.disclosures-page .legal-table tbody tr:hover td { background: #fcfcf7; }
.disclosures-page .legal-table td strong {
  display: block;
  margin-bottom: 2px;
  color: #242424;
  font-weight: 600;
}
.disclosures-page .legal-table .fee-amount {
  font-weight: 600;
  color: #242424;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.disclosures-page .legal-table .badge-free {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: #e7f5ec;
  color: #0c6a30;
  border: 1px solid #cae6d3;
  font-feature-settings: "tnum" 1;
}

/* ---------- Jurisdictions grid ------------------------------- */
.disclosures-page .juris-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0 28px;
}
.disclosures-page .juris-item {
  border: 1px solid #ececdf;
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.disclosures-page .juris-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px rgba(17,17,17,0.14);
}
.disclosures-page .juris-item strong {
  font-size: 0.86rem !important;
  color: #242424 !important;
  display: flex; align-items: center; gap: 8px;
  margin: 0 !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.disclosures-page .juris-item strong::before {
  content: "";
  width: 8px; height: 8px;
  background: #b9b9af;
  border-radius: 1px;
  display: inline-block;
}
.disclosures-page .juris-item:nth-child(1) strong::before { background: #0c8a3c; }
.disclosures-page .juris-item:nth-child(2) strong::before { background: #ff3b30; }
.disclosures-page .juris-item:nth-child(3) strong::before { background: #b97400; }
.disclosures-page .juris-item:nth-child(4) strong::before { background: #6b6b66; }
.disclosures-page .juris-item span:not(.dot) {
  font-size: 0.9rem !important;
  color: #3a3a35 !important;
  line-height: 1.5;
}

/* ---------- Version history (dl) ----------------------------- */
.disclosures-page .version-log {
  border: 1px solid #ececdf;
  border-radius: 12px;
  margin: 18px 0 8px;
  background: #fff;
  overflow: hidden;
}
.disclosures-page .version-log dt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: #242424;
  font-size: 0.86rem;
  padding: 16px 22px 4px;
  display: flex; align-items: baseline; gap: 10px;
}
.disclosures-page .version-log dt::before {
  content: "";
  width: 6px; height: 6px;
  background: #b9b9af;
  border-radius: 50%;
}
.disclosures-page .version-log dt:first-of-type::before { background: #0c8a3c; }
.disclosures-page .version-log dd {
  margin: 0 !important;
  padding: 0 22px 16px 38px !important;
  font-size: 0.9rem !important;
  color: #3a3a35 !important;
  border-bottom: 1px solid #f0f0e6;
  line-height: 1.55 !important;
  max-width: 78ch;
}
.disclosures-page .version-log dd:last-of-type { border-bottom: 0; }

/* ---------- Contact strip ------------------------------------ */
.disclosures-page .nr-contact-legal {
  background: #242424 !important;
  color: #fff !important;
  border-radius: 18px !important;
  padding: 22px 28px !important;
  margin: 56px 0 24px !important;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.disclosures-page .nr-contact-legal p {
  margin: 0 !important; color: #fff !important; font-size: 0.96rem !important;
}
.disclosures-page .nr-contact-legal a {
  color: #fffca2 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #fffca2 !important;
  padding-bottom: 1px;
  font-weight: 500;
}

.disclosures-page .legal-meta {
  border-top: 1px solid #ececdf;
  padding-top: 22px;
  margin-top: 56px;
  color: #6b6b66 !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  max-width: 80ch;
}
.disclosures-page .legal-meta a { color: #242424; border-bottom: 1px solid #d9d9cc; }

/* Hide old inline TOC on this page (rail replaces it) */
.disclosures-page .legal-shell > .legal-toc { display: none !important; }

/* ---------- Responsive --------------------------------------- */
@media (max-width: 1080px) {
  .disclosures-page .disclosures-layout { gap: 56px; }
  .disclosures-page .legal-hero h1 { max-width: 100%; }
}
@media (max-width: 980px) {
  .disclosures-page .legal-shell { padding: 124px 22px 88px !important; }
  .disclosures-page .disclosures-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .disclosures-page .disclosures-rail {
    position: static; border-bottom: 1px solid #ececdf; padding-bottom: 24px; margin-bottom: 32px;
  }
  .disclosures-page .disclosures-rail ol {
    border-left: 0; display: flex; flex-wrap: wrap; gap: 6px;
  }
  .disclosures-page .disclosures-rail a {
    display: inline-flex; gap: 6px; padding: 7px 13px; margin: 0;
    border: 1px solid #ececdf; border-radius: 999px;
    grid-template-columns: none;
  }
  .disclosures-page .disclosures-rail a::before { display: none; }
  .disclosures-page .disclosures-rail a.is-active {
    background: #242424; color: #fff !important; border-color: #242424;
  }
  .disclosures-page .disclosures-rail .rail-print { margin-top: 14px; }
  .disclosures-page .not-a-bank { padding: 28px 26px 24px !important; }
  .disclosures-page .not-a-bank .nab-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .disclosures-page .not-a-bank .nab-grid li {
    border-right: 0;
    padding: 0 16px 0 0;
  }
  .disclosures-page .not-a-bank .nab-grid li + li { padding-left: 0; }
  .disclosures-page .not-a-bank .nab-grid li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.10); padding-right: 16px; }
  .disclosures-page .legal-hero .legal-meta-inline {
    grid-template-columns: repeat(2, 1fr);
  }
  .disclosures-page .legal-hero .legal-meta-inline > div {
    border-right: 0; margin-right: 0; padding: 14px 0 0;
    border-top: 0;
  }
  .disclosures-page .legal-hero .legal-meta-inline > div + div { border-top: 1px solid #ececdf; }
}
@media (max-width: 560px) {
  .disclosures-page .legal-hero h1 { font-size: 2.2rem !important; }
  .disclosures-page .not-a-bank .nab-grid { grid-template-columns: minmax(0, 1fr); }
  .disclosures-page .not-a-bank .nab-grid li,
  .disclosures-page .not-a-bank .nab-grid li:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 12px 0;
  }
  .disclosures-page .not-a-bank .nab-grid li:last-child { border-bottom: 0; }
}

/* ---------- Print: monochrome with dashed callouts ----------- */
@media print {
  .disclosures-page,
  .disclosures-page .legal-shell { background: #fff !important; color: #000 !important; }
  .disclosures-page .blog-navbar,
  .disclosures-page .supfooter,
  .disclosures-page .footer-main,
  .disclosures-page .nr-progress,
  .disclosures-page .nr-top,
  .disclosures-page .nr-skip,
  .disclosures-page .disclosures-rail,
  .disclosures-page .nr-contact-legal { display: none !important; }
  .disclosures-page .legal-shell { max-width: none !important; padding: 0 !important; }
  .disclosures-page .disclosures-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .disclosures-page .legal-hero h1,
  .disclosures-page .disclosures-content h2,
  .disclosures-page .disclosures-content h3 {
    color: #000 !important; page-break-after: avoid; break-after: avoid;
  }
  .disclosures-page .legal-hero .legal-eyebrow .dot { background: #000 !important; box-shadow: none !important; }
  .disclosures-page .not-a-bank {
    background: #fff !important; color: #000 !important;
    border: 1.5px dashed #000 !important; box-shadow: none !important;
  }
  .disclosures-page .not-a-bank::before { display: none !important; }
  .disclosures-page .not-a-bank * { color: #000 !important; }
  .disclosures-page .not-a-bank .nab-tag,
  .disclosures-page .not-a-bank .nab-grid,
  .disclosures-page .not-a-bank .nab-grid li { border-color: #000 !important; }
  .disclosures-page .not-a-bank .nab-mark { color: #000 !important; }
  .disclosures-page .plain-aside {
    background: #fff !important; border: 1.2px dashed #000 !important; color: #000 !important;
  }
  .disclosures-page .plain-aside::before {
    background: #000 !important; color: #fff !important;
  }
  .disclosures-page .risk-card {
    background: #fff !important; border: 1px solid #000 !important;
    border-left: 4px solid #000 !important; break-inside: avoid; page-break-inside: avoid;
  }
  .disclosures-page .risk-card.severe { border-left-width: 6px !important; }
  .disclosures-page .risk-card h3 .risk-tag {
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important;
  }
  .disclosures-page .legal-table {
    border: 1px solid #000 !important;
  }
  .disclosures-page .legal-table th,
  .disclosures-page .legal-table td {
    border-color: #000 !important; color: #000 !important;
    background: #fff !important;
  }
  .disclosures-page .juris-item,
  .disclosures-page .version-log {
    border: 1px solid #000 !important; background: #fff !important;
  }
  .disclosures-page a[href^="http"]:after,
  .disclosures-page a[href^="mailto"]:after {
    content: " (" attr(href) ")"; font-size: 0.78em; color: #333;
  }
  .disclosures-page p, .disclosures-page li { color: #000 !important; }
}

/* ===== PRIVACY PAGE ===== */
.pp-body {
  --pp-ink: #16160f;
  --pp-ink-2: #2a2a23;
  --pp-ink-3: #4d4d44;
  --pp-mute: #7a7a6e;
  --pp-faint: #a8a89c;
  --pp-rule: #e6e3d4;
  --pp-rule-soft: #efecdc;
  --pp-cream: #fffdf4;
  --pp-cream-2: #faf6e7;
  --pp-yellow: #fffca2;
  --pp-yellow-deep: #f6ec5c;
  --pp-green: #2f8f5b;
  --pp-red:   #a8392c;
  --pp-font-sans: "SF Pro", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --pp-font-display: "SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pp-font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --pp-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --n-font-display: var(--pp-font-display);
  background: var(--pp-cream);
  color: var(--pp-ink);
  font-family: var(--pp-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "kern";
}
.pp-body * { box-sizing: border-box; }
.pp-body::-webkit-scrollbar { width: 0; }
.pp-body::-webkit-scrollbar-thumb { background: transparent; }
.pp-body::-webkit-scrollbar-track { background: transparent; }

/* responsive root only inside this page (don’t pollute global) */
@media (min-width: 1440px) { .pp-body { font-size: 16px; } }
@media (min-width: 768px) and (max-width: 1439px) { .pp-body { font-size: 16px; } }
@media (max-width: 767px) { .pp-body { font-size: 16px; } }

/* skip link */
.pp-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--pp-ink); color: #fff;
  padding: 10px 14px; border-radius: 8px;
  z-index: 9999; text-decoration: none; font-size: 0.9rem;
  font-family: var(--pp-font-sans);
}
.pp-skip:focus { left: 16px; top: 16px; }

/* progress bar */
.pp-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--pp-ink);
  z-index: 9998;
  transition: width 0.08s linear;
}

/* shell */
.pp-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 132px 32px 96px;
  color: var(--pp-ink);
  font-family: var(--pp-font-sans);
}
@media (max-width: 720px) {
  .pp-shell { padding: 108px 22px 72px; }
}

/* MASTHEAD */
.pp-masthead {
  border-top: 1px solid var(--pp-ink);
  padding: 28px 0 32px;
  margin-bottom: 56px;
  position: relative;
}
.pp-masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--pp-rule);
}
.pp-eyebrow {
  font-family: var(--pp-font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pp-ink);
  font-weight: 600;
  margin: 0 0 28px;
  display: flex; align-items: center; gap: 14px;
}
.pp-eyebrow-rule {
  display: inline-block;
  width: 28px; height: 1px; background: var(--pp-ink);
}
.pp-title {
  font-family: var(--pp-font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--pp-ink);
  margin: 0 0 22px;
  max-width: 18ch;
}
.pp-title em {
  font-family: var(--pp-font-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.015em;
  color: var(--pp-ink-2);
}
.pp-lede {
  font-family: var(--pp-font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--pp-ink-3);
  max-width: 56ch;
  margin: 0 0 36px;
  font-weight: 400;
}

/* meta row */
.pp-metarow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--pp-rule);
  border-bottom: 1px solid var(--pp-rule);
  margin: 0;
  padding: 0;
}
.pp-meta-cell {
  padding: 16px 18px 16px 0;
  border-right: 1px solid var(--pp-rule);
  display: flex; flex-direction: column; gap: 4px;
}
.pp-meta-cell:first-child { padding-left: 0; }
.pp-meta-cell:last-child { border-right: 0; padding-right: 0; }
.pp-metarow dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pp-mute);
  font-weight: 600;
}
.pp-metarow dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pp-ink);
  letter-spacing: -0.005em;
}
.pp-meta-sub {
  color: var(--pp-mute);
  font-weight: 400;
  font-size: 0.82rem;
}
.pp-dot {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-green); margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(47,143,91,.12);
}
.pp-meta-action { align-items: flex-end; justify-content: center; }
.pp-print {
  font-family: var(--pp-font-sans);
  background: var(--pp-ink);
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
  display: inline-flex; align-items: center; gap: 4px;
}
.pp-print:hover { transform: translateY(-1px); opacity: .92; }
@media (max-width: 900px) {
  .pp-metarow { grid-template-columns: repeat(2, 1fr); }
  .pp-meta-cell { border-right: 0; border-bottom: 1px solid var(--pp-rule); padding: 14px 0; }
  .pp-meta-cell:nth-child(odd) { border-right: 1px solid var(--pp-rule); padding-right: 14px; }
  .pp-meta-cell:nth-child(even) { padding-left: 14px; }
  .pp-meta-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .pp-meta-action { align-items: flex-start; }
}
@media (max-width: 540px) {
  .pp-metarow { grid-template-columns: 1fr; }
  .pp-meta-cell, .pp-meta-cell:nth-child(odd), .pp-meta-cell:nth-child(even) {
    border-right: 0; border-bottom: 1px solid var(--pp-rule); padding: 12px 0;
  }
  .pp-meta-cell:last-child { border-bottom: 0; }
}

/* layout grid: rail + body */
.pp-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 80px;
  align-items: start;
  margin-top: 64px;
}
@media (max-width: 1080px) { .pp-grid { grid-template-columns: 200px minmax(0,1fr); gap: 56px; } }
@media (max-width: 900px) { .pp-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* sticky rail */
.pp-rail {
  position: sticky;
  top: 110px;
  font-family: var(--pp-font-sans);
}
.pp-rail-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pp-mute);
  font-weight: 600;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-rule);
}
.pp-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pp-rail;
}
.pp-rail-list li { margin: 0; }
.pp-rail-list a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--pp-ink-3);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color .15s ease;
  align-items: baseline;
}
.pp-rail-list a:hover { color: var(--pp-ink); }
.pp-rail-num {
  font-family: var(--pp-font-mono);
  font-size: 0.7rem;
  color: var(--pp-faint);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  transition: color .15s ease;
}
.pp-rail-text { display: block; }
.pp-rail-list a.is-active {
  color: var(--pp-ink);
  font-weight: 500;
}
.pp-rail-list a.is-active .pp-rail-num { color: var(--pp-ink); }
.pp-rail-foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pp-rule);
  font-size: 0.78rem;
  color: var(--pp-mute);
  line-height: 1.55;
}
.pp-rail-foot a { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .pp-rail { position: static; padding: 18px 20px; background: var(--pp-cream-2); border: 1px solid var(--pp-rule); border-radius: 14px; }
  .pp-rail-label { padding-bottom: 12px; }
}

/* TLDR */
.pp-tldr {
  background: var(--pp-cream-2);
  border: 1px solid var(--pp-rule);
  border-radius: 18px;
  padding: 28px 32px 30px;
  margin: 0 0 36px;
  position: relative;
}
.pp-tldr::before {
  content: "";
  position: absolute; left: 32px; top: -6px;
  width: 36px; height: 12px;
  background: var(--pp-yellow);
  border-radius: 3px;
}
.pp-tldr-head { margin: 0 0 18px; }
.pp-tldr-kicker {
  font-family: var(--pp-font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pp-ink);
  font-weight: 600;
  margin: 0;
}
.pp-tldr-sub {
  font-family: var(--pp-font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--pp-mute);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}
.pp-tldr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  padding-top: 18px;
  border-top: 1px solid var(--pp-rule);
}
@media (max-width: 640px) { .pp-tldr-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.pp-tldr-h {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--pp-ink-2);
  display: flex; align-items: center; gap: 8px;
}
.pp-tldr-h::before {
  content: ""; width: 14px; height: 2px; background: var(--pp-ink);
}
.pp-tldr-list {
  list-style: none;
  margin: 0; padding: 0;
}
.pp-tldr-list li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--pp-ink-2);
  border-bottom: 1px dashed var(--pp-rule);
}
.pp-tldr-list li:last-child { border-bottom: 0; }
.pp-tldr-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.pp-tldr-do li::before {
  background: var(--pp-yellow);
  border: 1.5px solid var(--pp-ink);
}
.pp-tldr-dont li::before {
  background: var(--pp-cream);
  border: 1.5px solid var(--pp-ink);
}
.pp-tldr-dont li::after {
  content: "";
  position: absolute;
  left: 3px; top: 22px;
  width: 8px; height: 1.5px;
  background: var(--pp-ink);
}

/* Applies-to bar */
.pp-applies {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--pp-ink-3);
  margin: 0 0 56px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--pp-rule);
  border-bottom: 1px solid var(--pp-rule);
}
.pp-applies-tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pp-ink);
  background: var(--pp-yellow);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: 2px;
}
.pp-applies a { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* SECTIONS */
.pp-section {
  margin: 0 0 56px;
  scroll-margin-top: 96px;
}
.pp-section-eyebrow {
  font-family: var(--pp-font-sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--pp-mute);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pp-rule);
}
.pp-h2 {
  font-family: var(--pp-font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  color: var(--pp-ink);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0;
  align-items: baseline;
}
.pp-numeral {
  font-family: var(--pp-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pp-mute);
  font-feature-settings: "tnum";
  transform: translateY(-2px);
}
.pp-h3 {
  font-family: var(--pp-font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 36px 0 14px;
  color: var(--pp-ink);
}
.pp-p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--pp-ink-2);
  margin: 0 0 14px;
  max-width: 64ch;
}
.pp-p a, .pp-list a, .pp-deflist a, .pp-region a, .pp-foot a, .pp-contact-card a {
  color: var(--pp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pp-faint);
  transition: text-decoration-color .15s ease;
}
.pp-p a:hover, .pp-list a:hover, .pp-deflist a:hover, .pp-region a:hover, .pp-foot a:hover, .pp-contact-card a:hover {
  text-decoration-color: var(--pp-ink);
}

/* lists */
.pp-list {
  list-style: none;
  margin: 6px 0 14px;
  padding: 0;
}
.pp-list li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pp-ink-2);
  border-bottom: 1px solid var(--pp-rule-soft);
  max-width: 70ch;
}
.pp-list li:last-child { border-bottom: 0; }
.pp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 10px; height: 1px;
  background: var(--pp-ink);
}
.pp-list--never li::before { background: var(--pp-red); height: 2px; }
.pp-list--vendors li strong { color: var(--pp-ink); font-weight: 600; letter-spacing: -0.01em; }

.pp-pull {
  font-family: var(--pp-font-serif);
  font-size: 1.18rem;
  line-height: 1.5;
  font-style: italic;
  font-weight: 400;
  color: var(--pp-ink);
  letter-spacing: -0.012em;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--pp-ink);
  max-width: 56ch;
}

/* TABLE */
.pp-table-wrap {
  margin: 22px 0 8px;
  border: 1px solid var(--pp-ink);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 720px) {
  .pp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-family: var(--pp-font-sans);
  min-width: 640px;
}
.pp-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pp-mute);
  padding: 14px 16px;
  background: var(--pp-cream-2);
  border-bottom: 1px solid var(--pp-ink);
  vertical-align: middle;
  white-space: nowrap;
}
.pp-table tbody th,
.pp-table tbody td {
  padding: 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--pp-rule);
  line-height: 1.5;
  color: var(--pp-ink-2);
  font-size: 0.93rem;
}
.pp-table tbody th {
  font-weight: 600;
  text-align: left;
  color: var(--pp-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pp-table tbody tr:last-child th,
.pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table tbody tr:hover { background: var(--pp-cream-2); }
.pp-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--pp-cream-2);
  border: 1px solid var(--pp-rule);
  color: var(--pp-ink-3);
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: 1px;
}
.pp-tag--public {
  background: var(--pp-yellow);
  border-color: var(--pp-ink);
  color: var(--pp-ink);
  font-weight: 600;
  margin-left: 0;
}

/* Definition list (retention) */
.pp-deflist {
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--pp-rule);
}
.pp-deflist > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pp-rule);
}
@media (max-width: 640px) {
  .pp-deflist > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}
.pp-deflist dt {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--pp-ink);
  letter-spacing: -0.005em;
}
.pp-deflist dd {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--pp-ink-2);
}

/* Regional rights */
.pp-regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 14px 0 0;
}
@media (max-width: 820px) { .pp-regions { grid-template-columns: 1fr; } }
.pp-region {
  background: #fff;
  border: 1px solid var(--pp-rule);
  border-radius: 14px;
  padding: 18px 20px 20px;
}
.pp-region-tag {
  font-family: var(--pp-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pp-ink);
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pp-rule);
}
.pp-region p:last-child {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--pp-ink-2);
}

/* Contact card */
.pp-contact-card {
  background: var(--pp-ink);
  color: #fff;
  border-radius: 18px;
  padding: 8px 28px;
  margin: 14px 0 0;
}
.pp-contact-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}
.pp-contact-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .pp-contact-row { grid-template-columns: 1fr; gap: 4px; } }
.pp-contact-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin: 0;
}
.pp-contact-value {
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  color: #fff;
}
.pp-contact-card a {
  color: var(--pp-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,252,162,0.45);
  font-weight: 500;
}
.pp-contact-card a:hover { text-decoration-color: var(--pp-yellow); }

/* footer of doc */
.pp-foot {
  margin: 64px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--pp-rule);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--pp-mute);
}
.pp-foot p { margin: 0 0 4px; }

/* back to top */
.pp-top {
  position: fixed; right: 22px; bottom: 24px;
  background: var(--pp-ink); color: #fff;
  border: 0; border-radius: 999px;
  padding: 10px 16px; font-size: 0.86rem;
  font-family: var(--pp-font-sans);
  cursor: pointer; z-index: 9997;
  box-shadow: 0 8px 24px rgba(22,22,15,0.18);
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.pp-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* small-screen H2 numerals collapse */
@media (max-width: 540px) {
  .pp-h2 { grid-template-columns: 44px 1fr; }
  .pp-numeral { font-size: 0.72rem; }
}

/* ===== PRINT ===== */
@media print {
  .blog-navbar, .supfooter, .footer-main, .pp-progress, .pp-top, .pp-skip, .pp-rail, .pp-print {
    display: none !important;
  }
  .pp-body { background: #fff !important; color: #000 !important; }
  .pp-shell { max-width: none; padding: 0; margin: 0; }
  .pp-grid { display: block; }
  .pp-masthead { border-top: 2px solid #000; padding: 14px 0 12px; margin-bottom: 22px; }
  .pp-masthead::after { background: #000; }
  .pp-eyebrow, .pp-section-eyebrow, .pp-rail-label, .pp-tldr-kicker, .pp-tldr-h, .pp-region-tag, .pp-contact-label, .pp-metarow dt {
    color: #000 !important;
  }
  .pp-title { color: #000; font-size: 30pt; line-height: 1.05; }
  .pp-title em { color: #000; }
  .pp-lede { color: #1a1a1a; font-size: 11pt; }
  .pp-metarow { border-color: #000; }
  .pp-meta-cell { border-color: #000 !important; }
  .pp-tldr { background: #fff !important; border: 1px solid #000; box-shadow: none; }
  .pp-tldr::before { background: #000; }
  .pp-tldr-list li { border-bottom: 1px dashed #888; color: #000; }
  .pp-tldr-do li::before, .pp-tldr-dont li::before { background: #fff; border-color: #000; }
  .pp-applies { border-color: #000; color: #000; }
  .pp-applies-tag { background: #000; color: #fff; }
  .pp-section { page-break-inside: auto; margin-bottom: 22px; }
  .pp-section-eyebrow { border-color: #000; }
  .pp-h2, .pp-h3 { color: #000; page-break-after: avoid; break-after: avoid; }
  .pp-numeral { color: #555; }
  .pp-p, .pp-list li, .pp-deflist dd, .pp-region p { color: #1a1a1a; }
  .pp-list li { border-color: #ccc; }
  .pp-list li::before { background: #000; }
  .pp-pull { font-family: Georgia, serif; border-color: #000; color: #000; }
  .pp-table-wrap { border: 1px solid #000; box-shadow: none; }
  .pp-table thead th { background: #f2f2f2 !important; color: #000; border-color: #000; }
  .pp-table tbody th, .pp-table tbody td { border-color: #ccc; color: #1a1a1a; }
  .pp-table tbody tr:hover { background: transparent !important; }
  .pp-tag { background: #fff; border: 1px solid #888; color: #000; }
  .pp-tag--public { background: #000; color: #fff; border-color: #000; }
  .pp-region { background: #fff; border-color: #000; }
  .pp-deflist > div { border-color: #ccc; }
  .pp-deflist dt { color: #000; }
  .pp-contact-card { background: #fff !important; color: #000 !important; border: 1px solid #000; padding: 0 22px; }
  .pp-contact-row { border-color: #ccc; }
  .pp-contact-card a, .pp-contact-value { color: #000 !important; }
  .pp-foot { color: #000; border-color: #000; }
  a { color: #000 !important; }
  a[href^="http"]:after, a[href^="mailto:"]:after { content: " (" attr(href) ")"; font-size: 0.78em; color: #555; word-break: break-all; }
  .pp-rail-list a[href^="#"]:after, .pp-applies a[href^="#"]:after { content: ""; }
}

/* ===== CARD PAGE FIXES ===== */
/* Fix 1: "Inside the app" illustration. Source image is 1893x1539, but the
   actual phone artwork only occupies the bbox (1013,146)→(1802,1023) — i.e.
   ~42% width × ~57% height in the upper-right corner. Rendering the whole
   canvas with `object-fit: contain` therefore makes the phone look tiny and
   off-center. Crop into the phone region with `object-view-box`, then use
   the cropped intrinsic aspect (789/877 ≈ 0.9) so the element sizes to the
   phone's real proportions. Falls back gracefully on browsers without
   object-view-box (older Safari): same image, slightly larger box. */
.card-page .card-appshot-visual { padding: 0; min-height: 0; }
.card-page .card-appshot-visual::before {
  inset: 4%;
  filter: blur(50px);
  background: radial-gradient(ellipse at 55% 55%, rgba(29,29,27,0.18), transparent 65%);
}
.card-page .card-appshot-visual img {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 789 / 877;
  object-fit: cover;
  /* Crop to the actual phone bbox inside the source image. Format is
     inset(top right bottom left). 1539-1023=516 → 33.53% from bottom; 146 →
     9.49% from top; 1893-1802=91 → 4.81% from right; 1013 → 53.51% from left. */
  object-view-box: inset(9.49% 4.81% 33.53% 53.51%);
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 28px 46px rgba(20,20,18,0.22));
  transform: none;
}
/* Fallback for browsers that don't support object-view-box: use object-position
   on a cover crop with the full source aspect, biased to upper-right. */
@supports not (object-view-box: inset(0)) {
  .card-page .card-appshot-visual img {
    aspect-ratio: 789 / 877;
    object-fit: cover;
    object-position: 88% 18%;
  }
}
@media (max-width: 860px) {
  .card-page .card-appshot-visual { padding: 0; }
  .card-page .card-appshot-visual img {
    max-width: 300px;
  }
}

/* Fix 2: "The math" — the balance value ($10,000) and "you'd earn in a year"
   value ($500) were rendering near-invisible (#3a3a35 dark body color) on the
   near-black calculator gradient. The global `.nr-section p` rule beats the
   `.card-calc-big` / `.card-calc-amount` color (equal-class specificity but
   later in cascade), forcing body color. Restore brand yellow at higher
   specificity and bump weight for legibility. */
.card-page .nr-section .card-calc .card-calc-amount,
.card-page .nr-section .card-calc-amount {
  /* Restore brand yellow + display scale; `.nr-section p { font-size: 1rem }`
     was rendering the $10,000 balance as tiny grey body text. */
  color: var(--n-y) !important;
  font-family: var(--n-font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  margin: 0 0 18px !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.card-page .nr-section .card-calc .card-calc-big,
.card-page .nr-section .card-calc-big {
  color: var(--n-y) !important;
  font-family: var(--n-font-display);
  font-size: clamp(2.8rem, 5.4vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
/* "BALANCE" / "You'd earn in a year" eyebrow labels — push to higher contrast
   white so the two POP numbers are clearly framed. */
.card-page .card-calc .card-calc-label,
.card-page .card-calc .card-calc-result-label {
  color: rgba(255,255,255,0.85) !important;
}
/* Sub-copy under the big number — bump from 0.62 to 0.82 white for readability */
.card-page .card-calc .card-calc-sub { color: rgba(255,255,255,0.82); }
/* "Same balance at your bank" comparison row — make the strong $ values pure white */
.card-page .card-calc-compare { color: rgba(255,255,255,0.78); }
.card-page .card-calc-compare strong { color: #fff; font-weight: 700; }

/* =====================================================================
   CARD PAGE — Tier-1 elevation pass (May 2026)
   Hero ambient layers · editorial chapter marks · pull-quote connectors
   calculator sparkline + live tick · sticky waitlist pill · audit banner
   ===================================================================== */

/* ---- Hero ambient backdrop: gradient mesh + diagonal hairline grid + drifting blob + film grain ---- */
.card-page .nr-hero { position: relative; isolation: isolate; }
.card-page .card-hero-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden; mix-blend-mode: normal;
}
.card-page .card-hero-ambient > span { position: absolute; inset: 0; display: block; }
.card-page .card-hero-ambient .cha-grid {
  background-image:
    linear-gradient(115deg, rgba(20,20,18,0.05) 1px, transparent 1px),
    linear-gradient(65deg,  rgba(20,20,18,0.04) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse at 70% 35%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 35%, black 0%, transparent 75%);
}
.card-page .card-hero-ambient .cha-mesh {
  background:
    radial-gradient(ellipse 60% 40% at 78% 28%, rgba(255,252,162,0.42), transparent 65%),
    radial-gradient(ellipse 45% 35% at 18% 70%, rgba(255,252,162,0.18), transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 95%, rgba(20,20,18,0.06), transparent 70%);
  filter: blur(2px);
}
.card-page .card-hero-ambient .cha-blob {
  width: 520px; height: 520px; left: 60%; top: 12%;
  background: radial-gradient(circle, rgba(255,252,162,0.55), transparent 62%);
  filter: blur(70px);
  animation: cha-drift 18s ease-in-out infinite alternate;
  inset: auto;
}
@keyframes cha-drift {
  0%   { transform: translate3d(-30px, -10px, 0) scale(1);    opacity: 0.7; }
  50%  { transform: translate3d(40px, 20px, 0) scale(1.08);   opacity: 0.85; }
  100% { transform: translate3d(-20px, 30px, 0) scale(0.95);  opacity: 0.65; }
}
.card-page .card-hero-ambient .cha-grain {
  background-image:
    radial-gradient(rgba(20,20,18,0.10) 0.6px, transparent 0.6px),
    radial-gradient(rgba(20,20,18,0.07) 0.5px, transparent 0.5px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  opacity: 0.18; mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  .card-page .card-hero-ambient .cha-blob { animation: none; }
}
@media (max-width: 720px) {
  .card-page .card-hero-ambient .cha-blob { width: 320px; height: 320px; left: 50%; top: 5%; }
  .card-page .card-hero-ambient .cha-grid { background-size: 36px 36px, 36px 36px; }
}

/* ---- Hero copy: vertical hairline rule + chapter mark + Issue stamp ---- */
.card-page .card-hero-copy { position: relative; padding-left: 18px; }
@media (max-width: 720px) { .card-page .card-hero-copy { padding-left: 14px; } }
.card-page .card-hero-rule {
  position: absolute; left: 0; top: 6px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--n-ink) 16%, var(--n-ink) 84%, transparent);
  opacity: 0.32;
}
.card-page .card-hero-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--n-font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-muted);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.card-page .card-hero-mark::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5;
}
.card-page .card-hero-stamp {
  position: absolute; top: 24px; right: 28px; z-index: 2;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(20,20,18,0.18);
  border-radius: 100px;
  background: rgba(255,253,244,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--n-font-display);
  pointer-events: none;
}
.card-page .card-hero-stamp span {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--n-muted); font-weight: 700;
}
.card-page .card-hero-stamp strong {
  font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--n-ink); font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .card-page .card-hero-stamp { top: 12px; right: 14px; padding: 6px 10px; }
  .card-page .card-hero-stamp strong { font-size: 0.8rem; }
}

/* ---- Hero stage: presentation floor + light reflection ---- */
.card-page .card-hero-stage::after {
  content: ""; position: absolute;
  left: 50%; bottom: 4%; transform: translateX(-50%);
  width: 80%; height: 14px;
  background: radial-gradient(ellipse at center, rgba(20,20,18,0.30), transparent 65%);
  filter: blur(10px);
  z-index: 0; pointer-events: none;
}
.card-page #cardHeroImg { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; }

/* ---- Editorial chapter marks on every section eyebrow ---- */
.card-page .nr-section__eyebrow .card-chap,
.card-page .card-stack-eyebrow .card-chap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 4px;
  margin-right: 12px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--n-font-display);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.card-page .nr-section--dark .nr-section__eyebrow .card-chap { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.7); }

/* ---- Editorial pull-quote connector between sections ---- */
.card-page .card-pullquote {
  background: var(--n-cream);
  border-top: 1px solid var(--n-hair);
  border-bottom: 1px solid var(--n-hair);
  padding: 70px 24px;
  position: relative;
}
.card-page .card-pullquote::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 64px; height: 2px; background: var(--n-y);
}
.card-page .card-pullquote__inner {
  max-width: 880px; margin: 0 auto; padding-left: 28px; position: relative;
}
.card-page .card-pullquote__rule {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--n-y);
  border-radius: 2px;
}
.card-page .card-pullquote p {
  font-family: var(--n-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--n-ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.card-page .card-pullquote p em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, rgba(255,252,162,0.85) 60%);
  padding: 0 4px;
  font-weight: 700;
}
.card-page .card-pullquote footer {
  font-family: var(--n-font-display);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-muted);
}
@media (max-width: 720px) {
  .card-page .card-pullquote { padding: 48px 18px; }
  .card-page .card-pullquote__inner { padding-left: 20px; }
}

/* ---- Calculator: sparkline behind big number + cents column + live tick ---- */
.card-page .card-calc-result { position: relative; overflow: hidden; }
.card-page .card-calc-spark {
  position: absolute;
  left: 0; right: 0; bottom: 28%;
  width: 100%; height: 70px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.card-page .card-calc-spark .ccs-line {
  filter: drop-shadow(0 0 6px rgba(255,252,162,0.35));
}
.card-page .card-calc-result > * { position: relative; z-index: 1; }
.card-page .card-calc-big {
  display: inline-flex; align-items: baseline; gap: 2px;
  text-shadow: 0 0 28px rgba(255,252,162,0.22);
}
.card-page .card-calc-cents {
  font-size: 0.52em;
  font-weight: 600;
  opacity: 0.78;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.card-page .card-calc-tick {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 14px;
  font-family: var(--n-font);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
}
.card-page .card-calc-tick span#calcTick {
  color: var(--n-y); font-weight: 600; min-width: 12ch; display: inline-block;
}
.card-page .card-calc-tick .ctk-dot {
  width: 7px; height: 7px; border-radius: 100px; background: var(--n-y);
  box-shadow: 0 0 0 4px rgba(255,252,162,0.18);
  animation: ctk-pulse 1.4s ease-in-out infinite;
}
@keyframes ctk-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,252,162,0.18); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px rgba(255,252,162,0.06); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .card-page .card-calc-tick .ctk-dot { animation: none; }
}
.card-page .card-calc-why {
  margin: 16px 0 18px;
  padding: 14px 16px 14px 18px;
  border-left: 2px solid var(--n-y);
  background: rgba(255,252,162,0.06);
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.card-page .card-calc-why .ccw-mark {
  color: var(--n-y); font-weight: 700; margin-right: 6px;
}
.card-page .card-calc-why strong { color: var(--n-y); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Slider thumb: yellow glow halo + tooltip on drag */
.card-page .card-calc input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(255,252,162,0.18), 0 0 22px rgba(255,252,162,0.5);
}
.card-page .card-calc input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 9px rgba(255,252,162,0.22), 0 0 32px rgba(255,252,162,0.7);
}

/* ---- Audits-in-progress banner inside Security section ---- */
.card-page .card-audit-banner {
  display: flex; align-items: center; gap: 18px;
  margin: 28px 0 8px;
  padding: 18px 22px;
  background: rgba(255,252,162,0.06);
  border: 1px solid rgba(255,252,162,0.22);
  border-radius: 12px;
  position: relative;
}
.card-page .card-audit-banner .cab-pulse {
  width: 10px; height: 10px; flex-shrink: 0; position: relative;
}
.card-page .card-audit-banner .cab-pulse span {
  position: absolute; inset: 0; border-radius: 100px;
  background: var(--n-y);
  box-shadow: 0 0 0 4px rgba(255,252,162,0.22);
  animation: cab-pulse 2.2s ease-in-out infinite;
}
@keyframes cab-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,252,162,0.20); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(255,252,162,0.05); transform: scale(1.15); }
}
.card-page .card-audit-banner .cab-body { flex: 1; min-width: 0; }
.card-page .card-audit-banner .cab-body strong {
  display: block;
  font-family: var(--n-font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--n-y); margin-bottom: 4px;
}
.card-page .card-audit-banner .cab-body span {
  display: block;
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem; line-height: 1.5;
}
.card-page .card-audit-banner .cab-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--n-font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--n-y); text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255,252,162,0.32);
  border-radius: 100px;
  transition: background .2s, border-color .2s;
}
.card-page .card-audit-banner .cab-link:hover {
  background: rgba(255,252,162,0.1);
  border-color: var(--n-y);
}
@media (prefers-reduced-motion: reduce) {
  .card-page .card-audit-banner .cab-pulse span { animation: none; }
}
@media (max-width: 640px) {
  .card-page .card-audit-banner { flex-wrap: wrap; padding: 14px 16px; }
  .card-page .card-audit-banner .cab-link { margin-left: 28px; }
}

/* ---- Sticky waitlist pill — slides in past hero ---- */
.card-page .card-stickycta {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 200;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 6px;
  background: rgba(20,20,18,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  box-shadow: 0 18px 40px -12px rgba(20,20,18,0.45), 0 0 0 1px rgba(255,252,162,0.08);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s;
  pointer-events: none;
}
.card-page .card-stickycta[data-state="visible"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.card-page .card-stickycta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--n-y);
  color: var(--n-ink);
  border-radius: 100px;
  font-family: var(--n-font-display);
  font-weight: 700; font-size: 0.92rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.card-page .card-stickycta__btn:hover { background: #fff584; transform: translateX(-2px); }
.card-page .card-stickycta__dot {
  width: 7px; height: 7px; border-radius: 100px; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.22);
  animation: ctk-pulse 1.6s ease-in-out infinite;
}
.card-page .card-stickycta__close {
  background: transparent; border: 0;
  width: 28px; height: 28px; border-radius: 100px;
  color: rgba(255,255,255,0.55);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s;
  margin-right: 4px;
}
.card-page .card-stickycta__close:hover { color: #fff; background: rgba(255,255,255,0.06); }
@media (prefers-reduced-motion: reduce) {
  .card-page .card-stickycta { transition: opacity .2s; transform: none; }
  .card-page .card-stickycta__dot { animation: none; }
}
@media (max-width: 600px) {
  .card-page .card-stickycta { right: 12px; bottom: 12px; }
  .card-page .card-stickycta__btn { padding: 9px 14px; font-size: 0.86rem; }
}

/* ---- Scroll progress side-rail ---- */
.card-page .card-progress-rail {
  position: fixed;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 14px 8px;
  font-family: var(--n-font-display);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.card-page .card-progress-rail[data-visible="true"] { opacity: 1; }
.card-page .card-progress-rail__track {
  width: 1px; height: 110px;
  background: rgba(20,20,18,0.18);
  position: relative;
}
.card-page .card-progress-rail__fill {
  position: absolute; left: 0; top: 0; width: 1px;
  background: var(--n-ink);
  height: var(--cpf, 0%);
  transition: height .12s linear;
}
.card-page .card-progress-rail__pct { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }
@media (max-width: 1100px) {
  .card-page .card-progress-rail { display: none; }
}

/* ---- Comparison table: nicer Yes/No marks ---- */
.card-page .card-compare .ok::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-right: 8px; vertical-align: -2px;
  border-radius: 100px;
  background: radial-gradient(circle, #0c8a3c 35%, transparent 36%),
              radial-gradient(circle, transparent 50%, rgba(12,138,60,0.15) 51%);
  background-size: 100% 100%, 100% 100%;
}
.card-page .card-compare .bad::before {
  content: "×"; display: inline-block; margin-right: 8px;
  font-size: 1.05rem; color: var(--n-quiet); font-weight: 700;
  vertical-align: -1px;
}

/* ---- "↳ continued below" hint at end of long sections ---- */
.card-page .card-cont-hint {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 36px;
  font-family: var(--n-font-display);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-muted);
}
.card-page .card-cont-hint::before,
.card-page .card-cont-hint::after {
  content: ""; flex: 0 0 32px; height: 1px; background: currentColor; opacity: 0.4;
}

/* =====================================================================
   CARD PAGE — TIER-1 FLAGSHIP ELEVATION (v3, May 2026)
   Anti-AI-slop: editorial typography, bento-grid feature wall,
   layered "inside the app" composition, scoreboard calculator,
   battle-card comparison, cinematic security constellation,
   full-bleed dark waitlist with yellow orb, premium spec rows.
   Yellow used as punctuation, not wallpaper.
   ===================================================================== */

/* --- Display typography refinement: tighter tracking, italic emphasis --- */
.card-page .nr-section__title {
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.card-page .nr-hero h1 {
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.card-page .nr-hero h1 em {
  font-style: italic;
  font-weight: 700;
}

/* --- Hero: scroll-linked subtle parallax wrapper --- */
.card-page .card-hero-stage { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.card-page .card-hero-stage[data-parallax] {
  transform: translateY(var(--parallax-y, 0)) translateX(var(--parallax-x, 0));
}
/* Hero — add fine engraved corner marks (editorial registration crosses) */
.card-page .nr-hero__inner::before,
.card-page .nr-hero__inner::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 1px solid rgba(20,20,18,0.18); pointer-events: none; z-index: 5;
}
.card-page .nr-hero__inner::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.card-page .nr-hero__inner::after  { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
@media (max-width: 720px) {
  .card-page .nr-hero__inner::before,
  .card-page .nr-hero__inner::after { display: none; }
}

/* --- Hero live ticker badge, replaces "Variable APY" plain text --- */
.card-page .card-hero-badge--earn .chb-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- BENTO FEATURE WALL — replaces uniform 3x2 with an asymmetric bento --- */
.card-page .card-features {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  .card-page .card-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .card-page .card-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 460px) {
  .card-page .card-features { grid-template-columns: 1fr; }
}
.card-page .card-feature {
  grid-column: span 2; grid-row: span 1;
  padding: 28px 28px 26px;
  border-radius: var(--n-radius-lg);
  background: #fff;
  border: 1px solid var(--n-hair);
}
/* Bento sizing: 1 wide-tall hero tile, 1 wide tile, 4 standard */
.card-page .card-feature:nth-child(1) {
  grid-column: span 4; grid-row: span 2;
  background: linear-gradient(165deg, #1d1d1b 0%, #232321 60%, #1d1d1b 100%);
  color: #fff; border-color: #1d1d1b;
  position: relative; overflow: hidden;
  padding: 36px 36px 32px;
}
.card-page .card-feature:nth-child(1) h3 { color: #fff; font-size: 1.5rem; }
.card-page .card-feature:nth-child(1) p { color: rgba(255,255,255,0.74); font-size: 1.02rem; max-width: 46ch; }
.card-page .card-feature:nth-child(1) svg { stroke: var(--n-y); width: 56px; height: 56px; }
.card-page .card-feature:nth-child(1)::before { background: var(--n-y); }
.card-page .card-feature:nth-child(1)::after {
  content: ""; position: absolute; right: -120px; top: -100px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,252,162,0.28), transparent 60%);
  filter: blur(40px); pointer-events: none; opacity: 0.9;
}
/* live mini-stat tile inside the hero feature */
.card-page .card-feature--hero-stats {
  position: absolute; right: 36px; bottom: 32px; z-index: 2;
  display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px;
  font-family: var(--n-font-display);
}
.card-page .card-feature--hero-stats .fhs-n {
  display: block; font-size: 1.6rem; font-weight: 800; color: var(--n-y);
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.card-page .card-feature--hero-stats .fhs-l {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 2px;
}
@media (max-width: 1024px) {
  .card-page .card-feature:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .card-page .card-feature--hero-stats { position: static; margin-top: 22px; }
}
@media (max-width: 720px) {
  .card-page .card-feature:nth-child(1) { grid-column: span 2; grid-row: auto; padding: 28px 24px; }
}
/* Tile 2: wide top-right */
.card-page .card-feature:nth-child(2) {
  grid-column: span 2; grid-row: span 1;
  background: var(--n-cream);
  border-color: rgba(20,20,18,0.08);
}
.card-page .card-feature:nth-child(2)::before { background: var(--n-ink); }
/* Tile 3: tall right tile */
.card-page .card-feature:nth-child(3) {
  grid-column: span 2; grid-row: span 1;
}
.card-page .card-feature:nth-child(3) svg { stroke: var(--n-y-deep, #b89a00); }
/* Tile 4-6: standard 2-col tiles */
.card-page .card-feature:nth-child(4),
.card-page .card-feature:nth-child(5),
.card-page .card-feature:nth-child(6) {
  grid-column: span 2; grid-row: span 1;
}
@media (max-width: 1024px) {
  .card-page .card-feature:nth-child(n) { grid-column: span 2; }
}
@media (max-width: 720px) {
  .card-page .card-feature:nth-child(n) { grid-column: span 1; }
}
/* tile content sizing tweak */
.card-page .card-feature h3 { font-size: 1.1rem; letter-spacing: -0.02em; }
.card-page .card-feature p { font-size: 0.94rem; line-height: 1.55; }

/* --- "Inside the app" — layered composition (phone + floating UI snippet + receipt) --- */
.card-page .card-appshot { gap: 80px; }
.card-page .card-appshot-visual { perspective: 1400px; }
.card-page .card-appshot-stack {
  position: relative;
  width: 100%; max-width: 520px;
  aspect-ratio: 1/1.05;
  margin: 0 auto;
}
.card-page .card-appshot-stack img {
  position: absolute; inset: 0; margin: auto;
  width: 78%; height: auto;
  z-index: 2;
  filter: drop-shadow(0 36px 60px rgba(20,20,18,0.28));
  transform: rotate(-3deg);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.card-page .card-appshot-stack:hover img { transform: rotate(-1.5deg) translateY(-6px); }
/* Floating UI snippet — yield ticker card */
.card-page .card-appshot-snippet {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--n-hair);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 22px 40px -16px rgba(20,20,18,0.32), 0 2px 8px rgba(20,20,18,0.06);
  font-family: var(--n-font-display);
  width: 220px;
  animation: cas-float 6.5s ease-in-out infinite;
  transform: rotate(2deg);
}
.card-page .card-appshot-snippet--top { top: 6%; right: -3%; animation-delay: 0s; }
.card-page .card-appshot-snippet--bot { bottom: 4%; left: -4%; animation-delay: 1.4s; transform: rotate(-3deg); }
.card-page .card-appshot-snippet .cas-eyebrow {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--n-muted); font-weight: 600; display: block; margin-bottom: 6px;
}
.card-page .card-appshot-snippet .cas-num {
  font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--n-ink); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.card-page .card-appshot-snippet .cas-num small { font-size: 0.78rem; color: var(--n-muted); font-weight: 600; }
.card-page .card-appshot-snippet .cas-bar {
  height: 4px; border-radius: 100px; background: var(--n-cream);
  margin-top: 10px; overflow: hidden; position: relative;
}
.card-page .card-appshot-snippet .cas-bar::after {
  content: ""; position: absolute; inset: 0; width: 78%;
  background: linear-gradient(90deg, var(--n-y-deep, #f6dd4a), var(--n-y));
  border-radius: 100px;
}
.card-page .card-appshot-snippet--bot .cas-num { color: #0c8a3c; }
.card-page .card-appshot-snippet--bot .cas-num::before {
  content: "+"; color: #0c8a3c; font-weight: 800;
}
@keyframes cas-float {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
.card-page .card-appshot-snippet--bot { animation-name: cas-float-bot; }
@keyframes cas-float-bot {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card-page .card-appshot-snippet { animation: none !important; }
}
@media (max-width: 860px) {
  .card-page .card-appshot { gap: 32px; }
  .card-page .card-appshot-stack { max-width: 380px; aspect-ratio: 1/1.1; }
  .card-page .card-appshot-snippet { width: 180px; padding: 12px 14px; }
  .card-page .card-appshot-snippet--top { right: -5%; }
  .card-page .card-appshot-snippet--bot { left: -5%; }
}
@media (max-width: 460px) {
  .card-page .card-appshot-snippet--top { top: 0; right: 0; transform: rotate(0); }
  .card-page .card-appshot-snippet--bot { bottom: 0; left: 0; transform: rotate(0); width: 160px; }
}

/* --- Calculator — scoreboard "battle" feel, big delta number that breathes --- */
.card-page .card-calc {
  background:
    radial-gradient(ellipse 90% 60% at 0% 100%, rgba(255,252,162,0.08), transparent 55%),
    linear-gradient(140deg, #15151a 0%, #0e0e10 60%, #0a0a0c 100%);
  border: 1px solid rgba(255,252,162,0.08);
  position: relative;
}
.card-page .card-calc::before {
  content: "";
  position: absolute; inset: 1px; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 60px);
  pointer-events: none;
  mask-image: linear-gradient(180deg, black, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 80%);
}
.card-page .card-calc-result {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,252,162,0.14), transparent 65%),
    rgba(255,252,162,0.04);
  border: 1px solid rgba(255,252,162,0.18);
  position: relative;
}
/* delta pulse */
.card-page .card-calc-gap-label strong {
  position: relative; display: inline-block; padding: 0 4px;
  animation: ccgap-pulse 2.6s ease-in-out infinite;
}
@keyframes ccgap-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255,252,162,0); transform: scale(1); }
  50%      { text-shadow: 0 0 18px rgba(255,252,162,0.55); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .card-page .card-calc-gap-label strong { animation: none; } }
/* "Yearly gap" reframed as scoreboard delta */
.card-page .card-calc-gap-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.68rem !important; letter-spacing: 0.16em !important;
}
.card-page .card-calc-gap-label strong {
  font-family: var(--n-font-display);
  font-size: 1.4rem; font-weight: 800;
  color: var(--n-y); letter-spacing: -0.02em;
}
.card-page .card-calc-gap-label strong::before {
  content: "+"; font-weight: 800; margin-right: 1px;
}

/* --- Comparison table → battle-card visual weight --- */
.card-page .card-compare {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; position: relative;
}
.card-page .card-compare::before {
  content: "VS"; position: absolute; top: 64px; left: 50%;
  transform: translate(-50%, 0);
  font-family: var(--n-font-display);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--n-ink); opacity: 0.32;
  background: var(--n-cream); padding: 2px 10px; border-radius: 100px;
  border: 1px solid rgba(20,20,18,0.08); z-index: 2;
}
.card-page .card-compare table {
  background: #fff; border: 1px solid var(--n-hair);
  border-radius: var(--n-radius-lg); overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(20,20,18,0.18);
}
.card-page .card-compare thead th {
  padding: 22px 24px 18px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
}
.card-page .card-compare thead th:nth-child(2) {
  border-bottom: 2px solid rgba(20,20,18,0.08);
}
.card-page .card-compare thead th.n-col {
  background: linear-gradient(180deg, var(--n-y), #f6dd4a);
  color: var(--n-ink); font-weight: 700;
  border-bottom: 2px solid var(--n-ink);
  position: relative;
}
.card-page .card-compare thead th.n-col::after {
  content: "★"; position: absolute; top: 8px; right: 14px;
  color: var(--n-ink); opacity: 0.5; font-size: 0.7rem;
}
.card-page .card-compare tbody th {
  font-family: var(--n-font-display);
  font-weight: 600; color: var(--n-ink); font-size: 0.96rem;
}
.card-page .card-compare tbody td.bad {
  color: var(--n-quiet); position: relative; padding-left: 38px;
}
.card-page .card-compare tbody td.bad::before {
  content: "✕"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 100px;
  background: rgba(20,20,18,0.06); color: var(--n-quiet);
  font-size: 0.62rem; display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.card-page .card-compare tbody td.n-col {
  position: relative; padding-left: 42px;
  background: linear-gradient(90deg, rgba(255,252,162,0.42), rgba(255,252,162,0.22));
}
.card-page .card-compare tbody td.n-col::before {
  content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 100px;
  background: var(--n-ink); color: var(--n-y);
  font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.card-page .card-compare tbody td.n-col .ok { color: var(--n-ink); font-weight: 700; }

/* --- Dark security: cinematic constellation, deeper black, satellite shards --- */
.card-page .nr-section--dark {
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255,252,162,0.07), transparent 65%),
    radial-gradient(ellipse 60% 45% at 10% 95%, rgba(255,252,162,0.04), transparent 70%),
    #0c0c0e;
}
.card-page .nr-section--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 82% 18%, rgba(255,252,162,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 64% 84%, rgba(255,252,162,0.55), transparent 60%),
    radial-gradient(1px 1px at 50% 12%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 56%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 6% 56%, rgba(255,252,162,0.4), transparent 60%);
  opacity: 0.85;
  z-index: 0;
}
.card-page .nr-section--dark > * { position: relative; z-index: 1; }
/* enhanced shield — bigger glow, multi-ring */
.card-page .card-shield-wrap {
  filter: drop-shadow(0 0 60px rgba(255,252,162,0.16));
}
.card-page .card-shield-wrap::before {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,162,0.18), transparent 60%);
  filter: blur(26px); pointer-events: none; z-index: 0;
}
.card-page .card-shield-wrap svg { position: relative; z-index: 1; }
/* dark cards inside security */
.card-page .nr-section--dark .nr-card {
  background: linear-gradient(170deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.card-page .nr-section--dark .nr-card:hover {
  border-color: rgba(255,252,162,0.28);
  transform: translateY(-2px);
}
.card-page .nr-section--dark .nr-card .nr-ico {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,252,162,0.1); border: 1px solid rgba(255,252,162,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--n-y);
}
.card-page .nr-section--dark .nr-card .nr-ico svg { width: 20px; height: 20px; }

/* --- Spec sheet: per-row icon, code chips, smooth height --- */
.card-page .card-spec summary { gap: 16px; padding-left: 14px; border-left: 1px solid transparent; transition: border-color .2s, padding-left .25s; }
.card-page .card-spec[open] summary { border-left-color: var(--n-y); padding-left: 18px; }
.card-page .card-spec-body { padding-left: 14px; }
.card-page .card-spec[open] .card-spec-body { padding-left: 18px; }
.card-page .card-spec summary .spec-tag { transition: background .2s, color .2s; }
.card-page .card-spec[open] summary .spec-tag { background: var(--n-ink); color: var(--n-y); border-color: var(--n-ink); }
.card-page .card-spec-body code {
  background: linear-gradient(180deg, #fff, var(--n-cream));
  border-color: rgba(20,20,18,0.1);
  font-weight: 600; color: var(--n-ink);
  padding: 2px 8px;
}

/* --- FAQ: subtle hover lift, code chip styling for emphasized words --- */
.card-page .card-faq-item summary { transition: padding-left .25s, color .15s; }
.card-page .card-faq-item:hover summary { padding-left: 6px; }
.card-page .card-faq-item[open] summary { color: var(--n-ink); }
.card-page .card-faq-item p { padding-left: 0; }
.card-page .card-faq-item[open] p { padding-left: 0; }

/* --- Waitlist CTA: convert from full yellow band to dark moment with yellow halo --- */
.card-page .nr-section--yellow#waitlist {
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,252,162,0.22), transparent 65%),
    linear-gradient(180deg, #15151a 0%, #0a0a0c 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 100px 28px;
}
.card-page .nr-section--yellow#waitlist::before {
  content: ""; position: absolute;
  width: 720px; height: 720px; border-radius: 50%;
  left: 50%; top: 100%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,252,162,0.32), rgba(255,252,162,0.05) 40%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.card-page .nr-section--yellow#waitlist::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1px 1px at 84% 22%, rgba(255,252,162,0.5), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 84%, rgba(255,252,162,0.45), transparent 60%);
  z-index: 0;
}
.card-page .nr-section--yellow#waitlist > * { position: relative; z-index: 1; }
.card-page .nr-section--yellow#waitlist .nr-section__eyebrow {
  color: rgba(255,252,162,0.85);
}
.card-page .nr-section--yellow#waitlist .nr-section__eyebrow .card-chap,
.card-page .nr-section--yellow#waitlist .card-chap {
  border-color: rgba(255,252,162,0.4); color: rgba(255,252,162,0.9);
}
.card-page .nr-section--yellow#waitlist h2 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.card-page .nr-section--yellow#waitlist h2 em {
  font-style: italic;
  background: linear-gradient(180deg, #fffca2, #f6dd4a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline;
}
.card-page .nr-section--yellow#waitlist .nr-section__lede {
  color: rgba(255,255,255,0.74);
  font-size: 1.08rem;
}
.card-page .nr-section--yellow#waitlist .card-waitform {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,252,162,0.08) inset;
}
.card-page .nr-section--yellow#waitlist .card-waitform input {
  color: #fff;
}
.card-page .nr-section--yellow#waitlist .card-waitform input::placeholder { color: rgba(255,255,255,0.4); }
.card-page .nr-section--yellow#waitlist .card-waitform button {
  background: var(--n-y);
  color: var(--n-ink);
  font-weight: 700;
  box-shadow: 0 0 28px rgba(255,252,162,0.4);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.card-page .nr-section--yellow#waitlist .card-waitform button:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 38px rgba(255,252,162,0.6);
}
.card-page .nr-section--yellow#waitlist .card-wait-meta {
  color: rgba(255,255,255,0.5);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
/* trust strip below waitlist form */
.card-page .card-waitlist-strip {
  margin: 36px auto 0;
  max-width: 720px;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 14px 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--n-font-display);
  font-size: 0.84rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-page .card-waitlist-strip span {
  display: inline-flex; align-items: center; gap: 8px;
}
.card-page .card-waitlist-strip span::before {
  content: ""; width: 5px; height: 5px; border-radius: 100px;
  background: var(--n-y); box-shadow: 0 0 8px rgba(255,252,162,0.6);
}

/* --- Hero CTA form on light bg: keep clean, but tighten shadow & focus --- */
.card-page .nr-hero .card-waitform {
  box-shadow: 0 18px 50px -22px rgba(20,20,18,0.28), 0 1px 0 rgba(255,255,255,0.5) inset;
}

/* --- Hero — second-tier "stat trio" bar replacing the trust chip row visual feel --- */
.card-page .card-stack-row {
  position: relative;
}

/* --- Pull-quote: bigger editorial display, italic, single yellow accent --- */
.card-page .card-pullquote p {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-style: italic;
}
.card-page .card-pullquote p em {
  font-style: italic; font-weight: 700;
  background: linear-gradient(120deg, transparent 0 8%, rgba(255,252,162,0.85) 8% 92%, transparent 92% 100%);
  padding: 0 4px;
}

/* --- Showcase mini-cards: bump tactile materials --- */
.card-page .mini-card.metal {
  background:
    linear-gradient(135deg, #2c2c2a 0%, #1a1a18 50%, #2c2c2a 100%);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.card-page .mini-card.metal::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  pointer-events: none;
}
.card-page .mini-card.yellow {
  background:
    linear-gradient(135deg, #fffca2 0%, #f6dd4a 100%);
  box-shadow:
    0 24px 50px -16px rgba(214,184,38,0.45),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative; overflow: hidden;
}
.card-page .mini-card.yellow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  pointer-events: none;
}

/* --- Section eyebrow: add subtle mini chapter affordance --- */
.card-page .nr-section__eyebrow .card-chap {
  font-variant-numeric: tabular-nums;
}

/* --- "How it works" flow nodes: adopt softer hover, tighter type --- */
.card-page .card-flow-node h3 { font-size: 1.08rem; letter-spacing: -0.02em; }
.card-page .card-flow-node p { font-size: 0.9rem; }

/* --- Where it works (DL) — premium grid --- */
.card-page .card-where {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 32px; border-top: 1px solid var(--n-hair);
}
.card-page .card-where > div {
  padding: 24px 24px 24px 0; border-bottom: 1px solid var(--n-hair);
  border-right: 1px solid var(--n-hair);
  position: relative;
}
.card-page .card-where > div:last-child { border-right: 0; }
.card-page .card-where dt {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--n-muted); font-weight: 600; margin-bottom: 8px;
}
.card-page .card-where dd {
  font-family: var(--n-font-display);
  font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; color: var(--n-ink);
  margin: 0;
}
@media (max-width: 720px) {
  .card-page .card-where { grid-template-columns: repeat(2, 1fr); }
  .card-page .card-where > div:nth-child(2) { border-right: 0; }
}

/* --- Sticky CTA pill: tighten and elevate --- */
.card-page .card-stickycta__btn {
  background: var(--n-ink); color: #fff;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,252,162,0.12) inset;
}

/* --- Reduced motion safety --- */
@media (prefers-reduced-motion: reduce) {
  .card-page .card-feature:nth-child(1)::after { animation: none; }
  .card-page .card-appshot-stack img { transition: none; }
  .card-page .card-calc-gap-label strong { animation: none; }
}

/* ===== /CARD PAGE elevation pass v3 ===== */

/* ============================================================
   CARD PAGE — TIER-1 FLAGSHIP ELEVATION (v4, May 2026)
   Editorial masthead, specular reflection, live ticker,
   noise-grain dark sections, asymmetric testimonials,
   second accent (deep ink-blue), refined micro-interactions.
   ============================================================ */

.card-page {
  /* Second accent — used as italic underline + pull-quote separators */
  --n-ink-blue: #1a2b4f;
  --n-ink-blue-soft: #2c3e6f;
  --n-paper-grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* --- Editorial masthead band — anchored inside hero below floating nav --- */
.card-page .nr-hero { position: relative; }
.card-page .card-masthead {
  position: absolute;
  top: 80px; /* sits below the floating nav cluster */
  left: 0; right: 0;
  z-index: 5;
  padding: 0;
  pointer-events: none;
}
.card-page .card-masthead::after {
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,20,18,0.16) 12%, rgba(20,20,18,0.16) 88%, transparent);
}
.card-page .card-masthead__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--n-font-display, "SF Pro Display"), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20,20,18,0.7);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-page .card-masthead__inner > * { pointer-events: auto; }
@media (max-width: 1100px) {
  .card-page .card-masthead { top: 70px; }
  .card-page .card-masthead__inner { padding: 0 36px 10px; }
}
@media (max-width: 720px) {
  .card-page .card-masthead { top: 64px; }
  .card-page .card-masthead__inner { padding: 0 20px 8px; }
}
.card-page .cm-mark {
  width: 18px; height: 18px;
  background: var(--n-ink, #111);
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  position: relative;
  flex-shrink: 0;
}
.card-page .cm-mark-dot {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 6px; height: 6px;
  background: var(--n-y, #fffca2);
  border-radius: 50%;
  border: 1px solid var(--n-ink, #111);
}
.card-page .cm-issue strong { color: var(--n-ink, #111); font-weight: 700; letter-spacing: 0.16em; }
.card-page .cm-tag { font-style: italic; text-transform: none; letter-spacing: 0.01em; font-weight: 400; color: rgba(20,20,18,0.55); font-size: 12px; }
.card-page .cm-rule { width: 28px; height: 1px; background: rgba(20,20,18,0.22); flex-shrink: 0; }
.card-page .cm-rule--flex { flex: 1; }
.card-page .cm-meta { display: inline-flex; align-items: center; gap: 6px; }
.card-page .cm-meta--rate { color: rgba(20,20,18,0.78); }
.card-page .cm-meta--rate strong { color: var(--n-ink, #111); font-weight: 700; letter-spacing: 0.04em; }
.card-page .cm-rate-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  animation: cmRatePulse 2.4s ease-in-out infinite;
}
@keyframes cmRatePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0.06); }
}
@media (max-width: 900px) {
  .card-page .card-masthead__inner { padding: 10px 18px; gap: 10px; font-size: 10px; }
  .card-page .cm-meta--lat, .card-page .cm-tag { display: none; }
  .card-page .cm-rule { width: 16px; }
}
@media (max-width: 560px) {
  .card-page .cm-meta:last-child { display: none; }
}

/* --- Hero: refined micro-typography --- */
.card-page .card-hero-mark {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em !important;
}
/* Hero italic word — soften with ink-blue underline accent */
.card-page .nr-hero h1 em,
.card-page .card-h1 em {
  position: relative;
  color: var(--n-ink, #111);
  font-style: normal;
  font-weight: inherit;
  white-space: nowrap;
  background: linear-gradient(transparent 64%, rgba(255,252,162,0.85) 64% 92%, transparent 92%);
  padding: 0 2px;
}

/* --- "You hold the keys." — final-clause italic emphasis in ink-blue --- */
.card-page .card-hero-keys {
  font-style: italic;
  font-weight: 600;
  color: var(--n-ink-blue);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* --- Live accruing yield ticker (hero) --- */
.card-page .card-hero-ticker {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 9px 14px 9px 30px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--n-hair, #eeeee5);
  border-radius: 100px;
  font-family: var(--n-font-display);
  font-size: 0.84rem;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px -4px rgba(20,20,18,0.06);
}
.card-page .card-hero-ticker .cht-label {
  color: rgba(20,20,18,0.6);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.card-page .card-hero-ticker .cht-value {
  color: var(--n-ink, #111);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  min-width: 11ch;
  text-align: right;
  display: inline-block;
}
.card-page .card-hero-ticker .cht-unit {
  color: rgba(20,20,18,0.5);
  font-size: 0.78rem;
  font-weight: 500;
}
.card-page .card-hero-ticker .cht-pulse {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  animation: cmRatePulse 1.8s ease-in-out infinite;
}
@media (max-width: 480px) {
  .card-page .card-hero-ticker { font-size: 0.75rem; padding: 8px 12px 8px 26px; }
  .card-page .card-hero-ticker .cht-label { display: none; }
}

/* --- Cohort count micro-copy --- */
.card-page .cwm-cohort {
  color: var(--n-ink, #111);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  padding-left: 16px;
}
.card-page .cwm-cohort::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--n-ink-blue);
  border-radius: 50%;
}

/* --- Hero stage: specular reflection layer (cursor-tracked) --- */
.card-page .card-hero-stage {
  position: relative;
}
.card-page .card-hero-spec {
  position: absolute;
  inset: 8% 4% 8% 4%;
  z-index: 3;
  pointer-events: none;
  border-radius: 24px;
  background: radial-gradient(
    circle at var(--spec-x, 50%) var(--spec-y, 30%),
    rgba(255,255,255,0.55) 0%,
    rgba(255,252,162,0.18) 18%,
    transparent 42%
  );
  mix-blend-mode: screen;
  opacity: var(--spec-on, 0);
  transition: opacity .35s ease;
  filter: blur(8px);
}
/* Hairline corner brackets — editorial framing marks */
.card-page .card-hero-bracket {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.5;
}
.card-page .card-hero-bracket::before,
.card-page .card-hero-bracket::after {
  content: "";
  position: absolute;
  background: var(--n-ink, #111);
}
.card-page .card-hero-bracket::before { width: 100%; height: 1px; }
.card-page .card-hero-bracket::after  { width: 1px; height: 100%; }
.card-page .card-hero-bracket--tl { top: 6%;  left: 4%;  }
.card-page .card-hero-bracket--tl::before { top: 0; left: 0; }
.card-page .card-hero-bracket--tl::after  { top: 0; left: 0; }
.card-page .card-hero-bracket--tr { top: 6%;  right: 4%; }
.card-page .card-hero-bracket--tr::before { top: 0; right: 0; }
.card-page .card-hero-bracket--tr::after  { top: 0; right: 0; }
.card-page .card-hero-bracket--bl { bottom: 6%; left: 4%; }
.card-page .card-hero-bracket--bl::before { bottom: 0; left: 0; }
.card-page .card-hero-bracket--bl::after  { bottom: 0; left: 0; }
.card-page .card-hero-bracket--br { bottom: 6%; right: 4%; }
.card-page .card-hero-bracket--br::before { bottom: 0; right: 0; }
.card-page .card-hero-bracket--br::after  { bottom: 0; right: 0; }
@media (max-width: 900px) {
  .card-page .card-hero-bracket { display: none; }
}

/* --- "Inside the app" + dark sections: subtle paper-grain overlay --- */
.card-page .nr-section--dark {
  position: relative;
}
.card-page .nr-section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--n-paper-grain-url);
  background-size: 240px 240px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.card-page .nr-section--dark > * { position: relative; z-index: 1; }

/* Stronger hairline top/bottom on dark section for editorial frame */
.card-page .nr-section--dark {
  border-top: 1px solid rgba(255,252,162,0.06);
  border-bottom: 1px solid rgba(255,252,162,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

/* --- Calculator: tighter premium feel, gradient-text headline figure --- */
.card-page .card-calc-big {
  background: linear-gradient(180deg, #fffca2 0%, #f6dd4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(255,252,162,0.18);
  position: relative;
}
/* live ticker mini-line under calc result (already exists; just give it tabular nums) */
.card-page .card-calc-result .card-calc-live,
.card-page .card-calc-result .card-calc-tick { font-variant-numeric: tabular-nums !important; }

/* --- Trust strip ("THE STACK"): hairline + tabular nums --- */
.card-page .card-stack {
  border-bottom: 1px solid var(--n-hair);
}
.card-page .card-stack-row { font-variant-numeric: tabular-nums; }

/* --- "How it works" flow nodes: sequenced reveal --- */
/* Stagger reveal — original CSS expected an .is-revealed class that the
   IntersectionObserver never sets (it sets .is-in). Nodes were stuck at
   opacity:0 forever. Now use .is-in (which IS set) and keep .is-revealed
   as a future-compatible alias. Initial state still hidden so the
   reveal animation plays on scroll-in. */
.card-page .card-flow[data-stagger] .card-flow-node { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.card-page .card-flow[data-stagger].is-in .card-flow-node,
.card-page .card-flow[data-stagger].is-revealed .card-flow-node { opacity: 1; transform: translateY(0); }
.card-page .card-flow[data-stagger].is-in .card-flow-node:nth-child(2),
.card-page .card-flow[data-stagger].is-revealed .card-flow-node:nth-child(2) { transition-delay: .12s; }
.card-page .card-flow[data-stagger].is-in .card-flow-node:nth-child(3),
.card-page .card-flow[data-stagger].is-revealed .card-flow-node:nth-child(3) { transition-delay: .22s; }
.card-page .card-flow[data-stagger].is-in .card-flow-node:nth-child(4),
.card-page .card-flow[data-stagger].is-revealed .card-flow-node:nth-child(4) { transition-delay: .32s; }
.card-page .card-flow[data-stagger].is-in .card-flow-node:nth-child(5),
.card-page .card-flow[data-stagger].is-revealed .card-flow-node:nth-child(5) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .card-page .card-flow[data-stagger] .card-flow-node { opacity: 1; transform: none; }
}

/* --- Testimonials: editorial asymmetric layout w/ lead pull-quote --- */
.card-page .card-testi-lede {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 1.04rem;
}
.card-page .card-testi-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--n-hair);
  border-radius: 100px;
  font-family: var(--n-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,20,18,0.7);
  font-variant-numeric: tabular-nums;
}
.card-page .card-testi-stat::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--n-ink-blue);
}

.card-page .card-testi--editorial .card-testi-track {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .card-page .card-testi--editorial .card-testi-track { grid-template-columns: 1fr; }
}

.card-page .card-testi {
  position: relative;
  background: #fff;
  border: 1px solid var(--n-hair);
  border-radius: 16px;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card-page .card-testi::before {
  content: "";
  position: absolute;
  left: 28px; top: 0;
  width: 32px; height: 2px;
  background: var(--n-ink-blue);
  border-radius: 2px;
}
.card-page .card-testi:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -22px rgba(20,20,18,0.18);
  border-color: rgba(20,20,18,0.14);
}
.card-page .card-testi blockquote {
  margin: 0;
  font-family: var(--n-font-display);
  font-size: 1.02rem;
  line-height: 1.55;
  color: #2a2a25;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.card-page .card-testi--lead {
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
  border-color: rgba(20,20,18,0.1);
  padding: 40px 36px 32px;
}
.card-page .card-testi--lead::before {
  background: var(--n-y, #fffca2);
  width: 48px;
  height: 3px;
}
.card-page .card-testi-mark {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--n-ink-blue);
  display: block;
  margin: 0 0 4px;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: -0.05em;
}
.card-page .card-testi--lead blockquote {
  font-size: clamp(1.18rem, 1.6vw, 1.42rem);
  line-height: 1.4;
  letter-spacing: -0.018em;
  font-weight: 500;
  font-style: normal;
  color: var(--n-ink, #111);
}
.card-page .card-testi--lead blockquote em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(transparent 70%, rgba(255,252,162,0.7) 70% 96%, transparent 96%);
  padding: 0 2px;
}

.card-page .card-testi-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--n-hair);
}
.card-page .card-testi-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--n-y, #fffca2), #f6dd4a);
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(20,20,18,0.18);
}
.card-page .card-testi-avatar::after {
  content: attr(data-letter);
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--n-ink, #111);
  letter-spacing: -0.02em;
}
.card-page .card-testi-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: rgba(20,20,18,0.6);
  line-height: 1.35;
}
.card-page .card-testi-meta strong {
  font-family: var(--n-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--n-ink, #111);
  letter-spacing: -0.01em;
}
.card-page .card-testi-rating {
  display: inline-flex;
  gap: 2px;
}
.card-page .card-testi-rating span {
  width: 11px; height: 11px;
  background: var(--n-y, #fffca2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* --- CTA waitform: refined micro-interaction --- */
.card-page .card-waitform {
  position: relative;
  overflow: hidden;
}
.card-page .card-waitform button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.card-page .card-waitform button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,252,162,0.4) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: -1;
}
.card-page .card-waitform button:hover::after { transform: translateX(110%); }
.card-page .card-waitform button:hover { transform: translateY(-1px) scale(1.01); }

/* --- Comparison table: sticky highlight + tabular nums --- */
.card-page .card-compare table { font-variant-numeric: tabular-nums; }
.card-page .card-compare tbody tr { transition: background .22s; }
.card-page .card-compare tbody tr:hover { background: rgba(255,252,162,0.06); }

/* --- Scroll progress percent + masthead "CARD · ISSUE 01" — tabular --- */
.card-page .card-flowmark,
.card-page .card-progressbar { font-variant-numeric: tabular-nums; }

/* --- Hairline ascii rules between sections — subtle editorial cadence --- */
.card-page .nr-section + .nr-section:not(.nr-section--dark):not(.nr-section--yellow):not(.nr-section--cream)::before {
  content: "";
  display: block;
  max-width: 1320px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,20,18,0.08), transparent);
}

/* --- Section eyebrow: tighter chap stamp + ink-blue dot --- */
.card-page .nr-section__eyebrow {
  font-variant-numeric: tabular-nums;
}
.card-page .nr-section__eyebrow .card-chap {
  font-family: var(--n-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 1px solid rgba(20,20,18,0.18);
  border-radius: 4px;
  color: rgba(20,20,18,0.85);
  background: #fff;
  position: relative;
}

/* --- Reduced motion safety --- */
@media (prefers-reduced-motion: reduce) {
  .card-page .card-hero-spec { display: none; }
  .card-page .cm-rate-dot,
  .card-page .card-hero-ticker .cht-pulse { animation: none; }
}

/* ===== /CARD PAGE TIER-1 FLAGSHIP ELEVATION (v4) ===== */

/* ===== CAREERS PAGE FIXES ===== */
/* Issue 1 — Hero floating cards were being clipped by the stage's overflow:hidden
   and crowded against the centre pulse. Issue 2 — same cards (and the bottom-right
   --d card sitting at right:-8% / bottom:-2%) were getting visually "cut off".
   Fix: enlarge the stage, drop overflow:hidden, give cards real margin from the
   pulse, scale cards down a hair, and pull all four cards safely inside bounds. */
.car-page .car-hero__stage {
  /* let cards breathe — was 480px square with overflow hidden */
  max-width: 520px;
  aspect-ratio: 1 / 1;
  overflow: visible;
  border-radius: 0;
  /* a little inner padding so absolutely-positioned cards have room before the edge */
  padding: 8px;
}

.car-page .car-hero__card {
  /* slightly slimmer + softer shadow so two cards don't visually merge */
  width: 188px;
  padding: 18px 20px;
  box-shadow: 0 14px 36px rgba(125, 119, 0, 0.22);
  /* lift cards above the radial-glow pseudo, but still under the pulse (z:5) */
  z-index: 2;
}

/* Reposition all four cards so they sit fully inside the stage and clear the
   132px pulse in the middle. Stage is ~520px so safe corners = ~6% inset. */
.car-page .car-hero__card--a { top: 4%;   left: 2%;   right: auto; bottom: auto; transform: rotate(-9deg); }
.car-page .car-hero__card--b { top: 4%;   right: 2%;  left: auto;  bottom: auto; transform: rotate(9deg); }
.car-page .car-hero__card--c { bottom: 4%; left: 2%;  right: auto; top: auto;    transform: rotate(8deg); }
.car-page .car-hero__card--d { bottom: 4%; right: 2%; left: auto;  top: auto;    transform: rotate(-9deg); }

/* Hover: keep the lift, drop the rotation, but no longer push cards out of the stage. */
.car-page .car-hero__card:hover { transform: rotate(0deg) translateY(-4px) !important; }

/* Stage hidden below 1024 already; tighten card sizing for the 1024–1180 range
   where the right column gets narrow and cards risk overlapping the pulse. */
@media (max-width: 1180px) and (min-width: 1025px) {
  .car-page .car-hero__stage { max-width: 460px; }
  .car-page .car-hero__card { width: 168px; padding: 16px 18px; }
  .car-page .car-hero__card p { font-size: 11px; }
}
/* ===== /CAREERS PAGE FIXES ===== */

/* ===== SHARED NAV MENU (.nr-nav-menu) — extracted from index.html so every page styles it ===== */
.nr-nav-menu{position:relative;display:flex;align-items:center}
  .nr-nav-menu__toggle{display:flex;align-items:center;gap:5px;background:#242424 !important;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:#fff !important;padding:8px 16px;border-radius:100px;transition:background .2s,color .2s;white-space:nowrap}
  .nr-nav-menu__toggle:hover{background:#242424 !important;color:#fffca2 !important}
  .nr-nav-menu__arrow{transition:transform .2s;flex-shrink:0}
  .nr-nav-menu[data-open] .nr-nav-menu__arrow{transform:rotate(180deg)}
  .nr-nav-menu__panel{position:absolute;top:calc(100% + 12px);right:-167px;background:#fff;border-radius:18px;box-shadow:0 24px 60px -12px rgba(20,20,18,0.18),0 0 0 1px rgba(20,20,18,0.06);padding:0;display:grid;grid-template-columns:280px 1fr;gap:0;z-index:200;width:780px;overflow:hidden;animation:nrMenuIn .22s cubic-bezier(.2,.8,.2,1);transform-origin:top right}
  @keyframes nrMenuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
  .nr-nav-menu__panel[hidden]{display:none!important}
  /* Feature promo (left rail) */
  .nr-nav-menu__feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 28px 26px;background:linear-gradient(155deg,#fffca2 0%,#fff8c0 55%,#fffdf4 100%);text-decoration:none;color:#111;overflow:hidden;isolation:isolate;min-height:240px;transition:background .25s}
  .nr-nav-menu__feature::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,20,18,0.085) 1px,transparent 1px);background-size:14px 14px;opacity:.45;pointer-events:none;z-index:0}
  .nr-nav-menu__feature::after{content:"";position:absolute;left:28px;bottom:calc(26px + 1px + 4em);width:24px;height:1.5px;background:#111;opacity:.85;z-index:2}
  .nr-nav-menu__feature-eyebrow{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#111;background:#fff;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(20,20,18,0.08)}
  .nr-nav-menu__feature-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#111;display:inline-block}
  .nr-nav-menu__feature-h{position:relative;z-index:2;display:block;font-family:var(--n-font-display,"SF Pro Display"),-apple-system,sans-serif;font-size:22px;font-weight:600;line-height:1.13;letter-spacing:-.02em;color:#111;margin:auto 0 6px;text-wrap:balance;max-width:18ch}
  .nr-nav-menu__feature-cta{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#111;letter-spacing:.01em;transition:gap .2s}
  .nr-nav-menu__feature-cta svg{transition:transform .2s}
  .nr-nav-menu__feature:hover{background:linear-gradient(155deg,#fffca2 0%,#fff584 100%)}
  .nr-nav-menu__feature:hover .nr-nav-menu__feature-cta{gap:9px}
  .nr-nav-menu__feature:hover .nr-nav-menu__feature-cta svg{transform:translateX(2px)}
  .nr-nav-menu__feature-art{position:absolute;top:14px;right:-30px;width:140px;height:140px;border-radius:14px;background:linear-gradient(135deg,#111 0%,#1d1d1b 100%);transform:rotate(-12deg);box-shadow:0 18px 40px rgba(20,20,18,0.22);z-index:1}
  .nr-nav-menu__feature-art::before{content:"";position:absolute;inset:14px 16px auto 14px;height:24px;background:linear-gradient(90deg,rgba(255,252,162,.95),rgba(255,252,162,.7));border-radius:4px}
  .nr-nav-menu__feature-art::after{content:"";position:absolute;left:14px;bottom:14px;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,252,162,.6);box-shadow:14px 0 0 -6px rgba(255,252,162,.4)}
  /* Right grid */
  .nr-nav-menu__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:24px 22px 18px}
  .nr-nav-menu__col{display:flex;flex-direction:column;gap:2px;padding:0 12px;border-left:1px solid transparent}
  .nr-nav-menu__col+.nr-nav-menu__col{border-left-color:#f1efe7}
  .nr-nav-menu__cat{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a9587;padding:0 0 10px;margin-bottom:4px;border-bottom:1px solid #f1efe7}
  .nr-nav-menu__link{position:relative;display:block;padding:9px 10px 9px 12px;border-radius:8px;text-decoration:none;color:#111;transition:background .15s;line-height:1.25}
  .nr-nav-menu__link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:#fffca2;opacity:0;transition:opacity .15s}
  .nr-nav-menu__link:hover{background:#fdfcf3}
  .nr-nav-menu__link:hover::before{opacity:1}
  .nr-nav-menu__link-name{display:block;font-size:14px;font-weight:600;letter-spacing:-.005em;color:#111}
  .nr-nav-menu__link-sub{display:block;font-size:11.5px;font-weight:400;color:#7a7567;margin-top:2px;letter-spacing:.005em}
  /* Footer */
  .nr-nav-menu__foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;border-top:1px solid #f1efe7;background:#fdfcf3;font-size:12px;color:#7a7567}
  .nr-nav-menu__status{display:inline-flex;align-items:center;gap:7px;font-weight:500}
  .nr-nav-menu__status-dot{width:7px;height:7px;border-radius:50%;background:#22b268;box-shadow:0 0 0 3px rgba(34,178,104,.18);animation:nrPulseDot 2.4s ease-in-out infinite}
  @keyframes nrPulseDot{0%,100%{box-shadow:0 0 0 3px rgba(34,178,104,.18)}50%{box-shadow:0 0 0 5px rgba(34,178,104,.08)}}
  .nr-nav-menu__foot-link{color:#111;text-decoration:none;font-weight:500}
  .nr-nav-menu__foot-link:hover{text-decoration:underline;text-underline-offset:3px}
  /* Responsive: collapse feature on tighter widths */
  @media (max-width:920px){.nr-nav-menu__panel{width:680px;grid-template-columns:1fr}.nr-nav-menu__feature{display:none}}
/* ===== /SHARED NAV MENU ===== */