/* Cormorant Garamond is self-hosted in fonts.css (all five faces this
   page uses). The Google CDN @import that used to sit here was a
   redundant render-blocking request that also leaked visitor IPs. */

/* ── Landing Page ──────────────────────────────────────────────────
   Guest-facing marketing page. Full-width, no sidebar, no app-shell.
   All colors via tokens from tokens.css.
   ─────────────────────────────────────────────────────────────── */

/* ── Root container ── */
.lp-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}

/* ── Ambient background glow — Figma #92:10296 ─────────────────────
   1206×508 ellipse, horizontally centred, 329px above the hero's top
   edge (page y 68), blurred 150px at 18%. ── */
/* Figma #131:1304 "Blur" — an ellipse rx 754 ry 254 (so 1508×508) in
   #4E90D9 at 18%, feGaussianBlur stdDeviation 150. It hangs off the top of
   the hero: the section starts at page y 76 and the node sits at y -329,
   so its box top is page y -253. It was 1206 wide, which pulled the falloff
   in past the headline's ends. */
.lp-bg-glow {
  position: absolute;
  top: -253px;
  left: 50%;
  transform: translateX(-50%);
  /* deliberately wider than the 1440 frame — it hangs off both sides and
     .lp-root's overflow-x:clip takes care of it, so no max-width clamp */
  width: 1508px;
  height: 508px;
  border-radius: 50%;
  background: rgb(var(--acc-rgb));
  filter: blur(150px);
  opacity: var(--lp-hero-glow-op);
  pointer-events: none;
  z-index: 0;
}

/* ── Top navigation bar ── */
.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 48px;
  /* Figma V2 (#92:10274): 2px gold rule on top, no bottom border, blur 8px */
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid transparent;
  background: none;              /* Figma fill_97d170e1 is empty — pure glass */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  overflow: visible;
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

/* Scrolled state — logo only, actions hidden, more transparent */
.lp-nav--scrolled {
  background: color-mix(in srgb, var(--sb) 45%, transparent);
  border-bottom-color: transparent;
  padding-top: 10px;
  padding-bottom: 10px;
}

.lp-nav--scrolled .lp-nav-actions {
  opacity: 0;
  pointer-events: none;
}

/* Motivational quote — visible only in scrolled state, centered */
.lp-nav-quote {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--t2);
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
  white-space: nowrap;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-nav--scrolled .lp-nav-quote {
  opacity: 1;
}

/* Offset page content so it starts below the fixed nav (70.66px in Figma) */
.lp-root {
  padding-top: 70px;
}

/* The hamburger and its panel exist only in the V2 Mobile frame — the
   mobile block at the end of this file turns them on below 767px. */
.lp-nav-burger,
.lp-mobile-menu {
  display: none;
}

.lp-nav-logo {
  display: block;
  width: 144px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.lp-nav-logo:hover {
  opacity: .88;
}

/* Logo canvases. They keep width/height inline because logo-3d.js reads
   canvas.style.width to size its backing store, but `display` had to come out
   of the markup: an inline display outranks every stylesheet rule regardless
   of specificity, so the mobile block's `display:none` could never fire. */
.ek-logo-cube,
.ek-logo-lines { display: block; flex-shrink: 0; }

/* Wordmark — Figma #92:10279–10281 */
.ek-wordmark { flex: 1; min-width: 70px; height: 40px; }

.ek-w {
  font-family: var(--fh);
  font-size: 19.16px;
  font-weight: 700;
  letter-spacing: .2px;
  fill: var(--t0);
}

.lp-nav-logo .ek-s {
  font-family: var(--fb);
  font-size: 6.25px;
  font-weight: 400;
  letter-spacing: 1.2px;
  fill: var(--t2);
  opacity: 1;
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;                     /* Figma: toggle 1248 → button 1264 */
  transition: opacity 0.25s ease;
}

/* Nav CTA — Figma #92:10290 */
.lp-nav-actions .btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 128px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .4);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

/* White bloom above the CTA — Figma #92:10292 */
.lp-nav-actions .btn-primary::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -18px;
  width: 138px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  filter: blur(10px);
  opacity: .3;
  pointer-events: none;
}

.lp-nav-actions .lp-book-nav {
  width: auto;
  min-width: 128px;
  gap: 8px;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 16px;
}

.lp-nav-actions .lp-book-nav::before {
  width: auto;
  left: -6px;
  right: -6px;
}

.lp-book-label-short { display: none; }

/* Dock-style magnification on Book / Start Now — scale is driven by JS. */
.lp-nav-actions .lp-dock-item {
  transform-origin: 50% 0%;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
  will-change: transform;
}

.lp-nav-actions .lp-dock-item:hover {
  /* Beat components.css translateY hover so the dock JS owns transform. */
  transform: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.lp-theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--el);
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.lp-theme-btn:hover {
  background: var(--acc-d);
  border-color: var(--acc-rim);
  color: var(--acc-t);
}

/* ── Hero section ── */
.lp-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 120px;           /* Figma #92:10295 */
  position: relative;
  z-index: 1;
}

/* TEST: Calendmax booking dialog — opened from Book Appointment. */
.lp-book-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  background: color-mix(in srgb, var(--sb) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility .65s ease;
}

.lp-book-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lp-book-dialog {
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 18px;
  background: var(--sf);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(var(--gold-rgb), .28),
    0 0 64px rgba(var(--gold-rgb), .16);
  transform-origin: center center;
  opacity: 1;
}

.lp-book-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0 18px;
}

.lp-book-title {
  margin: 0;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

.lp-book-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: none;
  color: var(--t2);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.lp-book-close:hover {
  border-color: var(--gold-rim);
  color: var(--gold);
  background: var(--gold-d);
}

.lp-book-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

#calendmax-test {
  width: 100%;
  padding: 12px 12px 16px;
}

body.lp-book-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lp-book-overlay,
  .lp-book-dialog,
  .lp-nav-actions .lp-dock-item {
    transition: none;
  }
}

/* ── "Live" badge above headline ── */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Figma V2 (#92:11134): 4px 12px, gap 8, 14px/400, sentence case */
  padding: 4px 12px;
  background: rgba(var(--gold-rgb), .12);
  border: 1px solid rgba(var(--gold-rgb), .18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
  margin-bottom: 20px;
  font-family: var(--fh);
  cursor: default;
}

/* Figma #92:11135 — blue dot with a 2px halo, not gold */
.lp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-t);
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .30);
  animation: lp-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes lp-pulse {
  0%, 100% { opacity: 1;  transform: scale(1);    }
  50%       { opacity: .4; transform: scale(.80);  }
}

/* ── Main headline ── */
.lp-headline {
  font-family: var(--fh);
  /* Figma V2 (#92:10304): 70px, Semibold 600, line-height 1em, title case */
  font-size: clamp(34px, 5.4vw, 70px);
  font-weight: 700;              /* Figma ts1/ts2 — both runs are Bold */
  color: var(--t1);
  /* DELIBERATE DEVIATION from the Figma spec's 1em. The headline renders on
     two lines at every width, and at exactly 1.0 the descenders of line one
     ("Your AI Career Agents" — the y and g) close on the caps of line two.
     1.06 is the smallest value that clears them; revert to 1 to match the
     macro exactly. Measured 69.12px/69.12px at 1280 before this change. */
  line-height: 1.06;
  letter-spacing: 0;
  margin-bottom: 30px;
  max-width: 1093px;
  text-wrap: balance;
}

