/* Applicare design kit: the story sections (owner picks R84, 2026-09-27). Load after css/a-kit.css and
   css/kit-media.css (it uses .k-media, .k-pp and .k-pause from there).
   How a visit works (phone: the sticky media band; desktop, 1000px up: the living timeline; one set of words),
   care tips (the card stack) and the city map (the constellation on the night band).
   Behaviour: js/kit-sections.js. Kit tokens only. Every loop carries .loop and stops while its section is off
   screen, the tab is hidden or its Pause is pressed (.is-still); under reduced motion (.rm) nothing loops. */

.is-still .loop,.is-still .loop *,.is-still .loop::before,.is-still .loop::after,
.k-visit.is-held .loop,.k-visit.is-held .loop *{animation-play-state:paused!important}
.rm .loop,.rm .loop *,.rm .loop::before,.rm .loop::after{animation:none!important}
@keyframes k-pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0)}}
@keyframes k-float{from{transform:translate3d(0,5px,0) scale(1)}to{transform:translate3d(0,-5px,0) scale(1.02)}}
@keyframes k-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-132px,-132px,0)}}
@keyframes k-wave{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes k-buzz{0%,52%,100%{transform:none}56%{transform:rotate(-12deg)}61%{transform:rotate(10deg)}66%{transform:rotate(-8deg)}71%{transform:rotate(5deg)}76%{transform:none}}
.k-pat{position:absolute;inset:0;overflow:hidden;opacity:.08;pointer-events:none}
.k-pat svg{width:calc(100% + 264px);height:calc(100% + 264px)}
.motion .k-pat svg{animation:k-drift 48s linear infinite}

/* ================= how a visit works ================= */
.k-visit-head{max-width:44rem;margin-bottom:26px}
.k-visit-head .sub{max-width:34rem;text-wrap:pretty}
.k-watch{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:18px;padding:0 8px 0 0;border:0;border-radius:var(--radius-pill);background:none;cursor:pointer;text-align:left;font:700 var(--t-15)/1.25 var(--sans);color:var(--brand-deep);transition:transform var(--d-press) var(--ease-out)}
.k-watch[hidden]{display:none}
.k-watch:active{transform:scale(.97)}
.k-watch .pi{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand-deep);color:var(--on-night);box-shadow:var(--shadow-1)}
.k-watch .pi svg{width:14px;height:14px;margin-left:3px;fill:currentColor}
.k-watch small{display:block;margin-top:2px;font-size:var(--t-13);font-weight:500;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.k-watch:hover b{text-decoration:underline;text-underline-offset:3px}}
.k-visit-main{position:relative}

/* phone (R85 #3): the step's video floats small in the corner, above the dock, while the steps are on screen; a tap
   enlarges it to a card, the close button or a second tap makes it small again */
.k-vstage{position:fixed;right:12px;bottom:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom));z-index:35;width:100px;margin:0;
  opacity:0;transform:translate3d(0,18px,0) scale(.9);transform-origin:100% 100%;pointer-events:none;
  transition:opacity 240ms ease,transform 360ms var(--ease-out),width 380ms var(--ease-io),bottom 300ms var(--ease-io)}
