/* =============================================
   Ainygo - ElevenLabs warmth + brand blue accent
   Near-white canvas, warm undertones, whisper-thin
   display type, multi-layer sub-0.1 shadows,
   brand blue for primary action and accent.
   ============================================= */

:root {
  /* Surfaces */
  --bg-pure:      #ffffff;
  --bg-light:     #f5f5f5;
  --bg-near:      #f6f6f6;
  --bg-stone:     #f5f2ef;
  --bg-stone-80:  rgba(245, 242, 239, 0.8);

  /* Text */
  --fg-black:     #000000;
  --fg-dark:      #2a2a2a;
  --fg-mid:       #4e4e4e;
  --fg-warm:      #6b655d;

  /* Borders */
  --br-hairline:  #e5e5e5;
  --br-subtle:    rgba(0, 0, 0, 0.06);

  /* Brand */
  --brand-blue:        #1e6ef5;
  --brand-blue-dark:   #0d5ce0;
  --brand-blue-deep:   #083abd;
  --brand-blue-soft:   #e8f0ff;
  --brand-blue-soft-2: #d8e5ff;
  --brand-teal:        #0ea5c9;

  /* Semantic */
  --ok:    #15803d;
  --warn:  #a16207;
  --info:  var(--brand-blue);

  /* Shadows - multi-layer sub-0.1 opacity */
  --sh-inset:     inset 0 0 0 0.5px rgba(0, 0, 0, 0.075);
  --sh-inset-rg:  inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  --sh-ring:      0 0 0 1px rgba(0, 0, 0, 0.06);
  --sh-soft:      0 4px 4px rgba(0, 0, 0, 0.04);
  --sh-card:      0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.04);
  --sh-elev:      0 0 1px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.06);
  --sh-lift:      0 18px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --sh-warm:      0 6px 16px rgba(78, 50, 23, 0.04);
  --sh-blue:      0 10px 24px rgba(30, 110, 245, 0.18), 0 2px 4px rgba(30, 110, 245, 0.12);
  --sh-blue-sm:   0 4px 12px rgba(30, 110, 245, 0.18);
  --sh-edge:      0 0 0 0.5px rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }

/* Prevent horizontal overflow from translated off-screen fixed elements
   (like the mobile drawer at translateX(100%)) from creating a rightward
   scrollable area. `clip` is preferable to `hidden` because it does not
   break position:sticky on descendants. */
html, body { overflow-x: clip; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-pure);
  color: var(--fg-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.14px;
  line-height: 1.6;
  font-weight: 400;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 110, 245, 0.35); border-radius: 4px; }

/* =============== Typography =============== */
.display {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.96px;
  line-height: 1.06;
  color: var(--fg-black);
}
.display-sm {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.13;
  color: var(--fg-black);
}

h1 { font-family: 'Inter', sans-serif; font-weight: 200; line-height: 1.06; letter-spacing: -0.02em; font-size: clamp(40px, 6vw, 80px); margin: 0; color: var(--fg-black); }
h2 { font-family: 'Inter', sans-serif; font-weight: 300; line-height: 1.14; letter-spacing: -0.02em; font-size: clamp(26px, 3.1vw, 41px); margin: 0; color: var(--fg-black); }
h3 { font-family: 'Inter', sans-serif; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; font-size: clamp(22px, 2.4vw, 32px); margin: 0; color: var(--fg-black); }
h4 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0; margin: 0; color: var(--fg-black); }

p  { margin: 0; font-size: 18px; line-height: 1.6; letter-spacing: 0.18px; color: var(--fg-mid); }
.body-lg { font-size: 20px; line-height: 1.55; color: var(--fg-mid); letter-spacing: 0.18px; }
.body-md { font-size: 16px; line-height: 1.55; color: var(--fg-mid); letter-spacing: 0.16px; }
.body-sm { font-size: 15px; line-height: 1.5; color: var(--fg-mid); letter-spacing: 0.15px; }
.caption { font-size: 14px; line-height: 1.5; color: var(--fg-warm); letter-spacing: 0.14px; }
.micro   { font-size: 12px; letter-spacing: 0.05em; color: var(--fg-warm); font-weight: 500; text-transform: uppercase; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.eyebrow-dark { color: var(--fg-dark); }
.eyebrow-warm { color: var(--fg-warm); }

.label-upper {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  line-height: 1.1;
}

.gradient-text {
  background: linear-gradient(135deg, #000 0%, var(--brand-blue) 60%, var(--brand-teal) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============== Layout =============== */
.container-xxl { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.container-xl  { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-lg  { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.container-md  { max-width: 820px;  margin: 0 auto; padding: 0 24px; }
.section      { padding: 120px 0; }
.section-lg   { padding: 160px 0; }
.section-sm   { padding: 72px 0; }
@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .section-lg { padding: 100px 0; }
  .section-sm { padding: 56px 0; }
}

/* =============== Buttons =============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 1;
  border-radius: 9999px;
  padding: 12px 22px;
  border: 0;
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

/* Primary - brand blue pill, hover black */
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  padding: 14px 24px;
  box-shadow: var(--sh-blue), var(--sh-inset);
}
.btn-primary:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sh-elev), var(--sh-inset);
}

/* Primary dark alias */
.btn-dark {
  background: #000;
  color: #fff;
  padding: 14px 22px;
  box-shadow: var(--sh-elev);
}
.btn-dark:hover {
  transform: translateY(-1px);
  background: var(--brand-blue);
  box-shadow: var(--sh-blue);
}

/* Secondary - white pill with shadow border */
.btn-white {
  background: #fff;
  color: #000;
  padding: 14px 22px;
  box-shadow: var(--sh-elev), var(--sh-inset);
}
.btn-white:hover {
  transform: translateY(-1px);
  background: #000;
  color: #fff;
  box-shadow: var(--sh-elev);
}

/* Featured - warm stone pill (the signature) */
.btn-stone {
  background: var(--bg-stone-80);
  color: #000;
  padding: 12px 20px 12px 14px;
  border-radius: 30px;
  box-shadow: var(--sh-warm), var(--sh-inset);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-stone:hover {
  transform: translateY(-1px);
  background: #000;
  color: #fff;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: #000;
  padding: 14px 18px;
}
.btn-ghost:hover { color: var(--brand-blue); }

/* Uppercase CTA label */
.btn-upper {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 14px;
}

.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

/* Icon inside button */
.btn .arr { transition: transform 180ms var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* Blue text link */
.link-blue {
  color: var(--brand-blue);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 160ms var(--ease);
}
.link-blue:hover { color: #000; }
.link-blue .arr { transition: transform 180ms var(--ease); }
.link-blue:hover .arr { transform: translateX(3px); }

/* Fair-use chip: small uppercase tag that anchors to the #faq-unlimited-edits
   explainer. Uses currentColor + opacity so it auto-adjusts on light cards,
   dark featured cards, and compare-table cells without per-context overrides. */
.fair-use-note {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.6;
  background: rgba(127, 127, 127, 0.14);
  border-radius: 999px;
  text-decoration: none;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: opacity 160ms var(--ease), background 160ms var(--ease);
  white-space: nowrap;
}
.fair-use-note:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.24);
}
.plan-card.featured .fair-use-note {
  background: rgba(255, 255, 255, 0.14);
  opacity: 0.85;
}
.plan-card.featured .fair-use-note:hover {
  background: rgba(255, 255, 255, 0.24);
  opacity: 1;
}

/* =============== Cards =============== */
.card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--sh-card);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }

.card-sm   { padding: 24px; border-radius: 16px; }
.card-lg   { padding: 40px; border-radius: 24px; }
.card-flat { box-shadow: var(--sh-inset); }
.card-stone{ background: var(--bg-stone); border-radius: 24px; padding: 40px; box-shadow: var(--sh-warm), var(--sh-inset); }

/* Panel */
.panel-light {
  background: var(--bg-light);
  border-radius: 24px;
  padding: 48px;
}

/* =============== Feature cards (enhanced) =============== */
.feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 36px 32px 32px;
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
}
.feature-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-blue-soft), var(--bg-stone));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-inset), 0 1px 0 rgba(255,255,255,0.5) inset;
  color: var(--brand-blue);
}
.feature-card h3 { color: var(--fg-black); }

/* =============== Form elements =============== */
.field {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--sh-inset);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: var(--fg-black);
  transition: box-shadow 180ms var(--ease);
}
.field:focus { outline: none; box-shadow: var(--sh-inset-rg), 0 0 0 3px rgba(30, 110, 245, 0.25); }

.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-black);
  margin-bottom: 6px;
  letter-spacing: 0.14px;
}

/* =============== Grids =============== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* =============== Navigation =============== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--br-subtle);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 32px; justify-content: space-between;
}
.nav a.nav-link {
  position: relative;
  font-size: 15px; font-weight: 500; letter-spacing: 0.15px;
  color: var(--fg-black);
  padding: 8px 0;
  transition: color 120ms var(--ease);
}
.nav a.nav-link:hover { color: var(--brand-blue); }

/* Active nav link — filled brand-blue label plus a subtle underline sliver.
   The underline is drawn with a positioned ::after so it sits right under the
   text without inflating the click target or shifting adjacent links. */
.nav a.nav-link.is-active { color: var(--brand-blue); font-weight: 600; }
.nav a.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px;
}

/* Portal menu reuses the same .nav > .nav-link structure so the rule above
   already applies, but we spell it out with higher specificity so portal pages
   get the brand-blue label + underline sliver identically to the public pages,
   regardless of cascade order or future scoped overrides. Right-cluster action
   links (Visit site, Support) are scoped out so they never pick up the state. */
.nav .nav-portal-menu a.nav-link.is-active {
  color: var(--brand-blue);
  font-weight: 600;
}
.nav .nav-portal-menu a.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px;
}

.nav-logo-link { display: inline-flex; align-items: center; }
.nav-logo { height: 50px; width: auto; display: block; }

.nav-mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin-right: -6px;
  border-radius: 10px;
  color: var(--fg-black);
  cursor: pointer;
  transition: background-color 150ms var(--ease);
}
.nav-mobile-toggle:hover { background: var(--bg-near); }
@media (max-width: 1024px) {
  .nav-desktop { display: none !important; }
  .nav-mobile-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 8px 18px; gap: 12px; }
  .nav-logo { height: 40px; }
}

/* =============== Mobile slide-in drawer =============== */
.nav-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 20, 24, 0.48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
}
.drawer-fade-enter,
.drawer-fade-leave {
  transition: opacity 260ms var(--ease);
}
.drawer-fade-enter-start,
.drawer-fade-leave-end { opacity: 0; }
.drawer-fade-enter-end,
.drawer-fade-leave-start { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.18), -2px 0 0 rgba(0, 0, 0, 0.04);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  overscroll-behavior: contain;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer-head {
  position: sticky; top: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--br-subtle);
  z-index: 1;
}
.nav-drawer-logo { display: inline-flex; align-items: center; }
.nav-drawer-logo img { height: 38px; width: auto; display: block; }
.nav-drawer-close {
  background: transparent;
  border: 0;
  padding: 10px;
  margin-right: -6px;
  border-radius: 10px;
  color: var(--fg-black);
  cursor: pointer;
  display: inline-flex;
  transition: background-color 150ms var(--ease);
}
.nav-drawer-close:hover { background: var(--bg-near); }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
}
.nav-drawer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--fg-black);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  border-radius: 12px;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.nav-drawer-links a:hover { background: var(--bg-near); color: var(--brand-blue-deep); }
.nav-drawer-links a svg { color: var(--fg-warm); flex-shrink: 0; transition: transform 160ms var(--ease), color 140ms var(--ease); }
.nav-drawer-links a:hover svg { color: var(--brand-blue); transform: translateX(2px); }

/* Active drawer link — soft brand-blue background + stronger text so the
   current page is unmistakable on mobile without screaming at the eye. */
.nav-drawer-links a.is-active {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-weight: 600;
}
.nav-drawer-links a.is-active svg { color: var(--brand-blue); }

.nav-drawer-section {
  padding: 10px 20px 18px;
  border-top: 1px solid var(--br-subtle);
}
.nav-drawer-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-warm);
  font-weight: 600;
  margin-bottom: 10px;
}
.nav-drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-drawer-foot {
  margin-top: auto;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--br-subtle);
  background: #fff;
}

/* Body lock while drawer is open */
body.menu-open { overflow: hidden; }