/* Figma ts2 — gradient-clipped text, not a flat gold fill */
.lp-headline-accent {
  color: var(--gold);
  background: linear-gradient(90deg, var(--lp-hl-1) 0%, var(--lp-hl-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Tagline ── */
.lp-tagline {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--t2);
  max-width: 560px;
  line-height: 1.5;          /* Figma V2 (#92:10305) */
  margin-bottom: 30px;       /* Figma #92:10298 */
  font-weight: 300;
}

/* ── Hero call-to-action pair — Figma V2 (#92:10306) ──────────────
   Primary "Start Now" + ghost "How It Works", 20px apart.        */
/* Hero proof row — real platform totals, not invented social proof.
   The Figma comp had "5.0 FROM 200K+ MEMBERS" in this slot; the product has
   single-digit users, so it shows work actually done instead. Sits under the
   CTAs at the same rhythm as the rest of the hero. */
.lp-proof {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin: 34px 0 0;
  flex-wrap: wrap;
}
.lp-proof-item { text-align: center; }
.lp-proof-value {
  margin: 2px 0 0;
  font-family: var(--fh);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.lp-proof-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* --t2, not --t3: at 10px the muted tone drops under AA on this surface. */
  color: var(--t2);
}

.lp-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Figma layout_532d71c9: both buttons are exactly 196px wide.
   The mockup's 55/44 asymmetric padding is a Figma artefact of a centred
   label in a fixed box — symmetric padding renders identically without
   clipping the longer "How It Works" label. */
.lp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 196px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

.lp-cta:active { transform: translateY(1px); }

.lp-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .7;
}

/* Primary — solid gold, dark label (Figma #92:10307) */
.lp-cta--primary {
  background: var(--gold);
  color: var(--on-gold);
  border: 1px solid rgba(255, 255, 255, .4);
}

/* Bloom above the primary CTA — Figma #131:1320 "Blur": a 196×26 ellipse
   at 30% white, feGaussianBlur stdDeviation 10, sitting at y -18.66 on the
   button's own frame, so two thirds of it clear the top edge and the rest
   catches the rim. Hardcoded white here was invisible on the light theme,
   hence the token. */
.lp-cta--primary::before {
  content: "";
  position: absolute;
  /* The mockup's ellipse is a fixed 196 (desktop #92:10307, mobile #138:40),
     not a percentage: `width:100%` resolves against the content box and comes
     out 194, and stretching it to the button made it a grey band across the
     hero once the mobile CTAs went full-width. Centring a fixed 196 is
     identical on desktop, where the button is exactly 196 wide. */
  left: 50%;
  width: 196px;
  transform: translateX(-50%);
  top: -18.66px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-cta-glow);
  filter: blur(10px);
  pointer-events: none;
}

.lp-cta--primary:hover { background: var(--gold-w); }

/* Ghost — 10% gold wash, gold label (Figma EL-ef4dda07) */
.lp-cta--ghost {
  background: rgba(var(--gold-rgb), .10);
  color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), .25);
}

.lp-cta--ghost .lp-cta-icon { opacity: .5; }   /* Figma #92:10315 */

.lp-cta--ghost:hover {
  background: rgba(var(--gold-rgb), .18);
  border-color: rgba(var(--gold-rgb), .40);
}

/* ── Google Sign-In button — official Google style ── */
.lp-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px 11px 14px;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.lp-google-btn:hover {
  background: #f6f8ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.lp-google-btn:active {
  background: #f0f0f0;
}

.lp-google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Features section ── */
.lp-features {
  padding: 0 24px 88px;
  position: relative;
  z-index: 1;
}

.lp-features-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 28px;
  font-family: var(--fm);
}

.lp-feature-grid {
  --lp-cols: 4;
  --lp-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--lp-gap);
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Feature card ── */
.lp-card {
  background: var(--sf);
  flex: 0 0 calc((100% - (var(--lp-cols) - 1) * var(--lp-gap)) / var(--lp-cols));
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.lp-card:hover {
  border-color: var(--bd2);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .38), 0 0 0 1px var(--acc-rim);
  transform: translateY(-3px);
}

/* Icon box */
.lp-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--acc-d);
  border: 1px solid var(--acc-rim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc-t);
  flex-shrink: 0;
}

.lp-card-icon.gold {
  background: var(--gold-d);
  border-color: var(--gold-rim);
  color: var(--gold);
}

.lp-card-title {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -.01em;
}

.lp-card-desc {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.65;
}

/* ── Footer — Figma #92:10731 ── */
.lp-footer {
  border-top: 1px solid var(--hair);
  background: var(--lp-footer-bg);
  padding: 17px 120px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.lp-footer-copy {
  font-size: 13px;
  line-height: 1.6;
  color: var(--t2);
}

a.lp-footer-copy { text-decoration: none; }
a.lp-footer-copy:hover { color: var(--t1); }

/* Figma #92:10736–10740: 28px gutters with 1px × 15px separators */
.lp-footer-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-footer-sep {
  display: block;
  width: 1px;
  height: 15px;
  background: var(--hair-s);
}

.lp-version {
  display: inline-block;
  font-size: 10px;
  font-family: var(--fm);
  padding: 2px 8px;
  background: var(--acc-d);
  color: var(--acc-t);
  border: 1px solid var(--acc-rim);
  border-radius: 4px;
}

/* ── Shared section heading ── */
.lp-section-heading {
  font-family: var(--fh);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--t1);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 32px;
  text-wrap: balance;
}

/* ── Insights & Articles section ──────────────────────────────────
   Figma V2 #92:10550: the band is one step lighter than the page so
   the section rhythm alternates. Cards then sit a step darker again. */
.lp-insights {
  position: relative;
  z-index: 1;
  padding: 1px 120px 100px;      /* Figma #92:10550 */
  border-top: 1px solid var(--hair);
  background: var(--sf);         /* #111D35 dark / #FFFFFF light */
}

.lp-insights-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.lp-insights .lp-section-head { margin-bottom: 38px; }   /* Figma #92:10552 */

.lp-insights-more {
  display: flex;
  justify-content: center;
  margin-top: 38px;              /* Figma #92:10552 grid → button gap */
}

/* Article grid — Figma V3: 4 tracks, 12 cards, uniform 20px gutters */
.lp-article-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-article-card {
  flex: 1;
  height: 100%;
  background: var(--bg);         /* Figma fill_ad745aff #0A1628 */
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.lp-article-card:hover {
  border-color: var(--gold-rim);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 0 0 1px var(--gold-rim);
  transform: translateY(-3px);
}

/* Article icon box — mirrors .lp-card-icon */
.lp-article-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--acc-d);
  border: 1px solid var(--acc-rim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc-t);
  flex-shrink: 0;
}

.lp-article-icon.gold {
  background: var(--gold-d);
  border-color: var(--gold-rim);
  color: var(--gold);
}

.lp-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Read-time chip on /articles and the article header (not on the landing
   cards — those use .lp-pill). */
.lp-article-read {
  font-size: 10px;
  font-weight: 400;
  color: var(--t3);
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), .2);
  border-radius: 2px;
  padding: 2px 8px;
  white-space: nowrap;
  font-family: var(--fb);
  letter-spacing: 0.06em;
}

.lp-article-cat {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;         /* Figma style_ac3f42a4 */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--fh);
  opacity: 0.85;
}

.lp-article-title {
  /* Figma V2 (style_55afd3ff): display sans, Semibold 20/1.2 — the mockup
     drops the Cormorant serif these cards used before. */
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.2;
  letter-spacing: 0;        /* Figma style_55afd3ff */
  margin: 0;
}

.lp-article-desc {
  font-size: 14px;          /* Figma style_f8181b51 */
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0;
}

/* ── Article card link wrapper ── */
.lp-article-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lp-article-link:focus-visible { outline: 2px solid var(--acc); border-radius: 12px; }

/* ── Founder photo — Figma #92:10701: 170px rounded square, 2px
   gold→blue gradient rim, no shadow. ── */
.lp-founder-photo {
  width: 170px;
  height: 170px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 15%;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--gold) 0%, var(--acc-t) 100%) border-box;
  box-shadow: none;
}

/* ── About the Founder section ── */
.lp-founder {
  position: relative;
  z-index: 1;
  padding: 1px 120px 120px;      /* Figma #92:10690 */
  border-top: 1px solid var(--hair);
  overflow: hidden;              /* clips the ambient radial field */
}

/* Rule → header gap is 80px here, 60px in the other two sections */
.lp-founder .lp-section-head { padding-top: 80px; }

/* Ambient radial field — Figma #92:10730. The source is an IMAGE-SVG we
   have no export of; its 1421×376 frame puts the gradient's bright point
   exactly on the frame's right edge, which renders as a hard rectangle in
   CSS. Bright point (page 377, 382), colour and 20% opacity are kept
   verbatim; only the falloff is made symmetric so it fades out. */
