/* gnlab — animated "how it works" hero. All sizes in em, scaled by .hero font-size. */
@import url("/css/brand.css");
*{box-sizing:border-box}
.hero{position:relative;width:100%;height:100%;background:var(--cream);color:var(--ink);font-family:"Jost",sans-serif;overflow:hidden;display:flex;flex-direction:column}
.hero *{margin:0}
.hero-inner{flex:1;align-self:stretch;max-width:60em;margin:0 auto;display:flex;flex-direction:column;padding:2.6em 3em 2.2em;gap:1.6em}

/* segmented story progress */
.rail{display:flex;gap:.5em}
.seg{flex:1;min-width:0;height:.2em;background:var(--sage-pale);border-radius:99px;overflow:hidden;cursor:pointer;position:relative}
.seg i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--sage-deep);border-radius:99px}
.seg.done i{transform:scaleX(1)}
.seg.on i{animation:fill var(--dur) linear forwards}
.hero.paused .seg.on i{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.steplabels{display:flex;gap:.5em;font-size:.62em;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--sage)}
.steplabels span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .4s}
.steplabels span.on{color:var(--ink)}

/* body */
.stage{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;gap:3em;align-items:center}
.copy{display:flex;flex-direction:column;gap:.9em;align-items:flex-start}
.kicker{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.35em;color:var(--sage-deep);line-height:1}
.title{font-size:3.1em;line-height:1.02;font-weight:400;letter-spacing:-.02em}
.title b{font-weight:500}
.blurb{font-size:1.05em;line-height:1.45;color:var(--ink-soft);max-width:22em}
.facts{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.3em}
.fact{font-size:.72em;white-space:nowrap;letter-spacing:.06em;padding:.5em .85em;border:1px solid var(--sage-pale);border-radius:99px;color:var(--sage-deep);background:#fff8}
.fact b{font-weight:500;color:var(--ink)}

/* animated entrance */
.anim>*{opacity:0;transform:translateY(.7em);animation:rise .62s cubic-bezier(.2,.7,.25,1) forwards}
.anim>*:nth-child(1){animation-delay:.02s}.anim>*:nth-child(2){animation-delay:.1s}
.anim>*:nth-child(3){animation-delay:.18s}.anim>*:nth-child(4){animation-delay:.26s}
@keyframes rise{to{opacity:1;transform:none}}

/* visual card */
.visual{position:relative;aspect-ratio:1/1;height:21em;width:auto;max-width:100%;justify-self:end;border-radius:1.4em;overflow:hidden;background:var(--sage-mist);display:grid;place-items:center;animation:reveal .8s cubic-bezier(.2,.7,.25,1) both}
@keyframes reveal{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
.visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero .badge{position:absolute;left:1em;bottom:1em;background:#fffffff2;backdrop-filter:blur(6px);border-radius:.7em;padding:.7em .95em;display:flex;flex-direction:column;gap:.1em;box-shadow:0 .4em 1.6em #1f242014}
.hero .badge .n{font-size:1.5em;font-weight:400;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.hero .badge .l{font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);font-weight:500}

/* gene chips popping in */
.genes{position:absolute;inset:1.4em 1.4em 4.8em;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.42em}
.gene{display:flex;white-space:nowrap;align-items:center;gap:.4em;background:#fff;border:1px solid var(--sage-pale);border-radius:.42em;padding:.45em .62em;font-size:.62em;letter-spacing:.09em;font-weight:500;color:var(--ink);box-shadow:0 .12em .5em #1f24200d;opacity:0;transform:scale(.82);animation:pop .5s cubic-bezier(.2,1.5,.4,1) forwards}
.gene:before{content:"";width:.4em;height:.4em;border-radius:99px;background:var(--sage);flex:none}
.gene.att:before{background:var(--ember)}
.gene.dim{color:var(--sage-deep);background:#ffffffb3;border-style:dashed}
@keyframes pop{to{opacity:1;transform:none}}

/* schematic visuals */
.sw{display:flex;flex-direction:column;align-items:center;gap:1.4em}
.tube{width:2.6em;height:9em;border:.13em solid var(--sage-deep);border-radius:1.4em;position:relative;overflow:hidden;background:#fff}
.tube i{position:absolute;left:0;right:0;bottom:0;background:var(--sage);height:0;animation:fillup 2.2s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fillup{to{height:62%}}
.tube:after{content:"";position:absolute;left:50%;top:-.9em;width:.34em;height:3.4em;background:var(--sage-deep);border-radius:99px;transform:translateX(-50%)}
.rows{width:78%;display:flex;flex-direction:column;gap:.7em}
.row{background:#fff;border-radius:.6em;padding:.8em .95em;display:flex;align-items:center;justify-content:space-between;gap:1em;opacity:0;animation:rise .5s forwards;box-shadow:0 .2em .9em #1f242010}
.row:nth-child(1){animation-delay:.25s}.row:nth-child(2){animation-delay:.42s}.row:nth-child(3){animation-delay:.59s}.row:nth-child(4){animation-delay:.76s}
.row .k{font-size:.78em;color:var(--ink)}
.row .v{font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);font-weight:500}
.bar{height:.34em;border-radius:99px;background:var(--sage-mist);flex:1;max-width:6em;overflow:hidden}
.bar i{display:block;height:100%;background:var(--sage);border-radius:99px;transform-origin:left;transform:scaleX(0);animation:grow 1.1s .5s cubic-bezier(.2,.7,.25,1) forwards}
@keyframes grow{to{transform:scaleX(var(--w,.6))}}
.dot{width:.5em;height:.5em;border-radius:99px;background:var(--sage)}
.dot.no{background:var(--ember)}

/* hook beat */
.hero.hooking .rail{opacity:.4}
.hero.hooking .steplabels span{color:var(--sage-pale)}
.hero.hooking .title{font-size:3.7em;max-width:15em}
.hero.hooking .blurb{font-size:1.15em;color:var(--ink)}
.hero.v.hooking .title{font-size:2.8em}

/* stacked dashboard + phone */
.visual.stack{background:#fff;padding:1.1em;display:block}
.visual.stack .shot{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:.6em;box-shadow:0 .3em 1.4em #1f242012;animation:reveal .8s .1s both}
.visual.stack .inset{position:absolute;right:1.1em;bottom:1.1em;width:42%;height:44%;object-fit:cover;border-radius:.6em;border:.28em solid #fff;box-shadow:0 .6em 2em #1f242026;animation:reveal .8s .34s both}
.visual.stack .badge{left:auto;right:1.9em;bottom:auto;top:1.9em}

/* footer */
.foot{display:flex;align-items:center;gap:1.4em}
.cta{font-family:inherit;font-size:.92em;letter-spacing:.04em;border:0;background:var(--sage-deep);color:var(--cream);padding:1.05em 2.2em;border-radius:99px;cursor:pointer;transition:transform .25s,background .25s}
.cta:hover{background:var(--ink);transform:translateY(-1px)}
.ghost{font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);background:none;border:0;cursor:pointer;font-family:inherit;font-weight:500;opacity:.75}
.ghost:hover{opacity:1}
.price{font-size:.78em;color:var(--ink-soft);margin-left:auto}
.mark{display:none}
/* section intro line above the step rail */
.he-intro{font-size:1.15em;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--sage-deep);text-align:center;align-self:stretch;margin-bottom:-1em}
.hero.v .he-intro{font-size:1em;margin-bottom:-.5em}
.hero.ig .mark{display:block;position:absolute;right:2.6em;bottom:2.6em;height:1.6em;opacity:.9}
a{color:var(--sage-deep)}a:hover{color:var(--ink)}

/* ---- vertical modes (mobile + IG) ---- */
.hero.v .hero-inner{padding:2.2em 2em 2em;gap:1.3em}
.hero.v .stage{grid-template-columns:1fr;grid-template-rows:auto auto;gap:1.6em;align-content:center}
.hero.v .visual{aspect-ratio:4/3;height:auto;width:100%;justify-self:stretch}
.hero.ig .hero-inner{padding:2.1em 2.6em}
.hero.ig .visual{aspect-ratio:16/9}
.hero.v .title{font-size:2.5em}
.hero.v .copy{gap:.7em}
.hero.v .steplabels{display:none}
.hero.v .foot{flex-direction:column;align-items:stretch;gap:.7em}
.hero.v .cta{width:100%}
.hero.v .price{margin:0;text-align:center}
.hero.v .mark{right:2em;top:1.9em}
.hero.ig .ghost,.hero.ig .cta{pointer-events:none}