/* ============================================================
   FinSet — combined design tokens + landing page styles
   Origin: finset-design-system (colors_and_type.css + ui_kits/finset-web/styles.css)
   Adapted for Frappe Website injection: Google Fonts replace local TTFs.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Lexend+Deca:wght@200;300;400;500;600;700&display=swap");

:root {
  --orange-50:  #FEF4EA; --orange-100: #FCEAD7; --orange-200: #FCE4EC;
  --orange-300: #FFCD78; --orange-400: #FF7A59; --orange-500: #FF5C35;
  --orange-600: #F05129; --orange-700: #D0034E;
  --navy-900: #192733; --navy-800: #213343; --navy-700: #2E475D;
  --navy-600: #3E5974; --navy-500: #516F90; --navy-400: #99AFC4;
  --navy-300: #B6C7D6; --navy-200: #DBE4ED; --navy-100: #EAF0F6;
  --navy-50: #F6F9FC;
  --white: #FFFFFF; --gray-700: #404040; --gray-500: #696868; --gray-200: #D9D9D9;
  --teal-300: #57D2D2; --amber-300: #FFBC4B; --coral-300: #FF8933; --crimson-500: #BF2434;

  --color-bg: var(--white); --color-bg-cream: var(--orange-50);
  --color-bg-dark: var(--navy-900); --color-bg-subtle: var(--navy-50);
  --color-fg: var(--navy-700); --color-fg-strong: var(--navy-800);
  --color-fg-muted: var(--navy-500); --color-fg-on-dark: var(--white);
  --color-fg-on-cream: var(--navy-800);
  --color-brand: var(--orange-500); --color-brand-hover: var(--orange-600);
  --color-brand-soft-bg: var(--orange-100);
  --color-border: var(--navy-300); --color-border-subtle: var(--navy-200);
  --color-divider: var(--navy-200);
  --color-success: var(--teal-300); --color-warning: var(--amber-300);
  --color-danger: var(--crimson-500); --color-info: var(--navy-500);
  --color-link: var(--navy-700); --color-link-accent: var(--orange-500);

  --font-display: "Domine", Georgia, serif;
  --font-sans: "Lexend Deca", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;
  --fs-display: 90px; --fs-display-sm: 60px; --fs-h1: 48px; --fs-h2: 32px;
  --fs-h3: 24px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px;
  --fs-body-sm: 14px; --fs-caption: 12px; --fs-eyebrow: 10px;
  --lh-display: 1.04; --lh-heading: 1.25; --lh-body: 1.75; --lh-tight: 1.4;
  --ls-eyebrow: 0.12em; --ls-tagline: 0.02em;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 15px;
  --radius-xl: 24px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(25,39,51,0.08);
  --shadow-lg: 0 20px 48px rgba(25,39,51,0.12);
  --container-max: 1377px; --container-pad: 32px;
}

/* ---------- Typography classes ---------- */
.fs-display-text, h1.fs-display-text {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--fs-display); line-height: var(--lh-display);
  color: var(--color-fg-strong); letter-spacing: -0.015em;
}
.fs-eyebrow {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-500); margin-bottom: 12px;
}
.fs-tag {
  display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px;
  border-radius: 4px; font-family: var(--font-sans); font-size: 12px;
  font-weight: 500; letter-spacing: 0.04em; line-height: 22px;
  background: var(--navy-50); border: 1px solid var(--navy-300);
  color: var(--navy-700); text-transform: uppercase;
}
.fs-tag--light { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: #fff; }
.fs-tag--brand { background: var(--orange-100); color: var(--orange-700); border-color: var(--orange-300); }

/* ---------- Buttons ---------- */
.fs-btn {
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  padding: 10px 20px; border-radius: 8px; border: 0; cursor: pointer;
  letter-spacing: 0.01em; display: inline-flex; align-items: center;
  gap: 8px; text-decoration: none;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.fs-btn--sm { font-size: 13px; padding: 8px 16px; }
.fs-btn--primary { background: var(--orange-500); color: #fff; }
.fs-btn--primary:hover { background: var(--orange-600); color: #fff; }
.fs-btn--primary:active { transform: translateY(1px); }
.fs-btn--outline { background: transparent; color: var(--navy-800); border: 2px solid var(--navy-800); }
.fs-btn--outline:hover { background: var(--navy-800); color: #fff; }
.fs-btn--ghost { background: transparent; color: var(--navy-700); }
.fs-btn--ghost:hover { color: var(--orange-500); }

/* ---------- Layout ---------- */
.fs-page { max-width: 1377px; margin: 0 auto; padding: 32px;
  display: flex; flex-direction: column; gap: 20px; }

/* ---------- Nav ---------- */
.fs-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--navy-100); }
.fs-nav__inner { max-width: 1377px; margin: 0 auto; padding: 0 32px; height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fs-nav__brand { display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--orange-500); font-family: var(--font-display);
  font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.fs-nav__brand img { height: 56px; display: block; }
.fs-nav__links { display: flex; gap: 28px; }
.fs-nav__link { font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--navy-700); text-decoration: none; padding: 8px 2px;
  border-bottom: 2px solid transparent; }
.fs-nav__link.is-active { color: var(--orange-500); border-bottom-color: var(--orange-500); }
.fs-nav__link:hover { color: var(--orange-500); }
.fs-nav__cta { display: flex; gap: 14px; align-items: center; }

/* ---------- Hero ---------- */
.fs-hero { position: relative; border-radius: 15px; background: var(--orange-50); overflow: hidden; }
.fs-hero__arc { position: absolute; width: 1400px; height: 1400px;
  border-radius: 50%; background: var(--orange-100); pointer-events: none; }
.fs-hero__arc--tr { right: -700px; top: -700px; }
.fs-hero__arc--bl { left: -700px; bottom: -700px; }
.fs-hero__inner { position: relative; padding: 96px 64px 88px;
  max-width: 900px; margin: 0 auto; text-align: center; }
.fs-display { font-family: var(--font-display); font-weight: 500;
  font-size: 72px; line-height: 1.05; color: var(--navy-800);
  margin: 0 0 36px; letter-spacing: -0.015em; }
.fs-display em { font-style: normal; color: var(--orange-500);
  font-family: var(--font-display); font-weight: 500; }
.fs-hero__cols { display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; text-align: left; margin-bottom: 32px; }
.fs-hero__cols p { font-size: 17px; line-height: 1.7;
  color: var(--navy-700); font-weight: 300; margin: 0; }
.fs-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.fs-section { border-radius: 15px; padding: 80px 64px; background: #fff;
  border: 1px solid var(--navy-100); }
.fs-section--cream { background: var(--orange-50); border: 0; }
.fs-section--dark { background: var(--navy-900); color: #fff; border: 0; }
.fs-section__head { max-width: 720px; margin-bottom: 48px; }
.fs-section__head h2 { font-family: var(--font-sans); font-weight: 700;
  font-size: 40px; line-height: 1.15; color: var(--navy-800);
  margin: 12px 0 16px; letter-spacing: -0.01em; }
.fs-section--dark .fs-section__head h2 { color: #fff; }
.fs-section__sub { font-family: var(--font-sans); font-size: 18px;
  font-weight: 300; line-height: 1.7; color: var(--navy-700); margin: 0; }

/* ---------- Six steps ---------- */
.fs-six { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.fs-step { background: #fff; border-radius: 15px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--navy-200); cursor: pointer;
  transition: all .24s cubic-bezier(.2,.7,.2,1); }
.fs-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--navy-300); }
.fs-step__n { font-family: var(--font-display); font-size: 48px;
  line-height: 1; color: var(--orange-500); font-weight: 500; }
.fs-step h3 { font-family: var(--font-sans); font-size: 22px;
  font-weight: 600; margin: 0; color: var(--navy-800); }
.fs-step p { font-family: var(--font-sans); font-size: 14px;
  font-weight: 300; line-height: 1.7; color: var(--navy-700); margin: 0; flex: 1; }
.fs-step__state { font-family: var(--font-sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-500); }

/* ---------- Philosophy ---------- */
.fs-philo { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.fs-philo__card { padding: 28px; border-radius: 15px; background: var(--navy-50);
  display: flex; flex-direction: column; gap: 12px; }
.fs-philo__card svg { color: var(--orange-500); width: 28px; height: 28px; }
.fs-philo__card h3 { font-family: var(--font-sans); font-size: 18px;
  font-weight: 600; margin: 0; color: var(--navy-800); }
.fs-philo__card p { font-family: var(--font-sans); font-size: 14px;
  line-height: 1.7; font-weight: 300; color: var(--navy-700); margin: 0; }

/* ---------- Red lines ---------- */
.fs-redlines { border-radius: 15px; background: var(--orange-500);
  color: #fff; overflow: hidden; }
.fs-redlines__inner { padding: 72px 64px; max-width: 900px; }
.fs-redlines h2 { font-family: var(--font-sans); font-weight: 700;
  font-size: 40px; line-height: 1.15; color: #fff; margin: 12px 0 16px; }
.fs-redlines p { font-family: var(--font-sans); font-size: 18px;
  font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.9);
  margin: 0 0 28px; }
.fs-redlines ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.fs-redlines li { display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  line-height: 1.5; color: #fff; }
.fs-redlines li svg { width: 20px; height: 20px; flex: 0 0 20px;
  margin-top: 2px; color: #fff; }

/* ---------- Footer ---------- */
.fs-footer { background: var(--navy-900); color: #fff; border-radius: 15px;
  padding: 56px 64px 32px; margin-top: 20px; }
.fs-footer__top { display: grid; grid-template-columns: 1fr 2fr;
  gap: 48px; margin-bottom: 40px; }
.fs-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.fs-footer__brand img { height: 48px; filter: brightness(0) invert(1); }
.fs-footer__brand p { font-family: var(--font-sans); font-size: 14px;
  font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.75);
  margin: 0; max-width: 260px; }
.fs-footer__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.fs-footer__cols h4 { font-family: var(--font-sans); font-size: 13px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin: 0 0 12px; }
.fs-footer__cols a { display: block; padding: 4px 0; font-family: var(--font-sans);
  font-size: 14px; font-weight: 300; color: #fff; text-decoration: none; }
.fs-footer__cols a:hover { color: var(--orange-400); }
.fs-footer__legal { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--font-sans);
  font-size: 12px; color: rgba(255,255,255,0.55); }

/* ============================================================
   Frappe Website overrides — apply FinSet brand to ALL pages
   (login, contact, about, etc.)
   ============================================================ */
body, .web-page-content, .for-login {
  font-family: var(--font-sans) !important;
  color: var(--navy-700);
}
body { background: #fff; }
h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--navy-800); }
.page-content-wrapper { color: var(--navy-700); }
a { color: var(--navy-700); text-decoration-color: var(--orange-500); }
a:hover { color: var(--orange-500); }
.btn-primary, .btn.btn-primary {
  background-color: var(--orange-500) !important;
  border-color: var(--orange-500) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--orange-600) !important;
  border-color: var(--orange-600) !important;
}
.btn-secondary, .btn.btn-secondary, .btn-default {
  border-color: var(--navy-300) !important;
  color: var(--navy-800) !important;
}
.form-control:focus {
  border-color: var(--orange-500) !important;
  box-shadow: 0 0 0 3px rgba(255,92,53,0.15) !important;
}

/* Login page — slightly warmer */
.for-login .page-card,
body[data-path="login"] .page-card {
  border-radius: 15px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--navy-200);
}
body[data-path="login"] .page-card-head h4 { font-family: var(--font-display); color: var(--navy-800); }

/* Hide Frappe's default navbar + footer ONLY on the home page —
   the FinSet nav/footer are baked into main_section. */
body[data-path="home"] > .navbar,
body[data-path="home"] .web-footer,
body[data-path="home"] footer.web-footer { display: none !important; }
body[data-path="home"] .page-content-wrapper > .page-breadcrumbs,
body[data-path="home"] .page-content-wrapper > .page-header-wrapper { display: none !important; }
body[data-path="home"] .page-content-wrapper > main,
body[data-path="home"] main.container { max-width: none; padding: 0; margin: 0; }
body[data-path="home"] .web-page-content { padding: 0 !important; }

/* ============================================================
   MOBILE — <768px
   ============================================================ */
@media (max-width: 767px) {
  .fs-page { padding: 16px; gap: 16px; }
  .fs-nav__inner { padding: 0 16px; height: 64px; gap: 8px; }
  .fs-nav__brand img { height: 36px; }
  .fs-nav__links, .fs-nav__cta { display: none; }
  .fs-btn { font-size: 14px; padding: 12px 18px; }
  .fs-hero__inner { padding: 48px 20px 44px; }
  .fs-display { font-size: 38px; line-height: 1.08; margin-bottom: 24px; letter-spacing: -0.01em; }
  .fs-hero__cols { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; text-align: center; }
  .fs-hero__cols p { font-size: 15.5px; line-height: 1.65; }
  .fs-hero__cta { flex-direction: column; gap: 10px; }
  .fs-hero__cta .fs-btn { width: 100%; justify-content: center; }
  .fs-hero__arc--tr, .fs-hero__arc--bl { display: none; }
  .fs-section { padding: 44px 20px; border-radius: 12px; }
  .fs-section__head { margin-bottom: 28px; text-align: center; }
  .fs-section__head h2 { font-size: 28px; line-height: 1.2; margin: 8px 0 10px; }
  .fs-section__sub { font-size: 15px; line-height: 1.65; }
  .fs-section__head .fs-tag { display: inline-block; }
  .fs-six { grid-template-columns: 1fr; gap: 12px; }
  .fs-step { padding: 22px 20px; border-radius: 12px; align-items: center; text-align: center; }
  .fs-step__n { font-size: 40px; }
  .fs-step h3 { font-size: 19px; }
  .fs-philo { grid-template-columns: 1fr; gap: 12px; }
  .fs-philo__card { padding: 20px 18px; border-radius: 12px; gap: 8px; align-items: center; text-align: center; }
  .fs-philo__card svg { width: 24px; height: 24px; }
  .fs-philo__card h3 { font-size: 15px; }
  .fs-philo__card p { font-size: 13px; line-height: 1.6; }
  .fs-redlines__inner { padding: 48px 22px; text-align: center; }
  .fs-redlines h2 { font-size: 26px; line-height: 1.2; }
  .fs-redlines p { font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
  .fs-redlines ul { text-align: left; grid-template-columns: 1fr; gap: 10px; }
  .fs-redlines li { font-size: 15px; }
  .fs-footer { padding: 40px 22px 24px; border-radius: 12px; margin-top: 12px; }
  .fs-footer__top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; }
  .fs-footer__brand img { height: 40px; margin-bottom: 12px; }
  .fs-footer__brand p { font-size: 14px; max-width: none; }
  .fs-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fs-footer__cols h4 { font-size: 12px; margin-bottom: 8px; }
  .fs-footer__cols a { font-size: 14px; padding: 4px 0; }
  .fs-footer__legal { gap: 12px; font-size: 11.5px; line-height: 1.6; }
}