.lp-founder::after {
  content: "";
  position: absolute;
  left: -73px;
  top: 2px;
  width: 900px;
  height: 760px;
  background: radial-gradient(closest-side,
              rgb(var(--acc-rgb)) 0%, rgba(var(--acc-rgb), 0) 100%);
  opacity: .2;
  pointer-events: none;
  z-index: 0;
}

.lp-founder > * { position: relative; z-index: 1; }

.lp-founder-inner {
  /* Figma V2 content area: 1440 − 120 side padding × 2. At the old 960 the
     bio column collapsed to ~40 characters per line. */
  max-width: 1200px;
  margin: 0 auto;
}

.lp-founder-header {
  margin-bottom: 48px;
}

/* Eyebrow override — gold, sans, refined tracking */
.lp-founder .lp-features-label {
  font-family: var(--fb);
  color: var(--gold);
  letter-spacing: 0.22em;
  font-weight: 400;
  text-align: left;
  opacity: 0.85;
  margin-bottom: 20px;
}

/* Heading override — Cormorant Garamond light, aristocratic */
.lp-founder .lp-section-heading {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 0;
}

/* Eyebrow is gold in this section only — Figma fill_b50ebf16 */
.lp-founder .lp-eyebrow { color: var(--gold); }

.lp-founder-cols {
  /* Figma #92:10700: 170 / 587.33 / 386.67 with 28px gutters */
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 386.67px;
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 1180px) {
  .lp-founder-cols {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* Card drops below and spans the full width */
  .lp-founder-card { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .lp-founder-cols { grid-template-columns: minmax(0, 1fr); }
}

.lp-founder-left {
  flex-shrink: 0;
}

.lp-founder-photo-placeholder {
  width: 170px;
  height: 170px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--acc-t) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 42px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 3px;
  flex-shrink: 0;
}

.lp-founder-right {
  flex: 1;
  min-width: 0;
}

/* Figma style_ed1da97d — 16/1.6, 28px between paragraphs */
.lp-founder-bio {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 28px;
  letter-spacing: 0;
}

.lp-founder-bio:last-child { margin-bottom: 0; }

/* Pull-quote card — Figma #92:10706 */
.lp-founder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}

/* Ambient bloom — Figma #92:10707: 386×162 at (0.67, -99.66) */
.lp-founder-card::before {
  content: "";
  position: absolute;
  left: 0.67px;
  top: -99.66px;
  width: 386px;
  height: 162px;
  border-radius: 50%;
  background: rgb(var(--acc-rgb));
  filter: blur(63.05px);
  opacity: var(--lp-glow-op);
  pointer-events: none;
  z-index: 0;
}

.lp-founder-card > * { position: relative; z-index: 1; }

/* Figma #92:10709 — display sans italic 22/1.6, no decorative glyph */
.lp-founder-quote {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-family: var(--fh);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  color: var(--t1);
}

.lp-founder-quote strong { font-weight: 700; font-style: italic; }

/* Tags — Figma #92:10710: stacked full-width blue pills */
.lp-founder-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acc-t);
  background: rgba(var(--acc-rgb), .10);
  border: 1px solid rgba(var(--acc-rgb), .20);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: var(--fh);
}

/* ── Responsive — tablet ── */
@media (max-width: 1023px) {
  .lp-feature-grid {
    --lp-cols: 4;
    max-width: 960px;
  }
}

/* BUG-M4: iPad range — 2-col keeps last row at 50% vs 33% orphan at 3-col */
@media (max-width: 768px) {
  .lp-feature-grid {
    --lp-cols: 2;
    max-width: 600px;
  }
}

/* ── Responsive — mobile ── */
@media (max-width: 767px) {
  .lp-nav {
    padding: 12px 20px;
  }

  .lp-nav-logo {
    width: 120px;
  }

  /* BUG-M1: Hide lines canvas — cube (40px) + wordmark (70px) = 110px fits in 120px */
  [data-logo-lines] {
    display: none;
  }

  /* BUG-M2: Hide theme toggle to free 42px; shrink sign-in button to ~130px */
  .lp-theme-btn {
    display: none;
  }

  .lp-nav-actions .btn-primary {
    font-size: 13px;
    padding: 7px 14px;
  }

  /* BUG-M3: Centered quote (225px+) collides with logo at 360px — hide on mobile */
  .lp-nav-quote {
    display: none;
  }

  .lp-hero {
    padding: 52px 20px 44px;
  }

  .lp-feature-grid {
    --lp-cols: 1;
    max-width: 480px;
    gap: 12px;
  }

  .lp-features {
    padding: 0 20px 56px;
  }

  .lp-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .lp-insights {
    padding: 1px 20px 56px;
  }

  .lp-founder {
    padding: 1px 20px 60px;
  }

  .lp-footer {
    padding: 17px 20px 16px;
  }

  .lp-founder .lp-features-label {
    text-align: center;
  }

  .lp-founder .lp-section-heading {
    text-align: center;
  }

  .lp-founder-cols {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }

  .lp-founder-right {
    text-align: center;
    padding-top: 0;
  }

  .lp-founder-tags {
    justify-content: center;
  }

  .lp-founder-quote {
    text-align: left;
    padding-left: 2.5rem;
  }

  .lp-founder-bio {
    max-width: 100%;
  }
}

/* ── Article expand overlay ─────────────────────────────────────────────
   article-expand.js adds/removes .is-visible, .is-open, .is-animating.
   Panel starts at card bounding rect (via --origin-* CSS vars), then
   transitions to full screen when .is-open is added after a forced reflow.
   ──────────────────────────────────────────────────────────────────── */

.article-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: stretch;
}

/* JS sets display:flex via .is-visible — separate from .is-open so the
   browser registers the initial (card) position before the transition fires */
.article-overlay.is-visible {
  display: flex;
}

/* ── Backdrop ── */
.article-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.article-overlay.is-animating .article-overlay-backdrop {
  opacity: 1;
}

/* ── Panel — starts at card position, transitions to full screen ── */
.article-overlay-panel {
  position: absolute;
  left: var(--origin-x, 0px);
  top: var(--origin-y, 0px);
  width: var(--origin-w, 100%);
  height: var(--origin-h, 100%);
  background: var(--sb);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded state — fills viewport */
.article-overlay.is-open .article-overlay-panel {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow-y: auto;
}

/* ── Header bar (sticky) ── */
.article-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
  background: var(--sb);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.article-overlay.is-animating .article-overlay-header {
  opacity: 1;
}

/* ── Close button ── */
.article-overlay-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--el);
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.article-overlay-close:hover {
  background: var(--acc-d);
  border-color: var(--acc-rim);
  color: var(--acc-t);
}

.article-overlay-close:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* ── Meta row (category + read time) ── */
.article-overlay-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Article body — fades in after panel expands ── */
.article-overlay-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease 0.3s;
}

.article-overlay.is-open .article-overlay-body {
  opacity: 1;
}

/* ── Loading spinner ── */
.article-overlay-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

@keyframes ao-spin {
  to { transform: rotate(360deg); }
}

.article-overlay-spinner {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--bd);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ao-spin 0.8s linear infinite;
}

/* ── Back button inside overlay ── */
.article-overlay-back-btn {
  cursor: pointer;
  background: none;
  border: 1px solid var(--bd);
  color: var(--t2);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--fb);
  font-size: 13px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.article-overlay-back-btn:hover {
  border-color: var(--bd2);
  color: var(--t1);
}

/* ── Mobile: overlay is disabled (normal navigation) ── */
@media (max-width: 767px) {
  .article-overlay {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Services — bento grid.  Figma V2 section #92:10343.
   Card visuals are live markup + SVG, not exported images: they
   inherit both themes and stay crisp on any display.
   ══════════════════════════════════════════════════════════════════ */

.lp-services {
  padding: 0 120px 100px;
  border-top: 1px solid var(--hair);
  position: relative;
  z-index: 1;
  /* Anchor target: clear the fixed 70px nav so the eyebrow isn't hidden. */
  scroll-margin-top: 88px;
}

/* ── Section header: eyebrow + title on the left, index on the right ── */
.lp-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 60px;
  margin-bottom: 48px;          /* Figma: Main Container gap 48 */
}

.lp-section-head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Eyebrow left, section index right — Figma desktop #92:10350/#92:10352 and
   mobile #140:809 draw the same row; the title sits full-width beneath it. */
.lp-section-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Figma style_8b1df001 / mobile #140:813 — 14/400, the slash gold at full
   opacity, the digits in the muted body colour. */
.lp-section-num {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--t2);
  text-align: right;
  flex-shrink: 0;
}

