/* ═══════════════════════════════════════════════════════════════
   UNTAPPED AGENTS — Global Design System
   Version: 2.0 | March 2026 | Apple-Level Premium
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
}

details summary::-webkit-details-marker {
  display: none;
}

a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ── Tokens ── */
:root {
  --bg0: #FAF8F6;
  --bg1: #F2EEEA;
  --bg2: #E8E3DE;
  --bg3: #DED8D3;
  --bg4: #D0C9C3;
  --bdr: rgba(44, 34, 40, .06);
  --bdrh: rgba(44, 34, 40, .10);
  --td: #9A8E92;
  --tm: #8A7E82;
  --tmd: #7A6E72;
  --tb: #4A3F44;
  --tl: #2C2228;
  --tbr: #2C2228;
  --cy: #9E5261;
  --cyd: rgba(158, 82, 97, .05);
  --cym: rgba(158, 82, 97, .08);
  --cyg: rgba(158, 82, 97, .12);
  --gn: #1a8a5a;
  --gnd: rgba(26, 138, 90, .05);
  --yl: #9a7a18;
  --yld: rgba(154, 122, 24, .05);

  /* ── Z-index ladder — single source of truth for stacking ── */
  --z-sticky: 99;              /* sticky pill / tab / filter bars */
  --z-sticky-summary: 100;     /* pricing sticky summary bar */
  --z-sticky-crumbs: 999;      /* blog sticky breadcrumb bar */
  --z-nav: 1000;               /* fixed site nav */
  --z-nav-burger: 1001;        /* floating hamburger above nav */
  --z-drawer: 1100;            /* slide-out drawer overlay */
  --z-reading-progress: 10001; /* blog reading progress bar */
  --or: #b86020;
  --ord: rgba(184, 96, 32, .05);
  --pk: #b82078;
  --pkd: rgba(184, 32, 120, .05);
  --bl: #2070c0;
  --bld: rgba(32, 112, 192, .05);
  --pr: #6840b8;
  --prd: rgba(104, 64, 184, .05);
  --prm: rgba(104, 64, 184, .08);
  --prg: rgba(104, 64, 184, .12);
  --rd: #c03838;
  --rdd: rgba(192, 56, 56, .05);
}

/* ── Base ── */
html {
  /* Same-page anchor clicks animate via JS (scrollIntoView) so smoothness
     stays exactly where it feels premium; a cross-page hash landing stays
     INSTANT — no smooth fly-down through the whole page on arrival. */
  scroll-behavior: auto;
  /* Anchored sections land flush beneath the pinned bar. 64px is a safe
     fallback that clears any bar; main.js sets the exact per-page height
     at runtime (the homepage's white .hp-tabs bar is ~50px). */
  scroll-padding-top: 64px;
}

body {
  font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-optical-sizing: auto;
  background: var(--bg0);
  color: var(--tb);
  line-height: 1.75;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--cy);
  color: #fff;
}

/* ── Utilities ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Nav ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: none;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, .08);
  transition: padding 0.35s cubic-bezier(.25, 1, .5, 1),
              box-shadow 0.35s cubic-bezier(.25, 1, .5, 1);
  will-change: padding;
}

nav.scrolled {
  padding: 0.6rem 2rem;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, .12),
              0 4px 12px rgba(0, 0, 0, .03);
}

.logo {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tbr);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}

.logo:hover {
  opacity: 0.7;
}

.logo b {
  color: rgba(255,255,255,0.85);
  text-shadow: none;
}

.nv {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
}

.nv a {
  font-family: 'Inter', 'DM Sans', sans-serif;
  color: var(--tmd);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: color 0.2s;
}

.nv a:hover {
  color: var(--tbr);
}

.nv a.act {
  color: var(--pr);
}

.nv .cta {
  background: #1d1d1f;
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  border-radius: 980px;
  font-size: 0.85rem;
  transition: all 0.3s cubic-bezier(.25, 1, .5, 1);
}

.nv .cta:hover {
  background: #0a0a0a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  transform: translateY(-1px);
}

.nv .cta:active {
  transform: translateY(0);
}

/* ── Hamburger ── */
.mbtn {
  display: none;
  background: none;
  border: none;
  color: var(--tl);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mbtn:hover {
  background: rgba(0, 0, 0, .04);
}

.mbtn-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--tl);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(.25, 1, .5, 1);
  transform-origin: center;
}

.mbtn[aria-expanded="true"] .mbtn-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.mbtn[aria-expanded="true"] .mbtn-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mbtn[aria-expanded="true"] .mbtn-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Footer address line — matches .ft-links a typography exactly so the
   address sits visually inline with the email and other links above it. */
