/* Growing-vine roadmap (assets/vine.js). Phone: stem on the left, cards to the right.
   Desktop: stem down the middle, cards alternate sides, Greenleaf opposite the current phase.
   Motion is transform/opacity only; the stem is revealed by a counter-translated clip. */
.vine-sec{position:relative;padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px)}
.vine-head{display:grid;gap:14px;max-width:760px}
.vine-head h2{font-size:clamp(2.1rem,5vw,3.8rem)}
.vine-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;color:var(--ink-2);margin-top:4px}
.vine-legend span{display:inline-flex;align-items:center;gap:8px}
.vine-legend i{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--vn-ring);background:var(--paper);overflow:hidden;position:relative}
.vine-legend i.full{background:var(--green)}
.vine-legend i.half{background:linear-gradient(transparent 50%,var(--green) 50%)}
.vine-legend i.empty{border-style:dashed}

.vine-stage{--vn-ring:var(--green-deep);position:relative;margin-top:clamp(24px,4vw,48px);view-timeline-name:--vine}
:root[data-theme="dark"] .vine-stage,:root[data-theme="seed"] .vine-stage{--vn-ring:var(--green-text)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vine-stage{--vn-ring:var(--green-text)}}
:root[data-theme="dark"] .vine-legend i,:root[data-theme="seed"] .vine-legend i{--vn-ring:var(--green-text)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vine-legend i{--vn-ring:var(--green-text)}}
.vine-legend{--vn-ring:var(--green-deep)}

.vine{list-style:none;margin:0;padding:24px 0 8px;display:grid;gap:clamp(44px,7vw,104px);position:relative;z-index:1}
/* Without JS the stem is a plain gradient rule, so the timeline still reads as one line. */
.vine-stage:not(.is-mounted) .vine::before{content:"";position:absolute;top:0;bottom:0;left:31px;width:4px;border-radius:2px;background:linear-gradient(#8FBD2C,#E8A65D 75%,#8FBD2C)}
@media(min-width:900px){.vine-stage:not(.is-mounted) .vine::before{left:calc(50% - 2px)}}

.vn{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:start;position:relative}
.vn-node-wrap{grid-column:1;grid-row:1;position:relative;width:64px;height:64px;margin-top:6px}
.vn-card{grid-column:2;grid-row:1}
.vn-here{grid-column:2;grid-row:2}
@media(min-width:900px){
  .vn{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);column-gap:0;align-items:center}
  .vn-node-wrap{grid-column:2;justify-self:center;margin:0;width:72px;height:72px}
  .vn-card{grid-column:1;grid-row:1;margin-right:28px}
  .vn:nth-child(even) .vn-card{grid-column:3;margin:0 0 0 28px}
  .vn-here{grid-column:3;grid-row:1;justify-self:start;margin-left:28px}
  .vn:nth-child(even) .vn-here{grid-column:1;justify-self:end;margin:0 28px 0 0;flex-direction:row-reverse}
}

/* The node: a seed pod that fills like liquid to the phase's real progress. */
.vn-node{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--paper);border:3px solid var(--vn-ring);box-shadow:0 0 0 7px var(--cream),0 8px 22px -10px rgba(0,0,0,.45);z-index:2}
.vn-later .vn-node,.vn-next .vn-node{border-style:dashed}
.vn-fill{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(#B4DA4E,#8FBD2C 55%,#6E9A1E);
  transform:translateY(calc((1 - var(--p,0)) * 100%))}
.vn-fill::before{content:"";position:absolute;left:-20px;right:0;top:-7px;height:8px;
  background:radial-gradient(10px 7px at 10px 8px,#B4DA4E 98%,transparent) 0 0/20px 8px repeat-x}
.vn-empty .vn-fill::before{display:none}
.vn-done .vn-fill{background:linear-gradient(#C9EC72,#8FBD2C)}
.vn-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green);opacity:0;z-index:1}
.vn-leaf{position:absolute;width:84px;height:52px;left:50%;top:50%;margin:-52px 0 0 -42px;overflow:visible;z-index:1;transform-origin:50% 100%}
.vn-leaf,.vn-leaf path{fill:#7FAE24;stroke:#3F6614;stroke-width:1.3;stroke-linejoin:round}
.vn-leaf .vl-vein{fill:none;stroke:#3F6614;stroke-width:1.1}
.vn-leaf-l{transform:rotate(-62deg) translateY(-34px)}
.vn-leaf-r{transform:rotate(62deg) translateY(-34px)}
.vn-later .vn-leaf,.vn-next .vn-leaf{opacity:.55}
.vn-bloom{position:absolute;width:150%;height:150%;left:-25%;top:-25%;z-index:1;overflow:visible}
.vn-bloom ellipse{fill:#E8A65D;stroke:#8A5418;stroke-width:1.5;opacity:.9}

/* Cards */
.vn-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:8px;box-shadow:inset 0 1px 0 var(--card-edge,transparent),0 14px 34px -24px rgba(0,0,0,.4)}
.vn-now .vn-card{border:1.5px solid color-mix(in srgb,var(--green) 70%,var(--line));box-shadow:inset 0 1px 0 var(--card-edge,transparent),var(--glow-card)}
.vn-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:center}
.vn-when{font-family:var(--f-mono);font-size:var(--fs-read);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text);font-weight:500}
.vn-state{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);background:var(--line-2);color:var(--ink-2)}
.vn-now .vn-state{background:var(--green-wash);color:var(--green-text)}
.vn-done .vn-state{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-text)}
.vn-card h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.vn-launch{justify-self:start;font:600 .82rem var(--f-ui);padding:5px 12px;border-radius:var(--r-pill);background:var(--gold-wash);color:var(--gold-deep);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent)}
.vn-goal{color:var(--ink-2);font-size:.95rem}
.vn-meter{display:grid;gap:6px;margin-top:2px}
.vn-bar{display:block;height:8px;border-radius:4px;background:var(--line-2);overflow:hidden}
.vn-bar i{display:block;height:100%;width:100%;border-radius:4px;background:var(--accent-fill);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.vn-pct{font-family:var(--f-mono);font-size:var(--fs-read);color:var(--ink-2)}
.vn-pct b{color:var(--ink);font-weight:500}
.vn-ms{margin:2px 0 0;padding-left:18px;display:grid;gap:3px;font-size:.88rem;color:var(--ink-2)}
@media(min-width:900px){
  .vn-card::after{content:"";position:absolute;top:50%;width:28px;height:2px;right:-29px;background:linear-gradient(90deg,var(--line),var(--vn-ring))}
  .vn:nth-child(even) .vn-card::after{right:auto;left:-29px;background:linear-gradient(270deg,var(--line),var(--vn-ring))}
}

/* You are here */
.vn-here{display:flex;align-items:center;gap:6px}
.vn-here img,.vn-here .gl-live{width:clamp(96px,12vw,150px);height:auto;aspect-ratio:1}
.vn-bub{background:var(--paper);border:var(--sticker-border);box-shadow:var(--sticker-shadow);border-radius:16px 16px 16px 4px;padding:8px 12px;font-family:var(--f-hand);font-size:1.12rem;line-height:1.2;color:var(--ink);max-width:200px}
.vn-bub b{display:block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);font-weight:600}

