/* ==========================================================================
   Kennismaken — the intro-call planner (views/pages/meet.ejs; public/js/pages/meet.js adds .is-live).
   Without JS the planner is one long form: the day, time and details all show; the script makes it steps.
   ========================================================================== */

/* ---- hero: the gradient card the planner rises out of ---- */
.mhero{ padding:clamp(16px, 3vw, 32px) 0 0 }
.mhero__card{ position:relative; width:min(1220px, 100% - 40px); margin:0 auto; padding:clamp(40px, 6vw, 84px) 0 clamp(150px, 15vw, 210px); overflow:hidden; isolation:isolate; border-radius:var(--r-xl); background:var(--hero-bg) }
.mhero__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.mhero__sky i{ position:absolute; width:38vw; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.5; animation:mheroDrift 20s ease-in-out infinite alternate }
.mhero__sky i:nth-child(1){ right:-8vw; top:-14vw; background:var(--brand-mid) }
.mhero__sky i:nth-child(2){ right:18vw; bottom:-22vw; background:var(--warm-mid); opacity:.35; animation-duration:26s; animation-delay:-9s }
.mhero__dots{ position:absolute; inset:0; background-image:radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(70% 90% at 85% 30%, #000, transparent 70%); mask-image:radial-gradient(70% 90% at 85% 30%, #000, transparent 70%) }
@keyframes mheroDrift{ to{ translate:-5vw 4vw; scale:1.12 } }
/* the card is as wide as the navbar and every .wrap; its content sits inside like on .hero__inner */
.mhero__card > .wrap{ width:auto; padding-inline:clamp(24px, 5vw, 72px) }
.mhero__inner{ max-width:none }
.mhero h1{ max-width:13ch; margin-top:18px; font-size:clamp(2.6rem, 6vw, 5.2rem) }
.mhero__lead{ max-width:36em; margin-top:20px; color:var(--ink-2); font-size:clamp(1.05rem, 1.4vw, 1.22rem) }
.mhero__chips{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; font-weight:700; font-size:15px; color:var(--ink-2) }
.mhero__chips li{ display:inline-flex; align-items:center; gap:7px }
.mhero__chips .i{ width:18px; height:18px; padding:3px; border-radius:50%; background:var(--marker); color:var(--ink); stroke-width:3 }

/* ---- the planner card ---- */
.plan-sec{ position:relative; z-index:2; margin-top:clamp(-170px, -12vw, -110px); padding-bottom:clamp(56px, 7vw, 96px) }
/* the planner rises out of the hero, a little inset from its edges */
.plan-sec > .wrap{ padding-inline:clamp(12px, 3vw, 40px) }
.plan{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow-lg) }
.js .plan{ animation:planIn 1s cubic-bezier(.2,.8,.2,1) .25s both }
@keyframes planIn{ from{ opacity:0; transform:perspective(1600px) translateY(60px) rotateX(10deg) scale(.97) } }

/* progress: three steps on a line that fills */
.plan__rail{ position:relative; display:flex; justify-content:space-between; gap:12px; margin:0; padding:18px clamp(20px, 3vw, 36px); border-bottom:1px solid var(--line); list-style:none; font-weight:700; font-size:14px; color:var(--ink-3) }
.plan__rail::before, .plan__rail::after{ content:''; position:absolute; left:calc(clamp(20px, 3vw, 36px) + 16px); right:calc(clamp(20px, 3vw, 36px) + 16px); top:50%; height:2px; margin-top:-1px; border-radius:2px; background:var(--line) }
.plan__rail::after{ background:var(--link); transform:scaleX(var(--fill, 0)); transform-origin:0 50%; transition:transform .7s cubic-bezier(.3,1.2,.5,1) }
.plan[data-step="2"] .plan__rail{ --fill:.5 } .plan[data-step="3"] .plan__rail, .plan[data-step="4"] .plan__rail{ --fill:1 }
.plan__rail li{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; padding-right:10px; background:var(--paper) }
.plan__rail li:last-child{ padding:0 0 0 10px }
.plan__rail li:nth-child(2){ padding:0 10px }
.plan__dot{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-3); font:700 13px/1 var(--mono); transition:background .4s, color .4s, box-shadow .4s }
.plan__dot > *{ grid-area:1 / 1 }
.plan__dot .i{ width:16px; height:16px; stroke-width:3; opacity:0; transform:scale(.4) rotate(-30deg); transition:opacity .3s, transform .45s cubic-bezier(.3,1.6,.5,1) }
.plan__dot b{ transition:opacity .2s }
/* step 1 = pick a time · 2 = time picked · 3 = details · 4 = sent */
.plan[data-step="1"] [data-rail="1"], .plan[data-step="2"] [data-rail="1"], .plan[data-step="2"] [data-rail="2"], .plan[data-step="3"] [data-rail="1"], .plan[data-step="3"] [data-rail="2"], .plan[data-step="4"] li{ color:var(--ink) }
.plan[data-step="1"] [data-rail="1"] .plan__dot, .plan[data-step="2"] [data-rail="1"] .plan__dot, .plan[data-step="2"] [data-rail="2"] .plan__dot, .plan[data-step="3"] [data-rail="1"] .plan__dot, .plan[data-step="3"] [data-rail="2"] .plan__dot, .plan[data-step="4"] .plan__dot{ background:var(--green); color:#fff; box-shadow:none }
.plan[data-step="1"] [data-rail="1"] .plan__dot b, .plan[data-step="2"] [data-rail="1"] .plan__dot b, .plan[data-step="2"] [data-rail="2"] .plan__dot b, .plan[data-step="3"] [data-rail="1"] .plan__dot b, .plan[data-step="3"] [data-rail="2"] .plan__dot b, .plan[data-step="4"] .plan__dot b{ opacity:0 }
.plan[data-step="1"] [data-rail="1"] .plan__dot .i, .plan[data-step="2"] [data-rail="1"] .plan__dot .i, .plan[data-step="2"] [data-rail="2"] .plan__dot .i, .plan[data-step="3"] [data-rail="1"] .plan__dot .i, .plan[data-step="3"] [data-rail="2"] .plan__dot .i, .plan[data-step="4"] .plan__dot .i{ opacity:1; transform:none }
.plan[data-step="1"] [data-rail="2"] .plan__dot, .plan[data-step="2"] [data-rail="3"] .plan__dot, .plan[data-step="3"] [data-rail="3"] .plan__dot{ background:var(--ink); color:var(--on-ink); box-shadow:0 0 0 5px color-mix(in oklab, var(--link) 16%, transparent) }
.plan[data-step="1"] [data-rail="2"], .plan[data-step="2"] [data-rail="3"], .plan[data-step="3"] [data-rail="3"]{ color:var(--ink) }

.plan__body{ display:grid; grid-template-columns:minmax(250px, .78fr) minmax(0, 2.2fr) }

/* who you'll talk to, how, and your pick */
.plan__host{ display:flex; flex-direction:column; gap:12px; padding:clamp(22px, 2.6vw, 32px); border-right:1px solid var(--line); background:linear-gradient(180deg, var(--frost-soft), transparent 70%) }
.plan__people{ display:flex; align-items:center }
.plan__people i{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px var(--paper); font:700 14px/1 var(--text); font-style:normal }
.plan__people i + i{ margin-left:-9px }
.plan__people .is-r{ background:var(--ink); color:var(--on-ink); font:800 16px/1 var(--display) }
.plan__people em{ width:10px; height:10px; margin-left:12px; border-radius:50%; background:var(--green); animation:livePulse 2s ease-out infinite }
.plan__title{ margin-top:4px; font:800 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--display); font-stretch:112%; letter-spacing:-.02em }
.plan__meta{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; font-size:14px }
.plan__meta .i{ width:17px; height:17px; color:var(--link) }
.plan__maker{ color:var(--ink-3); font-size:14px }
.plan__modes{ display:grid; gap:8px; margin:8px 0 0; padding:0; border:0 }
.plan__modes legend{ margin-bottom:8px; padding:0; color:var(--ink-3); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase }
.plan__mode{ position:relative; display:block; cursor:pointer }
.plan__mode input, .plan__day input, .plan__slot input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.plan__mode > span{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; padding:10px 12px; border-radius:16px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .2s, background .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.plan__mode:hover > span{ transform:translateX(3px) }
.plan__mode-icon{ grid-row:span 2; display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--slate-soft); color:var(--ink-2); transition:background .25s, color .25s }
.plan__mode-icon .i{ width:18px; height:18px }
.plan__mode b{ font-size:14.5px }
.plan__mode small{ color:var(--ink-3); font-size:12.5px }
.plan__mode input:checked + span{ background:var(--frost-soft); box-shadow:inset 0 0 0 2px var(--link) }
.plan__mode input:checked + span .plan__mode-icon{ background:var(--link); color:#fff }
.plan__mode input:focus-visible + span, .plan__day input:focus-visible + span, .plan__slot input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:3px }
.plan__summary{ display:flex; align-items:center; gap:12px; margin-top:auto; padding:12px 14px; border-radius:18px; background:var(--ink); color:var(--on-ink) }
.plan__summary-icon{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; background:color-mix(in oklab, var(--on-ink) 14%, transparent) }
.plan__summary-icon .i{ width:19px; height:19px }
.plan__summary b{ display:block; font-size:15px }
.plan__summary small{ display:block; margin-top:2px; font:600 12px/1.3 var(--mono); opacity:.72 }
.plan__summary .is-roll{ animation:planRoll .45s cubic-bezier(.2,.8,.2,1) }
@keyframes planRoll{ from{ opacity:0; transform:translateY(60%); filter:blur(4px) } }

