/*
 * Smart LLC Setup — global design foundation
 *
 * Tokens and components are opt-in. Use the `sls-` prefix when applying these
 * classes so existing page styles remain unaffected until each page is
 * deliberately redesigned.
 */

:root {
  /* Shared brand palette. Blue is an accent; everyday surfaces stay neutral. */
  --color-white: #FFFFFF;
  --color-background: var(--color-white);
  --color-surface: #F7F8FA;
  --color-surface-blue: #F3F7FC;
  --color-text: #111827;
  --color-text-secondary: #667085;
  --color-border: #E5E7EB;
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-navy: #0F172A;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;

  /* Brand */
  --sls-color-brand: var(--color-primary);
  --sls-color-brand-hover: var(--color-primary-dark);
  --sls-color-brand-strong: #1D4ED8;
  --sls-color-navy: var(--color-navy);
  --sls-color-navy-deep: #111827;
  --sls-color-brand-soft: #F3F7FC;

  /* Surfaces */
  --sls-color-bg: var(--color-background);
  --sls-color-bg-subtle: var(--color-surface);
  --sls-color-bg-muted: var(--color-surface-blue);
  --sls-color-bg-dark: #0F172A;
  --sls-color-bg-dark-raised: #1F2937;

  /* Text */
  --sls-color-text: var(--color-text);
  --sls-color-text-secondary: var(--color-text-secondary);
  --sls-color-text-muted: #98A2B3;
  --sls-color-text-inverse: #FFFFFF;
  --sls-color-text-inverse-muted: #D0D5DD;

  /* Borders and focus */
  --sls-color-border: var(--color-border);
  --sls-color-border-strong: #D0D5DD;
  --sls-color-border-inverse: rgba(255, 255, 255, 0.16);
  --sls-color-focus: #2563EB;
  --sls-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Success and approval */
  --sls-color-success: var(--color-success);
  --sls-color-trustpilot: #4CB57B;
  --sls-color-success-strong: #15803D;
  --sls-color-success-bg: #F0FDF4;
  --sls-color-success-border: #BBF7D0;

  /* Typography: DM Sans is the single site-wide brand family. */
  --sls-font-family: "DM Sans", sans-serif;
  --sls-font-family-mono: var(--sls-font-family);
  --sls-font-weight-regular: 400;
  --sls-font-weight-medium: 500;
  --sls-font-weight-semibold: 600;
  --sls-font-weight-bold: 700;
  --sls-font-weight-extrabold: 700;
  --sls-font-size-xs: 0.75rem;
  --sls-font-size-sm: 0.9375rem;
  --sls-font-size-base: 1rem;
  --sls-font-size-lg: 1.125rem;
  --sls-font-size-xl: 1.25rem;
  --sls-font-size-2xl: 1.5rem;
  --sls-font-size-3xl: 2rem;
  --sls-font-size-4xl: 2.75rem;
  --sls-line-height-tight: 1.15;
  --sls-line-height-heading: 1.25;
  --sls-line-height-body: 1.65;

  /* Spacing scale */
  --sls-space-1: 0.25rem;
  --sls-space-2: 0.5rem;
  --sls-space-3: 0.75rem;
  --sls-space-4: 1rem;
  --sls-space-5: 1.25rem;
  --sls-space-6: 1.5rem;
  --sls-space-8: 2rem;
  --sls-space-10: 2.5rem;
  --sls-space-12: 3rem;
  --sls-space-16: 4rem;
  --sls-space-20: 5rem;
  --sls-section-space: clamp(3.5rem, 7vw, 6rem);
  --sls-section-space-compact: clamp(2.5rem, 5vw, 4rem);

  /* Shape and elevation */
  --sls-radius-sm: 0.375rem;
  --sls-radius-md: 0.625rem;
  --sls-radius-lg: 0.75rem;
  --sls-radius-xl: 1rem;
  --sls-radius-pill: 999px;
  --sls-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.045);
  --sls-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.06);
  --sls-shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.09);
  --sls-shadow-brand: 0 4px 12px rgba(37, 99, 235, 0.12);

  /* Layout widths */
  --sls-container-narrow: 48rem;
  --sls-container-content: 58rem;
  --sls-container: 72rem;
  --sls-container-wide: 80rem;
  --sls-gutter: clamp(1.125rem, 3vw, 2rem);

  /* Breakpoint reference values (CSS custom properties cannot be used in
     media-query conditions; repeat these values in @media rules as needed). */
  --sls-breakpoint-sm: 30rem;   /* 480px */
  --sls-breakpoint-md: 48rem;   /* 768px */
  --sls-breakpoint-lg: 64rem;   /* 1024px */
  --sls-breakpoint-xl: 80rem;   /* 1280px */

  /* Component defaults */
  --sls-button-height: 3rem;
  --sls-button-radius: var(--sls-radius-pill);
  --sls-card-radius: var(--sls-radius-lg);
  --sls-card-padding: clamp(1.25rem, 3vw, 2rem);
  --sls-transition: 180ms ease;
  --sls-font-size-h1: 3.5rem;
  --sls-font-size-h2: 2.5rem;
  --sls-font-size-h3: 1.125rem;

  /* Semantic accents */
  --sls-color-warning: var(--color-warning);
  --sls-color-danger: var(--color-danger);
  --sls-color-warning-bg: #FFFBEB;
  --sls-color-warning-border: #FDE68A;
  --sls-color-danger-bg: #FEF2F2;
  --sls-color-danger-border: #FECACA;

  /* Legacy page aliases: existing page markup keeps its behavior while sharing
     the same neutral surfaces, type, semantic states, and restrained blue. */
  --blue: var(--sls-color-brand);
  --green: var(--sls-color-success);
  --green-d: var(--sls-color-success-strong);
  --gold: var(--sls-color-warning);
  --gray-50: var(--sls-color-bg-subtle);
  --gray-100: var(--sls-color-bg-muted);
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: var(--sls-color-text-secondary);
  --gray-700: #344054;
  --gray-900: var(--sls-color-text);
  --border: var(--sls-color-border);

  /* Shared theme variables used by the existing daylight and dark landers. */
  --font: var(--sls-font-family);
  --font-d: var(--sls-font-family);
  --w-d: 700;
  --ls-d: -0.025em;
  --rad: var(--sls-radius-md);
  --rad-l: var(--sls-radius-xl);
  --rad-i: var(--sls-radius-md);
  --rad-b: var(--sls-radius-pill);
  --bg: var(--sls-color-bg);
  --bg-alt: var(--sls-color-bg-subtle);
  --ink: var(--sls-color-text);
  --mute: var(--sls-color-text-secondary);
  --sub: #475467;
  --line: var(--sls-color-border);
  --card: var(--sls-color-bg);
  --card-line: var(--sls-color-border);
  --accent: var(--sls-color-brand);
  --accent-h: var(--sls-color-brand-hover);
  --accent-ink: #FFFFFF;
  --accent-2: var(--sls-color-brand);
  --ok: var(--sls-color-success);
  --ok-soft: rgba(22, 163, 74, 0.12);
  --ok-ink: var(--sls-color-success-strong);
  --ok-bg: var(--sls-color-success-bg);
  --ok-line: var(--sls-color-success-border);
  --bad: var(--sls-color-danger);
  --bad-ink: #B91C1C;
  --bad-bg: var(--sls-color-danger-bg);
  --bad-line: var(--sls-color-danger-border);
  --shadow: var(--sls-shadow-sm);
  --shadow-l: var(--sls-shadow-md);
  --shadow-hot: 0 8px 24px rgba(17, 24, 39, 0.08);
  --glow: none;
  --ann-bg: var(--sls-color-bg-subtle);
  --ann-ink: var(--sls-color-text-secondary);
  --ann-hl: var(--sls-color-brand);
  --nav-bg: rgba(255, 255, 255, 0.97);
  --nav-line: var(--sls-color-border);
  --brand-ink: var(--sls-color-navy);
  --hero-bg: var(--sls-color-bg);
  --hero-line: var(--sls-color-border);
  --pill-bg: var(--sls-color-bg-subtle);
  --pill-line: var(--sls-color-border);
  --pill-ink: var(--sls-color-text-secondary);
  --h1-hl: var(--sls-color-text);
  --h1-hl2: var(--sls-color-brand);
  --tick-ink: var(--sls-color-text-secondary);
  --stat-bg: #FFFFFF;
  --stat-line: var(--sls-color-border);
  --stat-ink: var(--sls-color-text);
  --head-bg: var(--sls-color-bg-subtle);
  --head-ink: var(--sls-color-navy);
  --head-sub: var(--sls-color-text-secondary);
  --label: var(--sls-color-text-secondary);
  --input-bg: #FFFFFF;
  --input-line: var(--sls-color-border-strong);
  --focus: rgba(37, 99, 235, 0.18);
  --chip-bg: var(--sls-color-bg-subtle);
  --chip-ink: var(--sls-color-text-secondary);
  --logo-bg: var(--sls-color-bg-subtle);
  --logo-lbl: var(--sls-color-text-muted);
  --logo-ink: var(--sls-color-text-secondary);
  --ico-bg: var(--sls-color-bg-muted);
  --mn: var(--sls-color-border);
  --warn-bg: var(--sls-color-warning-bg);
  --warn-line: var(--sls-color-warning-border);
  --warn-bar: var(--sls-color-warning);
  --warn-ink: #7C4A03;
  --warn-h: #422006;
  --warn-i-ink: #7C4A03;
  --th-bg: var(--sls-color-navy);
  --th-bg2: var(--sls-color-brand);
  --th-bad: #B91C1C;
  --th-ink: #FFFFFF;
  --step-bg: #FFFFFF;
  --step-line: var(--sls-color-border);
  --step-ink: var(--sls-color-navy);
  --step-mute: var(--sls-color-text-secondary);
  --num-bg: var(--sls-color-brand);
  --num-ink: #FFFFFF;
  --when-bg: var(--sls-color-bg-subtle);
  --when-ink: var(--sls-color-text-secondary);
  --price-ink: var(--sls-color-navy);
  --ph-bg: var(--sls-color-bg-subtle);
  --ph-ink: var(--sls-color-text-muted);
  --rev-ink: var(--sls-color-text);
  --av-bg: var(--sls-color-bg-muted);
  --av-ink: var(--sls-color-text-secondary);
  --way-bg: #FFFFFF;
  --way-bg-h: var(--sls-color-bg-subtle);
  --way-line: var(--sls-color-border);
  --way-line-h: var(--sls-color-border-strong);
  --way-ink: var(--sls-color-text-secondary);
  --way-h: var(--sls-color-navy);
  --way-mute: var(--sls-color-text-secondary);
  --way-ico: var(--sls-color-bg-muted);
  --btn-b-bg: #FFFFFF;
  --btn-b-ink: var(--sls-color-navy);
  --btn-b-line: var(--sls-color-border-strong);
  --foot-bg: var(--sls-color-bg-dark);
  --foot-ink: var(--sls-color-text-inverse-muted);
  --foot-h: #FFFFFF;
  --foot-line: rgba(255, 255, 255, 0.14);
  --sticky-bg: rgba(255, 255, 255, 0.97);
  --sticky-line: var(--sls-color-border);
}

