/*
 * Occupemo Web — Landing page (index.html only)
 * Supplements styles.css + marketing.css (load both first).
 *
 * Design POV: the page is colored the way a real Occupemo schedule is colored.
 * The category palette (academic/sports/art/social/entertainment) is the
 * accent system — not decoration, the product's own visual language. Purple
 * stays the brand/CTA color. The hero's signature is a living time-blocked
 * day: the product's soul, not a stock illustration.
 *
 * Type: Bricolage Grotesque (display) + Manrope (body), inherited from
 * styles.css. Time labels use tabular numbers, matching the app's timers.
 */

/* ============================================================
   Landing-local tokens
   ============================================================ */
.lp {
  --lp-maxw: 1140px;
  --lp-gutter: clamp(20px, 5vw, 56px);
  --lp-section-y: clamp(64px, 9vw, 120px);
  /* soft category tints for surfaces (the schedule's left rails stay vivid) */
  --tint-academic: color-mix(in srgb, var(--color-cat-academic) 12%, var(--color-bg));
  --tint-sports: color-mix(in srgb, var(--color-cat-sports) 13%, var(--color-bg));
  --tint-art: color-mix(in srgb, var(--color-cat-art) 14%, var(--color-bg));
  --tint-social: color-mix(in srgb, var(--color-cat-social) 13%, var(--color-bg));
  --tint-ent: color-mix(in srgb, var(--color-cat-entertainment) 13%, var(--color-bg));
}

.lp-container {
  max-width: var(--lp-maxw);
  margin: 0 auto;
  padding-inline: var(--lp-gutter);
}

/* Eyebrow / kicker — a structural label, set in the display face */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.lp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}

.lp-accent {
  /* accent word in the headline — flat, clipped to the text */
  background: var(--color-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Hero — editorial asymmetric: copy + living schedule
   ============================================================ */
.lp-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(48px, 8vw, 96px) var(--lp-section-y);
}

/* (The ambient hero glow ::before was removed in the Circled Day rebrand —
   flat print, no radial washes.) */

.lp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.lp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 560px;
}

.lp-hero__headline {
  font-size: clamp(38px, 6.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--color-text-primary);
  font-variation-settings: 'wght' 800, 'wdth' 96, 'opsz' 48;
}

.lp-hero__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 480px;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.lp-btn-lg {
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-lg);
}

.lp-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  padding: 8px 4px;
  border-radius: var(--radius-sm);
}
.lp-link-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform var(--motion-fast) var(--ease-out); }
.lp-link-cta:hover { text-decoration: none; }
.lp-link-cta:hover svg { transform: translateX(3px); }

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.lp-trust li { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.lp-trust svg { width: 15px; height: 15px; stroke: var(--color-success); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Signature: the living time-blocked day
   ============================================================ */
.lp-day-stage {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1600px;
}

.lp-day {
  width: min(420px, 100%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-floating);
  padding: var(--space-lg);
  transform: rotate(0.6deg);
  animation: lp-float 9s var(--ease-in-out) infinite;
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0) rotate(0.6deg); }
  50% { transform: translateY(-10px) rotate(-0.4deg); }
}

