/*
 * Site design layer: light admin-dashboard look (Outfit, indigo brand scale,
 * gray scale, boxed heroes, bordered cards).
 * Loaded last on every page; owns the header, footer, homepage, services,
 * news and the re-skin of the tools, courses and older page templates.
 */

:root {
  --fp-font: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fp-font-display: var(--fp-font);
  --fp-font-cover: var(--fp-font);

  /* Brand scale */
  --fp-brand-25: #f2f7ff;
  --fp-brand-50: #ecf3ff;
  --fp-brand-100: #dde9ff;
  --fp-brand-200: #c2d6ff;
  --fp-brand-300: #9cb9ff;
  --fp-brand-400: #7592ff;
  --fp-brand-500: #465fff;
  --fp-brand-600: #3641f5;
  --fp-brand-700: #2a31d8;
  --fp-brand-950: #161950;

  /* Gray scale */
  --fp-gray-25: #fcfcfd;
  --fp-gray-50: #f9fafb;
  --fp-gray-100: #f2f4f7;
  --fp-gray-200: #e4e7ec;
  --fp-gray-300: #d0d5dd;
  --fp-gray-400: #98a2b3;
  --fp-gray-500: #667085;
  --fp-gray-600: #475467;
  --fp-gray-700: #344054;
  --fp-gray-800: #1d2939;
  --fp-gray-900: #101828;

  --fp-hero-top: #465fff;
  --fp-hero-bottom: #9cb9ff;
  --fp-gradient-blue: linear-gradient(135deg, #465fff 0%, #3641f5 100%);
  --fp-gradient-blue-h: linear-gradient(90deg, #465fff 0%, #7592ff 100%);
  --fp-gradient-dark: linear-gradient(180deg, #1d2939 0%, #101828 100%);
  --fp-gradient-page: linear-gradient(180deg, #f9fafb 0%, #f9fafb 100%);

  /* Older names, mapped onto the brand scale. */
  --fp-ice-50: var(--fp-brand-25);
  --fp-ice-100: var(--fp-brand-50);
  --fp-ice-200: var(--fp-brand-200);
  --fp-ice-500: var(--fp-brand-500);
  --fp-ice-600: var(--fp-brand-600);
  --fp-ice-700: var(--fp-brand-700);
  --fp-ice-950: var(--fp-gray-900);
  --fp-navy: var(--fp-gray-900);
  --fp-primary: var(--fp-brand-500);
  --fp-blue-text: var(--fp-brand-500);
  --fp-light-text: #d0d5dd;

  --fp-ink: var(--fp-gray-800);
  --fp-heading: var(--fp-gray-800);
  --fp-body: var(--fp-gray-600);
  --fp-muted: var(--fp-gray-500);
  --fp-gray: var(--fp-gray-500);
  --fp-gray-light: var(--fp-gray-100);
  --fp-border: var(--fp-gray-200);
  --fp-surface: var(--fp-gray-50);
  --fp-success: #12b76a;
  --fp-star: #f79009;

  --fp-radius: 8px;
  --fp-radius-xl: 16px;
  --fp-radius-20: 24px;
  --fp-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --fp-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --fp-shadow-md: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --fp-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --fp-container: 1280px;
}

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------- */

/* Re-point the legacy brand tokens so older page sections share the palette. */
.fp-body {
  --primary: #1d2939;
  --ink: #1d2939;
  --ink-muted: #667085;
  --ink-subtle: #98a2b3;
  --surface-1: #fcfcfd;
  --surface-2: #f9fafb;
  --inverse-canvas: #1d2939;
  --inverse-surface-1: #344054;
  --inverse-ink-muted: #d0d5dd;
  --blue-60: #465fff;
  --blue-80: #2a31d8;
  --blue-hover: #3641f5;
  --brand-accent: #465fff;
  --semantic-success: #465fff;
  --hairline: #e4e7ec;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-soft: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-strong: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --glow-color: rgba(70, 95, 255, 0.15);
  --scrollbar-thumb: rgba(102, 112, 133, 0.42);
  --scrollbar-thumb-hover: rgba(70, 95, 255, 0.74);
  --scrollbar-track: rgba(236, 243, 255, 0.72);
}

.fp-body .btn-talk { background: var(--fp-ice-500); border-color: var(--fp-ice-500); color: #fff; border-radius: 999px; }
.fp-body .btn-talk:hover { background: var(--fp-ice-600); border-color: var(--fp-ice-600); color: #fff; }

.fp-body {
  font-family: var(--fp-font);
  color: var(--fp-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fp-body h1,
.fp-body h2,
.fp-body h3,
.fp-body h4,
.fp-body h5,
.fp-body h6 {
  font-family: var(--fp-font);
}

.fp-body section[class*="fp-"],
.fp-body main[class*="fp-"] section {
  padding: 0;
}

/* Form controls do not inherit the page font by default. */
.fp-body button,
.fp-body input,
.fp-body select,
.fp-body textarea { font-family: inherit; }

/* Keyboard focus: one visible ring everywhere. */
.fp-body a:focus-visible,
.fp-body button:focus-visible,
.fp-body summary:focus-visible,
.fp-body [tabindex]:focus-visible {
  outline: 2px solid var(--fp-brand-400);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-body *,
  .fp-body *::before,
  .fp-body *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.fp-container {
  width: 100%;
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 32px;
}

.fp-text-blue {
  background: var(--fp-gradient-blue-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fp-grid {
  display: grid;
  gap: 20px;
}

.fp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fp-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: 18px;
  color: var(--fp-heading);
  background: var(--fp-ice-100);
}

/* Buttons ------------------------------------------------------------- */

.fp-button,
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--fp-shadow-xs);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fp-button--lg,
.fp-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }

.fp-button--primary,
.fp-btn--blue,
.fp-btn--gradient { background: var(--fp-brand-500); color: #fff; }

.fp-button--primary:hover,
.fp-btn--blue:hover,
.fp-btn--gradient:hover { background: var(--fp-brand-600); color: #fff; }

.fp-button--light,
.fp-btn--ghost { border-color: var(--fp-gray-300); background: #fff; color: var(--fp-gray-700); }

.fp-button--light:hover,
.fp-btn--ghost:hover { background: var(--fp-gray-50); color: var(--fp-gray-800); }

/* On dark surfaces */
.fp-button--ghost { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; }

.fp-button--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.fp-btn-outline {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: #fff;
  box-shadow: var(--fp-shadow-xs);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fp-btn-outline:hover { background: var(--fp-ice-500); color: #fff; }

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.fp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--fp-gray-700);
  border-bottom: 1px solid var(--fp-gray-100);
}

.admin-bar .fp-header { top: 32px; }

.fp-header--hero { border-bottom-color: transparent; }

.fp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
  max-width: 1440px;
  padding: 0 50px;
}

.fp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fp-gray-800);
  text-decoration: none;
  flex-shrink: 0;
}

.fp-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--fp-brand-50);
}

.fp-brand__mark img { width: 24px; height: auto; display: block; }

.fp-brand__text { display: flex; flex-direction: column; line-height: 1; }
.fp-brand__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.fp-brand__sub { margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--fp-gray-500); }

.fp-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.fp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 23px 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--fp-gray-700);
  background: none;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.fp-nav__link:hover,
.fp-nav__link.is-active { color: var(--fp-brand-500); }
.fp-nav__link svg { color: var(--fp-gray-400); transition: transform 0.15s ease; }
.fp-nav__group:hover .fp-nav__link svg { transform: rotate(180deg); }

.fp-nav__new {
  margin-left: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--fp-brand-50);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fp-brand-500);
}

.fp-nav__group { position: relative; }

.fp-dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  color: var(--fp-gray-700);
  box-shadow: var(--fp-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fp-nav__group:hover .fp-dropdown,
.fp-nav__group:focus-within .fp-dropdown,
.fp-nav__group.is-open .fp-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.fp-dropdown__link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-700);
  text-decoration: none;
}

.fp-dropdown__link:hover { background: var(--fp-gray-50); color: var(--fp-brand-500); }

.fp-dropdown--wide { width: 640px; padding: 12px; }

.fp-dropdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.fp-dropdown__service {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  color: var(--fp-gray-700);
  text-decoration: none;
}

.fp-dropdown__service:hover { background: var(--fp-gray-50); }
.fp-dropdown__service strong { display: block; font-size: 14px; font-weight: 500; color: var(--fp-gray-800); line-height: 1.3; }
.fp-dropdown__service small { display: block; margin-top: 2px; font-size: 12px; color: var(--fp-gray-500); }

.fp-dropdown__all {
  display: block;
  margin-top: 8px;
  padding: 12px;
  border-top: 1px solid var(--fp-gray-100);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-brand-500);
  text-decoration: none;
}

.fp-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.fp-search { position: relative; display: flex; align-items: center; }

.fp-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fp-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-500);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fp-search__toggle:hover { color: var(--fp-gray-800); border-color: var(--fp-gray-300); }
.fp-search__toggle svg { width: 20px; height: 20px; }

.fp-search__input {
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  height: 44px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--fp-gray-800);
  background: #fff;
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.fp-search.is-open .fp-search__input {
  width: 240px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--fp-gray-300);
  box-shadow: var(--fp-shadow-xs);
  opacity: 1;
}

.fp-search.is-open .fp-search__input:focus {
  outline: 0;
  border-color: var(--fp-brand-300);
  box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12);
}

.fp-search.is-open .fp-search__toggle {
  position: absolute;
  right: 0;
  border-color: transparent;
  background: none;
  color: var(--fp-brand-500);
}

.fp-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fp-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  cursor: pointer;
}

.fp-mobile {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 16px 20px 28px;
  border-top: 1px solid var(--fp-gray-100);
  background: #fff;
  color: var(--fp-gray-800);
  box-shadow: var(--fp-shadow-lg);
}

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

.fp-mobile__search input {
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  padding: 0 16px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
}

.fp-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--fp-gray-100);
  font-size: 16px;
  font-weight: 500;
  color: var(--fp-gray-800);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.fp-mobile__link::-webkit-details-marker { display: none; }
.fp-mobile__group summary::after { content: "+"; font-size: 20px; color: var(--fp-gray-400); }
.fp-mobile__group[open] summary::after { content: "–"; }
.fp-mobile__link .fp-nav__new { margin: 0 auto 0 8px; }

.fp-mobile__sublink {
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--fp-gray-600);
  text-decoration: none;
}

.fp-mobile__cta { width: 100%; margin-top: 20px; }

/* ---------------------------------------------------------------------
 * Shared page hero + breadcrumbs
 * ------------------------------------------------------------------- */

.fp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fp-gray-500);
}

.fp-crumbs a { color: var(--fp-gray-500); text-decoration: none; }
.fp-crumbs a:hover { color: var(--fp-ice-600); }
.fp-crumbs__sep { color: var(--fp-gray-300); }
.fp-crumbs [aria-current] { color: var(--fp-gray-800); font-weight: 500; }