/* Reusable, opt-in foundations. These do not style existing unprefixed markup. */
.sls-container {
  width: min(100% - (2 * var(--sls-gutter)), var(--sls-container));
  margin-inline: auto;
}

.sls-container--narrow {
  max-width: var(--sls-container-narrow);
}

.sls-container--content {
  max-width: var(--sls-container-content);
}

.sls-container--wide {
  max-width: var(--sls-container-wide);
}

.sls-section {
  padding-block: var(--sls-section-space);
}

.sls-section--compact {
  padding-block: var(--sls-section-space-compact);
}

.sls-surface {
  background: var(--sls-color-bg);
  color: var(--sls-color-text);
}

.sls-surface--subtle {
  background: var(--sls-color-bg-subtle);
}

.sls-surface--dark {
  background: var(--sls-color-bg-dark);
  color: var(--sls-color-text-inverse);
}

.sls-button {
  display: inline-flex;
  min-height: var(--sls-button-height);
  align-items: center;
  justify-content: center;
  gap: var(--sls-space-2);
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--sls-button-radius);
  font: var(--sls-font-weight-semibold) var(--sls-font-size-sm) / 1.2 var(--sls-font-family);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--sls-transition), background-color var(--sls-transition),
    border-color var(--sls-transition), box-shadow var(--sls-transition), transform var(--sls-transition);
}

