/* Vibe Studio Marketing — Google Ads management service — vibestudiomarketing.com
   No web fonts, no analytics. Two external requests exist and are deliberate. book.html loads
   Calendly's inline widget from assets.calendly.com, which the booking calendar requires.
   All pages load the Google tag for conversion measurement. The tag loads on every page view,
   and Google consent mode v2 sets ad_storage, ad_user_data, ad_personalization and
   analytics_storage to denied before the tag script is inserted, so no advertising cookie is
   written until a visitor accepts. js/consent.js holds that sequence.
   Draft 2026-09-08. Comment corrected 2026-09-18. */

:root {
  /* Vibe Studio Marketing palette on a white ground.
     Ink #0a0a0a is the near-black carried by the brand's own assets (favicon.svg,
     logo-lockup-cream.svg, theme-color). Accent #DC4850 measured at 200dpi off the
     source brand pages the palette was derived from: hue 357, the crimson used for the
     display emphasis line and the section rule marks. Both values are set out in
     adagency/brandbook-vibestudiomarketing.pdf, which is the reference from 2026-09-18.
     Neutrals are biased warm toward the accent rather than left as pure grey.
     White ground retained per Howard 2026-09-08. */
  --ink:        #0a0a0a;
  --ink-soft:   #5b5257;
  --ink-faint:  #7a6f75;
  --rule:       #eae4e5;
  --page:       #ffffff;
  --panel:      #f7f4f4;
  --accent:     #c4303c;   /* links, buttons: 5.48:1 on white, and white on it */
  --accent-ink: #a41e30;   /* hover, pressed */
  --accent-mark:#dc4850;   /* the brand crimson itself: rule marks and display emphasis only */
  --accent-pale:#fceff0;
  --warn:       #8a5a00;
  --warn-pale:  #fff6e0;
  --measure:    38rem;
  --wide:       64rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- draft banner: DELETE BEFORE PUBLISH ---------- */
.draft {
  background: var(--warn-pale);
  color: var(--warn);
  border-bottom: 1px solid #efd9a6;
  font-size: 0.8125rem;
  padding: 0.6rem 1.25rem;
  text-align: center;
  letter-spacing: 0.01em;
}
.draft strong { font-weight: 600; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--measure); }
section { padding: 3.5rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--rule);
  padding: 1.15rem 0;
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.brand {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.brand img { display: block; flex: none; }
nav.site {
  display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: 0.35rem;
}
nav.site a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.9375rem;
  white-space: nowrap;
}
nav.site a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 1.1rem;
  font-weight: 660; max-width: 18ch;
}
.hero p.lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--ink-soft); margin: 0 0 2rem; max-width: 46ch; line-height: 1.55;
}

/* ---------- type ---------- */
h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.018em; font-weight: 640;
  margin: 0 0 1.1rem; max-width: 24ch;
}
h3 {
  font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
}
p { margin: 0 0 1.05rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }
strong { font-weight: 620; }

.maxim {
  font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.3;
  font-weight: 620; letter-spacing: -0.018em;
  border-left: 4px solid var(--accent-mark); padding-left: 1.15rem;
  margin: 2rem 0 0; max-width: 30ch; color: var(--ink);
}

/* ---------- call to action ---------- */
.cta {
  display: inline-block; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 560; font-size: 1rem;
  padding: 0.85rem 1.5rem; border-radius: 6px; line-height: 1.3;
}
.cta:hover { background: var(--accent-ink); }
button.cta { border: 0; font-family: inherit; cursor: pointer; }
.cta-note { display: block; margin-top: 0.7rem; font-size: 0.9375rem; color: var(--ink-faint); }

/* ---------- two-route choice: runs Google Ads now / has never advertised (added 2026-09-29) ---------- */
.fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0; max-width: var(--wide); }
.fork-opt { border: 1px solid var(--rule); background: var(--panel); border-radius: 8px; padding: 1.15rem 1.25rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.fork-opt h3 { margin: 0; font-size: 1.0625rem; }
.fork-opt p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; flex: 1; }

