/* KDP Lab · temporary coming-soon page
   Colors come from the Landing theme block in design/design-tokens.css.
   Landing-only sizes and the cover illustration colors live here. */
:root {
  /* Landing-only sizes */
  --lp-page-max: 1440px;
  --lp-pad-y: 36px;
  --lp-pad-x: 96px;
  --lp-logo-size: 30px;
  --lp-wordmark-size: 22px;
  --lp-h1-size: 56px;
  --lp-lead-size: 19px;
  --lp-lead-max: 600px;
  --lp-hero-gap: 64px;
  --lp-hero-text-gap: 22px;
  --lp-cover-col: 420px;
  --lp-gap-10: 10px;
  --lp-gap-14: 14px;
  --lp-gap-18: 18px;
  --lp-gap-28: 28px;
  --lp-chip-pad-y: 6px;
  --lp-pill-pad-x: 14px;
  --lp-cta-h: 48px;
  --lp-cta-pad-x: 22px;
  --lp-icon: 18px;
  --lp-feature-icon: 20px;
  --lp-status-dot: 8px;

  /* Cover illustrations: same in light and dark */
  --lp-cover-sleep-bg: #2B2350;
  --lp-cover-sleep-ink: #EDE8FF;
  --lp-cover-sleep-moon: #B9A7FF;
  --lp-cover-yoga-bg: #E9E1D3;
  --lp-cover-yoga-ink: #2F4A3A;
  --lp-cover-yoga-sun: #C9824A;
  --lp-cover-budget-bg: #1F2A44;
  --lp-cover-budget-ink: #F4EFE6;
  --lp-cover-budget-bar: #F2B84B;
  --lp-cover-spine: rgba(0, 0, 0, 0.12);
  --lp-cover-edge: rgba(28, 28, 26, 0.18);
  --lp-cover-lift: rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html { background: var(--lp-bg); }

body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--font-ui);
}

a:focus-visible {
  outline: 2px solid var(--lp-focus);
  outline-offset: 2px;
}

.icon { width: var(--lp-icon); height: var(--lp-icon); flex-shrink: 0; }

.page {
  max-width: var(--lp-page-max);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--lp-pad-y) var(--lp-pad-x);
  display: flex;
  flex-direction: column;
}

/* Header */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-gap-10); }   /* 40c: wraps, never squeezes the mark */
.brand-mark { width: var(--lp-logo-size); height: var(--lp-logo-size); flex-shrink: 0; }
.mark-fill { fill: var(--lp-logo); }
.mark-cut { fill: var(--lp-logo-cut); }
.mark-line { stroke: var(--lp-logo); }
.wordmark { font-size: var(--lp-wordmark-size); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.wordmark-niche { color: var(--lp-heading); }
.wordmark-ink { color: var(--lp-accent); margin-left: var(--wordmark-gap); }

.social { display: flex; gap: var(--lp-gap-10); }
.pill {
  height: var(--control-h);
  min-width: var(--control-h);
  padding: 0 var(--lp-pill-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-pill);
  color: var(--lp-text);
  text-decoration: none;
  font-size: var(--text-md);
}

/* Hero */
.hero {
  flex-grow: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lp-cover-col);
  gap: var(--lp-hero-gap);
  align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: var(--lp-hero-text-gap); }

.status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--lp-chip-pad-y) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--lp-chip);
  color: var(--lp-heading);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.status-dot {
  width: var(--lp-status-dot);
  height: var(--lp-status-dot);
  border-radius: 50%;
  background: var(--lp-accent);
}

h1 {
  margin: 0;
  font-size: var(--lp-h1-size);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lp-heading);
}

.lead {
  margin: 0;
  max-width: var(--lp-lead-max);
  font-size: var(--lp-lead-size);
  line-height: 1.6;
  color: var(--lp-text-2);
}

.cta-row { display: flex; align-items: center; gap: var(--lp-gap-14); margin-top: var(--space-1); }
.cta {
  height: var(--lp-cta-h);
  padding: 0 var(--lp-cta-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-gap-10);
  border-radius: var(--radius-lg);
  background: var(--lp-cta-bg);
  color: var(--lp-cta-text);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 600;
}
.cta-note { font-size: var(--text-md); color: var(--lp-text-2); }