.lp-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 6px var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}
.lp-day__title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.lp-day__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.lp-block {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 6px;
  border-radius: var(--radius-md);
  position: relative;
}
.lp-block__time {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: 1px;
}
.lp-block__body {
  border-left: 3px solid var(--cat, var(--color-cat-unknown));
  padding-left: 11px;
}
.lp-block__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.lp-block__tag {
  /* muted, not the raw category color — green/orange/pink at 11.5px fail AA
     on white. The colored left rail + Now flag carry category identity. */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.lp-block--break .lp-block__name { color: var(--color-text-muted); font-weight: 600; }
.lp-block--break .lp-block__body { border-left-style: dashed; }

/* category colors */
.lp-block.is-academic { --cat: var(--color-cat-academic); }
.lp-block.is-sports   { --cat: var(--color-cat-sports); }
.lp-block.is-art      { --cat: var(--color-cat-art); }
.lp-block.is-social   { --cat: var(--color-cat-social); }
.lp-block.is-ent      { --cat: var(--color-cat-entertainment); }

/* the current ("now") block — filled tint + progress */
.lp-block--now {
  background: color-mix(in srgb, var(--cat) 10%, var(--color-bg));
  padding-block: 11px;
}
.lp-block--now .lp-block__body {
  border-left-width: 3px;
}
.lp-now-flag {
  position: absolute;
  top: -8px;
  left: 40px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--cat);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.lp-progress {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-progress__track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cat) 20%, var(--color-surface));
  overflow: hidden;
}
.lp-progress__fill {
  height: 100%;
  width: 58%;
  border-radius: 3px;
  background: var(--cat);
  animation: lp-fill 2.4s var(--ease-out) both;
}
@keyframes lp-fill { from { width: 0; } to { width: 58%; } }
.lp-progress__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.lp-section { padding-block: var(--lp-section-y); }
.lp-section--tint { background: var(--color-surface); }

.lp-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head__title {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--color-text-primary);
}
.lp-head__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
}

/* ============================================================
   Techniques — real rhythm bars
   ============================================================ */
.lp-rhythms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.lp-rhythm {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.lp-rhythm:hover { transform: translateY(-3px); box-shadow: var(--shadow-floating); }
.lp-section--tint .lp-rhythm { background: var(--color-bg); }
.lp-rhythm__name {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.lp-rhythm__desc { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.lp-bar {
  display: flex;
  gap: 3px;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.lp-bar span { display: block; height: 100%; }
.lp-bar .focus { background: var(--color-accent); }
.lp-bar .brk { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); }
.lp-rhythm__legend {
  display: flex;
  gap: var(--space-lg);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.lp-rhythm__legend i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.lp-rhythm__legend i::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.lp-rhythm__legend .lg-focus::before { background: var(--color-accent); }
.lp-rhythm__legend .lg-brk::before { background: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface)); }

/* ============================================================
   Occupation-aware highlight (split)
   ============================================================ */
.lp-tuned {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.lp-tuned__list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); }
.lp-tuned__item { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-md); align-items: start; }
.lp-tuned__item svg { width: 24px; height: 24px; stroke: var(--color-accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.lp-tuned__item h3 { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.lp-tuned__item p { font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); margin-top: 2px; }

/* the chronotype card visual */
.lp-tuned__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}
.lp-tuned__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.lp-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent-surface);
  color: var(--color-accent);
}
.lp-curve { display: block; width: 100%; height: auto; color: var(--color-accent); }
/* drive SVG paint via CSS (currentColor) — var() in SVG presentation
   attributes is not honored in Safari, so colors are set here instead */
.lp-curve__line { stroke: currentColor; }
.lp-curve__dot { fill: currentColor; }
.lp-curve__ring { stroke: currentColor; }
.lp-tuned__card-foot { font-size: 13px; color: var(--color-text-muted); margin-top: var(--space-md); line-height: 1.5; }

/* ============================================================
   Feature bento
   ============================================================ */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-lg);
}
.lp-tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.lp-section--tint .lp-tile { background: var(--color-bg); }
.lp-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-floating); }
.lp-tile--wide { grid-column: span 2; }
.lp-tile__title { font-family: 'Bricolage Grotesque','Manrope',sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); }
.lp-tile__desc { font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary); }
.lp-tile__visual { margin-top: auto; }

/* mini Eisenhower matrix */
.lp-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-matrix span {
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: flex-end;
  padding: 6px 8px;
  font-size: 10px; font-weight: 700; color: var(--color-on-accent);
}
.lp-matrix .q1 { background: var(--color-coral); }
.lp-matrix .q2 { background: var(--color-accent); }
.lp-matrix .q3 { background: var(--color-warning); color: color-mix(in srgb, var(--color-warning) 30%, black); }
.lp-matrix .q4 { background: var(--color-cat-unknown); }