/* =============== Footer (dark, professional) =============== */
.footer {
  background: #0a0a0a;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 88px 0 32px;
  margin-top: 0;
}
.footer a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  letter-spacing: 0.15px;
  transition: color 160ms var(--ease);
}
.footer a:hover { color: #fff; }
.footer .footer-heading {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer .footer-tagline {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.14px;
  max-width: 30ch;
  margin-top: 18px;
}
.footer .footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14px;
  color: #fff;
  margin-top: 22px;
}
.footer .footer-pill .pill-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.footer hr.divider-soft {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  margin: 64px 0 28px;
}
.footer .caption {
  color: rgba(255, 255, 255, 0.48);
  font-size: 13.5px;
  letter-spacing: 0.14px;
}
.footer .caption a { color: rgba(255, 255, 255, 0.62); }
.footer .caption a:hover { color: #fff; }
.footer .footnote {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  margin-top: 18px;
  max-width: 68ch;
}
.footer .footnote a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; text-underline-offset: 2px; }
.footer .footnote a:hover { color: #fff; }
.footer-logo { height: 50px; width: auto; display: block; }
@media (max-width: 768px) {
  .footer { padding: 64px 0 28px; }
  .footer hr.divider-soft { margin: 44px 0 20px; }
}

/* =============== Announcement bar =============== */
.announce {
  background: var(--bg-stone-80);
  box-shadow: var(--sh-inset);
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.14px;
  color: var(--fg-dark);
}
.announce a { color: var(--fg-black); font-weight: 500; }
.announce a:hover { color: var(--brand-blue); }

/* =============== Utility classes =============== */
.text-black  { color: #000 !important; }
.text-dark   { color: var(--fg-dark); }
.text-mid    { color: var(--fg-mid); }
.text-warm   { color: var(--fg-warm); }
.text-blue   { color: var(--brand-blue); }
.bg-stone    { background: var(--bg-stone); }
.bg-light    { background: var(--bg-light); }
.bg-near     { background: var(--bg-near); }
.bg-pure     { background: var(--bg-pure); }

/* Trust pill (high-visibility) */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14px;
  background: #fff;
  color: var(--fg-black);
  border-radius: 9999px;
  box-shadow: var(--sh-ring), var(--sh-soft);
}
.pill-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--ok); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); }
.pill-blue { background: var(--brand-blue-soft); color: var(--brand-blue-deep); box-shadow: var(--sh-inset); }
.pill-stone { background: var(--bg-stone-80); color: var(--fg-black); box-shadow: var(--sh-inset); }

/* Trust marks row under hero */
.trust-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.14px;
  color: var(--fg-dark);
  background: #fff;
  border-radius: 9999px;
  box-shadow: var(--sh-ring), var(--sh-soft);
}
.trust-chip svg { color: var(--ok); flex-shrink: 0; }
/* Accent variant — use sparingly (hero promo lines). Brand-blue pill with
   white text to visually separate a "big headline" chip from the rest. */
.trust-chip.trust-chip-accent {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--sh-blue-sm);
}
.trust-chip.trust-chip-accent svg { color: #fff; }

/* Asterisk / superscript tightening — keep * snug against anchor words.
   Flex containers (inline-flex with gap) treat <sup> as its own flex item,
   so we pull it back with negative margin where needed. */
sup {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
  color: var(--fg-warm);
  font-weight: inherit;
}
.trust-chip sup,
.fix-price sup,
.check-list li sup,
.contact-info-v sup {
  margin-left: -4px;
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes floatY { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
@keyframes slowPulse { 0%,100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
/* shimmer keyframes removed — unused, and background-position animation was non-composited (flagged by PageSpeed). */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* transform: scaleX is GPU-composited (no layout / paint) — lets the bar animate on the compositor thread and satisfies PageSpeed's "Avoid non-composited animations" audit. */
@keyframes progressFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scanSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
@keyframes tickPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.15) rotate(0); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.fade-in   { animation: fadeUp 0.7s var(--ease) both; }
.fade-in-1 { animation: fadeUp 0.7s var(--ease) both; animation-delay: 80ms; }
.fade-in-2 { animation: fadeUp 0.7s var(--ease) both; animation-delay: 160ms; }
.fade-in-3 { animation: fadeUp 0.7s var(--ease) both; animation-delay: 240ms; }
.float     { animation: floatY 6s ease-in-out infinite; }
.slow-pulse{ animation: slowPulse 2s ease-in-out infinite; }
.reveal    { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
/* `transform: none` once settled so the element stops creating a stacking
   context — otherwise any popover inside (currency dropdown, tooltips) is
   trapped in this context and later siblings like .plan-grid paint over it. */
.reveal.in { opacity: 1; transform: none; }

/* Marquee strip */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 64px; animation: marquee 45s linear infinite; white-space: nowrap; }

/* Check list - blue brand accent */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 16px; line-height: 1.5; letter-spacing: 0.16px; color: var(--fg-dark); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 9999px;
  background: var(--brand-blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 12l5 5 9-11'/></svg>") no-repeat center / 70%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 12l5 5 9-11'/></svg>") no-repeat center / 70%;
}

/* =============== Promise list (high visibility) =============== */
.promise-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.promise-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-ring), var(--sh-soft);
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg-black);
  letter-spacing: 0.14px;
  font-weight: 500;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.promise-list li:hover {
  transform: translateX(4px);
  box-shadow: var(--sh-card), 0 8px 20px rgba(30, 110, 245, 0.08);
}
.promise-list .pl-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30, 110, 245, 0.25);
}

/* =============== Activity feed (hero animated dashboard) =============== */
.dashboard {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sh-lift);
  overflow: hidden;
}
.dashboard-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--br-subtle);
  background: var(--bg-near);
}
.dashboard-bar .dot { width: 10px; height: 10px; border-radius: 9999px; background: #e5e5e5; }
.dashboard-bar .dot-a { background: #f0a5a5; }
.dashboard-bar .dot-b { background: #f0d4a5; }
.dashboard-bar .dot-c { background: #a5d4a5; }
.dashboard-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--fg-warm); margin-left: 12px;
  letter-spacing: 0.06em;
}
.dashboard-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ok);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.dashboard-live .dot-live {
  width: 6px; height: 6px; border-radius: 9999px; background: var(--ok);
  animation: slowPulse 1.6s ease-in-out infinite;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.activity-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-near);
  border-radius: 14px;
  box-shadow: var(--sh-inset);
  opacity: 0;
  animation: slideInLeft 0.6s var(--ease) forwards;
}
.activity-item.done { background: #fff; box-shadow: var(--sh-ring), var(--sh-soft); }
.activity-item.running { background: linear-gradient(90deg, var(--brand-blue-soft), #fff 60%); box-shadow: var(--sh-inset); position: relative; overflow: hidden; }
.activity-item.running::after {
  content: "";
  position: absolute; inset: 0 0 0 0;
  background: linear-gradient(90deg, transparent, rgba(30,110,245,0.12), transparent);
  transform: translateX(-100%);
  width: 30%;
  animation: scanSweep 1.8s linear infinite;
}

.act-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.act-icon.ok   { background: #ecfdf5; color: var(--ok); }
.act-icon.info { background: var(--brand-blue-soft); color: var(--brand-blue); }
.act-icon.warn { background: #fffbeb; color: var(--warn); }
.act-icon.stone{ background: var(--bg-stone); color: var(--fg-dark); }
.act-icon .tick { animation: tickPop 0.5s var(--ease) both; }

.act-body { min-width: 0; z-index: 1; }
.act-title { font-weight: 500; color: var(--fg-black); font-size: 14.5px; letter-spacing: 0.14px; line-height: 1.3; }
.act-meta  { font-size: 12.5px; color: var(--fg-warm); margin-top: 2px; letter-spacing: 0.12px; }
.act-time  {
  font-size: 11px; color: var(--fg-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  white-space: nowrap;
  z-index: 1;
}
.act-progress {
  height: 3px; border-radius: 9999px; background: rgba(30,110,245,0.15);
  margin-top: 6px; overflow: hidden;
}
.act-progress span {
  display: block; height: 100%;
  background: var(--brand-blue);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  animation: progressFill 1.6s var(--ease) forwards;
  will-change: transform;
}

/* ===== Activity grid (full-width hero dashboard) ===== */
.dashboard-wide {
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--sh-lift);
  overflow: hidden;
}
.dashboard-wide .dashboard-bar { padding: 14px 20px; }

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 24px;
}
.activity-tile {
  background: var(--bg-near);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--sh-inset);
  opacity: 0;
  animation: slideInLeft 0.6s var(--ease) forwards;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  min-height: 116px;
}
.activity-tile.done { background: #fff; box-shadow: var(--sh-ring), var(--sh-soft); }
.activity-tile.running {
  background: linear-gradient(135deg, var(--brand-blue-soft) 0%, #fff 70%);
  box-shadow: var(--sh-inset);
}
.activity-tile.running::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(30,110,245,0.14), transparent);
  transform: translateX(-100%);
  width: 40%;
  animation: scanSweep 1.8s linear infinite;
  pointer-events: none;
}
.activity-tile .tile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  z-index: 1; position: relative;
}
.activity-tile .tile-title {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--fg-black);
  letter-spacing: 0.12px;
  line-height: 1.35;
  z-index: 1; position: relative;
}
.activity-tile .tile-meta {
  font-size: 12.5px;
  color: var(--fg-warm);
  letter-spacing: 0.12px;
  z-index: 1; position: relative;
}
.activity-tile .tile-time {
  font-size: 11px;
  color: var(--fg-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .activity-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px; }
}
@media (max-width: 560px) {
  .activity-grid { grid-template-columns: 1fr; }
  .activity-tile { min-height: 0; }
}

/* ===== 2+1 grid (two cards over one full-width card) ===== */
.grid-2-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.grid-2-1 > :last-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .grid-2-1 { grid-template-columns: 1fr; }
  .grid-2-1 > :last-child { grid-column: auto; }
}

/* ===== Section flush to footer ===== */
.section-flush { padding-bottom: 0 !important; }

/* =============== Stats strip (full-width, no card) =============== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--br-hairline);
  border-bottom: 1px solid var(--br-hairline);
}
.stats-strip-item {
  padding: 44px 20px;
  border-right: 1px solid var(--br-hairline);
  text-align: center;
}
.stats-strip-item:last-child { border-right: 0; }
.stats-strip-item .num {
  font-weight: 200;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-black);
}
.stats-strip-item .num em {
  font-style: normal;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats-strip-item .lbl {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-warm);
  font-weight: 600;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip-item { border-right: 0; border-bottom: 1px solid var(--br-hairline); padding: 32px 16px; }
  .stats-strip-item:nth-child(odd) { border-right: 1px solid var(--br-hairline); }
  .stats-strip-item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Legacy stats (kept for any page still referencing it) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.stat-row-item { padding: 28px 20px; border-right: 1px solid var(--br-subtle); text-align: center; }
.stat-row-item:last-child { border-right: 0; }

/* Legacy stat cell - still used elsewhere */
.stat-cell { padding: 24px; background: #fff; border-radius: 14px; box-shadow: var(--sh-card); }
.stat-cell .num { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: #000; }
.stat-cell .num .unit { font-size: 18px; font-weight: 400; color: var(--fg-warm); margin-left: 2px; letter-spacing: 0; }
.stat-cell .lbl { font-size: 13px; color: var(--fg-warm); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }

/* =============== Fix cards (emergency, high visibility) =============== */
.fix-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  overflow: hidden;
}
.fix-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease);
}
.fix-card:hover::before { transform: scaleX(1); }
.fix-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
}
.fix-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.fix-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--sh-inset);
}
.fix-card-price-wrap { text-align: right; }
.fix-card-from {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-warm);
  display: block; margin-bottom: 2px;
}
.fix-card-price {
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-black);
}
.fix-card h4 { font-size: 19px; letter-spacing: -0.005em; color: var(--fg-black); }
.fix-card-body { color: var(--fg-mid); font-size: 14.5px; line-height: 1.5; letter-spacing: 0.14px; }
.fix-card .link-blue { margin-top: auto; padding-top: 4px; font-weight: 600; }

.fix-card-stone {
  background: var(--bg-stone);
  box-shadow: var(--sh-warm), var(--sh-inset);
}
.fix-card-stone .fix-card-icon { background: #fff; color: var(--fg-black); }

/* =============== Timeline (process) =============== */
.timeline {
  position: relative;
  display: grid;
  gap: 28px;
}
.timeline-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: stretch;
  position: relative;
}
.timeline-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}
.timeline-number {
  width: 72px; height: 72px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: var(--sh-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 300;
  font-size: 26px;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
  z-index: 2;
  position: relative;
}
.timeline-number::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-blue-soft), transparent);
  z-index: -1;
  opacity: 0.7;
}
.timeline-row::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 80px;
  bottom: -28px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-blue), rgba(30,110,245,0.1));
  z-index: 1;
}
.timeline-row:last-child::before { display: none; }

