/* AI Social Video Commerce — the workshop page's own stylesheet.
 *
 * Scoped entirely under `.sv`, so nothing here can reach another page. Her palette: ivory ground,
 * charcoal type, champagne gold accents, and the red kept for the discounted price only.
 *
 * Two of her standing rules are load-bearing in this file:
 *   - rows of short labels stay on ONE line and shrink with the window rather than wrapping
 *     (facts, the price line, the video controls, the closing facts)
 *   - nothing she has to read is faint: every text colour here is a dark ink on a light ground,
 *     or a light ink on charcoal, never a washed-out grey on grey
 */

.sv {
  --sv-ink: #141414;
  --sv-ivory: #F8F6F2;
  --sv-sunk: #F1EDE6;
  --sv-champ: #B49A83;
  --sv-champ-ink: #7E6349;   /* the gold, darkened until it is readable as text */
  --sv-red: #D71920;
  --sv-body-ink: #2A2522;
  background: var(--sv-ivory);
  color: var(--sv-ink);
}

/* ------------------------------------------------------------------------------- the hero */
.sv-hero {
  padding: clamp(26px, 4.6vw, 60px) 0 clamp(22px, 3.6vw, 44px);
}
.sv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.6vw, 40px);
  align-items: center;
}
.sv-hero__text { min-width: 0; max-width: 46rem }
.sv-hero__media { min-width: 0 }

/* The banner fills the width on a wide screen. Her instruction, 28 October 2026 (second pass): the
   page opened with the words in the left half and the whole right half of the banner standing empty,
   so the words take the left column and the three clips take the right one. The clips stay three in
   a row at every width, so nothing here stacks them. */
@media (min-width: 1180px) {
  .sv-hero__grid {
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    gap: clamp(26px, 3.2vw, 52px);
  }
  .sv-hero__text { max-width: none }
}

.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-ink);
  margin: 0 0 14px;
}
.sv-eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--sv-champ);
  border-radius: 2px;
}
.sv-eyebrow--light { color: #EFE7DC }

.sv-h1 {
  font-size: clamp(32px, 5.9vw, 66px);
  line-height: .98;
  letter-spacing: -.022em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sv-subhead {
  font-size: clamp(17px, 2.15vw, 23px);
  line-height: 1.28;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 30ch;
}
.sv-supporting {
  font-size: clamp(15.5px, 1.55vw, 17.5px);
  line-height: 1.6;
  color: var(--sv-body-ink);
  margin: 0 0 10px;
  max-width: 52ch;
}
.sv-req {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sv-body-ink);
  margin: 0 0 18px;
  max-width: 52ch;
}

/* One line, always. The type shrinks with the window instead of folding into two rows.
   Her instruction, 28 October 2026: make it more obvious. It was 15px of plain charcoal on ivory
   and read as a caption; it now carries the day, the hours and the time as a bordered badge in her
   own gold, so the first thing a visitor can check is when the workshop runs. */
.sv-facts {
  display: inline-block;
  font-size: clamp(11.5px, 3.2vw, 19px);
  white-space: nowrap;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sv-ink);
  background: #FFFFFF;
  border: 2px solid var(--sv-champ);
  border-radius: 999px;
  padding: 10px 22px;
  margin: 0 0 14px;
}

.sv-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
  white-space: nowrap;
}
.sv-price__was {
  font-size: clamp(17px, 2.4vw, 26px);
  font-weight: 700;
  color: #6B625A;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
.sv-price__now {
  font-size: clamp(38px, 6.2vw, 62px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sv-red);
}
.sv-credits {
  display: inline-block;
  font-size: clamp(13px, 1.7vw, 15.5px);
  font-weight: 700;
  color: var(--sv-ink);
  background: rgba(180, 154, 131, .22);
  border-left: 4px solid var(--sv-champ);
  padding: 8px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 6px;
}

.sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.sv-actions--center { justify-content: center }
.sv-btn { font-weight: 700 }

/* ------------------------------------------------- the three clips, one row, the same height */
/* Her instruction, 28 October 2026: the three clips sit at the same height, side by side, each with
   its own controls. THREE COLUMNS AT EVERY WIDTH - she does not want them stacked one per row, not
   even on a phone. All three frames take one ratio, so their heights match to the pixel, and
   object-fit: contain means nothing is ever cropped to make the row line up. */
.sv-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 22px);
  align-items: start;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.sv-clipcard { margin: 0; display: grid; gap: 10px }
