/*
 * Everyday Korean — Marketing Layer
 * ---------------------------------------------
 * Sits ON TOP of /assets/seed.css. Loads after it.
 * Adds only what SEED lacks for landing pages: bigger display type,
 * full-bleed layout primitives, marketing-only components.
 *
 * Use on landing pages only (/start, /checkout, /masterclass, /).
 * Product UI (/class) stays pure SEED.
 *
 * ─── Rules ────────────────────────────────────────────────────────
 *  1. NEVER edit seed.css. This file is the only place EK styles live.
 *  2. Token-first, components-second. No hardcoded hex or px in components.
 *     Reach for var(--seed-*) first, var(--ek-*) second, literal never.
 *  3. Three layers: SEED tokens → EK tokens → EK components.
 *     If a component needs a new value, lift it to --ek-* first.
 *  4. Naming: BEM-lite, namespaced. .ek-{name} / __{part} / --{modifier}.
 *  5. Spacing uses --seed-space-*. SEED skips 7/9/11; snap to closest
 *     existing rung, don't invent.
 *  6. Mobile-first + fluid. Every type token uses clamp(). Layouts
 *     collapse without media queries when flex-wrap / auto-fit can do it.
 *  7. Every component lands in /kit/. No demo block = component doesn't exist.
 *  8. Composability over variants. Two small classes that combine beats
 *     one giant class with options.
 *  9. No JS in the DS layer. CSS + HTML only.
 * 10. Accessibility floor: 44×44 touch targets, ≥16px body, visible
 *     :focus-visible on anything clickable.
 * 11. One-line comment above each token/component captures INTENT
 *     (when to use), not what it does — code shows that.
 */

:root {
  /*
   * ── Display type (SEED tops out at 36px; marketing needs more) ──
   * Generated via utopia.fyi/type-scale math with:
   *   min vw 320  / max vw 1240
   *   min body 16 / max body 20  (matches --seed-body-m)
   *   min ratio 1.2 (minor 3rd) / max ratio 1.333 (perfect 4th)
   * Steps used: 1 (body-xl), 3, 4, 5.
   * Px (not rem) because SEED sets html { font-size: 18px }, which would
   * skew rem-based clamps. To regenerate: recompute slope/intercept with
   *   slope = (max - min) / (1240 - 320),  intercept = min - slope * 320.
   */
  --ek-body-xl:     clamp(19px, 16.22px + 0.87vw, 27px);  /* step 1 */
  --ek-display-l:   clamp(28px, 21.39px + 2.07vw, 47px);  /* step 3 */
  --ek-display-xl:  clamp(33px, 22.57px + 3.26vw, 63px);  /* step 4 */
  --ek-display-2xl: clamp(40px, 24.70px + 4.78vw, 84px);  /* step 5 */

  /* ── Marketing widths ── */
  --ek-container:   1200px;  /* full marketing band (hero, feature grids) */
  --ek-readable:    720px;   /* prose, single-column forms, FAQ */

  /* ── Section spacing (SEED stops at space-12 / 48px; marketing wants more) ── */
  --ek-space-section:    clamp(64px, 9vw, 112px);  /* between major page sections */
  --ek-space-section-sm: clamp(40px, 6vw, 72px);   /* between tightly-coupled sections */

  /* ── Elevation (no inline box-shadows in components) ── */
  --ek-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --ek-shadow-pop:  0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 20px 40px -16px rgba(15, 23, 42, 0.18);
  --ek-shadow-hero: 0 30px 80px -30px rgba(15, 23, 42, 0.45), 0 12px 32px -16px rgba(30, 64, 175, 0.35);
  --ek-shadow-cta:  0 8px 20px -8px color-mix(in srgb, var(--seed-bg-brand-solid) 60%, transparent);

  /* ── Brand tints (premixed alphas of seed brand color) ── */
  --ek-tint-brand-soft:   color-mix(in srgb, var(--seed-bg-brand-solid) 6%,  transparent);
  --ek-tint-brand-medium: color-mix(in srgb, var(--seed-bg-brand-solid) 12%, transparent);
  --ek-tint-brand-strong: color-mix(in srgb, var(--seed-bg-brand-solid) 24%, transparent);

  /* ── Overlays (for image scrims) ── */
  --ek-overlay-dark:  linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.85) 100%);
  --ek-overlay-light: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
}

/* ════════ Layout primitives ════════ */

/* Full-bleed wrapper. Pair with .ek-container inside for centered content. */
.ek-band {
  width: 100%;
}

/* Soft brand-tinted band — for hero or any section that should feel "premium". */
.ek-band--tint {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--ek-tint-brand-strong), transparent 70%),
    linear-gradient(180deg, var(--seed-bg-layer-floor) 0%, var(--seed-bg-layer-basement) 100%);
}

/* Alternate band — neutral basement (for striping sections). */
.ek-band--muted { background: var(--seed-bg-layer-basement); }

/* Container — centered, wide. Use inside .ek-band. */
.ek-container {
  max-width: var(--ek-container);
  margin: 0 auto;
  padding: 0 var(--seed-space-5);
}

/* Readable column — for prose/forms. */
.ek-readable {
  max-width: var(--ek-readable);
  margin: 0 auto;
  padding: 0 var(--seed-space-5);
}

/* Vertical rhythm — apply to direct children of a band. */
.ek-section-y       { padding-top: var(--seed-space-12); padding-bottom: var(--seed-space-12); }
.ek-section-y--lg   { padding-top: var(--seed-space-16, 80px); padding-bottom: var(--seed-space-16, 80px); }
.ek-section-y--sm   { padding-top: var(--seed-space-8);  padding-bottom: var(--seed-space-8); }