.fp-page { background: #fff; }

/* Listing-page heroes sit in the same rounded box as the homepage hero. */
.fp-page-hero {
  position: relative;
  overflow: hidden;
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  border-radius: 24px;
  padding: 40px 0 72px !important;
  background: var(--fp-gray-50);
}

.fp-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--fp-gray-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-gray-200) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 100%);
  opacity: 0.6;
}

.fp-page-hero .fp-container { position: relative; z-index: 1; }

.fp-page-hero__title {
  margin: 40px 0 0;
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fp-gray-800);
}

.fp-page-hero__title--center,
.fp-page-hero__lead--center { text-align: center; }

.fp-page-hero__lead {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fp-gray-500);
}

.fp-chip-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.fp-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--fp-gray-200);
  background: #fff;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.fp-chip:hover,
.fp-chip.is-active { border-color: var(--fp-brand-300); background: var(--fp-brand-50); color: var(--fp-brand-500); }

.fp-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  padding-bottom: 96px;
  position: relative;
  z-index: 2;
}

.fp-group {
  padding: 32px !important;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: #fff;
}

.fp-group__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fp-gray-800);
}

.fp-group__lead {
  margin: 6px 0 24px;
  font-size: 16px;
  color: var(--fp-gray-500);
}

/* ---------------------------------------------------------------------
 * Cards (directory card shape shared by tools and services)
 * ------------------------------------------------------------------- */

.fp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-radius-xl);
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fp-card:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-card__cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.fp-card__head { display: flex; align-items: center; gap: 12px; }

.fp-card__name {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--fp-gray-800);
}

.fp-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  font-size: 15px;
}

.fp-card__pricing { color: var(--fp-ink); }
.fp-card__price { font-size: 13px; color: var(--fp-gray); text-align: right; }

.fp-card__desc {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fp-gray);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-brand-500);
}

.fp-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.fp-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 10px;
  color: #2563eb;
  background: #e8f1ff;
}

.fp-service-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-service-icon--sm { width: 36px; height: 36px; border-radius: 9px; }

/* An illustrated service shows its artwork as a banner across the card. */
.fp-card__head:has(.fp-service-icon img) { flex-direction: column; align-items: stretch; gap: 16px; }

.fp-card .fp-service-icon:has(img),
.fp-mini-service .fp-service-icon:has(img) {
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--fp-brand-25);
}

.fp-card .fp-service-icon img,
.fp-mini-service .fp-service-icon img { transition: transform 0.3s ease; }

.fp-card:hover .fp-service-icon img,
.fp-mini-service:hover .fp-service-icon img { transform: scale(1.05); }
.fp-service-icon--blue { color: #2563eb; background: #e8f1ff; }
.fp-service-icon--sky { color: #0284c7; background: #e0f2fe; }
.fp-service-icon--indigo { color: #4f46e5; background: #eef2ff; }
.fp-service-icon--emerald { color: #059669; background: #e7f8f1; }
.fp-service-icon--amber { color: #d97706; background: #fff4e5; }
.fp-service-icon--violet { color: #7c3aed; background: #f3ecff; }
.fp-service-icon--rose { color: #e11d48; background: #ffeef1; }
.fp-service-icon--slate { color: #334155; background: #eef2f6; }

/* ---------------------------------------------------------------------
 * Homepage
 * ------------------------------------------------------------------- */

/* Section scaffolding (shared by every homepage block) */

.fp-section { padding: 96px 0 !important; background: #fff; }
.fp-section--gray { background: var(--fp-gray-50); }

.fp-section__head { max-width: 780px; margin: 0 auto 48px; text-align: center; }

.fp-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--fp-brand-500);
}

.fp-section__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-gray-800);
}

.fp-section__lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--fp-gray-500); }
.fp-section__foot { margin-top: 40px; text-align: center; }
.fp-section__fine { margin: 16px 0 0; font-size: 13px; color: var(--fp-gray-400); }
.fp-section__fine strong { font-weight: 500; color: var(--fp-gray-500); }

/* Hero */

.fp-hero { max-width: 1440px; margin: 0 auto; padding: 10px 50px 0 !important; }

.fp-hero__box {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 80px 32px 0;
  border-radius: 24px;
  background: var(--fp-gray-50);
}

.fp-hero__box::before {
  content: "";
  position: absolute;
  inset: 44% -6% -12% -6%;
  z-index: -1;
  background:
    radial-gradient(46% 62% at 50% 78%, rgba(70, 95, 255, 0.95) 0%, rgba(117, 146, 255, 0.62) 42%, rgba(194, 214, 255, 0) 100%),
    radial-gradient(34% 46% at 8% 86%, rgba(122, 90, 248, 0.5) 0%, rgba(156, 185, 255, 0) 100%),
    radial-gradient(34% 46% at 92% 86%, rgba(54, 191, 250, 0.42) 0%, rgba(156, 185, 255, 0) 100%);
  filter: blur(32px);
  pointer-events: none;
}

.fp-hero__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--fp-gray-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-gray-200) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 0%, #000 0%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

.fp-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }

.fp-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--fp-brand-100);
  border-radius: 999px;
  background: var(--fp-brand-50);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fp-brand-500);
}

.fp-hero__title {
  margin: 24px 0 0;
  font-size: 52px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fp-gray-800);
}

.fp-hero__lead {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fp-gray-500);
}

.fp-hero__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.fp-hero__logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-gray-500);
}

.fp-hero__logos span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--fp-gray-100);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--fp-shadow-card);
}

.fp-hero__logos img { width: 24px; height: 24px; object-fit: contain; }

.fp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* Hero directory preview: real data in a browser frame. */

.fp-preview {
  max-width: 1060px;
  margin: 64px auto 72px;
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 64px rgba(16, 24, 40, 0.14);
  text-align: left;
}

.fp-preview__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--fp-gray-100);
}

.fp-preview__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--fp-gray-200); }

.fp-preview__bar span {
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--fp-gray-50);
  font-size: 12px;
  color: var(--fp-gray-400);
}

.fp-preview__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); }

.fp-preview__side { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; border-right: 1px solid var(--fp-gray-100); }

.fp-preview__side b {
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-gray-400);
}

.fp-preview__side span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-700);
}

.fp-preview__side svg { flex-shrink: 0; color: var(--fp-gray-400); }
.fp-preview__side em { margin-left: auto; font-size: 12px; font-style: normal; color: var(--fp-gray-400); }
.fp-preview__side .is-active { background: var(--fp-brand-50); color: var(--fp-brand-500); }
.fp-preview__side .is-active svg,
.fp-preview__side .is-active em { color: inherit; }

.fp-preview__main { padding: 20px; background: var(--fp-gray-50); }

.fp-preview__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.fp-preview__stats div { padding: 14px 16px; border: 1px solid var(--fp-gray-200); border-radius: 12px; background: #fff; }
.fp-preview__stats small { display: block; overflow: hidden; font-size: 12px; color: var(--fp-gray-500); white-space: nowrap; text-overflow: ellipsis; }
.fp-preview__stats strong { display: block; margin-top: 4px; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--fp-gray-800); }

.fp-preview__table { margin-top: 12px; border: 1px solid var(--fp-gray-200); border-radius: 12px; background: #fff; }

.fp-preview__thead,
.fp-preview__tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 72px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.fp-preview__thead { border-bottom: 1px solid var(--fp-gray-100); font-size: 12px; font-weight: 500; color: var(--fp-gray-500); }
.fp-preview__tr + .fp-preview__tr { border-top: 1px solid var(--fp-gray-100); }

.fp-preview__tool { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fp-preview__tool img,
.fp-preview__tool .fp-monogram { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; object-fit: contain; font-size: 14px; }
.fp-preview__tool > span:last-child { min-width: 0; }
.fp-preview__tool b { display: block; font-size: 14px; font-weight: 500; color: var(--fp-gray-800); }
.fp-preview__tool small { display: block; overflow: hidden; font-size: 12px; color: var(--fp-gray-500); white-space: nowrap; text-overflow: ellipsis; }

.fp-tag {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  font-style: normal;
  color: #039855;
  white-space: nowrap;
}

.fp-preview__rating { font-size: 14px; font-weight: 500; color: var(--fp-gray-700); white-space: nowrap; }

/* Stat strip */

.fp-statband { padding: 64px 0 0 !important; }
.fp-statband__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.fp-statband__lead { margin: 0; font-size: 18px; font-weight: 500; color: var(--fp-gray-700); text-align: center; }

.fp-statband__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 960px; margin: 0; }
.fp-statband__list div { padding: 4px 24px; text-align: center; }
.fp-statband__list div + div { border-left: 1px solid var(--fp-gray-200); }
.fp-statband__list dd { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--fp-gray-800); }
.fp-statband__list dt { margin-top: 4px; font-size: 14px; color: var(--fp-gray-500); }

/* Framed card: gray outer ring around a white panel */

.fp-frame {
  display: block;
  padding: 8px;
  border: 1px solid var(--fp-gray-100);
  border-radius: 24px;
  background: var(--fp-gray-50);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fp-frame:hover { border-color: var(--fp-brand-200); background: var(--fp-brand-25); }

.fp-frame__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--fp-gray-100);
  border-radius: 16px;
  background: #fff;
}

.fp-frame__art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin: -12px -12px 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fp-brand-25);
  color: var(--fp-brand-500);
}

.fp-frame__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.fp-frame:hover .fp-frame__art img { transform: scale(1.04); }

.fp-frame strong { margin-top: 20px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--fp-gray-800); }
.fp-frame__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--fp-gray-500); }

.fp-frame__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-brand-500);
}

.fp-frame__more svg { transition: transform 0.2s ease; }
.fp-frame:hover .fp-frame__more svg { transform: translateX(3px); }

/* Highlight chips under the pillars */

.fp-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.fp-highlights li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border: 1px solid var(--fp-gray-100);
  border-radius: 24px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  color: var(--fp-gray-700);
  transition: border-color 0.2s ease;
}

.fp-highlights li:hover { border-color: var(--fp-brand-200); }

.fp-highlights span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
}

/* Integration cards */

.fp-toolkit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-toolkit:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-toolkit__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 12px;
  background: var(--fp-gray-50);
}

.fp-toolkit__logo img { width: 28px; height: 28px; object-fit: contain; }
.fp-toolkit h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }
.fp-toolkit p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--fp-gray-500); }

/* Tabs + tool list */

.fp-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px;
  border-radius: 10px;
  background: var(--fp-gray-100);
}

.fp-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-500);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fp-tab:hover { color: var(--fp-gray-800); }
.fp-tab.is-active { background: #fff; color: var(--fp-gray-800); box-shadow: var(--fp-shadow-card); }

.fp-tab__badge {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.fp-discover__layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 32px;
}

.fp-discover__side {
  position: sticky;
  top: 94px;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
}

.fp-discover__side-title { margin: 0 0 12px; padding: 0 12px; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }

.fp-catlist { margin: 0; padding: 0; list-style: none; }

.fp-catlist a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-700);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fp-catlist a:hover { background: var(--fp-gray-50); color: var(--fp-brand-500); }
.fp-catlist svg { flex-shrink: 0; color: var(--fp-gray-400); }
.fp-catlist a:hover svg { color: inherit; }
.fp-catlist em { margin-left: auto; font-size: 12px; font-style: normal; font-weight: 400; color: var(--fp-gray-400); }

