/* =============================================
   WP Fix Tech - 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: 33px; 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: 30px; }
}

/* =============== 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 WP Fix Tech 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; }
}




/* ============================================================================
   BLOG SYSTEM (v35) — uses the site .page-hero / .hero-warm-glow pattern
   so the listing, category, and single-post headers match every other page
   on the site. The blog-specific rules below only style what the hero
   does not cover: the sidebar, card grid, single post body, etc.
   ============================================================================ */

/* Single-post hero overrides — title can be long, so don't blow it up like
   the marketing pages. */
.blog-post-hero .blog-post-title {
  font-size: 40px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .blog-post-hero .blog-post-title { font-size: 30px; }
}
.blog-post-byline {
  margin-top: 22px;
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* CONTENT SHELL — sidebar + main */
.blog-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  align-items: start;
  padding: 16px 0 64px;
}
@media (max-width: 900px) { .blog-shell { grid-template-columns: 1fr; gap: 40px; padding-top: 12px; } }

/* SIDEBAR — minimal text-only nav + prominent CTAs */
.blog-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}
@media (max-width: 900px) { .blog-sidebar { position: static; } }
.blog-sidebar-inner { display: flex; flex-direction: column; gap: 36px; }

.blog-sidebar-section { display: flex; flex-direction: column; }
.blog-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--fg-warm);
  text-decoration: none;
  font-weight: 400;
  position: relative;
  transition: color 0.14s;
}
.blog-sidebar-link:hover {
  background: transparent;
  color: var(--fg);
}
.blog-sidebar-link.is-active {
  background: transparent;
  color: var(--fg);
  font-weight: 500;
}
.blog-sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  background: var(--brand-blue);
  border-radius: 1px;
}

/* CTA block — prominent buttons */
.blog-sidebar-cta-block {
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-sidebar-cta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.blog-sidebar-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: var(--brand-blue);
  color: white;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 9px;
  transition: background 0.14s, transform 0.14s;
  box-shadow: 0 1px 2px rgba(10, 132, 255, 0.18);
}
.blog-sidebar-cta-btn:hover {
  background: var(--brand-blue-dark);
  color: white;
  transform: translateX(2px);
}
.blog-sidebar-cta-btn-outline {
  background: white;
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: none;
}
.blog-sidebar-cta-btn-outline:hover {
  background: var(--bg-near);
  color: var(--fg);
}
.blog-sidebar-cta-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.14s;
}
.blog-sidebar-cta-btn:hover svg {
  transform: translateX(2px);
}

.blog-main { min-width: 0; }

/* CARD GRID — borderless, image-first */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 28px;
}
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
@media (max-width: 800px) { .blog-grid, .blog-grid-3 { grid-template-columns: 1fr; gap: 36px; } }

.blog-card {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  transition: none;
  box-shadow: none;
}
.blog-card:hover {
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
.blog-card:hover .blog-card-title {
  color: var(--brand-blue-dark);
}
.blog-card-hero {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-near);
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 18px;
}
.blog-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.blog-card:hover .blog-card-hero img {
  transform: scale(1.025);
}
.blog-card-placeholder { width: 100%; height: 100%; }
.blog-card-placeholder svg { width: 100%; height: 100%; display: block; }
.blog-card-body { padding: 0; }
.blog-card-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-blue-dark);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.blog-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg);
  transition: color 0.15s;
}
.blog-card-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-warm);
  margin: 0 0 10px;
}
.blog-card-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* PAGINATION */
.blog-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 64px;
}
.blog-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--fg-warm);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background 0.14s, color 0.14s;
}
.blog-page:hover {
  background: var(--bg-near);
  color: var(--fg);
}
.blog-page.is-active {
  background: var(--fg);
  color: white;
}

/* SINGLE POST GRID — sidebar + body */
.blog-single-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  align-items: start;
  padding: 16px 0 64px;
}
@media (max-width: 900px) { .blog-single-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 12px; } }

.blog-single { max-width: 720px; min-width: 0; }