/* streak chip */
.lp-streak { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent-surface); color: var(--color-accent); border-radius: var(--radius-full); padding: 8px 14px; font-weight: 800; font-size: 15px; }
.lp-streak svg { width: 18px; height: 18px; fill: var(--color-coral); }
.lp-streak small { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }

/* theme swatches */
.lp-swatches { display: flex; gap: 8px; }
.lp-swatches span { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 8%, transparent); }

/* NL input chip demo */
.lp-nl { display: flex; flex-direction: column; gap: 10px; }
.lp-nl__field { font-size: 13px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 9px 12px; font-variant-numeric: tabular-nums; }
.lp-nl__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-nl__chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); background: var(--tint-academic); color: var(--color-cat-academic); }
.lp-nl__chip.is-sports { background: var(--tint-sports); color: var(--color-cat-sports); }
.lp-nl__chip.is-time { background: var(--color-accent-surface); color: var(--color-accent); }

/* reuse the live-activity mock inside a tile, scaled */
.lp-tile .live-activity { width: 100%; transform: none; animation: none; }
.lp-tile .live-activity:hover { transform: none; }

/* ============================================================
   Free vs Plus teaser
   ============================================================ */
.lp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); max-width: 760px; margin-inline: auto; }
.lp-plan {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xxl);
  padding: var(--space-xl);
  background: var(--color-bg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.lp-plan--plus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-surface); }
.lp-plan__name { font-family: 'Bricolage Grotesque','Manrope',sans-serif; font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.lp-plan__line { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.lp-plan__price { font-size: 14px; font-weight: 700; color: var(--color-accent); }
.lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.lp-plan li { display: flex; gap: 8px; font-size: 13.5px; color: var(--color-text-primary); align-items: flex-start; }
.lp-plan li svg { width: 15px; height: 15px; stroke: var(--color-success); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   Final CTA
   ============================================================ */
.lp-final {
  text-align: center;
  background: var(--gradient-text-safe);
  border-radius: var(--radius-xxl);
  padding: clamp(40px, 6vw, 72px) var(--lp-gutter);
  margin: 0 var(--lp-gutter) var(--lp-section-y);
  max-width: calc(var(--lp-maxw) - 2 * var(--lp-gutter));
  margin-inline: auto;
}
.lp-final h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; color: var(--color-on-gradient); line-height: 1.08; }
.lp-final p { font-size: 16px; color: color-mix(in srgb, var(--color-on-gradient) 88%, transparent); margin: var(--space-md) auto var(--space-xl); max-width: 460px; line-height: 1.55; }
.lp-final .btn { background: var(--color-on-gradient); color: var(--color-accent); padding: 15px 32px; font-size: 16px; font-weight: 800; border-radius: var(--radius-lg); }
.lp-final .btn:hover { opacity: 0.92; }
.lp-final small { display: block; margin-top: var(--space-md); font-size: 13px; color: color-mix(in srgb, var(--color-on-gradient) 80%, transparent); }

/* iOS-soon row under the hero CTAs */
.lp-ios {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.lp-ios .appstore-btn { opacity: 0.92; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 56px); }
  .lp-hero__copy { align-items: center; text-align: center; max-width: 600px; margin-inline: auto; }
  .lp-hero__sub { margin-inline: auto; }
  .lp-cta-row, .lp-trust { justify-content: center; }
  .lp-tuned { grid-template-columns: 1fr; }
  .lp-rhythms { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .lp-bento { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile--wide { grid-column: span 1; }
  .lp-plans { grid-template-columns: 1fr; }
  .lp-head { text-align: center; margin-inline: auto; }
  .lp-day { width: 100%; }
}

/* honor reduced-motion explicitly for the float + fill (the global rule
   collapses durations, but make the intent unambiguous) */
@media (prefers-reduced-motion: reduce) {
  .lp-day { animation: none; transform: rotate(0.4deg); }
  .lp-progress__fill { animation: none; }
}