.sls-button:focus-visible {
  outline: none;
  box-shadow: var(--sls-focus-ring);
}

.sls-button--primary {
  background: var(--sls-color-brand);
  color: var(--sls-color-text-inverse);
}

.sls-button--primary:hover {
  background: var(--sls-color-brand-hover);
}

.sls-button--secondary {
  background: var(--sls-color-bg);
  color: var(--sls-color-navy);
  border-color: var(--sls-color-border-strong);
}

.sls-button--secondary:hover {
  border-color: var(--sls-color-brand);
  color: var(--sls-color-brand);
}

.sls-button--inverse {
  background: transparent;
  color: var(--sls-color-text-inverse);
  border-color: var(--sls-color-border-inverse);
}

.sls-button--inverse:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sls-card {
  padding: var(--sls-card-padding);
  border: 1px solid var(--sls-color-border);
  border-radius: var(--sls-card-radius);
  background: var(--sls-color-bg);
  color: var(--sls-color-text);
  box-shadow: var(--sls-shadow-sm);
}

.sls-card--raised {
  box-shadow: var(--sls-shadow-md);
}

.sls-card--dark {
  background: var(--sls-color-bg-dark-raised);
  color: var(--sls-color-text-inverse);
  border-color: var(--sls-color-border-inverse);
}

.sls-approval {
  color: var(--sls-color-success-strong);
  background: var(--sls-color-success-bg);
  border: 1px solid var(--sls-color-success-border);
}

.sls-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Site-wide navigation and footer shell. */
#sls-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--sls-color-border);
  box-shadow: 0 2px 8px rgba(16, 35, 63, 0.045);
}

#sls-site-header *,
#sls-site-footer * {
  box-sizing: border-box;
}

.sls-header-inner {
  display: flex;
  width: min(100% - (2 * var(--sls-gutter)), var(--sls-container));
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sls-space-8);
  margin-inline: auto;
}

.sls-header-brand {
  width: 220px;
  height: 52px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--sls-radius-sm);
}

.sls-header-brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.sls-header-brand:focus-visible,
.sls-header a:focus-visible,
.sls-footer a:focus-visible,
.sls-menu-toggle:focus-visible,
.sls-nav-dropdown summary:focus-visible {
  outline: none;
  box-shadow: var(--sls-focus-ring);
}

.sls-header-nav {
  position: static;
  z-index: auto;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.1vw, 2rem);
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.sls-header-link,
.sls-nav-dropdown summary {
  color: var(--sls-color-text-secondary);
  font: var(--sls-font-weight-medium) var(--sls-font-size-sm) / 1.3 var(--sls-font-family);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: color var(--sls-transition);
}

