/* Global Pedagogy Lab — lab.learnwithgl.com (art direction: Lina)
   Tokens: agents/lina-ai/knowledge/gpl/tokens.json (GPL v1.0.0). Navy is for letters only, never a fill.
   Sky (#75bdf0) is a fill only. Signature: photographs that dissolve into the white field, as in the
   maumunoz.com deck; the four session headers are the one crisp, square exception. Mobile first. */
:root {
  --ink: #062f49; --ink-muted: #174e71; --action: #049bee; --action-text: #0b6b9f;
  --sky: #75bdf0; --sky-50: #e8f4fc; --error: #b42318; --paper: #F4F7FA; --hair: #E2E8F0;
  --grad-panel: linear-gradient(135deg, #75bdf0 0%, #039aed 35%, #039aed 100%);
  --grad-button: linear-gradient(180deg, #049bee 0%, #038ad3 100%);
  --grad-field: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 55%, #F4F7FA 100%);
  --r-sm: .5rem; --r-xl: 1rem; --r-2xl: 1.5rem; --r-3xl: 2rem;
  --shadow-rest: 0 4px 16px rgba(6,47,73,.08); --shadow-raised: 0 8px 32px rgba(6,47,73,.12);
  --shadow-float: 0 16px 48px rgba(6,47,73,.16); --shadow-action: 0 8px 28px rgba(4,155,238,.26);
  --ease: cubic-bezier(.2,.7,.2,1);
  --gutter: 16px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--grad-field); background-attachment: fixed; color: var(--ink-muted);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: -12%; pointer-events: none; z-index: 0;
  background-image: radial-gradient(52% 48% at 12% 8%, rgba(117,189,240,.30), transparent 64%),
    radial-gradient(46% 42% at 90% 18%, rgba(3,154,237,.14), transparent 64%),
    radial-gradient(58% 52% at 74% 96%, rgba(117,189,240,.20), transparent 64%);
  filter: blur(60px);
}
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .08; mix-blend-mode: multiply; background-image: var(--grain); }
main, header, footer { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--action-text); font-weight: 600; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Type */
h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 92px); }
h2 { font-size: clamp(32px, 4.8vw, 56px); }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.015em; line-height: 1.2; }
em.hl { font-family: Radley, Georgia, serif; font-style: italic; font-weight: 400; color: inherit; font-size: 1.08em; letter-spacing: 0; padding-right: .04em; }
.dot { color: var(--action); }
.on-fill .dot { color: var(--ink); }
.kicker { display: inline-block; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; line-height: 1.5; color: var(--action-text); }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 58ch; }
p { margin: 0 0 14px; }
b, strong { color: var(--ink); font-weight: 600; }

/* ---- Nav: frost bar, sticky */
.nav { position: sticky; top: 0; z-index: 50; padding: 12px 0; transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.nav.scrolled { background: rgba(255,255,255,.72); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); box-shadow: inset 0 -1px 0 rgba(226,232,240,.9); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo img { height: 32px; width: auto; }
.nav .btn { font-size: 15px; padding: 10px 20px; }
@media (max-width: 560px) { .nav .btn { display: none; } }

/* ---- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  background: var(--grad-button); color: #fff; font: inherit; font-weight: 700; font-size: 19px; line-height: 1.2;
  padding: 16px 30px; border-radius: 9999px; text-decoration: none; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-action);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 34px rgba(4,155,238,.32); }
.btn:hover .arr { transform: translateX(3px); }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.btn-block { width: 100%; }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-raised); }
.btn-white:hover { box-shadow: var(--shadow-float); }
.link-quiet { background: none; border: 0; padding: 8px 4px; font: inherit; font-weight: 600; color: var(--action-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { border-radius: 9999px; }

/* ---- Media: the signature. Photos dissolve into the field (mask), share its grain, and are graded cool.
   Each <figure class="media"> carries data-label = the slot description; a missing file shows a dashed placeholder. */
.media { position: relative; margin: 0; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.02); }
.media::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: var(--grain); }
.media.missing { background: linear-gradient(150deg, rgba(232,244,252,.95) 0%, rgba(117,189,240,.55) 100%); display: flex; align-items: center; justify-content: center; }
.media.missing img { display: none; }
.media.missing::before {
  content: attr(data-label); position: relative; z-index: 1; max-width: 30ch; text-align: center; padding: 14px 18px;
  font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink); border: 1.5px dashed rgba(6,47,73,.4); border-radius: var(--r-xl);
  background: rgba(255,255,255,.6);
}
/* Dissolve directions */
.fade-l { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 50%); }
.fade-r { -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 18%, #000 50%); mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 18%, #000 50%); }
.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.fade-lb {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 22%, #000 52%), linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 22%, #000 52%), linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-composite: intersect;
}
.fade-soft {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
}

/* ---- Hero */
.hero { position: relative; padding: 0 0 40px; }
.hero-media { aspect-ratio: 4 / 3.4; margin: 0 calc(var(--gutter) * -1); }
.hero-media.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.hero-cert { position: absolute; z-index: 3; top: -178px; right: 0; width: min(58%, 250px); }
.hero-text { position: relative; z-index: 2; margin-top: -8px; }
.hero h1 { margin: 12px 0 16px; }
.hero .lede { color: var(--ink-muted); }
.facts { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-xl); background: rgba(232,244,252,.9); color: var(--ink); }
.facts li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.hero-form { position: relative; z-index: 3; margin-top: 28px; }

