/* onboarding-paths.css — imported from Claude Design handoff
   (True platform onboarding paths.dc.html). Loaded ONLY by
   page-katalon-true-platform-onboarding-paths.php (standalone template). */

/* ===== fig design tokens ===== */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --border-radius-border-radius-xs: var(--radius-sm);
  --brand-primary-blue-slate: rgb(67,80,155); /* @kind color */
  --color-brand-black: rgb(0,0,0); /* @kind color */
  --color-brand-blue-slate: rgb(67,80,155); /* @kind color */
  --color-brand-bright-green: rgb(25,216,159); /* @kind color */
  --color-brand-forest-forward: rgb(15,132,97); /* @kind color */
  --color-brand-lilac: rgb(89,89,235); /* @kind color */
  --color-brand-steel-pink: rgb(191,61,194); /* @kind color */
  --color-brand-white: rgb(255,255,255); /* @kind color */
  --color-neutral-300: rgb(229,229,229); /* @kind color */
  --color-neutral-400: rgb(214,214,214); /* @kind color */
  --color-neutral-500: rgb(187,187,187); /* @kind color */
  --color-neutral-900: rgb(32,32,32); /* @kind color */
  --color-neutral-white: rgb(255,255,255); /* @kind color */
  --color-secondary-blue-slate-100: rgb(239,241,250); /* @kind color */
  --color-secondary-blue-slate-200: rgb(228,231,245); /* @kind color */
  --color-secondary-blue-slate-800: rgb(40,48,93); /* @kind color */
  --color-secondary-forest-forward-600: rgb(15,132,97); /* @kind color */
  --color-secondary-lilac-700: rgb(65,46,213); /* @kind color */
  --color-semantic-error-default: rgb(209,67,67); /* @kind color */
  --color-text-disabled: var(--color-neutral-500); /* @kind color */
  --color-text-hover: var(--color-brand-lilac); /* @kind color */
  --color-text-invert: var(--color-neutral-white); /* @kind color */
  --color-text-primary: var(--color-neutral-900); /* @kind color */
  --font-family-body-2: "Inter";
  --font-family-body: "Inter";
  --font-family-title-2: "Roboto";
  --font-family-title: "Inter Tight";
  --font-line-height-line-height-md: 32;
  --font-paragraph-spacing-paragraph-spacing-sm: 12;
  --font-size-body-1: 24;
  --font-size-body-2: 22;
  --font-size-body-4: 18;
  --font-size-body-5: 16;
  --font-size-font-size-sm: 14;
  --font-size-headine-1: 48;
  --font-size-headline-2: 40;
  --font-size-headline-3: 32;
  --font-size-headline-4: 24;
  --font-size-headline-5: 20;
  --font-weight-bold-2: "Bold";
  --font-weight-bold: "Bold";
  --font-weight-medium-2: "Medium";
  --font-weight-medium: "Medium";
  --font-weight-regular-2: "Regular";
  --font-weight-regular: "Regular";
  --font-weight-semibold-2: "SemiBold";
  --font-weight-semibold: "SemiBold";
  --paragraph-spacing-paragraph-spacing-lg: 25;
  --paragraph-spacing-paragraph-spacing-md: 20;
  --paragraph-spacing-paragraph-spacing-sm: 15;
  --paragraph-spacing-paragraph-spacing-xl: 30;
  --paragraph-spacing-paragraph-spacing-xs: 10;
  --radius-sm: 4;
  --text-primary: rgb(18,18,18); /* @kind color */
}

:root[data-mode="mobile"] {
  --font-family-body-2: "Inter";
  --font-family-body: "Inter";
  --font-family-title-2: "Roboto";
  --font-family-title: "Inter Tight";
  --font-line-height-line-height-md: 32;
  --font-paragraph-spacing-paragraph-spacing-sm: 12;
  --font-size-body-1: 20;
  --font-size-body-2: 18;
  --font-size-body-4: 15;
  --font-size-body-5: 14;
  --font-size-font-size-sm: 14;
  --font-size-headine-1: 32;
  --font-size-headline-2: 28;
  --font-size-headline-3: 24;
  --font-size-headline-4: 18;
  --font-size-headline-5: 16;
  --font-weight-bold-2: "Bold";
  --font-weight-bold: "Bold";
  --font-weight-medium-2: "Medium";
  --font-weight-medium: "Medium";
  --font-weight-regular-2: "Regular";
  --font-weight-regular: "Regular";
  --font-weight-semibold-2: "SemiBold";
  --font-weight-semibold: "SemiBold";
  --paragraph-spacing-paragraph-spacing-lg: 15;
  --paragraph-spacing-paragraph-spacing-md: 12;
  --paragraph-spacing-paragraph-spacing-sm: 9;
  --paragraph-spacing-paragraph-spacing-xl: 18;
  --paragraph-spacing-paragraph-spacing-xs: 6;
}