.sls-header-link:hover,
.sls-nav-dropdown summary:hover,
.sls-nav-dropdown[open] summary {
  color: var(--sls-color-brand);
}

.sls-nav-dropdown {
  position: relative;
  /* Some pages style native details/accordions with overflow:hidden. Keep the
     shared header dropdown free to paint its absolutely positioned panel. */
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#sls-site-header .sls-nav-dropdown[open] {
  border: 0;
  box-shadow: none;
}

.sls-nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.sls-nav-dropdown summary::after {
  position: static;
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-inline-start: 0.5rem;
  margin-block: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  font-size: 0;
  line-height: 0;
  transform: translateY(-2px) rotate(45deg);
}

.sls-dropdown-panel {
  position: absolute;
  inset-block-start: calc(100% + 1.1rem);
  inset-inline-start: -1.25rem;
  z-index: 1001;
  display: grid;
  min-width: 17rem;
  gap: 0.125rem;
  padding: 0.55rem;
  border: 1px solid var(--sls-color-border);
  border-radius: var(--sls-radius-lg);
  background: var(--sls-color-bg);
  box-shadow: var(--sls-shadow-lg);
}

.sls-dropdown-panel a,
.sls-mobile-menu a {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: var(--sls-radius-sm);
  color: var(--sls-color-text-secondary);
  font: var(--sls-font-weight-medium) var(--sls-font-size-sm) / 1.4 var(--sls-font-family);
  text-decoration: none;
  transition: color var(--sls-transition), background-color var(--sls-transition);
}

.sls-dropdown-panel a:hover,
.sls-mobile-menu a:hover {
  background: var(--sls-color-bg-subtle);
  color: var(--sls-color-brand);
}

.sls-mobile-menu a.sls-button--primary,
.sls-mobile-menu a.sls-button--primary:hover {
  background: var(--sls-color-brand);
  color: #fff;
}

.sls-header-cta {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  white-space: nowrap;
}

.sls-menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sls-color-border);
  border-radius: var(--sls-radius-md);
  background: var(--sls-color-bg);
  color: var(--sls-color-navy);
  cursor: pointer;
}

.sls-menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sls-mobile-menu[hidden] {
  display: none;
}

#sls-site-footer {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sls-color-bg-dark);
  color: var(--sls-color-text-inverse-muted);
  font-family: var(--sls-font-family);
  line-height: var(--sls-line-height-body);
}

.sls-footer-inner {
  width: min(100% - (2 * var(--sls-gutter)), var(--sls-container-wide));
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}

.sls-footer-top {
  display: grid;
  grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(9rem, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
  padding-block-end: 2.75rem;
}

.sls-footer-brand img {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
}

.sls-footer-intro p {
  max-width: 19rem;
  margin: 1rem 0 1.25rem;
  color: var(--sls-color-text-inverse-muted);
  font-size: var(--sls-font-size-sm);
}

.sls-footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sls-footer-contact .sls-button {
  min-height: 2.6rem;
  padding: 0.65rem 1rem;
  font-size: var(--sls-font-size-xs);
}

.sls-footer-trust-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  margin-top: 1rem;
}

.sls-footer-trust-links a {
  color: var(--sls-color-text-inverse-muted);
  font-size: var(--sls-font-size-xs);
  line-height: 1.5;
  text-decoration: none;
}

.sls-footer-trust-links a:hover,
.sls-footer-trust-links a:focus-visible {
  color: var(--sls-color-text-inverse);
}

.sls-footer-trust-links .sls-footer-trustpilot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--sls-color-border-inverse);
  border-radius: var(--sls-radius-sm);
  color: var(--sls-color-text-inverse);
  font-weight: var(--sls-font-weight-semibold);
}

.sls-footer-trust-links a:focus-visible {
  outline: 2px solid var(--sls-color-brand-soft);
  outline-offset: 3px;
}

.sls-footer-group h2 {
  margin: 0 0 0.8rem;
  color: var(--sls-color-text-inverse);
  font: var(--sls-font-weight-semibold) var(--sls-font-size-sm) / 1.4 var(--sls-font-family);
}

.sls-footer-group ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sls-footer-group a,
.sls-footer-legal a {
  color: var(--sls-color-text-inverse-muted);
  font-size: var(--sls-font-size-xs);
  text-decoration: none;
  transition: color var(--sls-transition);
}

.sls-footer-group a:hover,
.sls-footer-legal a:hover {
  color: var(--sls-color-text-inverse);
}

.sls-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--sls-color-border-inverse);
  color: var(--sls-color-text-inverse-muted);
  font-size: var(--sls-font-size-xs);
}

.sls-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* Some legacy page styles apply a white, sticky surface to every <nav>.
   Keep the shared footer's legal navigation plain on every page. */
#sls-site-footer nav.sls-footer-legal {
  position: static;
  z-index: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: flex-start;
}

.sls-has-shell {
  min-height: 100vh;
}

.sls-has-shell > [data-sls-page-content] {
  flex: 1 0 auto;
}