/* ════════ Type classes ════════ */

.ek-display-2xl {
  font-size: var(--ek-display-2xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.ek-display-xl {
  font-size: var(--ek-display-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.ek-display-l {
  font-size: var(--ek-display-l);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.ek-body-xl {
  font-size: var(--ek-body-xl);
  line-height: 1.5;
  color: var(--seed-fg-neutral-muted);
}

/* ════════ Components ════════ */

/* CTAs — primary action buttons. .ek-cta is the default (m); --xl for hero. */
.ek-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--seed-space-2);
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--seed-body-m-size);
  padding: 14px var(--seed-space-6);
  border-radius: var(--seed-radius-full);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--ek-shadow-cta);
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
.ek-cta:hover { background: var(--seed-bg-brand-solid-pressed); transform: translateY(-1px); text-decoration: none; }
.ek-cta:focus-visible { outline: 2px solid var(--seed-bg-brand-solid); outline-offset: 3px; }

.ek-cta--xl {
  font-size: var(--seed-body-l-size);
  padding: 18px var(--seed-space-8);
  width: 100%;
  max-width: 420px;
}

/* Ghost CTA — secondary action, sits next to a primary. */
.ek-cta--ghost {
  background: transparent;
  color: var(--seed-fg-neutral);
  box-shadow: none;
  border: 1px solid var(--seed-stroke-neutral);
}
.ek-cta--ghost:hover { background: var(--seed-bg-layer-basement); transform: translateY(-1px); }

/* Eyebrow — small uppercase brand-colored label above a heading. */
.ek-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--seed-space-2);
  color: var(--seed-bg-brand-solid);
  font-size: var(--seed-body-s-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Eyebrow chip variant — pill with soft brand tint, optional dot. */
.ek-eyebrow--chip {
  background: var(--ek-tint-brand-medium);
  padding: 6px var(--seed-space-3);
  border-radius: var(--seed-radius-full);
  letter-spacing: 0;
  text-transform: none;
  color: var(--seed-fg-neutral);
}
.ek-eyebrow--chip .ek-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-bg-brand-solid);
}

/* Section heading — eyebrow + display + lead. Center by default; --left to override. */
.ek-section-heading {
  text-align: center;
  margin-bottom: var(--seed-space-8);
}
.ek-section-heading--left { text-align: left; }
.ek-section-heading > * + * { margin-top: var(--seed-space-3); }
.ek-section-heading .ek-body-xl { max-width: 560px; margin-left: auto; margin-right: auto; }
.ek-section-heading--left .ek-body-xl { margin-left: 0; margin-right: 0; }

/* Logo bar — "as seen in" placeholder row. Grayscaled, low opacity by default. */
.ek-logo-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--seed-space-4);
}
.ek-logo-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seed-fg-neutral-subtle);
}
.ek-logo-bar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--seed-space-6) var(--seed-space-8);
  opacity: 0.55;
  filter: grayscale(1);
}
.ek-logo {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--seed-fg-neutral);
  white-space: nowrap;
}
.ek-logo--serif { font-family: 'Times New Roman', serif; font-style: italic; font-weight: 600; font-size: 17px; }

/* Grid — auto-fit columns. --cols var sets the minimum column width.
   Drops to fewer columns automatically when container narrows. */
.ek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ek-grid-min, 240px), 1fr));
  gap: var(--seed-space-5);
}
.ek-grid--tight { gap: var(--seed-space-4); }
.ek-grid--loose { gap: var(--seed-space-8); }


/* Testimonial card — quote + avatar + name + location. */
.ek-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--seed-space-4);
  padding: var(--seed-space-6);
  background: var(--seed-bg-layer-default);
  border-radius: var(--seed-radius-4);
  box-shadow: var(--ek-shadow-card);
}
.ek-testimonial__stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
}
.ek-testimonial__body {
  font-size: var(--seed-body-m-size);
  line-height: 1.55;
  color: var(--seed-fg-neutral);
  flex: 1;
}
.ek-testimonial__who {
  display: flex;
  align-items: center;
  gap: var(--seed-space-3);
  margin-top: auto;
}
.ek-testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.ek-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ek-testimonial__name { font-weight: 600; font-size: var(--seed-body-s-size); line-height: 1.2; }
.ek-testimonial__loc { color: var(--seed-fg-neutral-muted); font-size: 12px; }

/* Stat — big number + label. "25,000+ students" style. */
.ek-stat {
  text-align: center;
  padding: var(--seed-space-5);
}
.ek-stat__num {
  font-size: var(--ek-display-xl);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--seed-bg-brand-solid);
  margin-bottom: var(--seed-space-2);
}
.ek-stat__label {
  font-size: var(--seed-body-s-size);
  color: var(--seed-fg-neutral-muted);
  font-weight: 600;
}

/* Photo card — image with caption overlay. For "meet your classmates" strips. */
.ek-photo-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--seed-radius-4);
  overflow: hidden;
  box-shadow: var(--ek-shadow-card);
  background: var(--seed-bg-layer-basement);
}
.ek-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-photo-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--ek-overlay-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--seed-space-5);
  color: var(--seed-fg-brand-contrast);
}
.ek-photo-card__name { font-weight: 700; font-size: var(--seed-title-3-size); letter-spacing: -0.01em; }
.ek-photo-card__sub { font-size: var(--seed-body-s-size); opacity: 0.85; margin-top: 4px; }