/* ============================================================
   DESIGN TOKENS — single source of truth.
   Edit one var → site-wide consistency.
   ============================================================ */
:root {
  /* — COLORS: brand */
  --cobalt:         #2563EB;
  --cobalt-bright:  #1D6FFF;     /* gradient start */
  --cobalt-dark:    #1559D9;     /* button hover */
  --cobalt-light:   #60A5FA;
  --cobalt-soft:    #E7EFFF;     /* feat-icon bg */
  --sky:            #EEF3FF;     /* svc-icon bg, light surface */
  --purple:         #9333EA;     /* gradient end */
  --purple-dark:    #7A28C5;     /* hover gradient end */
  --navy:           #1E3A8A;
  --navy-deep:      #04091F;     /* dark sections */
  --indigo-deep:    #1E0B64;
  --dark:           #0C0F1A;

  /* — COLORS: neutral */
  --ink:            #1A1D1C;     /* h-text, price */
  --text:           #374151;     /* body text */
  --text-muted:     #767777;     /* secondary text */
  --text-subtle:    #9CA3AF;     /* tier labels, /mo */
  --text-soft:      #6B7280;     /* feat-body */
  --bg:             #FFFFFF;
  --surface:        #FCFCFC;     /* card alt */
  --surface-tint:   #F4F7FF;     /* tinted section bg */
  --border:         #E5E7EB;
  --border-mid:     #E8E8E8;     /* feat-card */
  --border-soft:    #F3F4F6;     /* divider */
  --border-strong:  #D1D2D2;     /* price-card */

  /* — GRADIENTS */
  --grad-brand:        linear-gradient(135deg, var(--cobalt-bright) 0%, var(--purple) 100%);
  --grad-brand-hover:  linear-gradient(135deg, var(--cobalt-dark)   0%, var(--purple-dark) 100%);
  --grad-dark:         linear-gradient(75deg,  var(--navy-deep) 0%, var(--indigo-deep) 100%);

  /* — TYPOGRAPHY: families */
  --font-display:   'Outfit', sans-serif;
  --font-body:      'DM Sans', sans-serif;

  /* — TYPE SCALE (numeric, px) */
  --fs-10:    10px;
  --fs-12:    12px;
  --fs-14:    14px;
  --fs-16:    16px;
  --fs-18:    18px;
  --fs-20:    20px;
  --fs-24:    24px;
  --fs-26:    26px;
  --fs-28:    28px;
  --fs-30:    30px;
  --fs-32:    32px;
  --fs-36:    36px;
  --fs-40:    40px;
  --fs-46:    46px;
  --fs-48:    48px;
  --fs-56:    56px;
  /* — TYPE SCALE: fluid */
  --fs-h1:    clamp(44px, 7vw, 64px);
  --fs-h2:    clamp(36px, 6vw, 56px);

  /* — LINE-HEIGHTS (pixel paired with type scale) */
  --lh-12:    12px;
  --lh-20:    20px;
  --lh-22:    22px;
  --lh-24:    24px;
  --lh-26:    26px;
  --lh-28:    28px;
  --lh-30:    30px;
  --lh-32:    32px;
  --lh-36:    36px;
  --lh-40:    40px;
  --lh-44:    44px;
  --lh-48:    48px;
  --lh-56:    56px;
  --lh-64:    64px;
  /* — LINE-HEIGHTS: unitless ratios */
  --lh-tight:    1.2;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* — SPACING (4px-based scale; use for padding / gap / margin / icon sizes) */
  --sp-1:     4px;
  --sp-2:     8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-9:    36px;
  --sp-10:   40px;
  --sp-11:   44px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-15:   60px;
  --sp-16:   64px;
  --sp-18:   72px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-26:  104px;
  --sp-30:  120px;

  /* — RADIUS */
  --r-sm:    8px;     /* buttons, inputs */
  --r-md:    12px;    /* icon containers */
  --r-lg:    16px;    /* mid cards */
  --r-xl:    20px;    /* feat-card mobile, form */
  --r-2xl:   24px;    /* feat-card, price-card */
  --r-3xl:   28px;    /* popular wrap */
  --r-pill:  999px;
  --r-full:  50%;

  /* — SHADOWS */
  --shadow-card:        0 4px 16px rgba(0,0,0,.05);
  --shadow-card-hover:  0 8px 32px rgba(37,99,235,.10);
  --shadow-card-soft:   0 6px 24px rgba(37,99,235,.08);
  --shadow-cobalt:      0 2px 12px rgba(29,111,255,.25);
  --shadow-cobalt-lift: 0 8px 28px rgba(37,99,235,.45), 0 2px 6px rgba(147,51,234,.25);
  --shadow-form:        0 8px 40px rgba(0,0,0,.07);
  --shadow-form-glow:   0 0 0 3px rgba(37,99,235,.12);
  --shadow-header:      0 1px 12px rgba(0,0,0,.06);
  --shadow-white:       0 4px 16px rgba(0,0,0,.15);
  --shadow-white-lift:  0 8px 28px rgba(0,0,0,.20);
  --shadow-popular:     0 12px 40px rgba(37,99,235,.18);
  --shadow-price-lift:  0 12px 32px rgba(0,0,0,.06);
  --shadow-faq:         0 4px 8px rgba(0,0,0,.05);
  --shadow-dropdown:    0 20px 60px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);

  /* — TRANSITIONS */
  --t-fast:    .15s ease;                            /* color, opacity */
  --t-snap:    .15s cubic-bezier(.34,1.56,.64,1);    /* spring lift */
  --t-smooth:  .2s  ease;                            /* hover bg/border */
  --t-pop:     .2s  cubic-bezier(.34,1.56,.64,1);    /* card lift */

  /* — Z-INDEX */
  --z-header:       50;
  --z-mobile-menu:  40;
  --z-modal:        60;

  /* — LAYOUT */
  --header-h-mobile:   64px;
  --header-h-desktop:  96px;
}