@media (min-width: 1000px) {
  .hero { padding: 24px 0 64px; min-height: min(100vh, 980px); }
  .hero-media { position: absolute; top: -76px; right: 0; width: 60vw; height: calc(100% + 76px); aspect-ratio: auto; margin: 0; }
  .hero-media.fade-b { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 22%, #000 52%), linear-gradient(to bottom, #000 66%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 22%, #000 52%), linear-gradient(to bottom, #000 66%, transparent 100%); mask-composite: intersect; }
  .hero-media.missing { justify-content: flex-start; align-items: flex-end; padding: 0 0 18vh 16%; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; padding-top: 32px; }
  .hero-text { margin-top: 0; }
  .hero-cert { position: relative; top: auto; right: auto; width: 320px; margin: 36px 0 0 6px; }
  .hero-form { margin-top: 0; }
}

/* Certificate mockup (placeholder until Lina's file lands: swap .cert for <img class="cert-img">) */
.cert {
  aspect-ratio: 1.414; background: #fff; border-radius: 10px; transform: rotate(-4deg);
  box-shadow: 0 24px 60px rgba(6,47,73,.22); padding: 7% 8%; display: flex; flex-direction: column; color: var(--ink); position: relative;
}
.cert::before { content: ''; position: absolute; inset: 3.4%; border: 1px solid var(--sky-50); border-radius: 6px; pointer-events: none; }
.cert-top { display: flex; align-items: center; justify-content: space-between; }
.cert-top img { width: 17%; }
.cert-top span { font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--action-text); }
.cert-label { margin-top: 6%; font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.cert-name { font-family: Radley, Georgia, serif; font-style: italic; font-size: clamp(20px, 6vw, 28px); line-height: 1.1; margin: 2% 0; }
.cert-title { font-size: 8.5px; font-weight: 600; line-height: 1.3; max-width: 30ch; }
.cert-signs { margin-top: auto; display: flex; gap: 10%; }
.cert-signs div { flex: 1; border-top: 1px solid var(--ink-muted); padding-top: 3px; font-size: 6.5px; color: var(--ink-muted); line-height: 1.3; }
.cert-img { transform: rotate(-4deg); filter: drop-shadow(0 24px 40px rgba(6,47,73,.22)); }

/* ---- Frost card (the form, session tiles' text, funnel screens) */
.card {
  border-radius: var(--r-2xl); padding: 24px 20px;
  background: linear-gradient(150deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 100%);
  backdrop-filter: blur(36px) saturate(150%); -webkit-backdrop-filter: blur(36px) saturate(150%);
  border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, var(--shadow-float); min-width: 0;
}
@media (min-width: 720px) { .card { padding: 32px; } }
.form-card h2 { font-size: clamp(26px, 3vw, 32px); }
.form-card .urgency { margin: 8px 0 20px; font-size: 15px; }
.field { margin: 0 0 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.input {
  display: block; width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 12px 14px;
  border-radius: var(--r-xl); border: 1px solid #cbd5e1; background: rgba(255,255,255,.95); min-height: 48px; appearance: none; -webkit-appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23174e71' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 4px rgba(4,155,238,.16); }
.input[aria-invalid="true"] { border-color: var(--error); }
.phone { display: grid; grid-template-columns: 132px 1fr; gap: 8px; }
.err { display: none; color: var(--error); font-size: 13.5px; margin: 6px 0 0; line-height: 1.4; }
.err.show { display: block; animation: rise .35s var(--ease); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; margin: 6px 0 16px; color: var(--ink-muted); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { display: none; background: #fdf0ef; color: var(--error); border-radius: var(--r-xl); padding: 12px 14px; font-size: 14.5px; margin: 0 0 14px; }
.form-alert.show { display: block; }
.price { margin: 16px 0 0; font-size: 14.5px; text-align: center; }
.price .strike { text-decoration: line-through; text-decoration-color: var(--ink-muted); }
.price b { display: block; }
.closed-box h2 { margin-bottom: 10px; }

/* ---- Sections */
.section { padding: 88px 0 0; position: relative; }
@media (min-width: 720px) { .section { padding-top: 140px; } }
.section-head { max-width: 760px; margin-bottom: 32px; }
.section-head h2 { margin: 12px 0 16px; }

/* Split: text beside a dissolving image */
.split { display: grid; gap: 28px; align-items: center; }
.split .media { aspect-ratio: 3 / 4; border-radius: var(--r-3xl); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.flip > :first-child { order: 2; }
  .split .media.bleed-r { margin-right: calc((100vw - min(1200px, 100vw)) / -2 - var(--gutter)); border-radius: 0; }
  .split .media.bleed-l { margin-left: calc((100vw - min(1200px, 100vw)) / -2 - var(--gutter)); border-radius: 0; }
}
.qs { list-style: none; margin: 28px 0 22px; padding: 0; display: grid; gap: 18px; }
.qs li { position: relative; padding-left: 40px; color: var(--ink); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; }
.qs { counter-reset: q; }
.qs li { counter-increment: q; }
.qs li::before { content: counter(q); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-button); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }

/* Facilitators: full-size portraits that dissolve at the base, name on the dissolve */
.people { display: grid; gap: 56px; }
.person { display: grid; gap: 22px; align-items: end; }
.portrait { aspect-ratio: 3 / 4; border-radius: var(--r-3xl) var(--r-3xl) 0 0; }
.portrait.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, #000 64%, transparent 100%); }
.person-name { position: relative; z-index: 2; margin-top: -88px; padding: 0 4px; }
.person-name h3 { font-size: clamp(26px, 3vw, 34px); }
.person-name .kicker { margin-top: 6px; }
.person p { font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.7; margin: 0; max-width: 58ch; }
@media (min-width: 900px) {
  .person { grid-template-columns: 5fr 7fr; gap: 64px; align-items: end; padding-bottom: 8px; }
  .person.flip { grid-template-columns: 7fr 5fr; }
  .person.flip > figure, .person.flip > .person-photo { order: 2; }
}

/* About: one quiet line of brand */
.about { display: grid; gap: 24px; align-items: center; background: var(--sky-50); border-radius: var(--r-3xl); padding: 32px 22px; }
.about img { width: 120px; }
.about p { color: var(--ink); margin: 0; font-size: clamp(16px, 1.5vw, 18px); max-width: 66ch; }
@media (min-width: 820px) { .about { grid-template-columns: auto 1fr; gap: 44px; padding: 48px; } .about img { width: 150px; } }

/* Sessions: the crisp square exception */
.carousel { position: relative; margin: 0 calc(var(--gutter) * -1) 24px; }
@media (min-width: 1000px) {
  .carousel { margin-left: 0; margin-right: calc(50% - 50vw); }
  .sessions { padding-left: 0; scroll-padding-inline: 0; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 72px); mask-image: linear-gradient(to left, transparent 0, #000 72px); }
  .carousel-nav { justify-content: flex-start; padding-left: 4px; }
}
.sessions {
  list-style: none; margin: 0; padding: 8px var(--gutter) 28px; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(84vw, 380px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sessions::-webkit-scrollbar { display: none; }
.sessions:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: var(--r-2xl); }
@media (min-width: 1000px) { .sessions { grid-auto-columns: 400px; gap: 24px; } }
.session { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r-3xl); overflow: hidden; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow-raised); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.session:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.session .media { aspect-ratio: 1 / 1; }
.session .media img { transition: transform 1.2s var(--ease); }
.session:hover .media img { transform: scale(1.03); }
.session-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.session-when { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.session-when .s-time { font-weight: 400; color: var(--ink-muted); }
.session-base { font-size: 13px; }
.session h3 { margin: 4px 0 2px; }
.session p { margin: 0; font-size: 15px; }
.format-note { font-size: 15px; max-width: 70ch; }
.tz-note { font-size: 14px; margin: 0 0 18px; }
details.countries { background: rgba(255,255,255,.8); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: 4px 18px; }
details.countries summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--ink); }
.tbl-wrap { overflow-x: auto; margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hair); color: var(--ink); vertical-align: top; }
th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; background: var(--paper); }
td.t { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Requirements: three real numbers */
.reqs { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
@media (min-width: 820px) { .reqs { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.reqs li { padding: 26px 24px; border-radius: var(--r-2xl); background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow-rest); }
.reqs .n { display: block; color: var(--ink); font-weight: 600; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; margin-bottom: 10px; }
.reqs .n em { font-family: Radley, Georgia, serif; font-style: italic; font-weight: 400; font-size: .62em; letter-spacing: 0; color: var(--ink-muted); }
.reqs span:not(.n) { color: var(--ink); font-size: 15.5px; }
.req-detail { max-width: 70ch; }

/* Recognition: THE one GPL panel moment */
.panel { position: relative; overflow: hidden; border-radius: var(--r-3xl); background: var(--grad-panel); color: #fff; box-shadow: var(--shadow-float); padding: 112px 22px 30px; }
.panel::after { content: ''; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; background-image: var(--grain); pointer-events: none; }
.panel > * { position: relative; z-index: 1; }
.panel .panel-seal { position: absolute; top: 24px; right: 22px; width: clamp(64px, 9vw, 104px); }
.panel .kicker, .panel h2, .panel p { color: #fff; }
.panel h2 { margin: 12px 0 14px; max-width: 18ch; }
.panel p { max-width: 58ch; }
.panel .price-line { font-weight: 600; margin: 18px 0 22px; }
@media (min-width: 720px) { .panel { padding: 200px 56px 52px; } .panel .panel-seal { top: 44px; right: 52px; } }

/* Bonus */
.bonus .media { aspect-ratio: 4 / 3; border-radius: var(--r-3xl); }

/* Self-selection */
.fit { display: grid; gap: 18px; }
@media (min-width: 820px) { .fit { grid-template-columns: 1fr 1fr; gap: 24px; } }
.fit > div { padding: 28px 24px; border-radius: var(--r-2xl); }
.fit .yes { background: rgba(255,255,255,.85); box-shadow: var(--shadow-raised); }
.fit .no { background: rgba(244,247,250,.8); }
.fit ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.fit li { position: relative; padding-left: 34px; font-size: 15.5px; }
.fit li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.fit .yes li::before { content: '✓'; background: var(--sky-50); color: var(--action-text); }
.fit .no li::before { content: '✕'; background: #fff; color: var(--ink-muted); }

/* Final CTA: wide band, image dissolving into the field on the left */
.cta { position: relative; overflow: hidden; border-radius: var(--r-3xl); min-height: 460px; display: flex; align-items: center; }
.cta .media { position: absolute; inset: 0 0 0 30%; }
.cta-text { position: relative; z-index: 2; padding: 40px 22px; max-width: 560px; }
.cta-text h2 { margin: 12px 0 14px; }
@media (max-width: 719px) {
  .cta { flex-direction: column; align-items: stretch; min-height: 0; }
  .cta .media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .cta .media.fade-l { -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
  .cta-text { padding: 0 4px; margin-top: -24px; }
}
@media (min-width: 720px) { .cta-text { padding: 56px; } }

/* Footer */
.footer { margin-top: 112px; padding: 36px 0 120px; border-top: 1px solid var(--hair); font-size: 14px; }
.footer .wrap { display: flex; flex-direction: column; gap: 18px; }
.footer img { width: 150px; }
@media (min-width: 720px) { .footer { padding-bottom: 56px; } .footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Mobile sticky CTA: appears once the form leaves the screen */
.mcta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; padding: 8px; border-radius: 9999px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-float); transform: translateY(140%); transition: transform .5s var(--ease); }
.mcta.show { transform: none; }
.mcta .btn { width: 100%; font-size: 17px; padding: 14px 20px; }
@media (min-width: 900px) { .mcta { display: none; } }

/* ---- Phase visibility: <html data-phase="free|paid|closed"> + data-show="free paid" */
html[data-phase="free"] [data-show]:not([data-show~="free"]),
html[data-phase="paid"] [data-show]:not([data-show~="paid"]),
html[data-phase="closed"] [data-show]:not([data-show~="closed"]) { display: none !important; }

/* ---- Motion: one calm language. Load stagger in the hero, reveal-on-scroll below, the certificate floats. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes cert-in { from { opacity: 0; transform: translateY(26px) rotate(-9deg); } to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(-3.4deg); } }
.js .hero [data-stagger] { opacity: 0; animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
.js .hero-media img { animation: settle 2.2s var(--ease) both; }
.js .hero-cert .cert, .js .hero-cert .cert-img { animation: cert-in 1.2s var(--ease) .65s both, float 7s ease-in-out 1.9s infinite; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .media[data-reveal] img { transform: scale(1.06); transition: transform 1.8s var(--ease); }
.js .media[data-reveal].in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero [data-stagger], .js [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .hero-media img, .js .hero-cert .cert, .js .hero-cert .cert-img, .js .media[data-reveal] img { animation: none !important; transform: none; transition: none !important; }
  .js .hero-cert .cert { transform: rotate(-4deg); }
  .btn, .session, .session .media img, .mcta { transition: none !important; }
}

/* ---- Funnel screens (2 to 4) */
.funnel { min-height: 100vh; display: flex; flex-direction: column; }
.funnel main { flex: 1; padding: 8px 0 64px; }
.funnel .card { max-width: 640px; margin: 0 auto; animation: rise .8s var(--ease) both; }
.funnel .footer { margin-top: 0; padding-bottom: 48px; }
.progress { display: flex; gap: 6px; margin: 0 0 18px; }
.progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--hair); }
.progress span.on { background: var(--action); }
.funnel h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 12px; }
.slot { border: 1px solid var(--hair); border-radius: var(--r-xl); padding: 14px; margin: 0 0 12px; background: rgba(255,255,255,.7); animation: rise .5s var(--ease) both; }
.slot-head { font-size: 12.5px; font-weight: 600; color: var(--action-text); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.slot-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .slot-grid { grid-template-columns: 1fr 1fr; } .slot-grid .full { grid-column: 1 / -1; } }
.slot .field { margin: 0; }
.actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 18px; }
.actions .link-quiet { align-self: center; }
.small { font-size: 13.5px; }
.center { text-align: center; }
.next-card { background: var(--sky-50); border-radius: var(--r-xl); padding: 18px; margin: 18px 0; color: var(--ink); }
.next-card .session-date { font-size: 18px; color: var(--ink); font-weight: 600; }
.next-card .session-title { font-size: 14px; margin-top: 6px; }
.wa-btn svg { width: 22px; height: 22px; flex: 0 0 22px; }
@media (prefers-reduced-motion: reduce) { .funnel .card, .slot, .err.show { animation: none; } }

/* ---- Round 2 (Mau, 2026-10-12) */
/* Carousel controls */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.cbtn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-rest); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s; }
.cbtn svg { width: 20px; height: 20px; }
.cbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.cbtn[disabled] { opacity: .35; cursor: default; transform: none; }
.cdots { display: flex; gap: 8px; }
.cdots span { width: 8px; height: 8px; border-radius: 9999px; background: var(--hair); transition: width .4s var(--ease), background .4s var(--ease); }
.cdots span.on { width: 26px; background: var(--action); }

/* Struck regular price and the gift */
.was { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--ink-muted); }
.was s { text-decoration-thickness: 2px; text-decoration-color: var(--error); color: var(--ink); }
.emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: .82em; vertical-align: .04em; }

