@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ===========================================================
   SimLab Design System — tokens (from the site's mockup/brand)
   =========================================================== */
:root {
  /* Brand palette */
  --sl-navy: #21489F;
  --sl-navy-deep: #1A3A82;
  --sl-navy-darker: #142C63;
  --sl-magenta: #971F5F;
  --sl-magenta-deep: #7C184E;
  --sl-blue: #1375BD;
  --sl-blue-light: #26A6DE;
  --sl-red: #C52127;

  --sl-navy-050: #EDF1F9;
  --sl-navy-100: #D6DFF0;
  --sl-navy-200: #AEBEE0;
  --sl-magenta-050: #F7EAF1;
  --sl-magenta-100: #ECD0DF;
  --sl-blue-050: #E7F3FB;
  --sl-red-050: #FBEAEA;

  --sl-ink: #14213D;
  --sl-slate-800: #263352;
  --sl-slate-600: #545F78;
  --sl-slate-500: #6B7590;
  --sl-slate-400: #98A0B5;
  --sl-slate-300: #C6CCDA;
  --sl-slate-200: #DDE1EB;
  --sl-slate-100: #EBEEF4;
  --sl-slate-050: #F5F7FB;
  --sl-white: #FFFFFF;

  --color-primary: var(--sl-navy);
  --color-primary-hover: var(--sl-navy-deep);
  --color-primary-active: var(--sl-navy-darker);
  --color-secondary: var(--sl-magenta);
  --color-secondary-hover: var(--sl-magenta-deep);
  --color-accent: var(--sl-blue-light);
  --color-danger: var(--sl-red);

  --text-heading: var(--sl-ink);
  --text-body: var(--sl-slate-800);
  --text-muted: var(--sl-slate-500);
  --text-inverse: var(--sl-white);
  --text-link: var(--sl-blue);
  --text-link-hover: var(--sl-navy);
  --text-on-brand: var(--sl-white);

  --surface-page: var(--sl-white);
  --surface-subtle: var(--sl-slate-050);
  --surface-card: var(--sl-white);
  --surface-brand: var(--sl-navy);
  --surface-brand-subtle: var(--sl-navy-050);
  --surface-secondary-subtle: var(--sl-magenta-050);

  --border-subtle: var(--sl-slate-200);
  --border-default: var(--sl-slate-300);
  --border-strong: var(--sl-slate-400);
  --border-brand: var(--sl-navy);

  --focus-ring: var(--sl-blue-light);

  /* Typography */
  --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 700;

  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.6875rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-overline: 0.14em;

  /* Spacing (4px grid) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --container-max: 1200px;

  /* Effects */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 33, 61, .06);
  --shadow-sm: 0 1px 3px rgba(20, 33, 61, .08), 0 1px 2px rgba(20, 33, 61, .06);
  --shadow-md: 0 4px 12px rgba(20, 33, 61, .10);
  --shadow-lg: 0 12px 28px rgba(20, 33, 61, .14);
  --shadow-brand: 0 10px 30px rgba(33, 72, 159, .22);

  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ===========================================================
   Base
   =========================================================== */
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--lh-heading); font-weight: var(--fw-display); margin: 0; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

.app-shell { display: block; }

/* ===========================================================
   Tagline strip — sits directly under the theme's real header/nav
   =========================================================== */
.tagline-strip {
  background: linear-gradient(120deg, var(--sl-navy) 0%, var(--sl-navy-deep) 100%);
  color: var(--text-on-brand);
  text-align: center;
  padding: 22px 30px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  border-bottom: 4px solid var(--sl-magenta);
}

/* ===========================================================
   Search — left-aligned under the menu, reading as part of it
   =========================================================== */
.search-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 9px 30px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.search-row input {
  width: 240px;
  max-width: 55vw;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  background: #fff;
}
.search-row input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.search-row button {
  padding: 6px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.search-row button:hover { background: var(--color-secondary); }

/* ===========================================================
   Journey board — the signature SimLab surface
   =========================================================== */
.sl-h1 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--sl-navy); margin: 0; }

.sl-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--sl-magenta);
  letter-spacing: .005em;
}
.sl-eyebrow.on-navy { color: var(--sl-blue-light); }

.sl-hero { max-width: 820px; margin: 0 auto; text-align: center; padding: 46px 24px 26px; }
.sl-hero-title { font-size: 38px; }

.sl-board-wrap { padding: 0 24px 84px; }
.sl-board {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--sl-navy);
  border-radius: 30px;
  padding: 44px 40px 48px;
  position: relative;
  overflow: hidden;
}

/* Quiet path trail — replaces the old floating "views so far" box */
.sl-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 22px; position: relative; z-index: 2; }
.sl-trail-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); font-weight: 700; margin-right: 4px; }
.sl-trail-pill { font-size: 12.5px; color: rgba(255, 255, 255, .58); cursor: pointer; font-weight: 600; transition: color .18s; }
.sl-trail-pill:hover { color: #fff; text-decoration: underline; }
.sl-trail-sep { color: rgba(255, 255, 255, .3); font-size: 12px; }

/* Focus card — the current step, expanded, with a speech-bubble tail */
.sl-focus {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .30);
  animation: cardIn .42s var(--ease-standard);
  z-index: 2;
}
.sl-focus-title { font-size: 26px; margin-bottom: 14px; }
.sl-focus-body { font-size: 15.5px; line-height: 1.68; color: var(--sl-slate-600); }
.sl-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  background: var(--sl-magenta);
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s;
}
.sl-cta:hover { background: var(--sl-magenta-deep); color: #fff; text-decoration: none; }
.sl-tail { position: absolute; left: 50%; bottom: -10px; width: 22px; height: 22px; background: #fff; transform: translateX(-50%) rotate(45deg); }

/* Fan of options + connecting threads */
.sl-options-wrap { width: 900px; max-width: 100%; margin: 6px auto 0; position: relative; z-index: 2; }
.sl-fan { display: block; width: 100%; height: 46px; }
.sl-fan path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; }
.sl-options { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.sl-opt {
  flex: 1;
  min-width: 200px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--ease-standard), box-shadow .22s, border-color .22s;
}
.sl-opt:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0, 0, 0, .28); }
.sl-opt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sl-opt-title { font-size: 17px; font-weight: 700; color: var(--sl-navy); line-height: 1.22; letter-spacing: -0.01em; }
.sl-cue { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--sl-magenta); white-space: nowrap; margin-top: 3px; opacity: .45; transition: .22s var(--ease-standard); }
.sl-opt:hover .sl-cue { opacity: 1; transform: translateX(4px); }
.sl-teaser { font-size: 13.5px; line-height: 1.55; color: var(--sl-slate-500); max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .32s var(--ease-standard), opacity .24s, margin-top .32s; }
.sl-opt:hover .sl-teaser { max-height: 96px; opacity: 1; margin-top: 11px; }

.sl-restart-row { text-align: center; position: relative; z-index: 2; }
.sl-restart { display: inline-flex; align-items: center; gap: 7px; margin-top: 34px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .66); cursor: pointer; }
.sl-restart:hover { color: #fff; }

@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .sl-board { padding: 30px 20px 34px; border-radius: 20px; }
  .sl-focus { padding: 24px 22px; }
  .sl-options { flex-direction: column; }
  .sl-fan { display: none; }
}

/* ===========================================================
   Footer
   =========================================================== */
.bottom-banner {
  background: var(--sl-navy);
  color: var(--text-on-brand);
  padding: 14px 28px;
  font-size: var(--fs-caption);
  text-align: center;
}