.fp-discover__all { width: 100%; margin-top: 12px; }

.fp-discover__main { overflow: hidden; border: 1px solid var(--fp-gray-200); border-radius: 16px; background: #fff; }

.fp-tabpanel { display: flex; flex-direction: column; }
.fp-tabpanel[hidden] { display: none; }

.fp-row { padding: 18px 24px; transition: background-color 0.15s ease; }
.fp-row + .fp-row { border-top: 1px solid var(--fp-gray-100); }
.fp-row:hover { background: var(--fp-gray-25); }

.fp-row__top { display: flex; align-items: center; gap: 16px; }

.fp-row__logo {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: visible;
}

.fp-row__logo img,
.fp-row__logo .fp-monogram { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }

.fp-row__logo--course { align-items: center; justify-content: center; color: var(--fp-brand-500); background: var(--fp-brand-50); }

.fp-row__verified {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--fp-brand-500);
  background: #fff;
  border-radius: 50%;
}

.fp-row__verified svg { width: 18px; height: 18px; }

.fp-row__id { flex: 1; min-width: 0; }

.fp-row__name { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }
.fp-row__name a { color: inherit; text-decoration: none; }
.fp-row__name a:hover { color: var(--fp-brand-500); }

.fp-row__desc {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fp-gray-500);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fp-row__stats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.fp-row__stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-500);
  text-decoration: none;
  font-size: 13px;
  box-shadow: var(--fp-shadow-xs);
}

.fp-row__stat svg { width: 16px; height: 16px; }
.fp-row__stat b { font-weight: 500; color: var(--fp-gray-700); }
.fp-row__stat--go { color: var(--fp-success); }
.fp-row__stat--go:hover { border-color: #a6f4c5; background: #f6fef9; }

.fp-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 60px; }

.fp-row__tags a {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--fp-gray-100);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--fp-gray-600);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fp-row__tags a:hover { background: var(--fp-brand-50); color: var(--fp-brand-500); }

/* Course card + generated cover */

.fp-course {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fp-course:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-course__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; text-decoration: none; }
.fp-course__media img { width: 100%; height: 100%; object-fit: cover; }

.fp-course__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }

.fp-course__meta { margin: 0; font-size: 13px; color: var(--fp-gray-500); }

.fp-stars { color: var(--fp-star); letter-spacing: 1px; margin-right: 6px; }
.fp-stars--sm { color: var(--fp-gray-300); font-size: 14px; margin-right: 2px; }
.fp-stars--sm .is-on { color: var(--fp-star); }

.fp-course__title { margin: 8px 0 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--fp-gray-800); }
.fp-course__title a { color: inherit; text-decoration: none; }
.fp-course__title a:hover { color: var(--fp-brand-500); }

.fp-course__desc {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fp-gray-500);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fp-course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.fp-course__price { font-size: 15px; font-weight: 600; color: var(--fp-gray-800); }

.fp-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--fp-brand-25); }

.fp-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 180px;
  padding: 22px 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 90% at 100% 0%, hsl(var(--hue, 232) 95% 68% / 0.9) 0%, transparent 60%),
    linear-gradient(135deg, hsl(var(--hue, 232) 80% 46%) 0%, hsl(calc(var(--hue, 232) + 18) 62% 24%) 100%);
}

.fp-cover__glow {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}

.fp-cover__free,
.fp-cover__count {
  position: absolute;
  top: 14px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.fp-cover__free { left: 14px; background: #ecfdf3; color: #039855; }
.fp-cover__count { right: 14px; background: rgba(255, 255, 255, 0.18); text-transform: lowercase; }

.fp-cover__brand {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.fp-cover__title {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Services showcase */

.fp-showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 48px;
  padding: 40px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: #fff;
}

.fp-showcase + .fp-showcase { margin-top: 24px; }
.fp-showcase:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fp-showcase:nth-of-type(even) .fp-showcase__info { order: 2; }

.fp-showcase__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.fp-showcase__title { margin: 18px 0 0; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-showcase__text { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--fp-gray-500); }

.fp-showcase__list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 28px; padding: 0; list-style: none; }
.fp-showcase__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--fp-gray-700); }
.fp-showcase__list svg { flex-shrink: 0; margin-top: 1px; color: var(--fp-success); }

.fp-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.fp-mini-service {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: var(--fp-gray-25);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-mini-service:hover { border-color: var(--fp-brand-300); background: #fff; box-shadow: var(--fp-shadow-lg); }

.fp-mini-service__name { margin-top: 16px; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }

.fp-mini-service__text {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fp-gray-500);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fp-mini-service__price { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 500; color: var(--fp-brand-500); }

/* Category grid */

.fp-categories__grid { gap: 16px; text-align: left; }

.fp-catcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-catcard:hover { border-color: var(--fp-brand-300); box-shadow: var(--fp-shadow-lg); }

.fp-catcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
}

.fp-catcard__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fp-catcard strong { display: block; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--fp-gray-800); }
.fp-catcard small { display: block; margin-top: 2px; font-size: 13px; color: var(--fp-gray-500); }

.fp-trending__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }

.fp-pill-tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--fp-gray-600);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.fp-pill-tag:hover { border-color: var(--fp-brand-300); background: var(--fp-brand-25); color: var(--fp-brand-500); }

/* About */

.fp-about { border-top: 1px solid var(--fp-gray-100); }
.fp-about__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.fp-about__title { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-about p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--fp-gray-500); }
.fp-about p:last-child { margin-bottom: 0; }
.fp-about strong { font-weight: 500; color: var(--fp-gray-700); }
.fp-about a { color: var(--fp-brand-500); text-decoration: none; }
.fp-about a:hover { text-decoration: underline; }

/* Carousel */

.fp-carousel { position: relative; }

.fp-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 72px) / 4);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px;
  scrollbar-width: none;
  padding: 4px;
  margin: -4px;
}

.fp-carousel__track::-webkit-scrollbar { display: none; }

.fp-carousel__arrow {
  position: absolute;
  top: calc(50% - 38px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 50%;
  background: #fff;
  color: var(--fp-gray-700);
  box-shadow: var(--fp-shadow-lg);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fp-carousel__arrow:hover { border-color: var(--fp-brand-300); color: var(--fp-brand-500); }
.fp-carousel__arrow--prev { left: -22px; }
.fp-carousel__arrow--next { right: -22px; }

.fp-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }

.fp-carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fp-gray-300);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.fp-carousel__dots button.is-active { width: 24px; background: var(--fp-brand-500); }

.fp-slide {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-slide:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-slide__head { display: flex; align-items: center; gap: 12px; }

.fp-slide__logo {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 12px;
}

.fp-slide__logo img,
.fp-slide__logo .fp-monogram { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.fp-slide__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--fp-gray-800); }
.fp-slide__name a { color: inherit; text-decoration: none; }
.fp-slide__name a:hover { color: var(--fp-brand-500); }
.fp-slide__count { font-size: 13px; color: var(--fp-gray-500); }

.fp-slide__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-700);
}

.fp-slide__saves { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; color: var(--fp-gray-500); }
.fp-slide__saves svg { width: 16px; height: 16px; }

.fp-slide__desc {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fp-gray-500);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fp-slide__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fp-slide__tags span { padding: 2px 10px; border-radius: 999px; background: var(--fp-gray-100); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--fp-gray-600); }

.fp-slide__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 18px; }
.fp-slide__foot .fp-btn-outline { margin-left: auto; }

.fp-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fp-gray-500); }

/* ---------------------------------------------------------------------
 * CTA band + footer
 * ------------------------------------------------------------------- */

.fp-cta-band { padding: 0 0 96px !important; background: #fff; }
.fp-page .fp-cta-band,
.fp-news-page .fp-cta-band { background: transparent; }

.fp-cta-band__inner {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 0 0 0 60px;
  border-radius: 24px;
  background: #1f2b3d;
  color: #fff;
}

.fp-cta-band__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
  pointer-events: none;
}

.fp-cta-band__inner.fp-container { max-width: calc(var(--fp-container) - 64px); }

.fp-cta-band__body { padding: 64px 0; }
.fp-cta-band__title { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.fp-cta-band__lead { margin: 14px 0 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--fp-gray-300); }
.fp-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.fp-cta-band__art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.fp-footer { padding: 80px 0 32px; background: var(--fp-gray-900); color: var(--fp-gray-400); }

.fp-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 40px;
}

.fp-brand--footer { color: #fff; }
.fp-brand--footer .fp-brand__mark { background: #fff; }
.fp-brand--footer .fp-brand__sub { color: var(--fp-gray-400); }

.fp-footer__disclosure { margin: 20px 0 0; max-width: 320px; font-size: 14px; line-height: 1.7; color: var(--fp-gray-400); }

.fp-footer__heading { margin: 0 0 20px; font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; }

.fp-footer__col { display: flex; flex-direction: column; gap: 12px; }
.fp-footer__col a { font-size: 14px; line-height: 20px; color: var(--fp-gray-400); text-decoration: none; transition: color 0.15s ease; }
.fp-footer__col a:hover { color: #fff; }

.fp-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.fp-footer__contact { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: 14px; color: var(--fp-gray-400); }
.fp-footer__contact a { color: var(--fp-gray-300); text-decoration: none; }
.fp-footer__contact a:hover { color: #fff; }

.fp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  color: var(--fp-gray-500);
}

.fp-footer__bottom p { margin: 0 auto 0 0; }
.fp-footer__bottom a { color: var(--fp-gray-400); text-decoration: none; }
.fp-footer__bottom a:hover { color: #fff; }

/* ---------------------------------------------------------------------
 * Detail pages (services; tool detail re-skin shares these tokens)
 * ------------------------------------------------------------------- */

.fp-service { background: #fff; }
.fp-service .fp-cta-band { background: #fff; }

.fp-detail-hero { max-width: 1440px; margin: 0 auto; padding: 10px 50px 0 !important; }

.fp-detail-hero__box {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 32px 56px 64px;
  border-radius: 24px;
  background: var(--fp-gray-50);
}

.fp-detail-hero__box::before {
  content: "";
  position: absolute;
  inset: 30% -10% -50% 40%;
  z-index: -1;
  background:
    radial-gradient(50% 50% at 60% 55%, rgba(70, 95, 255, 0.42) 0%, rgba(117, 146, 255, 0.2) 45%, rgba(194, 214, 255, 0) 100%),
    radial-gradient(30% 40% at 95% 85%, rgba(54, 191, 250, 0.3) 0%, rgba(156, 185, 255, 0) 100%);
  filter: blur(32px);
  pointer-events: none;
}

.fp-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1216px;
  margin: 40px auto 0;
}

.fp-detail-hero__box > .fp-crumbs { max-width: 1216px; margin: 0 auto; }

.fp-detail-hero__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--fp-brand-100);
  border-radius: 999px;
  background: var(--fp-brand-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-brand-500);
  text-decoration: none;
}

.fp-detail-hero__title { margin: 20px 0 0; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--fp-gray-800); }
.fp-detail-hero__tagline { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--fp-gray-500); }
.fp-detail-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.fp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; }
.fp-facts div { padding: 14px 16px; border: 1px solid var(--fp-gray-200); border-radius: 12px; background: #fff; }
.fp-facts dt { font-size: 12px; font-weight: 400; color: var(--fp-gray-500); }
.fp-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }
.fp-facts a { color: var(--fp-brand-500); text-decoration: none; }