.sv-clip {
  position: relative;
  aspect-ratio: var(--sv-ar);
  border-radius: 18px;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow: 0 16px 36px rgba(20, 20, 20, .20);
}
.sv-clip__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* TEMPORARY shim: REMOVED 28 October 2026, once `site-creator` was restarted and the live page
   served the three-column markup. The fan rules and the browser-side markup upgrade in svc.js are
   gone with it - there is no `.sv-stack` on the page any more, so nothing needs covering. */

/* ------------------------------------------------------- the video controls, under the picture */
/* One control row per clip, and every row fits on ONE line: the labels are the three her rule names
   (Play with sound, Pause, Full screen) at the smallest size that still reads, so a narrow column
   never wraps them onto a second row. */
.sv-mediabar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.sv-mediabar__btn {
  font: inherit;
  font-size: clamp(10.5px, 1.6vw, 12px);
  font-weight: 700;
  white-space: nowrap;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--sv-ink);
  background: #FFFFFF;
  color: var(--sv-ink);
  cursor: pointer;
}
.sv-mediabar__btn:hover { background: var(--sv-ink); color: #FFFFFF }
.sv-mediabar__btn--quiet { border-color: #BFB6AC }

/* Three clips side by side means each bar gets a third of the row, so the long label only fits on a
   wide screen: below 1050px the play button says "Play" (the same promise - it unmutes and plays),
   and below 620px the Full screen button steps aside so the row stays on ONE line - on a phone the
   clip's own player already opens full screen when the picture is tapped. */
.sv-lbl--short { display: none }
@media (max-width: 1050px) {
  .sv-lbl--long { display: none }
  .sv-lbl--short { display: inline }
  .sv-mediabar { gap: 6px }
  .sv-mediabar__btn { font-size: 11.5px; padding: 7px 10px; border-width: 1px }
}
@media (max-width: 700px) {
  /* Phones: ONE clip per row. Her word, 28 October 2026 — three in a row on a 390px screen left each
     frame about 111px wide, too small to see the product, and the first button had to fall back to
     "Play" for want of room. Stacked, each clip gets the whole width of the phone, so all three
     controls fit and the long label comes back. The stack is capped at 400px and centred, so on a
     wider phone or a small tablet a portrait clip stays a clip and not a whole screen tall. */
  .sv-clips {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
    gap: 26px;
  }
  .sv-mediabar { gap: 6px }
  /* One clip per row gives the row the whole phone width, so the three controls fit on one line with
     her own long label back. (The 1050px rule that shortened it to "Play" was written for the
     three-in-a-row row, where each clip had a third of the screen.) A card too narrow for the long
     words still falls to "Play" through the container query below, which comes later in this file. */
  .sv-lbl--long { display: inline }
  .sv-lbl--short { display: none }
  .sv-mediabar__btn { font-size: 12px; padding: 8px 10px; border-width: 1.5px }
  .sv-mediabar__btn--quiet { display: inline-block }
}

/* Her rule is that the three buttons stay on ONE line. What decides that is the width of the clip's
   own column, not the width of the window: in the wide-screen banner each clip has a narrower column
   than it does when the row runs the full width, so the labels follow the space the card actually
   has. A card narrower than 300px says "Play" where a wider one says "Play with sound" - the same
   promise, and never a second row. */
.sv-clipcard { container-type: inline-size }
@container (max-width: 299px) {
  .sv-lbl--long { display: none }
  .sv-lbl--short { display: inline }
}
@container (max-width: 235px) {
  /* A phone in the gallery's two-up row gives a card ~168px, so the three buttons need every pixel
     that is left: measured on the live page, the row fits at 159px of 168 with these numbers, and
     wrapped to two lines without them. */
  .sv-mediabar { gap: 4px }
  .sv-mediabar__btn { font-size: 10.5px; padding: 5px 6px; border-width: 1px }
}
@container (max-width: 165px) {
  /* The smallest phones (a 360px screen gives a two-up card ~153px): one more step down, because a
     wrapped control row breaks her rule that these buttons sit on ONE line. */
  .sv-mediabar { gap: 3px }
  .sv-mediabar__btn { font-size: 10px; padding: 4px 5px }
}
.sv-cap {
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 600;
  color: #514940;
  margin: 16px 0 0;
  text-align: center;
}

/* ------------------------------------------------------------------- the video gallery */
/* Her six AI videos, added 28 October 2026, re-laid out on her word the same day: THREE to a row on
   a laptop, TWO to a row on a phone. (Her first ask was two up on the laptop; the denser row is what
   she settled on.) The row fills the width where there is room and is capped at 1160px, so a 9:16
   card never grows into a whole screen of scrolling on a wide monitor. */
.sv-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px);
  max-width: 1160px;
  margin: 0 auto;
}
@media (max-width: 899px) {
  .sv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
}

