/* Site refresh, Phase B4: proof pages (how-it-works, results, JMT case study).
   Only adds to growvio.css. Uses its tokens and Phase A components. */

/* --- Page hero with a proof image on the right ---------------------------- */
.proof-hero .page-title {
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  max-width: 14ch;
}

.proof-hero--wide .page-title {
  max-width: 17ch;
}

.proof-hero .proof-strip--single {
  justify-self: end;
  width: 100%;
  max-width: 400px;
}

.hero-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(247, 244, 236, 0.86);
  font-weight: 700;
  font-size: 0.98rem;
}

.hero-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-ticks li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 900;
}

@media (max-width: 820px) {
  .proof-hero .proof-strip--single {
    justify-self: center;
    max-width: 320px;
  }
}

/* --- Slot for the looping video (empty until a video is dropped in) ------- */
[data-slot="how-it-works-loop"]:empty {
  display: none;
}

[data-slot="how-it-works-loop"] {
  max-width: 880px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.12);
  border-radius: var(--radius-lg);
  background: var(--coal-2);
}

[data-slot="how-it-works-loop"] video,
[data-slot="how-it-works-loop"] img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Process: step timing line ------------------------------------------- */
.step-time {
  display: inline-block;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(54, 201, 133, 0.1);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-light .step-time,
.section-paper .step-time {
  color: var(--accent-2);
  background: rgba(18, 107, 70, 0.1);
}

@media (max-width: 820px) {
  .step .step-time {
    grid-column: 2;
  }
}

.plain-note {
  max-width: 720px;
  margin: 28px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: rgba(247, 244, 236, 0.82);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
}

.section-light .plain-note,
.section-paper .plain-note {
  border-left-color: var(--accent-2);
  color: var(--ink);
}

/* --- Two lists side by side ---------------------------------------------- */
.you-we {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.you-we-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
}

.you-we-card h3 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.you-we-card .plain-list {
  margin: 0;
}

@media (max-width: 820px) {
  .you-we {
    grid-template-columns: 1fr;
  }
}

/* --- Section intro (heading + copy, no side column) ----------------------- */
.proof-head {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.proof-head .section-title {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
}

.proof-head .section-copy {
  max-width: 60ch;
}

.proof-split .section-title {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.proof-split .section-copy {
  margin: 0;
}

.proof-split--flip .proof-strip {
  order: 2;
}

@media (max-width: 820px) {
  .proof-split--flip .proof-strip {
    order: 0;
  }
}

.proof-big {
  color: var(--accent);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.section-light .proof-big,
.section-paper .proof-big {
  color: var(--accent-2);
}

.proof-split-copy .btn {
  width: fit-content;
}

/* --- Results: gallery of proof images with captions ----------------------- */
.proof-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.proof-gallery > .proof-strip {
  align-content: start;
}

.proof-note-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(216, 182, 106, 0.38);
  border-radius: var(--radius-lg);
  background: rgba(216, 182, 106, 0.08);
}

.proof-note-card h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.proof-note-card p {
  margin: 0;
  color: rgba(247, 244, 236, 0.8);
  line-height: 1.6;
}

.section-light .proof-note-card,
.section-paper .proof-note-card {
  border-color: rgba(120, 90, 20, 0.3);
  background: rgba(216, 182, 106, 0.2);
}

.section-light .proof-note-card p,
.section-paper .proof-note-card p {
  color: var(--ink);
}

@media (max-width: 980px) {
  .proof-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .proof-gallery {
    display: flex;
    gap: 14px;
    margin-inline: -14px;
    padding: 4px 14px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .proof-gallery > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* --- Results: example sites ---------------------------------------------- */
.site-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.site-card {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 44px rgba(20, 23, 19, 0.12);
}

.site-card-shot {
  position: relative;
  display: block;
  background: var(--coal-2);
}

.site-card-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.site-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(3, 8, 5, 0.3);
}

.site-tag--live {
  color: #06130c;
  background: var(--accent);
}

.site-card-body {
  display: grid;
  gap: 8px;
  padding: 18px 20px 22px;
}

.site-card-body h3 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.site-card-body p {
  margin: 0;
  color: var(--muted-dark);
  line-height: 1.5;
}

.site-card-body .btn {
  width: fit-content;
  margin-top: 6px;
}

.site-fine {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--muted-dark);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .site-gallery {
    grid-template-columns: 1fr;
  }
}

/* --- Case study: facts line, honesty box --------------------------------- */
.honesty-box {
  display: grid;
  gap: 10px;
  max-width: 820px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(216, 182, 106, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(216, 182, 106, 0.09);
}

.honesty-box h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.025em;
}

.honesty-box p {
  margin: 0;
  color: rgba(247, 244, 236, 0.84);
  line-height: 1.6;
}

.section-light .honesty-box,
.section-paper .honesty-box {
  border-color: rgba(120, 90, 20, 0.32);
  background: rgba(216, 182, 106, 0.2);
}

.section-light .honesty-box p,
.section-paper .honesty-box p {
  color: var(--ink);
}

.who-line {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.who-line h2 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.who-line p {
  margin: 0;
  color: rgba(247, 244, 236, 0.76);
  font-size: 1.08rem;
  line-height: 1.65;
}

.section-light .who-line p,
.section-paper .who-line p {
  color: var(--muted-dark);
}

.proof-source {
  margin: 0;
  color: rgba(247, 244, 236, 0.55);
  font-size: 0.88rem;
  line-height: 1.5;
}

.section-light .proof-source,
.section-paper .proof-source {
  color: var(--muted-dark);
}

.cta-stack {
  display: grid;
  gap: 22px;
}

/* How it works loop (8s, silent, seamless) */
.hiw-loop { max-width: 760px; margin: 28px auto 8px; }
.hiw-loop video { display: block; width: 100%; height: auto; border-radius: 22px; background: #101312; }