/* Services, Plug the leaks, Marketing, and the Free After-Click Check (v3). Builds on style.css, pages.css and tools.css. */

/* ===== Services: leaks first, then fuel (from round 3 piece S1). The guest's path leaks; plug it before you pour. ===== */
.svl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px 72px;align-items:end}
.svl-head h2{max-width:10ch}
.svl-quote{font:300 clamp(1.3rem,2.1vw,1.7rem)/1.38 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.svl-by{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--mute);font-size:.92rem}
.svl-by::before{content:"";width:22px;height:1px;background:var(--ink)}
.svl-lede{max-width:60ch;margin-top:44px;padding-top:24px;border-top:1px solid var(--rule)}

/* the path board */
.svl-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end}
.svl-ph .lede{margin-top:0}
.svl-frame{position:relative;margin-top:56px;padding:34px 34px 30px;border-radius:28px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--rule-d)}
.svl-tag{position:absolute;top:18px;right:20px;font-size:.74rem;padding:.3em .8em;border-radius:999px;background:rgba(255,255,255,.07);color:var(--mist)}
.svl-board{--ly:64px;--line:rgba(236,237,242,.32);--sx:0px;--sy:15px;position:relative;display:grid;grid-template-columns:150px minmax(0,1fr)}
.svl-tap{position:relative;min-height:200px}
.svl-funnel{display:block;overflow:visible}
.svl-funnel.v{display:none}
.svl-funnel .shape{fill:none;stroke:#ECEDF2;stroke-width:1.5;stroke-linejoin:round}
.svl-funnel .out{fill:none;stroke:var(--line);stroke-width:1.5;transition:stroke .6s}
.svl-funnel .lock{transition:opacity .5s,transform .6s var(--ease)}
.svl-funnel .lock rect{fill:var(--night-2);stroke:#ECEDF2;stroke-width:1.5}
.svl-funnel .lock path{fill:none;stroke:#ECEDF2;stroke-width:1.5}
.svl-funnel .pour circle{fill:var(--orange);opacity:0;transition:opacity .4s}
.svl-tap-txt{position:absolute;top:calc(var(--ly) + 18px);left:0;right:14px}
.svl-tap-k{font-weight:600;font-size:.98rem;color:#ECEDF2}
.svl-tap-s{display:flex;align-items:flex-start;gap:7px;margin-top:4px;font-size:.84rem;line-height:1.35;color:var(--mist)}
.svl-tap-s::before{content:"";flex:none;width:7px;height:7px;margin-top:5px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--mist)}
.svl-spout{position:absolute;left:38px;top:var(--ly);width:0;height:0}

.svl-path{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,16px minmax(0,1fr)) 16px}
.svl-st{position:relative}
.svl-node{position:absolute;top:calc(var(--ly) - 7px);left:1px;width:14px;height:14px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1.5px #ECEDF2;z-index:2;transition:background .5s,box-shadow .5s}
.svl-st:first-child .svl-node{background:var(--orange);box-shadow:none}
.svl-st b{position:absolute;top:calc(var(--ly) - 54px);left:50%;transform:translateX(-50%);font-weight:600;font-size:.98rem;white-space:nowrap;color:#ECEDF2}
.svl-st b small{display:block;font-weight:400;font-size:.74rem;color:var(--mist);text-align:center;margin-top:-1px}
.svl-st:last-child b{left:auto;right:0;transform:none}
.svl-st:last-child b small{text-align:right}

.svl-lk{position:relative;padding:calc(var(--ly) + 64px) 7px 0}
.svl-lk::before,.svl-lk::after{content:"";position:absolute;top:calc(var(--ly) - .75px);height:1.5px;background:var(--line);transition:background .6s}
.svl-lk::before{left:0;right:calc(50% + 9px)}
.svl-lk::after{left:calc(50% + 9px);right:0}
.svl-hole{position:absolute;top:calc(var(--ly) - 8px);left:calc(50% - 8px);width:16px;height:16px}
.svl-hole::before,.svl-hole::after{content:"";position:absolute;top:4px;width:1.5px;height:8px;background:var(--line);transition:opacity .3s}
.svl-hole::before{left:-1px;transform:rotate(-20deg)}
.svl-hole::after{right:-1px;transform:rotate(20deg)}
.svl-patch{position:absolute;top:calc(var(--ly) - 5px);left:calc(50% - 16px);width:32px;height:10px;border-radius:3px;background:#ECEDF2;opacity:0;transform:scaleX(.3);transition:opacity .3s,transform .45s var(--ease);z-index:2}
.svl-drip{position:absolute;left:calc(50% - 3px);top:calc(var(--ly) + 10px);width:6px;height:48px;transition:opacity .3s}
.svl-drip i{--n:0;position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--orange);transform:translate(calc(var(--n) * var(--sx)),calc(var(--n) * var(--sy)));opacity:calc(1 - var(--n) * .3)}
.svl-drip i:nth-child(2){--n:1}
.svl-drip i:nth-child(3){--n:2}
.svl-run{display:none}

.svl-card{display:flex;flex-direction:column;gap:10px;width:100%;min-height:100%;text-align:left;padding:15px 15px 14px;border:0;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rule-d);color:#ECEDF2;cursor:pointer;transition:background .25s,box-shadow .25s}
.svl-card:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(236,237,242,.4)}
.svl-k{font-size:.74rem;color:var(--mist);letter-spacing:.01em}
.svl-k b{font-weight:600;color:var(--orange)}
.svl-swap{display:grid}
.svl-swap > span{grid-area:1/1;font-size:1rem;line-height:1.4;font-weight:500;letter-spacing:-.005em}
.svl-fix{visibility:hidden;color:#ECEDF2}
.svl-act{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:.84rem;font-weight:500;color:#ECEDF2}
.svl-act::before{content:"";width:18px;height:8px;border-radius:2px;box-shadow:inset 0 0 0 1.5px currentColor}
.svl-lk.on .svl-card{background:rgba(236,237,242,.09);box-shadow:inset 0 0 0 1px rgba(236,237,242,.22)}
.svl-lk.on .svl-txt{visibility:hidden}
.svl-lk.on .svl-fix{visibility:visible}
.svl-lk.on .svl-act{color:var(--mist)}
.svl-lk.on .svl-act::before{background:#ECEDF2;box-shadow:none}
.svl-lk.on .svl-k b{color:#ECEDF2}
.svl-lk.on .svl-patch{opacity:1;transform:none}
.svl-lk.on .svl-hole::before,.svl-lk.on .svl-hole::after{opacity:0}
.svl-lk.on .svl-drip{opacity:0}

/* the bucket holds: the line carries the flow, the tap opens */
.svl-holds .svl-lk::before,.svl-holds .svl-lk::after{background:var(--orange)}
.svl-holds .svl-funnel .out{stroke:var(--orange)}
.svl-holds .svl-node{background:var(--orange);box-shadow:none}
.svl-holds .svl-funnel .lock{opacity:0;transform:translateY(-10px)}
.svl-holds .svl-funnel .pour circle{opacity:1}
.svl-holds .svl-tap-s{color:#ECEDF2}
.svl-holds .svl-tap-s::before{background:var(--orange);box-shadow:none;border-radius:50%}
.svl-holds .svl-lk:nth-child(4)::before,.svl-holds .svl-lk:nth-child(4)::after{transition-delay:.15s}
.svl-holds .svl-lk:nth-child(6)::before,.svl-holds .svl-lk:nth-child(6)::after{transition-delay:.3s}
.svl-holds .svl-lk:nth-child(8)::before,.svl-holds .svl-lk:nth-child(8)::after{transition-delay:.45s}
.svl-holds .svl-lk:nth-child(10)::before,.svl-holds .svl-lk:nth-child(10)::after{transition-delay:.6s}
.still .svl-holds .svl-run{display:block}
.svl-run i{position:absolute;top:calc(var(--ly) - 3px);width:6px;height:6px;border-radius:50%;background:#FFD7CB}
.svl-run i:first-child{left:25%}
.svl-run i:last-child{left:72%}

.svl-flow{position:absolute;inset:0;pointer-events:none;z-index:3}
.svl-flow i{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px rgba(242,84,45,.7);opacity:0;will-change:transform}
.svl-holds .svl-flow i{background:#fff;box-shadow:0 0 0 2px var(--orange),0 0 12px rgba(242,84,45,.8)}

.svl-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:34px;padding-top:24px;border-top:1px solid var(--rule-d)}
.svl-say{font-size:1.12rem;line-height:1.45;color:#ECEDF2;max-width:62ch}
.svl-say b{font-weight:600}
.svl-say b.o{color:var(--orange)}
.svl-btns{display:flex;flex-wrap:wrap;gap:10px}
.svl-btns .btn{min-height:44px}
.svl-btns .btn[hidden]{display:none}
.night .svl-btns .btn.ghost{background:transparent;color:#ECEDF2}
.svl-fine{margin-top:18px;font-size:.84rem;color:var(--mist)}

/* motion only */
@keyframes svl-drop{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(calc(3 * var(--sx)),calc(3 * var(--sy)));opacity:0}}
@keyframes svl-pour{0%{transform:translateY(-14px);opacity:0}25%{opacity:1}100%{transform:translateY(22px);opacity:0}}
html:not(.still) .svl-drip i{animation:svl-drop 1.5s linear infinite;animation-delay:calc(var(--n) * -.5s);opacity:1}
html:not(.still) .svl-holds .svl-funnel .pour circle{animation:svl-pour 1s linear infinite}
html:not(.still) .svl-funnel .pour circle:nth-child(2){animation-delay:-.33s}
html:not(.still) .svl-funnel .pour circle:nth-child(3){animation-delay:-.66s}
.still .svl-board *{transition:none!important}

/* the three services */
.svl-sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px}
.svl-sh .lede{margin-top:0;max-width:44ch}
.svl-rows{list-style:none;padding:0;margin-top:56px;border-bottom:1px solid var(--rule)}
.svl-row{display:grid;grid-template-columns:120px minmax(0,1.25fr) minmax(0,1fr);gap:20px 48px;padding:38px 0 40px;border-top:1px solid var(--ink)}
.svl-num{font:300 clamp(2.6rem,4vw,3.6rem)/1 var(--sans);letter-spacing:-.04em}
.svl-kind{font-size:.86rem;font-weight:500;color:var(--mute)}
.svl-row h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.03em;margin-top:6px}
.svl-row h3 em{font-weight:400}
.svl-main > p:not(.svl-kind){margin-top:14px;color:var(--mute);max-width:52ch}
.svl-main .svl-voice{color:var(--ink);font-weight:500}
.svl-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.svl-builds{list-style:none;padding:0;width:100%}
.svl-builds li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.98rem;transition:color .3s}
.svl-builds li:first-child{border-top:1px solid var(--rule)}
.svl-builds li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .3s,box-shadow .3s}
.svl-builds li.on::before{background:var(--orange);box-shadow:none}
.svl-builds li small{margin-left:auto;font-size:.76rem;color:var(--mute);white-space:nowrap}
.svl-status{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;padding:.6em 1em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink)}
.svl-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.svl-status.lock::before{border-radius:2px;background:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.svl-row.locked .svl-num,.svl-row.locked h3,.svl-row.locked .svl-kind,.svl-row.locked .svl-main > p{opacity:.42;transition:opacity .5s}
.svl-row .svl-note{font-size:.88rem;color:var(--mute)}
.svl-row a.link{display:inline-block;font-size:.92rem;padding:10px 0 4px;line-height:1.3}

/* close */
.svl-cl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 72px;align-items:start}
.svl-cl h2{max-width:12ch}
.svl-mk{font-size:.95rem;font-weight:600}
.svl-moves{list-style:none;padding:0;margin-top:16px}
.svl-moves li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;align-items:center;padding:16px 0;border-top:1px solid var(--rule)}
.svl-moves li:last-child{border-bottom:1px solid var(--rule)}
.svl-moves svg{grid-row:span 2;width:64px;height:36px;overflow:visible}
.svl-moves svg *{fill:none;stroke:var(--ink);stroke-width:1.4}
.svl-moves svg .hot{fill:var(--orange);stroke:none}
.svl-moves b{font-weight:600}
.svl-moves span{color:var(--mute);font-size:.94rem;line-height:1.4}
.svl-price{margin-top:18px;font-weight:500}
.svl-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:64px;padding:28px 30px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.svl-go .btn{min-height:48px}
.svl-go p{flex:1 1 300px;color:var(--mute);font-size:.95rem}
.svl-go p b{color:var(--ink);font-weight:600}

/* phones and narrow screens: the path turns and runs down the page */
@media (max-width:900px){
  .svl-head,.svl-ph,.svl-cl{grid-template-columns:1fr}
  .svl-frame{padding:56px 18px 24px;border-radius:22px}
  .svl-board{--lx:30px;--sx:12px;--sy:0px;grid-template-columns:1fr}
  .svl-tap{min-height:0;display:grid;grid-template-columns:60px minmax(0,1fr);gap:0 18px;align-items:start}
  .svl-funnel.h{display:none}
  .svl-funnel.v{display:block}
  .svl-tap-txt{position:static;padding-top:6px}
  .svl-spout{left:var(--lx);top:58px}
  .svl-path{display:block}
  .svl-st{height:52px}
  .svl-st::before{content:"";position:absolute;left:calc(var(--lx) - .75px);top:0;bottom:0;width:1.5px;background:var(--line);transition:background .6s}
  .svl-st:last-child::before{bottom:auto;height:26px}
  .svl-holds .svl-st::before{background:var(--orange)}
  .svl-node{top:19px;left:calc(var(--lx) - 7px)}
  .svl-st b,.svl-st:last-child b{top:14px;left:calc(var(--lx) + 22px);right:auto;transform:none;display:flex;align-items:baseline;gap:10px}
  .svl-st b small,.svl-st:last-child b small{text-align:left}
  .svl-lk{padding:10px 0 10px calc(var(--lx) + 46px)}
  .svl-lk::before{left:calc(var(--lx) - .75px);right:auto;top:0;width:1.5px;height:calc(50% - 9px)}
  .svl-lk::after{left:calc(var(--lx) - .75px);right:auto;top:calc(50% + 9px);bottom:0;width:1.5px;height:auto}
  .svl-hole{top:calc(50% - 8px);left:calc(var(--lx) - 8px)}
  .svl-hole::before{top:-1px;left:4px;width:8px;height:1.5px}
  .svl-hole::after{top:auto;bottom:-1px;left:4px;right:auto;width:8px;height:1.5px}
  .svl-patch{top:calc(50% - 16px);left:calc(var(--lx) - 5px);width:10px;height:32px;transform:scaleY(.3)}
  .svl-drip{top:calc(50% - 3px);left:calc(var(--lx) + 10px);width:36px;height:6px}
  .svl-run i{top:auto;left:calc(var(--lx) - 3px)!important}
  .svl-run i:first-child{top:22%}
  .svl-run i:last-child{top:74%}
  .svl-card{min-height:0}
  .svl-row{grid-template-columns:1fr;gap:14px;padding:30px 0 32px}
  .svl-num{font-size:2.4rem}
  .svl-go{padding:22px 20px}
}
@media (max-width:420px){
  .svl-btns{width:100%}
  .svl-btns .btn{flex:1;justify-content:center}
  .svl-go .btn{width:100%;justify-content:center}
}

/* ===== Services: three ways to work (from round 3 piece S3). One board: the five stages across, the three ways down. ===== */
.svw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 72px;align-items:end}
.svw-head h2{max-width:12ch}
.svw-head .lede{margin-top:0}
.svw-said{margin-top:22px;padding-left:16px;border-left:2px solid var(--orange);font:400 1.05rem/1.5 var(--sans)}
.svw-said span{display:block;margin-top:4px;font-size:.86rem;color:var(--mute)}

/* the chooser */
.svw-pick{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px 64px;align-items:center;margin-top:60px;padding:34px 38px 30px;border-radius:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.svw-q{font:600 clamp(1.5rem,2.6vw,2.15rem)/1.1 var(--sans);letter-spacing:-.03em;max-width:15ch}
.svw-q em{font-weight:400}
.svw-match{margin-top:14px;font-size:1rem;color:var(--mute);line-height:1.5}
.svw-match b{color:var(--ink);font-weight:600}
.svw-slider{position:relative;padding-top:6px}
.svw-ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mute);margin-bottom:2px}
.svw-track{position:relative;height:44px}
.svw-track::before{content:"";position:absolute;left:14px;right:14px;top:21px;height:1.5px;background:var(--ink)}
.svw-stop{position:absolute;top:15px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);pointer-events:none}
.svw-stop:nth-of-type(1){left:14px}
.svw-stop:nth-of-type(2){left:50%}
.svw-stop:nth-of-type(3){left:calc(100% - 14px)}
.svw-range{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;z-index:2}
.svw-range:focus{outline:none}
.svw-range::-webkit-slider-runnable-track{height:44px;background:transparent}
.svw-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:8px;border-radius:50%;background:var(--orange);border:0;box-shadow:0 0 0 7px rgba(242,84,45,.16);cursor:grab}
.svw-range::-moz-range-track{height:44px;background:transparent}
.svw-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--orange);border:0;box-shadow:0 0 0 7px rgba(242,84,45,.16)}
.svw-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:4px}
.svw-range:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:4px}
.svw-says{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.svw-says button{display:block;min-height:44px;padding:6px 4px;border:0;background:none;cursor:pointer;text-align:center;border-radius:10px;color:var(--mute);transition:color .25s}
.svw-says button:first-child{text-align:left}
.svw-says button:last-child{text-align:right}
.svw-says b{display:block;font-weight:600;font-size:.98rem;color:inherit}
.svw-says small{display:block;font-size:.8rem;margin-top:2px}
.svw-says button:hover{color:var(--ink)}
.svw-says button[aria-pressed="true"]{color:var(--ink)}
.svw-says button[aria-pressed="true"] b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:var(--orange);vertical-align:2px}