/* The thank-you page keeps its centered confirmation card between the shell. */
.sls-has-shell.sls-thank-you {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.sls-thank-you > .ty-card {
  margin: auto;
}

@media (max-width: 1023px) {
  .sls-header-inner {
    min-height: 68px;
    gap: var(--sls-space-4);
  }

  .sls-header-brand {
    width: 180px;
    height: 44px;
  }

  .sls-footer-brand img {
    width: 230px;
    max-height: 54px;
  }

  .sls-header-nav {
    gap: 1rem;
  }

  .sls-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sls-header-inner {
    min-height: 64px;
  }

  .sls-header-brand {
    width: 160px;
    height: 40px;
  }

  .sls-header-nav {
    display: none;
  }

  .sls-header-cta {
    display: none;
  }

  .sls-menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .sls-mobile-menu:not([hidden]) {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem var(--sls-gutter) 1rem;
    border-top: 1px solid var(--sls-color-border);
    background: var(--sls-color-bg);
  }

  .sls-mobile-menu details {
    border-bottom: 1px solid var(--sls-color-border);
  }

  .sls-mobile-menu summary {
    position: relative;
    padding: 0.85rem 0.8rem;
    padding-inline-end: 2.5rem;
    color: var(--sls-color-text);
    font: var(--sls-font-weight-semibold) var(--sls-font-size-sm) / 1.4 var(--sls-font-family);
    cursor: pointer;
    list-style: none;
  }

  .sls-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .sls-mobile-menu summary::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1rem;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    font-size: 0;
    line-height: 0;
    transform: translateY(-70%) rotate(45deg);
  }

  .sls-mobile-menu details[open] summary::after {
    content: "";
    transform: translateY(-30%) rotate(225deg);
  }

  .sls-mobile-menu .sls-button {
    width: 100%;
    margin-block-start: 0.8rem;
  }

  .sls-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
  }

  .sls-footer-intro {
    grid-column: 1 / -1;
  }

  .sls-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .sls-footer-top {
    grid-template-columns: 1fr;
  }

  .sls-footer-intro {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .sls-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sls-hide-desktop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sls-button {
    transition-duration: 0.01ms;
  }
}

/* Shared primary-action treatment for legacy page buttons. WhatsApp actions
   keep their semantic green styling; conversion actions use the brand blue. */
.btn-green:not([href*="wa.me"]),
.btn-green.sls-button--primary,
.btn-buy,
.nav-buy,
.contact-form .form-submit {
  min-height: var(--sls-button-height);
  padding: 0.75rem 1.375rem !important;
  border: 1px solid transparent;
  border-radius: var(--sls-button-radius);
  background: var(--sls-color-brand) !important;
  color: var(--sls-color-text-inverse) !important;
  box-shadow: none;
  font-family: var(--sls-font-family);
  font-size: var(--sls-font-size-sm);
  font-weight: var(--sls-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--sls-transition), background-color var(--sls-transition),
    border-color var(--sls-transition), box-shadow var(--sls-transition);
}

.btn-green:not([href*="wa.me"]):hover,
.btn-green.sls-button--primary:hover,
.btn-buy:hover,
.nav-buy:hover,
.contact-form .form-submit:hover {
  background: var(--sls-color-brand-hover) !important;
  color: var(--sls-color-text-inverse) !important;
}

.btn-green:not([href*="wa.me"]):focus-visible,
.btn-green.sls-button--primary:focus-visible,
.btn-buy:focus-visible,
.nav-buy:focus-visible,
.contact-form .form-submit:focus-visible {
  outline: none;
  box-shadow: var(--sls-focus-ring);
}


/* Daylight landing pages: neutral surfaces, white hero, blue reserved for actions. */
body.sls-theme-daylight {
  --bg: var(--sls-color-bg);
  --bg-alt: var(--sls-color-bg-subtle);
  --ink: var(--sls-color-text);
  --mute: var(--sls-color-text-secondary);
  --sub: #475467;
  --line: var(--sls-color-border);
  --card: #FFFFFF;
  --card-line: var(--sls-color-border);
  --accent: var(--sls-color-brand);
  --accent-h: var(--sls-color-brand-hover);
  --accent-2: var(--sls-color-brand);
  --ann-bg: var(--sls-color-bg-subtle);
  --ann-ink: var(--sls-color-text-secondary);
  --ann-hl: var(--sls-color-brand);
  --hero-bg: #FFFFFF;
  --hero-line: var(--sls-color-border);
  --head-bg: var(--sls-color-bg-subtle);
  --head-ink: var(--sls-color-navy);
  --head-sub: var(--sls-color-text-secondary);
  --glow: none;
  --shadow-hot: var(--sls-shadow-md);
  --foot-bg: var(--sls-color-bg-dark);
}

body.sls-theme-daylight .announce {
  background: var(--sls-color-bg-subtle);
  color: var(--sls-color-text-secondary);
  border-bottom-color: var(--sls-color-border);
}

body.sls-theme-daylight .announce b {
  color: var(--sls-color-navy);
}

body.sls-theme-daylight .hero {
  background: #FFFFFF;
  color: var(--sls-color-text);
  border-bottom: 1px solid var(--sls-color-border);
}

body.sls-theme-daylight .hero::after {
  display: none;
}

