/* ─────────────────────────────────────────────────────────────
   Practical English for Real Life mini-course (pe-2609)

   Design system carried over from the Travel Diaries promo
   (td-2607), repalletted for Coffee Break English.

   House rules that matter here: signpost cards (solid header
   band, label reversed out, body on white below), gently
   rounded corners, no pills, no rounded rectangles with a
   single coloured edge, Montserrat never in italic.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Coffee Break English palette. Same hexes as the CBE video handouts. */
  --primary:      #123268;
  --primary-deep: #0b1f43;
  --accent:       #e1171a;
  --accent-deep:  #b31114;
  --on-accent:    #ffffff;   /* text that sits ON the accent: white on the red */
  --hero-em:      #8fb8ff;
  --soft:         #c3cbdd;
  --tint:         #d1daea;
  --bg:           #f5f7fb;
  --white:        #ffffff;
  --text:         #123268;
  --text-light:   #4a5a80;
  --shadow:       0 2px 14px rgba(11, 31, 67, 0.10);
  --shadow-lift:  0 12px 34px rgba(11, 31, 67, 0.17);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; line-height: 1.2; }

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ── Announcement bar ─────────────────────────────────────── */
.announce {
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  line-height: 1.4;
}
.announce .sep { opacity: 0.55; margin: 0 8px; }
@media (max-width: 620px) {
  .announce .sep { display: block; height: 0; margin: 2px 0; overflow: hidden; }
}

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  background: var(--primary-deep);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.nav-brand img { width: 40px; height: 40px; flex-shrink: 0; }
.nav-brand span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 20px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
  border-radius: 7px;
}
.nav-cta:hover { background: var(--accent-deep); }
@media (max-width: 640px) { .nav-brand span { display: none; } }

/* ── Hero (full-bleed photo) ──────────────────────────────── */
.hero {
  position: relative;
  color: var(--white);
  text-align: center;
  padding: 78px 24px 76px;
  overflow: hidden;
  background: var(--primary-deep);
}
.hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 62%;
  opacity: 0.66;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 16, 36, 0.50) 0%,
    rgba(6, 16, 36, 0.38) 42%,
    rgba(6, 16, 36, 0.68) 100%);
}
.hero-inner { max-width: 810px; margin: 0 auto; position: relative; z-index: 2; }
.hero-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.42);
  border-left: 3px solid var(--accent);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 16px;
  margin-bottom: 24px;
  border-radius: 0 6px 6px 0;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.35rem);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}
.hero h1 em { font-style: normal; color: var(--hero-em); font-weight: 700; }
.hero-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.86rem, 1.9vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 22px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.93);
  margin-bottom: 30px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero-note {
  display: block;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ── Buttons: solid, small radius, never a pill ───────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 16px 36px;
  text-decoration: none;
  transition: background 0.15s;
  border: 2px solid var(--accent);
  border-radius: 8px;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
/* Secondary CTA takes the brand colour, not the accent. */
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

.accent-bar { height: 5px; background: var(--accent); }

/* ── Generic section ──────────────────────────────────────── */
section { padding: 62px 0; }
section h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--primary);
}
section p { margin-bottom: 16px; font-size: 1.03rem; }
section p:last-child { margin-bottom: 0; }
.section-alt { background: var(--white); }
.section-tint { background: var(--tint); }
.section-lede { color: var(--text-light); font-size: 1.08rem; margin-bottom: 34px; }
.section-cta { margin-top: 30px; }

/* ── Signpost card: solid header band, body below ─────────── */
.sp {
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;          /* so the header band follows the corner radius */
}
.sp-head {
  background: var(--primary);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 20px;
}
.sp-body { padding: 22px 22px 26px; flex: 1; }

/* ── Steps ────────────────────────────────────────────────── */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 980px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-grid { grid-template-columns: 1fr; } }
.step h3 { font-size: 1.04rem; margin-bottom: 10px; color: var(--primary); }
.step p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 0; }