.fp-agent-demo {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--fp-gray-900);
  color: #fff;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.28);
}

.fp-agent-demo__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.fp-agent-demo__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--fp-gray-600); }
.fp-agent-demo__bar strong { margin-left: 8px; font-weight: 500; color: var(--fp-gray-300); }

.fp-agent-demo__body { padding: 20px 22px 24px; }

.fp-agent-demo__label {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-gray-400);
}

.fp-agent-demo__label:first-child { margin-top: 0; }

.fp-agent-demo__bubble { padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.fp-agent-demo__bubble--you { background: var(--fp-brand-500); border-bottom-right-radius: 4px; }
.fp-agent-demo__bubble--agent { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-bottom-left-radius: 4px; color: var(--fp-gray-200); }

.fp-agent-demo__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.fp-agent-demo__steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(18, 183, 106, 0.14);
  color: #a6f4c5;
  font-size: 13px;
  font-weight: 500;
}

.fp-agent-demo__steps svg { color: var(--fp-success); }

/* Section nav: pill links that stick under the header */

.fp-tabs--detail {
  position: sticky;
  top: 82px;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--fp-gray-200);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--fp-shadow-card);
}

.fp-tabs--detail a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-500);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fp-tabs--detail a:hover { color: var(--fp-gray-800); }
.fp-tabs--detail a.is-active { background: var(--fp-brand-50); color: var(--fp-brand-500); }

.fp-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 56px;
  padding: 48px 0 96px;
}

.fp-prose { font-size: 16px; line-height: 1.7; color: var(--fp-gray-600); }
.fp-prose section { margin-bottom: 56px; scroll-margin-top: 150px; }
.fp-prose section:last-child { margin-bottom: 0; }
.fp-prose h2 { margin: 0 0 20px; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-prose h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--fp-gray-800); }
.fp-prose p { margin: 0 0 16px; }

.fp-overview { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 40px; }
.fp-overview p:last-child { margin-bottom: 0; }

.fp-overview__art {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: var(--fp-brand-25);
}

.fp-overview__art img { display: block; width: 100%; height: auto; }

.fp-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.fp-feature-list li {
  position: relative;
  padding: 20px 20px 20px 64px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.fp-feature-list li:hover { border-color: var(--fp-brand-200); }

.fp-feature-list li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fp-brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.fp-feature-list strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }
.fp-feature-list span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--fp-gray-500); }

.fp-prose .fp-problems { padding: 28px 32px !important; border: 1px solid #fedf89; border-radius: 16px; background: #fffaeb; }
.fp-prose .fp-problems h2 { font-size: 20px; }

.fp-check-list { margin: 0; padding: 0; list-style: none; }

.fp-check-list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  font-size: 15px;
  color: var(--fp-gray-700);
}

.fp-check-list li:last-child { margin-bottom: 0; }

.fp-check-list li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fp-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fp-check-list--warn li::before {
  background: #f79009 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }

.fp-steps__item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
}

.fp-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--fp-brand-50);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: var(--fp-brand-500);
}

.fp-steps__item strong { display: block; font-size: 16px; font-weight: 600; color: var(--fp-gray-800); }
.fp-steps__item p { margin: 6px 0 10px; font-size: 14px; line-height: 1.6; color: var(--fp-gray-500); }

.fp-steps__who {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--fp-gray-100);
  color: var(--fp-gray-600);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.fp-plans { display: grid; gap: 16px; }
.fp-plans--1 { grid-template-columns: 1fr; }

/* A single plan lays out as one wide row: price and button left, what is included right. */
.fp-plans--1 .fp-plan {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 40px;
  padding: 32px;
}

.fp-plans--1 .fp-plan > * { grid-column: 1; }
.fp-plans--1 .fp-plan ul { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--fp-gray-100); columns: 2; column-gap: 32px; }
.fp-plans--1 .fp-plan li { break-inside: avoid; }
.fp-plans--1 .fp-plan .fp-button { align-self: end; margin-top: 24px; }
.fp-plans--2,
.fp-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
}

.fp-plan.is-featured { border-color: var(--fp-brand-500); box-shadow: 0 0 0 1px var(--fp-brand-500), var(--fp-shadow-lg); }

.fp-plan__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.fp-plan__name { margin: 0 !important; font-size: 14px; font-weight: 500; color: var(--fp-gray-500); }
.fp-plan__price { margin: 10px 0 0 !important; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-plan__period { margin: 4px 0 0 !important; font-size: 14px; color: var(--fp-gray-500); }
.fp-plan ul { flex: 1; margin: 20px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--fp-gray-100); list-style: none; }

.fp-plan li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fp-gray-700);
}

.fp-plan li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312b76a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fp-plan .fp-btn,
.fp-plan .fp-button { width: 100%; }

.fp-note { margin-top: 16px !important; font-size: 14px; line-height: 1.6; color: var(--fp-gray-500); }

.fp-faq { display: flex; flex-direction: column; gap: 12px; }

.fp-faq details {
  padding: 0 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.fp-faq details[open] { border-color: var(--fp-brand-200); }

.fp-faq summary {
  position: relative;
  padding: 18px 36px 18px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-gray-800);
  list-style: none;
  cursor: pointer;
}

.fp-faq summary::-webkit-details-marker { display: none; }

.fp-faq summary::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fp-gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform 0.2s ease;
}

.fp-faq details[open] summary::after { background-color: var(--fp-brand-50); transform: rotate(45deg); }
.fp-faq details p { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--fp-gray-500); }

.fp-detail-side { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 12px; }
.fp-side-title { margin: 12px 0 4px; font-size: 16px; font-weight: 600; color: var(--fp-gray-800); }

.fp-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-side-link:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-side-link__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
}

.fp-side-link__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-side-link strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); }
.fp-side-link small { display: block; margin-top: 2px; font-size: 13px; color: var(--fp-gray-500); }

.fp-mastery {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fp-gray-800);
}

.fp-mastery::before {
  content: "";
  position: absolute;
  inset: -30% -30% 40% 20%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(70, 95, 255, 0.6) 0%, rgba(70, 95, 255, 0) 100%);
}

.fp-mastery__title {
  margin: 0;
  padding: 24px 20px 4px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
}

.fp-mastery ul { margin: 0; padding: 16px 20px 8px; list-style: none; }

.fp-mastery li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.45; color: var(--fp-gray-300); }

.fp-mastery__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fp-brand-300);
}

.fp-mastery__icon svg { width: 16px; height: 16px; }

.fp-mastery .fp-btn { width: calc(100% - 40px); margin: 0 20px 20px; }

/* ---------------------------------------------------------------------
 * Tools directory re-skin
 * ------------------------------------------------------------------- */

.fp-body .tools-page { background: #fff; }
.fp-body .courses-page { background: #fff; }

.fp-body .tools-hero {
  position: relative;
  overflow: hidden;
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  border-radius: 24px;
  padding: 40px 0 64px !important;
  border: 0;
  background: var(--fp-gray-50);
}

.fp-body .tools-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--fp-gray-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-gray-200) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 100%);
  opacity: 0.6;
}
.fp-body .tools-hero > .container { position: relative; z-index: 1; }
.fp-body .tools-hero .container,
.fp-body .tools-body > .container,
.fp-body .tools-detail .container { max-width: var(--fp-container); width: 100%; padding: 0 32px; }

.fp-body .tools-hero__eyebrow,
.fp-body .tools-hero__eyebrow-legacy {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fp-gray-500);
}

.fp-body .tools-hero__eyebrow a { color: var(--fp-gray-500); text-decoration: none; }
.fp-body .tools-hero__eyebrow a:hover { color: var(--fp-brand-500); }

.fp-body .tools-hero__title {
  margin: 28px 0 0;
  font-family: var(--fp-font);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fp-gray-800);
  text-align: center;
}

.fp-body .tools-hero__lead {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fp-gray-500);
  text-align: center;
}

.fp-body .tools-hero__media,
.fp-body .tools-hero__art,
.fp-body .tools-hero img { display: none; }

.fp-body .tools-body { padding: 0 0 72px !important; background: transparent; }

.fp-body .fp-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 32px auto 0;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--fp-shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fp-body .fp-searchbar:focus-within { border-color: var(--fp-brand-300); box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12); }

.fp-body .fp-searchbar .tools-search { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; color: var(--fp-gray-400); }
.fp-body .fp-searchbar input { flex: 1; width: 100%; height: 44px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--fp-ink); }

.fp-searchbar__submit {
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--fp-brand-500);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.fp-searchbar__submit:hover { background: var(--fp-ice-600); }

.fp-catindex { padding: 0 0 8px !important; margin-top: 48px; position: relative; z-index: 2; }
.fp-catindex--page { padding-bottom: 72px !important; }
.fp-catindex .container { max-width: var(--fp-container); width: 100%; padding: 0 32px; }
.fp-catindex__title { margin: 0 0 24px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-catindex__more { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--fp-ice-600); text-decoration: none; }

.fp-catcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fp-catcard-lg {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-catcard-lg:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-catcard-lg__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 136px;
  height: 136px;
  overflow: hidden;
  border: 1px solid var(--fp-brand-100);
  border-radius: 16px;
  color: var(--fp-brand-500);
  background:
    radial-gradient(80% 80% at 100% 0%, #fff 0%, transparent 70%),
    var(--fp-brand-50);
}

.fp-catcard-lg__art svg { width: 40px; height: 40px; }
.fp-catcard-lg__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.fp-catcard-lg:hover .fp-catcard-lg__art img { transform: scale(1.06); }

.fp-catcard-lg__body { display: flex; flex-direction: column; min-width: 0; }

.fp-catcard-lg__title { margin: 0 0 8px; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--fp-gray-800); }
.fp-catcard-lg__title a { color: inherit; text-decoration: none; }
.fp-catcard-lg__title a:hover { color: var(--fp-ice-600); }

.fp-catcard-lg__tags { margin: 0; padding: 0; list-style: none; }
.fp-catcard-lg__tags a { display: inline-block; padding: 1px 0; font-size: 14px; line-height: 1.6; color: var(--fp-gray-600); text-decoration: none; }
.fp-catcard-lg__tags a:hover { color: var(--fp-ice-600); }
.fp-catcard-lg__tags em { font-style: normal; color: var(--fp-gray-400); }

.fp-catcard-lg__all { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; color: var(--fp-brand-500); text-decoration: none; }
.fp-catcard-lg__all:hover { color: var(--fp-ice-700); }