.timeline-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: var(--sh-card);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
  position: relative;
}
.timeline-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.timeline-card h4 { font-size: 20px; letter-spacing: -0.005em; }
.timeline-card .tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 9999px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .timeline-row { grid-template-columns: 64px 1fr; gap: 16px; }
  .timeline-number { width: 56px; height: 56px; font-size: 20px; }
  .timeline-row::before { left: 31px; top: 64px; }
  .timeline-card { padding: 22px 24px; }
}

/* =============== Reviews slider =============== */
.reviews-slider-wrap { position: relative; }
.reviews-slider {
  overflow: hidden;
  padding: 8px 4px 24px;
}
.reviews-track {
  display: flex;
  gap: 24px;
  transition: transform 620ms var(--ease);
}
.review-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: #fff;
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.review-card .stars { color: #e8b64e; font-size: 14px; letter-spacing: 0.18em; }
.review-card blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg-dark);
  letter-spacing: 0.14px;
}
.review-card .byline {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--br-subtle);
}
.review-card .avatar {
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-blue-soft), var(--bg-stone));
  box-shadow: var(--sh-inset);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--brand-blue-deep);
}

.slider-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  align-items: center;
}
.slider-btn {
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 0;
  background: #fff;
  box-shadow: var(--sh-card);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-black);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.slider-btn:hover { background: var(--brand-blue); color: #fff; transform: translateY(-1px); }
.slider-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: #fff; color: var(--fg-warm); }
.slider-dots { display: inline-flex; gap: 8px; padding: 0 8px; }
.slider-dots span {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--br-hairline);
  transition: background 180ms var(--ease), width 180ms var(--ease);
}
.slider-dots span.active { background: var(--brand-blue); width: 24px; }

@media (max-width: 900px) {
  .review-card { flex: 0 0 calc(100% - 4px); }
}

/* =============== Audience split (alternating modern) =============== */
.audience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.audience-card {
  padding: 56px 44px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 440px;
  position: relative;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.audience-card:hover { transform: translateY(-4px); }
.audience-card-light {
  background: #fff;
  color: var(--fg-black);
  box-shadow: var(--sh-card);
}
.audience-card-light:hover { box-shadow: var(--sh-lift); }
.audience-card-dark {
  background: linear-gradient(180deg, #111 0%, #000 100%);
  color: #fff;
}
.audience-card-dark:hover { box-shadow: 0 30px 60px rgba(0,0,0,0.25); }
.audience-card-dark .eyebrow { color: rgba(255,255,255,0.6); }
.audience-card-dark .eyebrow-brand { color: var(--brand-blue-soft-2); }
.audience-card-dark p, .audience-card-dark .body-md { color: rgba(255,255,255,0.75); }
.audience-card-dark .check-list li { color: rgba(255,255,255,0.85); }
.audience-card-dark .check-list li::before { background: var(--brand-blue); }
.audience-card-dark .btn-primary:hover { background: #fff; color: #000; }
.audience-card-glow {
  position: absolute;
  inset: auto -20% -40% auto;
  width: 60%; height: 60%;
  background: radial-gradient(circle at center, rgba(30,110,245,0.22), transparent 65%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .audience-split { grid-template-columns: 1fr; }
  .audience-card { min-height: unset; padding: 44px 32px; }
}

/* =============== FAQ single column =============== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 48px auto 0;
}
.faq-item {
  background: #fff;
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--sh-ring), var(--sh-soft);
  cursor: pointer;
  transition: box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.faq-item:hover { box-shadow: var(--sh-card); }
.faq-item.open { box-shadow: var(--sh-card); background: #fff; }
.faq-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.faq-header h4 { font-size: 17px; letter-spacing: 0; color: var(--fg-black); font-weight: 500; }
.faq-toggle {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300; line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.faq-item.open .faq-toggle {
  background: var(--brand-blue);
  color: #fff;
  transform: rotate(45deg);
}
.faq-body {
  margin-top: 12px;
  font-size: 15.5px; line-height: 1.6; letter-spacing: 0.14px;
  color: var(--fg-mid);
}

/* Soft section dividers */
.divider-soft { height: 1px; background: linear-gradient(90deg, transparent, var(--br-hairline), transparent); border: 0; margin: 48px 0; }

/* Hero warm glow + blue glow */
.hero-warm-glow {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(240, 234, 225, 0.7), transparent 60%),
    radial-gradient(ellipse 30% 22% at 18% 32%, rgba(255, 225, 200, 0.28), transparent 60%),
    radial-gradient(ellipse 45% 30% at 85% 18%, rgba(30, 110, 245, 0.10), transparent 60%);
}

/* Accessible skip link */
.skip-link { position: absolute; top: -40px; left: 8px; background: #000; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.skip-link:focus { top: 8px; }

/* =============== Pricing (Apple-style plan cards + toggle) =============== */
.price-toggle {
  display: inline-flex;
  background: #fff;
  border-radius: 9999px;
  padding: 5px;
  box-shadow: var(--sh-card);
  gap: 2px;
}
.price-toggle button {
  font-family: 'Inter', sans-serif;
  border: 0;
  background: transparent;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14px;
  color: var(--fg-dark);
  cursor: pointer;
  border-radius: 9999px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.price-toggle button.active {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--sh-blue-sm);
}
.price-toggle .save-badge {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  text-transform: uppercase;
}
.price-toggle button:not(.active) .save-badge {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}

/* Plan card - premium, Apple-like */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; } }

/* Legacy 4-tier variant kept as a safety net in case an older template
   still references .plan-grid-4. Current pricing page uses .plan-grid for
   the three standard tiers + .plan-card-wide for the flagship tier. */
.plan-grid.plan-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.plan-grid.plan-grid-4 .plan-card { padding: 32px 26px; }
@media (max-width: 1200px) { .plan-grid.plan-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .plan-grid.plan-grid-4 { grid-template-columns: 1fr; } }

/* Flagship tier — wide horizontal card that sits below the 3-up plan grid
   and matches its total width. Left half holds eyebrow + title + sub + price
   + CTA; right half holds the feature checklist in a two-column layout on
   wide screens. Stacks vertically on tablet-down. */
.plan-card-wide {
  background: #fff;
  border-radius: 24px;
  padding: 40px 44px;
  box-shadow: var(--sh-card);
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.plan-card-wide:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.plan-card-wide-left {
  display: flex; flex-direction: column; gap: 20px;
}
.plan-card-wide-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 10px;
}
.plan-card-wide h3 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.plan-card-wide .plan-sub {
  font-size: 14.5px;
  color: var(--fg-warm);
  margin-top: 8px;
  letter-spacing: 0.14px;
  line-height: 1.5;
}
.plan-card-wide .plan-price {
  font-weight: 200;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-black);
  display: flex; align-items: baseline; gap: 6px;
}
.plan-card-wide .plan-price .plan-price-amount {
  font-weight: 200; font-size: 54px; line-height: 1;
  letter-spacing: -0.03em; color: inherit;
  display: inline-flex; align-items: baseline;
}
.plan-card-wide .plan-price .per {
  font-size: 14px; font-weight: 500; color: var(--fg-warm); letter-spacing: 0.12px;
}
.plan-card-wide .plan-yearly-note {
  font-size: 12.5px; color: var(--fg-warm); letter-spacing: 0.12px;
}
.plan-card-wide-cta { width: 100%; }
.plan-card-wide-right { display: flex; align-items: center; }
.plan-card-wide-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  width: 100%;
  margin: 0;
}
/* Tablet: stack halves vertically, keep the two-column feature grid. */
@media (max-width: 980px) {
  .plan-card-wide {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 32px;
  }
  .plan-card-wide-right { align-items: flex-start; }
}
/* Phone: collapse the feature grid to a single column and trim padding. */
@media (max-width: 640px) {
  .plan-card-wide {
    padding: 28px 24px;
    border-radius: 20px;
    gap: 22px;
  }
  .plan-card-wide h3 { font-size: 22px; }
  .plan-card-wide .plan-price { font-size: 44px; }
  .plan-card-wide .plan-price .plan-price-amount { font-size: 44px; }
  .plan-card-wide-features {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}

.plan-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.plan-card.featured {
  background: #0a0a0a;
  color: #fff;
  border: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
}
.plan-card.featured h3 { color: #fff; }
.plan-card.featured p, .plan-card.featured .plan-body { color: rgba(255,255,255,0.72); }
.plan-card.featured .plan-sub { color: rgba(255,255,255,0.56); }
.plan-card.featured .check-list li { color: rgba(255,255,255,0.88); }
.plan-card.featured .check-list li::before { background: var(--brand-blue); }
.plan-card.featured .plan-price { color: #fff; }
.plan-card.featured .plan-price .per { color: rgba(255,255,255,0.52); }
.plan-card.featured .plan-divider { background: rgba(255,255,255,0.1); }
.plan-card .plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand-blue);
  color: #fff;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--sh-blue-sm);
}
.plan-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.plan-card .plan-sub { font-size: 14px; color: var(--fg-warm); margin-top: 8px; letter-spacing: 0.14px; line-height: 1.5; }
.plan-card .plan-price {
  font-weight: 200;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-black);
  display: flex; align-items: baseline; gap: 6px;
}
.plan-card .plan-price .currency { font-size: 22px; font-weight: 400; transform: translateY(-14px); color: var(--fg-warm); }
.plan-card .plan-price .plan-price-amount { font-weight: 200; font-size: 54px; line-height: 1; letter-spacing: -0.03em; color: inherit; display: inline-flex; align-items: baseline; }
.plan-card .plan-price .per { font-size: 14px; font-weight: 500; color: var(--fg-warm); letter-spacing: 0.12px; }
.plan-card .plan-yearly-note { font-size: 12.5px; color: var(--fg-warm); letter-spacing: 0.12px; }
.plan-card .plan-divider { height: 1px; background: var(--br-hairline); border: 0; margin: 6px 0; }
.plan-card .plan-body { font-size: 14.5px; color: var(--fg-mid); line-height: 1.55; letter-spacing: 0.14px; }

/* Compare table (feature matrix) */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.compare-table th, .compare-table td {
  padding: 18px 22px;
  text-align: left;
  font-size: 14.5px;
  letter-spacing: 0.14px;
  border-bottom: 1px solid var(--br-subtle);
}
.compare-table thead th {
  background: var(--bg-near);
  color: var(--fg-black);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14px;
}
.compare-table thead th.highlight { background: #0a0a0a; color: #fff; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody th { font-weight: 500; color: var(--fg-dark); }
.compare-table .yes { color: var(--ok); font-weight: 600; }
.compare-table .no  { color: var(--fg-warm); opacity: 0.7; }
.compare-table .highlight-col { background: rgba(10,10,10,0.02); }

@media (max-width: 768px) {
  .compare-table th, .compare-table td { padding: 14px 12px; font-size: 13px; }
  .compare-table-wrap { overflow-x: auto; }
}

/* =============== Page hero (non-home) =============== */
.page-hero {
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) { .page-hero { padding: 80px 0 56px; } }
.page-hero h1 { font-size: clamp(36px, 5.2vw, 64px); }

/* =============== Big numbered anchor list (TOC) =============== */
.anchor-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .anchor-toc { grid-template-columns: 1fr; } }
.anchor-toc a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-ring), var(--sh-soft);
  font-size: 14.5px; font-weight: 500;
  color: var(--fg-black);
  letter-spacing: 0.14px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), color 180ms var(--ease);
}
.anchor-toc a:hover { transform: translateY(-2px); box-shadow: var(--sh-card); color: var(--brand-blue); }
.anchor-toc a .num {
  width: 28px; height: 28px;
  border-radius: 9999px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}

