/* WilderBody myyntisivu – sivukohtaiset tyylit.
   Kaikki värit, fontit, välit ja varjot tulevat Morning Light -design-systemin
   tokeneista (_ds/.../tokens/*.css). Tässä tiedostossa on vain sivun rakenne. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  overflow-x: clip;
}

a {
  color: var(--color-text-link);
  text-decoration-color: var(--color-sage-500);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-text-link-hover); }

img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--size-content-max); margin: 0 auto; }
.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 880px; width: 100%; }

.section { padding: clamp(72px, 10vw, 128px) 24px; }
.section--surface {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}
.section--sunbeam { background: var(--gradient-sunbeam); }
.section--brand { background: var(--color-green-500); color: var(--color-neutral-50); }

.stack { display: flex; flex-direction: column; }
.stack > * { min-width: 0; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-section { gap: clamp(40px, 5vw, 64px); }
.gap-section-sm { gap: clamp(40px, 5vw, 56px); }

/* kaksi palstaa, pinoutuu mobiilissa */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--400 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.split--340 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px 48px;
  align-items: end;
}
.split--faq {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.split > * { min-width: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.cards--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

/* ---------- Typografia ---------- */
.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-green-600);
  font-weight: var(--font-weight-medium);
}
.caption {
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.caption--tight { letter-spacing: 0.1em; }

.h1 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(36px, 5.2vw, 61px);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: pretty;
}
.h1 em { font-style: normal; color: var(--color-green-500); }

.h2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(30px, 4vw, 48.8px);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: pretty;
}
.h2--md { font-size: clamp(30px, 4vw, 44px); }
.h2--cta { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; }

.h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1.2;
}

.statement {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-700);
  line-height: 1.4;
  text-wrap: pretty;
}
.statement--hero { font-size: clamp(19px, 1.8vw, 22px); }
.statement--lg { font-size: clamp(22px, 2.4vw, 26px); }

.lead { font-size: 20px; line-height: 1.7; color: var(--color-neutral-700); text-wrap: pretty; }
.body-lg { font-size: 18px; line-height: 1.7; color: var(--color-neutral-700); text-wrap: pretty; }
.body-md { font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); text-wrap: pretty; }
.body { font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); text-wrap: pretty; }
.body-sm { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }
.small { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); text-wrap: pretty; }
.note { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.muted { color: var(--color-text-secondary); }
.strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* ---------- Painike (Morning Light Button) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-ease-standard),
              box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}
.btn--primary {
  background: var(--color-amber-500);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-cta-glow);
}
.btn--primary:hover { background: var(--color-amber-600); color: var(--color-text-on-accent); }
.btn--primary:active { background: var(--color-amber-700); }
.btn--secondary {
  background: var(--color-green-500);
  color: var(--color-text-on-brand);
}
.btn--secondary:hover { background: var(--color-green-600); color: var(--color-text-on-brand); }
.btn--secondary:active { background: var(--color-green-700); }
.btn--sm { height: 32px; padding: 0 14px; font-size: var(--font-size-sm); gap: 6px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: var(--font-size-md); gap: 10px; }
.btn--block { width: 100%; padding-inline: 16px; font-size: clamp(17px, 4.6vw, 20px); }
.self-start { align-self: flex-start; }