.fp-directory-title { margin: 48px 0 8px; font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--fp-ink); }

.fp-tools-hero .fp-crumbs { justify-content: flex-start; }

.fp-body .tools-page { padding-top: 0; margin-top: 0; }
.fp-body .tools-hero + .tools-body { padding-top: 40px !important; }
.fp-body .course-detail__enrol { background: var(--fp-brand-500); border-color: var(--fp-brand-500); color: #fff; border-radius: 8px; }
.fp-body .course-detail__curriculum { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: session; }

.fp-body .course-detail__curriculum li {
  position: relative;
  margin: 0;
  padding: 14px 16px 14px 64px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-gray-700);
  counter-increment: session;
}

.fp-body .course-detail__curriculum li::before {
  content: counter(session, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border-radius: 8px;
  background: var(--fp-brand-50);
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-brand-500);
  transform: translateY(-50%);
}

.fp-body .course-detail__card { border: 1px solid var(--fp-gray-200); border-radius: 16px; box-shadow: none; }
.fp-body .course-detail__title { font-family: var(--fp-font); font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--fp-gray-800); }
.fp-body .course-detail__lead { font-size: 18px; line-height: 1.55; color: var(--fp-gray-500); }
.fp-body .course-detail__hero { aspect-ratio: 16 / 9; border: 1px solid var(--fp-gray-200); border-radius: 16px; background: var(--fp-brand-25); }
.fp-body .course-detail__hero img { object-position: center; }
.fp-cover--hero { min-height: 100%; padding: 36px 40px; }
.fp-cover-img.fp-cover--hero { padding: 0; }
.fp-cover--hero .fp-cover__title { font-size: 44px; }
.fp-cover--hero .fp-cover__brand { font-size: 14px; }
.fp-cover--hero .fp-cover__free { font-size: 12px; }
.fp-cover--hero .fp-cover__count { font-size: 14px; top: 20px; right: 20px; }
.fp-body .tools-controls { padding-top: 0; }
.fp-body .fp-searchbar { position: relative; top: auto; z-index: 3; }
.fp-body .tools-directory-nav { border-bottom: 1px solid var(--fp-gray-200); }
.fp-directory-actions { display: flex; align-items: center; gap: 12px; }
.fp-body .tools-filters-toggle { display: inline-block; }
.fp-body .tools-filters-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
  cursor: pointer;
}
.fp-body .tools-page[data-filters-open="1"] .tools-filters-toggle > summary { border-color: var(--fp-ice-500); color: var(--fp-ice-600); }
.fp-body .tools-sidebar { border-top: 0; }

.fp-body .tools-search { border: 0; background: transparent; }
.fp-body .tools-search input { font-family: var(--fp-font); font-size: 17px; }

.fp-body .tools-meta__count { font-size: 15px; color: var(--fp-gray); }

.fp-body .tools-discovery-tab {
  font-family: var(--fp-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-gray-500);
}

.fp-body .tools-discovery-tab.is-active { color: var(--fp-primary); border-color: var(--fp-primary); }
.fp-body .tools-discovery-tab.is-active::after { background: var(--fp-primary); }

.fp-body .tools-sort select { border-radius: 8px; font-family: var(--fp-font); }

.fp-body .tools-sidebar {
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
}

.fp-body .tools-sidebar__title { font-family: var(--fp-font); font-size: 15px; font-weight: 600; color: var(--fp-heading); letter-spacing: 0; text-transform: none; }
.fp-body .tools-sidebar__opt { font-size: 15px; color: var(--fp-gray); }
.fp-body .tools-sidebar__opt input { accent-color: var(--fp-ice-500); }
.fp-body .tools-sidebar__clear { color: var(--fp-ice-600); }

.fp-body .tools-grid { gap: 20px; }

/* Directory card */
.fp-body .tool-card {
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: var(--fp-radius-xl);
  background: #fff;
  box-shadow: none;
  font-family: var(--fp-font);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fp-body .tool-card:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); transform: none; }
.fp-body .tool-card--featured { border-color: var(--fp-border); }
.fp-body .tool-card__head { gap: 12px; padding-bottom: 0; border: 0; }

.fp-body .tool-card__logo {
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 12px;
  background: #fff;
}

.fp-body .tool-card__verified { top: -8px; right: -8px; color: var(--fp-brand-500); }
.fp-body .tool-card__name { font-family: var(--fp-font); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--fp-gray-800); }
.fp-body .tool-card__stars { color: var(--fp-gray); }

.fp-body .tool-card__pricerow { margin-top: 18px; padding-top: 0; border: 0; }
.fp-body .tool-card__pricing { padding: 2px 10px; border-radius: 999px; background: #ecfdf3; font-size: 12px; line-height: 18px; font-weight: 500; color: #039855; }
.fp-body .tool-card__pricing:empty { display: none; }
.fp-body .tool-card__save { color: var(--fp-gray); }
.fp-body .tool-card__save[data-count="0"] .tool-card__save-n { display: none; }

.fp-body .tool-card__desc { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--fp-gray); }

.fp-body .tool-card__tags { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 6px; margin-top: 12px; }
.fp-body .tool-card__tags > * { flex: 0 0 auto; width: auto; }
.fp-body .tool-card__tag { padding: 2px 10px; border: 0; border-radius: 999px; background: var(--fp-gray-100); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--fp-gray-600); }
.fp-body .tool-card__tag:hover { background: var(--fp-brand-50); color: var(--fp-brand-500); }

.fp-body .tool-card__foot { padding-top: 20px; border: 0; }
.fp-body .tool-card__pick { font-size: 14px; color: var(--fp-gray); background: none; padding: 0; border: 0; }

.fp-body .tool-card__visit {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .tool-card__visit:hover { border-color: var(--fp-brand-500); background: var(--fp-brand-500); color: #fff; }

.fp-body .tools-pager__btn { border-radius: 8px; border-color: var(--fp-gray-300); color: var(--fp-gray-700); }
.fp-body .tools-chip { border-radius: 999px; background: var(--fp-ice-50); color: var(--fp-ice-700); border-color: var(--fp-ice-200); }

/* Tool detail */
.fp-body .tools-page--detail { background: #fff; padding-top: 24px; }
.fp-body .tools-page--detail > .container { max-width: var(--fp-container); width: 100%; padding: 0 32px; }
.fp-body .tools-detail { margin-top: 20px; }

.fp-body .tools-detail__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 48px 56px;
  border: 0;
  border-radius: 24px;
  background: var(--fp-gray-50);
  box-shadow: none;
}

.fp-body .tools-detail__header::before {
  content: "";
  position: absolute;
  inset: 30% -10% -50% 40%;
  z-index: -1;
  background: radial-gradient(50% 50% at 60% 55%, rgba(70, 95, 255, 0.34) 0%, rgba(117, 146, 255, 0.16) 45%, rgba(194, 214, 255, 0) 100%);
  filter: blur(32px);
  pointer-events: none;
}

.fp-body .tools-detail__idrow { display: flex; align-items: flex-start; gap: 14px; }

.fp-body .tools-detail__logo {
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fp-shadow-card);
}

.fp-body .tools-detail__logo img { width: 100%; height: 100%; object-fit: contain; }

.fp-body .tools-detail__title {
  margin: 0;
  font-family: var(--fp-font);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-heading);
}

.fp-body .tools-detail__score { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--fp-gray-500); }
.fp-body .tools-detail__score strong { color: var(--fp-gray-800); }
.fp-stars--lg { color: #d1d5db; font-size: 20px; letter-spacing: 2px; margin-right: 0; }
.fp-stars--lg .is-on { color: var(--fp-star); }

.fp-body .tools-detail__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fp-brand-500);
}

.fp-body .tools-detail__tagline { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--fp-gray-500); }

.tools-detail__fpfacts { margin-top: 20px; }
.tools-detail__follow dd { display: inline-flex; align-items: center; gap: 10px; }
.tools-detail__follow a { display: inline-flex; color: var(--fp-ice-600); }
.tools-detail__follow .tools-social-mark { width: 16px; height: 16px; color: var(--fp-ice-600); }

.fp-body .tools-detail__actions { display: flex; gap: 12px; margin-top: 28px; }

.fp-body .tools-detail__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .tools-detail__save:hover { border-color: var(--fp-brand-300); color: var(--fp-brand-500); }
.fp-body .tools-detail__save[data-count="0"] .tool-card__save-n { display: none; }
.fp-body .tools-detail__visit { min-width: 150px; height: 48px; border-radius: 8px; font-size: 16px; font-weight: 500; }

.fp-body .tools-detail__media { border: 1px solid var(--fp-gray-200); border-radius: 16px; overflow: hidden; }

.tools-detail__media--cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 28px;
  color: var(--fp-gray-800);
  text-align: center;
  background:
    radial-gradient(70% 80% at 50% 110%, rgba(70, 95, 255, 0.28) 0%, rgba(156, 185, 255, 0) 70%),
    linear-gradient(var(--fp-gray-200) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--fp-gray-200) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--fp-gray-50);
}

.tools-detail__cover-logo {
  display: inline-flex;
  width: 96px;
  height: 96px;
  padding: 14px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--fp-shadow-lg);
}

.tools-detail__cover-logo img,
.tools-detail__cover-logo .fp-monogram { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.tools-detail__cover-name { margin-top: 8px; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.tools-detail__cover-tag { max-width: 420px; font-size: 16px; color: var(--fp-gray-500); }
.tools-detail__cover-host { position: absolute; left: 18px; bottom: 14px; font-size: 13px; color: var(--fp-gray-400); }

.fp-body .tools-detail__tabs {
  position: sticky;
  top: 82px;
  z-index: 20;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 0;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--fp-gray-200);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--fp-shadow-card);
}

.fp-body .tools-detail__tabs a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-gray-500);
  white-space: nowrap;
}

.fp-body .tools-detail__tabs a:hover { color: var(--fp-gray-800); }
.fp-body .tools-detail__tabs a.is-active { background: var(--fp-brand-50); color: var(--fp-brand-500); }
.fp-body .tools-detail__tabs a::after { display: none; }
.fp-body .tools-detail__updated { display: none; }

.fp-body .tools-detail__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-top: 48px; }

.fp-body .tools-detail__h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: var(--fp-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-gray-800);
}

.fp-body .tools-detail__h2::before,
.fp-body .tools-detail__h2::after { display: none; }
.fp-body .tools-detail__section { padding: 0 0 48px; border: 0; scroll-margin-top: 150px; }
.fp-body .tools-detail__prose { font-size: 16px; line-height: 1.7; color: var(--fp-gray-600); }
.fp-body .tools-detail__prose h2,
.fp-body .tools-detail__prose h3 { font-family: var(--fp-font); font-size: 22px; color: var(--fp-ink); }

.fp-body .tools-detail__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; columns: auto; }

.fp-body .tools-detail__features li {
  position: relative;
  margin: 0;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-gray-700);
}