/* =============== Callout boxes =============== */
.callout {
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.callout-blue { background: var(--brand-blue-soft); color: var(--brand-blue-deep); }
.callout-warm { background: var(--bg-stone); color: var(--fg-dark); }
.callout-dark { background: #0a0a0a; color: #fff; }
.callout .callout-icon { flex-shrink: 0; margin-top: 2px; }
.callout h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.14px; color: inherit; }
.callout p { color: inherit; opacity: 0.9; font-size: 14.5px; line-height: 1.55; }

/* =============== Step list (emergency detail pages) =============== */
.step-list {
  counter-reset: step;
  display: grid;
  gap: 18px;
}
.step-list li {
  list-style: none;
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-ring), var(--sh-soft);
}
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-blue);
  letter-spacing: 0.06em;
  padding-top: 3px;
}
.step-list li h4 { font-size: 16px; margin: 0 0 4px; font-weight: 600; letter-spacing: 0.14px; }
.step-list li p { font-size: 14.5px; line-height: 1.55; color: var(--fg-mid); }

/* =============== Pricing card (emergency detail sidebar) =============== */
.side-quote {
  background: #0a0a0a;
  color: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; gap: 18px;
}
.side-quote .sq-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-blue-soft-2);
}
.side-quote .sq-price { font-weight: 200; font-size: 46px; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.side-quote .sq-price .currency { font-size: 20px; vertical-align: top; color: rgba(255,255,255,0.55); margin-right: 4px; }
.side-quote .sq-price .per { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.55); margin-left: 6px; }
.side-quote p, .side-quote li { color: rgba(255,255,255,0.75); font-size: 14.5px; line-height: 1.55; }
.side-quote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-quote ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.side-quote ul li::before { content: "→"; color: var(--brand-blue-soft-2); }
.side-quote .btn-primary:hover { background: #fff; color: #000; }

/* =============== Article / prose =============== */
.prose { max-width: 720px; }
.prose h2 { margin-top: 56px; }
.prose h3 { margin-top: 36px; font-size: clamp(20px, 2vw, 24px); }
.prose p { font-size: 17px; line-height: 1.72; color: var(--fg-mid); letter-spacing: 0.16px; margin-bottom: 20px; }
.prose p strong, .prose strong { color: var(--fg-black); font-weight: 600; }
.prose ul { padding-left: 22px; margin: 18px 0; }
.prose ul li { font-size: 16.5px; line-height: 1.65; color: var(--fg-mid); margin-bottom: 8px; letter-spacing: 0.14px; }
.prose blockquote {
  margin: 28px 0;
  padding: 20px 26px;
  border-left: 3px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  border-radius: 0 12px 12px 0;
  color: var(--brand-blue-deep);
  font-size: 16px; line-height: 1.65; letter-spacing: 0.14px;
}
.prose a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-blue-deep); }
.prose code {
  background: var(--bg-near);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--fg-black);
}

/* =============== Doc split layout =============== */
.doc-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: flex-start;
}
@media (max-width: 1024px) { .doc-split { grid-template-columns: 1fr; gap: 40px; } }
.doc-split .sidebar-sticky { position: sticky; top: 96px; }

/* =============== Contact layout =============== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Generic input row grouping */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .field-row { grid-template-columns: 1fr; } }

/* =============== Agencies page hero slab =============== */
.slab-dark {
  background: #0a0a0a;
  color: #fff;
  border-radius: 28px;
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
.slab-dark h2 { color: #fff; }
.slab-dark p { color: rgba(255,255,255,0.72); }
@media (max-width: 768px) { .slab-dark { padding: 56px 28px; border-radius: 20px; } }

/* =============== 404/500 hero =============== */
.err-code {
  font-weight: 100;
  font-size: clamp(120px, 22vw, 220px);
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal), var(--fg-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============== Currency switcher (header) =============== */
/* z-index must outrank reveal/plan-card stacking contexts (created by transforms).
   We DO NOT set `isolation: isolate` here — that would create a local stacking
   context that caps at the ancestor's z-index, and any ancestor with a
   transform (`.reveal`, `.footer` ancestors, etc.) would then clip the popover
   behind sibling content. Without isolation, the ccy-menu's z-index is
   evaluated in the nearest ancestor stacking context, where 3000 is tall
   enough to sit above all in-page content. */
.ccy-switch { position: relative; z-index: 2000; }
.ccy-switch.is-open { z-index: 2100; }
.ccy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--br-hairline);
  border-radius: 9999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-dark);
  cursor: pointer;
  transition: all 160ms var(--ease);
  font-family: inherit;
  letter-spacing: 0.3px;
}
.ccy-btn:hover { background: var(--bg-near); border-color: rgba(0,0,0,0.12); }
.ccy-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 14px;
  box-shadow: var(--sh-lift);
  padding: 6px;
  /* Tall enough to sit above plan cards, feature grids, and any reveal-animated
     siblings. The .ccy-switch parent holds z-index 2000 in page flow; the menu
     just needs to win locally. */
  z-index: 3000;
}
.ccy-menu form { margin: 0; }
.ccy-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--fg-dark);
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 120ms var(--ease);
}
.ccy-item:hover { background: var(--bg-near); }
.ccy-item.is-active { background: var(--brand-blue-soft); color: var(--brand-blue-deep); font-weight: 500; }
.ccy-sym { min-width: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ccy-code { font-weight: 600; font-variant-numeric: tabular-nums; }
.ccy-name { color: var(--fg-warm); font-size: 12.5px; }
.ccy-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--br-hairline);
  background: #fff;
  color: var(--fg-dark);
  cursor: pointer;
  letter-spacing: 0.4px;
}
.ccy-chip.is-active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* ---- Footer variant ----
   Lives inside the dark footer, so the popover has two jobs:
   (1) Open UPWARD into the page (the footer sits at the very bottom, there's
       nothing below to open into) and
   (2) Style itself as a dark card so a bright-white menu doesn't float over
       the black footer looking like a design glitch.
   The `!important` on top/bottom defeats any upstream reset that would
   otherwise flip it back to the default downward orientation. */
.ccy-switch--footer .ccy-btn {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
}
.ccy-switch--footer .ccy-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.40);
  color: #fff;
}
.ccy-switch--footer .ccy-menu {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  right: 0;
  left: auto;
  /* Dark popover to match footer chrome. */
  background: #141414;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  /* Footer often sits near the viewport edge on small screens; clamp width
     so the popover can't punch past the container's right edge. */
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: 320px;
}
.ccy-switch--footer .ccy-menu .ccy-item {
  color: rgba(255,255,255,0.86);
}
.ccy-switch--footer .ccy-menu .ccy-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.ccy-switch--footer .ccy-menu .ccy-item.is-active {
  background: rgba(59,130,246,0.18);
  color: #fff;
}
.ccy-switch--footer .ccy-menu .ccy-name {
  color: rgba(255,255,255,0.55);
}
.ccy-switch--footer .ccy-menu .ccy-sym,
.ccy-switch--footer .ccy-menu .ccy-code {
  color: inherit;
}
/* Scrollbar tint so the 8-currency list doesn't show a bright-white track
   on dark. Webkit only; Firefox gets the default which is already dark. */
.ccy-switch--footer .ccy-menu::-webkit-scrollbar { width: 8px; }
.ccy-switch--footer .ccy-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
}
.ccy-switch--footer .ccy-menu::-webkit-scrollbar-track { background: transparent; }

/* =============== Admin / portal chrome (design-system skin) =============== */
.adm-shell { display: flex; min-height: 100vh; background: var(--bg-near); }
.adm-sidebar {
  width: 248px;
  background: #fff;
  border-right: 1px solid var(--br-hairline);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.adm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--br-hairline);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.adm-brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand-blue);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-blue-sm);
}
.adm-brand-sub { color: var(--fg-warm); font-size: 12px; font-weight: 400; margin-left: auto; }
.adm-nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.adm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--fg-mid);
  font-weight: 500;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.adm-nav-item:hover { background: var(--bg-near); color: var(--fg-black); }
.adm-nav-item.is-active {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--sh-blue-sm);
}
.adm-nav-item svg { flex-shrink: 0; opacity: 0.9; }
.adm-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--br-hairline);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.adm-foot .email { font-size: 12px; color: var(--fg-warm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-main { flex: 1; padding: 40px 40px 80px; min-width: 0; }
.adm-pagehead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.adm-pagehead h1 { font-weight: 500; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.adm-pagehead .eyebrow { margin-bottom: 6px; display: block; }

.adm-card {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--sh-card);
}
.adm-card-lg { padding: 32px; }
.adm-card-head {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.adm-card-sub { font-size: 14px; color: var(--fg-warm); margin-bottom: 18px; }

.adm-stat {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 16px;
  padding: 22px 24px;
}
.adm-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-warm); font-weight: 600; }
.adm-stat-value { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; color: var(--fg-black); }
.adm-stat-sub { font-size: 12px; color: var(--fg-warm); margin-top: 4px; }

.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-warm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--br-hairline);
  background: var(--bg-near);
}
.adm-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--br-hairline);
  vertical-align: middle;
  color: var(--fg-dark);
}
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr:hover td { background: var(--bg-near); }
.adm-table-wrap {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 18px;
  overflow: hidden;
}

.adm-input,
.adm-select,
.adm-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--br-hairline);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--fg-dark);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.adm-input:focus,
.adm-select:focus,
.adm-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30,110,245,0.12);
}
.adm-label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--fg-dark);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.adm-help { font-size: 12.5px; color: var(--fg-warm); margin-top: 6px; }

.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: all 140ms var(--ease);
  line-height: 1;
}
.adm-btn-primary { background: var(--brand-blue); color: #fff; box-shadow: var(--sh-blue-sm); }
.adm-btn-primary:hover { background: var(--brand-blue-dark); transform: translateY(-1px); }
.adm-btn-dark { background: #000; color: #fff; }
.adm-btn-dark:hover { background: var(--brand-blue); }
.adm-btn-ghost { background: #fff; color: var(--fg-dark); border: 1px solid var(--br-hairline); }
.adm-btn-ghost:hover { background: var(--bg-near); }
.adm-btn-danger { background: #fff; color: #b91c1c; border: 1px solid #fecaca; }
.adm-btn-danger:hover { background: #fef2f2; }
.adm-btn-sm { padding: 8px 14px; font-size: 13px; }

.adm-badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.6; }
.adm-badge-active   { background: #ecfdf5; color: #047857; }
.adm-badge-pending  { background: #fef3c7; color: #a16207; }
.adm-badge-cancelled{ background: #fef2f2; color: #b91c1c; }
.adm-badge-suspended{ background: #f3f4f6; color: #6b7280; }

/* =============== Mode selector (Sandbox / Live tiles) =============== */
.mode-switch { display: block; }
.mode-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mode-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease);
}
.mode-tile:hover {
  border-color: var(--brand-blue-soft-2);
  background: #fafbfd;
}
.mode-tile-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mode-tile:focus-within {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30,110,245,0.12);
}
.mode-tile-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--br-hairline);
  background: #fff;
  margin-top: 2px;
  position: relative;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.mode-tile-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 140ms var(--ease);
}
.mode-tile-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mode-tile-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-dark);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.mode-tile-sub {
  font-size: 12.5px;
  color: var(--fg-warm);
  line-height: 1.4;
}
.mode-tile.is-selected {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  box-shadow: 0 0 0 1px var(--brand-blue) inset, 0 1px 2px rgba(30,110,245,0.08);
}
.mode-tile.is-selected .mode-tile-dot {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}
.mode-tile.is-selected .mode-tile-dot::after {
  transform: translate(-50%, -50%) scale(1);
}
.mode-tile.is-selected .mode-tile-title {
  color: var(--brand-blue-deep);
}
@media (max-width: 640px) {
  .mode-switch-grid { grid-template-columns: 1fr; }
}

.adm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--br-hairline); margin-bottom: 24px; }
.adm-tab {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-warm);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.adm-tab:hover { color: var(--fg-dark); }
.adm-tab.is-active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