/* ============================================================
   BASE — html, body, scroll
   ============================================================ */
html { scroll-behavior:smooth; scroll-padding-top:72px; }         /* mobile header 64 + 8 */

body {
  font-family:var(--font-body);
  color:#111;
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  padding-top: var(--header-h-mobile);                            /* clear fixed mobile header */
}

h1, h2, h3, h4 { font-family:var(--font-display); }


/* ============================================================
   UTILITY TOKEN CLASSES — responsive type/spacing/radius
   Mobile-first: defaults = mobile, sm (≥640) + lg (≥1024) scale up
   (overrides live in RESPONSIVE block at end of file).
   ============================================================ */
/* Typography */
.text-h2      { font-size: var(--fs-36); line-height: var(--lh-tight); }
.text-h3      { font-size: var(--fs-24); line-height: 1.25; }
.text-body    { font-size: var(--fs-18); line-height: var(--lh-relaxed); }

/* Spacing (padding) */
.pad-section    { padding-top: var(--sp-14); padding-bottom: var(--sp-14); }
.pad-section-sm { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.pad-card-lg    { padding: var(--sp-4); }
.pad-card       { padding: var(--sp-3); }
.pad-x          { padding-left: var(--sp-4); padding-right: var(--sp-4); }

/* Gap + margins */
.gap-stack    { gap: var(--sp-3); }
.mb-head      { margin-bottom: var(--sp-8); }

/* Radius */
.rad-card-lg  { border-radius: var(--r-2xl); }
.rad-card     { border-radius: var(--r-md); }


/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.grad {
  background:var(--grad-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline;
}

.section-label {
  display:inline-block;
  font-family:var(--font-display);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cobalt);
  margin-bottom: var(--sp-4);
}


/* ============================================================
   BUTTONS
   - Variants:   .btn-primary | .btn-outline | .btn-white | .btn-outline-white
   - Sizes:      .btn-sm (header) | .btn-md (CTAs) | .btn-lg (hero/form)
   - !important is needed to win over Tailwind utility text-* and py-* mixed into the button.
   ============================================================ */

/* — Primary: brand gradient → darker hover */
.btn-primary {
  display:inline-block;
  background: var(--grad-brand) !important;
  color:#fff !important;
  font-weight:600;
  border:1.5px solid transparent;
  border-radius: var(--r-sm);
  text-decoration:none;
  box-shadow: var(--shadow-cobalt);
  position:relative; z-index:1;
  transition: transform var(--t-snap), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-primary:hover {
  background: var(--grad-brand-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cobalt-lift);
}

/* — Outline: gray → cobalt border/text on hover */
.btn-outline {
  display:inline-block;
  background:transparent;
  color: var(--text) !important;
  font-weight:500;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--r-sm);
  text-decoration:none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-outline:hover { border-color: var(--cobalt); color: var(--cobalt) !important; }

/* — White: solid white on dark sections */
.btn-white {
  display:inline-block;
  background:#fff;
  color: var(--navy) !important;
  font-weight:600;
  border-radius: var(--r-sm);
  text-decoration:none;
  box-shadow: var(--shadow-white);
  transition: transform var(--t-snap), box-shadow var(--t-fast);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-white-lift); }

/* — Outline white: transparent + thin white border on dark sections */
.btn-outline-white {
  display:inline-block;
  background:transparent;
  color:#fff !important;
  font-weight:500;
  border:1.5px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm);
  text-decoration:none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.08); }

/* — Size tiers (combine with any variant above) */
.btn-sm, .btn-md, .btn-lg {
  white-space:nowrap;
  text-align:center;
  box-sizing:border-box;
}
/* Vertical centering via line-height (= min-height − padding-y×2) preserves
   the base display value (inline-block / block / w-full). */