/* ---------- lists ---------- */
.leaks, .strengths { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.leaks li, .strengths li { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.leaks h3, .strengths h3, .included h3 { display: flex; align-items: baseline; gap: 0.55rem; }
.leaks h3::before, .strengths h3::before, .included h3::before {
  content: ""; width: 3px; height: 0.78em; background: var(--accent-mark);
  flex: none; align-self: center; }
.leaks li:first-child, .strengths li:first-child { border-top: 0; padding-top: 0; }
.leaks p, .strengths p { margin: 0; color: var(--ink-soft); }

.included { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .included { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
.included li { margin: 0; }
.included p { margin: 0; color: var(--ink-soft); font-size: 0.9688rem; }

/* ---------- pricing ---------- */
.tiers { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0 0 1.75rem; padding: 0; list-style: none; }
@media (min-width: 52rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--rule); border-radius: 8px; padding: 1.5rem;
  background: var(--page); display: flex; flex-direction: column;
}
.tier.feature { border-color: var(--accent-mark); background: var(--accent-pale); }
.tier h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.07em;
           color: var(--ink-soft); font-weight: 600; margin-bottom: 0.8rem;
           display: flex; align-items: center; gap: 0.55rem; }
.tier h3::before { content: ""; width: 3px; height: 0.85em; background: var(--accent-mark); flex: none; }
.tier .price { font-size: 2rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.tier .price .per { font-size: 0.9375rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.tier .was { font-size: 0.875rem; color: var(--ink-faint); margin: 0.45rem 0 1rem; }
.tier p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

.note {
  background: var(--panel); border-radius: 8px; padding: 1.25rem 1.4rem;
  font-size: 0.9688rem; color: var(--ink-soft); max-width: var(--measure);
}
.note strong { color: var(--ink); }
.note + .note { margin-top: 0.9rem; }

/* ---------- steps ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; max-width: var(--measure); }
.steps li { counter-increment: s; padding: 1.2rem 0 1.2rem 2.6rem; position: relative;
            border-top: 1px solid var(--rule); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1.2rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 650;
  display: grid; place-items: center;
}
.steps li:first-child::before { top: 0; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- diagrams ---------- */
figure.diagram { margin: 2.25rem 0 0; padding: 0; }
figure.diagram svg {
  display: block; width: 100%; height: auto; max-width: 46rem;
  color: var(--ink);            /* currentColor for strokes, text and arrowheads */
  overflow: visible;
}
figure.diagram figcaption {
  font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft);
  margin-top: 1rem; max-width: var(--measure);
}
@media (max-width: 34rem) {
  /* below this the 12px labels stop being readable at the scaled width */
  figure.diagram svg { min-width: 30rem; }
  figure.diagram { overflow-x: auto; }
}

/* ---------- table ---------- */
.tablewrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; min-width: 30rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 620; color: var(--ink); }
td { color: var(--ink-soft); }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem;
  font-size: 0.875rem; color: var(--ink-faint);
}
footer.site a { color: var(--ink-soft); }
footer.site p { max-width: var(--measure); }

/* ---------- placeholders: must be zero before publish ---------- */
.ph {
  background: var(--warn-pale); color: var(--warn);
  border: 1px dashed #d9b25e; border-radius: 4px;
  padding: 0.08em 0.4em; font-size: 0.9em; font-weight: 600;
  white-space: nowrap;
}

/* ---------- image plates ----------
   Dark 16:9 panels on the white ground. The images are low-key and crimson-lit, which is
   the Vibe Studio Motion look; contained as panels rather than bled, so the page stays white. */
section.plate-band { padding-top: 0; padding-bottom: 3.25rem; border-top: 0; }
figure.plate { margin: 0; padding: 0; max-width: 75%; }
@media (max-width: 46rem) { figure.plate { max-width: 100%; } }
figure.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 40rem) {
  .brand img { width: 200px; height: auto; }
  nav.site { width: 100%; column-gap: 1.1rem; }
}

/* cookie banner */
#vsm-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--page);
  padding: 1rem;
  z-index: 99999;
}
#vsm-cookie-banner .vsm-banner-content {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#vsm-cookie-banner p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
#vsm-cookie-banner .vsm-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
#vsm-cookie-banner a {
  color: var(--page);
  text-decoration: underline;
}
#vsm-cookie-banner .vsm-buttons {
  display: flex;
  gap: 1rem;
  width: 100%;
}
#vsm-cookie-banner button {
  flex: 1;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--page);
  border: 1px solid var(--page);
  cursor: pointer;
  font: inherit;
}
#vsm-cookie-banner button:focus,
#vsm-cookie-banner button:hover {
  background: var(--page);
  color: var(--ink);
}

@media (min-width: 40rem) {
  #vsm-cookie-banner .vsm-banner-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #vsm-cookie-banner p {
    flex: 1;
    margin-right: 2rem;
  }
  #vsm-cookie-banner .vsm-banner-actions {
    flex-direction: row;
    flex-shrink: 0;
  }
  #vsm-cookie-banner .vsm-buttons {
    width: auto;
  }
  #vsm-cookie-banner button {
    width: 6rem;
  }
}

/* ---------- brand film carousel ----------
   Sits where the image plate used to sit, in the same 16:9 panel shape and 75% width;
   the image plate follows it. The films sit side by side in a horizontal track that
   snaps one film at a time; arrows at the left and right edges, dots below. Autoplay
   is muted, so a button offers the sound. */