/* day and time */
.plan__main{ position:relative; min-width:0; padding:clamp(22px, 2.6vw, 32px) }
.plan__pane--when{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(20px, 3vw, 40px) }
.plan__cal, .plan__times{ min-width:0; margin:0; padding:0; border:0 }
.plan__legend{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; width:100%; margin-bottom:14px; padding:0 }
.plan__legend > span{ font:800 18px/1.2 var(--display); font-stretch:110%; letter-spacing:-.015em }
.plan__legend small{ color:var(--ink-3); font:600 12px/1.3 var(--mono) }
.plan__week{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px }
.plan__week--head{ margin-bottom:6px; color:var(--ink-3); font:600 11px/1 var(--mono); text-align:center; text-transform:uppercase; letter-spacing:.06em }
.plan__grid{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; isolation:isolate }
.plan__day{ position:relative; display:block; cursor:pointer }
.plan__day > span{ position:relative; display:grid; place-items:center; align-content:center; gap:1px; aspect-ratio:1 / .78; border-radius:14px; background:var(--slate-soft); font-weight:700; transition:color .3s, background .3s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.plan__day > span > *{ position:relative; z-index:3 }
.plan__day b{ font:800 18px/1 var(--display) }
.plan__day small{ color:var(--link); font:700 10px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em }
.plan__day:not(.is-off):hover > span{ transform:translateY(-2px) }
.plan__day.is-off{ cursor:default }
.plan__day.is-off > span{ background:transparent; color:var(--ink-3); opacity:.5 }
.plan__day.is-today > span{ box-shadow:inset 0 0 0 1.5px var(--ink-3) }
.plan__day input:checked + span{ background:var(--ink); color:var(--on-ink) }
.plan__day input:checked + span small{ color:inherit; opacity:.75 }
.plan__mark{ position:absolute; left:0; top:0; z-index:2; width:var(--mw, 0px); height:var(--mh, 0px); border-radius:14px; background:var(--ink); opacity:0; pointer-events:none; transform:translate(var(--mx, 0px), var(--my, 0px)); transition:transform .55s cubic-bezier(.3,1.35,.5,1), opacity .3s }
.plan.is-live .plan__mark{ opacity:1 }
.plan.is-live .plan__day input:checked + span{ background:var(--slate-soft) } /* JS: the sliding mark is the highlight */
.plan__slots{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px }
.plan__slot{ position:relative; display:block; cursor:pointer }
.plan__slot > span{ display:grid; place-items:center; padding:12px 4px; border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--line); font:700 15px/1 var(--text); font-variant-numeric:tabular-nums; transition:box-shadow .2s, background .2s, color .2s, transform .25s cubic-bezier(.3,1.6,.5,1) }
.plan__slot:hover > span{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--ink-3) }
.plan__slot input:checked + span{ background:var(--link); color:#fff; box-shadow:0 10px 24px -12px color-mix(in oklab, var(--link) 80%, transparent) }
.plan__slots.is-new .plan__slot{ animation:slotIn .45s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--k) * 28ms) }
@keyframes slotIn{ from{ opacity:0; transform:translateY(10px) scale(.92) } }
.plan__pref{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; color:var(--ink-3); font-size:13px; line-height:1.45 }
.plan__pref .i{ flex:none; width:16px; height:16px; margin-top:1px; color:var(--green) }
.plan__next{ width:100%; margin-top:16px }
.plan__next:not([hidden]){ animation:nextIn .5s cubic-bezier(.3,1.6,.5,1) }
@keyframes nextIn{ from{ opacity:0; transform:translateY(8px) scale(.95) } }