.btn-sm { min-height: var(--sp-10); padding: var(--sp-2)  var(--sp-4) !important; line-height: var(--lh-24) !important; font-size: var(--fs-14) !important; font-weight:500 !important; }
.btn-md { min-height: var(--sp-12); padding: var(--sp-3)  22px         !important; line-height: var(--lh-24) !important; font-size: var(--fs-16) !important; font-weight:600 !important; }
.btn-lg { min-height: 68px;         padding: var(--sp-5)  30px         !important; line-height: var(--lh-28) !important; font-size: var(--fs-20) !important; font-weight:700 !important; }


/* ============================================================
   FORMS
   ============================================================ */
.form-input {
  width:100%;
  padding: 14px 18px;                                   /* base mobile-ish padding; lg + min-height handled below */
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: var(--fs-18);
  color:#111;
  background:#fff;
  font-family: var(--font-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus       { outline:none; border-color: var(--cobalt); box-shadow: var(--shadow-form-glow); }
.form-input::placeholder { color: var(--text-subtle); }


/* ============================================================
   DESKTOP NAVIGATION — header nav, dropdown mega-menu, nav-pill
   ============================================================ */
.nav-link {
  font-size: var(--fs-18);
  font-weight:500;
  color: var(--text);
  text-decoration:none;
  padding: 6px var(--sp-4) !important;
  border-radius: var(--r-pill);
  position:relative;
  z-index:1;
  cursor:pointer;
  transition: color var(--t-fast);
}

/* ============================================================
   TRANSLUCENT HEADER (opt-in via body.header-translucent)
   Used on pages with dark hero (e.g., merchant-service).
   When scrolled, body gets .is-scrolled and header reverts to default.
   ============================================================ */
.logo-swap                                    { display:inline-block; position:relative; }
.logo-swap .logo-light                        { display:none; }
body.header-translucent .logo-swap .logo-dark { display:none; }
body.header-translucent .logo-swap .logo-light{ display:inline-block; }
body.header-translucent.is-scrolled .logo-swap .logo-dark  { display:inline-block; }
body.header-translucent.is-scrolled .logo-swap .logo-light { display:none; }

body.header-translucent { padding-top: 0 !important; }
@media (min-width: 1024px) {
  body.header-translucent { padding-top: 0 !important; }
}
body.header-translucent header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: background var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth);
}
body.header-translucent .nav-link                       { color: rgba(255,255,255,.95); }
body.header-translucent .nav-link:hover,
body.header-translucent .nav-link.active                { color: #fff; }
body.header-translucent #nav-pill                       { background: rgba(255,255,255,.15); }
body.header-translucent .nav-link .dd-chev              { color: rgba(255,255,255,.7); }
body.header-translucent header > div:not(#mobile-menu) .btn-primary {
  background: #fff !important;
  color: var(--cobalt) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
body.header-translucent header > div:not(#mobile-menu) .btn-primary:hover { background: #F4F7FF !important; }
body.header-translucent #hamburger {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
body.header-translucent #hamburger:hover {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}

/* Scrolled — revert to solid white header */
body.header-translucent.is-scrolled header {
  background: #fff !important;
  border-bottom-color: var(--border-soft) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,.06) !important;
}
body.header-translucent.is-scrolled .nav-link            { color: var(--text); }
body.header-translucent.is-scrolled .nav-link:hover,
body.header-translucent.is-scrolled .nav-link.active     { color: var(--cobalt); }
body.header-translucent.is-scrolled #nav-pill            { background: rgba(37,99,235,.09); }
body.header-translucent.is-scrolled .nav-link .dd-chev   { color: inherit; opacity: .5; }
body.header-translucent.is-scrolled header > div:not(#mobile-menu) .btn-primary {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: var(--shadow-cobalt) !important;
}
body.header-translucent.is-scrolled header > div:not(#mobile-menu) .btn-primary:hover {
  background: var(--grad-brand-hover) !important;
  box-shadow: var(--shadow-cobalt-lift) !important;
}
body.header-translucent.is-scrolled #hamburger {
  color: #4B5563;
  border-color: #E5E7EB;
}
.nav-link * { cursor:pointer; }
.nav-link:hover, .nav-link.active { color: var(--cobalt); }

/* Sliding background pill that follows the hovered nav link */
#nav-pill {
  position:absolute;
  background:rgba(37,99,235,.09);
  border-radius: var(--r-pill);
  pointer-events:none;
  height: 34px;
  top:50%;
  transform: translateY(-50%);
  z-index:0;
  opacity:0;
  transition: left .22s cubic-bezier(.34,1.56,.64,1), width .22s cubic-bezier(.34,1.56,.64,1), opacity var(--t-fast);
}