/* Stem */
.vine-stem{position:absolute;inset:0;pointer-events:none;z-index:0}
.vine-stem svg{position:absolute;left:0;top:0;overflow:visible}
.vs-clip{position:absolute;inset:0}
.vs-clip{overflow:hidden}
.vs-inner{position:absolute;inset:0}
.vs-ghost{fill:none;stroke:var(--line);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.vs-under{fill:none;stroke:#2C4512;stroke-width:10;stroke-linecap:round;opacity:.9}
.vs-main{fill:none;stroke-width:6;stroke-linecap:round}
.vs-shine{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.4;stroke-linecap:round;transform:translate(-1.5px,0)}
.vs-leaf path{fill:#8FBD2C;stroke:#2C4512;stroke-width:1.4;stroke-linejoin:round}
.vs-leaf .vl-vein{fill:none;stroke:#2C4512;stroke-width:1}
.vs-tip{position:absolute;left:0;top:0;width:40px;height:40px;offset-rotate:0deg;offset-anchor:50% 50%;border-radius:50%;
  background:radial-gradient(circle,#FBFFE0 0,rgba(201,236,114,.85) 28%,rgba(143,189,44,0) 70%);opacity:0}

@media (prefers-reduced-motion:no-preference){
  .vs-tip{opacity:1}
  @supports (animation-timeline: view()){
    .vs-clip{animation:vs-out linear both;animation-timeline:--vine;animation-range:entry 50% exit 50%}
    .vs-tip{animation:vs-tip linear both;animation-timeline:--vine;animation-range:entry 50% exit 50%}
    .vs-inner{animation:vs-in linear both;animation-timeline:--vine;animation-range:entry 50% exit 50%}
    .vn-leaf-l{animation:vn-unfurl-l linear both;animation-timeline:view();animation-range:entry 35% cover 48%}
    .vn-leaf-r{animation:vn-unfurl-r linear both;animation-timeline:view();animation-range:entry 45% cover 52%}
    .vn-fill{animation:vn-fill linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
    .vn-bar i{animation:vn-bar linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
    .vn-bloom{animation:vn-bloom linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
    .vn-card{animation:vn-card linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
  .js-grow .vs-clip{transform:translateY(calc((var(--f,0) - 1) * 100%))}
  .js-grow .vs-inner{transform:translateY(calc((1 - var(--f,0)) * 100%))}
  .js-grow .vn-leaf,.js-grow .vn-fill,.js-grow .vn-bar i,.js-grow .vn-bloom,.js-grow .vn-card{transition:transform 1s var(--ease-spring),opacity .6s}
  .js-grow .vn:not(.vn-in) .vn-leaf-l{transform:rotate(-10deg) translateY(-6px) scale(.08);opacity:0}
  .js-grow .vn:not(.vn-in) .vn-leaf-r{transform:rotate(10deg) translateY(-6px) scale(.08);opacity:0}
  .js-grow .vn:not(.vn-in) .vn-fill{transform:translateY(100%)}
  .js-grow .vn:not(.vn-in) .vn-bar i{transform:scaleX(0)}
  .js-grow .vn:not(.vn-in) .vn-bloom{transform:scale(.2) rotate(-90deg);opacity:0}
  .vn-now .vn-pulse{animation:vn-pulse 2.4s ease-out infinite}
  .vn-now .vn-fill::before{animation:vn-wave 1.6s linear infinite}
}
@keyframes vs-out{from{transform:translateY(-100%)}to{transform:none}}
@keyframes vs-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes vs-tip{0%{offset-distance:0%;opacity:1}96%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes vn-unfurl-l{from{transform:rotate(-10deg) translateY(-6px) scale(.08);opacity:0}to{transform:rotate(-62deg) translateY(-34px)}}
@keyframes vn-unfurl-r{from{transform:rotate(10deg) translateY(-6px) scale(.08);opacity:0}to{transform:rotate(62deg) translateY(-34px)}}
@keyframes vn-fill{from{transform:translateY(100%)}}
@keyframes vn-bar{from{transform:scaleX(0)}}
@keyframes vn-bloom{from{transform:scale(.2) rotate(-90deg);opacity:0}}
@keyframes vn-card{from{opacity:0;translate:0 40px}}
@keyframes vn-pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes vn-wave{to{transform:translateX(20px)}}

/* Compact variant (public waitlist): smaller nodes, tighter rhythm. */
.vine-compact .vine{gap:clamp(30px,5vw,64px)}
.vine-compact .vn-card{padding:14px 16px;gap:6px}
.vine-compact .vn-card h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.vine-compact .vn-goal{font-size:.9rem}
@media(min-width:900px){.vine-compact .vn{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr)}.vine-compact .vn-node-wrap{width:60px;height:60px}}

/* Big phase numerals fill the empty side of the alternating layout (pseudo-element, decorative). */
@media(min-width:900px){
  .vn::before{content:attr(data-n);grid-column:3;grid-row:1;justify-self:start;margin-left:40px;font-family:var(--f-display);font-size:clamp(5rem,10vw,9rem);line-height:1;font-weight:400;
    font-variation-settings:"SOFT" 100,"WONK" 1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--green) 55%,var(--line));opacity:.8}
  .vn:nth-child(even)::before{grid-column:1;justify-self:end;margin:0 40px 0 0}
  .vn:has(.vn-here)::before{display:none}
}

/* Phone: keep the node leaves inside the viewport. */
@media(max-width:899px){
  .vine{padding-left:6px}
  .vn-leaf{width:60px;height:38px;margin:-38px 0 0 -30px}
  .vn-leaf-l{transform:rotate(-35deg) translateY(-24px)}
  .vn-leaf-r{transform:rotate(35deg) translateY(-24px)}
  @keyframes vn-unfurl-l{from{transform:rotate(-5deg) translateY(-6px) scale(.08);opacity:0}to{transform:rotate(-35deg) translateY(-24px)}}
  @keyframes vn-unfurl-r{from{transform:rotate(5deg) translateY(-6px) scale(.08);opacity:0}to{transform:rotate(35deg) translateY(-24px)}}
}