/* --------------------------------------------------------------------------- shared headings */
.sv-band { background: var(--sv-ivory) }
.sv-band--sunk { background: var(--sv-sunk) }
.sv-h2 {
  font-size: clamp(25px, 4.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -.018em;
  font-weight: 800;
  margin: 0 0 16px;
  max-width: 24ch;
}
.sv-h2--light { color: #FFFFFF }
.sv-lead {
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.6;
  color: var(--sv-body-ink);
  margin: 0 0 26px;
  max-width: 58ch;
}
.sv-prose { max-width: 68ch }
.sv-prose p,
.sv-prose__p {
  font-size: clamp(16px, 1.75vw, 17.5px);
  line-height: 1.65;
  color: var(--sv-body-ink);
  margin: 0 0 14px;
}
.sv-after {
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  font-weight: 700;
  margin: 24px 0 0;
  max-width: 60ch;
}

/* --------------------------------------------------------------------- problem vs solution */
.sv-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.sv-compare__col {
  background: #FFFFFF;
  border: 1px solid #DED6CC;
  border-radius: 16px;
  padding: 22px 22px 16px;
}
.sv-compare__col--new {
  border: 2px solid var(--sv-champ);
  box-shadow: 0 12px 28px rgba(180, 154, 131, .22);
}
.sv-compare__h {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E8E0D6;
}
.sv-compare__col--new .sv-compare__h { border-bottom-color: var(--sv-champ) }

.sv-list { list-style: none; margin: 0; padding: 0 }
.sv-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: clamp(15.5px, 1.7vw, 16.5px);
  line-height: 1.5;
  color: var(--sv-body-ink);
  font-weight: 500;
}
.sv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .44em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sv-champ);
}
.sv-list--plain li { color: #4A423B }
.sv-list--plain li::before {
  top: .72em;
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: #A79E94;
}

/* ------------------------------------------------------------------ the four learning stages */
.sv-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.sv-card {
  background: #FFFFFF;
  border: 1px solid #E2DAD0;
  border-radius: 18px;
  padding: 24px 24px 18px;
}
.sv-card__n {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--sv-champ-ink);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sv-champ);
  display: inline-block;
}
.sv-card__h {
  font-size: clamp(18px, 2.2vw, 21.5px);
  font-weight: 800;
  line-height: 1.2;
  margin: 12px 0 14px;
}

/* --------------------------------------------------------------------------- who it's for */
.sv-who {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 28px;
  margin-top: 24px;
}
.sv-who__row { border-top: 3px solid var(--sv-champ); padding-top: 14px }
.sv-who__h { font-size: clamp(17px, 1.9vw, 18.5px); font-weight: 800; margin: 0 0 7px; line-height: 1.25 }
.sv-who__p { font-size: clamp(15px, 1.65vw, 16px); line-height: 1.55; color: var(--sv-body-ink); margin: 0 }