/* Dropdown trigger + animated chevron */
.dropdown { position:relative; }
/* Invisible hover bridge over the 14px gap to dropdown-menu — keeps pointer cursor + hover state continuous */
.dropdown.is-open::after {
  content:''; position:absolute; left:0; right:0; top:100%; height:14px; cursor:pointer;
}
.dd-chev  { transition: transform var(--t-pop); }
.dropdown.is-open .dd-chev { transform: rotate(180deg); }

/* Mega-menu panel — hidden by default, .is-open flips visibility/opacity */
.dropdown-menu {
  position:absolute; top:calc(100% + 14px); left:50%;
  min-width: 600px; padding: var(--sp-6);
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dropdown);
  display:flex; gap: var(--sp-7); z-index:100;
  visibility:hidden; opacity:0;
  transform: translateY(-10px) translateX(-50%);
  pointer-events:none;
  transition: opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1), visibility 0s .18s;
}
.dropdown.is-open .dropdown-menu {
  display:flex;
  visibility:visible; opacity:1;
  transform: translateY(0) translateX(-50%) !important;
  pointer-events:auto;
  transition: opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1), visibility 0s 0s;
}

.dd-col       { flex:1; }
.dd-col-title {
  font-family: var(--font-display);
  font-size: var(--fs-10);   /* .65rem ≈ 10.4px */
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: var(--sp-4);
}

/* Rich dropdown link: icon + label + description */
.dd-link-rich {
  display:flex; align-items:flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 6px;
  border-radius: 10px;
  text-decoration:none;
  margin-bottom: var(--sp-1);
  cursor:pointer;
  transition: background var(--t-fast);
}
.dd-link-rich * { cursor:pointer; }
.dd-link-rich:last-child { margin-bottom:0; }
.dd-link-rich:hover      { background:#F0F5FF; }

.dd-icon {
  width: var(--sp-9); height: var(--sp-9); min-width: var(--sp-9);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--text);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dd-link-rich:hover .dd-icon { background: var(--cobalt); color:#fff; border-color: var(--cobalt); }

.dd-link-label { font-size: var(--fs-16); font-weight:600; color:#111; line-height: var(--lh-snug); }
.dd-link-desc  { font-size: var(--fs-14); color: var(--text-soft); margin-top:2px; line-height: 1.35; }


/* ============================================================
   MOBILE MENU — fixed full-viewport panel below 64px header.
   Indented sub-menu (Marketing Services / Business Solutions) under Services.
   ============================================================ */
#mobile-menu {
  position:fixed;
  top: var(--header-h-mobile); left:0; right:0; bottom:0;
  background:#fff;
  z-index: var(--z-mobile-menu);
  overflow-y:auto;
  display:none;
  border-top: 1px solid var(--border-soft);
}
#mobile-menu.open { display:block; }

body.mm-open { overflow:hidden; }   /* lock body scroll while menu open */

.mobile-nav { display:flex; flex-direction:column; padding: var(--sp-3) var(--sp-2); }

.mm-link {
  display:block;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--text);
  text-decoration:none;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.mm-link:hover, .mm-link.active { color: var(--cobalt); }

/* Sub-section toggle (children of Services) — indented +16px past .mm-link */
.mm-sub-toggle {
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);
  background:transparent;
  border:none;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--text);
  cursor:pointer;
  text-align:left;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.mm-sub-toggle:hover { color: var(--cobalt); }

.mm-icon { width: var(--sp-4); height: var(--sp-4); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mm-icon::before {
  content:'+';
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-subtle);
  transition: transform var(--t-smooth);
}
.mm-sub-toggle[aria-expanded="true"] .mm-icon::before { content:'−'; }

.mm-sub-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.mm-sub-toggle[aria-expanded="true"] + .mm-sub-items { max-height: 600px; }

.mm-sub-link {
  display:block;
  padding: 10px var(--sp-4) 10px var(--sp-12);    /* +16px deeper than .mm-sub-toggle */
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-soft);
  text-decoration:none;
  transition: color var(--t-fast);
}
.mm-sub-link:hover, .mm-sub-link.active { color: var(--cobalt); }

.mm-cta {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-2);
}


/* ============================================================
   CARD COMPONENTS
   ============================================================ */

/* — .svc-card (Services overview page listing) */
.svc-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  background:#fff;
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column;
  height:100%;
  transition: border-color var(--t-smooth), box-shadow var(--t-smooth), transform var(--t-pop);
}
.svc-card:hover                    { border-color: var(--cobalt-light); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.svc-card:hover .svc-icon          { background: var(--cobalt); }
.svc-card:hover .svc-icon svg      { color:#fff; }

.svc-icon {
  width: var(--sp-12); height: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--sky);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-5);
  transition: background var(--t-smooth);
}

