/* Home page */

/* Hero: studio photo as full background, verbs, one free-first funnel, four step track */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 35%;transform:scaleX(-1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 82%,transparent) 38%,color-mix(in srgb,var(--ink) 25%,transparent) 75%,color-mix(in srgb,var(--ink) 10%,transparent) 100%),
  linear-gradient(0deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 70%,transparent) 22%,transparent 45%)}
.hero-in{padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);max-width:min(1200px,100% - 48px)}
.hero-copy{max-width:640px}
.verbs{font-size:clamp(2.7rem,5.6vw,5rem);font-weight:760;letter-spacing:-.04em;line-height:1}
.verbs span{display:block}
.verbs .grow{color:var(--hl);padding-bottom:.06em;font-size:.8em;margin-top:.12em}
@media (min-width:981px){.verbs .grow{white-space:nowrap}}

/* One funnel: free first (sessions, then the Journey), Inner Circle as the next step */
.hero-lede{margin-top:1.5rem;max-width:50ch}
.hero-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-next{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-size:.95rem;color:var(--ink-muted)}
.hero-next .link-arrow{color:var(--hl)}
@media (max-width:520px){.hero-cta .btn{flex:1 1 100%}}

/* Four step timeline: right column beside the headline; free steps lit, Inner Circle steps outlined */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:2.5rem clamp(2rem,5vw,4.5rem);align-items:start}
.track4{list-style:none;display:grid;gap:0;padding:.35rem 1.25rem;border-radius:var(--r-card);background:color-mix(in srgb,var(--ink-2) 82%,transparent);border:1px solid var(--ink-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.track4 li{position:relative;padding:.8rem 0}
.track4 li+li{border-top:1px solid var(--ink-line)}
.track4 li:not(:last-child)::after{content:"";position:absolute;left:16px;top:calc(.8rem + 38px);bottom:calc(-.8rem - 1px);width:2px;border-radius:2px;background:var(--ink-line-2);transition:background-color 260ms ease}
.track4 a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:.85rem;row-gap:.2rem;align-items:center;text-decoration:none;color:var(--ink-text)}
.track4 .n{grid-row:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums;border:2px solid var(--ink-line-2);background:var(--ink-2);color:var(--ink-muted);position:relative;z-index:1;transition:background-color 260ms ease,border-color 260ms ease,color 260ms ease}
.track4 a>b{grid-column:2;font-size:1.12rem;font-weight:740;letter-spacing:-.025em;line-height:1.1}
.track4 a>em{grid-column:3;font-style:normal;font-size:.74rem;font-weight:650;color:var(--ink-faint);white-space:nowrap}
.track4 .l{grid-column:2/4;font-size:.85rem;color:var(--ink-muted);line-height:1.4}
.track4 .v{grid-column:2/4;margin-top:.35rem;min-height:44px;border-radius:10px;background:var(--ink-3);display:flex;align-items:center;padding:.4rem .7rem;overflow:hidden}
.track4 li.on .n{background:var(--purple);border-color:var(--purple);color:#fff}
.track4 li.on:not(:last-child)::after{background:var(--purple)}
.track4 li:not(.on) .v{opacity:.72;transition:opacity 260ms ease}
@media (hover:hover) and (pointer:fine){.track4 a:hover>b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}}

.faces{display:flex;align-items:center}
.faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--ink-3);margin-left:-9px;background:var(--ink-2)}
.faces img:first-child{margin-left:0}
.live-dot{display:inline-flex;align-items:center;gap:.4rem;margin-left:.7rem;font-size:.76rem;font-weight:650;color:var(--done-g)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.track4 .v.term{display:block;background:#08070d;font-family:var(--mono);font-size:.68rem;line-height:1.6;color:#cfcbe0;padding:.5rem .7rem}
.term .ask{display:block;color:#fff}
.term .ask::before{content:"> ";color:#a78bfa}
.term-row{display:flex;align-items:center;gap:.45rem}
.term-row .i{width:12px;height:12px;color:#2dd4bf}
.term-row.run .i{color:#e0bf5f}
.term-row small{margin-left:auto;color:#8d88a0;font-size:.66rem}
.seal-v{display:flex;align-items:center;gap:.7rem}
.seal-v svg{width:32px;height:32px;fill:var(--done-g)}
.seal-v b{display:block;font-size:.9rem;color:var(--done-g)}
.seal-v span{font-family:var(--mono);font-size:.72rem;color:var(--ink-muted)}
.grow-v{display:flex;align-items:center;gap:.5rem;font-weight:650;font-size:.82rem}

@media (prefers-reduced-motion:no-preference){
  .hero-copy,.track4 li{animation:rise 650ms var(--ease-out) both}
  .track4 li:nth-child(1){animation-delay:160ms}.track4 li:nth-child(2){animation-delay:220ms}.track4 li:nth-child(3){animation-delay:280ms}.track4 li:nth-child(4){animation-delay:340ms}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}



@media (max-width:980px){.hero-in{grid-template-columns:minmax(0,1fr)}.track4{max-width:600px}}
@media (max-width:900px){
  .hero-bg img{object-position:68% 20%}
  .hero-bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 55%,transparent) 0%,color-mix(in srgb,var(--ink) 80%,transparent) 30%,color-mix(in srgb,var(--ink) 92%,transparent) 55%,var(--ink) 80%)}
}
@media (max-width:520px){
  .hero-in{max-width:calc(100% - 32px)}
}

/* Two ways in */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.way{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem)}
.way-ic{border-color:color-mix(in srgb,var(--purple) 45%,transparent)}
.way h3{font-size:clamp(1.5rem,2.4vw,2rem);display:flex;align-items:center;gap:.6rem}
.way h3 .i{width:26px;height:26px;color:var(--purple)}
.way .price{margin-top:.6rem;font-weight:650}
.way-free .price{color:var(--done)}
.way-ic .price{color:var(--link)}
.way>p{color:var(--muted);margin-top:.75rem;max-width:52ch}
.way ul{list-style:none;display:grid;gap:.6rem;margin:1.5rem 0 1.75rem}
.way li{display:flex;gap:.6rem;align-items:flex-start}
.way li .i{width:18px;height:18px;margin-top:.2rem;color:var(--done);flex:none}
.way li a{color:var(--link)}
.way-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
:root[data-theme="dark"] .way h3 .i{color:var(--purple-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .way h3 .i{color:var(--purple-ink)}}
@media (max-width:820px){.ways{grid-template-columns:1fr}}

/* Both ends of the spectrum */
.ends{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.ends article{padding:clamp(1.75rem,3.5vw,2.75rem)}
.ends article+article{border-left:1px solid var(--line)}
.ends h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem}
.ends h3 .i{width:26px;height:26px;color:var(--purple)}
.ends p{color:var(--muted)}
.ends ul{list-style:none;display:grid;gap:.55rem;margin:1.25rem 0 1.5rem}
.ends li{display:flex;gap:.6rem;align-items:flex-start}
.ends li .i{width:18px;height:18px;margin-top:.2rem;color:var(--done)}
@media (max-width:820px){.ends{grid-template-columns:1fr}.ends article+article{border-left:0;border-top:1px solid var(--line)}}

/* Live */
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.live-points{list-style:none;display:grid;gap:1.6rem;margin-top:2rem}
.live-points li{display:grid;grid-template-columns:44px 1fr;gap:1rem}
.live-points .ico{width:44px;height:44px;border-radius:var(--r-panel);display:grid;place-items:center;background:var(--accent-soft);color:var(--purple)}
:root[data-theme="dark"] .live-points .ico{color:var(--purple-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .live-points .ico{color:var(--purple-ink)}}
.live-points h3{font-size:1.1rem;letter-spacing:-.015em;margin-bottom:.25rem}
.live-points p{color:var(--muted);font-size:.97rem}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-panel)}
.mosaic img{aspect-ratio:16/9}
.mosaic img:first-child{grid-column:1/-1}
.mosaic img:nth-child(4){display:none}
@media (max-width:900px){.live-grid{grid-template-columns:1fr}}

/* Speakers */
.speakers{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}
.speakers li{min-width:0}
.speakers .ph{aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden;background:var(--surface-2);margin-bottom:.7rem}
.speakers .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.speakers .ph.panel{display:grid;place-items:center;color:var(--purple);background:var(--accent-soft)}
.speakers .ph.panel .i{width:40px;height:40px}
.speakers b{display:block;font-size:.95rem;font-weight:650;letter-spacing:-.01em}
.speakers span{display:block;font-size:.8rem;color:var(--muted);line-height:1.35}
.speakers em{display:block;font-style:normal;font-size:.82rem;margin-top:.3rem;color:var(--text);line-height:1.35}
.speakers .next{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:.9rem;border:1px dashed var(--line-strong);border-radius:var(--r-panel);padding:1.5rem}
.speakers .next b{font-size:1.15rem}
@media (max-width:1060px){.speakers{grid-template-columns:repeat(4,minmax(0,1fr))}.speakers .next{grid-column:span 2}}
@media (max-width:620px){.speakers{grid-template-columns:repeat(2,minmax(0,1fr))}.speakers .next{grid-column:1/-1}}

/* Curriculum track */
.track{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;border-top:2px solid var(--line)}
.track li{padding:1.75rem 2rem 0 0;position:relative}
.track li{padding-top:2.25rem}
.track li::before{content:attr(data-step);position:absolute;top:-15px;left:0;width:28px;height:28px;border-radius:50%;background:var(--bg);border:2px solid var(--purple);display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.track h3{font-size:1.5rem;margin:0 0 .6rem}
.track p{color:var(--muted);font-size:.97rem}
.track .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
@media (max-width:820px){.track{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--line);padding-left:1.5rem}.track li{padding:0 0 2rem}.track li{padding-top:0}.track li::before{top:-2px;left:calc(-1.5rem - 15px)}}

/* Resources */
.res{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.res li{padding:1.5rem 1.25rem 1.5rem 0}
.res li+li{padding-left:1.25rem;border-left:1px solid var(--line)}
.res .i{width:26px;height:26px;color:var(--purple);margin-bottom:.9rem}
:root[data-theme="dark"] .res .i{color:var(--purple-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .res .i{color:var(--purple-ink)}}
.res b{display:block;font-weight:650}
.res span{font-size:.9rem;color:var(--muted)}
@media (max-width:820px){.res{grid-template-columns:1fr 1fr}.res li:nth-child(3){border-left:0;padding-left:0}.res li:nth-child(n+3){border-top:1px solid var(--line)}}

/* Inner Circle close: ink */
.ic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ic h2 em{font-style:normal;color:var(--hl)}
.ic .lede{margin-top:1.25rem}
.ic-panel{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem)}
.ic-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ic-price b{font-size:2.6rem;font-weight:740;letter-spacing:-.04em}
.ic-price span{color:var(--ink-muted)}
.ic-groups{display:grid;gap:1.1rem;margin:1.5rem 0 1.75rem;padding-top:1.5rem;border-top:1px solid var(--ink-line)}
.ic-groups h3{font-size:.95rem;letter-spacing:0;font-weight:680;color:var(--hl);margin-bottom:.4rem}
.ic-groups ul{list-style:none;display:grid;gap:.4rem;font-size:.95rem;color:var(--ink-text)}
.ic-groups li{display:flex;gap:.55rem;align-items:flex-start}
.ic-groups li .i{width:16px;height:16px;margin-top:.25rem;color:var(--done-g)}
.ic-panel .btn{width:100%}
.ic-fine{margin-top:.9rem;font-size:.85rem;color:var(--ink-faint);text-align:center}
.ic-more{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem}
.ic-more a{color:var(--ink-text)}
@media (max-width:900px){.ic{grid-template-columns:1fr}}


/* Small screens: the timeline becomes a one-stage carousel (js/home.js) */
.track4-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:600px;margin-bottom:calc(12px - 2.5rem);position:relative;padding-bottom:10px}
.track4-nav[hidden]{display:none}
.track4-nav button{display:flex;align-items:center;justify-content:center;gap:.4rem;height:40px;padding:0 .4rem;border-radius:10px;border:1px solid var(--ink-line);background:color-mix(in srgb,var(--ink-2) 80%,transparent);color:var(--ink-muted);font-weight:650;font-size:.85rem;transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.track4-nav button:active{transform:scale(.97)}
.track4-nav .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;border:1.5px solid currentColor;flex:none}
.track4-nav button[aria-selected="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.track4-nav button.done{color:var(--ink-text)}
.track4-time{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ink-line);overflow:hidden}
.track4-time i{display:block;height:100%;background:var(--hl);transform-origin:left;transform:scaleX(0)}
.track4-nav.running .track4-time i{animation:step-time 4500ms linear forwards}
.track4-nav.paused .track4-time i{animation-play-state:paused}
@keyframes step-time{to{transform:scaleX(1)}}
@media (max-width:370px){.track4-nav .t{display:none}.track4-nav button{gap:0}}
@media (max-width:420px){.track4-nav button{font-size:.8rem;gap:.3rem;padding:0 .25rem}}

.track4.is-carousel{padding:.35rem 1.25rem}
.track4.is-carousel li{border-top:0}
.track4.is-carousel li::after{display:none}
.track4.is-carousel li[hidden]{display:none}
.track4.is-carousel .v{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .track4.is-carousel li.is-current{animation:stage-in 420ms var(--ease-out) both}
}
@keyframes stage-in{from{opacity:0;transform:translateX(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* Grow stage: Maker (worker) to Builder (hero) */
.track4 .v.grow-stage{background:linear-gradient(90deg,color-mix(in srgb,var(--ink-3) 100%,transparent),color-mix(in srgb,var(--hl) 14%,var(--ink-3)));min-height:56px}
.grow-v{gap:.45rem;width:100%}
.grow-v .gv-maker{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem .3rem .45rem;border-radius:99px;border:1px solid var(--ink-line-2);color:var(--ink-muted);background:var(--ink-2)}
.grow-v .gv-maker .i{width:18px;height:18px;color:#0fafff}
.gv-path{display:inline-flex;align-items:center;gap:3px;flex:1;justify-content:center;border:0;padding:0;background:none}
.gv-path i{width:5px;height:5px;border-radius:50%;background:var(--ink-line-2)}
.gv-path i:nth-child(2){background:color-mix(in srgb,var(--hl) 45%,var(--ink-line-2))}
.gv-path i:nth-child(3){background:var(--hl)}
.gv-path .i{width:14px;height:14px;color:var(--hl)}
.grow-v .gv-hero{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem .25rem .4rem;border-radius:99px;background:linear-gradient(135deg,#f5c842,#e0bf5f 55%,#c9a646);color:#17151f;font-weight:700;box-shadow:0 6px 16px -8px rgba(245,200,66,.8)}
.gv-hero img{width:auto;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.gv-spark{position:absolute;top:-7px;right:-6px;width:14px;height:14px;color:#f5c842;filter:drop-shadow(0 0 4px rgba(245,200,66,.7))}
@media (prefers-reduced-motion:no-preference){
  .gv-hero img{animation:hero-float 2.6s var(--ease-in-out) infinite alternate}
  .gv-spark{animation:spark 2.6s ease-in-out infinite}
}
@keyframes hero-float{from{transform:translateY(1px) rotate(-4deg)}to{transform:translateY(-2px) rotate(3deg)}}
@keyframes spark{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

/* Phones: the four verbs carry the hero, so they scale with the screen */
@media (max-width:620px){
  .verbs{font-size:clamp(3.2rem,15.5vw,4.4rem);line-height:.96}
  .verbs .grow{font-size:.78em;line-height:1}
}

.hero-next .link-arrow{display:inline}
.hero-next .link-arrow .i{display:inline-block;vertical-align:-2px;margin-left:.3rem}

/* Grow stage, larger pills and a moving path from Maker to Builder */
.track4 .v.grow-stage{min-height:68px;padding:.6rem .8rem}
.grow-v{font-size:.98rem}
.grow-v .gv-maker{padding:.45rem .9rem .45rem .6rem;gap:.5rem}
.grow-v .gv-maker .i{width:22px;height:22px}
.grow-v .gv-hero{padding:.35rem 1rem .35rem .5rem;gap:.5rem;font-size:1rem}
.gv-hero img{height:34px}
.gv-spark{width:16px;height:16px;top:-8px;right:-7px}
.gv-path{gap:4px}
.gv-path i{width:6px;height:6px}
.gv-path .i{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){
  .gv-path i{animation:path-dot 1.8s var(--ease-out) infinite}
  .gv-path i:nth-child(1){animation-delay:0s}
  .gv-path i:nth-child(2){animation-delay:.2s}
  .gv-path i:nth-child(3){animation-delay:.4s}
  .gv-path .i{animation:path-arrow 1.8s var(--ease-in-out) infinite}
}
@keyframes path-dot{0%,100%{background:var(--ink-line-2);transform:scale(1)}30%{background:var(--hl);transform:scale(1.5)}60%{background:color-mix(in srgb,var(--hl) 50%,var(--ink-line-2));transform:scale(1)}}
@keyframes path-arrow{0%,100%{transform:translateX(-2px);opacity:.7}50%{transform:translateX(5px);opacity:1}}
@media (max-width:400px){.grow-v{font-size:.9rem}.grow-v .gv-maker{padding:.4rem .7rem .4rem .5rem}.grow-v .gv-hero{padding:.3rem .8rem .3rem .45rem}.gv-hero img{height:30px}}
@media (max-width:380px){.grow-v{gap:.3rem}.gv-path i{display:none}.gv-path{flex:0 0 auto}.grow-v .gv-maker .i{width:18px;height:18px}.gv-hero img{height:26px}}
@media (max-width:340px){.track4 .v.grow-stage{padding:.5rem}.grow-v{font-size:.8rem;gap:.2rem}.grow-v .gv-maker{padding:.3rem .5rem .3rem .4rem;gap:.3rem}.grow-v .gv-hero{padding:.25rem .55rem .25rem .35rem;gap:.3rem;font-size:.8rem}.gv-hero img{height:22px}}

/* Free / Inner Circle tags on the timeline carry an icon */
.track4 a>em{display:inline-flex;align-items:center;gap:.3rem}
.track4 a>em .i{width:16px;height:16px}
.track4 a>em.tag-free{color:var(--done-g)}
.track4 a>em.tag-ic{color:var(--link-g)}

.grow-v .gv-maker,.grow-v .gv-hero{flex:none;white-space:nowrap}
.gv-path{min-width:0}
@media (max-width:440px){.gv-path i{display:none}.gv-path{flex:1 1 auto;justify-content:center}}

.track4 li a>em.tag-free{color:var(--done-g)}
.track4 li a>em.tag-ic{color:var(--link-g)}