.adm-alert { padding: 14px 18px; border-radius: 12px; font-size: 14px; }
.adm-alert-ok  { background: #ecfdf5; border: 1px solid #d1fae5; color: #065f46; }
.adm-alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.adm-alert-warn{ background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.adm-alert-info{ background: var(--brand-blue-soft); border: 1px solid var(--brand-blue-soft-2); color: var(--brand-blue-deep); }

.adm-login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(1200px 400px at 50% -200px, rgba(30,110,245,0.08), transparent),
    var(--bg-near);
}

/* =============== Auth split-screen (login, forgot, 2FA) =============== */
.auth-split {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}
.auth-split-left {
  position: relative;
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(30,110,245,0.28), transparent 55%),
    radial-gradient(650px 550px at 0% 100%, rgba(16,185,129,0.14), transparent 60%),
    linear-gradient(160deg, #060f26 0%, #0a1a42 50%, #04091c 100%);
  color: #fff;
  padding: 36px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}
/* Soft radial vignette so edges feel fuller without banding */
.auth-split-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Large faded outline ring — subtle brand anchor without clutter */
.auth-split-left::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 60px rgba(255,255,255,0.02),
    0 0 0 140px rgba(255,255,255,0.015);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.auth-split-top,
.auth-split-body,
.auth-split-foot {
  position: relative;
  z-index: 1;
}
.auth-split-top { align-self: start; }
.auth-split-foot { align-self: end; }

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 160ms var(--ease), gap 160ms var(--ease);
}
.auth-back-link:hover { color: #fff; gap: 12px; }
.auth-back-link svg { width: 14px; height: 14px; }

.auth-split-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 0;
}
.auth-split-logo {
  height: 44px;
  width: auto;
  margin-bottom: 36px;
  display: block;
  opacity: 0.95;
}
.auth-split-title {
  font-size: 52px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.auth-split-title em {
  font-style: normal;
  background: linear-gradient(135deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 300;
}
.auth-split-sub {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.auth-split-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin: 0;
  max-width: 400px;
  font-weight: 300;
}
.auth-split-divider {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 28px auto;
  border: 0;
}

.auth-split-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.auth-split-foot .trust-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-split-foot .trust-mark::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

.auth-split-right {
  background: #fff;
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-form-wrap {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
.auth-icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 10px 28px rgba(30,110,245,0.28), 0 2px 6px rgba(30,110,245,0.18);
}
.auth-form-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-dark);
  margin: 0 0 6px;
}
.auth-form-subtitle {
  font-size: 13.5px;
  color: var(--fg-warm);
  margin: 0 0 20px;
  line-height: 1.55;
}
.auth-form-divider {
  border: 0;
  border-top: 1px dashed var(--br-hairline);
  margin: 0 0 22px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-input {
  width: 100%;
  padding: 14px 16px;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--fg-dark);
  font-family: inherit;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.auth-input::placeholder { color: #9ca3af; }
.auth-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30,110,245,0.12);
}
.auth-input--otp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 16px 16px;
}
.auth-submit {
  margin-top: 4px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: #071230;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.auth-submit:hover {
  background: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(30,110,245,0.25);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.auth-helper-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--fg-warm);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 140ms var(--ease);
}
.auth-helper-link:hover { color: var(--brand-blue); }

.auth-form-foot-row {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--br-hairline);
  font-size: 13.5px;
  color: var(--fg-warm);
  text-align: center;
}
.auth-form-foot-row a {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
}
.auth-form-foot-row a:hover { text-decoration: underline; }

.auth-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.auth-alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.auth-alert-info { background: var(--brand-blue-soft); border: 1px solid var(--brand-blue-soft-2); color: var(--brand-blue-deep); }
.auth-alert-ok { background: #ecfdf5; border: 1px solid #d1fae5; color: #065f46; }

.auth-otp-controls {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--br-hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.auth-otp-controls .micro { color: var(--fg-warm); }
.auth-otp-controls button.as-link {
  background: none; border: 0; padding: 0;
  color: var(--brand-blue);
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.auth-otp-controls button.as-link:hover { text-decoration: underline; }
.auth-resend-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--br-hairline);
  background: #fff;
  color: var(--fg-dark);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.auth-resend-btn:hover:not(:disabled) { background: var(--bg-near); border-color: var(--fg-warm); }
.auth-resend-btn:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 880px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-split-left { padding: 32px 28px 40px; grid-template-rows: auto auto auto; }
  .auth-split-right { padding: 40px 24px 56px; }
  .auth-split-title { font-size: 38px; }
  .auth-split-body { padding: 32px 0 12px; max-width: 460px; }
  .auth-split-logo { height: 38px; margin-bottom: 24px; }
  .auth-split-foot { display: none; }
}
@media (max-width: 480px) {
  .auth-split-left { padding: 28px 20px 36px; }
  .auth-split-right { padding: 32px 20px 48px; }
  .auth-split-title { font-size: 32px; }
  .auth-split-sub { font-size: 15px; }
  .auth-split-desc { font-size: 14px; }
}

@media (max-width: 960px) {
  .adm-sidebar { display: none; }
  .adm-main { padding: 24px; }
}

/* =============== Portal (warmer, client-facing) =============== */
.portal-nav {
  background: #fff;
  border-bottom: 1px solid var(--br-hairline);
}
.portal-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.portal-nav-link {
  padding: 9px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-mid);
  transition: all 160ms var(--ease);
}
.portal-nav-link:hover { background: var(--bg-near); color: var(--fg-black); }
.portal-nav-link.is-active { background: var(--brand-blue); color: #fff; box-shadow: var(--sh-blue-sm); }

/* ============ EMERGENCY LANDING PAGE KIT ============ */
.fix-urgency-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: #fff1f1;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14px;
  text-transform: uppercase;
}
.fix-urgency-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #dc2626;
  animation: slowPulse 1.6s ease-in-out infinite;
}
.fix-hero-dual {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px;
  align-items: center;
}
@media (max-width: 900px){ .fix-hero-dual { grid-template-columns: 1fr; gap: 32px; } }
.fix-hero-proof {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--fg-warm); font-weight: 500;
}
.fix-hero-proof .stars { color: #f59e0b; letter-spacing: -1px; }

.fix-price-card {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--sh-lift);
  position: relative;
}
.fix-price-card .fix-price {
  font-size: 64px; font-weight: 200;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--fg-black);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
}
.fix-price-card .fix-price-per {
  font-size: 13px; color: var(--fg-warm); font-weight: 500;
  letter-spacing: 0.12px; word-spacing: normal; white-space: normal;
}
.fix-price-card .fix-price-sub {
  font-size: 13px; color: var(--fg-warm); margin-top: 10px;
  letter-spacing: 0.12px; line-height: 1.5;
}
.fix-price-card hr { border: 0; height: 1px; background: var(--br-hairline); margin: 24px 0; }
.fix-price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fix-price-card ul li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px; color: var(--fg-dark); line-height: 1.55;
  letter-spacing: 0.12px; word-spacing: normal;
}
.fix-price-card ul li::before {
  content: ''; position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-blue-soft);
  box-shadow: inset 0 0 0 2px var(--brand-blue);
}
.fix-price-card ul li code {
  font-size: 13px; padding: 1px 5px; margin: 0 1px;
  background: #f3f4f6; border-radius: 4px; color: var(--fg-dark);
  white-space: nowrap;
}
/* "What's in scope" checklists with inline SVG + mixed text + code */
.fix-inscope-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fix-inscope-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  column-gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-dark);
  letter-spacing: 0.12px;
  word-spacing: normal;
}
.fix-inscope-item > svg { margin-top: 3px; flex-shrink: 0; }
.fix-inscope-item > span { min-width: 0; }
.fix-inscope-item code {
  font-size: 13px; padding: 1px 5px; margin: 0 1px;
  background: #f3f4f6; border-radius: 4px; color: var(--fg-dark);
  white-space: nowrap;
}

.fix-price-card .guarantee-row {
  margin-top: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  color: #065f46;
  font-size: 13px; font-weight: 500;
}

.fix-symptoms-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px){ .fix-symptoms-grid { grid-template-columns: 1fr; } }
.fix-symptom {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-left: 3px solid #ef4444;
  border-radius: 14px;
}
.fix-symptom .icon {
  flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  display: flex; align-items: center; justify-content: center;
}
.fix-symptom .txt {
  font-size: 14px; font-weight: 500; color: var(--fg-dark); line-height: 1.5;
}

.fix-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  position: relative;
}
@media (max-width: 900px){ .fix-steps { grid-template-columns: 1fr; } }
.fix-step {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 20px;
  padding: 28px;
  position: relative;
}
.fix-step .num {
  font-size: 44px; font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--brand-blue);
  line-height: 1;
}
.fix-step .tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14px;
  text-transform: uppercase;
}
.fix-step h3 {
  margin-top: 16px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg-black);
}
.fix-step p {
  margin-top: 10px;
  font-size: 14.5px; color: var(--fg-mid); line-height: 1.55;
}

/* ============ Timeline (Quote -> Scope -> Ship) ============ */
.tl-timeline {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0;
}
.tl-timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--br-hairline) 8%,
    var(--br-hairline) 92%,
    transparent 100%);
  transform: translateX(-50%);
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: start;
  padding: 28px 0;
}
.tl-row:first-child { padding-top: 0; }
.tl-row:last-child  { padding-bottom: 0; }

.tl-node {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding-top: 8px;
}
.tl-node-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 6px #fff, 0 4px 14px rgba(0, 102, 204, 0.12);
}

.tl-card {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 20px;
  padding: 26px 28px;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tl-card:hover {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.tl-card .tl-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14px;
  text-transform: uppercase;
}
.tl-card h3 {
  margin-top: 12px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg-black);
}
.tl-card p {
  margin-top: 10px;
  font-size: 14.5px; color: var(--fg-mid); line-height: 1.6;
}

/* Connector line from card to center node */
.tl-card::after {
  content: "";
  position: absolute;
  top: 38px;
  width: 28px;
  height: 2px;
  background: var(--br-hairline);
}

/* Left side (odd rows) */
.tl-row:nth-child(odd)  .tl-card { grid-column: 1; margin-right: 4px; text-align: right; }
.tl-row:nth-child(odd)  .tl-card::after { right: -28px; }

/* Right side (even rows) */
.tl-row:nth-child(even) .tl-card { grid-column: 3; margin-left: 4px; text-align: left; }
.tl-row:nth-child(even) .tl-card::after { left: -28px; }

@media (max-width: 820px) {
  .tl-timeline::before {
    left: 24px;
    transform: none;
  }
  .tl-row {
    grid-template-columns: 48px 1fr;
    padding: 16px 0;
    gap: 16px;
  }
  .tl-node { grid-column: 1; padding-top: 4px; }
  .tl-node-circle {
    width: 40px; height: 40px;
    font-size: 13px;
    box-shadow: 0 0 0 5px var(--bg-soft), 0 4px 12px rgba(0, 102, 204, 0.12);
  }
  .tl-row:nth-child(odd)  .tl-card,
  .tl-row:nth-child(even) .tl-card {
    grid-column: 2;
    margin: 0;
    text-align: left;
  }
  .tl-card::after { display: none; }
}

/* When timeline sits on .bg-light, brighten the node ring */
.bg-light .tl-node-circle { box-shadow: 0 0 0 6px var(--bg-soft), 0 4px 14px rgba(0, 102, 204, 0.12); }