.lp-section-num i {
  font-style: normal;
  color: var(--gold);
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0;             /* Figma style_84047736 */
  color: var(--t2);
}

/* Figma EL-3bdeded0: vertical blue gradient + a 2px outside halo */
.lp-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(var(--acc-rgb)) 0%, #86B8F0 100%);
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .30);
  flex-shrink: 0;
}

.lp-section-title {
  font-family: var(--fh);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--t0);              /* Figma style_f2eb0ee8 → #FFFFFF */
  letter-spacing: 0;
  text-wrap: balance;
}

/* ── The grid: 4 tracks — tall card, stack, tall card, stack ── */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.lp-bento-stack {
  display: grid;
  grid-auto-rows: auto;
  gap: 12px;
  min-width: 0;
}

.lp-bento-card {
  display: flex;
  flex-direction: column;
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.lp-bento-card:hover {
  border-color: var(--gold-rim);
  transform: translateY(-2px);
}

/* Tall cards: 605px overall (Figma #92:10420 pins the copy at y 490.5),
   the visual holds its own height and the copy is pushed to the floor. */
.lp-bento-card--tall { min-height: 605px; }
/* Figma #131:1500 "Resume Tailoring Info" is p-[20px] on all four sides and
   w-full, so the copy runs 251px wide in a 291 card — not the 239 an extra
   12px of right padding was giving it, which cost a word on every line. */
.lp-bento-card--tall .lp-bento-body {
  margin-top: auto;
}

.lp-bento-body {
  display: flex;
  flex-direction: column;
  gap: 12px;                     /* Figma EL-1519dabc title → desc */
  padding: 20px;                 /* Figma EL-7ecc36aa */
}

/* Figma EL-3cd43b9f / EL-d20a71eb: 42×42 chip, gradient fill, gradient
   rim faked with a border-box gradient, and a 3px hard offset shadow. */
.lp-bento-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--lp-chip-acc-1) 0%, var(--lp-chip-acc-2) 100%) padding-box,
    linear-gradient(180deg, var(--lp-chip-acc-b1) 0%, var(--lp-chip-acc-b2) 100%) border-box;
  box-shadow: 0 3px 0 0 var(--lp-chip-acc-b2);
  color: var(--acc-t);
  flex-shrink: 0;
  margin-bottom: 4px;            /* 12px body gap + 4 = 16px icon → text */
}

/* Figma #131:1365 — the glyph is 20 square, inset 11px in the 42px chip */
.lp-bento-icon svg {
  width: 20px;
  height: 20px;
}

.lp-bento-icon.gold {
  background:
    linear-gradient(180deg, var(--lp-chip-gold-1) 0%, var(--lp-chip-gold-2) 100%) padding-box,
    linear-gradient(180deg, var(--lp-chip-gold-b1) 0%, var(--lp-chip-gold-b2) 100%) border-box;
  box-shadow: 0 3px 0 0 var(--lp-chip-gold-b2);
  color: var(--gold);
}

.lp-bento-title {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--t1);
}

.lp-bento-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--t2);
}

.lp-bento-list {
  display: flex;
  flex-direction: column;
  gap: 16px;                     /* Figma #92:10504 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-bento-list li {
  position: relative;
  padding-left: 22px;            /* 6 dot + 4 halo + 12 gap */
  font-size: 14px;
  line-height: 1.3;
  color: var(--t2);
}

.lp-bento-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(var(--acc-rgb)) 0%, #86B8F0 100%);
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .30);
}

/* ── Cover Letter AI — three-step flow ── */
.lp-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 2px 0 2px;
  counter-reset: lp-step;
}

.lp-flow li {
  position: relative;
  align-self: flex-start;
  padding: 5px 11px 5px 26px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--acc-t);
  background: var(--acc-d);
  border: 1px solid var(--acc-rim);
  border-radius: 100px;
}

.lp-flow li::before {
  counter-increment: lp-step;
  content: counter(lp-step);
  position: absolute;
  left: 9px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

.lp-flow li + li { margin-left: 18px; }

/* ── Visual: matched roles stack ── */
.lp-viz {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

/* Figma group #92:10357 sits at card y 122.84; the icon head above it
   ends at y 62, so the group's own top is 60.84px inside the visual. */
.lp-viz--jobs {
  padding: 0;
  min-height: 382px;
}

.lp-jobcard {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;                     /* Figma #92:10358 */
  padding: 14px;
  border-radius: 11.15px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--lp-jc-rgb), .9) 44%, rgba(var(--lp-jc-rgb), 0) 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 100%) border-box;
  backdrop-filter: blur(4.89px);
  -webkit-backdrop-filter: blur(4.89px);
  /* All three cards share one transform, read from the Figma Dev Mode MCP
     (node #92:10357). The skew is the point: composed, the matrix has c == 0,
     so vertical edges stay vertical while top and bottom slant — the mockup's
     look. A plain rotate() tips the whole card and reads as flat.
     -8deg in CSS is Figma's +8deg; Figma measures counter-clockwise. */
  transform: rotate(-8deg) skewX(-8deg) scaleY(.99);
  transform-origin: center;
}

/* Inner rhythm: text stack 5.71, stack → band 10, band → stats 10 */
.lp-jobcard-main { display: flex; flex-direction: column; gap: 10px; }
.lp-jobcard-txt  { display: flex; flex-direction: column; gap: 5.71px; align-items: flex-start; }
.lp-jobcard-stats { display: flex; flex-direction: column; gap: 6px; }

/* Figma #92:10368 — a 20px filled band, not a hairline rule */
.lp-jobcard-band {
  display: block;
  height: 21.21px;
  background: var(--hair);
}

.lp-jobcard-role {
  font-size: 11.42px;
  line-height: 1.5;
  color: var(--t2);
  opacity: .7;
}

.lp-jobcard-pay {
  font-size: 14.85px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--t2);
  opacity: .9;
  white-space: nowrap;
}

.lp-jobcard-meta {
  display: flex;
  gap: 4px;
  font-size: 8.57px;
  line-height: 1.5;
  color: var(--t2);
  opacity: .6;
}

.lp-jobcard-meta i { font-style: normal; }
.lp-jobcard-meta b { font-weight: 700; }

.lp-jobcard-score { display: flex; flex-direction: column; gap: .95px; }
.lp-jobcard-score-label {
  font-size: 8.57px;
  line-height: 1.5;
  color: var(--t2);
  opacity: .7;
}
.lp-jobcard-score-value {
  font-size: 12.375px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}

/* Stack placement — card-relative Figma coords minus the 62px head */
.lp-jobcard--back { top: 60.84px; left: 15px;  width: 173.59px; opacity: .6; }
.lp-jobcard--mid  { top: 88.12px; left: 53px;  width: 173.59px; }
.lp-jobcard--back .lp-jobcard-band { height: 21.21px; }
.lp-jobcard--mid  .lp-jobcard-band { height: 20.94px; }

/* Front card — 8° tilt (owner-confirmed), gold wash over a neutral body */
.lp-jobcard--front {
  top: 116.7px;
  left: 115px;
  width: 163.59px;
  /* Verbatim from the Figma Dev Mode MCP (node #92:10386). The REST dump
     rounded these — it reported 122deg / 0% / 81%, the file says 104.62deg
     / 19.766% / 82.423%. Border is a flat gold hairline, not a gradient. */
  background:
    linear-gradient(104.62deg, rgba(var(--gold-rgb), .16) 19.766%, rgba(var(--gold-rgb), 0) 82.423%) padding-box,
    linear-gradient(180deg, rgba(var(--lp-jc-fg-rgb), .93) 43.539%, rgba(var(--lp-jc-fg-rgb), .279) 100%) padding-box;
  border-color: var(--gold);
  z-index: 2;
}