.fp-body .tools-detail__features li::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--fp-brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.fp-body .tools-detail__proscons { gap: 24px; }
.fp-body .tools-detail__pros,
.fp-body .tools-detail__cons { padding: 20px 24px; border: 1px solid #a6f4c5; border-radius: 16px; background: #f6fef9; box-shadow: none; }
.fp-body .tools-detail__cons { border-color: #fecdca; background: #fffbfa; }
.fp-body .tools-detail__pros li,
.fp-body .tools-detail__cons li { position: relative; padding-left: 30px; font-size: 15px; color: var(--fp-gray-700); list-style: none; }

.fp-body .tools-detail__pros li::before,
.fp-body .tools-detail__cons li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fp-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.fp-body .tools-detail__cons li::before {
  background: #ef4444 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.fp-body .tools-detail__pricing { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fp-body .tools-detail__plan { min-height: 0; border: 1px solid var(--fp-gray-200); border-radius: 16px; background: #fff; box-shadow: none; }
.fp-body .tools-detail__plan-name { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--fp-gray-500); }
.fp-body .tools-detail__plan-price { font-size: 22px; font-weight: 700; color: var(--fp-gray-800); }
.fp-body .tools-detail__faqitem { border: 1px solid var(--fp-border); border-radius: 12px; background: #fff; }
.fp-body .tools-detail__panel { border: 1px solid var(--fp-border); border-radius: 12px; background: #fff; box-shadow: none; }
.fp-body .tools-detail__panel-title { font-family: var(--fp-font); font-size: 13px; letter-spacing: 0.06em; color: var(--fp-gray); }
.fp-body .tools-detail__visit--aside { width: 100%; justify-content: center; border-radius: 6px; background: var(--fp-ice-500); border-color: var(--fp-ice-500); color: #fff; }

.fp-body .tools-detail__visit:not(.tools-detail__visit--aside) { background: var(--fp-ice-500); border-color: var(--fp-ice-500); color: #fff; }
.fp-body .tools-detail__visit:hover { background: var(--fp-ice-600); border-color: var(--fp-ice-600); }
.fp-body .tools-detail__aside { display: flex; flex-direction: column; gap: 16px; }
.fp-body .tools-detail__aside .fp-mastery { margin-top: 8px; }
.fp-body .tools-detail__compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fp-body .tools-detail__compare th { padding: 10px 12px; border-bottom: 2px solid var(--fp-gray-light); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fp-gray); text-align: left; }
.fp-body .tools-detail__compare td { padding: 12px; border-bottom: 1px solid var(--fp-gray-light); }
.fp-body .tools-detail__compare a { color: var(--fp-ice-600); text-decoration: none; font-weight: 500; }
.fp-body .tools-detail__compare a:hover { text-decoration: underline; }

.fp-body .tools-related {
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

.fp-body .tools-related__title {
  margin: 0 0 24px;
  font-family: var(--fp-font);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fp-gray-800);
}

.fp-body .tools-related__grid { gap: 16px; }

.fp-body .tools-alternative-card {
  padding: 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  font-family: var(--fp-font);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-body .tools-alternative-card:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }
.fp-body .tools-alternative-card__logo { width: 48px; height: 48px; padding: 4px; border: 1px solid var(--fp-gray-200); border-radius: 12px; }
.fp-body .tools-alternative-card h3 { font-family: var(--fp-font); font-size: 16px; font-weight: 600; color: var(--fp-gray-800); }
.fp-body .tools-alternative-card__tags { gap: 6px; }
.fp-body .tools-alternative-card__tags span,
.fp-body .tools-alternative-card__tags a { padding: 2px 10px; border: 0; border-radius: 999px; background: var(--fp-gray-100); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--fp-gray-600); }
.fp-body .tools-alternative-card__cta {
  align-self: flex-end;
  width: auto;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
}
.fp-body .tools-alternative-card__cta:hover { border-color: var(--fp-brand-500); background: var(--fp-brand-500); color: #fff; }
.fp-body .tools-compare__col--head { border: 1px solid var(--fp-gray-200); border-radius: 16px; background: #fff; box-shadow: none; }
.fp-body .tools-compare__col--head h2 { font-family: var(--fp-font); font-size: 20px; font-weight: 600; color: var(--fp-gray-800); }
.fp-body .tools-compare__col--head h2 a { color: inherit; text-decoration: none; }
.fp-body .tools-compare__stars { font-size: 14px; color: var(--fp-gray-500); }
.fp-body .tools-compare__stars strong { color: var(--fp-gray-800); }
.fp-body a.tools-related__viewall { color: var(--fp-brand-500); font-weight: 500; }

/* ---------------------------------------------------------------------
 * Courses (education platform)
 * ------------------------------------------------------------------- */

.fp-edu-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  padding: 72px 24px 0 !important;
  border-radius: 24px;
  background: var(--fp-gray-50);
  text-align: center;
}

.fp-edu-hero::before {
  content: "";
  position: absolute;
  inset: 45% -6% -40% -6%;
  z-index: -1;
  background:
    radial-gradient(46% 62% at 50% 78%, rgba(70, 95, 255, 0.5) 0%, rgba(117, 146, 255, 0.3) 42%, rgba(194, 214, 255, 0) 100%),
    radial-gradient(34% 46% at 8% 86%, rgba(122, 90, 248, 0.3) 0%, rgba(156, 185, 255, 0) 100%),
    radial-gradient(34% 46% at 92% 86%, rgba(54, 191, 250, 0.26) 0%, rgba(156, 185, 255, 0) 100%);
  filter: blur(32px);
  pointer-events: none;
}

.fp-edu-hero__inner { max-width: 820px; margin: 0 auto; }

.fp-edu-hero__pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--fp-brand-100);
  border-radius: 999px;
  background: var(--fp-brand-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-brand-500);
}

.fp-edu-hero__title { margin: 24px 0 0; font-size: 48px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--fp-gray-800); }
.fp-edu-hero__lead { margin: 20px auto 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--fp-gray-500); }

.fp-edu-hero__cta { margin-top: 36px; }

.fp-edu-hero__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; margin-top: 44px; }
.fp-edu-hero__logos img { height: 26px; width: auto; }

.fp-edu-hero__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 0 48px;
  list-style: none;
}

.fp-edu-hero__covers {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 64px;
}

.fp-edu-hero__covers img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.1);
}

.fp-edu-hero__features li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-gray-700);
  box-shadow: var(--fp-shadow-xs);
}

.fp-edu-hero__features svg { width: 20px; height: 20px; color: var(--fp-brand-500); }

.fp-edu-steps { padding-top: 72px !important; text-align: center; }
.fp-edu-steps__title { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--fp-gray-800); }
.fp-edu-steps__lead { max-width: 520px; margin: 10px auto 0; font-size: 17px; color: var(--fp-gray); }

.fp-edu-steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; text-align: left; }

.fp-edu-step {
  padding: 22px;
  border: 1px solid var(--fp-border);
  border-radius: 24px;
  background: #fff;
}

.fp-edu-step h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 19px; font-weight: 700; color: var(--fp-ink); }
.fp-edu-step h3 span { font-size: 30px; font-weight: 700; color: var(--fp-brand-500); }
.fp-edu-step p { margin: 14px 0 0; padding: 16px; border-radius: 14px; background: var(--fp-surface); font-size: 15px; line-height: 1.55; color: var(--fp-gray); }

.fp-body .fp-edu-catalog { padding: 72px 0 88px !important; }
.fp-edu-catalog__title { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--fp-gray-800); text-align: center; }
.fp-edu-catalog__lead { margin: 12px 0 0; font-size: 16px; color: var(--fp-gray-500); text-align: center; }

.fp-body .fp-edu-catalog .fp-searchbar .tools-sort { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; }
.fp-body .fp-edu-catalog .fp-searchbar .tools-sort__label { font-size: 12px; color: var(--fp-gray); }
.fp-body .fp-edu-catalog .fp-searchbar select { height: 40px; border: 1px solid var(--fp-gray-300); border-radius: 8px; padding: 0 12px; background: #fff; }

.fp-body .courses-page .tools-meta { justify-content: center; border: 0; }
.fp-body .courses-page .tools-pills { justify-content: center; border: 0; }
.fp-body .courses-page .tools-pill { border-radius: 999px; color: var(--fp-heading); font-weight: 500; }
.fp-body .courses-page .tools-pill.is-active { background: var(--fp-ice-500); border-color: var(--fp-ice-500); color: #fff; }
.fp-body .courses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fp-body .courses-page .tools-layout { padding-top: 12px; }

/* ---------------------------------------------------------------------
 * News
 * ------------------------------------------------------------------- */

.fp-news-hero {
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  border-radius: 24px;
  padding: 72px 0 !important;
  background-color: var(--fp-gray-50);
  background-image:
    linear-gradient(var(--fp-gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-gray-100) 1px, transparent 1px);
  background-size: 64px 64px;
  text-align: center;
}

.fp-news-hero h1 { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--fp-ink); }
.fp-news-hero p { max-width: 560px; margin: 12px auto 0; font-size: 17px; line-height: 1.6; color: #4b5563; }

.fp-news { padding: 40px 0 96px !important; background: #fff; }

.fp-news__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 36px; }

.fp-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fp-news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-news-card:hover { border-color: var(--fp-brand-200); box-shadow: var(--fp-shadow-lg); }

.fp-news-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fp-gray-100); }

.fp-news-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.fp-news-card__meta,
.fp-news-card__title { display: block; }
.fp-news-card__meta { margin: 0; font-size: 13px; color: var(--fp-gray-500); }
.fp-news-card__cat { color: var(--fp-brand-500); font-weight: 500; }
.fp-news-card__title { margin: 8px 0 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--fp-gray-800); transition: color 0.15s ease; }
.fp-news-card:hover .fp-news-card__title { color: var(--fp-brand-500); }

.fp-news__pager { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }

.fp-news__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  color: var(--fp-gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
}