/* the board */
.svw-board{margin-top:44px}
.svw-bh{display:grid;grid-template-columns:300px minmax(0,1fr) 280px;gap:0 36px;padding:0 30px 14px;align-items:end}
.svw-bh p{font-size:.8rem;color:var(--mute)}
.svw-stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));text-align:center}
.svw-stages b{display:block;font-weight:600;font-size:.98rem}
.svw-stages span{display:block;font-size:.76rem;line-height:1.3;color:var(--mute);margin-top:3px;padding:0 6px}
.svw-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--mute)}
.svw-legend span{display:inline-flex;align-items:center;gap:8px}
.svw-legend i{display:inline-block;width:22px;border-top:1.5px solid var(--ink)}
.svw-legend i.das{border-top-style:dashed;border-color:var(--mute)}

.svw-row{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr) 280px;gap:22px 36px;padding:28px 30px 30px;border-radius:24px;margin-top:12px;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;transition:background .3s,box-shadow .3s}
.svw-row:hover{box-shadow:inset 0 0 0 1px #AEBBB6}
.svw-row.sel{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 50px rgba(18,36,32,.08)}
.svw-row h3{font-size:clamp(1.45rem,2.1vw,1.8rem);letter-spacing:-.03em;line-height:1.05}
.svw-row h3 em{font-weight:400}
.svw-tagline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.svw-yours{display:none;font-size:.74rem;font-weight:600;padding:.35em .75em;border-radius:999px;background:var(--orange);color:#fff}
.svw-row.sel .svw-yours{display:inline-block}
.svw-voice{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--mute)}
.svw-facts{margin-top:16px;display:grid;gap:12px}
.svw-facts dt{font-size:.76rem;color:var(--mute);font-weight:500}
.svw-facts dd{margin:2px 0 0;font-size:.97rem;line-height:1.45}
.svw-facts dd b{font-weight:600}
.svw-b{display:flex;flex-direction:column;gap:12px}
.svw-b .svw-k{font-size:.76rem;color:var(--mute);font-weight:500}
.svw-b p.svw-walk{font-size:1.02rem;line-height:1.5;margin-top:-8px}
.svw-price{font-size:.86rem;color:var(--mute)}
.svw-choose{align-self:flex-start;margin-top:auto;min-height:44px;padding:.75em 1.2em;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--ink);font:500 .9rem/1 var(--sans);cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
.svw-choose:hover{background:var(--salt)}
.svw-row.sel .svw-choose{background:var(--ink);color:var(--salt)}

/* the lane: which stages each way covers */
.svw-lane{position:relative;align-self:center;padding-bottom:6px;transition:opacity .35s}
.svw-row:not(.sel) .svw-lane{opacity:.45}
.svw-lane ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.svw-lane li{position:relative;height:40px}
.svw-lane li::before,.svw-lane li::after{content:"";position:absolute;top:19px;border-top:1.5px solid var(--ink)}
.svw-lane li::before{left:0;right:50%}
.svw-lane li::after{left:50%;right:0}
.svw-lane li:first-child::before,.svw-lane li:last-child::after{display:none}
.svw-lane li.y::before,.svw-lane li.y::after,.svw-lane li.to-y::after{border-top-style:dashed;border-color:var(--mute)}
.svw-lane li i{position:absolute;left:50%;top:13px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--ink);z-index:1;transition:background .3s}
.svw-lane li.y i{background:var(--salt);box-shadow:inset 0 0 0 1.5px var(--mute)}
.svw-row.sel .svw-lane li.y i{background:var(--paper)}
.svw-row.sel .svw-lane li:first-child i{background:var(--orange)}
.svw-sl{display:none;position:absolute;left:0;right:0;top:32px;text-align:center;font-size:.7rem;line-height:1.15;color:var(--mute)}
.svw-caps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:6px}
.svw-cap{font-size:.84rem;line-height:1.35;color:var(--ink);text-align:center;padding:0 6px}
.svw-cap.you{color:var(--mute)}
.svw-loop{position:relative;margin:-14px 10% 0;height:30px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 18px 18px}
.svw-loop::before{content:"";position:absolute;left:-5.6px;top:-1px;width:8px;height:8px;border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg);background:transparent}
.svw-ads{position:absolute;left:66%;bottom:-6.5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--orange)}
.svw-loopcap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.84rem;line-height:1.35}
.svw-loopcap span:last-child{text-align:right;color:var(--ink)}
.svw-loopcap span:last-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--orange);vertical-align:1px}