/* details */
.plan__pane--who{ display:grid; gap:16px; margin-top:28px; padding-top:28px; border-top:1px dashed var(--line) }
.plan.is-live .plan__pane--who{ margin-top:0; padding-top:0; border-top:0 }
.plan__lead{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font:800 18px/1.25 var(--display); font-stretch:108%; letter-spacing:-.015em }
.plan__back{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; background:var(--bg); color:var(--ink-2); font:700 14px/1 var(--text); letter-spacing:0 }
.plan__back .i{ width:16px; height:16px }
.plan__note{ min-height:110px }
.plan.is-live .plan__pane.is-enter{ animation:paneSlide .55s cubic-bezier(.2,.8,.2,1) }
@keyframes paneSlide{ from{ opacity:0; transform:translateX(26px) } }

/* sent: a ticket */
.plan__pane--done{ display:grid; place-items:center; min-height:380px }
.ticket{ position:relative; display:grid; justify-items:center; gap:12px; width:min(460px, 100%); padding:34px 30px 30px; border-radius:26px; background:var(--frost-soft); text-align:center }
.ticket::before, .ticket::after{ content:''; position:absolute; top:62%; width:26px; height:26px; border-radius:50%; background:var(--paper) }
.ticket::before{ left:-13px } .ticket::after{ right:-13px }
.ticket__check svg{ width:64px; height:64px; fill:none; stroke:var(--green); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round }
.ticket__check circle{ stroke-dasharray:145; stroke-dashoffset:145; animation:ticketDraw .7s ease .15s forwards }
.ticket__check path{ stroke-dasharray:36; stroke-dashoffset:36; animation:ticketDraw .45s ease .75s forwards }
@keyframes ticketDraw{ to{ stroke-dashoffset:0 } }
.ticket__title{ font:800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); font-stretch:115%; letter-spacing:-.03em }
.ticket__when{ padding:8px 16px; border-radius:999px; background:var(--ink); color:var(--on-ink); font:700 14px/1.2 var(--mono) }
.ticket__when:empty{ display:none }
.ticket__text{ max-width:30em; padding-top:14px; border-top:2px dashed color-mix(in oklab, var(--ink) 14%, transparent); color:var(--ink-2); font-size:15px }
.ticket__burst{ position:absolute; left:50%; top:62px; width:9px; height:9px; margin:-4.5px; border-radius:50%; opacity:0; pointer-events:none;
  box-shadow:0 -90px var(--blue), 64px -64px var(--accent), 90px 0 var(--green), 64px 64px var(--blue), 0 90px var(--accent), -64px 64px var(--green), -90px 0 var(--blue), -64px -64px var(--accent) }