section.film-band { padding-top: 0; padding-bottom: 2.25rem; border-top: 0; }
.film-carousel { position: relative; max-width: 75%; }
@media (max-width: 46rem) { .film-carousel { max-width: 100%; } }
.film-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.film-track::-webkit-scrollbar { display: none; }
figure.film { margin: 0; padding: 0; flex: 0 0 100%; scroll-snap-align: start; }
figure.film video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--ink); border-radius: 2px;
}
figure.film figcaption {
  font-size: 0.8125rem; color: var(--ink-soft); padding-top: 0.6rem; text-align: center;
}
.film-nav {
  position: absolute; top: calc((100% - 2.9rem) / 2); transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.75rem; line-height: 1; padding: 0 0 0.2rem;
  color: var(--page); background: rgba(10, 10, 10, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; z-index: 2;
}
.film-prev { left: 0.75rem; }
.film-next { right: 0.75rem; }
.film-nav:hover { background: var(--accent); border-color: var(--accent); }
.film-nav:disabled { opacity: 0; pointer-events: none; }
.film-nav:focus-visible, .film-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.film-dots { display: flex; justify-content: center; gap: 0.5rem; padding-top: 0.5rem; }
.film-dots button {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; padding: 0;
  border: 0; background: var(--rule); cursor: pointer;
}
.film-dots button[aria-selected="true"] { background: var(--accent-mark); }
.film-sound {
  position: absolute; right: 0.75rem; top: 0.75rem; z-index: 2;
  font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--page); background: rgba(10, 10, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  padding: 0.4rem 0.9rem; cursor: pointer;
}
.film-sound:hover { background: var(--accent); border-color: var(--accent); }
.film-sound[hidden] { display: none; }

/* Home page only: the film carousel and the image plate below it sit centred on the
   page rather than left-aligned with the text column. Other pages keep their plates
   left-aligned. */
body.home .film-carousel,
body.home figure.plate { margin-left: auto; margin-right: auto; }

/* ---------- guide pop-up ----------
   Offers the five-leaks guide for an email address; behaviour in js/guide-popup.js.
   A centred card over a dimmed page; on a phone it rises from the bottom edge. */
.guide-pop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; background: rgba(10, 10, 10, 0); transition: background 0.2s ease;
}
.guide-pop.is-open { background: rgba(10, 10, 10, 0.55); }
.guide-pop-card {
  position: relative; width: 100%; max-width: 30rem; background: var(--page); color: var(--ink);
  border-radius: 6px; border-top: 4px solid var(--accent-mark); box-shadow: 0 18px 48px rgba(10, 10, 10, 0.25);
  opacity: 0; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.guide-pop.is-open .guide-pop-card { opacity: 1; transform: none; }
.guide-pop-body { padding: 1.75rem 1.75rem 1.5rem; }
.guide-pop-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.4rem; }
.guide-pop h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.guide-pop-body > p, .guide-pop-form p { margin: 0 0 0.9rem; color: var(--ink-soft); }
.guide-pop-label { display: block; font-size: 0.8125rem; font-weight: 600; margin: 0 0 0.35rem; }
.guide-pop-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.guide-pop-row input {
  flex: 1 1 13rem; min-width: 0; font: inherit; padding: 0.7rem 0.8rem;
  border: 1px solid #cfc6c8; border-radius: 4px; background: #fff; color: var(--ink);
}
.guide-pop-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.guide-pop-row .cta { flex: 0 0 auto; margin: 0; }
.guide-pop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.guide-pop-msg { min-height: 1.2em; font-size: 0.875rem; color: var(--accent-ink) !important; margin: 0 0 0.5rem !important; }
.guide-pop-small { font-size: 0.8125rem; color: var(--ink-faint) !important; margin: 0 !important; }
.guide-pop-small a { color: inherit; }
.guide-pop-close {
  position: absolute; top: 0.5rem; right: 0.6rem; width: 2.25rem; height: 2.25rem; border: 0; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--ink-faint); cursor: pointer; border-radius: 50%;
}
.guide-pop-close:hover { color: var(--ink); background: var(--panel); }
.guide-pop-close:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 40rem) {
  .guide-pop { align-items: flex-end; padding: 0; }
  .guide-pop-card { max-width: none; border-radius: 10px 10px 0 0; }
  .guide-pop-body { padding: 1.5rem 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .guide-pop, .guide-pop-card { transition: none; } }

/* ---------- learn page: short teaching films (added 2026-10-03) ---------- */
.series-index { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--wide); }
.series-index li { margin: 0; }
.series-index a { display: inline-flex; align-items: baseline; gap: 0.45rem; border: 1px solid var(--rule); background: var(--panel);
  border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9375rem; color: var(--ink); text-decoration: none; }
.series-index a:hover { border-color: var(--accent-mark); color: var(--accent); }
.series-index span { font-size: 0.8125rem; color: var(--ink-faint); }
.series-lede { color: var(--ink-soft); margin-top: -0.4rem; }
.lessons { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
.lesson { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.lesson-player { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--ink); border-radius: 8px; object-fit: cover; }
.lesson-tag { margin: 0.85rem 0 0.2rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); font-variant-numeric: tabular-nums; }
.lesson h3 { margin: 0 0 0.4rem; text-wrap: balance; }
.lesson p:not(.lesson-tag) { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
section[id] { scroll-margin-top: 1rem; }