:root[data-mode="tablet"] {
  --font-family-body: "Inter";
  --font-family-title: "Inter Tight";
  --font-line-height-line-height-md: 32;
  --font-size-body-1: 22;
  --font-size-body-2: 20;
  --font-size-body-4: 16;
  --font-size-body-5: 15;
  --font-size-headine-1: 36;
  --font-size-headline-2: 32;
  --font-size-headline-3: 28;
  --font-size-headline-4: 22;
  --font-size-headline-5: 18;
  --font-weight-bold: "Bold";
  --font-weight-medium: "Medium";
  --font-weight-regular: "Regular";
  --font-weight-semibold: "SemiBold";
  --paragraph-spacing-paragraph-spacing-lg: 20;
  --paragraph-spacing-paragraph-spacing-md: 16;
  --paragraph-spacing-paragraph-spacing-sm: 12;
  --paragraph-spacing-paragraph-spacing-xl: 24;
  --paragraph-spacing-paragraph-spacing-xs: 8;
}

/* ===== base + responsive (from inline <style>) ===== */
    /* reset scoped to .k-page so the theme's real header/footer is untouched */
    .k-page, .k-page *, .k-page *::before, .k-page *::after { box-sizing: border-box; }
    .k-page a { color: inherit; text-decoration: none; }
    .k-foot-link { color: #414141; transition: color .15s ease; }
    .k-foot-link:hover { color: #5959eb; }
    .k-nav-item:hover { color: #5959eb; }
    /* ===== Responsive ===== */
    @media (max-width: 1024px) {
      .k-pad { padding-left: 48px !important; padding-right: 48px !important; }
      .k-h1 { font-size: 40px !important; }
    }
    @media (max-width: 768px) {
      .k-pad { padding-left: 24px !important; padding-right: 24px !important; }
      .k-vpad { padding-top: 60px !important; padding-bottom: 60px !important; }
      .k-h1 { font-size: 34px !important; }
      .k-h2 { font-size: 27px !important; }
      .k-grid-2 { grid-template-columns: 1fr !important; }
      .k-grid-auto { grid-template-columns: 1fr !important; }
      .k-hero-col { flex-basis: 100% !important; min-width: 0 !important; }
      .k-hero-text { text-align: center !important; align-items: center !important; }
      .k-hero-media { justify-content: center !important; }
      .k-journey { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 26px 16px !important; max-width: 420px !important; align-items: start !important; }
      .k-journey-conn { display: none !important; }
      .k-journey-node { width: 100% !important; }
      .k-nav-links, .k-nav-search { display: none !important; }
      .k-foot-top { flex-direction: column !important; gap: 32px !important; }
      .k-foot-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
      .k-foot-bottom-right { align-items: flex-start !important; }
    }
    @media (max-width: 480px) {
      .k-pad { padding-left: 16px !important; padding-right: 16px !important; }
      .k-h1 { font-size: 29px !important; }
    }

/* ===== Onboarding path card hover =====
   The mockup expressed hover via a non-standard `style-hover` attribute that
   does nothing in a real browser. Re-create the intended effect as real CSS,
   scoped to the cards (direct children of the #choose-path grid). */
#choose-path .k-grid-auto > div {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#choose-path .k-grid-auto > div:hover {
  transform: translateY(-4px);
  border-color: #5959eb !important; /* override the inline border color on hover */
  box-shadow: 0 12px 32px rgba(36, 36, 94, 0.12);
}

/* "Get value faster" (SKILLS) — hover lift on the 4 outcome blocks */
#get-value-faster .k-grid-2 > div {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#get-value-faster .k-grid-2 > div:hover {
  transform: translateY(-4px);
  border-color: #5959eb !important;
  box-shadow: 0 12px 32px rgba(36, 36, 94, 0.10);
}