/* Reserve buttons: hover grows the button and slides the gift in between the words and the arrow */
.btn-reserve { gap: 0; }
.btn-reserve .gift { display: inline-block; max-width: 0; opacity: 0; transform: scale(.4) rotate(-20deg); overflow: hidden; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; transition: max-width .45s var(--ease), opacity .35s var(--ease), transform .45s var(--ease), margin .45s var(--ease); }
.btn-reserve .arr { margin-left: 10px; }
.btn-reserve:hover, .btn-reserve:focus-visible { transform: translateY(-2px) scale(1.05); }
.btn-reserve:hover .gift, .btn-reserve:focus-visible .gift { max-width: 1.6em; opacity: 1; transform: none; margin-left: 10px; }
.btn-reserve:active { transform: scale(.98); }

/* About: seal + title + text */
.about-title { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; }
.about > img { width: 96px; }
@media (min-width: 820px) { .about > img { width: 128px; } }

/* Recognition panel with the certificate on the right */
.panel-grid { display: grid; gap: 28px; align-items: end; }
.panel-cert { display: flex; justify-content: center; padding: 8px 6px 4px; }
.panel-cert .cert { width: min(100%, 360px); transform: rotate(3deg); box-shadow: 0 30px 70px rgba(6,47,73,.30); }
.js .panel.in .panel-cert .cert { animation: cert-in-r 1.2s var(--ease) .3s both, float-r 7s ease-in-out 1.6s infinite; }
@keyframes cert-in-r { from { opacity: 0; transform: translateY(28px) rotate(9deg); } to { opacity: 1; transform: translateY(0) rotate(3deg); } }
@keyframes float-r { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-7px) rotate(2.4deg); } }
@media (min-width: 900px) {
  .panel { padding-top: 64px; }
  .panel-grid { grid-template-columns: 1.1fr .9fr; gap: 40px; }
  .panel-text { padding-top: 120px; }
  .panel-cert { padding: 40px 0 0; }
  .panel-cert .cert { width: 400px; }
}
.panel-cert .cert-title { font-size: 9.5px; }