/* ---------- Navigaatio ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 251, 245, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(222, 222, 216, 0.6);
}
.nav__inner {
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.nav__brand img { width: 36px; height: 36px; }
.nav__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 8vw, 96px) 24px clamp(56px, 8vw, 96px); }
.hero__copy { max-width: 560px; }
.hero__body { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--color-neutral-700); text-wrap: pretty; }
.hero__meta { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.hero__price { color: var(--color-green-700); font-weight: var(--font-weight-bold); }
.hero__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-sage-100);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  margin: 0 auto;
}

/* ---------- Kuvat ---------- */
.photo { overflow: hidden; background: var(--color-sage-100); border-radius: 18px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--neutral { background: var(--color-neutral-100); }
.photo--lg { border-radius: var(--radius-lg); }
.pos-15 { object-position: 50% 15%; }
.pos-20 { object-position: 50% 20%; }
.pos-30 { object-position: 50% 30%; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- Oivallus ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: 17px;
}

/* ---------- Kortit ---------- */
.card {
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card--page { background: var(--color-bg-page); }
.card--surface { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
.card--amber { background: var(--color-amber-50); border: 2px solid var(--color-amber-300); }
.card--green { background: var(--color-green-50); border: 1px solid var(--color-green-200); }
.card--gap-14 { gap: 14px; }
.card--gap-16 { gap: 16px; }
.card--pad-32 { padding: 32px; }
.card--pad-24 { padding: 24px; }
.card--pad-fluid { padding: clamp(24px, 3vw, 36px); }
.card--shadow { box-shadow: var(--shadow-sm); }
.card__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-green-700);
}
.card__sub { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }

.phase__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.phase__label {
  white-space: nowrap;
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}
.phase__label--amber { color: var(--color-amber-800); }
.phase__label--sage { color: var(--color-sage-700); }
.phase__label--green { color: var(--color-green-600); }
.phase__label--green-dark { color: var(--color-green-700); }
.phase__tag {
  white-space: nowrap;
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-amber-500);
  color: var(--color-neutral-900);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.phase__note { font-size: 15px; line-height: 1.5; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.pull-quote {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ---------- Asiakastarinat ---------- */
.quote-xl {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: pretty;
}
.quote-lg {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quote-md {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quote-card-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quote-body { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  background: var(--color-green-50);
  color: var(--color-green-700);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 15px;
}
.followup {
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.5vw, 24px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.followup .photo { max-width: 320px; width: 100%; }
.section--tail { padding-top: 0; }

.callout {
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--color-green-50);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callout--glass { background: rgba(255, 255, 255, 0.6); }
.callout__text { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }

/* ---------- Listat ---------- */
.dash-list { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; }
.dash-list--lg { gap: 12px; font-size: 17px; }
.dash-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.dash-list li::before { content: "—"; color: var(--color-green-500); font-weight: var(--font-weight-bold); }
.dash-list--muted { color: var(--color-neutral-700); }
.dash-list--muted li::before { color: var(--color-neutral-400); }

.who__title { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); font-size: 22px; }
.who__title--yes { color: var(--color-green-700); }
.who__title--no { color: var(--color-neutral-700); }
.photo--framed { max-width: 460px; width: 100%; margin: 0 auto; box-shadow: var(--shadow-md); }

/* ---------- Ilmoittaudu / hinnoittelu ---------- */
#ilmoittaudu { scroll-margin-top: 72px; }
.pricing__intro { text-align: center; align-items: center; }
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  align-items: stretch;
  padding-top: 8px;
}
.plan {
  position: relative;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan--featured {
  background: var(--color-bg-surface);
  border: 2px solid var(--color-amber-500);
  padding: clamp(28px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-md), var(--shadow-cta-glow);
}
.plan--alt {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border-default);
  padding: clamp(24px, 3vw, 36px);
}
.plan__badge,
.card__badge {
  position: absolute;
  top: -14px;
  left: 24px;
  white-space: nowrap;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-amber-500);
  color: var(--color-neutral-900);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: var(--font-weight-medium);
}
.plan__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-green-700);
}
.plan__title--alt { font-size: 22px; color: var(--color-neutral-800); }
.price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-300);
}
.price--alt { padding: 16px 18px; background: var(--color-bg-page); border-color: var(--color-border-default); }
.price__label {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-800);
}
.price--alt .price__label { color: var(--color-text-secondary); }
.price__value {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(40px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-green-700);
}
.price--alt .price__value {
  font-weight: var(--font-weight-bold);
  font-size: clamp(30px, 3.2vw, 38px);
  color: var(--color-neutral-800);
}
.price__sub { font-size: 14px; color: var(--color-neutral-700); }
.price--alt .price__sub { color: var(--color-text-secondary); }
.plan .btn { margin-top: auto; }

.pricing__after { text-align: center; font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

.longer {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.longer__title { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); font-size: 22px; line-height: 1.25; }

.dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
}
.date__label {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.date__value { font-weight: var(--font-weight-semibold); font-size: 16px; }

.guarantee {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-green-200);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px 40px;
}
.guarantee__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-green-700);
}
.num-list { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; counter-reset: step; }
.num-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.num-list li::before {
  counter-increment: step;
  content: counter(step);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-green-50);
  color: var(--color-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-size: 13px;
}

/* ---------- FAQ ---------- */
.faq__group { display: flex; flex-direction: column; }
.faq__group-title { padding-bottom: 8px; border-bottom: 1px solid var(--color-border-strong); }
.faq__item { border-bottom: 1px solid var(--color-border-default); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: 18px;
  line-height: 1.35;
  color: var(--color-text-primary);
  min-height: 44px;
}
.faq__q > span:first-child { flex: 1 1 auto; min-width: 0; }
.faq__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-green-600);
  font-weight: var(--font-weight-regular);
}
.faq__a {
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-wrap: pretty;
}
.faq__a[hidden] { display: none; }

/* ---------- Loppu-CTA ---------- */
.final { padding: clamp(80px, 12vw, 144px) 24px; }
.final__inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.final__lead { font-size: 20px; line-height: 1.7; color: var(--color-neutral-50); text-wrap: pretty; max-width: 620px; }
.final__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(34px, 5vw, 61px);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-neutral-50);
  text-wrap: pretty;
}
.final__sign { font-family: var(--font-family-display); font-size: 18px; color: var(--color-sage-100); }
.final__offer { font-size: 15px; color: var(--color-sage-100); }
.final__quote { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-50); text-wrap: pretty; }
.final__quote span { color: var(--color-sage-100); }
.final .btn { margin-top: 8px; }

/* ---------- Tervetulosivu (/tervetuloa) ---------- */
.welcome__hero { text-align: center; align-items: center; }
.welcome__hero .hero__copy { max-width: 600px; }
.card--featured {
  position: relative;
  border: 2px solid var(--color-amber-500);
  box-shadow: var(--shadow-md), var(--shadow-cta-glow);
}
.card__heading { color: var(--color-green-700); font-size: clamp(22px, 2.4vw, 26px); }
.statement--xl {
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
}
.dates--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dates--two .date { background: var(--color-bg-page); border: 1px solid var(--color-border-default); }
.welcome__sign { color: var(--color-green-700); font-size: 20px; }
.welcome__final { padding: clamp(64px, 9vw, 112px) 24px; }
.final__title--sm { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }

/* ---------- Footer ---------- */
.footer {
  padding: 32px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.footer > * { white-space: nowrap; }