.k-visit.is-near .k-vstage{opacity:1;transform:none;pointer-events:auto}
.dock-away .k-vstage{bottom:calc(12px + env(safe-area-inset-bottom))}
.k-vstage.is-big{width:min(calc(100vw - 24px),420px)}
.k-vframe{position:relative;isolation:isolate;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:var(--night);box-shadow:0 18px 36px -14px rgba(6,30,28,.6),0 0 0 2px var(--card)}
.k-vstage.is-big .k-vframe{border-radius:var(--radius-2xl)}
.k-vexpand{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;padding:8px;border:0;border-radius:16px;background:transparent;color:var(--on-night);cursor:zoom-in}
.k-vexpand .i{width:22px;height:22px;padding:4px;box-sizing:content-box;border-radius:50%;background:rgba(6,30,28,.55)}
.k-vstage.is-big .k-vexpand{cursor:zoom-out}
.k-vstage.is-big .k-vexpand .i{display:none}
.k-vno{position:absolute;left:8px;top:8px;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand-deep);color:var(--on-night);font:600 15px/1 var(--serif);box-shadow:0 0 0 2px rgba(244,248,247,.9)}
.k-vclose{position:absolute;right:-6px;top:-16px;z-index:4;display:none;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer}
.k-vclose .i{width:20px;height:20px}
.k-vstage.is-big .k-vclose{display:grid}
.k-vstage.is-big .k-vno{display:none}
.k-vframe-pp{top:auto;bottom:12px;right:12px;display:none}
.k-vstage.is-big .k-vframe-pp{display:grid}
.k-vstage:not(.is-big) .k-vcap,.k-vstage:not(.is-big) .k-vlayer.shade::after{display:none}
.rm .k-vstage{transition-duration:120ms}
.k-vlayer{position:absolute;inset:0;opacity:0;transition:opacity 620ms var(--ease-out)}
.k-vlayer.is-on{opacity:1;z-index:1}
.k-vlayer>.k-media,.k-vlayer>.k-vcard,.k-vlayer>.k-vring,.k-vlayer>.k-vpage{transform:scale(1.045);transition:transform 1400ms var(--ease-expo)}
.k-vlayer.is-on>.k-media,.k-vlayer.is-on>.k-vcard,.k-vlayer.is-on>.k-vring,.k-vlayer.is-on>.k-vpage{transform:none}
.k-vlayer>video.k-media{transition:transform 1400ms var(--ease-expo),opacity 400ms ease}
.rm .k-vlayer{transition-duration:200ms}
.rm .k-vlayer>*{transform:none!important}
.k-vlayer.shade::after{content:"";position:absolute;inset:0 0 auto;height:104px;background:linear-gradient(to bottom,rgba(6,30,28,.78),rgba(6,30,28,0));pointer-events:none}
.k-vcap{position:absolute;z-index:2;left:14px;right:58px;top:12px;margin:0;font-size:var(--t-13);font-weight:700;line-height:1.35;color:var(--on-night)}
.k-vcap small{display:block;font-size:var(--t-12);font-weight:500;color:var(--on-night-2)}
/* step 1: the booking card floating on deep teal */
.k-vcard{position:absolute;inset:0;display:grid;place-items:center;padding:46px 18px 16px;background:radial-gradient(120% 70% at 50% 22%,var(--brand-dark) 0,var(--brand-deep) 45%,var(--night) 100%)}
.k-vcard img{width:auto;height:auto;max-width:100%;max-height:calc(100% - 62px);border-radius:16px;box-shadow:0 26px 50px -22px rgba(0,0,0,.6),0 0 0 1px rgba(238,245,243,.12)}
.motion .k-vcard img{animation:k-float 7s ease-in-out infinite alternate}
/* the phone ringing (step 2, when it has no clip of its own) */
.k-vring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;padding:40px 20px 8px;background:radial-gradient(90% 60% at 30% 50%,rgba(59,163,159,.26),rgba(59,163,159,0) 70%),var(--night);color:var(--on-night)}
.k-ring{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:var(--brand);color:var(--on-night);box-shadow:0 10px 24px -10px rgba(6,30,28,.7)}
.k-ring .i{width:24px;height:24px;stroke-width:1.8}
.k-wave{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-light);opacity:0;pointer-events:none}
.motion .k-wave{animation:k-wave 2.8s var(--ease-out) infinite}
.motion .k-wave+.k-wave{animation-delay:1.1s}
.motion .k-ring .i{animation:k-buzz 2.8s ease-in-out infinite}
.k-vring ul{flex:0 1 200px;margin:0;padding:0;list-style:none}
.k-vring li{display:flex;flex-direction:column;padding:7px 0;border-top:1px solid var(--line-night)}
.k-vring li:last-child{border-bottom:1px solid var(--line-night)}
.k-vring b{font:600 var(--t-18)/1.2 var(--serif);color:var(--on-night)}
.k-vring span{font-size:var(--t-13);font-weight:600;color:var(--on-night-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* step 6: the booking page under a dark caption bar, travelling slowly so all of it shows */
.k-vpage{position:absolute;inset:0;padding-top:46px;background:var(--night)}
.k-vpage-clip{position:relative;height:100%;overflow:hidden;background:var(--paper)}
.k-vpage img{display:block;width:100%;height:auto}
.motion .k-vpage img{animation:k-pan 11s ease-in-out 1s infinite alternate}

/* the steps, on the line (the line fills with scroll: a CSS view timeline, or step by step from the script) */
.k-vlist{position:relative;z-index:1;padding:6px 0 14svh}
.k-vtrack{position:absolute;left:19px;top:0;bottom:14svh;width:2px}
.k-vtrack::before,.k-vfill{position:absolute;inset:0;border-radius:2px}
.k-vtrack::before{content:"";background:var(--line-2)}
.k-vtrack::before,.k-vtrack .k-vfill{-webkit-mask-image:linear-gradient(transparent,var(--ink) 5%,var(--ink) 95%,transparent);mask-image:linear-gradient(transparent,var(--ink) 5%,var(--ink) 95%,transparent)}
.k-vfill{background:var(--brand);transform-origin:50% 0;transform:scaleY(0);transition:transform 700ms var(--ease-out)}
.rm .k-vfill{transition:none}
.k-vdot{display:none}
@keyframes k-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline:view()){
  html.motion .k-vtrack{view-timeline:--k-vtrack block}
  html.motion .k-vfill{transition:none;animation:k-fill linear both;animation-timeline:--k-vtrack;animation-range:entry 38% exit 38%}
}
.k-vsteps{margin:0;padding:0;list-style:none}
.k-vstep{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-content:start;min-height:30svh;padding:30px 0 18px}
.k-vnode{grid-column:1;grid-row:1}
.k-vn{position:relative;isolation:isolate;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);color:var(--ink-3);font:800 var(--t-15)/1 var(--sans);font-variant-numeric:tabular-nums;
  transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease,box-shadow 300ms ease}