/* ── Scannable point list ─────────────────────────────────── */
.point-list { list-style: none; margin: 4px 0 18px; }
.point-list li {
  position: relative;
  padding: 5px 0 5px 30px;
  font-size: 1.03rem;
}
.point-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 16px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Included list ──────────────────────────────────────────
   The marker is an emoji or a line icon rather than a square bullet, in its own
   column so that wrapped lines stay indented past it rather than running back
   under the marker. */
.included-list { list-style: none; margin-top: 28px; }
.included-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--soft);
  font-size: 1.02rem;
}
.included-list li:last-child { border-bottom: none; }
.included-list strong { font-family: 'Montserrat', sans-serif; font-weight: 600; }

.inc-mark {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.62em;             /* the height of the first line, so it sits with the text */
}
.inc-emoji {
  font-size: 1.6rem;
  line-height: 1;
  /* pin the colour emoji fonts, or some platforms fall back to a mono glyph */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.inc-mark svg { width: 26px; height: 26px; color: var(--accent); }
.inc-text { flex: 1 1 auto; min-width: 0; }

@media (max-width: 520px) {
  .included-list li { gap: 11px; }
  .inc-mark { flex-basis: 28px; }
  .inc-emoji { font-size: 1.4rem; }
  .inc-mark svg { width: 23px; height: 23px; }
}

/* ── Story section over a photograph ──────────────────────── */
.story { position: relative; padding: 76px 0 80px; background: var(--primary-deep); }
.story-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 58%;
  opacity: 0.30;
}
.story-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,36,0.70) 0%, rgba(6,16,36,0.58) 50%, rgba(6,16,36,0.70) 100%);
}
.story .container { position: relative; z-index: 2; }
.story h2 { color: var(--white); }
.story p { color: rgba(255, 255, 255, 0.9); }
.story .section-lede { color: rgba(255, 255, 255, 0.84); }
.story .pull {
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  line-height: 1.55;
  color: var(--white);
  border-left: 3px solid var(--accent);
  padding-left: 24px;
  margin: 26px 0;
}

/* ── The phrase example ───────────────────────────────────── */
.phrase-card { margin: 30px auto 0; max-width: 620px; }
.phrase-card .sp-head { text-align: center; }
.phrase-card .sp-body { padding: 30px 28px 26px; text-align: center; }
.phrase-card .phrase {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--primary);
  line-height: 1.3;
  margin: 0;
  /* enough room for the longest phrase in the set, so the card does not
     jump about as you shuffle through them */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.13s ease;
}
.phrase-card .phrase.swapping { opacity: 0; }

/* Squared dots, matching the bullet motif elsewhere on the page. Never pills. */
.phrase-dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.phrase-dots span {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--soft);
  transition: background 0.13s ease;
}
.phrase-dots span.on { background: var(--accent); }

.phrase-caption {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin: 18px 0 0;
}
.phrase-shuffle { text-align: center; margin: 16px 0 30px; }
.btn-small {
  font-size: 0.76rem;
  padding: 11px 24px;
  border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .phrase-card .phrase, .phrase-dots span { transition: none; }
}

/* ── "Do you ever think this?" list ───────────────────────── */
.thoughts { list-style: none; margin: 26px 0 8px; }
.thoughts li {
  font-size: clamp(1.02rem, 2.1vw, 1.12rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--primary);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin-bottom: 18px;
}
.thoughts li:last-child { margin-bottom: 0; }

/* ── Quote / statement band ───────────────────────────────── */
.quote-section { background: var(--primary); color: var(--white); }
.quote-section h2 { color: var(--white); }
.quote-section p { color: rgba(255, 255, 255, 0.9); }
.quote-section .lead-line {
  font-size: clamp(1.14rem, 2.5vw, 1.35rem);
  color: var(--white);
  line-height: 1.55;
}

/* ── Pricing ──────────────────────────────────────────────── */
.pricing { background: var(--white); text-align: center; }
.price-card {
  max-width: 920px;
  margin: 32px auto 0;
  background: var(--bg);
  box-shadow: var(--shadow);
  border-radius: 14px;
  overflow: hidden;
}
.price-head {
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 18px;
}
.price-body { padding: 32px 30px 30px; }
.price-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 34px;
  align-items: center;
  text-align: left;
  padding: 36px 36px 34px;
}
@media (max-width: 760px) {
  .price-split { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px 26px; text-align: center; }
}