/* Self-selection: green checks for yes, red marks for no (Mau's call, an exception to GPL's blue-only rule) */
.fit .yes li::before { content: '✓'; background: #e3f4ea; color: #1b7a43; }
.fit .no li::before { content: '✕'; background: #fdecea; color: var(--error); }

/* Countdown (real deadline from edition.js) */
.countdown { margin: 18px 0 22px; }
.cd-label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--action-text); margin: 0 0 10px; }
.cd-units { display: flex; gap: 10px; }
.cd-units div { min-width: 68px; padding: 12px 8px 10px; border-radius: var(--r-xl); text-align: center; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow-rest); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.cd-units b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cd-units span { font-size: 11.5px; color: var(--ink-muted); }
.cd-units b.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { opacity: .35; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn-reserve .gift, .cdots span, .cbtn { transition: none; }
  .js .panel.in .panel-cert .cert, .cd-units b.tick { animation: none; }
  .btn-reserve:hover, .btn-reserve:focus-visible { transform: none; }
}
@media (min-width: 1000px) { .carousel .sessions { padding-left: 0; scroll-padding-inline: 0; } }
@media (min-width: 1000px) { .hero-media.missing::before { display: none; } .cta-text { max-width: 640px; } }

/* ---- Round 3 (Mau, 2026-10-12): funnel screens */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.funnel .invite-card { max-width: 860px; }
.funnel .slot { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--hair); border-radius: var(--r-xl); background: rgba(255,255,255,.75); margin: 0 0 10px; min-width: 0; }
.slot-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sky-50); color: var(--action); display: grid; place-items: center; margin-top: 2px; }
.slot-icon svg { width: 24px; height: 24px; }
.funnel .slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.funnel .slot-grid .email { grid-column: 1 / -1; }
@media (min-width: 680px) { .funnel .slot-grid { grid-template-columns: 1fr 1fr 1.5fr; } .funnel .slot-grid .email { grid-column: auto; } }
.funnel .slot .input { min-height: 46px; padding: 10px 12px; }