body.sls-theme-daylight .hero h1,
body.sls-theme-daylight .hero h1 .hl,
body.sls-theme-daylight .hero h1 .hl2 {
  color: var(--sls-color-navy);
  text-shadow: none;
}

body.sls-theme-daylight .hero h1 .hl,
body.sls-theme-daylight .hero h1 .hl2 {
  color: var(--sls-color-brand);
}

body.sls-theme-daylight .hero .sub,
body.sls-theme-daylight .hero .sub b,
body.sls-theme-daylight .hero .ticks li,
body.sls-theme-daylight .hero .micro {
  color: var(--sls-color-text-secondary);
  text-shadow: none;
}

body.sls-theme-daylight .hero .tk circle {
  fill: var(--sls-color-success);
}

body.sls-theme-daylight .hero .tk path {
  stroke: #FFFFFF;
}

body.sls-theme-daylight .hero .btn-a,
body.sls-theme-daylight .hero .btn-a:hover {
  background: var(--sls-color-brand);
  color: #FFFFFF;
  box-shadow: none;
}

body.sls-theme-daylight .hero .btn-b,
body.sls-theme-daylight .hero .btn-b:hover {
  background: #FFFFFF;
  color: var(--sls-color-navy);
  border-color: var(--sls-color-border-strong);
}

body.sls-theme-daylight .logos {
  background: var(--sls-color-bg-subtle);
  border-bottom: 1px solid var(--sls-color-border);
}

body.sls-theme-daylight .card-head {
  background: var(--sls-color-bg-subtle);
  color: var(--sls-color-navy);
  border-bottom: 1px solid var(--sls-color-border);
}

body.sls-theme-daylight .card-head h3,
body.sls-theme-daylight .card-head p {
  color: var(--sls-color-navy);
}

body.sls-theme-daylight .card-head p {
  color: var(--sls-color-text-secondary);
}

body.sls-theme-daylight .s-dark {
  background: var(--sls-color-bg-subtle);
  color: var(--sls-color-text);
}

body.sls-theme-daylight .s-dark .lede,
body.sls-theme-daylight .s-dark .note,
body.sls-theme-daylight .s-dark .way span {
  color: var(--sls-color-text-secondary);
}

body.sls-theme-daylight .s-dark h2,
body.sls-theme-daylight .s-dark .h2s,
body.sls-theme-daylight .s-dark .way b {
  color: var(--sls-color-navy);
}

body.sls-theme-daylight .s-dark .eyebrow,
body.sls-theme-daylight .s-dark .way .go {
  color: var(--sls-color-brand);
}

body.sls-theme-daylight .s-dark .way,
body.sls-theme-daylight .s-dark .way:hover {
  background: #FFFFFF;
  border-color: var(--sls-color-border);
}

body.sls-theme-daylight .s-dark .way .wi {
  background: var(--sls-color-bg-muted);
  color: var(--sls-color-text-secondary);
}

body.sls-theme-daylight .way .way-tag {
  box-shadow: none !important;
}

/* The midnight preview keeps its dark composition but uses neutral charcoal,
   one consistent font, and blue only for interactive emphasis. */
body.sls-theme-midnight {
  --font: var(--sls-font-family);
  --font-d: var(--sls-font-family);
  --w-d: 700;
  --ls-d: -0.025em;
  --rad: var(--sls-radius-md);
  --rad-l: var(--sls-radius-xl);
  --rad-i: var(--sls-radius-md);
  --rad-b: var(--sls-radius-pill);
  --bg: #111827;
  --bg-alt: #1F2937;
  --ink: #FFFFFF;
  --mute: #D0D5DD;
  --sub: #98A2B3;
  --line: rgba(255, 255, 255, 0.12);
  --card: #1F2937;
  --card-line: rgba(255, 255, 255, 0.12);
  --accent: var(--sls-color-brand);
  --accent-h: var(--sls-color-brand-hover);
  --accent-2: #60A5FA;
  --ann-bg: #1F2937;
  --ann-ink: #D0D5DD;
  --ann-hl: #60A5FA;
  --hero-bg: #111827;
  --hero-line: rgba(255, 255, 255, 0.12);
  --head-bg: #1F2937;
  --head-ink: #FFFFFF;
  --head-sub: #D0D5DD;
  --glow: none;
}

body.sls-theme-midnight .hero {
  background: #111827;
}

body.sls-theme-midnight .hero::after {
  display: none;
}

body.sls-theme-midnight .s-dark {
  background: #1F2937;
}

body.sls-theme-midnight .btn-a,
body.sls-theme-midnight .btn-a:hover {
  background: var(--sls-color-brand);
  box-shadow: none;
}

/* Shared type family and headline rhythm for the established page layouts. */
body:not(.home-body) h1,
body:not(.home-body) h2,
body:not(.home-body) h3,
body:not(.home-body) h4 {
  font-family: var(--sls-font-family);
  letter-spacing: -0.025em;
}

body:not(.home-body) h1 {
  font-size: var(--sls-font-size-h1);
  font-weight: var(--sls-font-weight-bold);
  line-height: 1.1;
}

body:not(.home-body) h2 {
  font-size: var(--sls-font-size-h2);
  font-weight: var(--sls-font-weight-bold);
  line-height: 1.2;
}