@keyframes svw-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html:not(.still) .svw-row.sel .svw-lane ol,html:not(.still) .svw-row.sel .svw-loop{animation:svw-draw .9s var(--ease) both}
html:not(.still) .svw-row.sel .svw-loop{animation-delay:.5s}
.still .svw-row,.still .svw-lane,.still .svw-lane i{transition:none}

.svw-shape{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;margin-top:22px;padding:18px 30px 0;border-top:1px solid var(--rule)}
.svw-shape p{color:var(--mute);font-size:.95rem;max-width:70ch}
.svw-shape b{color:var(--ink);font-weight:600}

/* closing, at night */
.svw-close{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.svw-close h2{max-width:12ch}
.svw-mk{font-weight:600;color:#ECEDF2}
.svw-moves{list-style:none;padding:0;margin-top:14px;counter-reset:m}
.svw-moves li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 14px;padding:15px 0;border-top:1px solid var(--rule-d)}
.svw-moves li:last-child{border-bottom:1px solid var(--rule-d)}
.svw-moves li::before{counter-increment:m;content:"0" counter(m);grid-row:span 2;font-size:.85rem;color:var(--mist);padding-top:2px}
.svw-moves b{font-weight:600}
.svw-moves span{color:var(--mist);font-size:.93rem}
.svw-quote{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-weight:500}
.svw-quote::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}