.k-vstep.is-done .k-vn{border-color:var(--brand);color:var(--brand-deep)}
.k-vstep.is-on .k-vn{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-night);box-shadow:0 0 0 5px rgba(45,135,131,.16)}
.k-vtxt{grid-column:2;grid-row:1;min-width:0}
.k-vstep h3{margin:5px 0 8px;font:600 var(--t-21)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink-3);text-wrap:balance;transition:color 300ms ease}
.k-vtxt>p{font-size:var(--t-15);color:var(--ink-3);transition:color 300ms ease}
.k-vtxt>p+p{margin-top:8px}
.k-vstep.is-on h3{color:var(--ink)}
.k-vstep.is-on .k-vtxt>p{color:var(--ink-2)}
.k-slots{margin:10px 0 0;padding:0;list-style:none;max-width:360px;font-size:var(--t-14);color:var(--ink-2)}
.k-slots li{display:flex;flex-wrap:wrap;column-gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.k-slots li:last-child{border-bottom:1px solid var(--line)}
.k-slots b{min-width:84px;color:var(--ink)}
.k-slots span{font-variant-numeric:tabular-nums}
.k-vstep.has-ring .k-slots{display:none} /* the ringing panel already shows the windows */
/* step 4: the bill */
.k-vbill{position:relative;grid-column:2;margin-top:14px;padding:14px 16px 16px;border-radius:var(--radius-lg);background:var(--tint)}
.k-vbill .k-pat{display:none}
.k-vbill-top{display:flex;align-items:center;gap:10px;font-size:var(--t-13);font-weight:700;color:var(--brand-deep)}
.k-vbill-top .la{width:28px;height:28px;color:var(--brand-deep)}
.k-vbill .k-vbill-price{margin-top:8px;font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
.k-vbill .k-vbill-price b{color:var(--ink);font-variant-numeric:tabular-nums}
.k-vbill-cols p{margin-top:8px;font:600 var(--t-18)/1.3 var(--serif);color:var(--ink);text-wrap:balance}
.k-vbill em{font-style:italic;font-weight:500;color:var(--brand-deep)}
/* step 5: the warranty sentence (R77, word for word) */
.k-vwar{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.k-vwar .la{width:28px;height:28px;color:var(--brand)}
.k-vtxt>.k-vwar span{font-size:var(--t-15)}
.k-vwar b{color:var(--ink)}
/* step 6: the line and the signature stroke */
.k-vtxt>.k-vline{margin-top:14px;font:500 italic var(--t-21)/1.3 var(--serif);color:var(--brand-deep);text-wrap:pretty}
.k-vsig{display:block;width:88px;height:2px;margin-top:12px;border-radius:2px;background:var(--accent);transform-origin:0 50%}
.motion .k-vsig{transform:scaleX(0);transition:transform 900ms var(--ease-io) 250ms}
.motion .k-vstep.is-on .k-vsig,.motion .k-vstep.is-done .k-vsig,.motion .k-vstep.is-lit .k-vsig{transform:none}

/* tablets (600 to 999px): shorter steps */
@media (min-width:600px) and (max-width:999px){.k-vstep{min-height:24svh}}

/* desktop: the living timeline. The heading and the step's video stay in the left column (R85 #3: the column was empty
   under the heading); on the right six serif numerals on one line, the line fills with scroll and an orange dot rides
   its head; the bill is a dark station the line runs behind. The video is the step the line's head has reached. */
@media (min-width:1000px){
  .k-visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
  .k-visit-side{position:sticky;top:calc(var(--hdr-h) + 28px)}
  .k-visit-head{margin:0 0 22px}
  .k-vstage,.k-visit.is-near .k-vstage{position:relative;right:auto;bottom:auto;z-index:auto;width:min(100%,400px,calc((100svh - var(--hdr-h) - 300px) * .8));opacity:1;transform:none;pointer-events:auto}
  .k-vframe{border-radius:var(--radius-2xl);box-shadow:0 1px 2px rgba(13,74,70,.08),0 24px 48px -24px rgba(6,30,28,.55)}
  .k-vexpand,.k-vclose,.k-vno{display:none}
  .k-vframe-pp,.k-vstage.is-big .k-vframe-pp{display:grid}
  .k-vstage:not(.is-big) .k-vcap{display:block}
  .k-vstage:not(.is-big) .k-vlayer.shade::after{display:block}
  .k-vlist{padding:0}
  .k-vtrack{left:25px;top:26px;bottom:0}
  .k-vtrack::before,.k-vtrack .k-vfill{-webkit-mask-image:linear-gradient(var(--ink) 88%,transparent);mask-image:linear-gradient(var(--ink) 88%,transparent)}
  .k-vstep{grid-template-columns:52px minmax(0,1fr);column-gap:28px;min-height:0;padding:0 0 64px}
  .k-vstep:last-child{padding-bottom:8px}
  .k-vnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
  .k-vn,.k-vstep.is-on .k-vn,.k-vstep.is-done .k-vn{width:52px;height:52px;background:var(--card);border:1.5px solid var(--line-2);box-shadow:none;font:600 28px/1 var(--serif);color:var(--brand-deep)}
  .k-vn::before{content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:50%;background:var(--brand-deep);opacity:0;transform:scale(.6);transition:opacity 300ms ease,transform 420ms var(--ease-out)}
  .k-vstep.is-lit .k-vn{color:var(--on-night);border-color:var(--brand-deep)}
  .k-vstep.is-lit .k-vn::before{opacity:1;transform:none}
  .k-vtxt{padding-top:8px;max-width:560px}
  .k-vstep h3,.k-vstep.is-on h3{margin:0;font:700 var(--t-21)/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink)}
  .k-vtxt>p,.k-vstep.is-on .k-vtxt>p{margin-top:6px;font-size:var(--t-16);color:var(--ink-2)}
  .k-vstep.has-ring .k-slots{display:block}
  .k-slots{font-size:var(--t-15)}
  .k-vtxt>.k-vwar span{font-size:var(--t-16)}
  .k-vwar{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .k-vwar .la{width:32px;height:32px}
  .k-vtxt>.k-vline{margin-top:12px;font-size:clamp(1.35rem,1rem + .7vw,1.75rem)}
  .k-vsig{width:80px}
  .k-vbill{z-index:2;grid-column:1/-1;isolation:isolate;overflow:hidden;margin-top:30px;padding:30px 40px 34px;border-radius:var(--radius-2xl);background:var(--night);color:var(--on-night);box-shadow:var(--shadow-2)}
  .k-vbill::after{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,163,159,.34),rgba(59,163,159,0))}
  .k-vbill .k-pat{display:block;opacity:.07}
  .k-vbill-top{color:var(--on-night-2)}
  .k-vbill-top .la{width:30px;height:30px;color:var(--accent)}
  .k-vbill .k-vbill-price{margin-top:10px;font-size:var(--t-15);color:var(--on-night-2)}
  .k-vbill .k-vbill-price b{color:var(--on-night)}
  .k-vbill-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:6px}
  .k-vbill-cols p{margin-top:8px;font-size:clamp(1.45rem,1.05rem + .8vw,1.9rem);line-height:1.28;color:var(--on-night)}
  .k-vbill-cols p+p{padding-left:40px;border-left:1px solid var(--line-night)}
  .k-vbill em{color:var(--brand-light)}
  /* the desktop tiles */
  .k-vt-card{position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 40%,var(--brand-dark),var(--night))}
  .k-vt-card img{position:absolute;left:0;top:13%;height:74%;width:auto;max-width:none;border-radius:10px}
  .motion .k-vt-card img{animation:k-pan 7s ease-in-out infinite alternate}
  .k-vt-ring{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(80% 50% at 50% 50%,rgba(59,163,159,.3),rgba(59,163,159,0) 72%),var(--night)}
  .k-vt-ring .k-ring{width:64px;height:64px}
  .k-vt-page{position:absolute;inset:0;background:var(--paper)}
  .k-vt-page img{display:block;width:100%;height:auto}
  .motion .k-vt-page img{animation:k-pan 8s ease-in-out infinite alternate}
}
@supports (animation-timeline:view()){
  @media (min-width:1000px){
    html.motion .k-vfill{animation-range:entry 50% exit 50%}
    html.motion .k-vdot{display:block;position:sticky;top:50%;height:0}
    .k-vdot::before,.k-vdot::after{content:"";position:absolute;left:-5px;top:-6px;width:12px;height:12px;border-radius:50%}
    .k-vdot::before{background:var(--accent);box-shadow:0 0 0 3px var(--card)}
    .k-vdot::after{border:2px solid var(--accent);opacity:0}
    .motion .k-vdot::after{animation:k-wave 2.4s var(--ease-out) infinite}
    .k-visit.is-still .k-vdot::after{animation-play-state:paused}
  }
}