.fp-news__pager .page-numbers.current { background: var(--fp-ice-500); border-color: var(--fp-ice-500); color: #fff; }

/* Article */

.fp-article { background: #fff; }
.fp-article__inner { padding: 32px 0 80px; }
.fp-article__related + .fp-cta-band { padding-top: 96px !important; }

.fp-article__cat {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid var(--fp-brand-100);
  border-radius: 999px;
  background: var(--fp-brand-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--fp-brand-500);
  text-decoration: none;
}
.fp-article__head { max-width: 840px; margin: 56px auto 0; text-align: center; }
.fp-article__title { margin: 0; font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: #1f2937; }
.fp-article__lead { margin: 20px auto 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: var(--fp-gray); }

.fp-article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 24px auto 0;
  font-size: 14px;
  color: var(--fp-gray-500);
}

.fp-article__meta time { display: inline-flex; align-items: center; gap: 8px; }
.fp-article__meta svg { width: 16px; height: 16px; color: var(--fp-gray-400); }
.fp-article__cover { max-width: 960px; margin: 40px auto 0; }
.fp-article__body.content-formatted img { border-radius: 16px; }
.fp-article__cover img { width: 100%; height: auto; border-radius: 16px; display: block; }

.fp-article__body.content-formatted {
  max-width: 800px;
  margin: 40px auto 0;
  font-family: var(--fp-font);
  font-size: 18px;
  line-height: 1.6;
  color: #1f2937;
}

.fp-article__body.content-formatted h2,
.fp-article__body.content-formatted h3,
.fp-article__body.content-formatted h4 {
  padding-left: 0;
  border-left: 0;
  font-family: var(--fp-font);
  letter-spacing: -0.01em;
  color: #1f2937;
}

.fp-article__body.content-formatted h2 { margin: 56px 0 14px; font-size: 30px; line-height: 1.3; font-weight: 700; }
.fp-article__body.content-formatted h3 { margin: 36px 0 12px; font-size: 23px; line-height: 1.35; font-weight: 700; }
.fp-article__body.content-formatted h2::before,
.fp-article__body.content-formatted h3::before { display: none; }
.fp-article__body.content-formatted p { margin: 0 0 18px; color: #1f2937; }
.fp-article__body.content-formatted a { color: #1f2937; text-decoration: underline; text-underline-offset: 2px; border: 0; background: none; }
.fp-article__body.content-formatted a:hover { color: var(--fp-ice-600); }
.fp-article__body.content-formatted ul,
.fp-article__body.content-formatted ol { margin: 0 0 20px; padding-left: 22px; }
.fp-article__body.content-formatted li { margin-bottom: 8px; padding-left: 0; }
.fp-article__body.content-formatted ul li::before { display: none; }
.fp-article__body.content-formatted ul { list-style: disc; }
.fp-article__body.content-formatted ul > li::marker { content: normal; color: #1f2937; }
.fp-article__body.content-formatted img { max-width: 100%; height: auto; border-radius: 4px; }
.fp-article__body.content-formatted figure { margin: 24px 0; }
.fp-article__body.content-formatted blockquote { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--fp-brand-100); border-left: 4px solid var(--fp-brand-500); border-radius: 12px; background: var(--fp-brand-25); font-style: normal; color: var(--fp-gray-700); }
.fp-article__body.content-formatted blockquote::before { display: none; }
.fp-article__body.content-formatted table { width: 100%; border-collapse: collapse; font-size: 16px; }
.fp-article__body.content-formatted th,
.fp-article__body.content-formatted td { padding: 10px 12px; border: 1px solid var(--fp-border); text-align: left; }
.fp-article__body.content-formatted th { background: var(--fp-ice-50); }
.fp-article__foot { max-width: 800px; margin: 48px auto 0; }

/* ---------------------------------------------------------------------
 * Older page templates (about, project strategy, contact): shared controls
 * re-skinned so they sit with the rest of the theme.
 * ------------------------------------------------------------------- */

.fp-body .btn {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .btn-primary { background: var(--fp-brand-500); color: #fff; }
.fp-body .btn-primary:hover { background: var(--fp-brand-600); color: #fff; }
.fp-body .btn-secondary { border: 1px solid var(--fp-gray-300); background: #fff; color: var(--fp-gray-700); }
.fp-body .btn-secondary:hover { background: var(--fp-gray-50); color: var(--fp-gray-800); }

.fp-body .eyebrow { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fp-brand-500); }
.fp-body .text-accent { color: var(--fp-brand-500); }
.fp-body .bg-canvas { background: #fff; }
.fp-body .border-bottom { border-bottom-color: var(--fp-gray-100); }

.fp-body .strategy-hero {
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  padding: 72px 0;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(720px 420px at 82% 16%, rgba(70, 95, 255, 0.14), transparent 72%),
    var(--fp-gray-50);
}

.fp-body .strategy-hero > .container { padding: 0 56px; }

/* Closing banner: a rounded dark panel like the site-wide call to action. */
.fp-body .strategy-cta {
  width: calc(100% - 64px);
  max-width: 1216px;
  margin: 96px auto;
  padding: 64px 60px;
  border-radius: 24px;
  background:
    radial-gradient(520px 300px at 85% 20%, rgba(70, 95, 255, 0.45), transparent 70%),
    var(--fp-gray-800);
}

.fp-body .strategy-cta > .container { width: 100%; padding: 0; }
.fp-body .strategy-cta h2 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.fp-body .strategy-hero__title { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; }

.fp-body .faq-tab { font-size: 14px; font-weight: 500; }
.fp-body .faq-section-header h2 { font-size: 36px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.01em; }

.fp-body .about-hero {
  width: calc(100% - 100px);
  max-width: 1340px;
  margin: 10px auto 0;
  border-radius: 24px;
  border: 0;
  background: var(--fp-gray-50);
}

/* Body copy keeps its emphasis inline (the block style is for the row title only). */
.fp-body .principle-body .text-muted strong { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: var(--fp-gray-800); }

.brand-story-images { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 64px; }

.brand-story-images__item {
  position: relative;
  flex: 1;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--fp-gray-200);
  border-radius: 16px;
  background: var(--fp-brand-25);
}

.brand-story-images__item--lead { flex: 1.25; box-shadow: var(--fp-shadow-lg); }
.brand-story-images__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

.brand-story-images__item figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 14px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-gray-700);
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .contact-hero-bg.section-cta-soft {
  min-height: 0;
  padding: 72px 0 96px !important;
  background:
    radial-gradient(520px 420px at 85% 0%, rgba(70, 95, 255, 0.1), transparent 70%),
    var(--fp-gray-50);
}

.fp-body .contact-hero-bg .cta-glass-panel {
  max-width: 1120px;
  border: 1px solid var(--fp-gray-200);
  border-radius: 24px;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.fp-body .cta-glass-panel::before { display: none; }
.fp-body .contact-hero-bg .cta-content-side,
.fp-body .contact-hero-bg .cta-form-side { padding: 48px !important; }
.fp-body .cta-content-side { background: var(--fp-brand-25); }
.fp-body .cta-tag { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--fp-brand-500); }
.fp-body .cta-title { font-weight: 700; letter-spacing: -0.02em; color: var(--fp-gray-800); }
.fp-body .cta-desc { color: var(--fp-gray-500); }

.fp-body .form-dark label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fp-gray-700); }

.fp-body .form-dark .input-control {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--fp-gray-300);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  color: var(--fp-gray-800);
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .form-dark .input-control::placeholder { color: var(--fp-gray-400); }

.fp-body .form-dark .input-control:focus {
  border-color: var(--fp-brand-300);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12);
}

.fp-body .form-dark .btn-submit {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--fp-brand-500);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  box-shadow: var(--fp-shadow-xs);
}

.fp-body .form-dark .btn-submit:hover { background: var(--fp-brand-600); transform: none; }
.fp-body .form-dark .form-note { font-size: 13px; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--fp-gray-400); }

.fp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 64px 24px;
  border: 1px dashed var(--fp-gray-300);
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

.fp-body .tools-empty { grid-column: 1 / -1; padding: 64px 24px; border: 1px dashed var(--fp-gray-300); border-radius: 24px; background: #fff; text-align: center; }
.fp-body .tools-empty .tools-empty__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--fp-gray-800); }
.fp-body .tools-empty .tools-empty__hint { margin: 8px 0 0; font-size: 15px; color: var(--fp-gray-500); }
.fp-body .fp-empty .tools-empty__title { margin: 0; font-size: 18px; font-weight: 500; color: var(--fp-gray-700); }

.fp-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 32px auto -16px;
  overflow: hidden;
  border: 1px solid var(--fp-brand-100);
  border-radius: 24px;
  background: var(--fp-brand-50);
  color: var(--fp-brand-500);
  box-shadow: var(--fp-shadow-lg);
}

.fp-body .tools-hero .fp-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .fp-nav { gap: 22px; }
  .fp-header__inner { padding: 0 32px; }
  .fp-header__login { display: none; }
  .fp-hero { padding: 10px 32px 0 !important; }
  .fp-hero__title { font-size: 44px; }
  .fp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-carousel__track { grid-auto-columns: calc((100% - 48px) / 3); }
  .fp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .fp-footer__cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .fp-footer__contact { flex-direction: row; gap: 18px; }
}

@media (max-width: 1023px) {
  .fp-nav,
  .fp-header__cta,
  .fp-search { display: none; }
  .fp-burger { display: inline-flex; }

  .fp-section { padding: 72px 0 !important; }
  .fp-section__title { font-size: 30px; }
  .fp-hero__box { padding-top: 64px; }
  .fp-hero__title { font-size: 40px; }
  .fp-preview__body { grid-template-columns: 1fr; }
  .fp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-preview__side { display: none; }

  .fp-discover__layout { grid-template-columns: 1fr; }
  .fp-discover__side { display: none; }

  .fp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-showcase { grid-template-columns: 1fr; gap: 32px; }
  .fp-showcase:nth-of-type(even) { grid-template-columns: 1fr; }
  .fp-showcase:nth-of-type(even) .fp-showcase__info { order: 0; }
  .fp-about__inner { grid-template-columns: 1fr; gap: 24px; }
  .fp-carousel__track { grid-auto-columns: calc((100% - 24px) / 2); }
  .fp-carousel__arrow--prev { left: -12px; }
  .fp-carousel__arrow--next { right: -12px; }

  .fp-detail-hero { padding: 10px 32px 0 !important; }
  .fp-detail-hero__box { padding: 28px 32px 48px; }
  .fp-body main .container { padding-left: 32px; padding-right: 32px; }
  .fp-detail-side { position: static; }
  .fp-body .tools-detail__aside { margin-bottom: 48px; }
  .fp-overview { grid-template-columns: 1fr; }
  .fp-overview__art { max-width: 280px; }
  .fp-detail-hero__grid,
  .fp-detail-layout,
  .fp-body .tools-detail__header,
  .fp-body .tools-detail__grid { grid-template-columns: 1fr; }
  .fp-plans--3 { grid-template-columns: 1fr 1fr; }

  .fp-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-cta-band__inner { grid-template-columns: 1fr; gap: 0; padding: 0 40px; }
  .fp-cta-band__inner.fp-container { max-width: calc(100% - 64px); }
  .fp-cta-band__body { padding: 48px 0 0; }
  .fp-cta-band__art { min-height: 0; height: auto; max-width: 520px; margin: 0 auto; -webkit-mask-image: none; mask-image: none; }

  /* Three cards in a two-column grid: centre the odd one out. */
  .fp-grid--3 > :last-child:nth-child(odd),
  .fp-news__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
  .fp-edu-steps__grid { grid-template-columns: 1fr 1fr; }
  .fp-body .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-edu-hero,
  .fp-page-hero,
  .fp-news-hero,
  .fp-body .tools-hero,
  .fp-body .strategy-hero,
  .fp-body .about-hero { width: calc(100% - 64px); }
  .fp-body .strategy-hero > .container { padding: 0 32px; }
  .fp-edu-hero__title { font-size: 40px; }
}

