/* Services index (F): category chips, tint panel, particle canvas. The tint mechanism (registered --tr/--tg/--tb + panel transition) is the shared block in f.css. */

/* chips: each tab carries its category as a tinted pill; the current item is lit in its category colour */
.y-txt{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.e-pin .y-txt{flex-direction:column;align-items:flex-start;gap:3px}

.y-txt .y-desc{flex:1 0 100%}
.e-pin .y-desc{display:none}
.y-chip{display:inline-flex;align-items:center;min-height:22px;padding:2px 9px;border-radius:999px;font:600 9.5px/1.2 var(--mono);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  color:rgb(var(--c));background:rgba(var(--c),.16);border:1px solid rgba(var(--c),.42)}
.e-pin .y-item a{border-radius:10px;padding:7px 12px 7px 8px;border:1px solid transparent;transition:opacity .3s,transform .4s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.e-pin .y-item a:hover,.e-pin .y-item a:focus-visible{opacity:.9}
.e-pin .y-item.is-cur a{opacity:1;background:linear-gradient(100deg,rgba(var(--c),.40),rgba(var(--c),.12));border-color:rgb(var(--c));
  box-shadow:0 0 0 1px rgba(var(--c),.55),0 12px 34px -12px rgba(var(--c),.8),inset 3px 0 0 rgb(var(--c))}
.e-pin .y-item.is-cur .y-chip{color:#fff;background:rgba(var(--c),.55)}
.e-pin .y-item.is-cur .y-num{color:#fff}
.e-pin .y-item a:focus-visible{outline:2px solid #fff;outline-offset:2px}
html:not(.e-pin) .y-item a{border-left:3px solid rgb(var(--c))}

/* tint panel over the wall: soft category-coloured glows that slide in when the section enters and cross-fade between categories */
.y-veil::after{content:"";position:absolute;inset:0;pointer-events:none;border-top:0;
  background:radial-gradient(70% 90% at 12% 28%,rgba(var(--tr),var(--tg),var(--tb),.22),transparent 70%),radial-gradient(60% 80% at 92% 86%,rgba(var(--tr),var(--tg),var(--tb),.20),transparent 70%)}
@media (min-width:900px){
  .y-anim:not(.y-in) .y-veil::after{transform:translateX(104%);opacity:0}
  .y-anim.y-in .y-veil::after{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.y-veil::after{transform:none!important;opacity:1!important;transition:none}}

/* particle field: drawn over the wall, under the veil + UI (f-index.js moves the canvas into .y-pin); fades in once the first frame is ready */
.y-pin{isolation:isolate}
.y-pin>#d-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.y-pin>.y-veil{z-index:2}
.y-pin>.y-ui{z-index:3}
html.y-gl-on .y-pin>#d-gl{opacity:.78}

/* category group headers inside the list (one colour per category, same order everywhere) */
.y-group{list-style:none;display:flex;align-items:center;gap:10px;margin:18px 0 4px;padding:0 4px 0 8px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--c))}
.y-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--c),.65),transparent)}
.y-group:first-child{margin-top:0}
.y-group span{padding:3px 0}
html:not(.e-pin) .y-group{grid-column:1/-1;margin:10px 0 0}
/* the featured card follows the current category colour (--c on the hero, set from f-index.js) */
.y-hero .y-frame{box-shadow:0 0 0 1px rgba(var(--c,61,242,154),.55),0 30px 80px -30px rgba(var(--c,61,242,154),.55)}
.y-hero .y-count{color:rgb(var(--c,61,242,154))}
.y-hero .y-go{border-color:rgba(var(--c,61,242,154),.7);background:rgba(var(--c,61,242,154),.18)}
.y-hero .y-bar i{background:rgb(var(--c,61,242,154));box-shadow:0 0 10px rgba(var(--c,61,242,154),.8)}