/* the 26-second visit video: a bottom sheet on phones, a centred dialog on desktop */
.k-vd{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;color:var(--ink)}
.k-vd::backdrop{background:rgba(6,30,28,.62);opacity:0;transition:opacity 260ms ease}
.k-vd.is-in::backdrop{opacity:1}
.k-vd-box{padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;background:var(--card);box-shadow:0 -20px 48px -20px rgba(6,30,28,.4);transform:translateY(100%);transition:transform 340ms var(--ease-drawer)}
.k-vd.is-in .k-vd-box{transform:none}
.k-vd-grip{width:40px;height:4px;margin:2px auto 4px;border-radius:2px;background:var(--line-2)}
.k-vd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 10px 4px}
.k-vd-head h2{font:700 var(--t-18)/1.3 var(--sans)}
.k-vd-head p{font-size:var(--t-13);color:var(--ink-3)}
.k-vd-x{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:var(--tint);color:var(--ink);cursor:pointer}
.k-vd-x .i{width:20px;height:20px}
.k-vd-media{position:relative;height:min(64svh,600px);aspect-ratio:9/16;margin:0 auto;overflow:hidden;border-radius:var(--radius-xl);background:var(--night)}
.k-vd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--night)}
.rm .k-vd-box{transform:none;opacity:0;transition:opacity 180ms ease}
.rm .k-vd.is-in .k-vd-box{opacity:1}
html.k-vd-lock{overflow:hidden}
@media (hover:hover) and (pointer:fine){.k-vd-x:hover{background:var(--plinth)}}
@media (min-width:1000px){
  .k-vd{inset:0;width:min(1000px,calc(100vw - 80px));height:fit-content;margin:auto}
  .k-vd-box{padding:14px 18px 20px;border-radius:var(--radius-2xl);transform:translateY(10px) scale(.97);opacity:0;transition:transform 280ms var(--ease-out),opacity 200ms ease}
  .k-vd.is-in .k-vd-box{transform:none;opacity:1}
  .k-vd-grip{display:none}
  .k-vd-media{height:auto;width:100%;aspect-ratio:16/9}
}