.ft-address {
  font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--tmd);
  line-height: 1.45;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Pages that have a sticky section/filter/breadcrumb bar (.tabs on
   studies, .filters on resources, .article-breadcrumb on blog articles)
   make the dark <nav> position:relative so it scrolls away naturally
   with the page. The bar pins at top:0 once nav scrolls off, and the
   hamburger trigger inside the bar reveals at that moment.
   ═══════════════════════════════════════════════════════════════ */
body:has(.tabs) nav,
body:has(.filters) nav,
body:has(.article-breadcrumb) nav { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   Site-nav hamburger + slide-out drawer (homepage only)
   ───────────────────────────────────────────────────────────────
   Simple Linear-style drawer: dark panel, clean rows, no fancy
   grids. Scroll lock is plain `overflow: hidden` on <html> so the
   page never repositions on open/close (no scroll-jump bug).
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger trigger inside whichever sticky bar the page uses ──
   .hp-tabs (homepage), .tabs (research), .filters (resources),
   .article-breadcrumb (blog articles). All position-anchored to
   the bar's right edge, revealed once nav scrolls off. */
.hp-tabs .hh-burger,
.tabs .hh-burger,
.filters .hh-burger,
.article-breadcrumb .hh-burger {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--tl);
  border-radius: 9px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition:
    opacity 220ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 150ms ease;
}
.hp-tabs .hh-burger[data-visible="true"],
.tabs .hh-burger[data-visible="true"],
.filters .hh-burger[data-visible="true"],
.article-breadcrumb .hh-burger[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* ── Hamburger trigger inside the main nav — pricing / agent pages ──
   Pages without a sticky white section bar (pricing, agent landing pages)
   fall back to a hamburger inside the dark nav. Hidden on desktop because
   the nav links (Agents/Pricing/Research/Resources/Get Started) are
   already visible there — adding a hamburger would clutter the bar.
   Shown only on mobile, where the inline nav links are hidden. */
#nav .hh-burger--in-nav {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 0.75rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: currentColor;
  border-radius: 9px;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transition: background-color 150ms ease;
}
#nav .hh-burger--in-nav:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 768px) {
  #nav .hh-burger--in-nav { display: inline-flex; }
}
.hh-burger:hover { background: rgba(44, 34, 40, 0.06); }
.hh-burger:focus-visible { outline: 2px solid var(--tl); outline-offset: 2px; }
.hh-burger svg { display: block; }
.hh-burger .hh-line {
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: 50% 50%;
}
.hh-burger[aria-expanded="true"] .hh-line-top { transform: translateY(2.5px) rotate(45deg); }
.hh-burger[aria-expanded="true"] .hh-line-bot { transform: translateY(-2.5px) rotate(-45deg); }

/* ── Drawer shell ── */
.hh-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.hh-drawer[hidden] { display: none; }

.hh-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.hh-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100vw;
  background: #0b0a1a;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
}

.hh-drawer[data-open="true"] .hh-drawer-backdrop { opacity: 1; }
.hh-drawer[data-open="true"] .hh-drawer-panel    { transform: translateX(0); }
.hh-drawer[data-closing="true"] .hh-drawer-backdrop { transition-duration: 220ms; opacity: 0; }
.hh-drawer[data-closing="true"] .hh-drawer-panel    { transition-duration: 220ms; transform: translateX(100%); }

/* ── Drawer tokens (scoped) ── */
.hh-drawer-panel {
  --hh-fg-primary:   rgba(255, 255, 255, 0.92);
  --hh-fg-secondary: rgba(255, 255, 255, 0.62);
  --hh-fg-label:     rgba(255, 255, 255, 0.40);
  --hh-fg-hover:     #ffffff;
  --hh-divider:      rgba(255, 255, 255, 0.06);
  --hh-ease:         cubic-bezier(0.32, 0.72, 0, 1);
  font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header: logo + close */
.hh-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}
.hh-drawer-logo {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hh-fg-primary);
  text-decoration: none;
  line-height: 1;
}
.hh-drawer-logo b { font-weight: 700; margin-left: 0.18em; }
.hh-drawer-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  color: var(--hh-fg-secondary);
  padding: 0;
  transition: color 160ms var(--hh-ease);
}
.hh-drawer-close:hover { color: var(--hh-fg-hover); }
.hh-drawer-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
.hh-drawer-close svg { display: block; }

/* Body wrapper (scroll container — gives the list room to scroll
   while head + CTA stay pinned) */
.hh-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 24px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.hh-drawer-body::-webkit-scrollbar { width: 6px; }
.hh-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }

/* Lists — plain <ul>, NEVER <nav> (avoids global nav rule) */
.hh-drawer-list,
.hh-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hh-drawer-list .hh-item + .hh-item { margin-top: 2px; }