/* Pin price + arrow row to bottom so cards align across columns */
.svc-card-footer            { margin-top:auto; padding-top: var(--sp-6); border-top: 1px solid #F0F1F4; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); }
.svc-card-footer .svc-price { font-size: var(--fs-14); color: var(--text-subtle); line-height: 1.4; }
.svc-card-footer .svc-price strong { color:#1F2937; font-size: var(--fs-16); font-weight:700; }
.svc-card-footer .svc-cta   { font-size: var(--fs-14); color: var(--cobalt); font-weight:600; display:inline-flex; align-items:center; gap: 6px; white-space:nowrap; transition: gap var(--t-smooth), color var(--t-smooth); }
.svc-card:hover .svc-card-footer .svc-cta { gap: 10px; }
.svc-card-footer .svc-cta svg { width: var(--fs-16); height: var(--fs-16); }


/* — .feat-card (Service-detail "What's Included") — Figma 10122:891 */
.feat-card {
  border: 1px solid var(--border-mid);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  background:#fff;
  display:flex; flex-direction:column;
  gap: var(--sp-15);                       /* big gap between icon and content per Figma */
  align-items:flex-start;
  transition: border-color var(--t-smooth), box-shadow var(--t-smooth), transform var(--t-pop);
}
.feat-card:hover { border-color: var(--cobalt-light); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.feat-icon {
  width: var(--sp-12); height: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--cobalt-soft);
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-3);
  flex-shrink:0;
}
.feat-icon > svg,
.feat-icon > img { width: var(--sp-6); height: var(--sp-6); color: var(--cobalt); display:block; }

.feat-head    { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; width:100%; }
.feat-title   { font-family: var(--font-display); font-weight:700; font-size: var(--fs-24); line-height: var(--lh-32); color:#111827; margin:0; }
.feat-body    { font-family: var(--font-body);    font-weight:400; font-size: var(--fs-18); line-height: var(--lh-28); color: var(--text-soft); margin:0; }
.feat-content { display:flex; flex-direction:column; gap: var(--sp-4); width:100%; }

/* AI-Powered pill (in .feat-head) — dark gradient, green border */
.feat-pill-ai {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px var(--sp-4);
  border: 1.5px solid #96EF6A;
  border-radius: var(--r-xl);
  background: var(--grad-dark);
  color: var(--surface);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-12);
  white-space: nowrap;
  flex-shrink: 0;
}


/* — .price-card (Pricing page tiers) — Figma 10160:347
   Layout via CSS order: header → button → features (no HTML change needed).
   Works for both service-page nested header div + pricing.html flat label/price/desc. */
.price-card {
  display:flex; flex-direction:column;
  gap: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  padding: var(--sp-9);
  background:#fff;
  transition: border-color var(--t-smooth), box-shadow var(--t-smooth), transform var(--t-smooth);
}
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-price-lift); }

.price-card > a { order:50; margin-bottom:0 !important; }
.price-card > ul,
.price-card > div.space-y-0,
.price-card > div.space-y-0\.5 { order:99; margin-bottom:0 !important; flex:1; }

/* Type within card — Figma spec */
.price-card h3                          { font-size: var(--fs-24) !important; line-height: var(--lh-32) !important; color: var(--ink) !important; }                /* plan name */
.price-card p,
.price-card li,
.price-card .text-sm                    { font-size: var(--fs-18); line-height: var(--lh-28); }                                                                    /* body/feature */
.price-card p                           { color: var(--text-muted); }                                                                                              /* plan desc */
.price-card .text-4xl                   { font-size: var(--fs-48) !important; line-height: var(--lh-56) !important; color: var(--ink) !important; }                /* $ price */
.price-card .text-lg.text-gray-400      { font-size: var(--fs-20) !important; color: var(--text-muted) !important; font-weight:400 !important; }                   /* /mo suffix */
.price-card .uppercase.tracking-widest  { font-size: var(--fs-16) !important; line-height: var(--lh-24) !important; }                                              /* tier label */

/* Get Started CTA — full-width 68px tall, 20/28 Bold */
.price-card a {
  width:100% !important;
  text-align:center;
  padding: var(--sp-5) var(--sp-8) !important;
  min-height: 68px !important;
  font-size: var(--fs-20) !important;
  font-weight: 700 !important;
  line-height: var(--lh-28) !important;
  border-radius: var(--r-sm) !important;
  display:flex; align-items:center; justify-content:center;
}

/* Feature checklist row (used inside price-card and others) */
.check-item              { display:flex; align-items:center; gap: var(--sp-4); padding: 6px 0; }
.check-item svg,
.check-item img          { flex-shrink:0; margin-top:0; width: var(--sp-5); height: var(--sp-5); }
.check-item span,
.check-item p            { color: var(--text-muted); }