/* ================= care tips: the card stack ================= */
.k-tips{--slide-paper:var(--card);--slide-paper-2:var(--card);position:relative;overflow:hidden}
@supports (color:color-mix(in srgb,red,blue)){
  /* the slides' warm paper: the kit's card warmed with a trace of the star amber (the owner's carousel look) */
  .k-tips{--slide-paper:color-mix(in srgb,var(--card) 95%,var(--warning));--slide-paper-2:color-mix(in srgb,var(--card) 87%,var(--warning))}
}
.k-tips-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.k-apl{position:relative;display:flex;gap:8px;overflow-x:auto;margin:2px -20px 0;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
.k-apl::-webkit-scrollbar{display:none}
.k-apl.fade-r{-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 44px),transparent)}
.k-apl.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 32px,var(--ink) calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 32px,var(--ink) calc(100% - 44px),transparent)}
.k-apl.fade-l:not(.fade-r){-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 32px);mask-image:linear-gradient(90deg,transparent,var(--ink) 32px)}
.k-apl-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 7px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font:600 var(--t-14)/1 var(--sans);white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.k-apl-chip img{width:30px;height:30px;padding:3px;border-radius:50%;background:var(--plinth);object-fit:contain}
.k-apl-chip:active{transform:scale(.97)}
.k-apl-chip[aria-selected="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-night)}
.k-apl-chip[aria-selected="true"] img{background:var(--card)}
@media (hover:hover) and (pointer:fine){.k-apl-chip:not([aria-selected="true"]):hover{border-color:var(--brand);color:var(--brand-deep)}}
/* the slide: warm paper, a small serif-italic accent word, a heavy headline with one phrase in solid teal, the room
   photo bleeding off an edge. Sizes follow the slide's own width (cqw). */
.k-slide{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--radius-2xl);background:linear-gradient(180deg,var(--slide-paper) 0%,var(--slide-paper-2) 100%);container-type:inline-size;isolation:isolate;box-shadow:var(--shadow-1)}
.k-slide .ph{position:absolute;z-index:0;overflow:hidden;background:var(--plinth)}
.k-slide .ph.flip{transform:scaleX(-1)}
.k-slide .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.k-slide.t-hero .ph{right:0;bottom:0;width:64%;height:50%;border-top-left-radius:var(--radius-2xl)}
.k-slide.t-list .ph{right:0;bottom:0;top:46%;width:37%;border-top-left-radius:var(--radius-2xl)}
.k-slide.t-book .ph{right:0;top:0;width:50%;height:38%;border-bottom-left-radius:var(--radius-2xl)}
.k-slide.t-hero .ph.flip,.k-slide.t-list .ph.flip{border-top-left-radius:0;border-top-right-radius:var(--radius-2xl)}
.k-slide.t-book .ph.flip{border-bottom-left-radius:0;border-bottom-right-radius:var(--radius-2xl)}
.k-slide .tx{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:8cqw 7cqw 7cqw}
.k-slide.t-book .tx{justify-content:flex-end}
.k-slide h3{max-width:94%;font:800 9.2cqw/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.k-slide.t-hero h3{font-size:min(11.2cqw,calc(var(--t-h2) * .9));max-width:96%}
.k-slide h3 em{font-style:normal;color:var(--brand)}
.k-slide .acc{display:block;margin:0 0 1.4cqw .2em;font:italic 500 7.6cqw/1 var(--serif);letter-spacing:0;color:var(--brand-deep)}
.k-slide .tp{max-width:58%;margin-top:4.4cqw;font-size:clamp(13px,4.5cqw,16px);line-height:1.45;color:var(--ink-2)}
.k-slide.t-book .tp{max-width:none}
.k-slide .tlead{max-width:58%;margin-top:4.4cqw;font-size:clamp(12px,3.9cqw,14px);font-weight:700;color:var(--ink)}
.k-slide .tl{display:grid;gap:2.4cqw;max-width:58%;margin:2.4cqw 0 0;padding:0;list-style:none}
.k-slide .tl li{display:grid;grid-template-columns:auto 1fr;gap:2.2cqw;align-items:start;font-size:clamp(12.5px,4.2cqw,15px);line-height:1.32;color:var(--ink-2)}
.k-slide .tl li>i{width:1.9cqw;height:1.9cqw;min-width:6px;min-height:6px;margin-top:.5em;border-radius:50%;background:var(--brand)}
.k-slide .tl li>.i{width:max(15px,4.6cqw);height:max(15px,4.6cqw);margin-top:.05em;color:var(--brand);stroke-width:2.6}
.k-slide .tl.ck{margin-top:4.4cqw}
.k-slide .tcta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:5cqw}
.k-slide .tcta .btn{min-height:48px;padding:0 20px;font-size:var(--t-15)}
.k-slide .ttel{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-14);font-weight:600;color:var(--ink-2);text-underline-offset:3px}
.k-slide .tswipe{position:absolute;left:7cqw;bottom:6.5cqw;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 18px;border:0;border-radius:var(--radius-pill);background:var(--tint);color:var(--brand-deep);font:700 var(--t-14)/1 var(--sans);cursor:pointer;box-shadow:var(--shadow-1);transition:transform var(--d-press) var(--ease-out)}
.k-slide .tswipe:active{transform:scale(.96)}
.k-slide .tswipe .nudge{display:grid}
.k-slide .tswipe .i{width:16px;height:16px}
/* a workshop prop, as in the owner's carousels: the kit's own line-art wrench, faint, drifting slowly */
.k-slide .prop{position:absolute;z-index:0;width:36cqw;height:36cqw;color:var(--brand);opacity:.14;pointer-events:none;stroke-width:1.5;transform:rotate(-20deg)}
.k-slide.t-list .prop{left:-6cqw;bottom:-7cqw}
.k-slide.t-book .prop{left:5cqw;top:7cqw;transform:rotate(16deg)}
@keyframes k-prop-l{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-11deg) translate3d(2cqw,-1.5cqw,0)}}
@keyframes k-prop-b{0%,100%{transform:rotate(16deg)}50%{transform:rotate(7deg) translate3d(1.5cqw,2cqw,0)}}
.motion .k-slide.t-list .prop.loop{animation:k-prop-l 12s ease-in-out infinite}
.motion .k-slide.t-book .prop.loop{animation:k-prop-b 13s ease-in-out infinite}
@keyframes k-nudge{0%,50%,100%{transform:none}22%{transform:translate3d(5px,0,0)}}
.motion .k-slide .tswipe .nudge.loop{animation:k-nudge 2.6s var(--ease-out) infinite}
/* Ken Burns on the photo: slow, alternating, transform only */
@keyframes k-kb-a{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-3%,-2%,0)}}
@keyframes k-kb-b{from{transform:scale(1.15) translate3d(2%,-1.5%,0)}to{transform:scale(1.04) translate3d(-1%,1%,0)}}
.motion .k-slide .ph img.kb-a{animation:k-kb-a 17s ease-in-out infinite alternate}
.motion .k-slide .ph img.kb-b{animation:k-kb-b 19s ease-in-out infinite alternate}
/* the stack: drag the top card away (vertical still scrolls the page), the next two wait behind it, breathing */
.k-stack{position:relative;width:min(100% - 24px,320px);aspect-ratio:4/5;margin:22px auto 36px;touch-action:pan-y;isolation:isolate;outline-offset:8px;border-radius:var(--radius-2xl)}
.k-stack::before{content:"";position:absolute;inset:-18% -30%;z-index:-1;background:radial-gradient(closest-side,rgba(45,135,131,.16),rgba(45,135,131,0));pointer-events:none}
.k-scard{position:absolute;inset:0;transition:transform 460ms var(--ease-out),opacity 320ms ease;-webkit-user-select:none;user-select:none}
.k-scard .sin{position:absolute;inset:0}
.k-scard .k-slide{position:absolute;inset:0;box-shadow:var(--shadow-2)}
.k-scard.d0{z-index:3}
.k-scard.d1{z-index:2;transform:translate3d(20px,16px,0) rotate(5deg) scale(.95)}
.k-scard.d2{z-index:1;transform:translate3d(-22px,28px,0) rotate(-5.5deg) scale(.91)}
.k-scard .sin::after{content:"";position:absolute;inset:0;border-radius:var(--radius-2xl);background:var(--ink);opacity:0;pointer-events:none;transition:opacity 320ms ease}
.k-scard.d1 .sin::after{opacity:.05}
.k-scard.d2 .sin::after{opacity:.09}
.k-scard.d3{z-index:0;transform:translate3d(0,36px,0) scale(.86);opacity:0}
.k-scard.d1 .k-slide,.k-scard.d2 .k-slide{box-shadow:var(--shadow-1)}
.k-scard.out-l,.k-scard.in-l{z-index:4;transform:translate3d(-128%,30px,0) rotate(-15deg);opacity:0}
.k-scard.out-r{z-index:4;transform:translate3d(128%,30px,0) rotate(15deg);opacity:0}
.k-scard.out-l,.k-scard.out-r{transition:transform 440ms var(--ease-out),opacity 440ms ease}
.k-scard.dragging{transition:none;cursor:grabbing}
.k-scard.spring{transition:transform 560ms cubic-bezier(.34,1.34,.64,1)} /* gesture-driven: a small bounce back */
.k-scard.d0 .k-slide{cursor:grab}
.k-scard:not(.d0) .ph img{animation:none!important}
@keyframes k-breathe-a{0%,100%{transform:none}50%{transform:translate3d(4px,-5px,0) rotate(.9deg)}}
@keyframes k-breathe-b{0%,100%{transform:none}50%{transform:translate3d(-4px,-3px,0) rotate(-1deg)}}
@keyframes k-hint{0%,100%{transform:none}32%{transform:translate3d(-22px,2px,0) rotate(-3deg)}64%{transform:translate3d(5px,0,0) rotate(.6deg)}}
.motion .k-scard.d1 .sin.loop{animation:k-breathe-a 6.2s ease-in-out infinite}
.motion .k-scard.d2 .sin.loop{animation:k-breathe-b 7.6s ease-in-out infinite}
.motion .k-scard.d0 .sin.hint{animation:k-hint 1300ms var(--ease-io) both}
.rm .k-scard{transition:opacity 200ms ease}
.k-stack-ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,380px);margin:0 auto}
.k-stack-prog{display:grid;justify-items:center;gap:8px;font-size:var(--t-14);color:var(--ink-2);font-variant-numeric:tabular-nums}
.k-stack-prog b{color:var(--ink)}
.k-segs{display:flex;gap:4px}
.k-segs i{display:block;width:18px;height:4px;border-radius:2px;background:var(--line-2);transition:background-color var(--d-ui) ease}
.k-segs i.on{background:var(--brand)}
.k-stack-next{min-height:48px;padding:0 18px 0 20px;font-size:var(--t-15)}
.k-stack-foot{display:flex;justify-content:center;margin-top:16px}
@media (min-width:1000px){
  .k-tips-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
  .k-apl{flex-direction:column;flex-wrap:nowrap;gap:6px;max-width:340px;margin:8px 0 0;padding:0 0 4px;overflow:visible;-webkit-mask-image:none!important;mask-image:none!important}
  .k-apl-chip{justify-content:flex-start;min-height:52px;padding:0 18px 0 8px;border-color:transparent;background:transparent;font-size:var(--t-16)}
  .k-apl-chip img{width:36px;height:36px}
  .k-apl-chip[aria-selected="true"]{background:var(--brand-deep)}
  .k-stack{width:400px;margin:18px auto 44px}
  .k-stack-foot{margin-top:18px}
}
@media (min-width:1000px) and (hover:hover) and (pointer:fine){.k-apl-chip:not([aria-selected="true"]):hover{background:var(--tint);border-color:transparent}}