.blog-single-hero {
  margin: 0 0 36px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-near);
}
.blog-single-hero img,
.blog-single-hero svg {
  width: 100%; height: auto;
  display: block;
}
.blog-single-hero svg { aspect-ratio: 1200/630; }

/* BODY TYPOGRAPHY */
.blog-single-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif !important;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.blog-single-body * { font-family: inherit !important; }
.blog-single-body p { margin: 0 0 18px; }
.blog-single-body h2 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 40px 0 14px;
  line-height: 1.25;
  color: var(--fg);
}
.blog-single-body h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 30px 0 8px;
  line-height: 1.3;
}
.blog-single-body h4 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 24px 0 6px;
}
.blog-single-body ul, .blog-single-body ol { padding-left: 22px; margin: 0 0 18px; }
.blog-single-body li { margin-bottom: 6px; }
.blog-single-body a {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-decoration-color: rgba(10, 132, 255, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.blog-single-body a:hover { text-decoration-color: currentColor; }
.blog-single-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--brand-blue);
  background: transparent;
  border-radius: 0;
  font-style: normal;
  color: var(--fg-warm);
}
.blog-single-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 14px;
  background: var(--bg-near);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  color: var(--fg);
}
.blog-single-body pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px 18px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 22px 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.blog-single-body pre code { background: none; border: none; padding: 0; color: inherit; }
.blog-single-body hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.blog-single-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 22px 0; }
.blog-single-body figure { margin: 26px 0; }
.blog-single-body figcaption { font-size: 13px; color: var(--fg-muted); margin-top: 10px; text-align: center; }
.blog-single-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14.5px;
}
.blog-single-body th, .blog-single-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.blog-single-body th {
  background: transparent;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

/* PROMOTIONAL BANNER inside post body */
.blog-banner { margin: 36px 0; }
.blog-banner-inner {
  background: linear-gradient(135deg, #0a84ff 0%, #0066cc 100%);
  color: white;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(10, 132, 255, 0.12);
}
.blog-banner-inner h3 {
  color: white !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.blog-banner-inner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.blog-banner-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-banner-cta .btn {
  background: white;
  color: var(--brand-blue-dark);
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  font-size: 13.5px;
}
.blog-banner-cta .btn-outline {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.blog-banner-cta .btn:hover { opacity: 0.92; }

.blog-single-tail { margin-top: 40px; }

/* SHARE BUTTONS */
.blog-single-share {
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.blog-single-share-bottom {
  margin: 36px 0 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  color: var(--fg-warm);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.14s;
}
.blog-share-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}
.blog-share-toast {
  position: absolute; right: 0; top: -32px;
  background: var(--fg); color: white;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.blog-share-toast.is-visible { opacity: 1; }

/* RELATED POSTS */
.blog-related {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--line-soft);
}
.blog-related .display-xs {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 24px;
}

/* ============================================================================
   BLOG SYSTEM — mobile responsive overrides
   ============================================================================ */
@media (max-width: 900px) {

  /* Move sidebar to AFTER the main content on every blog page */
  .blog-shell,
  .blog-single-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 16px;
  }
  .blog-main,
  .blog-single { order: 1; }
  .blog-sidebar {
    order: 2;
    position: static;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }

  /* Restyle the inner sidebar so it reads as a closing footer block,
     not a stranded desktop sidebar squashed into mobile width. */
  .blog-sidebar-inner {
    flex-direction: column;
    gap: 28px;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Categories become horizontal pills on mobile — quick to tap, takes
     a fraction of the vertical space the column took. */
  .blog-sidebar-section {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .blog-sidebar-link {
    display: inline-flex;
    padding: 8px 14px;
    background: var(--bg-near);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-warm);
  }
  .blog-sidebar-link:hover {
    background: var(--line-soft);
    color: var(--fg);
  }
  .blog-sidebar-link.is-active {
    background: var(--brand-blue);
    color: white;
    font-weight: 600;
  }
  .blog-sidebar-link.is-active::before {
    /* The thin left accent line doesn't make sense on a pill. */
    display: none;
  }

  /* CTA block becomes a card on mobile — gives the closing block the
     visual weight it deserves at the end of a long post. */
  .blog-sidebar-cta-block {
    background: var(--bg-near);
    border-top: none;
    border-radius: 14px;
    padding: 22px;
    gap: 10px;
  }
  .blog-sidebar-cta-label {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .blog-sidebar-cta-btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* HIDE category name in the single-post hero on mobile (kept on desktop). */
@media (max-width: 700px) {
  .blog-post-hero .blog-post-meta-cat {
    display: none;
  }
  /* Tighten the date · reading time row on small screens. */
  .blog-post-hero .blog-post-meta {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* Mobile: tighten the meta-separator dots so the stack reads cleaner. */
.blog-post-meta-sep { opacity: 0.5; margin: 0 6px; }
@media (max-width: 700px) {
  .blog-post-meta-sep { margin: 0 4px; }
}

/* Subtle divider line at the seam between blog hero and content section.
   Soft hairline that fades at the edges so it reads as Apple-style refinement
   rather than a hard rule. */
.blog-after-hero {
  position: relative;
}
.blog-after-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--line) 18%,
    var(--line) 82%,
    transparent 100%);
  pointer-events: none;
}

/* ============================================================================
   BLOG SIDEBAR — subtle background card (desktop) + black "Browse care plans"
   ============================================================================ */

/* Desktop: wrap the whole sidebar in a soft-cream card so it feels intentional
   instead of floating in whitespace. Padding is generous; corners rounded. */
.blog-sidebar {
  background: var(--bg-near);
  padding: 24px 22px;
  border-radius: 14px;
}

/* Active-category accent line sits at the inside edge of the new padding
   instead of way out in negative-margin space. */
.blog-sidebar-link.is-active::before {
  left: -10px;
}

/* The CTA divider already worked on a white parent. With the new bg-near
   parent, swap to a slightly stronger line so it stays visible. */
.blog-sidebar-cta-block {
  border-top: 1px solid var(--line);
}

/* Mobile: the sidebar restructure (pills + bottom card) handles its own
   visual containment, so don't double-up the background card on mobile. */
@media (max-width: 900px) {
  .blog-sidebar {
    background: transparent;
    padding: 32px 0 0;
    border-radius: 0;
  }
}

/* "Browse care plans" — black background, white text, replacing the previous
   white-with-border outline variant. Keeps the primary "Book an emergency
   fix" blue button as the most prominent action; secondary action is now a
   confident dark button rather than a quiet outlined one. */
.blog-sidebar-cta-btn-outline {
  background: var(--fg);
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.18);
}
.blog-sidebar-cta-btn-outline:hover {
  background: #2a2520;
  color: white;
}

/* ============================================================================
   FIXES — divider line + sidebar buttons (final overrides)
   ============================================================================ */

/* Reliable divider line — simple border-top that always paints. The earlier
   pseudo-element approach was unreliable across some browsers depending on
   how the parent section's padding stacked. */
.blog-after-hero {
  border-top: 1px solid var(--line);
}
.blog-after-hero::before {
  /* Disable the previous pseudo-element approach — it stays in the cascade
     but is now invisible. The visible divider is the border-top above. */
  display: none;
}

/* Refined sidebar CTA buttons. Bumped specificity (.blog-sidebar prefix) so
   the outline override wins regardless of cascade order. Tighter padding +
   smaller font + heavier weight = no awkward wrapping in the narrow sidebar
   column. Subtle hover lift gives the buttons real polish. */
.blog-sidebar .blog-sidebar-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  background: var(--brand-blue);
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 10px;
  transition: background 0.14s, transform 0.14s, box-shadow 0.14s;
  box-shadow: 0 1px 2px rgba(10, 132, 255, 0.22),
              0 0 0 1px rgba(10, 132, 255, 0.08) inset;
  border: none;
}
.blog-sidebar .blog-sidebar-cta-btn:hover {
  background: var(--brand-blue-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(10, 132, 255, 0.28),
              0 0 0 1px rgba(10, 132, 255, 0.12) inset;
}
.blog-sidebar .blog-sidebar-cta-btn svg {
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.14s;
}
.blog-sidebar .blog-sidebar-cta-btn:hover svg {
  transform: translateX(2px);
}

/* Black secondary button — Browse care plans. Same shape & weight as primary,
   different color, complementary not subordinate. */
.blog-sidebar .blog-sidebar-cta-btn-outline {
  background: var(--fg);
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.22),
              0 0 0 1px rgba(20, 18, 16, 0.08) inset;
}
.blog-sidebar .blog-sidebar-cta-btn-outline:hover {
  background: #2a2520;
  color: white;
  box-shadow: 0 4px 10px rgba(20, 18, 16, 0.28),
              0 0 0 1px rgba(20, 18, 16, 0.12) inset;
}

/* Mobile: the sidebar moves to bottom and gets transparent bg. The CTA card
   becomes a soft cream block. Make sure the buttons there match the new
   refined look (font, weight, spacing). */
@media (max-width: 900px) {
  .blog-sidebar .blog-sidebar-cta-btn {
    padding: 13px 16px;
    font-size: 14px;
    border-radius: 11px;
  }
}

/* ============================================================================
   FINAL — definitive overrides for "Browse care plans" button.
   The earlier cascade left the default state ambiguous in some browsers.
   Force the issue with !important so the resting state is unambiguously
   black, and tune the hover to lift (not change color) since black is now
   the resting visual.
   ============================================================================ */
.blog-sidebar-cta-btn-outline,
.blog-sidebar .blog-sidebar-cta-btn-outline {
  background: var(--fg) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.22),
              0 0 0 1px rgba(20, 18, 16, 0.08) inset !important;
}
.blog-sidebar-cta-btn-outline:hover,
.blog-sidebar .blog-sidebar-cta-btn-outline:hover {
  background: #2a2520 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(20, 18, 16, 0.32),
              0 0 0 1px rgba(20, 18, 16, 0.14) inset !important;
}

/* ============================================================================
   FINAL FINAL — hardcoded color values for outline button.
   Earlier rules used var(--fg) which doesn't exist in the current theme,
   so the background fell back to transparent. Hardcoding ensures the button
   renders correctly regardless of what theme variables exist or don't.
   ============================================================================ */
.blog-sidebar-cta-btn-outline,
.blog-sidebar .blog-sidebar-cta-btn-outline {
  background: #141210 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22),
              0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
}
.blog-sidebar-cta-btn-outline:hover,
.blog-sidebar .blog-sidebar-cta-btn-outline:hover {
  background: #2a2520 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(0, 0, 0, 0.14) inset !important;
}

/* ============================================================================
   Wider sidebar so buttons text fits on one line. Inter (your current font)
   is slightly wider than the original system fonts, which was pushing the
   long button labels to two lines. Bumping sidebar 220px → 260px gives the
   button text the horizontal room it needs.
   ============================================================================ */
.blog-shell,
.blog-single-grid {
  grid-template-columns: 260px 1fr !important;
}

/* Mobile stays single-column (already handled by the @media breakpoint). */
@media (max-width: 900px) {
  .blog-shell,
  .blog-single-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tighten button internal spacing slightly so single-line layout holds even
   on slightly longer copy. */
.blog-sidebar .blog-sidebar-cta-btn {
  padding: 12px 14px;
  white-space: nowrap;
}

/* ============================================================================
   FINAL — divider line at the seam between hero and content section.
   Earlier rules used var(--line) which is undefined in the current theme,
   so the border collapsed to invalid. Hardcoding fixes it permanently.
   The fade-at-edges gradient gives the line a refined, Apple-style touch
   instead of a harsh edge-to-edge ruled line.
   ============================================================================ */

/* Disable the prior border-top approach so it can't fight us. */
.blog-after-hero {
  border-top: none !important;
}

/* Restore the pseudo-element divider with hardcoded colors. */
.blog-after-hero {
  position: relative;
}
.blog-after-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1100px, calc(100% - 48px)) !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    #e2e2e2 18%,
    #e2e2e2 82%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}