/* start.html — mobil-først salgsside (link-in-bio).
 *
 * Siden genbruger css/site.css, så priskort, udtalelser, FAQ og statsbjælke
 * ikke kan divergere fra hovedsiden. Her står kun det, der er specifikt for
 * salgssiden, plus de steder hvor mobil-først-layoutet skal vinde.
 *
 * Knækpunktet er 768px — samme som den oprindelige salgsside — så
 * desktop-adfærden er uændret: tre priskolonner, to udtalelseskolonner og
 * ingen fast CTA-bjælke.
 */

/* Site.css skifter til flere kolonner ved 1000px/900px. Salgssiden skal skifte
 * ved 768px, som den altid har gjort. Samme specificitet, men denne fil
 * indlæses efter, så den vinder. */
/* site.css gør udtalelserne til en vandret scroller på forsiden. Salgssiden
 * er mobil-først og beholder sit stablede layout, derfor display:grid her. */
.plans-grid, .testimonial-grid { display: grid; grid-template-columns: 1fr; margin-inline: 0; padding-inline: 0; }
@media (min-width: 768px) {
  .plans-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .testimonial      { flex: none; }
  .testimonial-img  { aspect-ratio: 3/2; }
}

/* ---------- Topbar ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--space-3) max(var(--space-4), calc((100% - var(--content-max)) / 2));
}
/* Samme vandrette lockup som forsiden, en tak mindre — salgssiden er
 * mobil-først og skal dele rækken med "Hele siden →". */
.top-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.top-avatar { height: 52px; width: auto; flex: none; }
.top-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-black);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-on-dark);
  white-space: nowrap;
}
.top-wordmark small {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: .2em;
  color: var(--slate-light);
}
@media (max-width: 360px) { .top-wordmark small { display: none; } }
.top-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hivis);
  text-decoration: none;
  white-space: nowrap;
}
.top-link:hover { color: var(--hivis-hover); }

/* ---------- Video som facade ----------
 * Stillbillede + afspilningstrekant. YouTube indlæses først når brugeren selv
 * trykker — klikket er samtykket, og derfor er der intet cookiebanner. */
.video-wrap { background: var(--ink); padding: 0 0 var(--space-6); }
@media (min-width: 768px) { .video-wrap { padding: var(--space-8) max(var(--space-6), calc((100% - 900px) / 2)) var(--space-6); } }
.video-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0;
  border: 0;
  background: var(--forest);
  cursor: pointer;
  overflow: hidden;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.45); }
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,31,23,.55), rgba(11,31,23,.10));
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: var(--hivis);
  display: grid;
  place-items: center;
  z-index: 1;
}
/* Trekanten er en ren CSS-form, så der ikke skal indlæses et ikon. */
.video-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 5px;
}
.video-facade:hover .video-play { background: var(--hivis-hover); }
/* Noten SKAL stå før klikket og skal nævne cookies, ikke kun at videoen
 * hentes fra YouTube. Klikket er samtykket, og et samtykke er kun gyldigt
 * hvis det er informeret — derfor er teksten en del af lovligheden, ikke pynt. */
.video-note {
  padding: var(--space-3) max(var(--space-4), calc((100% - var(--content-max)) / 2)) 0;
  line-height: 1.6;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
/* Når scriptet har indsat iframen, skal feltet holde samme format. */
.video-wrap iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* ---------- Pitch ---------- */
.pitch {
  background: var(--ink);
  color: var(--fg-on-dark);
  padding: var(--space-12) max(var(--space-4), calc((100% - var(--content-max)) / 2)) var(--space-8);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hivis);
  margin-bottom: var(--space-4);
}
.pitch h1 { margin: 0; font-size: clamp(46px, 12vw, 76px); }
.pitch h1 .accent { display: block; color: var(--hivis); }
.pitch p { margin-top: var(--space-6); font-size: var(--text-lead); line-height: 1.5; color: var(--fg-on-dark); }
@media (min-width: 768px) { .pitch { padding: var(--space-12) max(var(--space-6), calc((100% - 900px) / 2)) var(--space-8); } }

/* ---------- Udtalelser: stjerner ----------
 * Kun på salgssiden. Hovedsiden bruger datatal i stedet. */
.testimonial { flex: none; }
.stars { display: block; font-size: 15px; letter-spacing: .22em; color: var(--accent); }

/* ---------- Knapper: fuld bredde på en mobilside ---------- */
.coaching-card .btn-primary, #waitlistToggle { width: 100%; }

/* ---------- Sticky CTA ----------
 * Hovedsidens variant har en tekstdel ved siden af knappen. Her er der kun
 * knappen, og den skal fylde bjælken. */
.sticky-cta {
  display: block;
  transform: none;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
}
.sticky-cta .btn-primary { width: 100%; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Footer ----------
 * Hovedsidens footer er bygget om link-knapper. Her er den tre linjer tekst. */
footer.on-ink {
  padding: var(--space-12) max(var(--space-4), calc((100% - var(--content-max)) / 2)) calc(var(--space-12) + 88px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-light);
}

@media (min-width: 768px) {
  footer.on-ink { padding-bottom: var(--space-12); }
}