.svw-found{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px 56px;align-items:center;margin-top:72px;padding:34px 36px;border-radius:26px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--rule-d)}
.svw-fk{font-size:.86rem;color:var(--mist)}
.svw-fh{font:600 clamp(1.8rem,3.2vw,2.6rem)/1.05 var(--sans);letter-spacing:-.035em;margin-top:6px}
.svw-fh em{font-weight:400}
.svw-found .svw-fs{margin-top:10px;color:var(--mist)}
.svw-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svw-slot{position:relative;aspect-ratio:4/3;border-radius:16px;border:1.5px dashed #3A4566;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 14px;font-size:.8rem;color:var(--mist)}
.svw-slot svg{position:absolute;left:14px;top:14px;width:40px;height:28px;overflow:visible}
.svw-slot svg path{fill:none;stroke:#5B6788;stroke-width:1.4;stroke-linejoin:round}
.svw-slot svg circle{fill:var(--orange)}
.svw-slot b{font-weight:600;color:#ECEDF2;font-size:.86rem}

.svw-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:44px}
.svw-go .btn{min-height:48px}
.svw-go p{flex:1 1 320px;color:var(--mist);font-size:.95rem}
.svw-go p b{color:#ECEDF2;font-weight:600}

@media (max-width:1100px){
  .svw-bh{display:none}
  .svw-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b" "lane lane"}
  .svw-a{grid-area:a}.svw-b{grid-area:b}.svw-lane{grid-area:lane;margin-top:6px}
  .svw-lane li{height:50px}
  .svw-lane li::before,.svw-lane li::after{top:33px}
  .svw-lane li i{top:27px}
  .svw-sl{display:block;top:0}
  .svw-loop{margin-top:-9px}
}
@media (max-width:860px){
  .svw-head,.svw-pick,.svw-close,.svw-found{grid-template-columns:1fr}
  .svw-pick{padding:26px 20px 22px}
}
@media (max-width:640px){
  .svw-row{grid-template-columns:1fr;grid-template-areas:"a" "lane" "b";padding:22px 18px 24px}
  .svw-shape{padding:18px 4px 0}
  .svw-found{padding:24px 20px}
  .svw-slots{gap:8px}
  .svw-slot{padding:10px;aspect-ratio:3/4}
  .svw-slot svg{left:10px;top:10px}
  .svw-says small{font-size:.74rem}
  .svw-cap{font-size:.78rem}
  .svw-loopcap{font-size:.78rem}
  .svw-go .btn{width:100%;justify-content:center}
}

/* ===== v3 additions: fixes for the lifted pieces ===== */
.svl-board svg,.svw-slot svg{display:block}
.svl-row a.link[hidden]{display:none}
.svl-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
/* the ways slider sits on top of the global range style in style.css; undo it here */
input.svw-range[type=range]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;z-index:2}
input.svw-range[type=range]::-webkit-slider-runnable-track{height:44px;background:transparent;border-radius:0}
input.svw-range[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:8px;border-radius:50%;background:var(--orange);border:0;box-shadow:0 0 0 7px rgba(242,84,45,.16);cursor:grab}
input.svw-range[type=range]::-moz-range-track{height:44px;background:transparent}
input.svw-range[type=range]::-moz-range-progress{background:transparent}
input.svw-range[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--orange);border:0;box-shadow:0 0 0 7px rgba(242,84,45,.16)}

/* ===== Services: the opening ===== */
.sv-why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 72px;align-items:end;margin-top:72px;padding-top:36px;border-top:1px solid var(--rule)}
.sv-why .lede{margin-top:0;max-width:52ch}
.sv-why .svl-quote{font-size:clamp(1.35rem,2.3vw,1.9rem)}
.sv-why + .facts{margin-top:44px}
.svw-close .svw-quote{color:#ECEDF2}

/* ===== Plug the leaks: six places bookings leak ===== */
.sv-areas{list-style:none;padding:0;margin-top:56px;border-bottom:1px solid var(--rule)}
.sv-area{display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,1.15fr) minmax(0,.8fr);gap:16px 36px;padding:30px 0 32px;border-top:1px solid var(--ink);scroll-margin-top:110px}
.sv-area .n{font:300 2.4rem/1 var(--sans);letter-spacing:-.04em}
.sv-area h3{font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.03em;line-height:1.1}
.sv-area .k{display:block;font-size:.76rem;font-weight:500;color:var(--mute);margin-bottom:8px}
.sv-area .leak{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.35;color:var(--mute)}
.sv-area .ex{display:inline-block;margin-top:10px;font-size:.72rem;padding:.25em .7em;border-radius:999px;background:var(--salt);color:var(--mute)}
.sv-area ul{list-style:none;padding:0}
.sv-area li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule);font-size:.98rem;line-height:1.4}
.sv-area li:first-child{border-top:0;padding-top:0}
.sv-area li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);transform:translateY(-2px)}
.sv-area .wk b{display:block;font-weight:600;line-height:1.35}
.sv-area .wk a{display:inline-block;margin-top:14px;font-size:.9rem}
/* a pipe with a hole: hover or focus a row and the patch goes on */
.sv-pipe{position:relative;display:block;width:56px;height:22px;margin-top:16px}
.sv-pipe::before,.sv-pipe::after{content:"";position:absolute;top:5px;height:1.5px;background:var(--ink)}
.sv-pipe::before{left:0;width:22px}
.sv-pipe::after{right:0;width:22px}
.sv-pipe i{position:absolute;left:25px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.sv-pipe b{position:absolute;left:17px;top:2px;width:22px;height:8px;border-radius:2px;background:var(--ink);opacity:0;transform:scaleX(.3);transition:opacity .3s,transform .45s var(--ease)}
html:not(.still) .sv-pipe i{animation:sv-drip 1.6s linear infinite}
@keyframes sv-drip{0%{transform:translateY(-3px);opacity:0}20%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.sv-area:hover .sv-pipe b,.sv-area:focus-within .sv-pipe b{opacity:1;transform:none}
.sv-area:hover .sv-pipe i,.sv-area:focus-within .sv-pipe i{animation:none;opacity:0}

/* scope builder with six groups (three across) */
.scope.sv-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.scope.sv-six .grp{border-right:1px solid var(--rule);padding:28px 24px}
.scope.sv-six .grp:nth-child(3n){border-right:0;padding-right:0}
.scope.sv-six .grp:nth-child(3n+1){padding-left:0}
.scope.sv-six .grp:nth-child(n+4){border-top:1px solid var(--rule)}

/* ===== Marketing: is the bucket ready? ===== */
.sv-gate{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 72px;align-items:start}
.sv-gate h2{max-width:11ch}
.sv-gate .honest{margin-top:28px;padding-left:16px;border-left:2px solid var(--orange);color:#ECEDF2;max-width:44ch}
.sv-gcard{position:relative;padding:28px 30px 26px;border-radius:28px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--rule-d)}
.sv-gtop{display:flex;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--rule-d)}
.sv-gtop svg{display:block;flex:none;width:60px;height:56px;overflow:visible}
.sv-gtop .shape{fill:none;stroke:#ECEDF2;stroke-width:1.5;stroke-linejoin:round}
.sv-gtop .lock{transition:opacity .5s,transform .6s var(--ease)}
.sv-gtop .lock rect{fill:var(--night-2);stroke:#ECEDF2;stroke-width:1.5}
.sv-gtop .lock path{fill:none;stroke:#ECEDF2;stroke-width:1.5}
.sv-gtop .pour circle{fill:var(--orange);opacity:0;transition:opacity .4s}
.sv-gtop .out{fill:none;stroke:rgba(236,237,242,.32);stroke-width:1.5}
.sv-gcard.open .sv-gtop .lock{opacity:0;transform:translateY(-10px)}
.sv-gcard.open .sv-gtop .pour circle{opacity:1}
.sv-gcard.open .sv-gtop .out{stroke:var(--orange)}
html:not(.still) .sv-gcard.open .pour circle{animation:svl-pour 1s linear infinite}
html:not(.still) .sv-gtop .pour circle:nth-child(2){animation-delay:-.33s}
html:not(.still) .sv-gtop .pour circle:nth-child(3){animation-delay:-.66s}
.sv-gk{flex:1;min-width:0;font-size:.84rem;color:var(--mist)}
.sv-gk b{display:block;color:#ECEDF2;font-weight:600;font-size:1rem;margin-bottom:8px}
.sv-meter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:260px}
.sv-meter i{height:8px;border-radius:999px;background:rgba(236,237,242,.14);transition:background .35s}
.sv-meter i.on{background:#ECEDF2}
.sv-gcard.open .sv-meter i{background:var(--orange)}
.sv-qs{list-style:none;padding:0;margin-top:6px}
.sv-q{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:44px;text-align:left;padding:14px 4px;border:0;border-bottom:1px solid var(--rule-d);background:none;color:#ECEDF2;cursor:pointer;font-size:1rem;line-height:1.45;border-radius:0}
.sv-q::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist);margin-top:1px;transition:background-color .2s,box-shadow .2s}
.sv-q:hover::before{box-shadow:inset 0 0 0 1.5px #ECEDF2}
.sv-q[aria-pressed="true"]::before{background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.sv-q small{display:block;color:var(--mist);font-size:.76rem;margin-bottom:3px}
.sv-verdict{margin-top:22px;font-size:1.12rem;line-height:1.45;color:#ECEDF2}
.sv-verdict b{font-weight:600}
.sv-verdict b.o{color:var(--orange)}
.sv-gacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px}
.sv-gacts .link{color:#ECEDF2}
.sv-gfine{margin-top:16px;font-size:.84rem;color:var(--mist)}

/* ===== Marketing: a year of offers ===== */
.sv-cal{position:relative;margin-top:56px;padding:56px 28px 22px;border-radius:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.sv-cal .tag{position:absolute;top:18px;right:20px;font-size:.74rem;padding:.3em .8em;border-radius:999px;background:var(--salt);color:var(--mute)}
.sv-cal .cap{position:absolute;top:20px;left:28px;font-size:.84rem;color:var(--mute)}
.sv-crow{display:grid;grid-template-columns:170px repeat(12,minmax(0,1fr));column-gap:4px;align-items:center;min-height:56px;padding:8px 0;border-top:1px solid var(--rule)}
.sv-crow > *{grid-row:1}
.sv-crow.months{min-height:0;border-top:0;padding:0 0 8px}
.sv-crow.months span{text-align:center;font-size:.76rem;color:var(--mute)}
.sv-crow > b{grid-column:1;font-size:.88rem;font-weight:600;line-height:1.25;padding-right:14px}
.sv-crow > b small{display:block;font-weight:400;color:var(--mute);font-size:.76rem;margin-top:2px}
.sv-season,.sv-bar{min-width:0;font-size:.78rem;line-height:1.25;padding:.5em .75em;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-season{text-align:center}
.sv-season.peak{background:var(--ink);color:var(--salt)}
.sv-season.mid{background:var(--tint);color:var(--ink)}
.sv-season.lean{color:var(--mute);box-shadow:inset 0 0 0 1px var(--rule);background:repeating-linear-gradient(115deg,transparent 0 6px,rgba(18,36,32,.05) 6px 8px)}
.sv-bar{background:var(--tint);color:var(--ink)}
.sv-bar.ads{background:var(--orange);color:#fff}
.sv-bar.thin{height:6px;padding:0;border-radius:999px;background:var(--ink)}
.sv-cal-note{margin-top:16px;font-size:.86rem;color:var(--mute)}
.sv-cal-list{display:none;list-style:none;padding:0;margin-top:18px}
.sv-cal-list li{padding:10px 0;border-top:1px solid var(--rule);font-size:.92rem;line-height:1.4}
.sv-cal-list li b{font-weight:600}

/* ===== Free After-Click Check ===== */
.sv-note{margin-top:40px;padding:20px 24px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);font-size:.98rem;line-height:1.5}
.sv-req{margin-top:16px;padding:20px 24px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.sv-req[hidden],.sv-note[hidden]{display:none}
.sv-req .k{font-size:.84rem;color:var(--mute)}
.sv-req ul{list-style:none;padding:0;margin-top:6px}
.sv-req li{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:.98rem;line-height:1.45}
.sv-req li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);transform:translateY(-2px)}
.sv-req .row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:8px;font-size:.84rem;color:var(--mute)}
.sv-req button{background:none;border:0;padding:6px 0;color:var(--ink);text-decoration:underline;cursor:pointer;font-size:.86rem}
.steps.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.steps.six li{padding-right:20px}
.steps .new{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:600;padding:.2em .6em;border-radius:999px;background:var(--orange);color:#fff;vertical-align:2px}
.sv-calls .n b{color:var(--orange);font-weight:600}
.night .sv-calls .n b{color:var(--orange)}
.sv-yt-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:44px}
.sv-yt-head h2{max-width:13ch}
.sv-yt-head .lede{margin-top:0}
.sv-yt-after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.sv-yt-after div{border-top:1px solid var(--ink);padding-top:16px}
.sv-yt-after b{display:block;font-weight:600;margin-bottom:6px}
.sv-yt-after p{color:var(--mute);font-size:.98rem}
.sv-found{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:.92rem;color:var(--mist)}
.sv-found::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.sv-found b{color:#ECEDF2;font-weight:600}

@media (max-width:1020px){
  .sv-why,.sv-gate,.sv-yt-head{grid-template-columns:1fr}
  .sv-area{grid-template-columns:1fr;gap:16px;padding:26px 0 28px}
  .sv-area > div:first-child{display:flex;align-items:center;gap:18px}
  .sv-pipe{margin-top:0}
  .scope.sv-six{grid-template-columns:1fr 1fr}
  .scope.sv-six .grp,.scope.sv-six .grp:nth-child(3n),.scope.sv-six .grp:nth-child(3n+1){border-right:0;padding:24px 0}
  .scope.sv-six .grp:nth-child(odd){padding-right:20px}
  .scope.sv-six .grp:nth-child(n+3){border-top:1px solid var(--rule)}
  .steps.six{grid-template-columns:1fr;gap:34px}
  .sv-yt-after{grid-template-columns:1fr}
  .sv-crow{grid-template-columns:0 repeat(12,minmax(0,1fr));column-gap:3px;min-height:0;padding:10px 0}
  .sv-crow > b{grid-row:1;grid-column:1/-1;padding:0 0 8px}
  .sv-crow > :not(b){grid-row:2}
  .sv-crow.months > *{grid-row:1}
  .sv-crow.months > b{grid-column:1;padding:0}
  .sv-bar,.sv-season{font-size:0;padding:0;height:12px;border-radius:999px}
  .sv-bar.thin{height:6px}
  .sv-cal{padding:52px 18px 18px}
  .sv-cal .cap{left:18px}
  .sv-cal-list{display:block}
}
@media (max-width:560px){
  .scope.sv-six{grid-template-columns:1fr}
  .scope.sv-six .grp:nth-child(odd){padding-right:0}
  .scope.sv-six .grp:nth-child(n+2){border-top:1px solid var(--rule)}
  .sv-gcard{padding:22px 18px 22px}
  .sv-gacts .btn{width:100%;justify-content:center}
  .sv-crow.months span{font-size:.62rem}
  .svc-tabs{gap:16px;overflow-x:auto;scrollbar-width:none}
  .svc-tabs::-webkit-scrollbar{display:none}
  .svc-tabs a{flex:none;white-space:nowrap;font-size:.8rem;margin-bottom:0}
}

/* Still mode for these pages, whatever width. Mirrors the reduced-motion rules in style.css so these pages stay still on a desktop with Reduce Motion on. */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{animation:none!important;transition:none!important}
  html.js:not(.force-motion) .rise,html.js:not(.force-motion) [data-reveal]{opacity:1;transform:none}
  html.js:not(.force-motion) .frame{clip-path:inset(0 0 0 0 round 28px)}
  html.js:not(.force-motion) .bento .grow,html.js:not(.force-motion) .bento .up{transform:none}
}