/* EdgeLabFX — layout modelled on bendelport.com
   Fonts: Bricolage Grotesque (headings, 750, tight tracking) + Geist (body) */

:root {
  --bg: #05120d;
  --ink: #f1f4f0;
  --muted: #a6b3ab;
  --dim: #6c7a72;
  --green: #2f9a5c;
  --green-hi: #38b46c;
  --mint: #34d399;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.1);
  --r: 22px;
  --f-head: "Bricolage Grotesque", Geist, system-ui, sans-serif;
  --f-body: Geist, -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Fixed backdrop: the video still, darkened and blurred (like Ben's beach photo) */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47, 154, 92, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(5, 18, 13, 0.55) 0%, rgba(5, 18, 13, 0.88) 45%, #05120d 100%),
    url("./bg-blur.jpg") center top / cover no-repeat;
}

/* Type — copied from bendelport.com's scale */
h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 750;
  font-optical-sizing: auto;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.02em; }
.lead { color: var(--muted); font-size: 1.02rem; max-width: 560px; margin-top: 14px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Buttons — pill, Geist 600 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 1rem; line-height: 1.6;
  padding: 12px 24px; border-radius: 999px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 30px -8px rgba(47, 154, 92, .7); }
.btn-primary:hover { background: var(--green-hi); }
.btn-ghost { background: var(--glass-hi); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { padding: 8px 18px; font-size: .9rem; }
.btn-lg { padding: 14px 30px; }
.btn-block { width: 100%; }
.arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Glass card */
.card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* NAV */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(5, 18, 13, .78); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-in { max-width: 1080px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { height: 30px; width: auto; }
.nav-links { display: none; gap: 28px; font-size: .92rem; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
@media (min-width: 760px) { .nav-links { display: flex; } }

/* HERO: headline → video → CTA */
.hero { padding: 104px 0 40px; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { max-width: 20ch; text-wrap: balance; }
.vid {
  position: relative; width: 100%; max-width: 720px;
  margin: 32px auto 30px;
  aspect-ratio: 848 / 464;
  border-radius: 20px; overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.vid video { width: 100%; height: 100%; object-fit: cover; }
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease;
}
.vid-play svg { margin-left: 4px; }
.vid-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--green); }
.vid.playing .vid-play { opacity: 0; pointer-events: none; }
.risk-mini { margin-top: 14px; font-size: .78rem; color: var(--dim); letter-spacing: .02em; }

/* Stats row under hero */
.stats { display: grid; gap: 14px; margin-top: 48px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 20px 22px; overflow: hidden; position: relative; }
.stat-k { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
.stat-v { font-family: var(--f-head); font-weight: 750; font-size: 2.6rem; letter-spacing: -0.035em; line-height: 1.1; margin-top: 6px; }
.stat-s { font-size: .85rem; color: var(--dim); }
.spark { width: 100%; height: 50px; margin-top: 14px; }
.spark path { fill: none; stroke: var(--mint); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 50px; margin-top: 14px; }
.bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--green-hi), rgba(47, 154, 92, .35)); }
.track { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: .75rem; color: var(--dim); }
.track i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mint), rgba(255, 255, 255, .12)); }

/* Sections */
.sec { padding: 88px 0; scroll-margin-top: 60px; }
.head { margin-bottom: 36px; }

