/* ============================================================================
   Ulern public marketing site — shared stylesheet (plain CSS, no build step).

   Ported from the app design system (frontend/src/assets/css/{variables,font,
   main}.css). Sections, in cascade order:
     1. @font-face (Inter)            4. base + utilities
     2. tokens (:root)                5. layout primitives + buttons
     3. dark overrides (.dark)        6. chrome (topbar/footer) + shared blocks
   Per-page section CSS lives in separate files (home.css, teams.css, …) linked
   via {% block page_css %}. Colors use --semantic-* tokens so dark flips free.
   ========================================================================== */

/* 1. Fonts — relative url() so the manifest post-processor hashes the woff2. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'); }

/* 2. Tokens — base ramps + semantic layer (light defaults). */
:root {
  --base-accent-accent-0: #fff4ee; --base-accent-accent-50: #ffe5d9; --base-accent-accent-100: #ffd2bf;
  --base-accent-accent-200: #ffb18f; --base-accent-accent-300: #ff996e; --base-accent-accent-400: #fb8a5a;
  --base-accent-accent-500: #fa8751; --base-accent-accent-600: #e86f3f; --base-accent-accent-700: #c9572e;
  --base-accent-accent-800: #a34323; --base-accent-accent-900: #7a2f18;
  --base-error-error-0: #fff5f5; --base-error-error-50: #fed7d7; --base-error-error-100: #feb2b2;
  --base-error-error-300: #f56565; --base-error-error-500: #c53030; --base-error-error-600: #9b2c2c;
  --base-info-info-50: #dbeeff; --base-info-info-300: #63b3ed; --base-info-info-500: #3182ce; --base-info-info-600: #2b6cb0;
  --base-neutral-neutral-0: #ffffff; --base-neutral-neutral-50: #f7f7f7; --base-neutral-neutral-100: #eeeeee;
  --base-neutral-neutral-200: #e0e0e0; --base-neutral-neutral-300: #c8c8c8; --base-neutral-neutral-400: #a8a8a8;
  --base-neutral-neutral-500: #8a8a8a; --base-neutral-neutral-600: #6a6a6a; --base-neutral-neutral-700: #4a4a4a;
  --base-neutral-neutral-800: #2a2a2a; --base-neutral-neutral-900: #1a1a1a;
  --base-primary-primary-50: #f2f3ff; --base-primary-primary-100: #e4e6ff; --base-primary-primary-200: #c7cbff;
  --base-primary-primary-300: #a6adff; --base-primary-primary-400: #7e82ff; --base-primary-primary-500: #5451fa;
  --base-primary-primary-600: #4a47e6; --base-primary-primary-700: #404dcc; --base-primary-primary-800: #3533a8;
  --base-primary-primary-900: #2a297a; --base-primary-primary-950: #1d1c52;
  --base-success-success-0: #f0fbf6; --base-success-success-50: #dff6ec; --base-success-success-100: #c1eedb;
  --base-success-success-300: #6dd6ab; --base-success-success-500: #1e9e5f; --base-success-success-600: #077e43;
  --base-success-success-700: #11663c;
  --base-warning-warning-50: #fff6e5; --base-warning-warning-300: #ffb84d; --base-warning-warning-500: #f59e0b; --base-warning-warning-600: #d97706;

  --semantic-background-bg-page: var(--base-neutral-neutral-50);
  --semantic-background-bg-surface: var(--base-neutral-neutral-0);
  --semantic-background-bg-surface-hover: var(--base-neutral-neutral-100);
  --semantic-background-bg-primary: var(--base-primary-primary-500);
  --semantic-background-bg-accent: var(--base-accent-accent-500);
  --semantic-background-bg-success: var(--base-success-success-50);
  --semantic-border-border-default: var(--base-neutral-neutral-200);
  --semantic-border-border-subtle: var(--base-neutral-neutral-100);
  --semantic-border-border-strong: var(--base-neutral-neutral-300);
  --semantic-border-border-brand: var(--base-primary-primary-500);
  --semantic-text-text-primary: var(--base-neutral-neutral-800);
  --semantic-text-text-secondary: var(--base-neutral-neutral-600);
  --semantic-text-text-tertiary: var(--base-neutral-neutral-500);
  --semantic-text-text-inverse: var(--base-neutral-neutral-0);
  --semantic-text-text-brand: var(--base-primary-primary-500);
  --semantic-text-text-accent: var(--base-accent-accent-600);
  --semantic-text-text-success: var(--base-success-success-600);
  --semantic-text-text-warning: var(--base-warning-warning-600);

  /* typography */
  --typeface-size-body-regular-size: 1rem;
  --typeface-line-height-body-regular-lineheight: 1.5rem;

  /* layout */
  --pub-container: 75rem;        /* 1200px content width */
  --pub-radius: 0.875rem;
  --pub-radius-sm: 0.625rem;
  --pub-radius-pill: 9999px;
  --pub-mark-ink: #16151d;       /* the standard one-color mark ink */
  --pub-gradient: linear-gradient(92deg, var(--base-primary-primary-500) 0%, var(--base-accent-accent-500) 100%);

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* 3. Dark overrides — flip only the semantic layer. */
.dark {
  --semantic-background-bg-page: var(--base-neutral-neutral-900);
  --semantic-background-bg-surface: var(--base-neutral-neutral-800);
  --semantic-background-bg-surface-hover: var(--base-neutral-neutral-700);
  --semantic-border-border-default: var(--base-neutral-neutral-700);
  --semantic-border-border-subtle: var(--base-neutral-neutral-800);
  --semantic-border-border-strong: var(--base-neutral-neutral-600);
  --semantic-text-text-primary: var(--base-neutral-neutral-50);
  --semantic-text-text-secondary: var(--base-neutral-neutral-300);
  --semantic-text-text-tertiary: var(--base-neutral-neutral-400);
  --semantic-text-text-brand: var(--base-primary-primary-400);
  --semantic-text-text-accent: var(--base-accent-accent-300);
  --semantic-background-bg-success: color-mix(in srgb, var(--base-success-success-500) 18%, var(--base-neutral-neutral-800));
  --semantic-text-text-success: var(--base-success-success-300);
  --pub-mark-ink: var(--base-neutral-neutral-50);
}

/* 4. Base + utilities */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--semantic-background-bg-page);
  color: var(--semantic-text-text-primary);
  font-size: var(--typeface-size-body-regular-size);
  line-height: var(--typeface-line-height-body-regular-lineheight);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--base-primary-primary-500); outline-offset: 2px; border-radius: 4px; }