/* Step 3: wait, join */
.funnel .wa-card { max-width: 680px; }
.wa-card .lede { font-size: clamp(17px, 2vw, 19px); margin: 0 0 18px; }
.wa-list-head { font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.ticks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; font-size: 15.5px; color: var(--ink); }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #e3f4ea; color: #1b7a43; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.wa-btn.done { background: #fff; color: var(--ink); box-shadow: var(--shadow-rest); border: 1px solid var(--hair); font-size: 16px; padding: 12px 20px; }
.finish { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.finish.in { opacity: 1; transform: none; }
.finish p { margin: 4px 0 10px; }
.btn-finish:hover { transform: translateY(-2px) scale(1.03); }
.btn-finish:hover .arr { transform: translateX(4px); }

/* Step 4: the next workshop pops in */
.funnel .thanks-card { max-width: 720px; }
.next { display: grid; gap: 0; margin: 18px 0 20px; border-radius: var(--r-2xl); overflow: hidden; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-raised);
  opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .8s var(--ease), transform .8s cubic-bezier(.2,1.25,.3,1); }
.next.pop { opacity: 1; transform: none; }
.next .media { aspect-ratio: 1 / 1; }
.next.pop .media img { animation: settle 1.6s var(--ease) both; }
.next-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.next-body h2 { font-size: clamp(22px, 3vw, 28px); margin: 6px 0 4px; }
.learn-head { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--action-text); }
.next-body p:last-child { margin: 0; font-size: 15.5px; }
@media (min-width: 640px) { .next { grid-template-columns: 240px 1fr; } .next .media { aspect-ratio: auto; height: 100%; min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .finish, .next { transition: none; opacity: 1; transform: none; } .next.pop .media img { animation: none; } }

/* ---- Round 4 (Mau, 2026-10-12): the workshops as a shuffling deck of 16:9 cards */
.deck { position: relative; margin: 0 0 24px; }
.stack { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 760px; outline: none; touch-action: pan-y; }
.stack:focus-visible { outline: 2px solid var(--action); outline-offset: 8px; border-radius: var(--r-3xl); }
.stack .session {
  position: absolute; left: 0; right: 0; top: var(--peek, 64px); margin: 0;
  transform-origin: 50% 0; transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform; cursor: grab;
}
.stack .session:hover { transform: none; }
.stack .session .media { aspect-ratio: 16 / 9; }
.stack .session[data-pos="0"] { z-index: 4; transform: translateY(0) scale(1); box-shadow: var(--shadow-float); }
.stack .session[data-pos="1"] { z-index: 3; transform: translateY(-22px) scale(.95); filter: saturate(.85) brightness(.98); }
.stack .session[data-pos="2"] { z-index: 2; transform: translateY(-42px) scale(.90); filter: saturate(.7) brightness(.96); }
.stack .session[data-pos="3"] { z-index: 1; transform: translateY(-60px) scale(.85); filter: saturate(.6) brightness(.94); opacity: .9; }
.stack .session:not([data-pos="0"]) { pointer-events: none; }
.stack .session:not([data-pos="0"]) .session-body { visibility: hidden; }
/* Next: the front card lifts away to the side, then tucks in behind the others */
.stack .session.to-back { animation: to-back .8s var(--ease) both; }
@keyframes to-back {
  0%   { z-index: 5; transform: translateY(0) scale(1) rotate(0); }
  45%  { z-index: 5; transform: translate(-58%, -30px) scale(.92) rotate(-7deg); }
  55%  { z-index: 0; transform: translate(-54%, -46px) scale(.88) rotate(-6deg); }
  100% { z-index: 1; transform: translateY(-60px) scale(.85) rotate(0); }
}
/* Previous: the back card slides out and lands on top */
.stack .session.to-front { animation: to-front .8s var(--ease) both; }
@keyframes to-front {
  0%   { z-index: 1; transform: translateY(-60px) scale(.85) rotate(0); }
  45%  { z-index: 1; transform: translate(58%, -46px) scale(.9) rotate(7deg); }
  55%  { z-index: 5; transform: translate(54%, -30px) scale(.94) rotate(6deg); }
  100% { z-index: 5; transform: translateY(0) scale(1) rotate(0); }
}
.deck .carousel-nav { margin-top: 22px; }
.deck .cbtn[disabled] { opacity: 1; }
@media (max-width: 560px) {
  .stack { --peek: 40px; }
  .stack .session[data-pos="1"] { transform: translateY(-13px) scale(.95); }
  .stack .session[data-pos="2"] { transform: translateY(-25px) scale(.9); }
  .stack .session[data-pos="3"] { transform: translateY(-36px) scale(.85); }
}
@media (prefers-reduced-motion: reduce) { .stack .session { transition: none; } .stack .session.to-back, .stack .session.to-front { animation: none; } }

/* Schedule by country: centered summary with a clock */
details.countries summary { list-style: none; text-align: center; }
details.countries summary::-webkit-details-marker { display: none; }
details.countries summary::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
details.countries[open] summary::after { transform: translateY(1px) rotate(-135deg); }

/* ---- Round 5: the regular value, big everywhere (Mau: the selling point) */
.value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; }
.value-label { flex-basis: 100%; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.value-price { position: relative; font-size: clamp(34px, 4.4vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); text-decoration: none; }
.value-price::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: 4px; border-radius: 4px; background: var(--error); transform: rotate(-8deg); transform-origin: center; }
.value-now { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--action-text); }
.value-hero { margin: 24px 0 0; }
.value-form { margin: 0 0 10px; }
.value-form .value-price { font-size: clamp(32px, 3.4vw, 40px); }
.value-cta { margin: 14px 0 6px; }
.panel .value-label, .panel .value-price, .panel .value-now { color: #fff; }
.panel .value-price::after { background: #fff; }
.value-panel { margin: 22px 0 4px; }
.panel .price-line { margin-top: 4px; }
.js .value-price::after { transform: rotate(-8deg) scaleX(0); transition: transform .7s var(--ease) .5s; }
.js .value.in .value-price::after, .js .in .value-price::after, .js .hero .value-price::after { transform: rotate(-8deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js .value-price::after { transform: rotate(-8deg); transition: none; } }
.value-form .value-now, .value-panel .value-now, .value-cta .value-now { display: none; }

/* ---- Round 6: schedule note and flags */
.tz-note { font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; color: var(--ink); margin: 0 0 22px; }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.flags li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.flag { font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 18px; line-height: 1; }
details.countries td { padding: 14px 8px; }
details.countries td.t { font-weight: 600; font-size: 15px; }
@media (max-width: 600px) {
  details.countries table, details.countries tbody, details.countries tr, details.countries td { display: block; }
  details.countries thead { display: none; }
  details.countries tr { padding: 14px 0; border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px; }
  details.countries td { border: 0; padding: 0; }
  details.countries td:first-child { flex-basis: 100%; }
  details.countries td.t { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-sm); background: var(--sky-50); font-size: 14px; }
  details.countries td.t::before { content: attr(data-when); font-weight: 400; font-size: 12.5px; color: var(--ink-muted); }
}

/* ---- Mobile pass (2026-10-12) */
.btn-reserve > span { white-space: nowrap; }
@media (max-width: 999px) { .value-hero { display: none; } }          /* the form right below carries the $47 on phones */
@media (max-width: 560px) {
  .btn { font-size: 17px; padding: 15px 22px; }
  .btn-reserve .arr { margin-left: 8px; }
  .btn-reserve:hover .gift, .btn-reserve:focus-visible .gift { margin-left: 8px; }
  .section { padding-top: 76px; }
  .section-head { margin-bottom: 24px; }
  .panel { padding: 96px 20px 26px; }
  .cta-text .btn, .panel .btn, #programa .btn { width: 100%; }
  .cd-units { gap: 8px; }
  .cd-units div { min-width: 0; flex: 1; }
  .facts li { font-size: 13px; padding: 7px 12px; }
}
@media (max-width: 370px) {
  h1 { font-size: 40px; }
  .btn { font-size: 16px; padding: 14px 18px; }
  .phone { grid-template-columns: 122px 1fr; }
  #dial { padding-left: 12px; padding-right: 28px; background-position: right 10px center; font-size: 15px; }
}

/* ---- Photo crops: keep each subject inside whatever crop the screen size makes */
.hero-media img { object-position: 62% 40%; }
.fade-l img { object-position: 70% 50%; }
.fade-r img { object-position: 30% 50%; }
.portrait img { object-position: 50% 20%; }
.cta .media img { object-position: 70% 50%; }
@media (max-width: 719px) { .cta .media { aspect-ratio: 4 / 3; } }
/* Thank-you: the next workshop uses the same 16:9 header as the deck, on every screen size */
.next { grid-template-columns: 1fr !important; }
.next .media { aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important; }

/* ---- Round 7: bigger lockups, the form button's ✅ and confetti */
.nav-logo img { height: 44px; }
@media (max-width: 560px) { .nav-logo img { height: 38px; } }
.footer img { width: 300px; }
@media (max-width: 719px) { .footer img { width: 240px; } }
.btn-submit .gift { font-size: .95em; }
.btn-submit.sent { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 40px rgba(4,155,238,.4); }
.btn-submit.sent .gift { max-width: 1.6em; opacity: 1; transform: none; margin-left: 10px; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; }
body.leaving main, body.leaving header, body.leaving footer, body.leaving .mcta { opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }

/* ---- Name split + phone certificate placement */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 999px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-cert { order: -1; position: relative; top: auto; right: auto; align-self: flex-end; width: min(62%, 280px); margin: -132px 4px 22px 0; }
}
.hero h1 { font-size: clamp(42px, 6vw, 78px); }

/* Facilitator LinkedIn links */
.person-name .kicker { display: block; }
.li { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 14px 7px 10px; border-radius: 9999px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-rest); color: var(--action-text); font-size: 14px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.li svg { width: 16px; height: 16px; color: #0a66c2; }
.li:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.hero-media img { object-position: 85% 45%; }

/* ---- Hero with the real photo (2026-10-12): the photo lives in the text column so the form never covers it.
   Phones: photo first, full bleed, certificate over its bottom-right corner. Desktop: photo under the price, certificate overlapping its corner. */
.hero-visual { position: relative; }
.hero-visual .hero-media { position: relative; top: auto; right: auto; width: auto; height: auto; margin: 0; border-radius: var(--r-3xl); aspect-ratio: 4 / 3; box-shadow: var(--shadow-raised); -webkit-mask-image: none; mask-image: none; }
.hero-visual .hero-media img { object-position: 30% 55%; }
.hero-visual .hero-cert { position: absolute; top: auto; left: auto; right: -18px; bottom: -44px; width: min(52%, 300px); margin: 0; order: 0; }
@media (max-width: 999px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-visual { order: -2; margin: 0 calc(var(--gutter) * -1) 64px; }
  .hero-visual .hero-media { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3.2;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .hero-visual .hero-cert { right: var(--gutter); bottom: -40px; width: min(56%, 260px); }
}
@media (min-width: 1000px) {
  .hero { min-height: 0; padding-bottom: 96px; }
  .hero-visual { margin-top: 28px; margin-right: 24px; }
}
.person { align-items: center !important; }

/* WhatsApp button: WhatsApp green (deepened so the white label clears 3:1 as large bold text) */
.wa-btn:not(.done) { background: linear-gradient(180deg, #1fa855 0%, #128c4a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(18,140,74,.35); }
.wa-btn:not(.done):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 36px rgba(18,140,74,.45); }
.wa-btn:not(.done):focus-visible { outline-color: #128c4a; }