@import url("https://fonts.googleapis.com/css2?family=Karantina:wght@300;400;700&display=swap");

:root {
  --font-karantina: "Karantina";
  --wine: #690d26;
  --wine-dark: #360610;
  --wine-black: #1c0309;
  --rose: #d79a9b;
  --blush: #efd5d1;
  --cream: #fbf4e9;
  --gold: #d6ad6d;
  --ink: #24080e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-karantina), Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.topbar {
  height: 82px; padding: 0 clamp(22px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between;
  background: var(--wine-dark); color: var(--cream); border-bottom: 1px solid rgba(255,255,255,.15); position: relative; z-index: 10;
}
.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 52px; object-fit: contain; }
.nav-cta { border-bottom: 1px solid var(--gold); padding: 8px 0; font-size: 19px; font-weight: 700; }

.hero { height: 650px; display: grid; grid-template-columns: 47% 53%; background: var(--blush); overflow: hidden; }
.hero-copy { order: 2; padding: 48px clamp(28px, 6vw, 90px) 46px 40px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 2; }
.hero-visual { order: 1; min-height: 650px; position: relative; overflow: hidden; background: var(--wine); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(105,13,38,.12)), linear-gradient(0deg, rgba(54,6,16,.2), transparent 35%); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 42%; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow span { width: 42px; height: 1px; background: var(--wine); }
.eyebrow.light { color: var(--blush); }
.eyebrow.light span { background: var(--gold); }
h1,h2,h3,p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-karantina), Arial, sans-serif; font-weight: 700; }
.hero h1 { font-size: clamp(62px, 7vw, 116px); line-height: .82; letter-spacing: 0; margin: 0 0 26px; }
em { color: var(--wine); font-weight: 700; }
.hero-lead { max-width: 580px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 400; line-height: 1.4; margin-bottom: 28px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.primary-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-width: 250px; padding: 17px 24px; background: var(--wine); color: white; font-size: 22px; font-weight: 700; transition: .25s ease; }
.primary-btn:hover { background: var(--wine-dark); transform: translateY(-2px); }
.primary-btn span { font-size: 23px; }
.text-link { font-size: 19px; font-weight: 700; border-bottom: 1px solid rgba(36,8,14,.35); padding-bottom: 5px; }
.micro-proof { margin-top: 26px; display: flex; align-items: center; gap: 13px; font-size: 16px; font-weight: 400; }
.micro-proof i { width: 4px; height: 4px; background: var(--wine); border-radius: 50%; }
.orbit { position: absolute; z-index: 3; width: 76px; height: 76px; display: grid; place-items: center; background: rgba(54,6,16,.86); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; font-size: 17px; font-weight: 400; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.orbit-one { top: 12%; left: 8%; }
.orbit-two { top: 37%; right: 8%; }
.orbit-three { bottom: 12%; left: 13%; }
.image-stamp { position: absolute; z-index: 3; left: 28px; bottom: 28px; color: white; font-size: 11px; line-height: 1.3; letter-spacing: .25em; }

.marquee { overflow: hidden; background: var(--gold); color: var(--wine-dark); padding: 13px; font-size: 22px; font-weight: 700; white-space: nowrap; letter-spacing: .04em; text-align: center; }
.section { padding: clamp(62px, 7vw, 105px) clamp(24px, 7vw, 110px); }
.results { background: var(--wine-dark); color: var(--cream); }
.section-heading { max-width: 760px; }
.section-heading h2, .curriculum-intro h2, .reviews-heading h2 { font-size: clamp(65px, 8vw, 128px); line-height: .8; letter-spacing: 0; margin-bottom: 30px; }
.section-heading > p:last-child, .curriculum-intro > p:last-child { max-width: 620px; color: #e5cac4; font-size: 23px; font-weight: 400; line-height: 1.5; }
.highlight-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.highlight-card { min-height: 340px; padding: 28px; background: var(--wine-dark); position: relative; overflow: hidden; }
.highlight-card:hover .card-orb { transform: scale(1.25); }
.card-number { color: var(--gold); font-family: var(--font-karantina), Arial, sans-serif; font-size: 22px; font-weight: 700; }
.card-orb { width: 138px; height: 138px; margin: 28px auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e7aaa4, #8c1833 48%, #25030c 70%); box-shadow: 0 0 55px rgba(215,154,155,.25); transition: .4s; }
.highlight-card:nth-child(2) .card-orb { border-radius: 42% 58% 65% 35%; background: radial-gradient(circle at 60% 30%, #d6ad6d, #750f29 55%, #1c0309); }
.highlight-card:nth-child(3) .card-orb { background: conic-gradient(from 45deg, #d79a9b, #6f0b25, #d6ad6d, #360610, #d79a9b); filter: blur(.2px); }
.highlight-card h3 { font-size: 31px; margin-bottom: 14px; }
.highlight-card p { color: #d7bbb7; font-size: 21px; font-weight: 400; line-height: 1.5; }

.showcase { background: var(--blush); overflow: hidden; }
.showcase-heading { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.showcase-heading .eyebrow { justify-content: center; }
.showcase-heading h2 { font-size: clamp(70px, 8.5vw, 132px); line-height: .78; margin-bottom: 28px; }
.showcase-heading > p:last-child { max-width: 620px; margin: 0 auto; font-size: 24px; font-weight: 400; line-height: 1.45; }
.showcase-stage { width: min(100%, 1060px); min-height: 690px; margin: 0 auto; position: relative; display: grid; place-items: center; }
.course-video { width: min(48vw, 500px); aspect-ratio: 1; position: relative; z-index: 2; overflow: hidden; background: var(--wine-black); border: 3px solid var(--gold); box-shadow: 0 28px 70px rgba(54,6,16,.35); }
.course-video::before { content: ""; position: absolute; inset: 10px; z-index: 1; border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
.course-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gif-orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gif-circle { width: clamp(128px, 14vw, 190px); aspect-ratio: 1; margin: 0; position: absolute; overflow: hidden; border-radius: 50%; background: var(--wine-dark); border: 5px solid var(--cream); box-shadow: 0 18px 45px rgba(54,6,16,.28); }
.gif-circle img { width: 100%; height: 100%; object-fit: cover; }
.gif-circle-1 { top: 1%; right: 12%; }
.gif-circle-2 { top: 4%; left: 9%; }
.gif-circle-3 { top: 39%; right: 0; }
.gif-circle-4 { top: 42%; left: 0; }
.gif-circle-5 { bottom: 0; right: 12%; }
.gif-circle-6 { bottom: 2%; left: 10%; }

.language-section { padding-top: 0; padding-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--cream); gap: clamp(45px, 7vw, 110px); }
.language-art { min-height: 620px; position: relative; overflow: hidden; background: var(--blush); }
.language-art img { width: 100%; height: 100%; object-fit: cover; }
.art-caption { position: absolute; bottom: 24px; left: 24px; color: var(--wine-dark); font-size: 11px; letter-spacing: .25em; line-height: 1.4; }
.language-copy { padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(48px, 6vw, 78px); display: flex; flex-direction: column; justify-content: center; }
.language-copy h2, .statement-grid h2 { font-size: clamp(62px, 7vw, 112px); line-height: .82; letter-spacing: 0; margin-bottom: 32px; }
.language-copy > p:not(.eyebrow) { max-width: 630px; font-size: 23px; font-weight: 400; line-height: 1.5; }
.platforms { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.platforms span { padding: 8px 16px; border: 1px solid rgba(105,13,38,.35); border-radius: 999px; font-size: 18px; font-weight: 400; }

.curriculum { background: var(--wine); color: white; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 130px); }
.lesson-list { border-top: 1px solid rgba(255,255,255,.25); }
.lesson { min-height: 94px; display: grid; grid-template-columns: 45px 1fr 30px; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.25); }
.lesson span { color: var(--gold); font-family: var(--font-karantina), Arial, sans-serif; font-size: 20px; font-weight: 700; }
.lesson h3 { margin: 0; font-size: clamp(22px, 1.8vw, 29px); font-weight: 700; }
.lesson b { font-size: 22px; color: var(--rose); transition: .25s; }
.lesson:hover b { transform: translate(-5px, 5px); }

.for-who { background: var(--blush); }
.statement-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px, 8vw, 130px); align-items: end; }
.statements { border-top: 1px solid var(--wine); }
.statements p { font-size: 22px; font-weight: 400; line-height: 1.45; padding: 23px 0; margin: 0; border-bottom: 1px solid rgba(105,13,38,.4); }

.teacher { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--cream); gap: 80px; }
.teacher-name span { color: var(--wine); font-weight: 800; }
.teacher-name h2 { color: var(--wine); font-size: clamp(90px, 11vw, 174px); line-height: .65; letter-spacing: 0; margin-top: 38px; }
.teacher-copy { align-self: center; max-width: 760px; }
.teacher-copy p { font-size: 22px; font-weight: 400; line-height: 1.5; }
.teacher-copy .large-quote { font-family: var(--font-karantina), Arial, sans-serif; font-size: clamp(42px, 4.2vw, 68px); line-height: 1; color: var(--wine-dark); }

.reviews { background: var(--wine-black); color: white; }
.review-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review { padding: 30px; min-height: 255px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); display: flex; flex-direction: column; }
.stars { color: var(--gold); letter-spacing: .15em; font-size: 12px; margin-bottom: 25px; }
.review p { font-size: 21px; font-weight: 400; line-height: 1.5; color: #eadad5; flex: 1; }
.review strong { font-size: 19px; font-weight: 700; color: var(--rose); }

.final-cta { padding: clamp(70px, 8vw, 120px) 24px; text-align: center; background: radial-gradient(circle at 50% 15%, #851737, var(--wine-dark) 54%, var(--wine-black)); color: var(--cream); }
.final-cta .eyebrow { justify-content: center; }
.final-cta .eyebrow span { background: var(--gold); }
.final-cta h2 { font-size: clamp(58px, 7vw, 108px); line-height: .8; letter-spacing: 0; margin-bottom: 42px; }
.final-cta em { color: var(--gold); }
.offer-card { width: min(100%, 640px); margin: 0 auto; padding: clamp(30px, 5vw, 54px); position: relative; background: var(--cream); color: var(--wine-dark); border: 2px solid var(--gold); box-shadow: 0 22px 0 #170207, 0 42px 80px rgba(0,0,0,.36); }
.offer-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(105,13,38,.18); pointer-events: none; }
.offer-label { margin-bottom: 18px; color: var(--wine); font-size: 23px; font-weight: 700; }
.price { display: flex; justify-content: center; align-items: end; gap: 13px; color: var(--wine); }
.price span { font-family: var(--font-karantina), Arial, sans-serif; font-size: 105px; font-weight: 700; line-height: .8; }
.price small { font-weight: 700; font-size: 20px; }
.price-note { margin: 22px 0 20px; font-size: 22px; font-weight: 400; }
.offer-benefits { margin: 0 auto 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; font-size: 18px; font-weight: 400; }
.offer-benefits span { white-space: nowrap; }
.sales-button { width: 100%; min-height: 72px; padding: 17px 24px; position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; background: linear-gradient(180deg, #a62349, var(--wine)); color: white; border: 2px solid #cf6c88; font-size: clamp(25px, 3vw, 34px); font-weight: 700; box-shadow: 0 9px 0 #3b0715, 0 16px 32px rgba(54,6,16,.28); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sales-button::after { content: ""; position: absolute; inset: 4px 5px auto; height: 32%; background: linear-gradient(180deg, rgba(255,255,255,.25), transparent); pointer-events: none; }
.sales-button:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 11px 0 #3b0715, 0 20px 38px rgba(54,6,16,.32); }
.sales-button:active { transform: translateY(7px); box-shadow: 0 2px 0 #3b0715, 0 7px 15px rgba(54,6,16,.25); }
.sales-button b { font-size: 30px; }
.offer-trust { display: block; margin-top: 20px; color: #6c4c52; font-size: 16px; font-weight: 400; }
footer { min-height: 90px; padding: 25px clamp(24px, 7vw, 110px); display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--wine-dark); color: #dcbfba; font-size: 16px; font-weight: 400; }
.mobile-buy { display: none; }

@media (max-width: 980px) {
  .hero { height: auto; grid-template-columns: 1fr; }
  .hero-copy { order: 1; padding: 42px 28px 44px; }
  .hero-visual { order: 2; min-height: 650px; }
  .hero h1 { font-size: clamp(66px, 14vw, 96px); }
  .highlight-grid, .review-grid { grid-template-columns: 1fr; }
  .highlight-card { min-height: 330px; }
  .showcase-stage { min-height: 680px; }
  .course-video { width: min(58vw, 460px); }
  .gif-circle { width: clamp(112px, 18vw, 160px); }
  .language-section, .curriculum, .statement-grid, .teacher { grid-template-columns: 1fr; }
  .language-art { min-height: 520px; }
  .teacher-name h2 { line-height: .82; }
}

@media (max-width: 620px) {
  .topbar { height: 68px; padding: 0 18px; }
  .brand img { height: 42px; }
  .nav-cta { display: none; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 32px; }
  .hero-lead { font-size: 22px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-btn { width: 100%; }
  .text-link { align-self: flex-start; }
  .micro-proof { font-size: 14px; gap: 9px; }
  .hero-visual { min-height: 520px; }
  .hero-visual img { object-position: center top; }
  .orbit { width: 62px; height: 62px; font-size: 14px; }
  .section { padding: 62px 22px; }
  .showcase-heading { margin-bottom: 34px; }
  .showcase-heading h2 { font-size: 74px; }
  .showcase-heading > p:last-child { font-size: 21px; }
  .showcase-stage { min-height: auto; display: flex; flex-direction: column; gap: 34px; }
  .course-video { width: 100%; max-width: 500px; }
  .gif-orbit { position: static; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; pointer-events: auto; }
  .gif-circle { width: 100%; max-width: none; position: static; border-width: 4px; }
  .language-section { padding-left: 0; padding-right: 0; }
  .language-copy { padding: 46px 22px; }
  .language-art { min-height: 400px; }
  .section-heading h2, .curriculum-intro h2, .reviews-heading h2 { font-size: 70px; }
  .teacher { gap: 25px; }
  .teacher-name h2 { font-size: 102px; }
  .review-grid { margin-top: 42px; }
  .final-cta { padding: 66px 18px 84px; }
  .offer-card { padding: 32px 20px; box-shadow: 0 14px 0 #170207, 0 30px 55px rgba(0,0,0,.34); }
  .offer-benefits { align-items: center; flex-direction: column; }
  .sales-button { min-height: 68px; padding: 15px 14px; font-size: 27px; }
  footer { padding-bottom: 92px; flex-direction: column; align-items: flex-start; }
  .mobile-buy { display: block; position: fixed; z-index: 20; bottom: 12px; left: 12px; right: 12px; padding: 17px; background: var(--gold); color: var(--wine-dark); text-align: center; font-weight: 900; box-shadow: 0 8px 35px rgba(28,3,9,.35); }
}

/* Legal bar — vibe.jackandlara.com's footer, recoloured to the burgundy palette.
   Sits below the wine-dark CTA footer as a darker strip (--wine-black).

   The explicit `color` on .legalLinks is load-bearing, not decorative: the links
   are inside a <nav>, so any element-level `nav { color: ... }` rule added later
   would beat the colour inherited from .legal and silently repaint them. Verify
   the computed value rather than trusting the cascade:
     getComputedStyle(document.querySelector('.legalLinks a')).color
   should be rgb(239, 213, 209) — ~12.4:1 on #1c0309. */

.legal {
  padding: 32px max(24px, calc((100vw - 1152px) / 2));
  background: var(--wine-black);
  color: var(--blush);
}

.legalLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  color: var(--blush);
  font-size: 14px;
  font-weight: 400;
}

.legalLinks span { display: flex; align-items: center; gap: 32px; }
.legalLinks i { color: #7a4a4d; font-style: normal; }
.legalLinks a { transition: color .15s ease; }
.legalLinks a:hover { color: var(--gold); }

.legal p {
  margin: 0;
  color: var(--rose);
  text-align: center;
  font-size: 12px;
}

@media (max-width: 620px) {
  /* The legal bar is now the last element, so it — not footer — has to clear the
     fixed .mobile-buy bar. */
  footer { padding-bottom: 25px; }
  .legal { padding-bottom: 92px; }
  .legalLinks { flex-direction: column; gap: 16px; }
  .legalLinks span { gap: 16px; }
  .legalLinks i { display: none; }
}

/* In-page CTAs jump to the offer card itself, so the checkout button is what the
   visitor actually lands on. The margin leaves the headline peeking above it
   instead of slamming the card flush to the top edge. */
.offer-card { scroll-margin-top: 90px; }

/* Video showcase — burgundy band between the blush showcase and the cream
   language section, so the new block reads as its own chapter.
   Row 1: three 9:16 portraits. Row 2: 16:9 / 1:1 / 16:9, square in the middle.
   Equal grid columns mean the square renders taller than its neighbours, which is
   what makes the middle read as the focal point. */

.video-showcase { background: var(--wine-dark); color: var(--cream); }
.video-showcase em { color: var(--gold); }

.video-row {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  gap: clamp(14px, 1.8vw, 26px);
}
.video-row + .video-row { margin-top: clamp(20px, 3vw, 34px); }
.video-row-portrait { grid-template-columns: repeat(3, 1fr); }
.video-row-wide { grid-template-columns: repeat(3, 1fr); align-items: center; }

.video-embed {
  position: relative;
  overflow: hidden;
  background: var(--wine-black);
  border: 2px solid var(--gold);
  box-shadow: 0 18px 44px rgba(28,3,9,.42);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed.is-portrait { aspect-ratio: 9 / 16; }
.video-embed.is-wide     { aspect-ratio: 16 / 9; }
.video-embed.is-square   { aspect-ratio: 1 / 1; }

@media (max-width: 980px) {
  /* Wide clips get too small three-across on a tablet; portraits are narrow
     enough to survive. */
  .video-row-wide { grid-template-columns: 1fr; }
  .video-row-wide .video-embed { width: min(100%, 560px); margin: 0 auto; }
}

@media (max-width: 620px) {
  /* Three 9:16 clips across a phone would be ~100px wide — unwatchable. Stack
     them and cap the width so the section doesn't become a mile long. */
  .video-row-portrait { grid-template-columns: 1fr; }
  .video-row-portrait .video-embed { width: min(100%, 300px); margin: 0 auto; }
}