/* Mint Frame — styles.css
   Tokens come from brand/tokens.css, linked before this file in every page.
   Nothing here redefines a token; every colour, size and radius is read from one. */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: var(--text-md) / var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
}
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); max-width: 30ch; text-wrap: balance; }
h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }

a {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
a:hover { color: var(--mint-hover); }

img, svg, video { display: block; max-width: 100%; }
button { margin: 0; font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--mint); color: var(--on-mint); }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: calc(var(--section-y) / 2); }
.section__intro {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  color: var(--muted);
}
.note { font-size: var(--text-sm); color: var(--muted); }

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--gutter);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--on-mint);
  font: 600 var(--text-sm) / 1 var(--font-display);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Lockup ---------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--bone);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.lockup:hover { color: var(--bone); }
.mark { width: 28px; height: 28px; flex: none; }
.mark__dot { fill: var(--mint); }
.wordmark {
  font: 600 var(--text-lg) / 1 var(--font-display);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 var(--text-sm) / 1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn--primary { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.btn--primary:hover { background: var(--mint-hover); border-color: var(--mint-hover); color: var(--on-mint); }
.btn--secondary { background: transparent; border-color: var(--line-strong); color: var(--bone); }
.btn--secondary:hover { border-color: var(--bone); color: var(--bone); }
.btn:disabled { cursor: progress; }

/* ---------- Header ---------- */
.site-header { padding-block: var(--space-5); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.site-nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.site-nav a {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--bone); }
.site-header__cta { margin-inline-start: auto; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-6) calc(var(--section-y) / 2); }
.hero__inner { display: grid; gap: var(--space-7); align-items: center; }
.hero__sub {
  max-width: var(--measure);
  margin: var(--space-5) 0 var(--space-6);
  font-size: var(--text-lg);
  color: var(--muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__media { width: 100%; max-width: 388px; }
.hero__trust { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* The viewfinder: the brand's one decorative device, used here and in the logo only. */
.viewfinder { position: relative; width: 100%; padding: 14px; }
.viewfinder__frame {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  background: var(--slate);
}
.viewfinder__video { width: 100%; height: 100%; object-fit: cover; }
.viewfinder__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 solid var(--bone);
}
.viewfinder__corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 10px; }
.viewfinder__corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 10px; }
.viewfinder__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 10px; }
.viewfinder__corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 10px; }
.viewfinder__dot {
  position: absolute;
  right: 26px;
  bottom: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
}

/* ---------- Examples ---------- */
.examples { list-style: none; display: grid; gap: var(--space-5); }
.examples > li { min-width: 0; }
.clip { margin: 0; }
.clip__tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--slate);
}
.clip__video { width: 100%; height: 100%; object-fit: cover; }
.clip__sound {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bone);
  font: 600 var(--text-xs) / 1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}
.clip__sound:hover { border-color: var(--bone); }
.clip__before {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-3));
  padding: var(--space-1);
  padding-inline-end: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.2;
}
.clip__before img {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - var(--space-1));
}
.clip__caption { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- How it works ---------- */
.steps { list-style: none; display: grid; gap: var(--space-6); }
.step__num {
  display: block;
  margin-bottom: var(--space-3);
  font: 600 var(--text-xl) / 1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--muted);
}
.step h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.step p { max-width: var(--measure); margin: 0; }

/* ---------- What's included ---------- */
.included {
  list-style: disc;
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  padding-inline-start: 1.25em;
}
.included li::marker { color: var(--muted); }