@media (max-width: 767px) {
  .fp-container,
  .fp-header__inner { padding: 0 16px; }
  .fp-body main .container { padding-left: 16px; padding-right: 16px; }
  .fp-header__inner { height: 64px; }
  .fp-mobile { top: 64px; max-height: calc(100vh - 64px); }
  .fp-brand__name { font-size: 20px; }
  .fp-brand__mark { width: 34px; height: 34px; }

  .fp-section { padding: 56px 0 !important; }
  .fp-section__head { margin-bottom: 32px; }
  .fp-section__title { font-size: 26px; }

  .fp-hero { padding: 8px 16px 0 !important; }
  .fp-hero__box { padding: 40px 16px 0; border-radius: 20px; }
  .fp-hero__kicker { font-size: 13px; padding: 6px 12px; }
  .fp-hero__title { margin-top: 20px; font-size: 32px; }
  .fp-hero__lead { margin-top: 16px; font-size: 16px; }
  .fp-hero__logos { gap: 12px 8px; margin-top: 28px; }
  .fp-hero__logos li:nth-child(n + 5) { display: none; }
  .fp-hero__actions { flex-direction: column; margin-top: 28px; }
  .fp-hero__actions .fp-button { width: 100%; }
  .fp-preview { margin: 40px auto 24px; }
  .fp-preview__main { padding: 12px; }
  .fp-preview__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fp-preview__stats div:nth-child(n + 3) { display: none; }
  .fp-preview__thead,
  .fp-preview__tr { grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; padding: 10px 12px; }
  .fp-preview__thead span:nth-child(2),
  .fp-preview__tr > span:nth-child(2) { display: none; }

  .fp-highlights { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .fp-highlights li { padding: 12px 16px; font-size: 15px; }
  .fp-toolkit { padding: 20px; }

  .fp-statband { padding-top: 48px !important; }
  .fp-statband__list { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .fp-statband__list div:nth-child(odd) { border-left: 0; }
  .fp-statband__list dd { font-size: 28px; }

  .fp-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fp-tab { flex: 1; padding: 0 12px; font-size: 13px; }
  .fp-row { padding: 16px; }
  .fp-row__top { flex-wrap: wrap; gap: 12px; }
  .fp-row__id { flex-basis: calc(100% - 56px); }
  .fp-row__desc { white-space: normal; }
  .fp-row__stats { padding-left: 56px; }
  .fp-row__tags { padding-left: 56px; }

  .fp-grid--3,
  .fp-grid--4 { grid-template-columns: 1fr; }

  .fp-showcase { padding: 24px 20px; border-radius: 20px; }
  .fp-showcase__title { font-size: 24px; }
  /* Service cards: the artwork becomes a square thumbnail beside the name. */
  .fp-card__head:has(.fp-service-icon img) { flex-direction: row; align-items: center; gap: 14px; }
  .fp-card .fp-service-icon:has(img) { width: 84px; height: 84px; aspect-ratio: auto; flex-shrink: 0; }

  .fp-showcase__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fp-mini-service { padding: 12px; border-radius: 14px; }
  .fp-mini-service__name { margin-top: 10px; font-size: 14px; }
  .fp-mini-service__text { display: none; }
  .fp-mini-service__price { padding-top: 6px; font-size: 12px; }

  /* Pillars stay two-up on phones so the section does not run four screens long. */
  .fp-pillars .fp-grid--4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fp-pillars .fp-frame { padding: 4px; border-radius: 18px; }
  .fp-pillars .fp-frame__inner { padding: 12px; border-radius: 14px; }
  .fp-pillars .fp-frame__art { margin: -4px -4px 0; border-radius: 10px; }
  .fp-pillars .fp-frame strong { margin-top: 12px; font-size: 15px; }
  .fp-pillars .fp-frame__text { display: none; }
  .fp-pillars .fp-frame__more { padding-top: 8px; font-size: 13px; }

  .fp-categories__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Category index on phones: two compact tiles per row, artwork on top, no sub-tag list. */
  .fp-catcards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fp-catcard-lg { flex-direction: column; gap: 12px; padding: 12px; }
  .fp-catcard-lg__art { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; }
  .fp-catcard-lg__art svg { width: 36px; height: 36px; }
  .fp-catcard-lg__title { margin: 0; font-size: 14px; }
  .fp-catcard-lg__tags { display: none; }
  .fp-catcard-lg__all { display: none; }
  .fp-catindex .container { padding: 0 16px; }
  .fp-body .tools-toolbar.fp-searchbar { flex-direction: row; flex-wrap: nowrap; align-items: center; padding-left: 14px; }
  .fp-body .fp-searchbar .tools-search { width: auto; }
  .fp-searchbar__submit { flex-shrink: 0; }
  .fp-searchbar__submit { padding: 0 14px; font-size: 14px; }
  .fp-catcard { flex-direction: column; align-items: flex-start; padding: 16px; }

  .fp-about__title { font-size: 24px; }
  .brand-story-images { flex-direction: column; gap: 16px; margin-bottom: 40px; }
  .brand-story-images__item,
  .brand-story-images__item--lead { flex: none; width: 100%; }

  .fp-carousel__track { grid-auto-columns: 85%; gap: 16px; }
  .fp-carousel__arrow { display: none; }

  .fp-page-hero,
  .fp-news-hero,
  .fp-body .tools-hero,
  .fp-body .strategy-hero,
  .fp-body .about-hero { width: calc(100% - 32px); margin-top: 8px; border-radius: 20px; }
  .fp-body .strategy-hero { padding: 40px 0; }
  .fp-body .strategy-cta { width: calc(100% - 32px); margin: 56px auto; padding: 36px 24px; border-radius: 20px; }
  .fp-body .strategy-hero > .container { padding: 0 16px; }
  .fp-page-hero { padding: 24px 0 48px !important; }
  .fp-page-hero__title,
  .fp-body .tools-hero__title { font-size: 34px; }
  .fp-page-hero__lead,
  .fp-body .tools-hero__lead { font-size: 16px; }
  .fp-group { padding: 20px 16px !important; border-radius: 20px; }
  .fp-group__title { font-size: 22px; }
  .fp-body .tools-hero .container,
  .fp-body .tools-body > .container { padding: 0 16px; }

  .fp-detail-hero { padding: 8px 16px 0 !important; }
  .fp-detail-hero__box { padding: 20px 16px 32px; border-radius: 20px; }
  .fp-detail-hero__grid { gap: 32px; margin-top: 24px; }
  .fp-detail-hero__title { font-size: 30px; }
  .fp-detail-hero__actions .fp-button { width: 100%; }
  .fp-facts,
  .fp-feature-list,
  .fp-plans--4 { grid-template-columns: 1fr; }
  .fp-plans--1 .fp-plan { display: flex; padding: 24px; }
  .fp-plans--1 .fp-plan ul { margin: 20px 0 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--fp-gray-100); columns: 1; }
  .fp-prose .fp-problems { padding: 20px !important; }
  .fp-tabs--detail { top: 72px; width: 100%; }
  .fp-detail-layout { gap: 40px; padding: 32px 0 56px; }
  .fp-prose h2 { font-size: 24px; }
  .fp-body .tools-page--detail { padding-top: 24px; }
  .fp-body .tools-page--detail > .container { padding: 0 16px; }
  .fp-body .tools-detail__title { font-size: 30px; }
  .fp-body .tools-detail__tagline { font-size: 19px; }
  .fp-body .tools-detail__header { padding: 24px 20px 28px; border-radius: 20px; gap: 28px; }
  .fp-body .tools-detail__features { grid-template-columns: 1fr; }
  .fp-body .tools-detail__tabs { top: 72px; }
  .tools-detail__cover-name { font-size: 28px; }
  .fp-detail-hero__tagline { font-size: 19px; }
  .fp-steps,
  .fp-plans--2,
  .fp-plans--3 { grid-template-columns: 1fr; }
  .fp-plans--1 { grid-template-columns: 1fr; }
  .fp-tabs--detail a { font-size: 13px; padding: 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tools-detail__cover-host { display: none; }
  .fp-body .tools-directory-nav { flex-wrap: wrap; gap: 10px; }
  .fp-directory-actions { width: 100%; justify-content: space-between; }
  .fp-body .tools-sort { min-width: 0; width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
  .fp-body .tools-sort select { max-width: 170px; }
  .fp-body .tools-sort__label { display: none; }
  .fp-body .tools-detail__compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fp-body .tools-detail__compare table { min-width: 520px; }
  .fp-body .tools-grid { grid-template-columns: 1fr; }
  .fp-body .tools-detail__actions .fp-btn,
  .fp-body .tools-detail__save { flex: 1; min-width: 0; }
  .fp-prose { font-size: 16px; }
  .fp-prose h2 { font-size: 24px; }
  .fp-prose h3 { font-size: 20px; }

  .fp-news__grid { grid-template-columns: 1fr; }
  .fp-article__inner { padding: 28px 0 40px; }
  .fp-article__head { margin-top: 28px; }
  .fp-article__title { font-size: 32px; }
  .fp-article__lead { font-size: 16px; }
  .fp-article__meta { flex-direction: column; gap: 6px; }
  .fp-article__body.content-formatted { font-size: 16px; }
  .fp-article__body.content-formatted h2 { font-size: 24px; }
  .fp-article__body.content-formatted h3 { font-size: 20px; }
  .fp-edu-hero { width: calc(100% - 32px); margin-top: 8px; padding: 40px 16px 0 !important; border-radius: 20px; }
  .fp-edu-hero__title { font-size: 32px; }
  .fp-edu-hero__lead { font-size: 16px; }
  .fp-edu-hero__features { flex-direction: column; align-items: center; padding-bottom: 40px; }
  .fp-edu-hero__covers { grid-template-columns: 1fr; padding-bottom: 32px; }
  .fp-edu-hero__covers img:not(:nth-child(2)) { display: none; }
  .fp-edu-steps__grid,
  .fp-body .courses-grid { grid-template-columns: 1fr; }
  .fp-body .fp-edu-catalog .fp-searchbar .tools-sort__label { display: none; }
    
  .fp-body .contact-hero-bg.section-cta-soft { padding: 24px 0 56px !important; }
  .fp-body .contact-hero-bg .cta-content-side,
  .fp-body .contact-hero-bg .cta-form-side { padding: 28px 20px !important; }
  .fp-cta-band { padding-bottom: 56px !important; }
  .fp-cta-band__inner { padding: 0 24px; border-radius: 20px; }
  .fp-cta-band__body { padding-top: 36px; }
  .fp-grid--3 > :last-child:nth-child(odd),
  .fp-news__grid > :last-child:nth-child(odd) { width: 100%; }
  .fp-cta-band__inner.fp-container { max-width: calc(100% - 32px); }
  .fp-cta-band__title { font-size: 24px; }
  .fp-cta-band__actions,
  .fp-cta-band__actions .fp-button { width: 100%; }

  .fp-footer { padding-top: 56px; }
  .fp-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .fp-footer__brand,
  .fp-footer__cta { grid-column: 1 / -1; }
  .fp-footer__cta { flex-direction: column; align-items: flex-start; }
  .fp-footer__contact { flex-direction: column; align-items: flex-start; }
  .fp-footer__bottom { margin-top: 40px; }
  .fp-footer__bottom p { flex-basis: 100%; }
}