/* ================= the city map: a constellation on the night band ================= */
.k-map{position:relative;overflow:hidden;background:var(--night);color:var(--on-night)}
.k-map::after{content:"";position:absolute;right:-220px;top:-160px;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,163,159,.22),rgba(59,163,159,0));pointer-events:none}
.k-map .h2{color:var(--on-night)}
.k-map .h2 em{color:var(--brand-light)}
.k-map .sub{color:var(--on-night-2)}
.k-map :focus-visible{outline-color:var(--on-night)}
.k-map .k-pause{border-color:var(--line-night);color:var(--on-night-2)}
@media (hover:hover) and (pointer:fine){.k-map .k-pause:hover{border-color:var(--on-night);color:var(--on-night)}}
.k-map-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.k-map-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.k-seg{display:inline-flex;padding:2px;border:1px solid var(--line-night);border-radius:var(--radius-pill)}
.k-seg button{min-height:44px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--on-night-2);font:600 var(--t-13)/1 var(--sans);cursor:pointer;transition:background-color var(--d-ui) ease,color var(--d-ui) ease}
.k-seg button[aria-pressed="true"]{background:var(--on-night);color:var(--night)}
.k-map-stage{position:relative;height:380px;margin:0 -20px;overflow:hidden;touch-action:manipulation;
  transition:height 420ms var(--ease-io);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 10px,var(--ink) calc(100% - 10px),transparent),linear-gradient(180deg,var(--ink) calc(100% - 20px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,var(--ink) 10px,var(--ink) calc(100% - 10px),transparent),linear-gradient(180deg,var(--ink) calc(100% - 20px),transparent);mask-composite:intersect}