/* ---------- Pricing (the one section allowed on a slate band) ---------- */
.pricing { background: var(--slate); }
.tiers { display: grid; gap: var(--space-5); }
.tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--slate);
  text-align: center;
}
.tier--featured { border-color: var(--mint); }
.tier__name { margin: 0 0 var(--space-3); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.tier__price {
  margin: 0 0 var(--space-2);
  font: 600 var(--text-xl) / 1.1 var(--font-display);
  letter-spacing: var(--tracking-display);
}
.tier__period { font-size: var(--text-md); letter-spacing: var(--tracking-tight); color: var(--muted); }
.tier__for { margin: 0 0 var(--space-5); color: var(--muted); }
.tier__list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}
.tier__note { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--muted); }
.tier .btn { margin-top: auto; }
.pricing__fine { max-width: var(--measure); margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: calc(var(--measure) + 6ch); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  list-style: none;
  cursor: pointer;
  font: 600 var(--text-lg) / var(--leading-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-sm);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--duration) var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bone);
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 16px; height: 2px; }
.faq__icon::after { width: 2px; height: 16px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__body { max-width: var(--measure); padding: 0 0 var(--space-5); }
.faq__body p { margin: 0; }

/* ---------- Free sample form ---------- */
.sample {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--slate);
}
.sample__copy p { max-width: var(--measure); margin: 0; font-size: var(--text-lg); color: var(--muted); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bone);
  font: var(--text-md) / 1.2 var(--font-body);
  transition: border-color var(--duration) var(--ease);
}
.field input[aria-invalid="true"] { border-color: var(--error); }
.field__error { margin: 0; font-size: var(--text-sm); color: var(--error); }
.hp { display: none; }
.form__submit { width: 100%; margin-top: var(--space-2); }
.form__status { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--error); }
.form__note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- About ---------- */
.about .note { margin-bottom: var(--space-3); }
.about__text { max-width: var(--measure); margin: 0; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-8) var(--space-7); }
.site-footer__inner { display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.site-footer p { margin: 0; }
.site-footer .lockup { justify-self: start; margin-bottom: var(--space-3); }
.site-footer__links { display: flex; gap: var(--space-4); }

/* ---------- Thanks and legal pages ---------- */
.page { padding-block: var(--space-6) var(--section-y); }
.thanks { max-width: var(--measure); }
.thanks h1 { margin-bottom: var(--space-5); }
.thanks p { margin: 0 0 var(--space-6); font-size: var(--text-lg); color: var(--muted); }
.legal { max-width: var(--measure); }
.legal h1 { margin-bottom: var(--space-5); font-size: var(--text-2xl); }
.legal h2 { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-xl); }
.legal .note { margin-bottom: var(--space-3); }

/* ---------- Narrow phones: keep lockup and button on one header row ---------- */
@media (max-width: 399px) {
  .site-header__inner { column-gap: var(--space-3); }
  .site-header .wordmark { font-size: var(--text-md); }
  .site-header__cta { padding-inline: var(--space-4); }
}

/* ---------- Phone: the example clips scroll sideways with snap, 1.5 in view ---------- */
@media (max-width: 767px) {
  .examples {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-5)) / 1.5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: var(--space-3);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .examples > li { scroll-snap-align: start; }
}

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
  .site-nav { order: 0; flex-basis: auto; margin-inline-start: auto; }
  .site-header__cta { margin-inline-start: 0; }

  .hero { padding-block: var(--space-7) calc(var(--section-y) / 2); }
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); }
  .hero__media { justify-self: end; }
  .hero__media:has(.viewfinder--landscape),
  .hero__media:has(.viewfinder--square) { max-width: none; }
  .hero__inner:has(.viewfinder--landscape) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .viewfinder--landscape .viewfinder__frame { aspect-ratio: 16 / 9; }
  .viewfinder--square .viewfinder__frame { aspect-ratio: 1 / 1; }

  .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }

  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .tier--featured { margin-top: -8px; }

  .sample { padding: var(--space-7); }
  .form__submit { width: auto; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .examples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .tier { padding: var(--space-6) var(--space-5); }
  .sample { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}

/* ======================================================================
   Variant B (index-b.html): sections the second wording adds.
   Same tokens, same components; nothing above changes for index.html.
   ====================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.eyebrow { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }

/* Stats row under the hero */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-7);
}
.stats__num {
  display: block;
  font: 600 var(--text-xl) / 1.1 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.stats__label { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }

/* Three plain columns (problem) and four (uses) */
.trio, .uses { list-style: none; display: grid; gap: var(--space-6); }
.trio h3, .uses h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.trio p, .uses p { max-width: var(--measure); margin: 0 0 var(--space-3); }
.trio__answer { font-weight: 600; }
.uses__formats { font-size: var(--text-sm); color: var(--muted); }

/* Steps timing and the "behind every video" list */
.step__time { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.behind__eyebrow { margin-top: var(--space-7); }
.behind { list-style: none; display: grid; gap: var(--space-4); }
.behind li { max-width: var(--measure); }
.behind strong { display: block; }

/* Comparison table; the Mint Frame column sits on slate */
.table-wrap {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--text-sm); }
.compare th, .compare td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare thead th { font: 600 var(--text-sm) / 1.3 var(--font-display); letter-spacing: var(--tracking-tight); }
.compare tbody th { font-weight: 600; color: var(--muted); }
.compare th:last-child, .compare td:last-child { background: var(--slate); }
.compare thead th:first-child { padding-inline-start: var(--space-4); }

/* Four tiers and their extra lines */
.tier__flag { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.tier__plus { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; }

/* Sample section bullet points and selects */
.sample__points {
  list-style: disc;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-inline-start: 1.25em;
}
.sample__points li::marker { color: var(--muted); }
.field select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bone);
  font: var(--text-md) / 1.2 var(--font-body);
}
.field select[aria-invalid="true"] { border-color: var(--error); }

/* Closing call to action */
.closing__email { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--muted); }

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .behind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
  .tiers--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .uses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .tiers--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .tiers--four .tier { padding: var(--space-6) var(--space-4); }
}