/* Decorative covers */
.covers { display: flex; justify-content: center; }
.covers-stage { position: relative; width: 360px; height: 300px; }
.cover-slot { position: absolute; }
.cover-slot-left { left: 0; top: 60px; transform: rotate(-8deg); }
.cover-slot-center { left: 120px; top: 0; z-index: 2; box-shadow: 0 18px 40px var(--lp-cover-lift); }
.cover-slot-right { left: 240px; top: 60px; transform: rotate(8deg); }

.cover {
  position: relative;
  width: 120px;
  height: 180px;
  overflow: hidden;
  border-radius: 3px 5px 5px 3px;
  box-shadow: inset 3px 0 0 var(--lp-cover-spine), 0 1px 2px var(--lp-cover-edge);
  font-family: var(--font-ui);
}
.cover > div { position: absolute; }
.cover-title { left: 11px; top: 13px; right: 10px; font-size: 17px; font-weight: 700; line-height: 1.02; letter-spacing: 0.02em; }
.cover-sub { left: 11px; top: 52px; right: 10px; font-size: 8px; line-height: 1.2; }
.cover-author { left: 11px; bottom: 11px; font-size: 8px; font-weight: 600; letter-spacing: 0.12em; }

.cover-large { width: 134px; height: 201px; }
.cover-large .cover-title { left: 13px; top: 14px; right: 11px; font-size: 19px; }
.cover-large .cover-sub { left: 13px; top: 58px; right: 11px; font-size: 9px; }
.cover-large .cover-author { left: 13px; bottom: 13px; font-size: 9px; }

.cover-sleep { background: var(--lp-cover-sleep-bg); color: var(--lp-cover-sleep-ink); }
.sleep-moon {
  right: 15px; top: 70px; width: 33px; height: 33px; border-radius: 50%;
  box-shadow: inset -9px -3px 0 0 var(--lp-cover-sleep-moon);
}

.cover-yoga { background: var(--lp-cover-yoga-bg); color: var(--lp-cover-yoga-ink); }
.yoga-sun { right: 14px; top: 81px; width: 43px; height: 43px; border-radius: 50%; background: var(--lp-cover-yoga-sun); }

.cover-budget { background: var(--lp-cover-budget-bg); color: var(--lp-cover-budget-ink); }
.budget-bar { bottom: 39px; width: 11px; background: var(--lp-cover-budget-bar); }
.budget-bar-1 { left: 13px; height: 18px; }
.budget-bar-2 { left: 31px; height: 28px; }
.budget-bar-3 { left: 49px; height: 39px; }
.budget-bar-4 { left: 67px; height: 52px; }

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lp-gap-28);
  padding: var(--lp-gap-28) 0 var(--space-8);
}
.feature { display: flex; gap: var(--lp-gap-14); align-items: flex-start; }
.feature-icon {
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--lp-chip);
  color: var(--lp-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon svg { width: var(--lp-feature-icon); height: var(--lp-feature-icon); }
.feature-text { display: flex; flex-direction: column; gap: var(--space-1); }
.feature-title { font-size: var(--text-lg); font-weight: 600; color: var(--lp-heading); }
.feature-body { font-size: var(--text-base); line-height: 1.5; color: var(--lp-text-2); }

/* Footer */
.foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--lp-border);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--lp-text-2);
}

/* Narrow desktop: tighten so the two-column hero still fits */
@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --lp-pad-x: 48px;
    --lp-hero-gap: 40px;
    --lp-cover-col: 360px;
    --lp-h1-size: 46px;
  }
}

/* Mobile */
@media (max-width: 900px) {
  :root {
    --lp-pad-y: 24px;
    --lp-pad-x: 22px;
    --lp-logo-size: 28px;
    --lp-wordmark-size: 21px;
    --lp-h1-size: 36px;
    --lp-lead-size: 17px;
  }
  .page { gap: var(--lp-gap-28); }
  .pill { padding: 0; }
  .pill-label { display: none; }

  .hero { flex-grow: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--lp-gap-18); }
  .hero-text { gap: var(--lp-gap-18); }
  h1 { line-height: 1.12; letter-spacing: 0; }
  .h1-break { display: none; }
  .lead { max-width: none; }
  .cta-row { margin-top: 0; }
  .cta { flex: 1; }
  .cta-note { display: none; }

  .covers { padding: var(--space-2) 0; }
  .covers-stage { zoom: 0.8; }

  .features { grid-template-columns: 1fr; gap: var(--space-5); padding: 0; }
  .foot { flex-direction: column; gap: var(--space-2); }
}