/* — Popular wrapper around .price-card — cobalt frame + "Most Popular" banner */
.price-popular-wrap {
  display:flex; flex-direction:column;
  align-items: stretch;
  background: var(--cobalt);
  border-radius: var(--r-3xl);
  padding: var(--sp-3) var(--sp-1) var(--sp-1);   /* 12 top for text, 4 sides+bottom */
  gap: var(--sp-3);
  box-shadow: var(--shadow-popular);
}
.price-popular-text {
  margin: 0;
  padding: 0 var(--sp-4);
  color: var(--surface);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
}
/* Inner card inside the popular wrapper — strip its outline border */
.price-popular-wrap > .price-card {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--r-2xl) !important;
  flex: 1;
}

/* If badge text is wrapped in an inner span (pricing/go-checkin pattern), strip its styling */
.price-card.featured > .absolute > span {
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  font:inherit !important;
  color:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
  font-weight:inherit !important;
  font-family:inherit !important;
}


/* ============================================================
   SHARED MISC COMPONENTS
   ============================================================ */

/* Industry pill — Figma 10107:2415 */
.industry-tag {
  display:inline-flex; align-items:center;
  gap: var(--sp-2);
  background: var(--sky);
  border: 1px solid #D0DCF5;
  border-radius: 30px;
  padding: 10px var(--sp-6) 10px var(--sp-5);
  color: var(--cobalt);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  white-space: nowrap;
}
.industry-tag img { width: var(--sp-6); height: var(--sp-6); flex-shrink:0; }