.plan.is-sent .ticket__burst{ animation:spark .9s ease-out .7s }

/* ---- the 30 minutes: a dial that sweeps as you scroll ---- */
.agenda__wrap{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:center; gap:clamp(36px, 6vw, 96px) }
.agenda__dial{ position:relative; width:min(420px, 100%); margin-inline:auto; aspect-ratio:1 }
.agenda__dial svg{ width:100%; height:100%; overflow:visible }
.agenda__track{ fill:none; stroke:var(--line); stroke-width:22 }
.agenda__seg{ fill:none; stroke-width:22; stroke-linecap:butt; transform:rotate(-90deg); transform-origin:120px 120px; transition:stroke-dasharray .15s linear }
.agenda__seg--1{ stroke:var(--brand-acc) } .agenda__seg--2{ stroke:var(--fresh-acc) } .agenda__seg--3{ stroke:var(--warm-acc) }
.agenda__tick{ stroke:var(--ink-3); stroke-width:1; opacity:.45 }
.agenda__tick.is-five{ stroke-width:2; opacity:.8 }
.agenda__hand{ transform:rotate(calc(var(--t, 0) * 360deg)); transform-origin:120px 120px }
.agenda__hand circle{ fill:var(--paper); stroke:var(--ink); stroke-width:3.5 }
.agenda__hand .agenda__glow{ fill:color-mix(in oklab, var(--ink) 10%, transparent); stroke:none }
.agenda__read{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; pointer-events:none }
.agenda__read b{ font:800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--display); font-stretch:115%; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.agenda__read small{ color:var(--ink-3); font:600 12px/1 var(--mono) }
.agenda__items{ display:grid; gap:12px; margin-top:20px }
.agenda__item{ position:relative; padding:18px 20px 18px 24px; border-radius:20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); opacity:.55; transition:opacity .4s, box-shadow .4s, transform .5s cubic-bezier(.3,1.4,.5,1) }
.agenda__item::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:0 4px 4px 0; background:var(--c, var(--link)); transform:scaleY(0); transition:transform .4s cubic-bezier(.3,1.4,.5,1) }
.agenda__item--1{ --c:var(--brand-acc) } .agenda__item--2{ --c:var(--fresh-acc) } .agenda__item--3{ --c:var(--warm-acc) }
.agenda__item.is-on{ opacity:1; box-shadow:0 0 0 1px var(--line), var(--shadow); transform:translateX(6px) }
.agenda__item.is-on::before{ transform:none }
.agenda__item.is-done{ opacity:.85 }
.agenda__min{ color:var(--c); font:700 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.agenda__item h3{ margin-top:6px; font:800 18px/1.2 var(--display); font-stretch:110% }
.agenda__item p{ margin-top:4px; color:var(--ink-2); font-size:15px }
html:not(.js) .agenda__item, .agenda.is-static .agenda__item{ opacity:1 }

/* ---- what happens next: three stops on a line ---- */
.after__steps{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 3vw, 32px) }
.after__steps::before{ content:''; position:absolute; left:16%; right:16%; top:36px; border-top:2px dashed color-mix(in oklab, var(--ink) 16%, transparent) }
.after__step{ position:relative; display:grid; justify-items:center; padding:0 8px; text-align:center }
/* when it comes into view a line draws from stop to stop, and each icon pings as the line reaches it */
.after__steps::after{ content:''; position:absolute; left:16%; right:16%; top:35px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--brand-acc), var(--fresh-acc), var(--warm-acc)); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.8s cubic-bezier(.45,.05,.3,1) .3s }
.after__steps.is-in::after{ transform:none }
.js .after__steps[data-reveal]{ opacity:1; transform:none }
.after__steps.is-in .after__icon{ animation:afterPing .8s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(.25s + var(--i) * .85s) }
@keyframes afterPing{ 0%{ transform:scale(.85) } 45%{ transform:scale(1.14); background:var(--link); color:#fff; box-shadow:0 0 0 10px color-mix(in oklab, var(--link) 16%, transparent), var(--shadow) } 100%{ transform:none } }
.after__icon{ display:grid; place-items:center; width:72px; height:72px; border-radius:24px; background:var(--paper); box-shadow:0 0 0 1px var(--line), var(--shadow); color:var(--link); transition:transform .5s cubic-bezier(.3,1.6,.5,1) }
.after__step:hover .after__icon{ transform:translateY(-4px) rotate(-6deg) }
.after__icon .i{ width:28px; height:28px }
.after__no{ margin-top:16px; color:var(--ink-3); font:700 12px/1 var(--mono) }
.after__step h3{ margin-top:6px; font:800 clamp(1.1rem, 1.6vw, 1.3rem)/1.2 var(--display); font-stretch:110% }
.after__step p{ max-width:22em; margin-top:6px; color:var(--ink-2); font-size:15px }

/* ---- responsive ---- */
@media (max-width: 1080px){
  .plan__body{ grid-template-columns:minmax(0, 1fr) }
  .plan__host{ border-right:0; border-bottom:1px solid var(--line) }
  .plan__modes{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .plan__mode > span{ grid-template-columns:1fr; justify-items:center; row-gap:6px; text-align:center }
  .plan__mode-icon{ grid-row:auto }
}
@media (max-width: 860px){
  .plan__pane--when{ grid-template-columns:minmax(0, 1fr) }
  .agenda__wrap{ grid-template-columns:minmax(0, 1fr) }
  .agenda__dial{ width:min(320px, 80%) }
  .after__steps{ grid-template-columns:minmax(0, 1fr); gap:28px }
  .after__steps::before{ left:50%; right:auto; top:36px; bottom:36px; border-top:0; border-left:2px dashed color-mix(in oklab, var(--ink) 16%, transparent) }
  .after__steps::after{ left:calc(50% - 1px); right:auto; top:36px; bottom:36px; width:3px; height:auto; background:linear-gradient(180deg, var(--brand-acc), var(--fresh-acc), var(--warm-acc)); transform:scaleY(0); transform-origin:50% 0 }
  .after__step{ background:var(--band) }
}
@media (max-width: 680px){
  .mhero__card{ width:calc(100% - 12px); border-radius:36px; padding:36px 0 150px }
  .mhero__card > .wrap{ padding-inline:20px }
  .plan-sec > .wrap{ padding-inline:0 }
  .plan{ border-radius:30px }
  .plan__rail{ padding:14px 16px; font-size:12px }
  .plan__rail::before, .plan__rail::after{ left:32px; right:32px }
  .plan__dot{ width:28px; height:28px }
  .plan__host, .plan__main{ padding:18px 16px }
  .plan__modes{ gap:6px }
  .plan__mode > span{ padding:10px 6px }
  .plan__mode small{ display:none }
  .plan__day b{ font-size:16px }
  .plan__slots{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px }
  .plan__slot > span{ padding:11px 2px; font-size:14px }
}
@media (prefers-reduced-motion: reduce){
  .js .plan{ animation:none }
}