/* Builder's Journey page */
.bj-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,4.5rem)}
.bj-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.bj-hero .lede{margin-top:1.4rem;max-width:54ch}
.bj-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.bj-video{padding:10px;border-radius:var(--r-card);background:var(--ink-2);border:1px solid var(--ink-line)}
.bj-video-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.bj-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bj-video figcaption{display:flex;align-items:center;gap:.5rem;padding:.7rem .4rem .2rem;font-size:.9rem;color:var(--ink-muted)}
.bj-video figcaption .i{width:18px;height:18px;color:var(--hl)}
@media (max-width:900px){.bj-hero-grid{grid-template-columns:1fr}}
@media (max-width:520px){.bj-cta .btn{flex:1 1 100%}}

/* The six steps: one connected line, free steps in teal, member steps in purple */
.journey{list-style:none;display:grid;gap:12px;max-width:860px}
.journey li{position:relative}
.journey li:not(:last-child)::after{content:"";position:absolute;left:calc(1.25rem + 19px);top:calc(50% + 22px);height:calc(100% - 44px + 12px);width:2px;background:var(--line-strong);z-index:0}
.journey li.free:not(:last-child)::after{background:var(--done)}
.journey a{position:relative;z-index:1;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1.1rem 1.25rem;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--text);transition:transform 200ms var(--ease-out),border-color 200ms ease}
.journey .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--muted);border:2px solid var(--line-strong)}
.journey .free .n{background:var(--done);border-color:var(--done);color:var(--bg)}
.journey .ic .n{border-color:var(--purple);color:var(--link);background:var(--accent-soft)}
.j-body b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.j-body span{display:block;color:var(--muted);font-size:.95rem;margin-top:.15rem}
.j-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:650;white-space:nowrap;padding:.3rem .7rem;border-radius:99px}
.j-tag .i{width:16px;height:16px}
.free .j-tag{color:var(--done);background:var(--done-soft)}
.ic .j-tag{color:var(--link);background:var(--accent-soft)}
@media (hover:hover) and (pointer:fine){.journey a:hover{transform:translateY(-2px);border-color:var(--line-strong)}.journey .free a:hover{border-color:var(--done)}.journey .ic a:hover{border-color:var(--purple)}}
@media (max-width:620px){.journey a{grid-template-columns:40px minmax(0,1fr);row-gap:.6rem}.j-tag{grid-column:2;justify-self:start}.journey li:not(:last-child)::after{display:none}}

.bonus{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:1.1rem;align-items:center;max-width:860px;margin-top:1.5rem;padding:1.2rem 1.25rem;border-radius:var(--r-surface);border:1px dashed color-mix(in srgb,var(--done) 55%,transparent);background:var(--done-soft);text-decoration:none;color:var(--text)}
.bonus-i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--done)}
.bonus-i .i{width:22px;height:22px}
.bonus-body b{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700}
.bonus-body b em{font-style:normal;font-size:.75rem;color:var(--done);border:1px solid currentColor;border-radius:99px;padding:.05rem .5rem}
.bonus-body span{display:block;color:var(--muted);font-size:.93rem;margin-top:.2rem}
@media (max-width:620px){.bonus{grid-template-columns:44px minmax(0,1fr)}.bonus .link-arrow{grid-column:2}}
.center-cta .muted{font-size:.92rem}
.j-body b{display:flex!important;align-items:center;flex-wrap:wrap;gap:.35rem .75rem}
.j-logos{display:inline-flex;align-items:center;gap:.4rem;margin:0!important}
.j-logos img,.j-logos svg{width:20px;height:20px;flex:none}
.j-logos svg{color:var(--text)}
.j-body .j-logos{display:inline-flex;flex-direction:row;align-items:center;gap:.4rem}

/* Step 7: the Hero Labs lab (gold, the Validate accent) */
.journey li.ic:last-of-type:not(:last-child)::after{background:linear-gradient(var(--line-strong),var(--hl))}
.journey .lab .n{background:var(--hl);border-color:var(--hl);color:var(--on-hl)}
.journey .lab a{border-color:color-mix(in srgb,var(--hl) 45%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--hl) 9%,var(--surface)),var(--surface))}
.lab .j-tag{color:var(--hl);background:color-mix(in srgb,var(--hl) 14%,transparent)}
.journey .lab code{font-family:var(--mono);font-size:.85em;padding:.05rem .35rem;border-radius:6px;background:color-mix(in srgb,var(--hl) 14%,transparent);color:var(--text)}
@media (hover:hover) and (pointer:fine){.journey .lab a:hover{border-color:var(--hl)}}