/* list column: wide enough for the chips, inner padding so the active card (ring + glow) is never clipped by the column's overflow/mask, no sideways shift on the active item */
@media (min-width:900px){
  .e-pin .y-list{width:min(20rem,21vw)}
  .e-pin .y-list-in{padding:8px 14px}
  .e-pin .y-item a{box-sizing:border-box;width:100%;align-items:flex-start}
  .e-pin .y-item.is-cur a{transform:none}
  .e-pin .y-num{padding-top:3px;min-width:2.2ch;text-align:left}
  .e-pin .y-group{margin-left:0;padding-left:9px}
}

.y-chip{max-width:100%;white-space:normal;line-height:1.25}

/* 900-1199px: the head column must not run under the featured card (centred, 46vw wide) */
@media (min-width:900px) and (max-width:1199px){
  .e-pin .y-feature{width:min(46vw,880px)}
  .e-pin .y-head{width:22vw}
  .e-pin .y-head h1{font-size:clamp(26px,3vw,36px)}
  .e-pin .y-head .lede{font-size:14px}
}

/* Next + per-tab sign-up above the progress bar; animated scroll cue (arrow + green->pink trail) and a periodic shine on the hint text */
.y-actions,.y-cue{display:none}
.e-pin .y-actions{display:flex;position:absolute;left:50%;bottom:92px;transform:translateX(-50%);gap:12px;align-items:center;z-index:4;pointer-events:auto;white-space:nowrap}
.e-pin .y-actions .btn{height:44px;padding-inline:20px}
.y-next{gap:8px}
.y-next svg{transform:rotate(-90deg)}
.y-hero.y-next-go .y-frame{animation:y-nudge .6s var(--ease)}
@keyframes y-nudge{0%{transform:translateX(14px);opacity:.7}100%{transform:none;opacity:1}}
.e-pin .y-cue{display:block;position:absolute;left:50%;bottom:12px;margin-left:-196px;width:18px;height:36px;pointer-events:none;z-index:4}
.y-cue-arrow{position:absolute;left:0;bottom:0;color:#3df29a;filter:drop-shadow(0 0 6px rgba(61,242,154,.9));animation:y-bob 1.8s ease-in-out infinite}
.y-cue-trail{position:absolute;left:8px;bottom:14px;width:2px;height:22px;border-radius:2px;background:linear-gradient(180deg,transparent,#3df29a 45%,#ec008c);transform-origin:50% 100%;animation:y-trail 1.8s ease-in-out infinite}
@keyframes y-bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(3px)}}
@keyframes y-trail{0%{transform:scaleY(.15);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.y-hero .e-hint{background:linear-gradient(110deg,rgba(255,255,255,.5) 0 42%,#fff 50%,rgba(255,255,255,.5) 58% 100%);background-size:260% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:y-shine 6s ease-in-out infinite}
@keyframes y-shine{0%,68%{background-position:130% 0}100%{background-position:-70% 0}}
.y-anim:not(.y-in) .y-cue-arrow,.y-anim:not(.y-in) .y-cue-trail,.y-anim:not(.y-in) .e-hint{animation-play-state:paused}
@media (max-width:899px){
  .e-pin .y-actions{bottom:78px}
  .e-pin .y-actions .btn{height:40px;padding-inline:14px;font-size:14px}
  .e-pin .y-cue{margin-left:-150px;bottom:30px}
}
@media (prefers-reduced-motion:reduce){.y-cue-arrow,.y-cue-trail,.y-hero .e-hint{animation:none}.y-cue-trail{opacity:.7;transform:none}.y-hero .e-hint{background:none;color:rgba(255,255,255,.55);-webkit-text-fill-color:currentColor}.y-hero.y-next-go .y-frame{animation:none}}
@media (max-width:899px){.e-pin .y-actions{left:var(--gutter);transform:none;bottom:78px}}

/* the stage canvas is out of flow from the very first moment (before f-index.js moves it into the pinned screen): it used to be an in-flow 1440x900 block that pushed the page down 900 px and then jumped back (CLS) */
#d-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0}

/* category chips repeated the group header right above them (and wrapped at 1024): the group header + the item colour carry the category now */
.y-chip{display:none}

/* mobile: the service list is reachable as a horizontal chip strip (it was display:none <= 899px); the head gets room to breathe */
@media (max-width:899px){
  .e-pin .y-list{display:block;position:absolute;left:0;right:0;top:auto;bottom:128px;transform:none;width:auto;max-height:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);scrollbar-width:none;overscroll-behavior-x:contain}
  .e-pin .y-list::-webkit-scrollbar{display:none}
  .e-pin .y-list-in{display:flex;gap:8px;transform:none!important;padding:4px var(--gutter)}
  .e-pin .y-group{display:none}
  .e-pin .y-item{flex:none}
  .e-pin .y-item a{padding:9px 14px;white-space:nowrap;opacity:.78;border:1px solid rgba(var(--c),.45);border-radius:999px;background:rgba(var(--c),.14);transform:none}
  .e-pin .y-item.is-cur a{opacity:1;transform:none;background:linear-gradient(100deg,rgba(var(--c),.45),rgba(var(--c),.18));border-color:rgb(var(--c));box-shadow:0 0 0 1px rgba(var(--c),.5)}
  .e-pin .y-num,.e-pin .y-txt .y-desc{display:none}
  .e-pin .y-name{font-size:14px;white-space:nowrap}
  .e-pin .y-head{width:calc(100% - 2 * var(--gutter));max-width:24rem}
  .e-pin .y-head h1{font-size:clamp(28px,8.6vw,38px);line-height:1.05;max-width:11ch}
}
@media (max-width:899px){
  .e-pin .y-go{display:none} /* the chip strip, the featured card and the sign-up button all open the page; "Open" collided with the strip on short phone screens */
  .y-hero .e-hint{text-align:left;padding-left:calc(var(--gutter) + 28px);padding-right:70px}
  .e-pin .y-cue{margin-left:0;left:var(--gutter)}
}
@media (max-width:899px){.e-pin .y-sub{display:none}} /* the one-line description would run into the chip strip on short phone screens; the page itself carries it */

/* MOBILE PASS 2 (2026-10-10): the pinned hero's Next + sign-up row must fit narrow phones (the sign-up label can be long: it wraps instead of running off the screen) and keep 44px touch targets */
@media (max-width:899px){
  .e-pin .y-actions{right:var(--gutter);white-space:normal}
  .e-pin .y-actions .btn{height:auto;min-height:44px;padding-block:6px;line-height:1.15;min-width:0}
  .e-pin .y-actions .y-next{flex:none}
  .e-pin .y-actions .y-signup{flex:1 1 auto;text-align:center;justify-content:center;font-size:13px}
  .e-pin .y-item a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:899px){
  .e-pin .y-actions{right:calc(var(--gutter) + 64px)} /* keep clear of Tami, parked bottom-right */
  /* featured card sits right above the chip strip (it used to be centred on 56% and the name ran into the chips on short phones) */
  .e-pin .y-feature{top:auto;bottom:196px;transform:translateX(-50%)}
  .e-pin .y-cap{margin-top:8px}
  .e-pin .y-title{font-size:22px}
}
/* phones on their side: head left, card right, chip strip + actions as two rows underneath */
@media (max-width:899px) and (max-height:520px) and (orientation:landscape){
  .e-pin .y-head{width:42%;max-width:none}
  .e-pin .y-head h1{font-size:clamp(24px,5.4vh,30px);max-width:12ch}
  .e-pin .y-feature{top:calc(var(--header,64px) + 6px);bottom:auto;left:auto;right:var(--gutter);transform:none;width:48vw}
  .e-pin .y-title{font-size:17px}
  .e-pin .y-cap{margin-top:4px}
  .e-pin .y-list{bottom:70px}
  .e-pin .y-actions{bottom:14px;right:calc(var(--gutter) + 72px)}
  .e-pin .y-cue{display:none}
}
/* short screens: the chip strip already shows the current tab, so the big caption under the card goes; the card shrinks with the height so it never runs under the headline */
@media (max-width:899px) and (max-height:700px){
  .e-pin .y-cap{display:none}
  .e-pin .y-feature{width:min(calc(100vw - 2 * var(--gutter)),calc((100svh - 400px) * 1.9))}
}
@media (min-width:900px) and (max-height:520px){
  .e-pin .y-cap,.e-pin .y-head .lede,.e-pin .y-cue{display:none}
  .e-pin .y-actions{bottom:16px}
}
@media (max-width:899px){.e-pin .y-actions .y-signup{white-space:normal;padding-inline:12px}}
@media (min-width:900px) and (max-height:520px){.y-hero .e-hint{display:none}}
@media (max-width:699px){.y-hero .e-hint{padding-right:84px}}
@media (min-width:900px) and (max-height:520px) and (pointer:coarse){.e-pin .y-list{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}.e-pin .y-list::-webkit-scrollbar{display:none}}

/* phones: static Tami (f-index.js adds it instead of the WebGL stage) */
.y-tami-still{position:absolute;right:12px;bottom:12px;z-index:3;width:96px;height:auto;pointer-events:none}

/* ===== CAROUSEL (f-carousel.js) =====
   The central tab display is a visible rotating coverflow carousel instead of the old scroll-driven swap: the hero is no longer a tall pinned scroll section,
   it is one screen. The service list (real links) stays in the DOM for the tint / sign-up label / Tami logic but is not drawn while the carousel is on. */
html.e-pin .y-hero{height:auto}
html.e-pin .y-pin{position:relative;height:max(100svh,640px)}
html.e-pin .y-feature{display:none}
html.e-pin .y-hero.y-car-on .y-list{display:none}
.y-car-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout: head, then the carousel (stage, caption, controls) stacked and centred between the header and the sign-up row */
html.e-pin .y-ui{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,26px);padding:calc(var(--header) + 12px) var(--gutter) 150px}
html.e-pin .y-head{position:relative;left:auto;top:auto;width:auto;max-width:44rem;text-align:center;pointer-events:auto}
html.e-pin .y-head h1{font-size:clamp(28px,3vw,44px);max-width:none;margin-top:8px}
html.e-pin .y-head .lede{display:block;margin:10px auto 0;font-size:clamp(14px,1.15vw,17px);max-width:52ch}
.y-car{--cw:min(42vw,680px,calc((100svh - 470px) * 1.9));width:100%;max-width:100%;pointer-events:none;min-height:calc(var(--cw) * .525 + 150px)}
.y-car>*{pointer-events:auto}
.y-car-stage{position:relative;height:calc(var(--cw) * .525);touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none}
.y-car-stage:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:8px}
.y-car-track{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.y-car-card{position:absolute;left:50%;top:0;width:var(--cw);--o:0;--ao:0;z-index:calc(10 - var(--ao));
  transform:perspective(1400px) translateX(calc(-50% + var(--o) * .58 * var(--cw))) translateZ(calc(var(--ao) * -130px)) rotateY(calc(var(--o) * -34deg)) scale(calc(1 - var(--ao) * .08));
  opacity:calc(1 - var(--ao) * .32);transition:transform .7s var(--ease),opacity .55s var(--ease);will-change:transform,opacity}
.y-car-card[style*="--ao:3"]{pointer-events:none;visibility:hidden;transition:transform .7s var(--ease),opacity .55s var(--ease),visibility 0s .7s}
.y-car-a{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none}
.y-car-card:not(.is-c) .y-car-a{cursor:pointer}
.y-car-frame{display:block;position:relative;aspect-ratio:16/8.4;border-radius:8px;overflow:hidden;background:#0b0d12;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(var(--c),.4),0 24px 60px -28px rgba(var(--c),.5);transition:box-shadow .5s var(--ease),border-color .5s}
.y-car-card.is-c .y-car-frame{border-color:rgba(var(--c),.9);box-shadow:0 0 0 1px rgba(var(--c),.65),0 40px 90px -30px rgba(var(--c),.65),0 0 70px -24px rgba(var(--c),.55)}
.y-car-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;-webkit-user-drag:none;pointer-events:none}
.y-car-nm{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 10px;background:linear-gradient(transparent,rgba(5,6,10,.92));font-weight:600;font-size:clamp(12px,1.05vw,16px);line-height:1.2;letter-spacing:-.01em;color:#fff;transition:opacity .4s}
.y-car-card.is-c .y-car-nm{opacity:0}
.y-car-card:not(.is-c):hover .y-car-frame{border-color:rgba(var(--c),.75)}
.y-car-btn{position:absolute;top:50%;z-index:20;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(8,10,16,.78);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s,color .25s,transform .25s}
.y-car-btn:hover{background:rgba(var(--c,61,242,154),.3);border-color:rgb(var(--c,61,242,154))}
.y-car-btn:focus-visible,.y-car-dot:focus-visible,.y-car-pause:focus-visible,.y-car-capa:focus-visible{outline:2px solid #fff;outline-offset:3px}
.y-car-btn:active{transform:scale(.94)}
.y-car-prev{left:calc(50% - var(--cw) / 2 - 62px)}
.y-car-next{right:calc(50% - var(--cw) / 2 - 62px)}

/* caption (synced with the centred card): same text blocks as before (count, name, line, Open) */
.y-car-capa{display:block;width:var(--cw);margin:0 auto clamp(12px,2vh,20px);color:inherit;text-decoration:none;border-radius:8px}
html.e-pin .y-car .y-cap{display:grid;margin-top:0}
html.e-pin .y-car .y-title{font-size:clamp(22px,2.1vw,32px)}
html.e-pin .y-car .y-sub{font-size:clamp(13px,1.05vw,15px)}
.y-car .y-go{pointer-events:none}

/* controls: dots + pause */
.y-car-ctl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:clamp(6px,1.4vh,14px)}
.y-car-dots{display:flex;align-items:center}
.y-car-dot{width:24px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.y-car-dot i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s,transform .3s,width .3s}
.y-car-dot:hover i{background:rgba(255,255,255,.7)}
.y-car-dot.is-on i{width:20px;border-radius:4px;background:rgb(var(--c,61,242,154));box-shadow:0 0 10px rgba(var(--c,61,242,154),.7)}
.y-car-pause{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(8,10,16,.6);color:#fff;cursor:pointer}
.y-car-pause:hover{border-color:rgb(var(--c,61,242,154))}
.y-car-ico-play,.y-car-pause.is-paused .y-car-ico-pause{display:none}
.y-car-pause.is-paused .y-car-ico-play{display:block}

/* short desktop screens: the head's lede and the card's line go first so everything fits above the sign-up row */
@media (min-width:900px) and (max-height:800px){
  html.e-pin .y-head .lede,html.e-pin .y-car .y-sub{display:none}
  html.e-pin .y-ui{padding-bottom:140px}
}

/* phones: the card is wide, neighbours peek in at both sides, the arrows sit on the stage edges */
@media (max-width:899px){
  html.e-pin .y-ui{justify-content:flex-start;padding:calc(var(--header) + 22px) var(--gutter) 150px;gap:14px}
  html.e-pin .y-head h1{font-size:clamp(26px,7.4vw,34px);max-width:none;line-height:1.05}
  html.e-pin .y-head .lede{display:none}
  .y-car{--cw:min(76vw,520px);min-height:calc(var(--cw) * .525 + 130px)}
  .y-car-card{transform:perspective(1100px) translateX(calc(-50% + var(--o) * .53 * var(--cw))) translateZ(calc(var(--ao) * -110px)) rotateY(calc(var(--o) * -30deg)) scale(calc(1 - var(--ao) * .08))}
  .y-car-prev{left:6px}.y-car-next{right:6px}
  .y-car-btn{width:44px;height:44px;margin-top:-22px}
  .y-car-dot{width:21px}
  html.e-pin .y-car .y-sub{display:none}
  html.e-pin .y-car .y-go{display:none}
  html.e-pin .y-car .y-cap{display:block;text-align:center}
  html.e-pin .y-car .y-cap>span:not(.y-go){display:block}
  html.e-pin .y-car .y-count{margin-bottom:4px}
  .y-car-capa{margin:0 auto 10px}
  html.e-pin .y-car .y-title{font-size:21px}
  html.e-pin .y-actions{left:var(--gutter)}
}
@media (max-width:899px) and (max-height:520px){
  html.e-pin .y-pin{height:max(100svh,600px)}
  html.e-pin .y-head{max-width:none}
}

/* reduced motion = the static layout (no pin, no wall): carousel is flat, plain slide, no auto-rotate */
html:not(.e-pin) .y-car{--cw:min(calc(100vw - 2 * var(--gutter)),720px);margin:var(--s5,32px) auto 0;min-height:0}
html:not(.e-pin) .y-car-stage{perspective:none;overflow:hidden;border-radius:8px}
html:not(.e-pin) .y-car-card{transform:translateX(calc(-50% + var(--o) * (var(--cw) + 16px)));opacity:1;transition:transform .35s ease;will-change:auto}
html:not(.e-pin) .y-car-card:not(.is-c){opacity:.35}
html:not(.e-pin) .y-car-card[style*="--ao:2"],html:not(.e-pin) .y-car-card[style*="--ao:3"]{visibility:hidden}
html:not(.e-pin) .y-car-prev{left:8px}html:not(.e-pin) .y-car-next{right:8px}
html:not(.e-pin) .y-car-capa{width:var(--cw)}
@media (prefers-reduced-motion:reduce){
  .y-car-card,.y-car-frame,.y-car-btn,.y-car-dot i{transition:none!important}
  .y-car-card{transform:translateX(calc(-50% + var(--o) * (var(--cw) + 16px)))!important}
  .y-car-stage{perspective:none}
}

/* small phones: the 15 dots are 21px wide (too small / too crowded to be 40px targets), so they are dropped; counter, arrows, swipe and the focusable stage remain.
   The pause button becomes a real 40px target. */
/* MOBILE PASS 3 (2026-10-10, MB-04): arrows + pause are real 44px targets; the 19 dots cannot each be 44x44 on a tablet / phone (19 x 44 > width), so below 900px they are dropped
   (counter, arrows, swipe and the focusable stage remain). */
@media (max-width:899px){
  .y-car-dots{display:none}
  .y-car-pause{flex:none;width:44px;height:44px}
}

/* "Coming soon" card (Whale Tracker) under the services carousel */

/* ---- "Soon" services (Whale Tracker): same card, a "Soon" badge, a placeholder visual instead of a screenshot (theme tokens, so it works in dark and light) ---- */
.y-soon-tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;font:600 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid rgba(var(--c,var(--tw)),.55);background:rgba(var(--c,var(--tw)),.14);color:var(--text)}
.y-ph{position:absolute;inset:0;display:block;color:rgb(var(--c,61,242,154));background:radial-gradient(120% 120% at 50% 50%,rgba(var(--c,61,242,154),.22),rgba(var(--c,61,242,154),.05) 60%),rgba(var(--tw),.04)}
.y-ph svg{display:block;width:100%;height:100%}
.y-car-frame.is-soon{background:rgba(var(--tw),.05);border-style:dashed}
.y-soon-corner{position:absolute;top:12px;right:12px;margin:0;z-index:2;background:rgba(8,10,16,.72);color:#fff;border-color:rgba(255,255,255,.4)}
.y-item-soon .y-soon-tag{margin-left:8px}
.f-show-thumb{position:relative}
.f-show-soon .f-show-thumb{border-style:dashed}
.f-show-t .y-soon-tag{margin-left:8px}
.f-pin .f-show-frame .y-ph{position:absolute}
@media (prefers-reduced-motion:no-preference){.y-ph svg g:first-of-type{transform-origin:50% 50%;animation:y-ph-pulse 5s ease-in-out infinite}}
@keyframes y-ph-pulse{0%,100%{opacity:.35}50%{opacity:.65}}

/* ===== LOCKED PAGE (2026-10-11, Shachar): /services/ never scrolls. Every wheel / swipe / key gesture steps the tabs (f-carousel.js). 100dvh, overflow hidden, no overscroll (no rubber-band on iOS / Android).
   The header nav stays at the top; the footer is a compact bar pinned to the bottom (links + one legal line); there is no "All tabs" section below (the full list is the carousel itself). */
html.y-lock{height:100%;overflow:hidden;overscroll-behavior:none}
html.y-lock body{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
html.y-lock main{display:block;height:100dvh;overflow:hidden}
html.y-lock .y-hero{height:calc(100dvh - var(--ftr,72px) - var(--header,64px));margin:0}
/* vertical stack (flex column, no absolute offsets): header > head (eyebrow, h1, lede) > stage > caption row > dots + pause > [All tabs] [Sign up] > footer bar. The stage scales with the height. */
html.y-lock .y-pin,html.y-lock.e-pin .y-pin{position:relative;display:flex;flex-direction:column;justify-content:flex-start;height:100%;min-height:0;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
html.y-lock .y-car-stage{touch-action:none}
html.y-lock .y-pin .y-ui{position:relative;flex:0 1 auto;min-height:0;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(8px,1.8dvh,22px);padding:clamp(8px,4.5dvh,64px) var(--gutter) 0;overflow:hidden}
html.y-lock .y-pin .y-actions{position:relative;left:auto;bottom:auto;transform:none;flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;margin:clamp(6px,1.4dvh,16px) auto clamp(10px,2dvh,22px);padding:0 var(--gutter);right:auto;white-space:normal}
html.y-lock .y-actions .btn{height:auto;min-height:44px;padding-block:6px;line-height:1.15}
html.y-lock .y-bar{bottom:0}
html.y-lock .y-pin .y-car{--cw:max(150px,min(48vw,1000px,var(--cwfit,9999px)));flex:none;min-height:0}
@media (max-width:899px){html.y-lock .y-pin .y-car{--cw:max(150px,min(76vw,520px,var(--cwfit,9999px)))}}
/* readable over the particles: soft dark backdrop behind the text blocks */
html.y-lock .y-head,html.y-lock .y-car-capa{padding:8px 20px 10px;border-radius:16px;background:rgba(5,7,11,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:0 1px 14px rgba(0,0,0,.75)}
html.y-lock .y-car-capa{width:min(max(var(--cw),560px),100%);box-sizing:border-box}
html.y-lock .y-head .lede,html.y-lock .y-car .y-sub{color:rgba(255,255,255,.86)}
/* the full list (real links, name + description) stays in the server HTML as a visually clipped, inert duplicate for crawlers; the carousel is the UI */
html.y-lock .y-pin .y-list{display:block;position:absolute;left:0;right:0;top:0;bottom:0;width:auto;max-height:none;transform:none;margin:0;padding:0;list-style:none;z-index:30;-webkit-mask-image:none;mask-image:none}
html.y-lock .y-pin .y-list{width:1px;height:1px;left:0;top:0;right:auto;bottom:auto;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none}
html.y-lock .y-bar{bottom:0}
/* compact footer bar: pinned to the viewport bottom; links on one row (44px targets), copyright + the not-advice line under / beside; the third-party-names line lives on /terms */
html.y-lock .site-footer.tp-lfoot{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 16px env(safe-area-inset-bottom);border-top:1px solid rgba(var(--tw),.1);background:rgba(var(--k-07080b),.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.y-lock .tp-lfoot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;max-width:1400px}
html.y-lock .tp-lfoot-nav{flex:1 1 auto;gap:0 16px}
html.y-lock .tp-lfoot-nav a,html.y-lock .tp-lfoot-mbtn{min-height:44px}
html.y-lock .tp-lfoot .tp-foot-lines{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding:0 0 4px}
html.y-lock .tp-lfoot .copyright,html.y-lock .tp-lfoot .tp-risk{font-size:11px;line-height:1.4}
html.y-lock .tp-lfoot .tp-credit{margin-left:8px}
@media (max-width:899px){
  html.y-lock .tp-lfoot-in{display:block}
  html.y-lock .tp-lfoot-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;white-space:nowrap}
  html.y-lock .tp-lfoot-nav::-webkit-scrollbar{display:none}
  html.y-lock .tp-lfoot-nav>*{flex:none}
  html.y-lock .tp-lfoot .tp-foot-lines{display:block;padding:0 0 6px}
}
/* tall portrait screens (tablets held upright): a bigger stage; the leftover height is split above / below the stack */
@media (orientation:portrait) and (min-width:600px){html.y-lock .y-pin .y-car{--cw:max(150px,min(84vw,1000px,var(--cwfit,9999px)))}html.y-lock .y-pin .y-ui{padding-top:clamp(8px,9dvh,140px)}}
@media (max-width:899px){html.y-lock .y-head{text-align:center;max-width:100%;box-sizing:border-box}}
html.y-lock .y-head h1{font-size:clamp(24px,min(4.6vw,4.6dvh),46px);margin-top:4px;line-height:1.05;max-width:none}

/* the lede is ALWAYS visible (never clipped / display:none): smaller type on short and narrow screens, the stage scales instead (fit() counts its height) */
html.y-lock .y-head .lede{display:block!important;position:static!important;width:auto;height:auto;margin:6px auto 0!important;clip-path:none;overflow:visible;white-space:normal;max-width:62ch;font-size:clamp(12.5px,1.1vw,16px);line-height:1.38}
@media (max-width:899px),(max-height:800px){html.y-lock .y-head .lede{font-size:12.5px;line-height:1.35;max-width:52ch}}
/* hint under the buttons, tall screens only */
html.y-lock .y-pin .e-hint{display:none}
@media (min-height:821px) and (min-width:900px){html.y-lock .y-pin .e-hint{display:block;position:static;flex:none;margin:0 auto 8px;padding:0 var(--gutter);text-align:center;font-size:12px;pointer-events:none}}

/* legal lines are visible in the footer bar at every width: small and muted */
html.y-lock .tp-lfoot .copyright,html.y-lock .tp-lfoot .tp-risk{font-size:11px;line-height:1.4;color:rgba(255,255,255,.58)}
html.y-lock .tp-lfoot .tp-credit{color:rgba(255,255,255,.7)}
/* Sign up free: the single, larger primary button */
html.y-lock .y-pin .y-actions .y-signup{min-height:56px;padding:12px 44px;font-size:clamp(17px,1.35vw,20px);font-weight:700}
@media (max-width:899px){html.y-lock .y-pin .y-actions .y-signup{flex:0 1 auto;min-width:230px;padding:12px 40px;font-size:19px}}

/* THEME: light (a11y 2026-10-11, site QA): the y-lock hero text blocks and the footer bar were dark-theme only (white text on a 50% dark backdrop / white legal lines on the light bar, contrast ~1.05-1.7). In light: light frosted backdrop, no dark text-shadow, ink from the theme tokens. Dark theme untouched. */
html[data-theme=light].y-lock .y-head,html[data-theme=light].y-lock .y-car-capa{background:rgba(255,255,255,.82);text-shadow:none}
html[data-theme=light].y-lock .y-head .lede,html[data-theme=light].y-lock .y-car .y-sub{color:var(--text-2)}
html[data-theme=light].y-lock .y-hero .y-count,html[data-theme=light].y-lock .y-hero .y-go,html[data-theme=light].y-lock .y-head .eyebrow{color:var(--accent)}
html[data-theme=light].y-lock .tp-lfoot .copyright,html[data-theme=light].y-lock .tp-lfoot .tp-risk{color:rgb(var(--kt-8f96a3))}
html[data-theme=light].y-lock .tp-lfoot .tp-credit{color:rgb(var(--kt-c3c8d0))}
html[data-theme=light].y-lock .site-footer.tp-lfoot{background:rgba(var(--k-07080b),.96)}