/* Dark variant — glass pill on .dark-section; whitewashes cobalt icon */
.dark-section .industry-tag {
  background: rgba(255,255,255,0.20);
  border: none;
  color: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dark-section .industry-tag img { filter: brightness(0) invert(1); }


/* GEO subsection (SEO page) — Figma 10165:1819
   Light-blue gradient wrap, dark pill at top, 3-card grid with light-blue border */
.geo-wrap {
  margin-top: var(--sp-20);
  padding: var(--sp-12) 0;
  border-radius: var(--r-2xl);
  background: linear-gradient(to bottom, #D0E0FF 0%, rgba(218,219,255,0.5) 48%, rgba(231,239,255,0) 100%);
  display:flex; flex-direction:column;
  align-items:center;
  gap: var(--sp-4);
}
.geo-inner {
  display:flex; flex-direction:column;
  align-items:center;
  gap: var(--sp-10);
  width:100%;
}
.geo-pill {
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4);
  border: 1.5px solid #96EF6A;
  border-radius: var(--r-xl);
  background: linear-gradient(60deg, var(--navy-deep) 0%, var(--indigo-deep) 100%);
  color: var(--surface);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.geo-pill svg          { width: var(--sp-6); height: var(--sp-6); flex-shrink:0; }
.geo-body {
  max-width: 600px;
  padding: 0 var(--sp-6);
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-28);
}
.geo-grid              { padding: 0 var(--sp-10); width:100%; }
.geo-wrap .feat-card   { border-color: #D0E0FF; }


/* FAQ accordion — Figma 10122:1131 */
.faq-list {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 0 var(--sp-8);
  box-shadow: var(--shadow-faq);
}
.faq-item              { border-bottom: 1px solid var(--border-mid); }
.faq-item:last-child   { border-bottom: none; }

.faq-btn,
.faq-btn *             { cursor:pointer !important; }    /* beat Tailwind preflight's button cursor reset */
.faq-btn {
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding: 26px 0;                   /* Figma spec — off-grid from sp scale */
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-28);
  color: var(--ink);
}
.faq-btn:hover .faq-icon { color: var(--text-soft); }    /* subtle hover (gray-400 → gray-500) */

.faq-answer {
  display: none;
  padding-bottom: 26px;
  color: var(--text-muted);
  font-size: var(--fs-18);
  line-height: var(--lh-28);
}
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-icon   { transform: rotate(45deg); }

.faq-icon {
  flex-shrink: 0;
  width: var(--sp-6); height: var(--sp-6);
  color: var(--text-subtle);
  transition: transform var(--t-smooth);
}


/* ============================================================
   DARK SECTION OVERRIDES
   Applied via parent class .dark-section; overrides Tailwind text-gray-* utilities
   on inner elements with whitewashed/blue-tinted equivalents.
   ============================================================ */
.dark-section .section-label       { color: rgba(160,190,255,.82) !important; }
.dark-section h2,
.dark-section h3                   { color: #fff !important; }
.dark-section p                    { color: rgba(210,225,255,.82) !important; }
.dark-section .text-gray-500       { color: rgba(200,215,255,.75) !important; }
.dark-section .text-gray-600       { color: rgba(200,215,255,.8)  !important; }
.dark-section .text-gray-400       { color: rgba(180,200,255,.65) !important; }
.dark-section .text-gray-700       { color: rgba(210,225,255,.85) !important; }
.dark-section .text-gray-900,
.dark-section .text-gray-950       { color: #fff !important; }
.dark-section .text-cobalt         { color: #7BADFF !important; }


/* ============================================================
   ANIMATED BACKGROUND LAYERS — aurora, shine-border, bga-orbs
   ============================================================ */

/* — Aurora shimmer (hero backgrounds) */
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
.aurora-layer {
  position:absolute;
  inset:-10px;
  background-image:
    repeating-linear-gradient(100deg, #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16%),
    repeating-linear-gradient(100deg, #3B82F6 10%, #A5B4FC 15%, #93C5FD 20%, #DDD6FE 25%, var(--cobalt-light) 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(1);
  opacity: 0.5;
  animation: aurora 60s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.aurora-layer::after {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(100deg, #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16%),
    repeating-linear-gradient(100deg, #3B82F6 10%, #A5B4FC 15%, #93C5FD 20%, #DDD6FE 25%, var(--cobalt-light) 30%);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}


/* — Shine border (form wrapper) — spinning conic gradient ring */
@keyframes shine-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.shine-border-wrap {
  position: relative;
  border-radius: 22px;
  padding: 2px;
}
.shine-border-glow {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
}
.shine-border-spin {
  position: absolute;
  inset: -100%;
  filter: blur(6px);
  animation: shine-spin 4s linear infinite;
  background: conic-gradient(from 0deg, var(--cobalt-bright), var(--purple), #22D3EE, var(--cobalt-bright));
}


/* — BGA orbs (dark section blob backgrounds) */
@keyframes bga-move-vertical   { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(50%); } }
@keyframes bga-move-circle     { 0%      { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes bga-move-horizontal { 0%,100% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } }

.bga-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(40deg, rgb(4,9,30), rgb(30,11,100));
  /* Isolate stacking context so mix-blend-mode children composite predictably (fix horizontal tearing on iOS Safari) */
  isolation: isolate;
  /* Promote to GPU layer — prevents tile-flush seams when orbs animate */
  transform: translateZ(0);
}
.bga-orbs {
  position: absolute;
  inset: 0;
  filter: url(#blurMeStats) blur(40px);
  /* Keep filter output on its own compositor layer so iOS doesn't re-tile mid-animation */
  will-change: filter;
  transform: translateZ(0);
}
.bga-orb {
  position: absolute;
  mix-blend-mode: hard-light;
  width: 700px; height: 700px;
  top: calc(50% - 350px);
  left: calc(50% - 350px);
  will-change: transform;
}
.bga-orb-1 {
  background: radial-gradient(circle at center, rgba(37,99,235,.8) 0, rgba(37,99,235,0) 50%) no-repeat;
  transform-origin: center center;
  animation: bga-move-vertical 30s ease infinite;
}
.bga-orb-2 {
  background: radial-gradient(circle at center, rgba(147,51,234,.8) 0, rgba(147,51,234,0) 50%) no-repeat;
  transform-origin: calc(50% - 400px);
  animation: bga-move-circle 20s reverse infinite;
}
.bga-orb-3 {
  background: radial-gradient(circle at center, rgba(34,211,238,.8) 0, rgba(34,211,238,0) 50%) no-repeat;
  transform-origin: calc(50% + 400px);
  animation: bga-move-circle 40s linear infinite;
}
.bga-orb-4 {
  background: radial-gradient(circle at center, rgba(29,111,255,.8) 0, rgba(29,111,255,0) 50%) no-repeat;
  transform-origin: calc(50% - 200px);
  animation: bga-move-horizontal 40s ease infinite;
  opacity: .7;
}
.bga-orb-5 {
  background: radial-gradient(circle at center, rgba(120,60,240,.8) 0, rgba(120,60,240,0) 50%) no-repeat;
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: bga-move-circle 20s ease infinite;
}


/* ============================================================
   FOOTER OVERRIDES
   ============================================================ */
footer .grid a { font-size: var(--fs-18); }


/* ============================================================================================================
   ============================================================================================================
                          RESPONSIVE OVERRIDES
   All breakpoint rules below. Order: min-width ascending → max-width descending.
   Each block lists components in the same order as the base styles above.
   ============================================================================================================
   ============================================================================================================ */


/* ====================================================================
   @media (min-width:640px)  —  TABLET+ (mobile-first scale-ups)
   ==================================================================== */
@media (min-width: 640px) {
  /* — Utility token classes scale up */
  .text-h2      { font-size: var(--fs-46); line-height: 1.15; }
  .text-h3      { font-size: var(--fs-26); line-height: var(--lh-tight); }
  .text-body    { font-size: var(--fs-18); }
  .pad-section    { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
  .pad-section-sm { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  .pad-card-lg    { padding: var(--sp-5); }
  .pad-card       { padding: var(--sp-4); }
  .pad-x          { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .gap-stack      { gap: var(--sp-4); }
  .mb-head        { margin-bottom: var(--sp-10); }

  /* — Form input bumps to match btn-lg height (68px) */
  .form-input     { min-height: 68px; }
}


/* ====================================================================
   @media (min-width:768px)  —  MD+ (price grid alignment)
   ==================================================================== */
/* Row offset: at md+ the outline cards drop by the cobalt-area height so their
   top edges align with the wrapper's inner card → h3/price/button row-aligned. */
@media (min-width: 768px) {
  .grid:has(> .price-popular-wrap) > .price-card { margin-top: var(--sp-11); }
}


/* ====================================================================
   @media (min-width:1024px)  —  DESKTOP (header height, hide mobile menu, utility scale)
   ==================================================================== */
@media (min-width: 1024px) {
  html { scroll-padding-top: var(--sp-26); }                       /* 104 = desktop header 96 + 8 */
  body { padding-top: var(--header-h-desktop); }                   /* clear fixed desktop header */

  /* — Utility token classes scale up to desktop */
  .text-h2      { font-size: var(--fs-56); line-height: var(--lh-64); }
  .text-h3      { font-size: var(--fs-28); line-height: var(--lh-tight); }
  .text-body    { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
  .pad-section    { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
  .pad-section-sm { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  .pad-card-lg    { padding: var(--sp-6); }
  .pad-card       { padding: var(--sp-4); }
  .pad-x          { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .gap-stack      { gap: var(--sp-6); }
  .mb-head        { margin-bottom: var(--sp-14); }
  .rad-card-lg    { border-radius: var(--sp-10); }                 /* 40px */
  .rad-card       { border-radius: var(--r-lg); }

  /* — Mobile menu hidden once desktop nav takes over */
  #mobile-menu { display:none !important; }
}


/* ====================================================================
   @media (max-width:639px)  —  MOBILE overrides
   ==================================================================== */
@media (max-width: 639px) {
  /* — Buttons: smaller padding, ≥40px touch target */
  .btn-sm { min-height: var(--sp-10); padding: var(--sp-2) 14px        !important; line-height: var(--lh-24) !important; font-size: var(--fs-14) !important; }
  .btn-md { min-height: var(--sp-12); padding: var(--sp-3) 18px        !important; line-height: var(--lh-24) !important; font-size: var(--fs-14) !important; }
  .btn-lg { min-height: var(--sp-14); padding: var(--sp-4) var(--sp-6) !important; line-height: var(--lh-24) !important; font-size: var(--fs-16) !important; }

  /* — Form input matches btn-lg height (56px) */
  .form-input { padding: var(--sp-4) 18px !important; font-size: var(--fs-16) !important; line-height: var(--lh-24) !important; min-height: var(--sp-14); }

  /* — feat-card: tighter — gap 60→24, padding 32→24, smaller type */
  .feat-card    { padding: var(--sp-6); gap: var(--sp-6); border-radius: var(--r-xl); }
  .feat-title   { font-size: var(--fs-20); line-height: var(--lh-28); }
  .feat-body    { font-size: var(--fs-16); line-height: var(--lh-24); }
  .feat-content { gap: var(--sp-3); }

  /* — price-card: tighter spacing + button follows common btn-md sizing */
  .price-card                            { padding: var(--sp-6); gap: var(--sp-3); }
  .price-card .text-4xl                  { font-size: var(--fs-36) !important; line-height: var(--lh-44) !important; }
  .price-card .text-lg.text-gray-400     { font-size: var(--fs-16) !important; }
  .price-card p,
  .price-card li,
  .price-card .text-sm                   { font-size: var(--fs-16); line-height: var(--lh-24); }
  .price-card .uppercase.tracking-widest { font-size: var(--fs-14) !important; line-height: var(--lh-20) !important; }
  .check-item                            { padding: var(--sp-1) 0; gap: var(--sp-3); }
  .price-card a {
    padding: var(--sp-3) 22px !important;
    min-height: var(--sp-12) !important;
    font-size: var(--fs-16) !important;
    font-weight: 600 !important;
    line-height: var(--lh-24) !important;
  }

  /* — industry-tag: smaller pill */
  .industry-tag     { padding: var(--sp-2) var(--sp-4) var(--sp-2) 14px; font-size: var(--fs-14); line-height: var(--lh-22); gap: 6px; }
  .industry-tag img { width: var(--sp-5); height: var(--sp-5); }

  /* — GEO subsection */
  .geo-wrap     { padding: var(--sp-8) 0; margin-top: var(--sp-6); }
  .geo-grid     { padding: 0 var(--sp-5); }
  .geo-pill     { font-size: var(--fs-12); padding: 6px var(--sp-4) 6px var(--sp-3); }
  .geo-pill svg { width: 18px; height: 18px; }

  /* — FAQ accordion */
  .faq-list   { padding: 0 var(--sp-5); }
  .faq-btn    { padding: var(--sp-5) 0; font-size: var(--fs-18); line-height: var(--lh-26); }
  .faq-answer { padding-bottom: var(--sp-5); font-size: var(--fs-16); line-height: var(--lh-26); }
}