.k-map-stage .k-map-dot.is-out{opacity:0!important;pointer-events:none}
.k-map-edge{position:absolute;left:50%;bottom:10px;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 32px);min-height:40px;padding:0 14px;border:1px solid var(--line-night);border-radius:var(--radius-pill);background:rgba(6,30,28,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--on-night);font:600 var(--t-13)/1.2 var(--sans);cursor:pointer;white-space:nowrap}
.k-map-edge span{overflow:hidden;text-overflow:ellipsis}
.k-map-edge .i{width:14px;height:14px;flex:none}
.k-map-edge[hidden]{display:none}
.k-map-stage.is-pointing{cursor:pointer}
.k-map-svg{position:absolute;left:0;top:0;overflow:visible;transition:opacity 180ms ease}
.k-map-stage.zooming .k-map-svg,.k-map-stage.zooming .k-map-lab{opacity:0!important;transition:opacity 120ms ease}
/* the India outline (js/data/india-outline.geo.json, Survey of India boundary via DataMeet, CC-0), drawn by
   js/kit-sections.js with the same projection as the dots */
.k-map-outline path{fill:rgba(238,245,243,.035);stroke:rgba(238,245,243,.22);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.k-map-base{fill:none;stroke:var(--line-night);stroke-width:1.1;stroke-linecap:round;transition:stroke 200ms ease}
.k-map-base.on{stroke:var(--brand-light);stroke-width:1.8}
.motion .k-map-base{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms var(--ease-io),stroke 200ms ease}
.motion .k-map-stage.in .k-map-base{stroke-dashoffset:0}
.k-map-glow,.k-map-spark{fill:none;stroke-linecap:round;opacity:0}
.k-map-glow{stroke:var(--brand-light);stroke-width:2.4;stroke-dasharray:.14 2;stroke-dashoffset:.14}
.k-map-spark{stroke:var(--on-night);stroke-width:2.4;stroke-dasharray:.02 2;stroke-dashoffset:.02}
@keyframes k-map-tail{0%{stroke-dashoffset:.14;opacity:0}6%{opacity:.55}40%{stroke-dashoffset:-1;opacity:.55}41%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes k-map-spark{0%{stroke-dashoffset:.02;opacity:0}6%{opacity:1}40%{stroke-dashoffset:-1.12;opacity:1}41%,100%{stroke-dashoffset:-1.12;opacity:0}}
.motion .k-map-stage.glowing .k-map-glow{animation:k-map-tail 8s linear infinite}
.motion .k-map-stage.glowing .k-map-spark{animation:k-map-spark 8s linear infinite}
.k-map-dots,.k-map-labs{position:absolute;inset:0}
.k-map-dot{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:none;transition:transform 820ms var(--ease-io)}
.k-map-stage.no-tr .k-map-dot{transition:none}
.k-map-dot i{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--on-night);box-shadow:0 0 0 3px rgba(59,163,159,.28);transition:transform var(--d-ui) var(--ease-out)}
.k-map-dot i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--brand-light);opacity:0}
@keyframes k-map-pulse{0%{transform:scale(.7);opacity:.75}100%{transform:scale(3.1);opacity:0}}
.motion .k-map-dot i.loop::after{animation:k-map-pulse 3.8s var(--ease-out) infinite;animation-delay:var(--pd,0s)}
.k-map-dot.is-grp i{width:11px;height:11px;box-shadow:0 0 0 2px var(--night),0 0 0 3.5px var(--on-night-2)}
.k-map-dot.is-hq i{width:13px;height:13px;background:var(--on-night);box-shadow:0 0 0 2.5px var(--night),0 0 0 4px var(--accent)}
.k-map-dot.is-hq i::after{border-color:var(--accent);inset:-4px}
.motion .k-map-dot.is-hq i.loop::after{animation-duration:3s}
.k-map-dot.is-hot i,.k-map-dot.is-sel i{transform:scale(1.35)}
.k-map-dot:focus-visible{outline:2px solid var(--on-night);outline-offset:-8px}
.k-map-lab{position:absolute;left:0;top:0;padding:3px 7px;border-radius:var(--radius-md);font:600 12px/1.2 var(--sans);color:var(--on-night-2);white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 0 6px var(--night),0 0 2px var(--night);transition:opacity 260ms ease}
.k-map-lab.show{opacity:1}
.k-map-lab.is-hq{font-size:var(--t-13);font-weight:700;color:var(--on-night)}
.k-map-lab.is-hq small{display:block;font-size:var(--t-12);font-weight:500;color:var(--on-night-2)}
.k-map-lab.is-grp{color:var(--on-night)}
.k-map-lab.sel{opacity:1;color:var(--on-night)}
.k-map-lab.hot{z-index:2;opacity:1;background:var(--on-night);color:var(--night);text-shadow:none}
.k-map-lab.hot small{color:var(--ink-2)}
.k-map-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;min-height:78px;margin-top:10px;padding:12px 16px;border:1px solid var(--line-night);border-radius:var(--radius-xl)}
.k-map-info b{display:block;font-size:var(--t-16);color:var(--on-night)}
.k-map-info span{display:block;font-size:var(--t-13);line-height:1.4;color:var(--on-night-2)}
.k-map-info .k-map-links{display:flex;flex-wrap:wrap;gap:0 14px}
.k-map-go{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:var(--t-14);font-weight:700;color:var(--on-night);text-decoration:none;white-space:nowrap}
.k-map-go .i{width:16px;height:16px;transition:transform var(--d-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.k-map-go:hover{text-decoration:underline;text-underline-offset:3px}.k-map-go:hover .i{transform:translateX(2px)}}
.motion .k-map-info>*{animation:rise 360ms var(--ease-out) both}
.k-map-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-night);border-radius:var(--radius-pill);background:transparent;color:var(--on-night);font:600 var(--t-14)/1 var(--sans);cursor:pointer}
.k-map-more[hidden]{display:none}
.k-map-more .i{width:16px;height:16px;transition:transform var(--d-ui) var(--ease-out)}
.k-map-more[aria-expanded="true"] .i{transform:rotate(180deg)}
.js .k-map-list.is-live:not(.is-open){display:none} /* phones: the live list waits behind "See all cities" */
.k-map-grp h3{margin:16px 0 8px;font-size:var(--t-12);font-weight:700;letter-spacing:.02em;color:var(--on-night-2)}
.k-map-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.k-map-grp .k-map-chips{margin:0}
.k-map-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line-night);border-radius:var(--radius-pill);font:600 var(--t-13)/1 var(--sans);color:var(--on-night-2);text-decoration:none;
  transition:border-color var(--d-ui) ease,color var(--d-ui) ease,background-color var(--d-ui) ease}