.lp-jobcard--front .lp-jobcard-band { height: 19.82px; }
.lp-jobcard--front .lp-jobcard-role { color: var(--lp-jc-t); opacity: 1; }
.lp-jobcard--front .lp-jobcard-pay  { color: var(--lp-jc-t-hi); opacity: .9; }
.lp-jobcard--front .lp-jobcard-meta { color: var(--lp-jc-t); opacity: 1; }
.lp-jobcard--front .lp-jobcard-meta b { color: var(--gold); }
.lp-jobcard--front .lp-jobcard-score-label,
.lp-jobcard--front .lp-jobcard-score-value { color: var(--gold); opacity: 1; }

/* Figma #92:10390 — a small square-ish chip, no border */
.lp-jobcard-tag {
  font-size: 9.52px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--gold);
  background: rgba(var(--gold-rgb), .10);
  border-radius: 5.27px;
  padding: 2.86px 6.66px;
}

/* Match bars — Figma EL-2cbeeaf2: 54.1px track, ~10px filled capsule */
.lp-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-bars li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8.57px;
  line-height: 1.5;
  color: var(--lp-jc-t);
}

.lp-bars b {
  display: block;
  width: 54.1px;
  flex-shrink: 0;
  border-radius: 5.27px;
  background: rgba(var(--gold-rgb), .20);
  position: relative;
}

.lp-bars b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: var(--lp-bar-fill);
}

.lp-bars li:nth-child(1) b { height: 10.3px; }
.lp-bars li:nth-child(2) b { height: 9.88px; }
.lp-bars li:nth-child(3) b { height: 10.02px; }
.lp-bars li:nth-child(1) b::after { width: 51.96px; }
.lp-bars li:nth-child(2) b::after { width: 48.96px; }
.lp-bars li:nth-child(3) b::after { width: 49.96px; }

/* ── Visual: resume analysis path ──────────────────────────────────
   ONE coordinate frame for the whole illustration. The box is the card's
   own y130..420 band at 1:1, so every value below is a Figma card
   coordinate minus 130 — the SVG carries the same window in its viewBox
   and needs no arithmetic at all. The head above is 20px padding + a 42px
   icon, i.e. it ends at card y 62, hence the 68px gap.                */
.lp-viz--path {
  height: 290px;
  min-height: 0;
  margin-top: 68px;
}

/* Figma #92:10456 — the vector is the full 291-wide card, drawn at 1:1.
   Squashing it to fit a shorter box (it was 290×241 for a 300-tall
   viewBox) flattened the curve and slid every waypoint off its pill. */
.lp-path-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 291px;
  height: 290px;
}

/* Figma style_0627bae4 — 14px Semibold grey-blue, not 11px blue */
.lp-path-pill {
  position: absolute;
  /* Figma: 28px tall, rx 14, #1B2C50 @70% with a 1px white hairline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1;
  color: var(--t2);
  background: var(--lp-pill-bg);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(4.89px);
  -webkit-backdrop-filter: blur(4.89px);
  white-space: nowrap;
}

/* Figma card positions minus the band's 130px origin. Widths are pinned
   because each pill is an anchor the dashed path is drawn to meet. */
.lp-path-pill--1 { left: 156px; top: 167.84px; width: 116px; }  /* Market Insights   */
.lp-path-pill--2 { left: 21px;  top:  59.84px; width: 132px; }  /* Skills Assessment */
.lp-path-pill--3 { left: 136px; top:  12.84px; width: 116px; }  /* Profile Analysis  */

/* ── Responsive ── */
@media (max-width: 1180px) {
  .lp-services { padding: 0 48px 72px; }
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .lp-services { padding: 0 20px 56px; }
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-section-head { padding-top: 40px; margin-bottom: 28px; }
  /* Neither visual may shrink: both illustrations are laid out in absolute
     px from the Figma frame, and overflow:hidden would crop them. */
}

@media (prefers-reduced-motion: reduce) {
  .lp-bento-card { transition: none; }
  .lp-bento-card:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Article cards — Figma V3 (#92:10741).
   Icon, category, title, copy, then a meta pill pinned to the bottom
   so footers align across a row regardless of copy length.
   ══════════════════════════════════════════════════════════════════ */

.lp-article-link { display: block; height: 100%; }

.lp-article-cat {
  display: block;
  margin-top: 2px;
}

.lp-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;      /* pins the row to the card's bottom edge */
  padding-top: 14px;
}

/* Figma EL-0874e62a — blue capsule, 12px label, blurred backdrop */
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(var(--acc-rgb), .10);
  border: 1px solid rgba(var(--acc-rgb), .20);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.4;
  color: var(--acc-t);
  white-space: nowrap;
}

.lp-pill-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: currentColor;
  opacity: .5;
}

/* Views pill — Figma #92:10605 / EL-43ade3e9. Gold twin of .lp-pill, tighter
   left padding because the 16px eye icon carries more weight than the clock.
   Rendered only when the article actually has views (see landing.html macro). */
.lp-pill--views {
  gap: 4px;
  padding: 2px 10px 2px 6px;
  background: rgba(var(--gold-rgb), .10);
  border-color: rgba(var(--gold-rgb), .20);
  color: var(--gold);
}

.lp-pill--views .lp-pill-icon {
  width: 16px;
  height: 16px;
}

/* Screen-reader-only label — keeps "views" audible next to the bare number
   without printing it in the pill. */
.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Category tab row — Figma #92:10560 ────────────────────────────
   Radio inputs + labels: a native, keyboard-operable filter with no
   JavaScript. Selection drives the grid via :has() on the wrapper.  */
.lp-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.lp-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lp-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: var(--bg);
  border: 1px solid var(--hair);
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--t2);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.lp-tab:hover { border-color: var(--bd2); color: var(--t1); }

.lp-tab-input:checked + .lp-tab {
  background: rgba(var(--gold-rgb), .15);
  border-color: var(--gold);
  font-weight: 700;
  color: var(--t0);
}

.lp-tab-input:focus-visible + .lp-tab {
  outline: 2px solid var(--acc-t);
  outline-offset: 2px;
}

/* Figma #92:10563 — a 1px × 18px rule between the first and second pill */
.lp-tabs-sep {
  display: flex;
  align-items: center;
  padding: 0 3px;
  align-self: stretch;
}

.lp-tabs-sep::before {
  content: "";
  display: block;
  width: 1px;
  height: 18px;
  background: var(--hair-s);
}

/* Figma EL-bf4f4941 — full-width rule under the tab row */
.lp-tabs-rule {
  height: 1px;
  background: var(--hair);
  margin-bottom: 20px;
}