body:not(.home-body) h3 {
  font-size: var(--sls-font-size-h3);
  font-weight: var(--sls-font-weight-semibold);
  line-height: 1.25;
}


body.sls-theme-daylight .pill {
  background: var(--sls-color-bg-subtle);
  border-color: var(--sls-color-border);
  color: var(--sls-color-text-secondary);
}

body.sls-theme-daylight .btn {
  min-height: var(--sls-button-height);
  padding: 0.75rem 1.25rem;
  border-radius: var(--sls-button-radius);
  font-family: var(--sls-font-family);
  font-size: 15px;
  font-weight: var(--sls-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
}

body.sls-theme-midnight {
  --sticky-bg: rgba(17, 24, 39, 0.96);
  --sticky-line: rgba(255, 255, 255, 0.12);
}

body.sls-theme-midnight .sticky .btn {
  background: var(--sls-color-brand) !important;
  box-shadow: none !important;
}


/* Keep shared footer group labels compact under the legacy heading scale. */
#sls-site-footer .sls-footer-group h2 {
  margin: 0 0 0.8rem;
  font: var(--sls-font-weight-semibold) var(--sls-font-size-sm) / 1.4 var(--sls-font-family);
  letter-spacing: 0;
}

body.sls-theme-daylight .eyebrow {
  color: var(--sls-color-text-secondary);
}

body.sls-theme-daylight .plan.hot {
  background: #FFFFFF;
}

body.sls-theme-daylight .way-primary,
body.sls-theme-daylight .way-primary:hover {
  background: #FFFFFF;
  border-color: var(--sls-color-brand);
  box-shadow: 0 0 0 1px var(--sls-color-brand);
}