/* Row — shared base style for parent buttons and child links */
.hh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--hh-fg-primary);
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms var(--hh-ease);
}
.hh-row:hover,
.hh-row:focus-visible { color: var(--hh-fg-hover); }
.hh-row:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Parent (expandable) chevron */
.hh-chev {
  flex-shrink: 0;
  color: var(--hh-fg-secondary);
  transition: transform 220ms var(--hh-ease), color 160ms var(--hh-ease);
}
.hh-row--parent[aria-expanded="true"] .hh-chev {
  transform: rotate(180deg);
  color: var(--hh-fg-hover);
}

/* The expanding panel — CSS grid 0fr → 1fr animation trick.
   No JS height measurement needed; auto-sizes to content. */
.hh-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms var(--hh-ease);
}
.hh-row--parent[aria-expanded="true"] + .hh-panel {
  grid-template-rows: 1fr;
  transition-duration: 220ms;
}
.hh-panel-inner {
  overflow: hidden;
  min-height: 0;
}

/* Sub-list — left rule + indent for hierarchy */
.hh-sublist {
  position: relative;
  margin: 2px 20px 6px;
  padding: 2px 0 4px;
  border-left: 1px solid var(--hh-divider);
}
.hh-row--child {
  padding: 10px 20px 10px 28px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--hh-fg-secondary);
}
.hh-row--child:hover,
.hh-row--child:focus-visible { color: var(--hh-fg-primary); }

/* CTA footer */
.hh-drawer-cta {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--hh-divider);
  flex-shrink: 0;
}
.hh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: #ffffff;
  color: #0a0a0a;
  text-decoration: none;
  border-radius: 10px;
  transition: background 160ms cubic-bezier(0.32, 0.72, 0, 1), transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hh-cta:hover { background: #f0f0f0; }
.hh-cta:active { transform: scale(0.985); }
.hh-cta svg { transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1); }
.hh-cta:hover svg { transform: translateX(3px); }
.hh-cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; }

/* No scroll lock — locking via overflow:hidden or position:fixed breaks
   `position: sticky` on elements like the blog article TOC (the sticky
   context recalculates when the scroll ancestor's overflow changes,
   which makes the TOC vanish while the drawer is open). The backdrop
   covers interaction; users can still scroll the page behind, but that's
   the same trade-off Anthropic / GitHub mobile drawers make. */

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hh-burger,
  .hh-burger .hh-line,
  .hh-drawer-backdrop,
  .hh-drawer-panel,
  .hh-chev,
  .hh-cta svg {
    transition-duration: 0.01ms !important;
  }
}

/* Small-screen panel tweaks */
@media (max-width: 480px) {
  .hh-drawer-panel  { width: 100vw; }
  .hh-drawer-header { padding: 1rem 1.25rem; }
  .hh-drawer-nav    { padding: 0.75rem 0.5rem 1rem; }
}

/* ── Nav Dropdown ── */
.nav-dd {
  position: relative;
}

.nav-dd-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.dd-arrow {
  font-size: 0.55rem;
  transition: transform 0.25s;
  display: inline-block;
}

.nav-dd:hover .dd-arrow,
.nav-dd:focus-within .dd-arrow {
  transform: rotate(180deg);
}

.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 780px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(.16, 1, .3, 1);
  z-index: var(--z-nav-burger);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12),
              0 0 0 0.5px rgba(0, 0, 0, .06);
  border-radius: 16px;
  overflow: visible;
  transform-origin: top center;
}

.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
}

.dd-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.dd-svg {
  display: block;
  color: var(--cy);
}

.dd-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: transparent;
  border-radius: 10px;
  margin: 3px 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.dd-item:hover {
  background: rgba(0, 0, 0, .03);
}

.dd-item:focus {
  background: rgba(0, 0, 0, .03);
  outline: none;
}

.dd-item:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: -2px;
  border-radius: 10px;
}

.dd-item:hover .dd-name {
  color: var(--cy);
}

.dd-num {
  display: none;
}

.dd-icon {
  grid-row: 1 / 3;
  font-size: inherit;
  align-self: center;
  text-align: center;
  color: var(--cy);
}

.dd-name {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tl);
  letter-spacing: -0.01em;
  transition: color 0.2s;
}

.dd-role {
  font-size: 0.65rem;
  color: var(--tmd);
  letter-spacing: 0;
  font-family: 'Inter', 'DM Sans', sans-serif;
  margin-top: 0.1rem;
}

.dd-foot {
  padding: 0.65rem 1rem;
  background: transparent;
  border-top: 0.5px solid rgba(0, 0, 0, .06);
  text-align: center;
}