/* -------------------------------------------------------------- the workshop, in three notes */
.sv-doing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sv-doing__row {
  background: #FFFFFF;
  border-left: 5px solid var(--sv-champ);
  border-radius: 0 14px 14px 0;
  padding: 20px 20px 16px;
}
.sv-doing__h { font-size: clamp(17px, 1.9vw, 18.5px); font-weight: 800; margin: 0 0 8px }
.sv-doing__p { font-size: clamp(15px, 1.65vw, 16px); line-height: 1.55; color: var(--sv-body-ink); margin: 0 }

/* ----------------------------------------------------------------------------- the offer */
.sv-offer {
  background: var(--sv-ink);
  color: var(--sv-ivory);
  text-align: center;
  padding: clamp(38px, 5.6vw, 74px) 0;
}
.sv-offer .sv-h2 { margin-left: auto; margin-right: auto }
.sv-offer__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 10px;
}
.sv-offer__was {
  font-size: clamp(19px, 2.9vw, 30px);
  font-weight: 700;
  color: #BDB3A8;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
/* The red stays exactly her red. On charcoal it would be too dark to read, so it sits on an
   ivory chip — the same colour, legible, and it makes the price the loudest thing on the band. */
.sv-offer__now {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sv-red);
  background: var(--sv-ivory);
  border-radius: 999px;
  padding: 4px 26px 8px;
}
.sv-offer__line {
  font-size: clamp(9.5px, 2.7vw, 15px);
  white-space: nowrap;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #EFE7DC;
  margin: 0 0 6px;
}
.sv-bonus {
  max-width: 660px;
  margin: 24px auto 0;
  padding: 20px 22px 14px;
  border: 1px solid rgba(180, 154, 131, .6);
  border-radius: 16px;
  background: rgba(180, 154, 131, .12);
}
.sv-bonus__title {
  font-size: clamp(15.5px, 2.1vw, 19px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.sv-bonus__p {
  font-size: clamp(14.5px, 1.7vw, 16px);
  line-height: 1.6;
  color: #E4DDD3;
  margin: 0 0 8px;
}
.sv-offer__note {
  font-size: clamp(14.5px, 1.7vw, 16px);
  color: #E4DDD3;
  margin: 16px auto 0;
  max-width: 52ch;
}
.sv-btn--champ {
  background: var(--sv-champ);
  border-color: var(--sv-champ);
  color: #141414;
}
.sv-btn--champ:hover { background: #C8AF98; border-color: #C8AF98 }

/* ----------------------------------------------------------------------------- the trainer */
.sv-trainer { max-width: 72ch }
.sv-trainer__name { font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; margin: 0 0 4px }
.sv-trainer__role {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-champ-ink);
  margin: 0 0 16px;
}
.sv-trainer__link { margin: 8px 0 0 }
.sv-inline-link {
  font-weight: 800;
  color: var(--sv-ink);
  text-decoration: underline;
  text-decoration-color: var(--sv-champ);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------------- the faq */
.sv-faq { margin-top: 6px }
.sv-faq details {
  background: #FFFFFF;
  border: 1px solid #E2DAD0;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0 18px;
}
.sv-faq summary {
  font-size: clamp(15.5px, 1.85vw, 17.5px);
  font-weight: 700;
  padding: 16px 0;
  cursor: pointer;
}
.sv-faq details p {
  font-size: clamp(15px, 1.7vw, 16.5px);
  line-height: 1.6;
  color: var(--sv-body-ink);
  margin: 0 0 16px;
  max-width: 70ch;
}

/* ------------------------------------------------------------------------------- the close */
.sv-close {
  background: var(--sv-ink);
  color: var(--sv-ivory);
  text-align: center;
  padding: clamp(42px, 5.8vw, 78px) 0;
}
.sv-close__h {
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.018em;
  margin: 0 auto 14px;
  max-width: 26ch;
}
.sv-close__body {
  font-size: clamp(15.5px, 2vw, 19px);
  line-height: 1.55;
  color: #E4DDD3;
  margin: 0 auto 18px;
  max-width: 48ch;
}
.sv-close__facts {
  /* The same day/hours/time line at the close of the page, given the same weight as the hero badge
     on her instruction of 28 October 2026 to make that line more obvious. */
  font-size: clamp(11.5px, 3vw, 19px);
  white-space: nowrap;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}
.sv-btn--light { background: var(--sv-ivory); border-color: var(--sv-ivory); color: #141414 }
.sv-btn--light:hover { background: #FFFFFF; border-color: #FFFFFF }
.sv-close__num { font-size: clamp(15px, 1.8vw, 17px); color: #E4DDD3; margin: 16px 0 0 }
.sv-close__num a { color: #FFFFFF; font-weight: 800; text-decoration: underline; text-underline-offset: 3px }

/* ------------------------------------------------------------- the phone's own sticky button */
.sv-stickybar { display: none }

/* ------------------------------------------------------------------------------ stacking down */
@media (max-width: 980px) {
  .sv-who { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sv-doing { grid-template-columns: 1fr }
}
@media (max-width: 880px) {
  /* The words lead on a phone, the way her poster reads: headline first, then the clips. Putting
     the clips first looked good and said nothing - a phone visitor saw product videos before
     being told what the workshop is. */
  .sv-cards { grid-template-columns: 1fr }
  .sv-compare { grid-template-columns: 1fr }
  .sv-h2 { max-width: none }
}
@media (max-width: 720px) {
  .sv-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(20, 20, 20, .97);
  }
  .sv-stickybar__btn {
    display: block;
    text-align: center;
    background: var(--sv-champ);
    color: #141414;
    font-weight: 800;
    font-size: 15.5px;
    padding: 14px;
    border-radius: 999px;
    text-decoration: none;
  }
  .sv-body { padding-bottom: 78px }
  .sv-actions .btn { width: 100%; justify-content: center }
}
@media (max-width: 620px) {
  .sv-who { grid-template-columns: 1fr }
  .sv-offer__now { padding: 4px 20px 7px }
}

/* The site's FAQ draws its + in the site red. Her brief keeps the red for the discounted price
   only, so on this page the marker is drawn in the gold instead - still bold, still readable. */
.sv-faq summary::after { color: var(--sv-champ-ink); }


/* ------------------------------------------------------------------ where this fits ----
   Her question, 29 October 2026: how does this workshop align with the courses it repeats?
   The band reuses the "who it's for" rows so nothing is restyled. Two additions only:

   - the row for THIS workshop is marked, so a visitor can see at a glance which line is the
     page they are already on;
   - a link on the rows that point at a course, in the workshop's own gold, bold, with an arrow,
     so it is never mistaken for body text (her standing rule: nothing to be read is faint). */

.sv-who__row--here { border-top-color: var(--sv-ink, #141414); }
.sv-who__row--here .sv-who__h::after {
  content: "this page";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--sv-champ, #B49A83);
  color: #141414;
}

.sv-fits__act { margin-top: 10px; }
.sv-fits__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 1.65vw, 16px);
  font-weight: 800;
  color: var(--sv-ink, #141414);
  text-decoration: none;
  border-bottom: 2px solid var(--sv-champ, #B49A83);
  padding-bottom: 2px;
}
.sv-fits__link:hover { color: var(--sv-accent, #D71920); border-bottom-color: var(--sv-accent, #D71920); }

@media (max-width: 860px) {
  .sv-who { grid-template-columns: minmax(0, 1fr); }
}

/* Four "where this fits" rows in three columns left a pool of empty page on the right - the
   thing she rejects. Two columns fill evenly: two rows of two, no gap. */
#fits .sv-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  #fits .sv-who { grid-template-columns: minmax(0, 1fr); }
}