/* The course card. Lifted off the page with a real shadow rather than a border:
   a solid object sitting on the surface, not a box drawn around a picture. */
.price-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 2px 4px rgba(11, 31, 67, 0.10),
    0 12px 28px rgba(11, 31, 67, 0.22),
    0 30px 60px rgba(11, 31, 67, 0.18);
  transform: rotate(-1.2deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-art:hover img {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 2px 4px rgba(11, 31, 67, 0.10),
    0 18px 36px rgba(11, 31, 67, 0.24),
    0 40px 72px rgba(11, 31, 67, 0.20);
}
@media (max-width: 760px) { .price-art { max-width: 420px; margin: 0 auto; } }

.price-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 12px;
}
.price .now {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.05;
}
.price-detail .btn { margin-top: 22px; }
.price-note { font-size: 0.92rem; color: var(--text-light); margin-top: 16px; }

/* ── Currency ──────────────────────────────────────────────────
   Three variants of every price and every buy button are in the HTML; the edge
   function stamps data-currency on <html> from the visitor's country, or from
   their cookie once they have chosen, and only the matching one shows. With no
   attribute at all (a local preview) it falls back to dollars. */
.cur { display: none; }
html[data-currency="usd"] .cur-usd,
html[data-currency="gbp"] .cur-gbp,
html[data-currency="eur"] .cur-eur,
html:not([data-currency]) .cur-usd { display: inline; }
html[data-currency="usd"] a.cur-usd.btn,
html[data-currency="gbp"] a.cur-gbp.btn,
html[data-currency="eur"] a.cur-eur.btn,
html:not([data-currency]) a.cur-usd.btn { display: inline-block; }

.cur-switch {
  display: block;
  margin-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.cur-switch a { color: var(--text-light); text-decoration: none; padding: 2px 1px; border-bottom: 1px solid transparent; white-space: nowrap; }
.cur-switch a:hover { color: var(--primary); border-bottom-color: var(--accent); }
.cur-sep { color: var(--soft); margin: 0 6px; }
html[data-currency="usd"] .cur-opt-usd,
html[data-currency="gbp"] .cur-opt-gbp,
html[data-currency="eur"] .cur-opt-eur,
html:not([data-currency]) .cur-opt-usd { color: var(--primary); border-bottom-color: var(--accent); }

/* ── Final CTA over a photograph ──────────────────────────── */
.final {
  position: relative;
  background: var(--primary-deep);
  color: var(--white);
  text-align: center;
  padding: 76px 0 82px;
  overflow: hidden;
}
.final-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.26;
}
.final-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,36,0.74) 0%, rgba(6,16,36,0.62) 50%, rgba(6,16,36,0.8) 100%);
}
.final .container { position: relative; z-index: 2; }
.final h2 { color: var(--white); }
.final p { color: rgba(255, 255, 255, 0.88); max-width: 640px; margin: 0 auto 30px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--soft); padding: 20px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.03rem; margin-bottom: 8px; color: var(--primary); }
.faq-item p { font-size: 0.99rem; color: var(--text-light); margin-bottom: 12px; }
.faq-item p:last-child { margin-bottom: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--primary-deep);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 40px 24px 44px;
  font-size: 0.85rem;
}
.footer img { width: 46px; height: 46px; margin: 0 auto 16px; }
.footer a { color: rgba(255, 255, 255, 0.75); }
.credits { font-size: 0.74rem; margin-top: 14px; color: rgba(255, 255, 255, 0.36); line-height: 1.7; }
.credits a { color: rgba(255, 255, 255, 0.5); }

/* ── Hero video ───────────────────────────────────────────────
   The player sits under the headline, above the CTA. Swap the
   placeholder for the real embed: see the comment in index.html.
   ─────────────────────────────────────────────────────────── */
.hero-video { max-width: 640px; margin: 28px auto 30px; }
.hero-video .frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--primary-deep);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
  outline: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-video iframe,
.hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover;
}
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(155deg, #17407f 0%, #0b1f43 100%);
}
.video-placeholder .play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.video-placeholder .play svg { width: 22px; height: 22px; margin-left: 4px; fill: #fff; }
.video-placeholder .label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.video-note {
  margin-top: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.71rem;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Language switcher ────────────────────────────────────── */
.lang-switch {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 6px;
  margin-left: auto;        /* holds it at the right, beside the CTA, on a wide screen */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.lang-switch a { color: rgba(255,255,255,0.62); text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.lang-switch a:hover { color: #fff; border-bottom-color: var(--accent); }
.lang-switch .lang-on { color: #fff; border-bottom: 1px solid var(--accent); padding: 2px 0; }
.lang-switch .lang-sep { color: rgba(255,255,255,0.28); }
/* Below 900px the switcher takes a line of its own under the logo and the CTA,
   centred and full width. It used to be hidden outright below 760px, which left
   a phone visitor nothing but the footer switcher, 12,000px down the page. These
   pages sell English to Spanish, Italian and Portuguese speakers, and most of
   them arrive on a phone, so the way to change language has to be at the top.

   900, not 760: between those two the brand wordmark, the switcher and the CTA
   no longer fit on one line in the longer languages, and the nav wraps into an
   untidy two rows of its own accord. Stacking deliberately is better than that.
   Scoped to .nav so none of it reaches the footer switcher. */
@media (max-width: 900px) {
  .nav { row-gap: 11px; padding: 11px 18px; }
  .nav-actions { margin-left: auto; }
  .nav .lang-switch {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 0.74rem;
    gap: 7px;
  }
  /* Thumb-sized tap targets. The underline on the current language moves to
     text-decoration so that the padding can grow without the rule drifting
     away from the word. */
  .nav .lang-switch a,
  .nav .lang-switch .lang-on { padding: 9px 3px; border-bottom: 0; }
  .nav .lang-switch .lang-on {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
@media (max-width: 360px) { .nav .lang-switch { font-size: 0.68rem; gap: 5px; } }

.after-steps { padding: 0; margin-top: 34px; }
.thoughts-after { margin-top: 24px; }

/* ── "would you rather read this in X?" bar ───────────────────
   Injected at the edge when the visitor's country or browser suggests a
   language other than the one they are being shown. Solid tinted band, no
   border, no pill: a notice, not a button. */
.lang-suggest {
  background: var(--tint);
  color: var(--primary);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.lang-suggest a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.lang-suggest a:hover { border-bottom-color: var(--primary); }
.lang-suggest button {
  background: none;
  border: 0;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  white-space: nowrap;
}
.lang-suggest button:hover { color: var(--primary); }
@media (max-width: 520px) { .lang-suggest { font-size: 0.78rem; gap: 8px; } }

/* A second switcher in the footer, at every width. Someone who has read to the
   bottom and only then decided they would rather read it in their own language
   should not have to scroll back up for it. */
.lang-switch-foot {
  display: flex;
  justify-content: center;
  margin-left: 0;
  margin-bottom: 22px;
  font-size: 0.76rem;
}

/* ── The cohort section and its countdown ────────────────────
   Everyone goes through the ten days together, so the start date is a real
   piece of information rather than a pressure tactic. Solid units, gently
   rounded, no borders. */
.cohort { background: var(--primary); color: var(--white); }
.cohort h2 { color: var(--white); }
.cohort p { color: rgba(255, 255, 255, 0.88); }
.cohort-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-em);
  margin-bottom: 10px;
}
/* Left-aligned, like everything else in the section. */
.countdown-wrap { margin: 26px 0 30px; }
.countdown-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 14px;
}
.countdown { display: flex; gap: 12px; flex-wrap: wrap; }
.cd-unit {
  background: var(--primary-deep);
  padding: 14px 12px 11px;
  min-width: 88px;
  border-radius: 10px;
  text-align: center;
}
.cd-unit .n {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-unit .l {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 7px;
}
@media (max-width: 520px) {
  .countdown { gap: 8px; }
  .cd-unit { min-width: 0; flex: 1 1 0; padding: 12px 4px 9px; }
  .cd-unit .n { font-size: 1.5rem; }
  .cd-unit .l { font-size: 0.54rem; letter-spacing: 0.08em; }
}

.price-start {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 10px;
}