/* Landing page. Shared base, header, buttons and tariff cards live in public.css. */

/* Hero: headline, the rope, stages and action. */
.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-copy { position: relative; z-index: 2; padding: 54px var(--pad-x); }
.hero h1 { margin-top: 18px; font-size: clamp(100px, 10.8vw, 140px); font-weight: 600; line-height: .98; }
.hero-sub { margin: 25px 0 0; font-size: 20px; line-height: 1.5; }

.hero-stage { position: absolute; inset: 0; }
.hero-thread {
  --knot-from: -.04;
  position: absolute;
  z-index: 1;
  top: calc(410px - 32vw);
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
}
.hero-thread > img { display: block; width: 100%; height: 100%; user-select: none; transition: opacity .3s ease; }
.hero-thread canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .3s ease; }
.hero-thread.is-playing canvas { opacity: 1; }
.hero-thread.is-pending > img { opacity: 0; animation: thread-fallback 0s 2.5s forwards; }
.hero-thread.is-playing > img { visibility: hidden; }
@keyframes thread-fallback { to { opacity: 1; } }

.hero-bottom {
  position: absolute;
  z-index: 3;
  right: var(--pad-x);
  bottom: 32px;
  left: var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 390px) auto;
  align-items: end;
  gap: 24px;
}
.hero-action { grid-column: 1; grid-row: 1; }
.hero-action p { margin: 0; font-size: 16px; line-height: 1.5; }
.hero-action .button { margin-top: 16px; }
.hero-action small { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }
/* Stages light up while the knot travels along the rope. */
.hero-stages {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.hero-stages i { color: var(--red); font-style: normal; }
.js-motion .hero-stages > * { opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .35s ease; }
.js-motion .hero-stages > .is-on { opacity: 1; transform: none; }

/* Sections */
.section { padding: 70px var(--pad-x); border-bottom: 1px solid var(--line); }
.section-title {
  display: grid;
  grid-template-columns: 22% 1fr;
  gap: 40px;
  margin-bottom: 42px;
}
.section-title h2, .chapter-heading h2, .price-teaser h2 {
  margin-top: 15px;
  font-size: clamp(54px, 6vw, 82px);
  line-height: .96;
}
.sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.sequence article { padding-top: 16px; border-top: 1px solid var(--line); }
.number { color: var(--red); font-size: 13px; }
.sequence h3 { margin-top: 18px; font-size: 38px; line-height: 1; }
.sequence p, .chapter-copy, .muted, .faq p { color: var(--muted); font-size: 15px; line-height: 1.6; }

.product-chapter { padding-top: 68px; padding-bottom: 52px; }
.chapter-structure { background: #e8e0d4; }
.chapter-crm { background: #e5dacb; }
.chapter-heading {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 22px 70px;
  align-items: end;
  margin-bottom: 36px;
}
.chapter-copy { max-width: 340px; margin: 0; padding-bottom: 4px; }
.product-shot {
  display: block;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 6px;
  border: 1px solid #d0c8bb;
  background: #faf8f3;
  box-shadow: 0 1px 3px #322d2914;
}
.product-shot img { display: block; width: 100%; height: auto; }

.manifesto { padding: 64px var(--pad-x); background: var(--ink); color: var(--ivory); }
.manifesto .eyebrow { color: #d5ccc0; }
.manifesto h2 { margin-top: 18px; font-size: clamp(55px, 7vw, 98px); line-height: .94; }
.manifesto em { font-style: italic; font-weight: 400; }

.price-teaser { background: #efe9dd; }
.price-heading {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 22px 70px;
  align-items: end;
  margin-bottom: 36px;
}
.price-heading .muted { max-width: 340px; margin: 0; }
/* Two clearly separate offers: the free base and the full package. */
.price-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.price-options .pricing-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.price-card--base { background: var(--ivory); }
.price-card--base .button { margin-top: auto; }
.caption { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.faq { display: grid; grid-template-columns: 35% 1fr; gap: 70px; }
.faq h2 { font-size: clamp(54px, 6vw, 78px); line-height: .95; }
.faq article { padding: 18px 0; border-top: 1px solid var(--line); }
.faq h3 { font-family: var(--font-text); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.faq p { margin: 10px 0 0; font-size: 15px; }

.closing {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding: 64px var(--pad-x);
  background: var(--red);
  color: #fff2e4;
}
.closing h2 { font-size: clamp(55px, 6vw, 84px); line-height: .94; }
.closing .button { flex-shrink: 0; margin: 0; }

/* Footer */
.landing-footer { padding: 52px var(--pad-x) 24px; background: var(--sand); }
.support-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.support-row h2 { margin-top: 15px; font-size: clamp(48px, 5vw, 70px); line-height: .96; }
.support-contact { min-width: 270px; }
.support-contact .button { width: 100%; }
.support-email { display: block; margin-top: 14px; color: var(--muted); font-size: 14px; }
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr .8fr 1.3fr 1fr;
  gap: 40px;
  padding: 34px 0;
}
.operator p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.footer-links {
  display: grid;
  align-content: start;
  gap: 0;
  margin-top: 8px;
}
.footer-links a { display: inline-flex; align-items: center; min-height: 26px; color: var(--muted); font-size: 14px; }
.operator, .footer-col { padding-top: 12px; }
.operator small { color: var(--muted); font-size: 13px; line-height: 1.7; }
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.footer-social:hover, .footer-social:focus-visible { color: var(--ink); }
.footer-end {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.chapter-heading::before {
  content: "";
  grid-column: 1 / -1;
  display: block;
  width: 148px;
  height: 2px;
  background: var(--red);
}

/* Motion: everything above is the final, static state. */
.js-motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity .48s ease, transform .48s ease; }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
/* The red lead-in grows as each chapter enters the viewport. */
.js-motion .chapter-heading::before { width: 48px; transition: width .9s cubic-bezier(.2, .65, .3, 1); }
.js-motion .chapter-heading.is-visible::before { width: 148px; }

@media (max-width: 950px) {
  .hero-bottom { grid-template-columns: minmax(0, 1fr); }
  .hero-stages { grid-column: 1; justify-self: start; }
  .hero-action { grid-row: 2; }
  .chapter-heading { grid-template-columns: 1fr; gap: 20px; }
  .chapter-copy { max-width: 580px; }
}

@media (max-width: 650px) {
  /* Phone: copy, rope and action stack; the rope area takes what is left,
     so the button stays on the first screen. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: max(560px, calc(100vh - 76px));
    min-height: max(560px, calc(100svh - 76px));
  }
  .hero-copy { padding: 35px var(--pad-x) 0; }
  .hero h1 { font-size: clamp(64px, 19.5vw, 76px); line-height: 1.02; }
  .hero-sub { font-size: 16px; }
  .hero-stage { position: relative; inset: auto; flex: 1; min-height: 190px; }
  .hero-thread { --knot-from: .3; top: calc(50% - 258px); left: -230px; width: 700px; }
  .hero-bottom { position: relative; right: auto; bottom: auto; left: auto; gap: 18px; padding: 0 var(--pad-x) 24px; }
  .hero-stages { width: 100%; grid-template-columns: auto auto auto auto auto; justify-content: space-between; gap: 6px; }
  .hero-action p { font-size: 15px; }
  .hero-action .button { width: 100%; margin-top: 14px; }

  .section { padding: 45px var(--pad-x); }
  .section-title, .chapter-heading, .price-heading, .faq { display: block; }
  .price-heading .muted { margin-top: 20px; }
  .price-options { grid-template-columns: 1fr; }
  .section-title { margin-bottom: 30px; }
  .section-title h2, .price-teaser h2 { font-size: 52px; }
  .chapter-heading h2 { font-size: 44px; }
  .chapter-heading::before { margin-bottom: 22px; }
  .sequence { grid-template-columns: 1fr; gap: 26px; }
  .sequence h3 { font-size: 35px; }
  .product-chapter { padding-top: 45px; padding-bottom: 38px; }
  .chapter-heading { margin-bottom: 28px; }
  .chapter-copy { max-width: none; margin-top: 20px; }
  .product-shot { padding: 5px; }
  .manifesto { padding: 48px var(--pad-x); }
  .manifesto h2 { font-size: 57px; }
  .faq h2 { margin-bottom: 28px; font-size: 54px; }
  .closing { display: block; padding: 45px var(--pad-x); }
  .closing h2 { font-size: 55px; }
  .closing .button { width: 100%; margin-top: 28px; }

  .landing-footer { padding: 40px var(--pad-x) 24px; }
  .support-row { display: block; padding-bottom: 30px; }
  .support-row h2 { font-size: 48px; }
  .support-contact { min-width: 0; margin-top: 28px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; }
  .footer-links a { min-height: 35px; }
}

@media (max-width: 650px) and (max-height: 700px) {
  .hero-action p { display: none; }
  .hero-action .button { margin-top: 0; }
  .hero-stage { min-height: 150px; }
}