body.sls-theme-daylight .pwall-expand-btn,
body.sls-theme-daylight .pwall-expand-btn:hover {
  background: var(--sls-color-brand) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

body.sls-theme-daylight .pwall-expand-btn:hover {
  background: var(--sls-color-brand-hover) !important;
}

/* Existing tax highlights used a blue gradient; keep these advisory panels neutral. */
body:not(.sls-theme-daylight):not(.sls-theme-midnight) .tax-highlight {
  background: var(--sls-color-bg-subtle) !important;
  border-color: var(--sls-color-border);
}

body.sls-theme-daylight .tb-thumb {
  background: #344054;
}

body.sls-theme-daylight .tb-wa {
  background: var(--sls-color-success-bg);
}

body.sls-theme-midnight .logos,
body.sls-theme-midnight .plan.hot {
  background: var(--bg-alt);
}

body.sls-theme-midnight .tb-thumb {
  background: #1F2937;
}

body.sls-theme-midnight .tb-wa {
  background: rgba(22, 163, 74, 0.14);
}

body.sls-theme-midnight .pwall-expand-btn,
body.sls-theme-midnight .pwall-expand-btn:hover {
  background: var(--sls-color-brand) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}


/* Unified typography pass: one family and a restrained shared hierarchy. */
body:not(.home-body) {
  font-family: var(--sls-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
body:not(.home-body) :where(*) {
  font-family: var(--sls-font-family) !important;
}
body:not(.home-body) :where(nav, .nav-links, .nav-in, .sls-header, [data-sls-header]) {
  font-size: 15px;
  font-weight: 500;
}
body:not(.home-body) h1,
body:not(.home-body) h2,
body:not(.home-body) h3,
body:not(.home-body) h4 {
  letter-spacing: -0.025em;
}
body:not(.home-body) h1 {
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
body:not(.home-body) h2 {
  font-size: clamp(30px, 2.85vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
body:not(.home-body) h3,
body:not(.home-body) .card-head h3,
body:not(.home-body) .card h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
body:not(.home-body) button,
body:not(.home-body) .btn,
body:not(.home-body) .sls-button,
body:not(.home-body) input[type="submit"] {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
body:not(.home-body) .eyebrow,
body:not(.home-body) .label,
body:not(.home-body) .sls-eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body:not(.home-body) .amt .n,
body:not(.home-body) .price-amt,
body:not(.home-body) .price-amount {
  font-size: clamp(36px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
}
@media (max-width: 767px) {
  body:not(.home-body) h1 { font-size: clamp(38px, 10vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
  body:not(.home-body) h2 { font-size: clamp(30px, 8vw, 34px); line-height: 1.15; }
  body:not(.home-body) p { font-size: 15px; line-height: 1.6; }
}

/* WhatsApp actions use semantic success green across the shared site shell. */
.sls-button--whatsapp,
.sls-button--whatsapp:hover,
.sls-button--whatsapp:focus-visible {
  border-color: var(--sls-color-success) !important;
  background: var(--sls-color-success) !important;
  color: #FFFFFF !important;
}
.sls-button--whatsapp:hover {
  border-color: var(--sls-color-success-strong) !important;
  background: var(--sls-color-success-strong) !important;
}
body:not(.home-body) .btn-outline[href*="wa.me"],
body:not(.home-body) .btn-outline[href*="wa.me"]:hover,
body:not(.home-body) .btn-outline[href*="wa.me"]:focus-visible {
  border-color: var(--sls-color-success) !important;
  background: var(--sls-color-success) !important;
  color: #FFFFFF !important;
}
body:not(.home-body) .btn-outline[href*="wa.me"]:hover {
  border-color: var(--sls-color-success-strong) !important;
  background: var(--sls-color-success-strong) !important;
}


/* Mobile layout normalization for the legacy content pages that share this site shell.
   The page content keeps its existing order and wording while nested wrappers stop
   stacking their own gutters on top of the section gutters. */
@media (max-width: 768px) {
  section[style*="padding:64px"] {
    padding-inline: 0 !important;
  }

  .wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 16px !important;
  }

  .wrap > .article-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 0 !important;
  }

  .article-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 16px !important;
  }

  .wrap .article-wrap {
    max-width: none !important;
    padding-inline: 0 !important;
  }

  .article-wrap table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-wrap table th,
  .article-wrap table td {
    padding: 10px 12px;
  }

  .glass-box,
  .tax-highlight {
    max-width: 100%;
    padding: 18px !important;
  }

  .contact-form,
  .article-wrap .pricing-card {
    box-sizing: border-box;
    width: 100%;
    padding: 20px !important;
  }
}

.banking-provider-logo {
  display: grid;
  min-height: 76px;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
}

.banking-provider-logo img {
  display: block;
  width: min(100%, 150px);
  max-height: 34px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .banking-provider-logo {
    min-height: 64px;
    padding: 12px;
  }

  .banking-provider-logo img {
    width: min(100%, 128px);
    max-height: 28px;
  }
}


/* Use the green sampled from the Trustpilot rating badge for checkmarks site-wide. */
.tk circle,
.tks {
  fill: var(--sls-color-trustpilot) !important;
  stroke: var(--sls-color-trustpilot) !important;
}

body.sls-theme-daylight .hero .tk circle {
  fill: var(--sls-color-trustpilot) !important;
}

.vs td.us::before,
.allin::before {
  color: var(--sls-color-trustpilot) !important;
}

.assure li::before {
  background: var(--sls-color-trustpilot) !important;
}


/* Match green check icons and step markers across all shared subpages. */
.get-icon {
  border: 1px solid #D7EEE2;
  border-radius: 6px;
  background: #EAF6EF !important;
}

.get-icon svg {
  stroke: var(--sls-color-trustpilot) !important;
}

.proc-n {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #D7EEE2;
  border-radius: 10px !important;
  background: #EAF6EF !important;
  color: #247A4B !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}


/* DM Sans site-wide hierarchy: restrained weights across shared and legacy pages. */
body {
  font-family: var(--sls-font-family) !important;
  font-weight: 400;
}

body h1 {
  font-weight: 700 !important;
}

body h2,
body h3,
body h4 {
  font-weight: 600 !important;
}

body p {
  font-weight: 400;
}

body .label,
body .eyebrow,
body .home-eyebrow {
  font-weight: 600 !important;
  letter-spacing: 0.07em;
}

body button,
body .btn,
body .btn-green,
body .btn-outline,
body .btn-a,
body .btn-b,
body .sls-button,
body .form-submit {
  font-weight: 600 !important;
}

#sls-site-header .sls-header-link,
#sls-site-header .sls-nav-dropdown summary,
#sls-site-header .sls-dropdown-panel a {
  font-weight: 500 !important;
}

body .price,
body .price-card .price,
body .amt .n,
body #homeSelectedPrice {
  font-weight: 700 !important;
}


/* Keep the injected site navigation isolated from legacy page-wide nav rules. */
#sls-site-header nav.sls-header-nav {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  width: auto;
  height: auto;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#sls-site-header nav.sls-mobile-menu {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--sls-color-border);
  background: var(--sls-color-bg);
  box-shadow: none;
}

#sls-site-header nav.sls-mobile-menu[hidden] {
  display: none !important;
}

.sls-menu-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 180ms ease, border-color 220ms ease, color 220ms ease;
}

.sls-menu-toggle::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.13), rgba(37, 99, 235, 0.035));
  content: "";
  opacity: 0;
  transition: opacity 220ms ease;
}

.sls-menu-toggle:hover::before,
.sls-menu-toggle[aria-expanded="true"]::before {
  opacity: 1;
}

.sls-menu-toggle[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--sls-color-brand);
}

.sls-menu-toggle:active {
  transform: scale(0.97);
}

.sls-menu-toggle svg {
  position: relative;
  z-index: 1;
  transition: transform 220ms ease;
}

.sls-menu-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

@media (max-width: 767px) {
  #sls-site-header nav.sls-header-nav {
    display: none;
  }

  #sls-site-header nav.sls-mobile-menu:not([hidden]) {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem var(--sls-gutter) 1rem;
  }

  #sls-site-header .sls-mobile-menu summary {
    border-radius: var(--sls-radius-sm);
    transition: background-color 180ms ease, color 180ms ease;
  }

  #sls-site-header .sls-mobile-menu details[open] > summary {
    background: var(--sls-color-bg-subtle);
    color: var(--sls-color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sls-menu-toggle,
  .sls-menu-toggle::before,
  .sls-menu-toggle svg {
    transition: none;
  }
}