/* LazyFit page stylesheet — leans on /styles.css for layout; swaps the studio cyan for the
   LazyFit lime-on-ink palette. Calm, not loud: one accent, generous space. */

body.lf-page {
  --lf-ink: #0f1115;
  --lf-surface: #16191f;
  --lf-line: #23272f;
  --lf-lime: #c8f04b;
  --lf-orange: #ff6b3d;
  --lf-blue: #7dd3fc;
  --lf-muted: #9aa3b2;
  background: var(--lf-ink);
}

/* Header & footer accents */
.lf-page .site-header,
.lf-page footer { border-color: var(--lf-line); }
.lf-page .brand-mark { border-color: var(--lf-lime); box-shadow: inset -4px 0 0 var(--lf-orange); }
.lf-page nav a:hover,
.lf-page nav a:focus-visible,
.lf-page footer a:hover,
.lf-page footer a:focus-visible { color: var(--lf-lime); }

main { padding-bottom: 80px; }
.lf-page h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; }

/* HERO */
.lf-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 80px 0 64px;
}
.lf-eyebrow {
  margin: 0 0 18px;
  color: var(--lf-lime);
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lf-hero h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.04em;
  margin: 0 0 24px;
}
.lf-hero h1 span { color: var(--lf-lime); }
.lf-lead {
  max-width: 580px;
  margin: 0 0 26px;
  color: var(--lf-muted);
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.55;
}
.lf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--lf-muted);
  font-size: 14px;
}
.lf-pill {
  background: var(--lf-lime);
  color: var(--lf-ink);
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 750;
  font-size: 13px;
}
.lf-store {
  display: inline-block;
  margin: 0;
  padding: 10px 18px;
  border: 1px dashed var(--lf-line);
  border-radius: 999px;
  color: var(--lf-muted);
  font-size: 14px;
  font-weight: 600;
}

.lf-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.lf-phone {
  width: min(100%, 280px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
  position: relative;
  z-index: 1;
}
.lf-svg-label { fill: var(--lf-muted); font: 800 12px ui-monospace, monospace; letter-spacing: .14em; }
.lf-svg-count { fill: #f7f9fc; font: 800 64px Inter, ui-sans-serif, -apple-system, sans-serif; letter-spacing: -.04em; }
.lf-svg-sub { fill: var(--lf-muted); font: 500 14px Inter, ui-sans-serif, -apple-system, sans-serif; }
.lf-svg-btn { fill: var(--lf-ink); font: 750 17px Inter, ui-sans-serif, -apple-system, sans-serif; }
.lf-ring { animation: lf-breathe 4s ease-in-out infinite; }

.lf-dot {
  position: absolute;
  border-radius: 50%;
  animation: lf-float 7s ease-in-out infinite;
}
.lf-dot--orange { width: 46px; height: 46px; background: var(--lf-orange); top: 12%; left: 8%; }
.lf-dot--blue { width: 28px; height: 28px; background: var(--lf-blue); bottom: 16%; right: 10%; animation-delay: 1.5s; }

@keyframes lf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes lf-breathe {
  0%, 100% { stroke-dashoffset: 190; }
  50% { stroke-dashoffset: 150; }
}

/* HOW IT WORKS */
.lf-how { padding: 56px 0 72px; border-top: 1px solid var(--lf-line); }
.lf-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lf-step h3 { margin: 10px 0 8px; font-size: 19px; letter-spacing: -.02em; }
.lf-step p { margin: 0; color: var(--lf-muted); font-size: 15px; }
.lf-step-num { color: var(--lf-lime); font: 800 11px/1 ui-monospace, monospace; letter-spacing: .16em; }
.lf-where { margin: 36px 0 0; color: var(--lf-blue); font-weight: 600; }

/* MOVES */
.lf-moves { padding: 64px 0 72px; border-top: 1px solid var(--lf-line); }
.lf-section-desc { margin: 0 0 28px; color: var(--lf-muted); }
.lf-move-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lf-move-list li {
  padding: 10px 18px;
  border: 1px solid var(--lf-line);
  border-radius: 999px;
  background: var(--lf-surface);
  font-weight: 650;
  font-size: 15px;
}
.lf-move-list li:nth-child(3n + 1) { border-color: rgba(200, 240, 75, .45); }
.lf-move-list li:nth-child(3n + 2) { border-color: rgba(255, 107, 61, .45); }
.lf-move-list li:nth-child(3n) { border-color: rgba(125, 211, 252, .45); }

/* FEATURES */
.lf-features { padding: 64px 0 80px; border-top: 1px solid var(--lf-line); }
.lf-features h2 { margin-bottom: 28px; }
.lf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.lf-card {
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: 18px;
  padding: 22px 22px 24px;
  transition: border-color .15s ease;
}
.lf-card:hover { border-color: rgba(200, 240, 75, .5); }
.lf-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.lf-card p { margin: 0; color: var(--lf-muted); font-size: 15px; }

/* PRIVACY */
.lf-privacy { border-top: 1px solid var(--lf-line); padding-top: 48px; max-width: 720px; }
.lf-privacy p { color: var(--lf-muted); margin: 0 0 14px; }
.lf-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; }
.lf-links a { color: var(--lf-lime); text-decoration: none; font-size: 14px; font-weight: 600; }
.lf-links a:hover, .lf-links a:focus-visible { text-decoration: underline; }

/* Policy page on this palette */
.lf-page .policy .eyebrow,
.lf-page .policy a { color: var(--lf-lime); }

/* RESPONSIVE */
@media (max-width: 860px) {
  .lf-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .lf-hero-visual { order: -1; }
  .lf-phone { width: min(70%, 240px); }
  .lf-how-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-dot, .lf-ring { animation: none; }
  .lf-card { transition: none; }
}