/* OFFER */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.chip { font-size: .85rem; color: var(--muted); padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.chip b { color: var(--mint); font-weight: 600; margin-right: 4px; }
.plans { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; }
.plan { padding: 28px 26px; display: flex; flex-direction: column; position: relative; }
.plan-hot { border-color: rgba(52, 211, 153, .45); background: linear-gradient(180deg, rgba(47, 154, 92, .14), var(--glass) 60%); }
.badge { position: absolute; top: 22px; right: 22px; font-size: .75rem; font-weight: 600; background: var(--green); color: #fff; padding: 4px 11px; border-radius: 999px; }
.plan-tag { font-size: .85rem; color: var(--muted); }
.price { font-family: var(--f-head); font-weight: 750; font-size: 3rem; letter-spacing: -0.035em; line-height: 1.1; margin: 8px 0 14px; }
.price small { font-family: var(--f-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--dim); margin-left: 4px; }
.plan h3 { margin-bottom: 8px; }
.desc { color: var(--muted); font-size: .94rem; }
.ticks { list-style: none; margin: 20px 0 26px; display: grid; gap: 10px; font-size: .94rem; flex: 1; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.pa-next, .pa-ask { text-align: center; color: var(--muted); font-size: .94rem; margin-top: 18px; }
.pa-ask { margin-top: 6px; }
.pa-ask a { color: var(--mint); font-weight: 600; }

/* RESULTS rail */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px max(20px, calc((100vw - 1040px) / 2)) 20px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.stu { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; padding: 12px 12px 22px; }
.stu-img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #000; }
.stu-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.stu-img:hover img { transform: scale(1.03); }
.stu-n { font-family: var(--f-head); font-weight: 750; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--mint); margin: 16px 8px 2px; }
.stu-n small { font-weight: 600; font-size: .85rem; color: var(--ink); letter-spacing: -0.01em; }
.stu h3 { font-size: 1.12rem; margin: 0 8px 6px; }
.stu p:last-child { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 8px; }
.rail-nav { display: flex; gap: 10px; justify-content: flex-end; }
.round { width: 44px; height: 44px; border-radius: 50%; background: var(--glass-hi); border: 1px solid var(--line); font-size: 1.1rem; }
.round:hover { background: rgba(255, 255, 255, .14); }

/* Channel screenshots */
.masonry { columns: 2; column-gap: 12px; }
@media (min-width: 760px) { .masonry { columns: 3; column-gap: 16px; } }
@media (min-width: 1000px) { .masonry { columns: 4; } }
.masonry button { display: block; width: 100%; margin-bottom: 12px; break-inside: avoid; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.masonry img { width: 100%; height: auto; transition: opacity .2s ease; }
.masonry button:hover img { opacity: .85; }

/* COURSE */
.mods { display: grid; gap: 12px; }
@media (min-width: 760px) { .mods { grid-template-columns: 1fr 1fr; } }
.mod { padding: 22px; display: flex; gap: 18px; align-items: flex-start; }
.mod-n { font-family: var(--f-head); font-weight: 750; font-size: .95rem; color: var(--mint); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .25); border-radius: 12px; min-width: 44px; height: 44px; display: grid; place-items: center; }
.mod h3 { margin-bottom: 6px; }
.mod p { color: var(--muted); font-size: .94rem; }

/* MODEL */
.ways { display: grid; gap: 14px; }
@media (min-width: 760px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { padding: 26px; }
.way-n { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--mint); margin-bottom: 18px; }
.way h3 { margin-bottom: 8px; }
.way p { color: var(--muted); font-size: .94rem; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { padding: 0; border-radius: 16px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--muted); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); font-size: .95rem; }

/* FINAL */
.final { padding: 110px 0 120px; }
.final .lead { margin-bottom: 30px; }

/* FOOTER */
.foot { border-top: 1px solid var(--line); padding: 40px 0 48px; background: rgba(5, 18, 13, .7); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.foot-logo { height: 28px; width: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: .9rem; color: var(--muted); }
.foot-links a:hover { color: var(--ink); }
.disc { font-size: .8rem; color: var(--dim); line-height: 1.6; max-width: 820px; }
.copy { font-size: .8rem; color: var(--dim); margin-top: 14px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .9); display: grid; place-items: center; padding: 20px; }
.lb[hidden] { display: none; }
.lb img { max-height: 90vh; max-width: 100%; border-radius: 12px; }
.lb-x { position: absolute; top: 14px; right: 18px; font-size: 2.2rem; line-height: 1; color: #fff; }

/* Reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .dot { animation: none; }
}

/* Checkout details popup */
.ck { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(2, 8, 6, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ck[hidden] { display: none; }
.ck-box { position: relative; width: 100%; max-width: 420px; padding: 32px 26px 26px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(10, 26, 19, .96); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.ck-x { position: absolute; top: 10px; right: 16px; font-size: 1.8rem; line-height: 1; color: var(--dim); }
.ck-x:hover { color: var(--ink); }
.ck-box h3 { font-size: 1.8rem; letter-spacing: -0.03em; }
.ck-sub { color: var(--muted); margin-top: 6px; }
.ck-box label { display: block; font-size: .85rem; color: var(--muted); margin: 18px 0 6px; }
.ck-box input[type=text], .ck-box input[type=email] { width: 100%; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; }
.ck-box input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.ck-err { color: #f87171; font-size: .9rem; margin-top: 12px; }
.ck-box .btn { margin-top: 20px; }
.ck-box .btn:disabled { opacity: .7; cursor: wait; }
.ck-fine { text-align: center; color: var(--dim); font-size: .82rem; margin-top: 12px; }

/* Offer: what's included + facts */
.incl { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 22px; }
.plan .ticks { margin-top: 12px; gap: 9px; }
@media (min-width: 640px) { .plan .ticks { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.plan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.plan-facts dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.plan-facts dd { font-weight: 600; margin-top: 2px; }

/* Results: one entry per student, like edgelabfx.com */
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 10px; }
.t-list { display: grid; gap: 18px; }
.t-entry { padding: 22px; display: grid; gap: 20px; }
@media (min-width: 860px) { .t-entry { grid-template-columns: 1fr 1.5fr; align-items: start; padding: 28px; } }
.t-text { min-width: 0; }
.t-name { font-size: 1.6rem; letter-spacing: -0.03em; }
.t-meta { font-size: .9rem; color: var(--muted); margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-tag { font-size: .75rem; font-weight: 600; color: #fff; background: var(--green); padding: 3px 10px; border-radius: 999px; }
.t-desc { color: var(--muted); margin-top: 14px; }
.t-desc em { font-style: normal; color: var(--mint); font-weight: 600; }
.t-grid { display: grid; gap: 10px; min-width: 0; }
.t-grid.g2, .t-grid.g3 { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .t-grid.g3 { grid-template-columns: repeat(3, 1fr); } }
.t-grid.g1 { max-width: 260px; }
.t-grid button { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.t-grid img { width: 100%; height: auto; transition: opacity .2s ease; }
.t-grid button:hover img { opacity: .85; }
#words .head .t-meta { margin-top: 12px; }
#words .risk-mini { text-align: center; margin-top: 18px; }

/* "Plus many other members" — smooth horizontal scroller */
.tp-wrap { position: relative; margin: 0 -20px; }
.tp-rail {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 20px 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent 100%);
}
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail.dragging { cursor: grabbing; }
.tp-rail.dragging .tp-item { pointer-events: none; }
.tp-rail:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.tp-item {
  flex: 0 0 auto;
  height: 380px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #111;
  transform: translateZ(0); contain: layout paint;
}
.tp-item img { height: 100%; width: auto; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
@media (max-width: 600px) { .tp-item { height: 320px; } }
.tp-nav { display: flex; gap: 10px; justify-content: flex-end; padding: 6px 20px 0; }

/* Headline highlight */
.hl { background: linear-gradient(90deg, #34d399, #6ee7a8 60%, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Mobile-first polish ---------- */
.more-incl { display: none; }
.buybar { display: none; }

@media (max-width: 759px) {
  /* lighter effects = smooth scrolling on phones */
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(16, 34, 26, .72); }
  .plan-hot { background: linear-gradient(180deg, rgba(47, 154, 92, .18), rgba(16, 34, 26, .85) 60%); }
  .nav.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 18, 13, .94); }

  .sec { padding: 60px 0; }
  .final { padding: 70px 0 90px; }
  .head { margin-bottom: 24px; }
  h2 { font-size: 2.05rem; }

  /* hero: video big, tighter spacing */
  .hero { padding: 84px 0 24px; }
  .hero h1 { font-size: 2.35rem; }
  .vid { margin: 22px auto 22px; border-radius: 16px; }
  .vid-play { width: 64px; height: 64px; }

  /* stats: compact, one screen not three */
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
  .stat { padding: 14px 16px; }
  .stat:first-child { grid-column: 1 / -1; }
  .stat-v { font-size: 1.9rem; }
  .stat:first-child .stat-v { font-size: 2.3rem; }
  .stat-s { font-size: .78rem; line-height: 1.35; }
  .spark { height: 34px; margin-top: 8px; }
  .bars, .track { display: none; }

  /* proof chips: one swipeable line */
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 22px; padding: 0 20px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; }

  /* offer: show 6 items, rest behind a button */
  .plan { padding: 22px 18px; }
  .price { font-size: 2.6rem; }
  #inclList:not(.open) li:nth-child(n+7) { display: none; }
  .more-incl { display: block; width: 100%; margin: -6px 0 18px; padding: 12px; border-radius: 12px; border: 1px dashed rgba(52, 211, 153, .4); color: var(--mint); font-weight: 600; font-size: .92rem; }
  .plan-facts dd { font-size: .92rem; }

  /* results: screenshots swipe sideways instead of stacking tall */
  .t-entry { padding: 18px; gap: 14px; }
  .t-name { font-size: 1.4rem; }
  .t-grid, .t-grid.g2, .t-grid.g3 { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; max-width: none; scrollbar-width: none; }
  .t-grid::-webkit-scrollbar { display: none; }
  .t-grid button { flex: 0 0 auto; height: 280px; }
  .t-grid img { height: 100%; width: auto; max-width: none; }
  .t-grid.g1 button { height: 320px; }

  .tp-item { height: 300px; }

  /* comfy tap targets */
  .foot-links a { padding: 10px 2px; }
  .faq summary { padding: 18px 48px 18px 18px; }

  /* sticky buy bar */
  .buybar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 18, 13, .96); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .3s ease;
  }
  .buybar.show { transform: none; }
  .buybar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .buybar-price { line-height: 1.2; }
  .buybar-price b { font-family: var(--f-head); font-size: 1.35rem; letter-spacing: -0.02em; }
  .buybar-price span { display: block; font-size: .75rem; color: var(--muted); }
  .buybar .btn { padding: 12px 22px; flex: 0 0 auto; }
  body.has-buybar .foot { padding-bottom: 110px; }

  /* checkout popup sits like a bottom sheet, above the keyboard */
  .ck { place-items: end center; padding: 0; }
  .ck-box { max-width: none; border-radius: 22px 22px 0 0; padding: 28px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* About your mentor */
.mentor { display: grid; gap: 8px; align-items: end; }
@media (min-width: 860px) { .mentor { grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } }
.mentor-photo { position: relative; max-width: 440px; margin: 0 auto; width: 100%; }
.mentor-photo::before { content: ""; position: absolute; inset: 12% 6% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 211, 153, .32), rgba(47, 154, 92, .12) 55%, transparent 75%); }
.mentor-photo img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.mentor-text { min-width: 0; }
.mentor-msg { color: var(--muted); font-size: 1.05rem; margin-top: 14px; max-width: 560px; }
.mentor-sign { margin-top: 18px; font-weight: 600; }
.mentor-sign span { font-weight: 400; color: var(--dim); }
.mentor-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; max-width: 520px; }
.mentor-stats div { padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.mentor-stats b { display: block; font-family: var(--f-head); font-weight: 750; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--mint); line-height: 1.15; }
.mentor-stats span { font-size: .78rem; color: var(--muted); line-height: 1.3; display: block; margin-top: 2px; }
.cert-title { margin: 44px 0 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cert-title span { font-size: .82rem; font-weight: 400; color: var(--dim); }
.cert-rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 8px; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cert-rail::-webkit-scrollbar { display: none; }
.cert-rail:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.cert { flex: 0 0 auto; height: 260px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; transform: translateZ(0); }
.cert img { height: 100%; width: auto; max-width: none; display: block; transition: opacity .2s ease; }
.cert:hover img { opacity: .85; }
@media (max-width: 759px) {
  .mentor-photo { max-width: 320px; margin-bottom: -10px; }
  .mentor-msg { font-size: 1rem; }
  .mentor-stats b { font-size: 1.1rem; }
  .cert { height: 220px; }
  .cert-title { margin-top: 32px; }
}

/* Offer: what you get access to */
.plan-top { display: grid; gap: 18px; }
@media (min-width: 640px) { .plan-top { grid-template-columns: 1fr 230px; gap: 22px; align-items: start; } }
.plan-head { min-width: 0; }
.access { display: grid; gap: 10px; align-content: start; }
.access-k { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.access-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(52, 211, 153, .22); }
.access-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.access-ico-logo { background: #0b0f0d; border: 1px solid var(--line); }
.access-ico-logo img { width: 38px; height: auto; }
.access-ico-dc { background: #5865f2; color: #fff; }
.access-ico-dc img { width: 26px; height: auto; }
.access-txt { min-width: 0; line-height: 1.25; }
.access-txt b { display: block; font-size: .92rem; }
.access-txt small { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 639px) {
  .access { grid-template-columns: 1fr 1fr; }
  .access-k { grid-column: 1 / -1; }
  .access-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}
[hidden] { display: none !important; }

/* Welcome popup extras */
.ck-box .eyebrow { margin-bottom: 6px; }
.ck-phone { display: flex; gap: 8px; }
.ck-phone select { flex: 0 0 auto; width: 108px; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; outline: none; }
.ck-phone select:focus { border-color: var(--mint); }
.ck-phone input { flex: 1; min-width: 0; }
.ck-box input[type=tel] { width: 100%; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; }
.ck-box input[type=tel]:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
#leadDone .btn { margin-top: 20px; }