/* Brand gradient text — only on thematic words (you/your, learn*, Ulern). */
.u-gradient-text {
  background-image: var(--pub-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section eyebrow chip. */
.u-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.8rem; border-radius: var(--pub-radius-pill);
  background: var(--base-primary-primary-50); border: 1px solid var(--base-primary-primary-100);
  color: var(--base-primary-primary-700);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.dark .u-eyebrow {
  background: color-mix(in srgb, var(--base-primary-primary-500) 16%, var(--base-neutral-neutral-800));
  border-color: color-mix(in srgb, var(--base-primary-primary-500) 32%, var(--base-neutral-neutral-800));
  color: var(--base-primary-primary-300);
}

.pub-icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 5. Layout primitives */
.pub-container { width: 100%; max-width: var(--pub-container); margin-inline: auto; padding-inline: 1.5rem; }
.pub-section { padding-block: 5rem; }
.pub-section--tight { padding-block: 3.5rem; }
/* Raised (white) section — alternates with the page (gray) bg per the Figma. */
.pub-section--surface { background: var(--semantic-background-bg-surface); }
main { display: block; }

/* Section header (eyebrow + heading + subhead), centered. */
.pub-head { max-width: 46rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pub-head__title { margin: 0; font-weight: 700; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.pub-head__sub { margin: 0; color: var(--semantic-text-text-secondary); font-size: 1.05rem; line-height: 1.6; }

.pub-display { margin: 0; font-weight: 700; font-size: clamp(2.25rem, 1.2rem + 4.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }

/* Buttons */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.875rem; padding-inline: 1.4rem; border-radius: var(--pub-radius-sm);
  font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s, transform .04s;
}
.pub-btn:active { transform: translateY(1px); }
.pub-btn--primary { background: var(--base-primary-primary-500); color: #fff; }
.pub-btn--primary:hover { background: var(--base-primary-primary-600); }
.pub-btn--ghost { background: var(--semantic-background-bg-surface); color: var(--semantic-text-text-primary); border-color: var(--semantic-border-border-strong); }
.pub-btn--ghost:hover { background: var(--semantic-background-bg-surface-hover); }
.pub-btn--white { background: #fff; color: var(--base-primary-primary-600); }
.pub-btn--white:hover { background: rgba(255,255,255,.9); }
.pub-btn--sm { height: 2.25rem; padding-inline: 0.95rem; font-size: 0.9rem; }
.pub-btn--block { width: 100%; }

/* Reassurance row (check + muted text). */
.pub-reassure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--semantic-text-text-tertiary); font-size: 0.9rem; }
.pub-reassure .pub-icon { color: var(--semantic-text-text-success); width: 1rem; height: 1rem; }

/* Positioning band — centered single line. */
.pub-positioning { padding-block: 1.5rem; text-align: center; }
.pub-positioning p { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--semantic-text-text-secondary); }

/* Feature grid + card (shared by WHY, ENGINE, values, what-you-get, …). */
.pub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.pub-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pub-card {
  background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-default);
  border-radius: var(--pub-radius); padding: 1.5rem;
}
.pub-card__chip {
  width: 2.75rem; height: 2.75rem; border-radius: var(--pub-radius-sm); display: grid; place-items: center;
  background: var(--base-primary-primary-50); color: var(--base-primary-primary-600); margin-bottom: 1.25rem;
}
.dark .pub-card__chip { background: color-mix(in srgb, var(--base-primary-primary-500) 16%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-card__chip .pub-icon { width: 1.4rem; height: 1.4rem; }
.pub-card__title { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; }
.pub-card__text { margin: 0; color: var(--semantic-text-text-secondary); font-size: 0.95rem; line-height: 1.55; }

/* Numbered step card. */
.pub-step__num {
  width: 2.125rem; height: 2.125rem; border-radius: var(--pub-radius-pill); display: grid; place-items: center;
  background: var(--base-primary-primary-500); color: #fff; font-weight: 600; font-size: 0.95rem; margin-bottom: 1.25rem;
}

/* CTA band — full-bleed primary. */
.pub-cta-band { background: var(--base-primary-primary-500); color: #fff; text-align: center; padding-block: 4.5rem; }
.pub-cta-band__title { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
.pub-cta-band__sub { margin: 0 auto 1.75rem; max-width: 38rem; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.pub-cta-band .pub-reassure { color: rgba(255,255,255,.8); margin-top: 1.25rem; }
.pub-cta-band .pub-reassure .pub-icon { color: rgba(255,255,255,.9); }
.pub-cta-band__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* FAQ accordion. */
.pub-faq { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.pub-faq__item { background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-subtle); border-radius: var(--pub-radius); overflow: hidden; }
.pub-faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 600; }
.pub-faq__item > summary::-webkit-details-marker { display: none; }
.pub-faq__item > summary .pub-icon { transition: transform .2s; color: var(--semantic-text-text-tertiary); width: 1.1rem; height: 1.1rem; }
.pub-faq__item[open] > summary .pub-icon { transform: rotate(180deg); }
.pub-faq__answer { padding: 0 1.4rem 1.2rem; color: var(--semantic-text-text-secondary); line-height: 1.6; }

/* 6. Chrome — topbar */
.pub-topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--semantic-background-bg-surface) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--semantic-border-border-subtle); }
.pub-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; max-width: 84rem; margin-inline: auto; padding-inline: 1.5rem; gap: 1rem; }
.pub-logo { display: inline-flex; align-items: center; gap: 0.5rem; }
.pub-logo__mark { width: 1.5rem; height: 1.75rem; }
.pub-logo__mark.mark--primary { color: var(--base-primary-primary-500); }
.pub-logo__mark.mark--ink { color: var(--pub-mark-ink); }
.pub-logo__word { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--semantic-text-text-primary); }
.pub-logo__descriptor { font-size: 0.95rem; color: var(--semantic-text-text-tertiary); font-weight: 500; }
.pub-nav { display: flex; align-items: center; gap: 2rem; }
.pub-nav a { font-size: 0.95rem; color: var(--semantic-text-text-secondary); font-weight: 500; }
.pub-nav a:hover { color: var(--semantic-text-text-primary); }
.pub-topbar__auth { display: flex; align-items: center; gap: 1rem; }
.pub-topbar__cta-cluster { display: inline-flex; align-items: center; gap: 1.5rem; }
.pub-topbar__login { font-size: 0.95rem; font-weight: 500; color: var(--semantic-text-text-primary); }
.pub-account { display: none; align-items: center; gap: 0.6rem; }
.pub-account__avatar { width: 2rem; height: 2rem; border-radius: var(--pub-radius-pill); object-fit: cover; background: var(--base-primary-primary-500); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; }

/* Chrome — footer */
.pub-footer { border-top: 1px solid var(--semantic-border-border-subtle); background: var(--semantic-background-bg-surface); padding-block: 3.5rem 2rem; }
.pub-footer__inner { max-width: 84rem; margin-inline: auto; padding-inline: 1.5rem; }
.pub-footer__top { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.pub-footer__brand { max-width: 22rem; }
.pub-footer__brand .pub-logo { margin-bottom: 1rem; }
.pub-footer__brand .pub-logo__mark.mark--primary { color: var(--base-primary-primary-500); }
.pub-footer__blurb { margin: 0; color: var(--semantic-text-text-secondary); font-size: 0.9rem; line-height: 1.55; }
.pub-footer__cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.pub-footer__col h3 { margin: 0 0 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--semantic-text-text-primary); }
.pub-footer__col a { display: block; margin-bottom: 0.55rem; font-size: 0.9rem; color: var(--semantic-text-text-secondary); }
.pub-footer__col a:hover { color: var(--semantic-text-text-primary); }
.pub-footer__divider { height: 1px; background: var(--semantic-border-border-subtle); margin-block: 2.25rem 1.25rem; }
.pub-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pub-footer__copy, .pub-footer__status { font-size: 0.85rem; color: var(--semantic-text-text-tertiary); }
.pub-footer__status { display: inline-flex; align-items: center; gap: 0.5rem; }
.pub-footer__status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--base-success-success-500); }

/* Responsive — match the 375px mobile frames: hide nav, stack grids. */
@media (max-width: 60rem) {
  .pub-grid, .pub-grid--2 { grid-template-columns: 1fr; }
  .pub-footer__top { flex-direction: column; gap: 2rem; }
}
@media (max-width: 48rem) {
  .pub-nav { display: none; }   /* mobile drops the nav links (per the Figma mobile frame) */
  .pub-section { padding-block: 3.25rem; }
  .pub-topbar__inner { height: 4rem; }
}