.fix-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--br-hairline);
}
.fix-compare-table th, .fix-compare-table td {
  padding: 16px 20px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--br-hairline);
}
.fix-compare-table thead th {
  background: var(--bg-near);
  font-weight: 600;
  color: var(--fg-warm);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14px;
}
.fix-compare-table tbody tr:last-child td { border-bottom: 0; }
.fix-compare-table .col-us {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-weight: 600;
}
.fix-compare-table .cell-yes { color: #047857; font-weight: 500; }
.fix-compare-table .cell-no { color: #b91c1c; font-weight: 500; }
.fix-compare-table .cell-partial { color: #a16207; font-weight: 500; }

.fix-testimonial {
  background: #fff;
  border: 1px solid var(--br-hairline);
  border-radius: 18px;
  padding: 28px;
}
.fix-testimonial .stars { color: #f59e0b; font-size: 16px; letter-spacing: -1px; }
.fix-testimonial blockquote {
  margin: 14px 0 20px;
  font-size: 16px; color: var(--fg-dark); line-height: 1.6;
  font-weight: 400;
}
.fix-testimonial .author {
  display: flex; align-items: center; gap: 12px;
}
.fix-testimonial .author-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.fix-testimonial .author-name { font-size: 14px; font-weight: 600; color: var(--fg-black); }
.fix-testimonial .author-meta { font-size: 12.5px; color: var(--fg-warm); }

.fix-final {
  background: linear-gradient(135deg, #0b1220 0%, #1a2539 100%);
  border-radius: 28px;
  padding: 72px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.fix-final::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(closest-side, rgba(30,110,245,0.25), transparent);
  filter: blur(40px);
  pointer-events: none;
}
.fix-final h2 { color: #fff; position: relative; }
.fix-final p { color: rgba(255,255,255,0.78); position: relative; }

/* Sticky mobile CTA bar */
.fix-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--br-hairline);
  padding: 12px 16px;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  z-index: 60;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.06);
}
.fix-sticky-cta .price { font-size: 20px; font-weight: 500; color: var(--fg-black); letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fix-sticky-cta .price .per { font-size: 12px; color: var(--fg-warm); font-weight: 500; letter-spacing: 0.12px; word-spacing: normal; white-space: normal; }
@media (max-width: 720px) {
  .fix-sticky-cta { display: flex; }
  /* Only add bottom padding on pages that actually render the sticky CTA —
     using :has() keeps this scoped so non-emergency pages don't get a
     floating gap between their last section and the footer. */
  body:has(.fix-sticky-cta) main { padding-bottom: 80px; }
}

/* Quote-form checkbox chips */
.q-check {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--br-hairline);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  color: var(--fg-dark);
  cursor: pointer;
  transition: all 160ms var(--ease);
  user-select: none;
}
.q-check:hover { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.q-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand-blue); cursor: pointer; margin: 0; }
.q-check:has(input:checked) { border-color: var(--brand-blue); background: var(--brand-blue-soft); color: var(--brand-blue-deep); font-weight: 500; }

/* Print */
@media print { .nav, .footer, .no-print { display: none !important; } }

/* =================================================================
   Homepage mobile polish — make every section land cleanly on phones.
   Breakpoint ladder: 1024 (tablet), 900 (narrow tablet), 640 (phone).
   ================================================================= */

/* Operations 2+1 card — the inner split (1.15fr 1fr) that wrapped on mobile
   as a cramped two-column. Stack it with breathing room below 900px. */
.home-ops-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .home-ops-split { grid-template-columns: 1fr; gap: 28px; }
}

/* Promise panel — desktop has a luxurious 80px gap that cramps when columns
   stack. Reduce gap and stack on narrow tablet. */
.home-promise-grid { gap: 80px; align-items: center; }
@media (max-width: 960px) {
  .home-promise-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Reviews slider — each slide was inline 3-column on every viewport. One
   review per slide on phones reads cleanly, two on narrow tablets. */
.home-reviews-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .home-reviews-slide { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .home-reviews-slide { grid-template-columns: 1fr; gap: 14px; }
}

/* Generic grids from utility classes — stack on phones so the whole home
   page reads single-column. Timeline, FAQ, feature cards, fix cards. */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; gap: 20px; }
}

/* Hero — tighten top padding on small screens so the H1 is the first thing
   seen, not a pile of whitespace. */
@media (max-width: 640px) {
  .hero-warm-glow.section { padding-top: 48px; padding-bottom: 32px; }
  .trust-row { gap: 8px; margin-top: 24px; }
  .trust-chip { padding: 8px 14px; font-size: 12.5px; }
  .pill { padding: 8px 14px; font-size: 12.5px; }
}

/* Hero CTA buttons — stack and full-width on the narrowest phones so they
   don't wrap awkwardly into half-rows. */
@media (max-width: 480px) {
  .btn { font-size: 14.5px; padding: 13px 20px; }
  .hero-warm-glow .fade-in-2 { flex-direction: column; width: 100%; gap: 10px !important; }
  .hero-warm-glow .fade-in-2 .btn { width: 100%; justify-content: center; }
}

/* Feature card padding — the default 40px looks heavy on a phone. */
@media (max-width: 640px) {
  .feature-card { padding: 28px 22px; }
  .feature-card h3 { font-size: 22px; }
}

/* Fix cards — same story. Tighten padding so the grid breathes. */
@media (max-width: 640px) {
  .fix-card { padding: 26px 22px; }
}

/* Timeline — the two-column grid (node + card) gets cramped; the CSS at
   line 982 already tightens it but the heading needs a size drop. */
@media (max-width: 640px) {
  .timeline-card h4 { font-size: 18px; }
  .timeline-card { padding: 20px 22px; }
}

/* Monthly report preview card — reduce inner padding on phones and drop
   the dated-title size so "April 2026 · yoursite.com" fits on one line. */
@media (max-width: 640px) {
  .home-promise-grid .card > div:first-child { padding: 20px 22px !important; }
  .home-promise-grid .card > div:first-child > div:last-child {
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
  }
  .home-promise-grid .card > div:last-child { padding: 20px 20px !important; gap: 18px !important; }
  /* Status badge + copy row — the inline-styled flex row renders each row
     of the monthly report. Tighten the gap so badge doesn't look orphaned. */
  .home-promise-grid .card > div:last-child > div { gap: 12px !important; }
}
@media (max-width: 420px) {
  .home-promise-grid .card > div:first-child > div:last-child { font-size: 18px !important; }
}

/* Audience split cards — the 1100+ media already stacks, just tighten. */
@media (max-width: 640px) {
  .audience-card { padding: 36px 26px !important; }
  .audience-card .display-sm { font-size: 26px !important; }
}

/* FAQ header — tighten the tap target. */
@media (max-width: 640px) {
  .faq-item { padding: 18px 22px; }
  .faq-item h4 { font-size: 15.5px; line-height: 1.4; padding-right: 12px; }
}

/* Final CTA card-stone — reduce the enormous 72px padding. */
@media (max-width: 640px) {
  .card-stone { padding: 44px 24px !important; border-radius: 20px; }
  .card-stone .display-sm { font-size: 28px; }
  .card-stone .body-lg { font-size: 17px; }
}

/* Section pads — tighter on phones. (Global .section rule already drops to
   80px at 768; take it down another notch on true phones.) */
@media (max-width: 480px) {
  .section { padding: 60px 0; }
  .section-sm { padding: 44px 0; }
}

/* Eyebrow + display-sm scale — Make big headings feel proportional to the
   narrow viewport without losing their weight. */
@media (max-width: 640px) {
  .display-sm { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.18; }
  .body-lg { font-size: 16.5px; }
  .eyebrow { font-size: 11px; }
}

/* Container paddings — 24px side padding feels tight on phones with
   shadowed cards. Nudge down to 18px. */
@media (max-width: 560px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md { padding-left: 18px; padding-right: 18px; }
}

/* Dashboard bar + activity tiles — keep the tiles readable single-column. */
@media (max-width: 640px) {
  .dashboard-wide { border-radius: 18px; }
  .activity-tile { padding: 16px 16px 14px; }
}

/* Footer links — the column containers that replaced inline
   `flex-direction: column` styles. Kept in CSS so mobile can switch
   Company links to a 2-col grid without touching markup. */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer — stack from 4-col to 2-col to 1-col gracefully, tighten gap. */
@media (max-width: 900px) {
  .footer .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 32px !important; }
}
@media (max-width: 540px) {
  .footer .grid-4 { grid-template-columns: 1fr; gap: 28px !important; }
}

/* Mobile footer trim — on phones, hide the intro blurb, Fixes, and Plans
   columns (sitemap is already available via the drawer nav); keep the
   Company column but flow its links in 2 columns so the 5 short legal
   links don't push the footer tall. Applies at the standard phone
   breakpoint used elsewhere in the file (640px). */
@media (max-width: 640px) {
  .footer-col-intro,
  .footer-col-fixes,
  .footer-col-plans { display: none; }
  .footer .grid-4 { grid-template-columns: 1fr; gap: 0 !important; }
  .footer-col-company { padding: 0; }
  .footer-col-company .footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
  }
  /* Slim the whole footer on phones — default top/bottom pad is 64/28,
     dialed down since 3 of 4 columns are gone. */
  .footer { padding: 40px 0 22px; }
  .footer hr.divider-soft { margin: 28px 0 16px; }
}

/* =============== Homepage hero — phone refinements ===============
   Hide the animated 6-tile dashboard on phones (it stretches into a very
   long column that dwarfs the hero), and swap the trust pill to a shorter
   copy variant that doesn't wrap onto two lines. */
.pill-text-full { display: inline; }
.pill-text-short { display: none; }
@media (max-width: 560px) {
  .pill-text-full { display: none; }
  .pill-text-short { display: inline; }
}
@media (max-width: 640px) {
  .hero-dashboard-wrap { display: none; }
}

/* =============== Agencies page — mobile polish ===============
   The agencies page mixes several inline-styled grids: a two-column
   volume-pricing card, a two-column quote form, a three-column check
   grid, and a three-up assurances strip. On phones they all need to
   stack or halve. We extract classes so the stacking lives in CSS, not
   inline styles repeated in markup. */
.agency-volume-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .agency-volume-split { grid-template-columns: 1fr; gap: 28px; }
}

.agency-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .agency-field-row { grid-template-columns: 1fr; gap: 16px; }
}

.agency-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 780px) {
  .agency-types-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .agency-types-grid { grid-template-columns: 1fr; }
}

.agency-quote-assurances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .agency-quote-assurances { grid-template-columns: 1fr; gap: 10px; }
}

/* Quote card — the 40x36px inner pad is luxurious on desktop but makes
   phone-width inputs feel cramped against their own card edges. */
@media (max-width: 640px) {
  .agency-quote-card { padding: 28px 22px !important; border-radius: 18px; }
}

/* Reseller dark slab — the desktop 96x48 padding crushes on phones. The
   slab already has a 768 override at 56x28, take it another notch down. */
.agency-reseller-slab { padding: 96px 48px; }
@media (max-width: 768px) {
  .agency-reseller-slab { padding: 56px 28px; }
}
@media (max-width: 560px) {
  .agency-reseller-slab { padding: 44px 20px; }
  .agency-reseller-slab .grid-3 { gap: 14px !important; }
  /* Reseller scenario cards — tighten inline padding on phones. */
  .agency-reseller-slab .grid-3 > div { padding: 22px !important; }
}

/* Quote form footer — the submit row is the last direct child of the
   quote card. On phones the 440px-capped privacy caption would get
   squeezed next to the button; stretch it to full width and stack the
   button full-width below so it reads as a deliberate primary action. */
@media (max-width: 640px) {
  .agency-quote-card .caption { max-width: 100% !important; }
  .agency-quote-card > div:last-child { flex-direction: column !important; align-items: stretch !important; }
  .agency-quote-card > div:last-child .btn { width: 100%; justify-content: center; }
}

/* Agencies hero — drop the long trust chips to allow wrapping cleanly
   (they're already in .trust-row which wraps). Just tighten the gap. */
@media (max-width: 640px) {
  .page-hero.hero-warm-glow { padding-top: 48px !important; padding-bottom: 32px !important; }
  .page-hero.hero-warm-glow .trust-row { gap: 8px !important; margin-top: 22px !important; }
}

/* =============== Pricing page — mobile polish ===============
   The pricing page plan cards, toggle, compare matrix, and add-ons all
   need shaping on phones. Defaults are tuned for a wide desktop three-up
   layout; on a narrow phone they have too much air and too small a price.
*/

/* Plan cards — drop inner padding so the white card edges don't swallow
   a phone screen, and shrink the 54px price on the smallest phones so it
   doesn't line-wrap. Keep the visual hierarchy (price > features > CTA). */
@media (max-width: 640px) {
  .plan-card { padding: 32px 24px; border-radius: 20px; gap: 18px; }
  .plan-card h3 { font-size: 20px; }
  .plan-card .plan-sub { font-size: 13.5px; }
  .plan-card .plan-price { font-size: 44px; }
  .plan-card .plan-price .plan-price-amount { font-size: 44px; }
  .plan-card .plan-price .currency { font-size: 18px; transform: translateY(-10px); }
  .plan-card .plan-badge { top: -11px; font-size: 10.5px; padding: 5px 12px; }
  .plan-card .check-list li { font-size: 14.5px; line-height: 1.5; }
}
@media (max-width: 400px) {
  .plan-card { padding: 28px 22px; }
  .plan-card .plan-price { font-size: 40px; }
  .plan-card .plan-price .plan-price-amount { font-size: 40px; }
}

/* Price toggle + currency switcher row — on desktop it sits centered in
   one row. On phones the currency button can crowd the toggle; let them
   wrap with a tighter gap and center both. */
@media (max-width: 640px) {
  .price-toggle button { padding: 9px 16px; font-size: 13.5px; }
  .price-toggle .save-badge { font-size: 10px; padding: 2px 6px; }
}

/* Compare table — already has overflow-x:auto at 768px. Make the first
   column sticky so feature names stay visible while you swipe through
   plan columns, and force cells to nowrap so they don't squash to 2-3
   chars per line. A slim visible scrollbar hints at the swipe. */
@media (max-width: 768px) {
  .compare-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  .compare-table-wrap::-webkit-scrollbar { height: 4px; }
  .compare-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
  .compare-table tbody th,
  .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    min-width: 150px;
  }
  .compare-table thead th:first-child { background: var(--bg-near); }
  .compare-table th, .compare-table td { white-space: nowrap; }
}