/* Filtering: hide any card whose category is not the checked one. */
.lp-insights-inner:has(#lp-cat-ai:checked)         .lp-article-link:not([data-cat="ai"]),
.lp-insights-inner:has(#lp-cat-hiring:checked)     .lp-article-link:not([data-cat="hiring"]),
.lp-insights-inner:has(#lp-cat-interview:checked)  .lp-article-link:not([data-cat="interview"]),
.lp-insights-inner:has(#lp-cat-resume:checked)     .lp-article-link:not([data-cat="resume"]),
.lp-insights-inner:has(#lp-cat-motivation:checked) .lp-article-link:not([data-cat="motivation"]),
.lp-insights-inner:has(#lp-cat-change:checked)     .lp-article-link:not([data-cat="change"]),
.lp-insights-inner:has(#lp-cat-growth:checked)     .lp-article-link:not([data-cat="growth"]),
.lp-insights-inner:has(#lp-cat-career:checked)     .lp-article-link:not([data-cat="career"]),
.lp-insights-inner:has(#lp-cat-network:checked)    .lp-article-link:not([data-cat="network"]) {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   Tall bento cards — bringing them up to the mockup.
   Earlier pass shipped simplified visuals; these are the missing
   pieces: leading icon, ambient glow, particle field, gradient badge,
   and the cover-letter convergence diagram.
   ══════════════════════════════════════════════════════════════════ */

.lp-bento-head {
  padding: 20px 20px 0;          /* Figma EL-7ecc36aa */
  position: relative;
  z-index: 2;
}

/* The 4px icon offset only exists to make the body gap read as 16px */
.lp-bento-head .lp-bento-icon { margin-bottom: 0; }

/* Ambient bloom — Figma #92:10423 / #92:10496: a 292×162 ellipse at
   (-1, -120.16) blurred 63px at 40%. The card clips it, leaving a wash
   across the top edge exactly as the mockup renders it. */
.lp-bento-card--glow::before,
.lp-bento-card--glow-blue::before {
  content: "";
  position: absolute;
  top: -120.16px;
  left: -1px;
  width: 292px;
  height: 162px;
  border-radius: 50%;
  filter: blur(63.05px);
  opacity: var(--lp-glow-op);
  pointer-events: none;
  z-index: 0;
}

.lp-bento-card--glow::before      { background: rgb(var(--gold-rgb)); }
.lp-bento-card--glow-blue::before { background: rgb(var(--acc-rgb)); }

.lp-bento-card { position: relative; }
.lp-bento-card > * { position: relative; z-index: 1; }

/* ── Resume Tailoring: sparkle field — Figma #92:10473 ── */
/* Figma #131:1477 "BG / Sparkles". The marks themselves are inline SVG in
   the template — 4-point stars can't be drawn with a gradient, and each has
   its own opacity and blur. This just parks the layer in the band's frame
   and hands it a theme-aware colour, since the export is white and white
   disappears on the light theme's ground. */
.lp-particles {
  position: absolute;
  left: 0;
  top: 0;
  width: 291px;
  height: 290px;
  pointer-events: none;
  color: rgb(var(--lp-spark-rgb));
}

/* Figma #92:10448 — a 66.2×65 rounded square at card (21, 344.84) holding
   an inner white disc, with a blurred bloom behind it. It anchors the tail
   of the dashed path, so it is pinned in px in the band's frame; the old
   percentage placement drifted with the box height. */
.lp-path-badge {
  position: absolute;
  left: 21px;
  top: 214.84px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66.2px;
  height: 65px;
  border-radius: 13.48px;
  background: var(--acc-t);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--acc-t);
}

/* the bloom */
.lp-path-badge::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--acc-t) 0%, transparent 70%);
  filter: blur(14px);
  opacity: .7;
  z-index: -1;
}

/* the white disc the glyph sits on */
.lp-path-badge::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--acc-t) 0%, #C5DDF7 18%, #FFF 45%, rgba(255,255,255,0) 94%);
  border: 1.2px solid rgba(255, 255, 255, .5);
}

/* Figma #131:1466 — 28.02 square, centred in the 66.2×65 badge */
.lp-path-badge svg {
  position: relative;
  z-index: 1;
  width: 28.02px;
  height: 28.02px;
}

/* ── Cover Letter AI — Figma #92:10524: a 261.65×97 diagram group
   pinned at card-relative (1.5, 140), with the description pushed to
   the card floor beneath it.                                        */
.lp-clflow {
  position: relative;
  width: 261.65px;
  height: 97px;
  margin: 4px 0 0 -18.5px;       /* body padding 20 → group left 1.5 */
  flex-shrink: 0;
}

.lp-clflow-steps {
  position: absolute;
  inset: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Figma style_6241a8d2 — 12px regular, no border, 38px vertical pitch */
.lp-clflow-steps li {
  position: absolute;
  left: 31.5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  border-radius: 100px;
  background: var(--lp-pill-bg);
  color: var(--t2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Widths are pinned to the export: each elbow starts exactly at its pill's
   right edge, so a pill sized by its text leaves the connector floating. */
.lp-clflow-steps li:nth-child(1) { top:  0; width:  84px; }
.lp-clflow-steps li:nth-child(2) { top: 38px; width: 124px; }
.lp-clflow-steps li:nth-child(3) { top: 76px; width:  91px; }

.lp-clflow-link {
  position: absolute;
  inset: 0;
  width: 261.65px;
  height: 97px;
  color: var(--acc-t);
}

/* Figma #92:10537 — a 42.15×57.1 document, not a 42×42 chip */
.lp-clflow-doc {
  position: absolute;
  left: 219.5px;
  top: 19.52px;
  width: 42.15px;
  height: 57.1px;
  color: var(--gold);
}

.lp-clflow-doc svg { width: 100%; height: 100%; display: block; }

/* Description sits on the card floor, 42px under the diagram */
.lp-bento-card--cl .lp-bento-body { flex: 1; }
.lp-bento-card--cl .lp-bento-desc { margin-top: auto; }

.lp-bento-desc--tight { line-height: 1.3; }   /* Figma style_e7c59ae8 */

/* ══════════════════════════════════════════════════════════════════
   Hero dot field — Figma vector #92:10297.
   1421×376 grid of #4E90D9 dots at 20% opacity, faded outward by a
   radial mask anchored at top-centre (the mockup's radial gradient
   fill runs rgba(78,144,217,1) → rgba(78,144,217,0)).
   ══════════════════════════════════════════════════════════════════ */

/* Figma #131:1305 "Vector" — 1421×376 at page y 82.2, group opacity 20%.
   The export is 4550 individually-drawn dots: a 130 × 35 grid on an 11px
   pitch, r=1, first centre at (1,1). Every dot shares one radial gradient
   — gradientTransform translate(711,0) rotate(90) scale(376,711), i.e. an
   ELLIPSE of 711 × 376 anchored at the field's top centre, #4E90D9 solid
   at the middle out to transparent at the rim. A `circle` falloff (what
   this was) clips the field's corners far too early. */
.lp-hero-dots {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1421px, 100%);
  height: 376px;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
  /* r=1 dot centred in an 11px tile, then shifted so the first lands on 1,1 */
  background-image: radial-gradient(circle, var(--acc-t) 1px, transparent 1.2px);
  background-size: 11px 11px;
  background-position: -4.5px -4.5px;
  -webkit-mask-image: radial-gradient(711px 376px at 50% 0%, #000 0%, transparent 100%);
          mask-image: radial-gradient(711px 376px at 50% 0%, #000 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════
   Theme toggle — Figma #92:10282: a 69×36 pill holding both icons,
   with a filled knob marking the active mode. Replaces the single
   square button that swapped one icon.
   ══════════════════════════════════════════════════════════════════ */

.lp-theme-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 69px;
  height: 36px;
  padding: 4px;
  border-radius: 100px;
  border: 1px solid var(--hair);
  background: none;              /* Figma #92:10282 */
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lp-theme-btn:hover { border-color: var(--acc-rim); background: rgba(var(--acc-rgb), .08); }

.lp-theme-btn:focus-visible {
  outline: 2px solid var(--acc-t);
  outline-offset: 2px;
}

/* The sliding knob sits under whichever icon is active */
.lp-theme-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform var(--transition-base), background var(--transition-base);
}

/* Dark theme → moon is active, knob slides right.
   Light theme → sun is active, knob stays left. */
:root:not([data-theme="light"]) .lp-theme-knob,
[data-theme="dark"] .lp-theme-knob { transform: translateX(31px); }
[data-theme="light"] .lp-theme-knob { transform: translateX(0); background: var(--gold); }

.lp-theme-ico {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--t3);
  transition: color var(--transition-base);
}

/* Scope the default to "not light" — a bare :root also matches the light
   theme and would leave a white moon on a white pill. */
:root:not([data-theme="light"]) .lp-theme-ico--moon,
[data-theme="dark"] .lp-theme-ico--moon { color: #fff; }
[data-theme="light"] .lp-theme-ico--sun  { color: var(--on-gold); }
[data-theme="light"] .lp-theme-ico--moon { color: var(--t3); }

@media (prefers-reduced-motion: reduce) {
  .lp-theme-knob { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Desktop-first responsive step-down. The V2 mockup is 1440-only, so
   these keep the narrower widths from overflowing — nothing more.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .lp-hero     { padding: 80px 48px; }
  .lp-insights { padding: 1px 48px 72px; }
  .lp-founder  { padding: 1px 48px 88px; }
  .lp-footer   { padding: 17px 48px 16px; }
  .lp-founder .lp-section-head { padding-top: 60px; }
  .lp-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-founder-cols { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .lp-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .lp-article-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bento illustration motion
   ──────────────────────────────────────────────────────────────────────────
   Two rules govern everything below.

   1. Never touch `transform` on .lp-jobcard. All three cards share one
      rotate/skew matrix and a test asserts the per-card rules do not
      re-declare it. The independent `translate` property composes *before*
      `transform`, so it animates position without disturbing the shear.
   2. Never scale a sparkle that carries an SVG filter at the element level.
      A filter resolves in its element's own user space; scaling the shape
      there rescales stdDeviation with it, which is exactly how these stars
      turned into smudges once already. Group-level CSS `scale` is safe —
      the filtered result is scaled as a picture, so the blur-to-shape ratio
      is preserved — but the shape itself stays at its authored size.

   Everything animates opacity / translate / scale / color only, so it stays
   on the compositor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── AI Job Matching: the stack cycles, then rests ─────────────────────
   28s: 18s rotating through the three authored slots, then 10s held exactly
   as the mockup draws it. The rest is the point — the design gets to be the
   design most of the time, and the motion reads as an occasional event rather
   than a permanent fidget.

   Slots, from the Figma export:
     back   left 15   top 60.84   opacity .6
     mid    left 53   top 88.12
     front  left 115  top 116.70

   On the 28s timeline: three 6s legs (21.429% each) fill the first 64.286%,
   and each leg is a move followed by a dwell so a card can be read before it
   moves again. From 64.286% to 100% everything holds at its authored slot.

   Three keyframe sets rather than one with delays: back→mid→front is not the
   same journey shape as front→back→mid. `translate` throughout — all three
   cards share one rotate/skew matrix and a test forbids re-declaring it.
   z-index steps at the slot boundaries so the card in front is drawn on top.

   The gold "Top Match" treatment travels with its own card. The three cards
   hold different content — only one has the badge, the 98% and the bars — so
   leaving the gold frame behind would put someone else's score in it. */

@keyframes lp-jc-cycle-back {   /* back → mid → front → back, then rest */
  0%                { translate: 0 0;           z-index: 1; opacity: .6; }
  12.857%, 21.429%  { translate: 38px 27.28px;  z-index: 2; opacity: 1; }
  34.286%, 42.857%  { translate: 100px 55.86px; z-index: 3; opacity: 1; }
  55.714%, 100%     { translate: 0 0;           z-index: 1; opacity: .6; }
}

@keyframes lp-jc-cycle-mid {    /* mid → front → back → mid, then rest */
  0%                { translate: 0 0;            z-index: 2; opacity: 1; }
  12.857%, 21.429%  { translate: 62px 28.58px;   z-index: 3; opacity: 1; }
  34.286%, 42.857%  { translate: -38px -27.28px; z-index: 1; opacity: .6; }
  55.714%, 100%     { translate: 0 0;            z-index: 2; opacity: 1; }
}

@keyframes lp-jc-cycle-front {  /* front → back → mid → front, then rest */
  0%                { translate: 0 0;             z-index: 3; opacity: 1; }
  12.857%, 21.429%  { translate: -100px -55.86px; z-index: 1; opacity: .6; }
  34.286%, 42.857%  { translate: -62px -28.58px;  z-index: 2; opacity: 1; }
  55.714%, 100%     { translate: 0 0;             z-index: 3; opacity: 1; }
}

.lp-jobcard--back  { animation: lp-jc-cycle-back  28s ease-in-out infinite; }
.lp-jobcard--mid   { animation: lp-jc-cycle-mid   28s ease-in-out infinite; }
.lp-jobcard--front { animation: lp-jc-cycle-front 28s ease-in-out infinite; }

/* Opaque backing, faded in while a card holds the front slot.

   The back and mid cards are translucent on purpose — that is the depth cue,
   and it only works while they are behind something. Once a card cycles to
   the front the card behind reads straight through it: "Match Score 87%"
   printed twice, overlapping.

   z-index: -1 is load-bearing, not tidiness. A positioned pseudo-element with
   z-index auto paints in the positioned-descendant layer, ABOVE the parent's
   in-flow content — the first version of this hid the badge, the role, the
   score and every label on the front card, leaving only the salary and the
   bars, which are positioned themselves and so survived. -1 puts the backing
   under the content while still above the card's own background, and it stays
   inside the card because `transform` already makes it a stacking context.

   --jc-solid is the card's own body colour, so the front card keeps its
   neutral tone instead of turning blue. */
.lp-jobcard {
  --jc-solid: rgb(var(--lp-jc-rgb));
}

.lp-jobcard--front {
  --jc-solid: rgb(var(--lp-jc-fg-rgb));
}

@keyframes lp-jc-solidify-back {
  0%, 21.429%      { opacity: 0; }
  34.286%, 42.857% { opacity: 1; }
  55.714%, 100%    { opacity: 0; }
}

@keyframes lp-jc-solidify-mid {
  0%               { opacity: 0; }
  12.857%, 21.429% { opacity: 1; }
  34.286%, 100%    { opacity: 0; }
}

@keyframes lp-jc-solidify-front {
  0%               { opacity: 1; }
  12.857%, 42.857% { opacity: 0; }
  55.714%, 100%    { opacity: 1; }
}

.lp-jobcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--jc-solid);
  pointer-events: none;
  opacity: 0;
}

.lp-jobcard--back::before  { animation: lp-jc-solidify-back  28s ease-in-out infinite; }
.lp-jobcard--mid::before   { animation: lp-jc-solidify-mid   28s ease-in-out infinite; }
.lp-jobcard--front::before { animation: lp-jc-solidify-front 28s ease-in-out infinite; }

/* A brief gold pass as each card reaches the front slot. Silent through the
   10s rest: the mockup has no sweep, and the rest is meant to be the mockup. */
@keyframes lp-jc-scan-back {
  0%, 30%          { opacity: 0; }
  36%, 40%         { opacity: 1; }
  46%, 100%        { opacity: 0; }
}

@keyframes lp-jc-scan-mid {
  0%, 8%           { opacity: 0; }
  14%, 18%         { opacity: 1; }
  24%, 100%        { opacity: 0; }
}

@keyframes lp-jc-scan-front {
  0%, 51%          { opacity: 0; }
  57%, 61%         { opacity: 1; }
  67%, 100%        { opacity: 0; }
}

.lp-jobcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    104.62deg,
    rgba(var(--gold-rgb), .26) 0%,
    rgba(var(--gold-rgb), .05) 45%,
    rgba(var(--gold-rgb), 0) 78%
  );
}

.lp-jobcard--back::after  { animation: lp-jc-scan-back  28s ease-in-out infinite; }
.lp-jobcard--mid::after   { animation: lp-jc-scan-mid   28s ease-in-out infinite; }
.lp-jobcard--front::after { animation: lp-jc-scan-front 28s ease-in-out infinite; }

/* ── Resume Tailoring: the field breathes ───────────────────────────────
   The owner asked for stars that pulse "in different colours". Straight
   through the spectrum would fight a page built on exactly two hues, so the
   travel is inside the palette: accent blue → warm white → a gold ember and
   back. Same liveliness, still the brand. */

/* fill-opacity, NOT opacity. Each mark carries its own authored opacity from
   the Figma export — .12 through .6 — and that spread is what makes the field
   read as hand-placed rather than generated. Animating `opacity` overrides the
   attribute and flattens all twenty to one brightness. `fill-opacity`
   multiplies with it instead, so every mark twinkles around its own level. */
@keyframes lp-spark-twinkle {
  0%, 100% { fill-opacity: .55; scale: 1; }
  50%      { fill-opacity: 1;   scale: 1.35; }
}

@keyframes lp-spark-ember {
  0%, 100% { color: rgb(var(--lp-spark-rgb)); }
  35%      { color: var(--acc-t); }
  70%      { color: var(--gold); }
}

.lp-particles ellipse,
.lp-particles path {
  /* `scale` is the independent property, not a transform function, so the
     authored geometry — and every filter that resolves against it — is
     untouched. */
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-spark-twinkle 3.2s ease-in-out infinite;
}

/* Prime numbers for the delays so the marks never fall into a visible beat.
   nth-child rather than inline style attributes — RULE #5. */
.lp-particles :nth-child(3n)   { animation-duration: 3.9s;  animation-delay: -1.3s; }
.lp-particles :nth-child(3n+1) { animation-duration: 2.8s;  animation-delay: -2.9s; }
.lp-particles :nth-child(5n)   { animation-duration: 5.1s;  animation-delay: -0.7s; }
.lp-particles :nth-child(7n)   { animation-duration: 4.3s;  animation-delay: -3.7s; }

/* Only the three 4-point stars take the colour journey. Twenty colour-cycling
   marks would be noise; three reads as a highlight. */
.lp-particles path {
  animation:
    lp-spark-twinkle 3.8s ease-in-out infinite,
    lp-spark-ember   7s ease-in-out infinite;
}

.lp-particles path:nth-of-type(2) { animation-delay: -2.2s, -3.6s; }
.lp-particles path:nth-of-type(3) { animation-delay: -4.4s, -7.2s; }

/* ── Motion is a preference, not a given ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-jobcard,
  .lp-jobcard::before,
  .lp-jobcard::after,
  .lp-jobcard--front .lp-jobcard-score-value,
  .lp-particles ellipse,
  .lp-particles path {
    animation: none;
  }
  /* Neither overlay may be stranded mid-fade with its animation off: the
     resting state must be exactly the authored Figma stack. */
  .lp-jobcard::after  { opacity: 0; }
  .lp-jobcard::before { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   V2 MOBILE — 375px.  Figma frame "V2 Mobile - 375px" #138:2.
   ──────────────────────────────────────────────────────────────────────────
   THIS BLOCK MUST STAY LAST IN THE FILE.

   The desktop step-downs above (`@media (max-width: 1180px)`) re-declare
   .lp-hero / .lp-insights / .lp-founder / .lp-footer padding at the same
   specificity as the older `@media (max-width: 767px)` block near the top.
   Media queries add no specificity, so source order decides — which is how
   48px desktop side padding was reaching 375px phones and squeezing the
   hero copy into a 279px column. Anything appended after this block will
   win the same way, so append above it, not below.

   Reference geometry (all from the frame, side padding is 16px throughout):

     | Section  | Node     | Padding          | Inner gap |
     |----------|----------|------------------|-----------|
     | Nav      | #138:3   | 16px             | 16        |
     | Hero     | #138:23  | 40px 16px 24px   | 28        |
     | Services | #138:70  | 0 16px 40px      | 20        |
     | Insights | #138:279 | 40px 16px        | 20        |
     | About    | #138:521 | 40px 16px 16px   | 20        |
     | Footer   | #138:561 | 1px 16px 16px    | 20        |
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Nav #138:3 — wordmark left, gold Start Now + hamburger right ── */
  .lp-nav {
    padding: 16px;
    gap: 16px;
  }

  /* The frame's logo group (#138:4) is 81×41.83 — the wordmark alone.
     Neither the 3D cube nor the speed lines appear at this width. */
  .lp-nav-logo {
    width: 81px;
  }

  .ek-logo-cube,
  .ek-logo-lines {
    display: none;
  }

  .ek-wordmark {
    width: 81px;
    min-width: 0;
  }

  /* Not enough bar for the 69px pill — the control moves into the menu. */
  .lp-theme-btn {
    display: none;
  }

  .lp-nav-quote {
    display: none;
  }

  .lp-nav-actions {
    gap: 8px;
  }

  /* Compact gold pair — Book + Start Now. The Figma 128×36 brick
     crowded the 375px bar once Booking joined the row. */
  .lp-nav-actions .btn-primary {
    width: auto;
    min-width: 0;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 7px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: .01em;
  }

  .lp-nav-actions .btn-primary::before {
    display: none;
  }

  .lp-book-nav svg { display: none; }

  .lp-book-label-full { display: none; }
  .lp-book-label-short { display: inline; }

  /* Hamburger #138:593 — 36×36, 8px radius, 1px hairline */
  .lp-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--hair);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .lp-nav-burger:hover { border-color: var(--acc-rim); }

  .lp-nav-burger:focus-visible {
    outline: 2px solid var(--acc-t);
    outline-offset: 2px;
  }

  .lp-nav-burger-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
  }

  .lp-nav-burger-bars i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--acc-t);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .lp-nav-burger.is-open .lp-nav-burger-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .lp-nav-burger.is-open .lp-nav-burger-bars i:nth-child(2) { opacity: 0; }
  .lp-nav-burger.is-open .lp-nav-burger-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Panel the hamburger opens — not in the frame (it draws the closed
     state only), so it borrows the card chrome used everywhere else. */
  .lp-mobile-menu {
    position: fixed;
    top: 74px;
    right: 16px;
    left: 16px;
    z-index: 199;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--sf);
    border: 1px solid var(--hair);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }

  .lp-mobile-menu[hidden] { display: none; }

  .lp-mobile-menu-link {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--t1);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .lp-mobile-menu-link:hover { background: rgba(var(--acc-rgb), .10); }

  .lp-mobile-menu-link:focus-visible {
    outline: 2px solid var(--acc-t);
    outline-offset: -2px;
  }

  .lp-mobile-menu-theme { color: var(--gold); }

  /* Nav is 2px rule + 16 + 41.83 + 16 ≈ 76 */
  .lp-root { padding-top: 76px; }

  /* ── Hero #138:23 ──
     badge —16→ h1 —12→ tagline —20→ buttons.  Every step is a
     margin-bottom on the preceding element, matching the desktop rhythm. */
  .lp-hero {
    padding: 40px 16px 24px;
  }

  .lp-badge { margin-bottom: 16px; }

  /* #138:32 — 40px/600, line-height 1em, title case, centred */
  .lp-headline {
    font-size: 40px;
    /* Same deliberate deviation as the desktop rule above; the wrap is deeper
       here, so the crowding is more visible, not less. */
    line-height: 1.08;
    margin-bottom: 12px;
  }

  /* #138:33 — 17/1.5/300 */
  .lp-tagline {
    font-size: 17px;
    margin-bottom: 20px;
  }

  /* Buttons Container #138:34 — column, stretch, 16px gap.
     Both CTAs go full-bleed inside the 16px gutters. */
  .lp-proof {
    gap: 22px;
    margin-top: 26px;
  }
  .lp-proof-value { font-size: 20px; }

  .lp-cta-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
  }

  .lp-cta {
    width: auto;
    flex: 1 1 0;
    max-width: 168px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
  }

  .lp-cta-icon {
    width: 14px;
    height: 14px;
  }

  /* ── Services #138:70 — 7 stacked cards, not the desktop bento ── */
  .lp-services {
    padding: 0 16px 40px;
    scroll-margin-top: 84px;
  }

  /* Container #138:71: 40px above the content, under a hairline rule */
  .lp-services .lp-section-head {
    padding: 40px 8px 0;
    margin-bottom: 20px;
  }

  /* Content Container #138:80 — single column, 16px gap */
  .lp-bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .lp-bento-stack { gap: 16px; }

  /* ── Section titles #140:814 / #140:798 / #140:822 —
     36px/600/1.2 on mobile, where the desktop clamp bottoms out at 26. ── */
  .lp-section-title {
    font-size: 36px;
    line-height: 1.2;
  }

  /* ── Insights #138:279 ── */
  .lp-insights {
    padding: 40px 16px;
    scroll-margin-top: 84px;
  }

  .lp-insights .lp-section-head {
    padding-top: 0;
    margin-bottom: 20px;
  }

  /* Insights Container #138:318 — cards stack with a 16px gap */
  .lp-article-grid { gap: 16px; }

  /* ── About #138:521 — photo, bio and quote card stack, left aligned ── */
  .lp-founder {
    padding: 40px 16px 16px;
    scroll-margin-top: 84px;
  }

  .lp-founder .lp-section-head {
    padding-top: 0;
    margin-bottom: 20px;
  }

  /* Container #138:530 — column, 16px gap */
  .lp-founder-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    justify-items: start;
  }

  /* The frame is left-aligned throughout; the older mobile block centred
     these, which read as a different design rather than a narrower one. */
  .lp-founder-right,
  .lp-founder .lp-section-heading,
  .lp-founder .lp-features-label {
    text-align: left;
  }

  .lp-founder-tags { justify-content: flex-start; }

  /* Quote card #138:536 — 16px padding, 16px gap, no hanging indent */
  .lp-founder-card {
    padding: 16px;
    gap: 16px;
  }

  .lp-founder-quote {
    padding-left: 0;
    text-align: left;
  }

  /* ── Footer #138:561 — stacked and centred, 20px gap ── */
  .lp-footer {
    padding: 1px 16px 16px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .lp-footer-right { gap: 28px; }
}