.dd-all {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--cy);
  text-decoration: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  transition: color 0.2s;
}

.dd-all:hover {
  color: #8A4755;
}

/* ── Layout ── */
section {
  position: relative;
  z-index: 1;
}

.sp {
  padding: 6rem 2rem;
}

.ctr {
  max-width: 1140px;
  margin: 0 auto;
}

/* ── Typography ── */
.sl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: 1rem;
}

.sl::before {
  content: '//';
  opacity: 0.4;
}

.st {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--tbr);
  line-height: 1.35;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 1rem;
}

.sd {
  color: var(--tmd);
  font-size: 1rem;
  max-width: 560px;
  font-weight: 400;
  line-height: 1.7;
}

.shc {
  text-align: center;
  margin-bottom: 4rem;
}

.shc .sd {
  margin: 0 auto;
}

/* ── Buttons ── */
.bp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.25rem;
  background: var(--cy);
  color: #fff;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 980px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0;
  transition: background 0.3s cubic-bezier(.25, 1, .5, 1),
              box-shadow 0.3s cubic-bezier(.25, 1, .5, 1),
              transform 0.3s cubic-bezier(.25, 1, .5, 1);
  will-change: transform;
}

.bp:hover {
  background: #8A4755;
  box-shadow: 0 4px 16px rgba(158, 82, 97, .18);
  transform: translateY(-1px);
}

.bp:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

.bs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.25rem;
  background: transparent;
  color: var(--tl);
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: 980px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0;
  transition: border-color 0.3s cubic-bezier(.25, 1, .5, 1),
              color 0.3s cubic-bezier(.25, 1, .5, 1),
              background 0.3s cubic-bezier(.25, 1, .5, 1),
              transform 0.3s cubic-bezier(.25, 1, .5, 1);
  will-change: transform;
}

.bs:hover {
  border-color: rgba(0, 0, 0, .3);
  color: var(--tbr);
  background: rgba(0, 0, 0, .02);
  transform: translateY(-1px);
}

.bs:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* ── FAQ ── */
.fq {
  border-bottom: 0.5px solid rgba(0, 0, 0, .06);
  background: transparent;
  margin-bottom: 0;
}

.fq summary {
  padding: 1.35rem 0;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  transition: color 0.25s;
  letter-spacing: -0.01em;
}

.fq summary::-webkit-details-marker {
  display: none;
}

.fq summary::marker {
  display: none;
  content: '';
}

.fq summary::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .03) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2.5v7M2.5 6h7' stroke='%237c7c82' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  transition: all 0.35s cubic-bezier(.16, 1, .3, 1);
}

.fq summary:hover {
  color: var(--cy);
}

.fq summary:hover::after {
  background-color: rgba(158, 82, 97, .06);
}

.fq[open] summary::after {
  transform: rotate(45deg);
  background-color: rgba(158, 82, 97, .08);
}

.fq .ans {
  padding: 0 0 1.35rem;
  font-size: 0.95rem;
  color: var(--tmd);
  line-height: 1.75;
  max-width: 600px;
  animation: fqReveal 0.4s cubic-bezier(.16, 1, .3, 1);
}

@keyframes fqReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Footer ── */
footer {
  padding: 2.5rem 2rem;
  border-top: 0.5px solid rgba(0, 0, 0, .06);
  text-align: center;
  background: var(--bg1);
}

footer p {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--td);
}

footer a {
  color: var(--tmd);
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--tbr);
}

/* ── Scroll Reveal ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.25, 1, .5, 1),
              transform 0.6s cubic-bezier(.25, 1, .5, 1);
  will-change: opacity, transform;
}

.rv.vis {
  opacity: 1;
  transform: translateY(0);
}

.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Focus States ── */
a:focus-visible,
.bp:focus-visible,
.bs:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
  border-radius: 8px;
}

input:focus-visible {
  outline: none;
}

/* ── Link Transitions ── */
a {
  transition: color 0.2s;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nv {
    display: none;
  }

  .nv.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, .06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    padding: 1.5rem 2rem;
    gap: 1rem;
  }

  .mbtn {
    display: flex;
  }

  .sp {
    padding: 4rem 1.5rem;
  }

  .nav-dd-menu {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0.5px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    margin-top: 0.5rem;
    display: none;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-dd.mob-open .nav-dd-menu {
    display: block;
  }

  .dd-grid {
    grid-template-columns: 1fr;
  }

  .nav-dd:hover .nav-dd-menu {
    transform: none;
  }

  .dd-item {
    margin: 2px 4px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .sp {
    padding: 3rem 1rem;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .rv-d1, .rv-d2, .rv-d3 {
    transition-delay: 0s !important;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}