/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary:      #e05a2b;
  --secondary:    #e8527a;
  --gradient:     linear-gradient(135deg, #e05a2b 0%, #e8527a 100%);
  --dark:         #0f172a;
  --text:         #1e293b;
  --text-muted:   #64748b;
  --bg:           #ffffff;
  --bg-alt:       #f8fafc;
  --border:       #e2e8f0;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.1);
  --shadow-xl:    0 20px 40px rgba(0,0,0,0.12);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* =============================================
   TYPOGRAPHY UTILITIES
   ============================================= */
.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 50px;
  font-family: var(--font);
  /* 19px/700 clears WCAG's "large text" threshold (>=18.66px bold), so the
     brand orange passes at the 3:1 large-text ratio instead of failing 4.5:1. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 16px rgba(224, 90, 43, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(224, 90, 43, 0.45);
}
.btn-primary:active { transform: translateY(0); }

.btn-white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.btn-white:active { transform: translateY(0); }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.9);
}

.btn-outline-brand {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline-brand:hover {
  background: var(--primary);
  color: #fff;
}

.btn-full {
  width: 100%;
  padding: 16px 26px;
  font-size: 19px;   /* large-text threshold — see .btn */
  border-radius: var(--radius-md);
}

/* =============================================
   NAVIGATION
   ============================================= */
#navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

/* Nav links list */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

/* Each nav item is a positioned container for the dropdown */
.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
  outline: none;
}

.nav-link:hover,
.nav-item.is-open .nav-link {
  color: var(--primary);
  background: rgba(224, 90, 43, 0.06);
}

.nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.nav-chevron {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--text-muted);
}

.nav-item.is-open .nav-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 300;
}

/* Small notch/arrow pointing up */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* THE DESKTOP DROPDOWNS DID NOT OPEN. The only ways in were `.is-open`,
   which nothing in script.js ever sets, and :focus-within, which needs a tab
   or a click - and the trigger's onclick navigates away, so a click left the
   page before the menu could show. Pointing at "For BCBAs" did nothing at
   all. :hover restores it.  2026-10-08 */
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: rgba(224, 90, 43, 0.07);
  color: var(--primary);
}

.nav-dropdown-item:hover .dropdown-icon {
  color: var(--primary);
}

.dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-item:hover .dropdown-icon {
  background: rgba(224, 90, 43, 0.1);
}

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: #fff;
  /* PADDING IS ZERO WHEN CLOSED, and that is the whole point. The closed
     state is max-height: 0, which clips the CONTENT - it does not remove the
     padding box. On a phone that left a white strip below the bar with the
     top of "The Dashboard" showing through it, permanently, on every page.
     The padding comes back with the menu. */
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.nav-mobile.is-open {
  /* MEASURED, NOT GUESSED. The menu holds thirteen items and its content is
     674px tall; the old 600px cap cut the "Get Started" button off the
     bottom, with overflow:hidden making it unreachable rather than merely
     off-screen. Sized to the viewport instead, so it can never be taller
     than the screen, and allowed to scroll on a short one. dvh second so a
     browser that understands it uses the value that excludes the address
     bar.  2026-10-08 */
  max-height: calc(100vh - 132px);
  max-height: calc(100dvh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 20px;
}

/* ── Mobile menu: three collapsible groups ─────────────────────────────────
   Thirteen flat links was a wall of text you had to read to navigate. The
   groups are the same three the desktop nav uses, so the site has one
   structure rather than two.  2026-10-08 */
.nav-m-group {
  border-bottom: 1px solid var(--border);
}
.nav-m-group:last-of-type {
  border-bottom: none;
}
.nav-m-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  /* 52px tall: comfortably above the ~44px minimum for something a thumb has
     to hit without thinking about it. */
  min-height: 52px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
}
.nav-m-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.25s ease;
}
.nav-m-trigger[aria-expanded="true"] .nav-m-chevron {
  transform: rotate(90deg);
  color: var(--brand, #e05a2b);
}
.nav-m-trigger[aria-expanded="true"] {
  color: var(--brand, #e05a2b);
}

/* ── Touch feedback ────────────────────────────────────────────────────────
   Safari and Chrome paint a grey box over whatever you tap. It is a default
   for pages that give no feedback of their own; here it sits on top of the
   design and flashes on every tap. Removed, and replaced with a tint that
   belongs to the brand - a tap still has to FEEL like it registered, so the
   answer is to say it better, not to say nothing.  2026-10-08 */
.nav-m-trigger,
.nav-mobile-item,
.nav-hamburger,
.nav-mobile-cta button,
.top-bar-cta {
  -webkit-tap-highlight-color: transparent;
}
.nav-m-trigger:active,
.nav-mobile-item:active {
  background: #fdf3ef;
}
.nav-hamburger:active {
  opacity: 0.6;
}

/* Keyboard focus is NOT removed with it. Dropping the tap highlight is a
   touch-device nicety; dropping the focus ring would make the menu
   unusable for anybody navigating by keyboard. */
.nav-m-trigger:focus-visible,
.nav-mobile-item:focus-visible {
  outline: 2px solid var(--brand, #e05a2b);
  outline-offset: -2px;
  border-radius: 6px;
}
.nav-m-panel {
  /* ANIMATED, SO IT WAS NEVER `hidden`. The attribute is display:none, which
     cannot transition - the group snapped open and shut with no indication
     that one thing had closed as another opened. Height is set in px by the
     script from the panel's own scrollHeight, so it animates to exactly the
     content and never to a guessed number.  2026-10-08 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 0 0 12px;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.2s ease,
    padding    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-m-panel.is-open {
  opacity: 1;
  padding-bottom: 8px;
}
.nav-m-panel .nav-mobile-item {
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 14.5px;
  font-weight: 500;
  color: #4b5563;
  padding: 10px 4px;
}
.nav-m-panel .nav-mobile-item:last-of-type {
  border-bottom: none;
}

.nav-mobile-item {
  display: block;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}

.nav-mobile-item:last-of-type {
  border-bottom: none;
}

.nav-mobile-item:hover {
  color: var(--primary);
}

.nav-mobile-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.nav-mobile-cta {
  margin-top: 16px;
}

/* =============================================
   HERO
   ============================================= */
#hero {
  background: var(--gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

/* Decorative orbs */
#hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

#hero::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: -12%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 28px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

/* Wrapper so both badges sit on the same row */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.28);
}

.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* Women Owned badge — gradient border, no green dot */
.hero-badge-women {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.38);
  position: relative;
}

.hero-badge-women::before {
  display: none;
}

.hero-heading {
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}

.hero-subheading {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  line-height: 1.72;
  margin-bottom: 40px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hero visual / mockup cards */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-card-mockup {
  width: 100%;
  max-width: 340px;
}

.mockup-card {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-xl);
  padding: 24px;
  color: #fff;
}

.mockup-card-2 {
  margin-top: 14px;
  margin-left: 28px;
  background: rgba(255,255,255,0.1);
}

.mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.88;
  text-transform: uppercase;
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.mockup-dot-green {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.mockup-stat {
  margin-bottom: 20px;
}

.stat-number {
  display: block;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -3px;
}

.stat-label {
  font-size: 13px;
  opacity: 0.7;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

/* BCBA Dashboard stats list */
.mockup-stats-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mockup-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mockup-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mockup-stat-row:first-child {
  padding-top: 0;
}

.mockup-stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.mockup-stat-label {
  font-size: 12px;
  opacity: 0.72;
  text-align: right;
  line-height: 1.4;
}

/* Today's Guide — behavior row */
.mockup-behavior-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.mockup-behavior-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.mockup-behavior-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mockup-behavior-name {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.95;
}

.mockup-behavior-strategy {
  font-size: 12px;
  opacity: 0.68;
  font-weight: 500;
}

.mockup-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 4px 12px;
  cursor: pointer;
  opacity: 0.9;
}

/* Hero wave */
.hero-wave {
  position: relative;
  z-index: 1;
  line-height: 0;
  margin-top: auto;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* =============================================
   SECTIONS (shared)
   ============================================= */
section {
  padding: 100px 0;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.section-label {
  display: inline-block;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 5px 14px;
  background: rgba(224, 90, 43, 0.09);
  border-radius: 50px;
  border: 1px solid rgba(224, 90, 43, 0.18);
}

.section-label-light {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.25);
}

.section-heading {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.section-heading-light {
  color: #fff;
}

.section-heading-light span {
  color: rgba(255,255,255,0.8);
}

.section-subheading {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 60px;
  line-height: 1.75;
}

.section-subheading-light {
  color: rgba(255,255,255,0.78);
}

.section-alt {
  background: var(--bg-alt);
}

/* =============================================
   FEATURE CARDS
   ============================================= */
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: default;
}

.section-alt .feature-card {
  background: #fff;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(224, 90, 43, 0.18);
}

.feature-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(224, 90, 43, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.72;
}

/* BCBAs: 3 + 2 centered */
.features-grid-bcba {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.features-grid-bcba .feature-card {
  grid-column: span 2;
}

.features-grid-bcba .feature-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.features-grid-bcba .feature-card:nth-child(5) {
  grid-column: 4 / span 2;
}

/* Parents: 4 columns */
.features-grid-parents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* =============================================
   PRICING
   ============================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}

.pricing-card {
  border-radius: var(--radius-xl);
  padding: 40px;
  border: 2px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.pricing-card-bcba {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(224, 90, 43, 0.06);
}

.pricing-card-parent {
  background: var(--bg-alt);
}

.pricing-top {
  flex: 1;
}

.pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(224, 90, 43, 0.1);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.pricing-badge-free {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.pricing-currency {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  align-self: flex-start;
  margin-top: 8px;
}

.pricing-number {
  font-size: 64px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
  letter-spacing: -3px;
}

.pricing-number-free {
  font-size: 52px;
  letter-spacing: -2px;
}

/* Word-based prices ("Custom") — the 64px numeric size is far too large for a word. */
.pricing-number-word {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
}

.pricing-period-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-end;
  padding-bottom: 8px;
}

.pricing-period {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

.pricing-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}

.pricing-features {
  list-style: none;
  margin-bottom: 32px;
  flex: 1;
}

.pricing-features li {
  font-size: 14px;
  color: var(--text);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.check {
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.check-green {
  color: #059669;
}

/* =============================================
   PRICING — 4-TIER TABLE
   ============================================= */
.pricing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  align-items: start;
}

.pricing-card-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 5px rgba(224, 90, 43, 0.08), var(--shadow-xl);
  position: relative;
  transform: translateY(-8px);
}

.pricing-card-featured:hover {
  transform: translateY(-12px);
}

.pricing-most-popular {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(224, 90, 43, 0.35);
}

.pricing-card-coming {
  background: var(--bg-alt);
  border-color: var(--border);
  opacity: 0.78;
}

.pricing-coming-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.pricing-badge-coming {
  color: #64748b;
  background: #f1f5f9;
}

.pricing-number-label {
  font-size: 30px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: -1px;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}

.pricing-features-coming li {
  color: #94a3b8;
}

.coming-bullet {
  color: #cbd5e1;
  font-size: 16px;
  flex-shrink: 0;
}

.btn-outline-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  background: transparent;
  text-decoration: none;
}

.btn-outline-muted:hover {
  border-color: #cbd5e1;
  color: #64748b;
  background: #f8fafc;
}

.pricing-parent-note {
  text-align: center;
  margin: 36px auto 0;
  max-width: 560px;
  font-size: 14px;
  color: #15803d;
  padding: 14px 24px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-weight: 500;
}

/* Responsive: 4-col → 2-col → 1-col */
@media (max-width: 1100px) {
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
  }
  .pricing-card-featured {
    transform: none;
  }
  .pricing-card-featured:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 640px) {
  /* minmax(0, 1fr), NOT 1fr. A grid item's default min-width is min-content,
     so a single `1fr` track grows to whatever the widest unbreakable thing
     inside it needs - and the card then sticks out past the edge of the
     phone, taking the whole page into horizontal scroll with it. Measured at
     370px wide in a 360px viewport before this.  2026-10-08 */
  .pricing-grid-4 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* =============================================
   SIGN UP / WAITLIST
   ============================================= */
.section-gradient {
  background: var(--gradient);
  position: relative;
  overflow: hidden;
}

.section-gradient::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.section-gradient::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,0,0,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.form-container {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 1;
}

form {
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-xl);
  padding: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.form-group input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input::placeholder {
  color: rgba(255,255,255,0.38);
}

.form-group input:focus {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

/* Custom select wrapper */
.select-wrap {
  position: relative;
}

.select-wrap select {
  width: 100%;
  padding: 13px 44px 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.select-wrap select option {
  background: #1e293b;
  color: #fff;
}

.select-wrap select:focus {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

/* Placeholder color for select */
.select-wrap select:required:invalid {
  color: rgba(255,255,255,0.38);
}

.select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  pointer-events: none;
}

.form-message {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  min-height: 22px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.form-message.success {
  color: #86efac;
}

.form-message.error {
  color: #fca5a5;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
  background: #0a0f1e;
  padding: 52px 28px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo {
  font-size: 20px;
  color: var(--primary) !important;
}

.footer-tagline {
  font-size: 14px;
  color: #94a3b8;   /* WCAG AA: 7.45:1 on #0a0f1e */
  margin-top: 6px;
}

.footer-copy {
  font-size: 13px;
  color: #94a3b8;   /* WCAG AA: 7.45:1 on #0a0f1e */
}

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.animate-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.animate-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================= */
@media (max-width: 1024px) {
  .features-grid-bcba {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid-bcba .feature-card,
  .features-grid-bcba .feature-card:nth-child(4),
  .features-grid-bcba .feature-card:nth-child(5) {
    grid-column: span 1;
  }

  .features-grid-parents {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-container {
    gap: 40px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================= */
@media (max-width: 768px) {
  /* Hide desktop nav links and CTA, show hamburger */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile {
    display: flex;
  }

  section {
    padding: 72px 0;
  }

  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0;
    padding-bottom: 72px;
  }

  .hero-subheading {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    display: none;
  }

  .features-grid-bcba {
    grid-template-columns: 1fr;
  }

  .features-grid-bcba .feature-card,
  .features-grid-bcba .feature-card:nth-child(4),
  .features-grid-bcba .feature-card:nth-child(5) {
    grid-column: span 1;
  }

  .features-grid-parents {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .pricing-card {
    padding: 32px 28px;
  }

  form {
    padding: 28px 24px;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .nav-container {
    padding: 0 20px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================= */
@media (max-width: 480px) {
  .hero-heading {
    letter-spacing: -0.8px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
  }

  .section-container {
    padding: 0 20px;
  }

  .section-heading {
    letter-spacing: -0.5px;
  }

  .pricing-number {
    font-size: 52px;
  }

  .pricing-card {
    padding: 28px 20px;
  }

  form {
    padding: 24px 18px;
  }
}

/* ===== LEGAL PAGES (privacy.html, terms.html) ===== */
.legal-hero {
  padding: 140px 0 40px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.legal-hero h1 {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
  margin-bottom: 12px;
}
.legal-meta {
  font-size: 14px;
  color: var(--text-muted);
}
.legal-body {
  padding: 48px 0 96px;
}
.legal-body h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 40px 0 12px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
}
.legal-body p,
.legal-body li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--dark); font-weight: 600; }
.legal-body a { color: var(--brand, #e2603f); text-decoration: underline; }
.legal-toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 22px 26px;
  margin-bottom: 40px;
}
.legal-toc ul { margin: 0 0 0 18px; }
.legal-toc li { margin-bottom: 6px; font-size: 14px; }
.legal-callout {
  border-left: 3px solid var(--brand, #e2603f);
  background: var(--bg-alt);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0 24px;
}
.legal-callout p { margin-bottom: 0; }
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer-legal-links {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;              /* same as .footer-copy — WCAG AA 7.45:1 */
}
.footer-legal-links a {
  color: #94a3b8;              /* same as .footer-copy — WCAG AA 7.45:1 */
  text-decoration: none;
  margin: 0 4px;
}
.footer-legal-links a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .legal-hero { padding: 110px 0 32px; }
  .legal-hero h1 { font-size: 32px; }
}


/* ===== ACCESSIBILITY (WCAG 2.1 AA) ===== */

/* Skip link — first tab stop, lets keyboard users bypass the nav. WCAG 2.4.1 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #ffffff;
  color: #0f172a;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #0f172a;
  outline-offset: 2px;
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect the OS "reduce motion" setting. WCAG 2.3.3.
   .animate-card starts at opacity:0, so it must be forced visible here —
   otherwise reduced-motion users would see nothing at all. */
@media (prefers-reduced-motion: reduce) {
  .nav-m-panel,
  .nav-m-chevron,
  .nav-mobile {
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================
   LEGAL CENTER  (legal.html)
   ============================================= */
.legalhub-hero {
  padding: 130px 0 48px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.legalhub-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.legalhub-hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: var(--dark);
}
.legalhub-hero .legalhub-sub {
  margin-top: 14px;
  font-size: 18px;
  color: var(--text-muted);
  max-width: 620px;
}

.legalhub-body { padding: 56px 0 90px; }
.legalhub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .legalhub-grid { grid-template-columns: 1fr; gap: 36px; }
}

.legalhub-intro h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--dark);
  margin-bottom: 14px;
}
.legalhub-intro p {
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 16px;
}
.legalhub-intro strong { color: var(--text); }

.legalhub-note {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--bg-alt);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legalhub-note p { margin: 0; font-size: 15px; }

/* ---- Accordion card stack ---- */
.legalhub-stack {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.legalhub-panel + .legalhub-panel { border-top: 1px solid var(--border); }

.legalhub-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background var(--transition);
}
.legalhub-trigger:hover { background: var(--bg-alt); }
.legalhub-trigger:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}
.legalhub-trigger-text { min-width: 0; }
.legalhub-trigger-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.3px;
}
.legalhub-trigger-desc {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}
.legalhub-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
}
.legalhub-trigger[aria-expanded="true"] .legalhub-chevron {
  transform: rotate(90deg);
  color: var(--primary);
}
.legalhub-trigger[aria-expanded="true"] { background: var(--bg-alt); }

.legalhub-docs { padding: 4px 26px 24px; }
.legalhub-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.legalhub-doc + .legalhub-doc { margin-top: 10px; }
a.legalhub-doc:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
a.legalhub-doc:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.legalhub-doc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
a.legalhub-doc:hover .legalhub-doc-name { color: var(--primary); }
.legalhub-doc-pending { border-style: dashed; background: var(--bg-alt); }
.legalhub-doc-pending .legalhub-doc-name { color: var(--text-muted); font-weight: 500; }

.legalhub-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 50px;
  white-space: nowrap;
}
.legalhub-badge-live { background: #dcfce7; color: #15803d; }
.legalhub-badge-soon { background: #e2e8f0; color: #475569; }

/* The accordion trigger is wrapped in an <h2> for document outline / screen-reader
   navigation only. Neutralize the site's heading styles so it contributes no
   size, weight, or margin of its own. */
.legalhub-panel > h2 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}
.legalhub-panel > h2::after,
.legalhub-panel > h2::before { content: none; }

/* The site applies `section { padding: 100px 0 }` globally. The accordion panels
   are <section> elements for semantics, not layout, so opt them out. */
.legalhub-panel { padding: 0; }

/* =============================================
   LEGAL DOCUMENT + POLICY NAVIGATOR (privacy.html, terms.html)
   ============================================= */
.legal-wrap.legal-layout {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}
.legal-doc { min-width: 0; }

.legal-aside { position: sticky; top: 96px; }
.legal-aside-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px 2px;
}

@media (max-width: 960px) {
  .legal-wrap.legal-layout { grid-template-columns: 1fr; gap: 40px; }
  .legal-aside { position: static; }
}

/* Badges are no longer used; neutralize if any markup remains. */
.legalhub-badge { display: none; }

/* The document you are currently reading */
.legalhub-doc-current {
  border-color: var(--primary);
  background: rgba(224, 90, 43, 0.06);
}
.legalhub-doc-current .legalhub-doc-name { color: var(--primary); font-weight: 700; }

/* Hero must share the two-column width so the title lines up with the document. */
.legal-hero .legal-wrap { max-width: 1180px; }

/* The navigator sits inside .legal-body, which underlines links. Opt it out. */
.legal-aside a,
.legal-aside a:hover { text-decoration: none; }
.legal-aside .legalhub-doc-name { color: var(--text); }
.legal-aside a.legalhub-doc:hover .legalhub-doc-name { color: var(--primary); }
.legal-aside .legalhub-doc-pending .legalhub-doc-name { color: var(--text-muted); }
.legal-aside .legalhub-doc-current .legalhub-doc-name { color: var(--primary); }

/* Washington My Health My Data Act (RCW 19.373): the consumer health data policy
   needs a SEPARATE AND DISTINCT link on the homepage — not one bundled into the
   general privacy/terms group. Spaced apart so it reads as its own link. */
.footer-chd { margin-top: 6px; }
.footer-chd a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================
   MOBILE HEADER + LEGAL READING ORDER
   Added 2026-10-08.
   ============================================= */

/* The home page drawer now hangs off the white top bar rather than off the
   orange nav band, so its own top border would double the bar's bottom
   border into a 2px line. */
.nav-mobile-topbar { border-top: none; }

/* THE POLICY NAVIGATOR WAS UNREACHABLE ON A PHONE. .legal-layout is a
   two-column grid - document, then navigator - and on one column the
   navigator landed after the document. app-terms.html is 117KB of text, so
   "the other policies" sat tens of screens down and nobody was ever going to
   find it. It now comes first, directly under the title, where on a desktop
   it is already the first thing at eye level on the right. */
@media (max-width: 960px) {
  .legal-aside { order: -1; }
  .legal-aside .legalhub-stack { margin-bottom: 4px; }

  /* Three closed rows carrying a title and a one-line description came to
     352px - most of the top third of a phone, above the document the reader
     actually opened. "Website", "Caregiver App" and "BCBA Dashboard" do not
     need explaining; the descriptions stay on the desktop sidebar, which has
     the room. */
  .legal-aside .legalhub-trigger-desc { display: none; }
  .legal-aside .legalhub-trigger { padding: 16px 20px; }
  .legal-aside .legalhub-docs { padding: 0 20px 18px; }
}

/* Same fault on the Legal Center itself: three paragraphs explaining the
   three products came before the list of documents. */
@media (max-width: 900px) {
  .legalhub-stack { order: -1; }
}