/* Add-ons strip — three horizontal cards on desktop. On phones let the
   title and pill share a row without the price wrapping. */
@media (max-width: 640px) {
  .card-sm { padding: 22px 20px; border-radius: 14px; }
  .card-sm h4 { font-size: 17px; }
  .card-sm .pill { font-size: 12px; padding: 5px 10px; }
}

/* "Not ready for a plan?" band — grid-2 already stacks at 900px via the
   global rule, but the card-stone with the fix list keeps the desktop
   40px padding. Tighten on phones. */
@media (max-width: 640px) {
  .card-stone .check-list li { font-size: 14.5px; line-height: 1.55; }
}

/* Final CTA — the button row uses inline flex with flex-wrap. Make the
   two buttons full-width on the narrowest phones so they read as a
   deliberate stack, not two orphaned pills. Reused by any CTA that
   tags its button row with .cta-row. */
@media (max-width: 480px) {
  .card-stone .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .card-stone .cta-row .btn { width: 100%; justify-content: center; }
  .fix-final .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .fix-final .cta-row .btn { width: 100%; justify-content: center; }
}

/* =============== Emergency fix service pages — mobile polish ===============
   All 6 pages (hacked-recovery, migration, white-screen, speed-optimization,
   custom-tech-support, ssl-fix) share the same shell: hero split, symptoms
   grid, 3-step process, comparison table, testimonials, "in-scope" two-col,
   FAQ, dark final CTA, and a sticky mobile CTA. Consolidate responsive
   classes here so each page stays presentational.
*/

/* Testimonials row — always 3-up on desktop, halve on narrow tablet, stack
   on phone. Replaces inline `grid-template-columns: repeat(3, 1fr)`. */
.fix-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .fix-testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .fix-testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* "What's in scope" two-col — left copy + right checklist. On phones the
   48px desktop gap cramps; stack with breathing room. Replaces inline
   `grid-template-columns: 1fr 1fr; gap: 48px`. */
.fix-inscope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .fix-inscope-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Generic two-col card split used on custom-tech-support for the
   checklists sections. Same treatment as .fix-inscope-grid but tighter
   desktop gap (20px) to match the markup. */
.fix-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 780px) {
  .fix-two-col { grid-template-columns: 1fr; gap: 14px; }
}

/* Hero — tighten top pad, let heading breathe. */
@media (max-width: 640px) {
  .fix-hero-dual { gap: 24px !important; }
  .fix-hero-dual .display { font-size: clamp(26px, 7.5vw, 36px) !important; line-height: 1.1 !important; }
  .fix-hero-dual .body-lg { font-size: 16px !important; margin-top: 16px !important; }
  .fix-hero-proof { font-size: 12.5px; line-height: 1.5; }
  .fix-urgency-badge { font-size: 11px; padding: 6px 12px; }
}

/* Price card — 32px padding swallows a phone. Tighten, shrink the $149
   so "flat, one-time" stays on the price line instead of falling to a
   cramped second line. Full-width "Start recovery now" button. */
@media (max-width: 640px) {
  .fix-price-card { padding: 26px 22px; border-radius: 20px; }
  .fix-price-card .fix-price { font-size: 48px; }
  .fix-price-card .fix-price-per { font-size: 12.5px; }
  .fix-price-card .fix-price-sub { font-size: 12.5px; }
  .fix-price-card ul li { font-size: 14px; padding-left: 22px; }
  .fix-price-card ul li::before { width: 10px; height: 10px; top: 7px; }
  .fix-price-card hr { margin: 20px 0; }
  .fix-price-card .guarantee-row { font-size: 12.5px; padding: 10px 12px; }
}
@media (max-width: 400px) {
  .fix-price-card { padding: 22px 18px; }
  .fix-price-card .fix-price { font-size: 42px; }
}

/* Symptoms grid — already stacks at 900px (line 2542). Tighten card pad
   on phones so they don't feel like hotel pillows. */
@media (max-width: 640px) {
  .fix-symptom { padding: 16px 18px; gap: 10px; }
  .fix-symptom .icon { width: 26px; height: 26px; }
  .fix-symptom .txt { font-size: 13.5px; line-height: 1.45; }
}

/* 3-step process — already stacks at 900px. On phone, tighten the 28px
   pad and shrink the 44px numeral so it reads as supporting, not as the
   headline of the card. */
@media (max-width: 640px) {
  .fix-step { padding: 24px 22px; border-radius: 18px; }
  .fix-step .num { font-size: 36px; }
  .fix-step .tag { font-size: 10.5px; padding: 3px 9px; }
  .fix-step h3 { margin-top: 12px; font-size: 18px; }
  .fix-step p { margin-top: 8px; font-size: 14px; line-height: 1.55; }
}

/* Compare table — inline `overflow-x: auto;` wrapper is used on every
   page. Scope a thin scrollbar, sticky first column, and nowrap cells
   so the DIY vs Ainygo matrix stays readable while swiping. Mirrors the
   pricing compare-table-wrap pattern at 768px. */
@media (max-width: 768px) {
  .fix-compare-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  .fix-compare-wrap::-webkit-scrollbar { height: 4px; }
  .fix-compare-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
  .fix-compare-table thead th:first-child,
  .fix-compare-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    min-width: 180px;
    box-shadow: 1px 0 0 var(--br-hairline);
  }
  .fix-compare-table thead th:first-child { background: var(--bg-near); }
  .fix-compare-table th,
  .fix-compare-table td { white-space: nowrap; padding: 12px 14px; font-size: 13px; }
  .fix-compare-table thead th { font-size: 11px; }
}

/* Testimonial card pad — 28px feels oversized on phones. Trim to 22px
   and drop blockquote to 15px so the card lands proportional to avatar. */
@media (max-width: 640px) {
  .fix-testimonial { padding: 22px 20px; border-radius: 16px; }
  .fix-testimonial blockquote { font-size: 15px; margin: 12px 0 16px; line-height: 1.55; }
  .fix-testimonial .stars { font-size: 15px; }
}

/* In-scope checklist — tighten the row gap so 8 items don't push the
   page into an endless column on phones. */
@media (max-width: 640px) {
  .fix-inscope-list { gap: 12px; }
  .fix-inscope-item { font-size: 14px; line-height: 1.55; column-gap: 10px; }
  .fix-inscope-item > svg { width: 16px; height: 16px; margin-top: 2px; }
}

/* Final CTA (dark) — 72px vertical pad is a lot of gradient on a phone.
   Bring it down to 48px, drop the button row to a clean column stack. */
@media (max-width: 640px) {
  .fix-final { padding: 52px 24px; border-radius: 22px; }
  .fix-final .display-sm { font-size: 26px; }
  .fix-final .body-lg { font-size: 16px; margin-top: 14px !important; }
  .fix-final .fix-urgency-badge { font-size: 10.5px; padding: 5px 10px; }
  .fix-final .caption { font-size: 12.5px; line-height: 1.55; margin-top: 22px !important; }
}

/* Sticky mobile CTA — already enables at 720px with display:flex. On
   very narrow phones the "Start recovery" label can be too long; tune
   the button's inline padding so the price side keeps its space. */
@media (max-width: 480px) {
  .fix-sticky-cta { padding: 10px 14px; gap: 10px; }
  .fix-sticky-cta .price { font-size: 17px; }
  .fix-sticky-cta .price .per { font-size: 11.5px; }
  .fix-sticky-cta .btn { padding: 9px 14px !important; font-size: 13px !important; flex-shrink: 0; }
}

/* =============== Portal (customer account) — mobile polish ===============
   All portal pages share .portal-nav above and .portal-main > .portal-shell
   wrapping the page content. Defaults are tuned for desktop; on phones
   tighten cards, tables, and multi-column grids so the whole customer
   account reads as a crisp, native-feeling screen — not a squashed
   desktop layout.
*/

/* Semantic grids — replace inline grid-template-columns on dashboard,
   subscription, profile. Desktop defaults match the original inline
   values so the switch is visually identical on wide viewports. */
.portal-dash-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.portal-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.portal-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.portal-sub-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.portal-card-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.portal-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

/* Top nav actions — the portal's top-right cluster (Visit site, Support,
   Log out). The public site's .nav-desktop is hidden at ≤1024px in favor
   of a slide-in drawer; the portal has no drawer, so we use a dedicated
   class that stays visible and shrinks gracefully on phones. */
.portal-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.portal-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portal-nav-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portal-nav-logout-icon { display: none; }

@media (max-width: 780px) {
  .portal-nav-actions { gap: 10px; }
  /* On phones, icon-only for Visit site / Support to save room for the
     Log out button and the portal sub-nav below. */
  .portal-nav-action { padding: 7px; border-radius: 10px; }
  .portal-nav-action:hover { background: var(--bg-near); }
  .portal-nav-action-label { display: none; }
  .portal-nav-action svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) {
  .portal-nav-actions { gap: 6px; }
  /* Flip Log out to icon-only on the narrowest phones so the logo has
     breathing room and the row never wraps. */
  .portal-nav-logout {
    padding: 8px !important;
    border-radius: 10px !important;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .portal-nav-logout-icon { display: inline-block; }
  .portal-nav-logout-label { display: none; }
}

/* Sub-nav — wraps via flex-wrap at desktop. On phones tighten padding
   and pill size so 5 links fit two clean rows. On the narrowest phones
   switch to a hidden-scrollbar horizontal swipe so the nav stays one
   line instead of wrapping into a tall block. */
@media (max-width: 640px) {
  .portal-nav-inner { padding: 10px 14px; gap: 6px; }
  .portal-nav-link  { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 420px) {
  .portal-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .portal-nav-inner::-webkit-scrollbar { display: none; }
  .portal-nav-link { white-space: nowrap; flex-shrink: 0; }
}

/* Portal main — 56px top / 96px bottom is generous on phone. */
@media (max-width: 640px) {
  .portal-main { padding: 28px 0 56px !important; }
  .portal-shell > div[style*="margin-bottom: 40px"],
  .portal-shell > div[style*="margin-bottom: 32px"] { margin-bottom: 24px !important; }
}

/* Card pads — adm-card-lg is 32px, adm-card is 24px. Phone swallowed.
   Global so admin pages get the benefit too. */
@media (max-width: 640px) {
  .adm-card-lg { padding: 22px 18px; border-radius: 16px; }
  .adm-card    { padding: 18px 16px; border-radius: 14px; }
  .adm-card-head { font-size: 16px; }
  .adm-card-sub  { font-size: 13px; margin-bottom: 14px; }
}
@media (max-width: 420px) {
  .adm-card-lg { padding: 18px 14px; }
  .adm-card    { padding: 16px 14px; }
}

/* Portal page heads — plain h1 / h2 inside the portal scope. Tighten. */
@media (max-width: 640px) {
  .portal-shell h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
  .portal-shell h2 { font-size: 20px; line-height: 1.2; }
}

/* Data tables (orders) — .adm-table-wrap has overflow:hidden by default
   to keep rounded corners clean. On phones let it scroll horizontally
   with a slim scrollbar and pin the first column (Date) so users can
   swipe through Description/Website/Type/Amount/Status/Reference. */
@media (max-width: 780px) {
  .adm-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .adm-table-wrap::-webkit-scrollbar { height: 4px; }
  .adm-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
  .adm-table th, .adm-table td {
    white-space: nowrap;
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .adm-table thead th:first-child,
  .adm-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  .adm-table thead th:first-child { background: var(--bg-near); }
  .adm-table tr:hover td:first-child { background: var(--bg-near); }
}

/* Buttons — tighten on phones. */
@media (max-width: 640px) {
  .adm-btn { padding: 10px 16px; font-size: 13.5px; }
  .adm-btn-sm { padding: 7px 12px; font-size: 12.5px; }
}

/* Dashboard: 2fr 1fr top → stack on narrow tablet/phone.
   Dashboard: 4-up shortcuts → 2 cols on mobile, 1 col on narrow. */
@media (max-width: 780px) {
  .portal-dash-top { grid-template-columns: 1fr; gap: 16px; }
  .portal-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 420px) {
  .portal-shortcuts { grid-template-columns: 1fr; }
}

/* Profile: 2-up form field grid → stack on phone. The "grid-column: span 2"
   address lines survive the stack naturally. */
@media (max-width: 640px) {
  .portal-form-grid-2 { grid-template-columns: 1fr; gap: 14px; }
}

/* Subscription: started + next-bill 2-up → stack on narrow phones. */
@media (max-width: 480px) {
  .portal-sub-meta { grid-template-columns: 1fr; gap: 10px; }
}

/* Subscription + intake: body + actions flex row. Already wraps via
   flex-wrap, but when stacked we want actions full-width and left-
   aligned (not the desktop right-alignment). */
@media (max-width: 640px) {
  .portal-card-row { gap: 16px; }
  .portal-card-actions { width: 100%; min-width: 0; align-items: stretch; }
  .portal-card-actions .adm-btn,
  .portal-card-actions > form,
  .portal-card-actions > form > button { width: 100%; }
  /* Intake cards' actions pane was align-items:flex-end on desktop; in a
     stacked layout that pushed the badge/button off to the right edge.
     Reset to stretch so the CTA button fills the card. */
  .portal-card-actions.is-end { align-items: stretch; }
  .portal-card-actions.is-end > * { text-align: left; }
}

/* Currency strip on profile — keep the dropdown usable on mobile. */
@media (max-width: 640px) {
  .portal-shell .ccy-menu { right: 0; min-width: 240px; max-width: calc(100vw - 48px); }
}

/* Portal footer — make the "all systems" pill and copyright stack neatly. */
@media (max-width: 640px) {
  body > footer.footer[style*="padding: 40px"] { padding: 28px 0 !important; }
  body > footer.footer[style*="padding: 40px"] .caption { font-size: 12.5px; line-height: 1.65; }
}

/* =========================================================================
   reCAPTCHA — hide the floating badge site-wide, and replace it with a
   compliant inline legal notice on every form (rendered by recaptcha_notice()).
   Per Google's terms, the badge may be hidden ONLY if the disclosure text is
   visible in the user flow. The notice below satisfies that requirement.
   ========================================================================= */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  bottom: auto !important;
  right: auto !important;
}

.recaptcha-notice {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-warm, #6b6152);
  text-align: left;
}
.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 2px;
}
.recaptcha-notice a:hover {
  color: var(--fg, #141210);
  text-decoration-color: currentColor;
}

/* =========================================================================
   Form validation — site-wide classes applied when a handler returns
   per-field errors via form_errors_set(). Three things to show the user:
     1. The input itself turns red (border + subtle tinted background).
     2. A short, specific error message appears directly below the input.
     3. A top-of-form banner summarizes that the form couldn't be submitted.
   Works with all three base input classes used on the site: .input,
   .auth-input, and .adm-input.
   ========================================================================= */
.input.is-invalid,
.auth-input.is-invalid,
.adm-input.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  /* Lift the error border visibly above adjacent inputs in a grid. */
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12);
}
.input.is-invalid:focus,
.auth-input.is-invalid:focus,
.adm-input.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: #dc2626 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
  outline: none !important;
}