a.k-map-chip{background:rgba(238,245,243,.08);color:var(--on-night)}
a.k-map-chip::after{content:"";width:6px;height:6px;margin-left:2px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.k-map-chip small{font-size:var(--t-12);font-weight:600;color:var(--brand-light)}
.k-map-chip.hot,.k-map-chip.is-here{border-color:var(--on-night);color:var(--on-night)}
@media (hover:hover) and (pointer:fine){a.k-map-chip:hover{border-color:var(--on-night)}}
.k-map-note{margin-top:18px;font-size:var(--t-14);color:var(--on-night-2)}
.k-map-note a{display:inline-block;margin:-13px 0;padding:13px 0;color:var(--on-night);font-weight:700} /* a 44px tap area without moving the line */
@media (min-width:1000px){
  .k-map-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head main" "rest main";column-gap:64px;row-gap:0;align-items:start}
  .k-map-head{grid-area:head}.k-map-main{grid-area:main}.k-map-rest{grid-area:rest}
  .k-map-stage{height:700px;margin:0;border-radius:var(--radius-2xl);background:radial-gradient(60% 50% at 40% 30%,rgba(59,163,159,.14),rgba(59,163,159,0))}
  .k-map-more{display:none}
  .js .k-map-list.is-live:not(.is-open){display:block}
  .k-map-chip{min-height:36px;padding:0 12px}
  .k-map-lab{font-size:13px}
  .k-map-grp h3{margin-top:18px}
  .k-map-tools{margin-bottom:12px}
}

/* ================= trust bar (owner 2026-10-14) =================
   Six facts right after the disc-line as a slim dark bar: the night band and texture of the reviews band (.k-pattern,
   kit-media.css). Phone: one row that scrolls sideways, about 2.3 facts in view, the right edge fades so the scroll
   reads as intended (the end padding clears the fade at the last fact). With motion it circles by itself, right to
   left, endlessly (js/kit-sections.js adds a hidden second set for the wrap), so no scroll-snap: snap would re-snap
   every step and jump when a finger lands. Every fact is the same 150px with its divider on its right edge, so the
   row repeats exactly every six facts and the wrap is invisible. 1000px+: six equal columns with hairline dividers.
   Not links; the only reveal is the page's data-reveal on the whole row. */
.band.k-trust{position:relative;overflow:hidden;isolation:isolate;padding:20px 0;background:var(--night);color:var(--on-night)}
.k-trust .wrap{position:relative}
.k-trust .wrap::after{content:"";position:absolute;top:0;bottom:0;right:-20px;width:56px;background:linear-gradient(to right,transparent,var(--night));pointer-events:none}
.k-trust-list{display:grid;grid-auto-flow:column;grid-auto-columns:150px;margin:0 -20px;padding:0 56px 0 20px;list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.k-trust-list::-webkit-scrollbar{display:none}
.k-trust-list li{position:relative;min-width:0;padding:0 28px 0 0}
.k-trust-list li::after{content:"";position:absolute;top:0;bottom:0;right:14px;border-left:1px solid var(--line-night)}
.k-trust-list li:last-child::after{display:none}
.k-trust-ic{display:block;width:22px;height:22px;margin-bottom:8px;color:var(--brand-light)}
.k-trust-star{font-size:20px;line-height:22px;color:var(--warning)}
.k-trust-list b{display:block;font-family:var(--serif);font-size:var(--t-18);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--on-night);font-variant-numeric:lining-nums tabular-nums}
.k-trust-list small{display:block;margin-top:3px;font-size:var(--t-13);line-height:1.45;color:var(--on-night-2);text-wrap:pretty}
@media (min-width:1000px){
  .band.k-trust{padding:24px 0}
  .k-trust .wrap::after{display:none}
  .k-trust-list{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;overflow:visible}
  .k-trust-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;align-content:start;column-gap:6px;padding:0 10px;border-left:1px solid var(--line-night)}
  .k-trust-list li::after,.k-trust-list .is-clone{display:none}
  .k-trust-list li:first-child{padding-left:0;border-left:0}
  .k-trust-list li:last-child{padding-right:0}
  .k-trust-ic{width:18px;height:18px;margin:2px 0 0}  /* centred on the value's first line (21.6px) */
  .k-trust-star{font-size:17px;line-height:18px}
  .k-trust-list small{grid-column:1/-1}
}
@media (min-width:1240px){
  .k-trust-list li{column-gap:8px;padding:0 18px}
  .k-trust-ic{width:20px;height:20px;margin-top:3px}  /* first line 25.2px */
  .k-trust-star{font-size:19px;line-height:20px}
  .k-trust-list b{font-size:var(--t-21)}
}