/* Per-field error message. Sits immediately under the offending input so
   the user can see which field failed and why without scrolling. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #b91c1c;
  font-weight: 500;
}
.field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Top-of-form summary banner. Rendered when the handler flashes a general
   error AND/OR one or more field errors were returned. The banner tells
   the user "something went wrong, scroll down to see which fields";
   individual inputs below it carry the specific messages. */
.form-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.form-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.form-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #d1fae5;
}
.form-alert-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.form-alert strong { font-weight: 600; }
.form-alert p { margin: 0; }
.form-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.form-alert ul li { margin-top: 2px; }

/* On dark surfaces (auth card on warm-glow hero, etc.) keep the notice readable */
.contact-form .recaptcha-notice {
  text-align: center;
}
/* Auth forms (login, forgot-password, reset, OTP-verify) left-align the
   reCAPTCHA notice so it anchors to the form edge instead of floating
   mid-card. The base .recaptcha-notice rule already sets left alignment,
   so this just guards against accidental future centering on the family. */
.auth-form .recaptcha-notice {
  text-align: left;
}

/* ============================================================================
   PORTAL DESIGN SYSTEM ( .pt-* )
   Purpose-built for /portal/* views so they feel like a professional,
   trustworthy customer account area instead of a thin admin scaffold.
   Uses the site's existing design tokens (--brand-blue, --fg-*, --br-*,
   --sh-*, --bg-*) so the visual language stays consistent with the
   marketing site and checkout.
   ============================================================================ */

/* ---------- Page header (eyebrow + title + description) ---------- */
.pt-page {
  max-width: 1080px;
  margin: 0 auto;
}
.pt-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--br-hairline);
  margin-bottom: 32px;
}
.pt-page-header .pt-eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  margin-bottom: 8px;
}
.pt-page-header h1 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-black);
  margin: 0 0 6px;
}
.pt-page-header .pt-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-mid);
  max-width: 620px;
  margin: 0;
}
.pt-page-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Welcome hero (dashboard only) ---------- */
.pt-hero {
  position: relative;
  background: #ffffff;
  color: var(--fg-black);
  border: 1px solid var(--br-hairline);
  border-radius: 20px;
  padding: 32px 36px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pt-hero::before {
  /* barely-there blue wash in the top-right corner — keeps the card feeling
     alive without the heavy dark gradient. */
  content: '';
  position: absolute;
  inset: -60% -25% auto auto;
  width: 520px; height: 520px;
  background: radial-gradient(circle at center, rgba(37,99,235,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.pt-hero > * { position: relative; z-index: 1; }
.pt-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.pt-hero-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
  color: var(--fg-black) !important;
}
.pt-hero-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-warm);
  max-width: 560px;
  margin: 0;
}
.pt-hero-sub strong {
  color: var(--fg-black);
  font-weight: 600;
}
.pt-hero-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pt-hero-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,0.28);
}

/* ---------- Cards ---------- */
.pt-card {
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pt-card-lg {
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pt-card-flush {
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--br-hairline);
  background: var(--bg-near);
}
.pt-card-head h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-dark);
  margin: 0;
}
.pt-card-body { padding: 22px 24px; }

.pt-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-black);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.3;
}
.pt-card-title-lg {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-black);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.25;
}
.pt-card-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-warm);
  margin-bottom: 10px;
}
.pt-muted { color: var(--fg-mid); font-size: 14px; line-height: 1.55; }
.pt-micro { font-size: 12px; color: var(--fg-mid); letter-spacing: 0.02em; line-height: 1.5; }

.pt-section-divider {
  height: 1px;
  background: var(--br-hairline);
  margin: 20px 0;
}

/* ---------- Two-column split inside a card ---------- */
.pt-card-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.pt-card-split > .pt-card-split-main { flex: 1 1 320px; min-width: 0; }
.pt-card-split > .pt-card-split-actions {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

/* ---------- KPI tiles (dashboard) ---------- */
.pt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.pt-kpi {
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-kpi:hover { border-color: #d4d4d4; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.pt-kpi-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-warm);
}
.pt-kpi-value {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-black);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.pt-kpi-meta {
  font-size: 12px;
  color: var(--fg-mid);
  line-height: 1.5;
}
.pt-kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  margin-bottom: 8px;
}

/* ---------- Shortcut tiles (dashboard) ---------- */
.pt-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.pt-shortcut {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--fg-dark);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pt-shortcut:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--sh-blue-sm);
  transform: translateY(-1px);
}
.pt-shortcut-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pt-shortcut-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-shortcut-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-warm);
  line-height: 1.2;
}
.pt-shortcut-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-black);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* ---------- Meta grid (stacked label / value pairs) ---------- */
.pt-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 24px;
  margin-top: 18px;
}
.pt-meta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-warm);
  margin-bottom: 4px;
}
.pt-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-dark);
  letter-spacing: -0.005em;
  word-break: break-word;
}
.pt-meta-value-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fg-mid);
  word-break: break-all;
}

/* ---------- Badges ---------- */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
}
.pt-badge-active  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pt-badge-pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pt-badge-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.pt-badge-muted   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.pt-badge-info    { background: var(--brand-blue-soft); color: var(--brand-blue-dark); border-color: var(--brand-blue-soft-2); }
.pt-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  line-height: 1.2;
}
.pt-btn-sm { padding: 7px 13px; font-size: 13px; }
.pt-btn-primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--sh-blue-sm);
}
.pt-btn-primary:hover { background: var(--brand-blue-dark); }
.pt-btn-ghost {
  background: var(--bg-pure);
  color: var(--fg-dark);
  border-color: var(--br-hairline);
}
.pt-btn-ghost:hover { border-color: #c7c7c7; background: var(--bg-near); }
.pt-btn-danger {
  background: var(--bg-pure);
  color: #b91c1c;
  border-color: #fecaca;
}
.pt-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.pt-btn-link {
  padding: 6px 0;
  color: var(--brand-blue);
  background: transparent;
  border: none;
  font-weight: 500;
}
.pt-btn-link:hover { color: var(--brand-blue-dark); text-decoration: underline; }

/* ---------- Empty states ---------- */
.pt-empty {
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
}
.pt-empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.pt-empty-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-black);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.pt-empty-body {
  font-size: 14px;
  color: var(--fg-mid);
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 420px;
}
.pt-empty-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Alerts ---------- */
.pt-alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--br-hairline);
  background: var(--bg-pure);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dark);
}
.pt-alert strong { font-weight: 600; color: var(--fg-black); }
.pt-alert-info {
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue-soft-2);
  color: #1e3a8a;
}
.pt-alert-info strong { color: #0b2a6b; }
.pt-alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.pt-alert-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.pt-alert-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
}

/* ---------- Tables ---------- */
.pt-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pt-table thead th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-warm);
  text-align: left;
  padding: 14px 20px;
  background: var(--bg-near);
  border-bottom: 1px solid var(--br-hairline);
  white-space: nowrap;
}
.pt-table thead th:last-child { text-align: right; }
.pt-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--br-hairline);
  vertical-align: middle;
  color: var(--fg-dark);
}
.pt-table tbody tr:last-child td { border-bottom: none; }
.pt-table tbody tr:hover { background: var(--bg-near); }
.pt-table tbody td:last-child { text-align: right; }

/* ---------- Forms ---------- */
.pt-field { margin-bottom: 14px; }
.pt-field:last-child { margin-bottom: 0; }
.pt-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-dark);
  margin-bottom: 6px;
}
.pt-label .pt-opt {
  color: var(--fg-mid);
  font-weight: 400;
  margin-left: 4px;
}
.pt-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg-dark);
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 110, 245, 0.12);
}
.pt-input.is-invalid,
.pt-input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.pt-input-locked {
  background: var(--bg-near);
  color: var(--fg-mid);
  cursor: not-allowed;
}
.pt-help { font-size: 12px; color: var(--fg-mid); margin-top: 6px; line-height: 1.5; }
.pt-err  { font-size: 12px; color: #b91c1c; margin-top: 6px; line-height: 1.5; }
.pt-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pt-form-grid-2 .pt-span-2 { grid-column: span 2; }

/* ---------- Support banner (bottom of pages) ---------- */
.pt-support-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--bg-stone);
  border: 1px solid var(--br-hairline);
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.pt-support-banner-body { flex: 1 1 280px; }
.pt-support-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-black);
  margin: 4px 0 4px;
  letter-spacing: -0.01em;
}
.pt-support-banner-body p {
  margin: 0;
  font-size: 14px;
  color: var(--fg-mid);
  line-height: 1.55;
}

/* ---------- Trust row (small lock-icon list) ---------- */
.pt-trust-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-mid);
  margin-top: 10px;
}
.pt-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.pt-trust-row svg { color: var(--brand-blue); flex-shrink: 0; }

/* ---------- Currency selector (profile) ---------- */
.pt-currency-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-pure);
  border: 1px solid var(--br-hairline);
  border-radius: 14px;
  padding: 20px 22px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pt-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-hero { padding: 28px 22px; }
  .pt-hero-title { font-size: 26px; }
  .pt-page-header { padding-bottom: 18px; margin-bottom: 22px; }
  .pt-page-header h1 { font-size: 24px; }
  .pt-card-split { gap: 20px; }
  .pt-card-split > .pt-card-split-actions { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .pt-kpi-grid { grid-template-columns: 1fr; }
  .pt-shortcut-grid { grid-template-columns: 1fr; }
  .pt-form-grid-2 { grid-template-columns: 1fr; }
  .pt-form-grid-2 .pt-span-2 { grid-column: span 1; }
  .pt-card-lg { padding: 22px; }
  .pt-card-body { padding: 18px; }
  .pt-card-head { padding: 14px 18px; }
  .pt-empty { padding: 44px 22px; }
  .pt-support-banner { padding: 20px; }
  .pt-table thead th,
  .pt-table tbody td { padding: 12px 14px; }
}