@font-face{font-family:'Geist';font-weight:900;font-style:normal;font-display:swap;src:url(/site/a/59cb5148c7192a0a.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;src:url(/site/a/7c2537cd074f2c5a.woff2) format('woff2')}
@font-face{font-family:'Sometype Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/site/a/62447ad5540e963e.woff2) format('woff2')}








.rw{
  --m:clamp(2rem, 1.0816rem + 3.9184vw, 5rem);
  --g:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --s2:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --s3:clamp(2.25rem, 2.0204rem + 0.9796vw, 3rem);
  --s4:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --s5:clamp(3rem, 2.3878rem + 2.6122vw, 5rem);
  --s6:clamp(3.5rem, 2.7347rem + 3.2653vw, 6rem);
  --s8:clamp(4.5rem, 3.4286rem + 4.5714vw, 8rem);
  --s10:clamp(5.5rem, 4.1224rem + 5.8776vw, 10rem);
  --t-xl:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --t-title:clamp(2rem, 1.4rem + 1.6vw, 2.8125rem);
  --t-s:clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);
  --p-l:clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);
  --p-m:clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);
  --p-s:clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);
  --r-s:4px; --r-m:8px; --r-l:16px; --r-f:24px;
}



.rw p,
.rw h1,
.rw h2,
.rw ul{margin:0}




.rw .nv{position:relative;background:var(--paper);z-index:5}
.rw .nv .bar{height:68px;display:flex;align-items:center;gap:24px}
.rw .nv .brand{margin-right:auto}
.rw .nv .brand svg{display:block;height:17px;width:auto}
.rw .nv .items{list-style:none;margin:0;padding:0;display:flex;align-items:center;height:68px}
.rw .nv .items > li{position:relative;height:68px;display:flex;align-items:center}
.rw .nv .dt,.rw .nv .plain{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:32px;
   padding:0 12px;border-radius:var(--r-m);font-size:15px;line-height:21px;letter-spacing:-.0025em;color:var(--ink);cursor:pointer}
.rw .nv .dt[aria-expanded=true]{background:var(--ground)}@media (any-hover:hover) and (min-width:901px){.rw .nv .dt:hover,.rw .nv .plain:hover{background:var(--ground)}}
.rw .nv .dt:focus-visible,.rw .nv .plain:focus-visible,.rw .nv a:focus-visible,.rw .nv button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .nv .cv{width:10px;height:10px;transition:transform .2s ease}
.rw .nv .dt[aria-expanded=true] .cv{transform:rotate(180deg)}
.rw .nv .r{display:flex;align-items:center;gap:8px}
.rw .nv .en{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-m);background:#E3E2DF;
   font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.02em}
.rw .nv .burger{display:none}
.rw .nv .mono{font-size:11px;line-height:15px}
.rw .nv .dp{position:absolute;top:calc(100% - 6px);left:0;min-width:320px;background:var(--paper);border:1px solid var(--border);
   border-radius:var(--r-l);padding:20px;box-shadow:0 24px 48px -24px rgba(17,14,10,.28),0 2px 6px rgba(17,14,10,.05);z-index:20}
.rw .nv .dp-r{left:auto;right:0}
.rw .nv-C .items > li:last-child .dp-r{right:-120px}
.rw .nv-C .dp.wide{width:640px;padding:12px}
.rw .nv .gsw{position:relative}
.rw .nv .gs{white-space:nowrap;height:32px;padding:0 12px 0 16px;background:#B6D9B9;font-size:12px;letter-spacing:.08em;
   text-transform:uppercase}
.rw .nv .gs[aria-expanded=true]{background:#A5CFA9}@media (any-hover:hover) and (min-width:901px){.rw .nv .gs:hover{background:#A5CFA9}}
.rw .nv .gsp{top:calc(100% + 8px);width:600px}
.rw .nv .mob{border-top:1px solid var(--border);background:var(--paper);padding:8px var(--m) 24px}
.rw .nv .mob details{border-bottom:1px solid var(--border)}
.rw .nv .mob summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:800;
   font-size:20px;letter-spacing:-.02em;cursor:pointer}
.rw .nv .mob summary::-webkit-details-marker{display:none}
.rw .nv .mob details[open] .cv{transform:rotate(180deg)}
.rw .nv .mob ul{list-style:none;margin:0 0 12px;padding:0}
.rw .nv .mob ul a{display:block;padding:8px 0;font-size:16px;color:var(--ink);text-decoration:none}
.rw .nv .mob .mrow{display:block;padding:14px 0;border-bottom:1px solid var(--border);font-weight:800;font-size:20px;
   letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.rw .nv .mob .mcta{display:grid;gap:8px;margin-top:20px}
.rw .nv .mob .mc{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-m);background:var(--ground);
   color:var(--ink);text-decoration:none}
.rw .nv .mob .mc.demo{background:#B6D9B9}
.rw .nv .mob .mc.trial{background:#E3E2DF}
.rw .nv .mob .mc b{font-weight:800;font-size:16px}
.rw .nv .mob .mc span{font-size:13px;color:rgba(17,14,10,.7)}
@media (max-width:980px){.rw .nv .items,.rw .nv .en{display:none}
.rw .nv .burger{all:unset;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
     border-radius:var(--r-m);background:#E3E2DF;cursor:pointer}
.rw .nv .burger svg{width:14px;height:14px}
.rw .nv .gsp{display:none}}
@media (min-width:981px){.rw .nv .mob{display:none}}
.rw > .nv{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(250,249,247,.94);
   -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;
   transition:border-color .2s ease}
.rw > .nv.scrolled{border-bottom-color:var(--border)}
.rw.nav-mono > .nv .items .dt,.rw.nav-mono > .nv .items .plain,.rw.nav-mono > .nv .en,.rw.nav-mono > .nv .gs{
   font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.rw > .nv-C .dp.wide.gsp{width:max-content;min-width:0;padding:12px}
@media (max-width:1279px){.rw > .nv [data-k=cust] .dp-r{left:0;right:auto}}
.rw > .nv [data-k=sov] > .dp{left:50%;right:auto;transform:translateX(-50%)}
.rw > .nv .brand svg{height:27.6px}
@media (max-width:560px){.rw > .nv .brand svg{height:23px}}
@media (min-width:981px){.rw > .nv .bar{transition:height .5s cubic-bezier(.32,.72,0,1)}
.rw > .nv .brand svg{transition:height .5s cubic-bezier(.32,.72,0,1)}
.rw > .nv .bar{height:88px}
.rw > .nv .items,.rw > .nv .items > li{height:88px}
.rw > .nv .brand svg{height:36px}
.rw > .nv.mini .bar{height:64px}
.rw > .nv.mini .items,.rw > .nv.mini .items > li{height:64px}
.rw > .nv.mini .brand svg{height:27.6px}}
@media (min-width:981px) and (max-width:1023px){.rw > .nv:not(.mini) .brand svg{height:32px}}
.rw .nv .gs,
.rw .nv .mob .mc.demo{background:#427E6C;color:#FFFFFF}
.rw .nv .gs[aria-expanded=true]{background:#3A6F5F}@media (any-hover:hover) and (min-width:901px){.rw .nv .gs:hover,.rw .nv .mob .mc.demo:hover{background:#3A6F5F}}
.rw .nv .mob .mc.demo span,
.rw .nv .mob .mc.demo b{color:#FFFFFF}
.rw .nv .gs:focus-visible{outline:2px solid #427E6C;outline-offset:2px}

.rw .lf .cols{display:grid;border-top:1px solid #CDC8C2;min-height:178px}
.rw .lf .lc + .lc{border-left:1px solid #CDC8C2}
.rw .lf .t1,.rw .lf .t2{font-weight:800;font-size:12px;line-height:15px;letter-spacing:-.025em}
.rw .lf .t2{line-height:18px}
.rw .lf .ad,.rw .lf .ce{font-weight:500;font-size:10px;line-height:14px;letter-spacing:.08em;text-transform:uppercase}
.rw .lf .ad{margin-top:14px}
.rw .lf .ce{margin-top:24px}
.rw .lf .lh,.rw .lf .ll{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.rw .lf .lh{color:var(--dim)}
.rw .lf .cp{margin-top:24px}
.rw .lf .ll{list-style:none;padding:0}
.rw .lf .ll a{color:var(--ink);text-decoration:none;text-underline-offset:3px}
@media (any-hover:hover) and (min-width:901px){.rw .lf .ll a:hover{text-decoration:underline}}
.rw .lf .ll a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .lf .bc{text-transform:none}
@media (max-width:1180px){.rw .lf .lc:nth-child(3){border-left:0}
.rw .lf .lc:nth-child(n+3){border-top:1px solid #CDC8C2}}
@media (max-width:560px){.rw .lf .lc + .lc{border-left:0;border-top:1px solid #CDC8C2}
.rw .lf .lc{padding-bottom:28px}}
.rw .lf .lc{padding:32px 32px 56px}
.rw .lf .c1{padding-top:32px}
.rw .lf .ce .nw{white-space:nowrap}
@media (max-width:560px){.rw .lf .lc{padding:24px 24px 32px}}


.rw .lf .cols{border:0;box-shadow:inset 0 0 0 1px #CDC8C2;border-radius:var(--r-l)}
.rw .lf .cols .lc{position:relative;border:0;padding:32px 0 56px var(--s2)}
.rw .lf .cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:0}
.rw .lf .cols .lc.c1{grid-column:1 / span 4}
.rw .lf .cols .lc.c2{grid-column:5 / span 3;border-left:1px solid #CDC8C2}
.rw .lf .cols .lc.c3{grid-column:8 / span 2;border-left:1px solid #CDC8C2}
.rw .lf .cols .lc.c4{grid-column:10 / span 3;border-left:1px solid #CDC8C2}
@media (max-width:1359px){.rw .lf .cols .lc.c1{grid-column:1 / span 6}
.rw .lf .cols .lc.c2{grid-column:7 / span 6;padding-right:var(--s2)}
.rw .lf .cols .lc.c3{grid-column:1 / span 6;border-left:0}
.rw .lf .cols .lc.c4{grid-column:7 / span 6;padding-right:var(--s2)}
.rw .lf .cols .lc.c3::before{content:'';position:absolute;left:0;top:0;width:calc(200% + var(--g));height:1px;background:#CDC8C2}}
@media (max-width:560px){.rw .lf .cols .lc.c1,.rw .lf .cols .lc.c2,.rw .lf .cols .lc.c3,.rw .lf .cols .lc.c4{grid-column:1 / -1;border-left:0;padding:24px 24px 32px}
.rw .lf .cols .lc.c2,.rw .lf .cols .lc.c3,.rw .lf .cols .lc.c4{border-top:1px solid #CDC8C2}
.rw .lf .cols .lc.c3::before{content:none}}
.rw .lf .ll a{display:inline-block;padding:4.5px 0}
.rw .nv .lgw{position:relative}
.rw .nv button.en{border:0;gap:6px;cursor:pointer;color:var(--ink);transition:background-color .2s ease}
.rw .nv button.en[aria-expanded=true]{background:#CDC8C2}@media (any-hover:hover) and (min-width:901px){.rw .nv button.en:hover{background:#CDC8C2}}
.rw .nv button.en:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .nv button.en .cv{width:10px;height:10px;transition:transform .2s ease}
.rw .nv button.en[aria-expanded=true] .cv{transform:rotate(180deg)}

.rw .nv .dp.lgp{top:calc(100% + 8px);min-width:0;width:208px;padding:8px}
.rw .nv .lgl{list-style:none;margin:0;padding:0}
.rw .nv .lgl a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:var(--r-m);
  color:var(--ink);text-decoration:none}
@media (any-hover:hover) and (min-width:901px){.rw .nv .lgl a:hover{background:var(--ground)}}
.rw .nv .lgl a[aria-current=true]{background:var(--stone)}
.rw .nv .lgl b{font-weight:500;font-size:15px;line-height:19px;letter-spacing:-.01em}
.rw .nv .lgl span{font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.08em;color:var(--dim)}
.rw .nv .mob .mlang{display:flex;gap:8px;margin-top:20px}
.rw .nv .mob .mlang a{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:var(--r-m);
  background:var(--ground);color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.08em}
.rw .nv .mob .mlang a[aria-current=true]{background:var(--ink);color:#FFF}
@media (prefers-reduced-motion:reduce){.rw .nv button.en .cv{transition:none}}
@media (max-width:359px){.rw > .nv .gsw{display:none}}
@media (max-width:560px){.rw .lf .cols{grid-template-columns:minmax(0,1fr)}}
.rw > .nv .items > li.dd > .dp{left:-9px;right:auto;transform:none}
.rw > .nv .items .dp.wide{width:max-content;min-width:220px;max-width:340px;padding:8px}
.rw > .nv .v1 ul{list-style:none;margin:0;padding:0}
.rw > .nv .v1 .t1 a{display:block;padding:8px 12px;border-radius:var(--r-m);font-size:15px;line-height:21px;letter-spacing:-.0025em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
@media (any-hover:hover) and (min-width:901px){.rw > .nv .v1 .t1 a:hover{background:var(--ground)}}
.rw > .nv .v1 .t1 a[aria-current="page"]{background:var(--ground)}
.rw > .nv .v1 .t1o{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px;padding:12px;
  border-radius:var(--r-m);color:#FFFFFF;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.rw > .nv .v1 .t1o .ar{flex:none;width:12px;height:12px}
.rw > .nv .v1 .t1o:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw > .nv [data-k=plat] .v1 .t1o{background:#427E6C}
@media (any-hover:hover) and (min-width:901px){.rw > .nv [data-k=plat] .v1 .t1o:hover{background:#3A6F5F}}
.rw > .nv [data-k=cust] .v1 .t1o{background:#C38612}
@media (any-hover:hover) and (min-width:901px){.rw > .nv [data-k=cust] .v1 .t1o:hover{background:#B77E10}}
.rw > .nv [data-k=sov] .v1 .t1o{background:#3F627E}
@media (any-hover:hover) and (min-width:901px){.rw > .nv [data-k=sov] .v1 .t1o:hover{background:#355874}}
.rw > .nv [data-k=blog] .v1 .t1o{background:#7F3125}
@media (any-hover:hover) and (min-width:901px){.rw > .nv [data-k=blog] .v1 .t1o:hover{background:#74271B}}
.rw > .nv .dp.wide.gsp{width:max-content;min-width:220px;padding:8px}
.rw > .nv .v1c{display:flex;flex-direction:column;gap:8px}
.rw > .nv .v1c a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border-radius:var(--r-m);
  font-family:var(--mono);font-weight:300;font-size:11px;line-height:15px;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.rw > .nv .v1c a.demo{background:#427E6C;color:#FFFFFF}
@media (any-hover:hover) and (min-width:901px){.rw > .nv .v1c a.demo:hover{background:#3A6F5F}}
.rw > .nv .v1c a.trial{background:transparent;color:var(--ink)}
@media (any-hover:hover) and (min-width:901px){.rw > .nv .v1c a.trial:hover{background:var(--ground)}}
.rw > .nv .v1c .ar{flex:none;width:12px;height:12px}
.rw > .nv .v1c a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes nv-shoot{0%{transform:none}30%{transform:translateX(-5px) scale(.9)}70%{transform:translateX(3px)}100%{transform:none}}
.rw > .nv .v1 .t1o .ar,.rw > .nv .v1c .ar{will-change:transform;backface-visibility:hidden}
@media (hover:hover) and (min-width:901px){@media (any-hover:hover) and (min-width:901px){.rw > .nv .v1 .t1o:hover .ar,.rw > .nv .v1c a:hover .ar{animation:nv-shoot .5s ease-in-out}}}
.rw > .nv .v1 .t1o:focus-visible .ar,.rw > .nv .v1c a:focus-visible .ar{animation:nv-shoot .5s ease-in-out}
@media (prefers-reduced-motion:reduce){.rw > .nv .v1 .t1o .ar,.rw > .nv .v1c .ar{animation:none}}

































































/* sandsiv+ tokens, 29 Sep 2026 (from the CI guidelines' tokens.json). Colours, fluid sizes (--t-*, --p-*), spacing (--s2 S, --s4 M, --s10 L, --g, --m), radii, shadow, families. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--ink:#110E0A;--paper:#FAF9F7;--ground:#FFFFFF;--stone:#E3E2DF;--stone-hover:#CDC8C2;--dim:#6E6963;--line:#CDC8C2;--border:#E3E2DF;--field:#CDC8C2;--on-colour:#FFFFFF;--green:#427E6C;--green-hover:#3A6F5F;--navy:#3F627E;--navy-hover:#355874;--blue:#3F627E;--blue-hover:#355874;--brick:#7F3125;--brick-hover:#74271B;--mustard:#C38612;--mustard-hover:#B77E10;/* fluid */
  --t-xl:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);--t-title:clamp(2rem, 1.4rem + 1.6vw, 2.8125rem);--t-s:clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);--p-l:clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);--p-m:clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);--p-s:clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);--s2:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);--s4:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);--s10:clamp(5.5rem, 4.1224rem + 5.8776vw, 10rem);--g:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);--m:clamp(2rem, 1.0816rem + 3.9184vw, 5rem);/* spacing */
  --space-s:31.5px;--space-m:60.9px;--space-2m:121.7px;--space-l:150.6px;--margin:73.7px;--gutter:31.5px;--text-gap:8px;--item-gap:10px;--row-pad:24px;--list-pad:22px;--button-gap:8px;/* radius */
  --radius-box:8px;--radius-control:4px;/* shadow */
  --float:0 24px 48px -24px rgba(17,14,10,.28);--font-hellix:'Geist', system-ui, sans-serif;--font-mono:'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, monospace}

/* sandsiv+ website components, reference CSS (29 Sep 2026).
   Built on tokens.css: colours (--ink, --dim, --ground ...), fluid sizes (--t-xl, --t-title, --t-s, --p-l, --p-m, --p-s),
   fluid spacing (--s2 = S, --s4 = M, --s10 = L, --g gutter, --m margin) and the families (--font-hellix, --font-mono).
   Values follow the Short Home draft, version 140. Class prefix: sv-. */

.sv{background:var(--paper);color:var(--ink);font-family:var(--font-hellix);font-weight:500;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sv *{box-sizing:border-box}
/* zero-specificity reset, so every component rule below wins */
.sv :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0}
.sv :where(ul,ol){list-style:none}
.sv :where(a){color:inherit}
.sv :where(h1,h2,h3){text-wrap:balance}














.sv-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:0;border-radius:4px;
        font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;
        text-decoration:none;cursor:pointer;transition:background-color .2s ease}
.sv-btn--primary{background:var(--green);color:var(--on-colour)}
@media (any-hover:hover) and (min-width:901px){.sv-btn--primary:hover{background:var(--green-hover)}}


.sv-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}






































































   /* the score sits under the quote, never above it */


/* ---------- CTA block ---------- */
.sv-cta{align-items:end}


@media (max-width:900px){
  .sv-cta{grid-template-columns:minmax(0,1fr)}
  
  
}
































/* The stylesheet of the sandsiv+ Listen pages. The first three rules are the ones the draft's host page gave it. */
:root{--ink:#110E0A;--paper:#FAF9F7;--ground:#FFFFFF;--border:#E3E2DF;--line:#CDC8C2;--tone:#6E6963;--dim:#6E6963;
  --hellix:'Geist',system-ui,sans-serif;--mono:'Sometype Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#FAF9F7;color:#110E0A;font-size:14px}





:root{padding-bottom:0;--ink:#110E0A;--paper:#FAF9F7;--ground:#FFFFFF;--border:#E3E2DF;--line:#CDC8C2;--tone:#6E6963;--dim:#6E6963;--hellix:'Geist',system-ui,sans-serif;--mono:'Sometype Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}

.rw{
  --m:clamp(2rem, 1.0816rem + 3.9184vw, 5rem);
  --g:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --s2:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --s3:clamp(2.25rem, 2.0204rem + 0.9796vw, 3rem);
  --s4:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --s5:clamp(3rem, 2.3878rem + 2.6122vw, 5rem);
  --s6:clamp(3.5rem, 2.7347rem + 3.2653vw, 6rem);
  --s8:clamp(4.5rem, 3.4286rem + 4.5714vw, 8rem);
  --s10:clamp(5.5rem, 4.1224rem + 5.8776vw, 10rem);
  --t-xl:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --t-title:clamp(2rem, 1.4rem + 1.6vw, 2.8125rem);
  --t-s:clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);
  --p-l:clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);
  --p-m:clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);
  --p-s:clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);
  --r-s:4px; --r-m:8px; --r-l:16px; --r-f:24px}
.rw.ours-r{--r-m:4px; --r-l:8px; --r-f:8px}
















.rw .t-marketing{--on:#FFFFFF}







@media (any-hover:hover) and (min-width:901px){.rw .tc:has(.tl-link):hover{background:#FFFFFF}}
















@media (max-width:900px){
  
  .rw .grid6 .s2,
.rw .grid6 .s4{grid-column:1 / -1}
}








@keyframes nv-shoot{0%{transform:none}30%{transform:translateX(-5px) scale(.9)}70%{transform:translateX(3px)}100%{transform:none}}


.rw .ps{padding-top:var(--s10)}

.rw .ps [id]{scroll-margin-top:110px}
.rw section[id]{scroll-margin-top:90px}

@media (min-width:901px){ .rw #pr .tc:not(.short){min-height:440px} }

@media (min-width:901px){ .rw #pr .tc.ls-c{min-height:220px} }








.rw .ls-out{display:inline-block;vertical-align:-.08em;color:var(--ink);border-radius:4px}
.rw .ls-out svg{display:block;width:.8em;height:.8em;transition:transform .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .ls-out:hover svg{transform:translate(2px,-2px)}}
.rw .ls-out:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){  .rw .ls-out svg{transition:none} }




.rw .shot{position:relative;overflow:hidden;border-radius:7px}


.rw .pm{height:38px;padding:0 16px;border:1px solid var(--line,#CDC8C2);border-radius:8px;background:transparent;color:var(--ink);
  font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease}




.rw .ls-bar{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rw .ls-bar .ptabs{margin-bottom:0}
.rw .ls-back{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;border:1px solid var(--line,#CDC8C2);
  border-radius:8px;box-sizing:border-box;color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:300;
  font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s ease}
.rw .ls-back svg{display:block;width:14px;height:14px;flex:none;transition:transform .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .ls-back:hover{background:var(--stone)}}
@media (any-hover:hover) and (min-width:901px){.rw .ls-back:hover svg{transform:translateX(-2px)}}
.rw .ls-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .rw .ls-back svg{transition:none} }
.rw .shots{position:relative;isolation:isolate;border:1px solid #CDC8C2;border-radius:8px;background:#FFFFFF;
  box-shadow:0 1px 1px rgba(17,14,10,.06),0 2px 3px -1px rgba(17,14,10,.07),0 8px 16px -8px rgba(17,14,10,.12),
             0 24px 40px -20px rgba(17,14,10,.16),0 48px 80px -40px rgba(17,14,10,.18)}


.rw .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}



.rw .t-marketing{--full:#C38612}


.rw .ls-logos{list-style:none;margin:auto 0 0;padding:var(--s2) 0 0;display:grid;grid-template-columns:repeat(5,40px);
  justify-content:space-between;row-gap:24px;max-width:360px}
.rw .ls-logos li{display:block;width:40px;height:40px;color:var(--ink);transition:color .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .ls-logos li:hover{color:var(--brand)}}
.rw .ls-logos svg{display:block;width:40px;height:40px}








































@media (max-width:900px){
  .rw .grid6 .s4{grid-column:1 / -1}
  
  
  
  
}


/* The stylesheet of the sandsiv+ short home (draft v66). The first two rules are the
   ones the draft's host page gave it. */
:root{color-scheme:light}
img{max-width:100%}
[hidden]{display:none!important}



:root{--ink:#110E0A;--paper:#FAF9F7;--ground:#FFFFFF;--border:#E3E2DF;--line:#CDC8C2;--tone:#6E6963;--dim:#6E6963;
  --hellix:'Geist',system-ui,sans-serif;--mono:'Sometype Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--hellix);font-weight:500;-webkit-font-smoothing:antialiased}
.rw{--por-ksw:url(/site/a/b5b265c39e57be59.webp);--por-swc:url(/site/a/73b8be33b4b27710.webp);--m:clamp(2rem, 1.0816rem + 3.9184vw, 5rem);--g:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);--s2:clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);--s3:clamp(2.25rem, 2.0204rem + 0.9796vw, 3rem);--s4:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);--s5:clamp(3rem, 2.3878rem + 2.6122vw, 5rem);--s6:clamp(3.5rem, 2.7347rem + 3.2653vw, 6rem);--s8:clamp(4.5rem, 3.4286rem + 4.5714vw, 8rem);--s10:clamp(5.5rem, 4.1224rem + 5.8776vw, 10rem);--t-xl:clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);--t-title:clamp(2rem, 1.4rem + 1.6vw, 2.8125rem);--t-s:clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);--p-l:clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);--p-m:clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);--p-s:clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);--r-s:4px;--r-m:8px;--r-l:16px;--r-f:24px}
.rw.ours-r{--r-m:4px; --r-l:12px; --r-f:12px}
.rw{--ink:#110E0A;--paper:#FAF9F7;--ground:#FFFFFF;--stone:#E3E2DF;--border:#E3E2DF;
    --line:#CDC8C2;--tone:#6E6963;--dim:#6E6963;--green:#427E6C;
    background:var(--paper);color:var(--ink);font-family:var(--hellix);font-weight:500;
    -webkit-font-smoothing:antialiased;position:relative}
.rw *{box-sizing:border-box}
.rw p,
.rw h1,
.rw h2,
.rw h3,
.rw ul{margin:0}
.rw .wrap{max-width:1432px;margin:0 auto;padding-inline:var(--m)}
.rw .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.rw .mono{font-family:var(--mono);font-weight:300;font-size:12px;line-height:16px;letter-spacing:.02em;
          text-transform:uppercase}
.rw .lead{font-weight:500;font-size:var(--p-l);line-height:1.4;letter-spacing:-.015em}
.rw section{position:relative}
.rw .lk{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.rw .lk .ar{width:12px;height:12px}
.rw .hero .g12{align-items:end}
.rw .hero h1{grid-column:1 / span 7;font-weight:800;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;align-self:last baseline}
.rw .hero .lead{grid-column:8 / span 5;align-self:last baseline}
.rw .sp{display:block;position:relative}
@media (max-width:900px){
  .rw .hero h1,
.rw .hero .lead{grid-column:1 / -1}
  .rw .hero .lead{margin-top:24px;align-self:auto}
  .rw .hero h1{align-self:auto}
}



.rw .t-marketing{--full:#C38612;--on:#FFFFFF}


.rw .tc{position:relative;background:var(--ground);border-radius:var(--r-l);padding:var(--s2);display:flex;
        flex-direction:column;min-height:520px}
.rw .tc .kh{font-weight:800;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.rw .tc .kb{margin-top:8px;font-size:var(--p-s);line-height:1.4;color:var(--dim);margin-bottom:var(--s2)}
.rw .tc .tl-link{align-self:flex-start;font-size:0;line-height:0;gap:0;padding-top:0;margin-top:var(--s2)}
.rw .tc .tl-link::after{content:'';position:absolute;inset:0;border-radius:var(--r-l);z-index:5}
.rw .tc .tl-link:focus-visible{outline:none}
.rw .tc:has(.tl-link:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.rw .tc{transition:background-color .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .tc:hover{background:#FFFFFF}}
@media (any-hover:hover) and (min-width:901px){.rw .tc:hover .tl-link{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:900px){ .rw .tc{min-height:0} }
.rw .tc.b2{padding-bottom:0;overflow:hidden;isolation:isolate}
.rw .tc.b2 .kb{margin-bottom:0}
.rw .tc.b2.nopic{padding-bottom:var(--s2)}
.rw .tc.b2 .tl-link{margin-top:auto;padding-top:var(--s2)}
.rw .tc.b2 .tl-link::after{z-index:5}
.rw .tc.b2 .bp{position:relative;flex:none;height:250px;margin:24px calc(var(--s2) * -1) 0;overflow:hidden}
.rw .b2 .tw{position:absolute;left:-20px;top:12px;width:460px;display:grid;grid-template-columns:repeat(4,100px);gap:10px;transform:rotate(-4deg)}
.rw .b2 .tw .mt:nth-child(8n+5),.rw .b2 .tw .mt:nth-child(8n+6),.rw .b2 .tw .mt:nth-child(8n+7),.rw .b2 .tw .mt:nth-child(8n+8){transform:translateX(55px)}
.rw .b2 .tw .mt{height:58px;border-radius:3px;background:var(--full);color:#FFF;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:5px 6px}
.rw .b2 .tw .mt svg{width:15px;height:15px}
.rw .b2 .tw .mt b{font-weight:800;font-size:9px;line-height:10px;letter-spacing:-.02em;text-align:center}
@media (max-width:900px){ .rw .tc.b2{min-height:0} .rw .tc.b2 .tl-link{margin-top:0} }



.rw .b2 .tw.tws{display:flex;flex-direction:column;gap:14px;width:auto;right:auto}
.rw .b2 .tws .trow{position:relative;height:82px}
.rw .b2 .tws .trow.r2{margin-left:-77px}
.rw .b2 .tws .trk{display:flex;gap:14px;width:max-content;will-change:transform;animation:tw-rtl 28s linear infinite paused}
.rw .b2 .tws .r1 .trk,.rw .b2 .tws .r3 .trk{animation-name:tw-ltr}

.rw .b2 .tws .mt{flex:0 0 140px;transform:none!important;height:82px;border-radius:6px;gap:7px;padding:7px 8px}
.rw .b2 .tws .mt svg{width:21px;height:21px}
.rw .b2 .tws .mt b{font-size:13px;line-height:15px}
.rw .tc.b2 .bp:has(.tws){height:340px}
@keyframes tw-ltr{from{transform:translateX(-1232px)} to{transform:translateX(0)}}
@keyframes tw-rtl{from{transform:translateX(0)} to{transform:translateX(-1232px)}}
@media (prefers-reduced-motion:reduce){ .rw .b2 .tws .trk{animation:none} .rw .b2 .tws .r1 .trk,.rw .b2 .tws .r3 .trk{transform:translateX(-1232px);animation:none} }






.rw .grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.rw .grid6 .s2{grid-column:span 2}
.rw .grid6 .s3{grid-column:span 3}
.rw .grid6 .s4{grid-column:span 4}


















.rw .tc.short{min-height:0}
.rw .tc.short .tl-link{margin-top:0;padding-top:var(--s3)}
@media (max-width:900px){
  .rw .grid6{grid-template-columns:minmax(0,1fr)}
  .rw .grid6 .s2,.rw .grid6 .s3,.rw .grid6 .s4{grid-column:1 / -1}
}
.rw .tc.cxc{container-type:inline-size;overflow:hidden;padding:0}
.rw .cxc .cxs{position:relative;display:grid;flex:1}
.rw .cxc .cxv{grid-area:1 / 1;position:relative;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .32s}
.rw .cxc .cxv.on{opacity:1;visibility:visible;transition:opacity .45s ease .32s,visibility 0s linear .32s}
.rw .cxc .cxq{margin:0;padding:var(--s2);width:calc(100% - min(420px,46cqw));box-sizing:border-box}
.rw .cxc .l .cxq{margin-left:auto}
.rw .cxc .cxt{margin:0;font-weight:800;font-size:clamp(18px,3.2cqw,28px);line-height:1.18;letter-spacing:-.025em;text-wrap:balance}
.rw .cxc .cxq footer{margin-top:22px}
.rw .cxn,.rw .cxr{display:block;font-size:11px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.rw .cxn{color:var(--ink)}
.rw .cxr{margin-top:2px;color:var(--dim)}
.rw .cxc .cxl{display:block;margin-top:12px;height:auto;max-width:100%}
.rw .cxc .cxp{position:absolute;bottom:-2px;right:0;width:min(420px,46cqw);aspect-ratio:700 / 754;background-size:100% 100%;background-repeat:no-repeat;
  pointer-events:none;background-image:url('/site/a/73b8be33b4b27710.webp');transform:translateX(2px)}
.rw .cxc .l .cxp{left:0;background-image:var(--por-ksw)}
.rw .cxc .r .cxp{right:0;background-image:var(--por-swc)}


.rw .tc.cxc .tl-link{position:static;margin:0;padding:0;font-size:0;line-height:0}
.rw .tc .cxa{position:absolute;top:12px;right:12px;z-index:6;width:24px;height:24px;color:var(--ink);opacity:0;
  transform:translate(-10px,10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;will-change:transform,opacity}
.rw .tc .cxa svg{display:block}
.rw .tc:focus-within .cxa{opacity:1;transform:none;animation:cx-shoot .5s cubic-bezier(.32,.72,0,1)}@media (any-hover:hover) and (min-width:901px){.rw .tc:hover .cxa{opacity:1;transform:none;animation:cx-shoot .5s cubic-bezier(.32,.72,0,1)}}
@keyframes cx-shoot{0%{opacity:0;transform:translate(-12px,12px) scale(.8)}55%{opacity:1;transform:translate(4px,-4px)}100%{opacity:1;transform:none}}
@media (hover:none),(max-width:900px){ .rw .tc .cxa{opacity:1;transform:none} }

.rw .tc .kh{padding-right:36px}
.rw .tc .tl-link{font-size:0;line-height:0;gap:0;padding-top:0}
.rw .tc .tl-link .ar{display:none}

@media (max-width:900px){
  .rw .tc.cxc{min-height:600px}
  .rw .cxc .cxq{width:auto;padding-right:calc(var(--s2) + 28px)}
  .rw .cxc .l .cxq{margin-left:0}
  .rw .cxc .cxt{font-size:clamp(19px,5.6cqw,24px)}
  .rw .cxc .cxp{width:min(280px,72cqw)}
}
@media (prefers-reduced-motion:reduce){ .rw .cxc .cxv,.rw .cxc .cxv.on,.rw .tc .cxa{transition:none;animation:none} }





























.rw .pwin{position:relative;width:1180px;height:586px;overflow:hidden;background:#FFFFFF}


.rw .pw-voc{position:absolute;left:0;top:0;width:1720px;height:747px;transform:translate(-169.52px,0) scale(0.784821);transform-origin:0 0}
.rw .pwin iframe{display:block;border:0;background:#FFFFFF}
.rw #pw-voc{width:1720px;height:747px}

.rw .shot{position:relative;overflow:hidden;border-radius:11px}
.rw .scaler{transform-origin:0 0;width:1180px}


.rw .ptabs{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rw .pm{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);
  font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .pm:hover{background:var(--stone)}}
.rw .pm[aria-current="true"]{background:var(--ink);color:#FFF;border-color:var(--ink)}
.rw .pm:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:900px){ .rw .ptabs{justify-content:flex-start} }
.rw .shots{position:relative;isolation:isolate;border:1px solid #CDC8C2;border-radius:12px;background:#FFFFFF;
  box-shadow:0 1px 1px rgba(17,14,10,.06),0 2px 3px -1px rgba(17,14,10,.07),0 8px 16px -8px rgba(17,14,10,.12),
             0 24px 40px -20px rgba(17,14,10,.16),0 48px 80px -40px rgba(17,14,10,.18)}
.rw .shots::after{content:'';position:absolute;z-index:-1;left:-2%;right:-2%;bottom:-18px;height:44px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(17,14,10,.30) 0%,rgba(17,14,10,.14) 45%,rgba(17,14,10,0) 100%);filter:blur(10px);pointer-events:none}
@media (max-width:640px){
  
  .rw .shots{width:720px}
}










.rw .lg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


@media (max-width:900px){ .rw .hero .g12{grid-template-columns:minmax(0,1fr)} }


/* the arrow of a dropdown's lead row shoots in on hover, the cards' diagonal arrow (cx-shoot) made horizontal and smaller
   (Kaspar, 25 Sep: "ad small arrow animation for cards with arrows in nav drop downs"; "i cant see the arrow animation. make it
   similar to the animation we have on the cards with diagonal arrows. but horizonatal and smaller") */
/* the arrow stays visible throughout (Kaspar, 25 Sep: "the arrow disappear for a couple of frames before they do the little
   bounce. the animation is good. just dont have them disappear."): it pulls back, shoots past its place and settles */
@keyframes nv-shoot{0%{transform:none}30%{transform:translateX(-5px) scale(.9)}70%{transform:translateX(3px)}100%{transform:none}}












/* 27 Sep: the draft pages' base text size (the artifact skeleton gives their body 14 px) */
body{font-size:14px}

/* 27 Sep: brought up to the draft. Radius 8 (boxes and frames 8, the product window 8 and its screen 7, tiles 6 and 3,
   buttons and chips 4, the footer frame as the boxes); the customers card portraits; the Moa card's picture while
   its hover video plays. */
.rw.ours-r{--r-l:8px;--r-f:8px}
.rw .b2 .tw .mt{border-radius:3px}
.rw .b2 .tws .mt{border-radius:6px}


.rw .cxc .cxp{bottom:-2px}
.rw .cxc .l .cxp{transform:translateX(calc(-100% * 25 / 700 - 2px))}
.rw .cxc .r .cxp{transform:translateX(2px)}

.rw .shot{border-radius:7px}
.rw .pm{border-radius:4px}
.rw .shots{border-radius:8px}

/* the card arrow keeps its own layer at all times (27 Sep): without it Chrome makes a layer for the arrow when its
   animation starts and drops it when it ends, and a card with a video is repainted at both moments (the flicker) */
.rw .tc .cxa{will-change:transform,opacity}

body{margin:0}


































.wa{display:flex;overflow:hidden;background:var(--paper)}

















.rw .tc.k-tools:focus-within .tws .trk{animation-play-state:running}@media (any-hover:hover) and (min-width:901px){.rw .tc.k-tools:hover .tws .trk{animation-play-state:running}}


.rw .pwin .wa{position:absolute;inset:0;height:100%!important;border:0;border-radius:0}
.rw .tc.ls-c .ls-logos{margin-top:auto}
.rw .ls-chan{margin:18px 0 0;color:var(--dim)}
@media (max-width:900px){.rw .ls-logos[style]{grid-template-columns:repeat(5,40px)!important;max-width:360px!important}}
.rw .ls-feed{margin-top:var(--s2);background:var(--paper);border-radius:12px;padding:12px 16px;font-size:14px;line-height:18px}
.rw .ls-feed .fh{display:flex;justify-content:space-between;align-items:center;font-weight:800;padding-bottom:6px}
.rw .ls-feed .fh span{color:var(--dim)}
.rw .ls-feed .fr{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--border);animation:lsin 9s infinite}
.rw .ls-feed .fr svg{width:16px;height:16px;display:block}
.rw .ls-feed .fr small{color:var(--dim);font-size:12px}
.rw .ls-feed .fr:nth-of-type(2){animation-delay:.6s}.rw .ls-feed .fr:nth-of-type(3){animation-delay:1.2s}.rw .ls-feed .fr:nth-of-type(4){animation-delay:1.8s}.rw .ls-feed .fr:nth-of-type(5){animation-delay:2.4s}
@keyframes lsin{0%{opacity:.25;transform:translateY(6px)}6%{opacity:1;transform:none}90%{opacity:1}100%{opacity:.25}}
.rw .cxc .l .cxp{background-image:url(/site/a/b5b265c39e57be59.webp)!important}
.rw .tc.ls-next{background:#7F3125}
@media (any-hover:hover) and (min-width:901px){.rw .tc.ls-next:hover{background:#74271B}}
.rw .tc.ls-next .kh,.rw .tc.ls-next .cxa{color:#FFFFFF}
.rw .tc.ls-next .kb{color:#FFFFFF}
.rw .tc.ls-next .cxa{opacity:1;transform:none}
.rw .tc.ls-next .nx{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:7px}
.rw .tc.ls-next .nx .ar{width:12px;height:12px}
@media (prefers-reduced-motion:reduce){.rw .ls-feed .fr{animation:none}}






.rw .topics .ls-c .ls-logos[style]{grid-template-columns:repeat(5,40px)!important;max-width:360px!important}


@media (min-width:901px) and (max-width:1200px){
 
 .rw .topics .ls-c .ls-logos,.rw .topics .ls-c .ls-logos[style]{grid-template-columns:repeat(5,32px)!important}
 .rw .topics .ls-c .ls-logos li,.rw .topics .ls-c .ls-logos svg{width:32px;height:32px}
}



/* survey card: same top and bottom edge as the product window */
@media (min-width:901px){
 
 .rw .topics .ls-c .ls-chan{min-height:32px}
}

/* one optical size for every logo in Unsolicited and Behavioural */
.rw .topics .ls-logos li[title="Trustpilot"] svg{transform:scale(0.854)}
.rw .topics .ls-logos li[title="Google Maps"] svg{transform:scale(0.956)}
.rw .topics .ls-logos li[title="App Store"] svg{transform:scale(0.843)}
.rw .topics .ls-logos li[title="Google Play"] svg{transform:scale(0.843)}
.rw .topics .ls-logos li[title="Booking.com"] svg{transform:scale(0.800)}
.rw .topics .ls-logos li[title="Tripadvisor"] svg{transform:scale(1.000)}
.rw .topics .ls-logos li[title="G2"] svg{transform:scale(0.800)}
.rw .topics .ls-logos li[title="YouTube"] svg{transform:scale(0.956)}
.rw .topics .ls-logos li[title="Reddit"] svg{transform:scale(0.800)}
.rw .topics .ls-logos li[title="TikTok"] svg{transform:scale(0.855)}
.rw .topics .ls-logos li[title="Salesforce"] svg{transform:scale(0.956)}
.rw .topics .ls-logos li[title="HubSpot"] svg{transform:scale(0.821)}
.rw .topics .ls-logos li[title="Dynamics 365"] svg{transform:scale(0.924)}
.rw .topics .ls-logos li[title="Zendesk"] svg{transform:scale(0.924)}
.rw .topics .ls-logos li[title="Google Analytics 4"] svg{transform:scale(0.843)}
.rw .topics .ls-logos li[title="Adobe Analytics"] svg{transform:scale(0.855)}
.rw .topics .ls-logos li[title="Mixpanel"] svg{transform:scale(0.821)}
.rw .topics .ls-logos li[title="Amplitude"] svg{transform:scale(0.800)}
.rw .topics .ls-logos li[title="Segment"] svg{transform:scale(0.810)}
.rw .topics .ls-logos li[title="Snowflake"] svg{transform:scale(0.821)}
@media (min-width:901px) and (max-width:1200px){.rw .topics .ls-c .ls-chan{min-height:48px}}

/* Listen: placeholder beside the survey card, no channel tabs */







.rw .cpx{--vt:#427E6C;--vth:#3A6F5F;--vi:#110E0A;--vd:#6E6963;--vf:#6E6963;--vb:#E3E2DF;--vl:#E3E2DF;--vg:#FAF9F7;
 position:relative;display:flex;height:468px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;
 font-family:'Geist',system-ui,sans-serif;color:var(--vi);font-size:13px;line-height:1.35;text-align:left}
.rw .cpx button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.rw .cpx > input{position:absolute;opacity:0;pointer-events:none}
.rw .cpx :focus-visible,.rw .cpx:has(#cpx-c-all:focus-visible) label[for="cpx-c-all"],
.rw .cpx:has(#cpx-c-email:focus-visible) label[for="cpx-c-email"],
.rw .cpx:has(#cpx-c-sms:focus-visible) label[for="cpx-c-sms"],
.rw .cpx:has(#cpx-c-whatsapp:focus-visible) label[for="cpx-c-whatsapp"],
.rw .cpx:has(#cpx-c-ivr:focus-visible) label[for="cpx-c-ivr"],
.rw .cpx:has(#cpx-c-web:focus-visible) label[for="cpx-c-web"],
.rw .cpx:has(#cpx-c-app:focus-visible) label[for="cpx-c-app"]{outline:2px solid var(--vi);outline-offset:2px}







.rw .cpx-main{flex:1;min-width:0;background:var(--vg);padding:14px 18px 16px;display:flex;flex-direction:column;min-height:0}


.rw .cpx-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.rw .cpx-hd h3{margin:0;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--vi)}
.rw .cpx-hd p{margin:2px 0 0;font-size:12px;color:var(--vd)}



.rw .cpx-card{background:#fff;border:1px solid var(--vb);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.rw .cpx-body{overflow-y:auto;min-height:0;scrollbar-width:thin}
.rw .cpx-filt{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--vl)}
.rw .cpx-f{font-family:'Sometype Mono',ui-monospace,monospace;font-size:10.4px;color:var(--vd);border:1px solid var(--vb);border-radius:10px;padding:3px 9px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .cpx-f:hover{background:var(--vg)}}
.rw .cpx:has(#cpx-c-email:checked) label[for="cpx-c-email"],
.rw .cpx:has(#cpx-c-sms:checked) label[for="cpx-c-sms"],
.rw .cpx:has(#cpx-c-whatsapp:checked) label[for="cpx-c-whatsapp"],
.rw .cpx:has(#cpx-c-ivr:checked) label[for="cpx-c-ivr"],
.rw .cpx:has(#cpx-c-web:checked) label[for="cpx-c-web"],
.rw .cpx:has(#cpx-c-app:checked) label[for="cpx-c-app"],
.rw .cpx:has(#cpx-c-all:checked) label[for="cpx-c-all"]{color:var(--vt);background:#E3E2DF;border-color:#CDC8C2}
.rw .cpx:has(#cpx-c-email:checked) .cpx-ch[data-c="email"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-sms:checked) .cpx-ch[data-c="sms"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-whatsapp:checked) .cpx-ch[data-c="whatsapp"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-ivr:checked) .cpx-ch[data-c="ivr"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-web:checked) .cpx-ch[data-c="web"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-app:checked) .cpx-ch[data-c="app"]{color:var(--vt);border-color:#CDC8C2;background:#E3E2DF}
.rw .cpx:has(#cpx-c-email:checked) .cpx-tr:not([data-ch~="email"]){display:none}
.rw .cpx:has(#cpx-c-sms:checked) .cpx-tr:not([data-ch~="sms"]){display:none}
.rw .cpx:has(#cpx-c-whatsapp:checked) .cpx-tr:not([data-ch~="whatsapp"]){display:none}
.rw .cpx:has(#cpx-c-ivr:checked) .cpx-tr:not([data-ch~="ivr"]){display:none}
.rw .cpx:has(#cpx-c-web:checked) .cpx-tr:not([data-ch~="web"]){display:none}
.rw .cpx:has(#cpx-c-app:checked) .cpx-tr:not([data-ch~="app"]){display:none}
.rw .cpx-th,.rw .cpx-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 86px 92px 84px;gap:10px;align-items:center;padding:0 12px}
.rw .cpx-th{flex:none;white-space:nowrap;height:28px;border-bottom:1px solid var(--vl);font-family:'Sometype Mono',ui-monospace,monospace;font-size:9.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--vf)}
.rw .cpx-tr{height:43px;border-top:1px solid var(--vl)}
.rw .cpx-body > .cpx-tr:first-child{border-top:0}

@keyframes cpxnew{0%,35%{background:#E3E2DF}100%{background:transparent}}
.rw .cpx-pn{display:flex;flex-direction:column;min-width:0}
.rw .cpx-pn b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw .cpx-pn span{font-family:'Sometype Mono',ui-monospace,monospace;font-size:10px;color:var(--vf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw .cpx-chs{display:flex;flex-wrap:wrap;gap:4px}
.rw .cpx-ch{font-family:'Sometype Mono',ui-monospace,monospace;font-size:10px;color:var(--vd);border:1px solid var(--vb);border-radius:10px;padding:1px 7px}
.rw .cpx-num{font-family:'Sometype Mono',ui-monospace,monospace;font-size:11.5px}
.rw .cpx-bar{position:relative;display:flex;align-items:center;background:linear-gradient(var(--vl),var(--vl)) 0 50%/52px 4px no-repeat}
.rw .cpx-bar span{position:absolute;left:0;top:50%;margin-top:-2px;height:4px;border-radius:2px;background:var(--vt)}
.rw .cpx-bar em{font-style:normal;font-family:'Sometype Mono',ui-monospace,monospace;font-size:10px;color:var(--vf);margin-left:58px}
.rw .cpx-pill{display:inline-flex;align-items:center;gap:5px;font-family:'Sometype Mono',ui-monospace,monospace;font-size:10px;border:1px solid;border-radius:10px;padding:1px 8px;white-space:nowrap}
.rw .cpx-pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.rw .cpx-live{color:var(--vt);border-color:#CDC8C2}
.rw .cpx-sched{color:#6E6963;border-color:#CDC8C2}

























@media (min-width:901px) and (max-width:1200px){
 
 .rw .cpx-main{padding:12px 12px 14px}
 .rw .cpx-th span:nth-child(4),.rw .cpx-tr > .cpx-bar{display:none}
 .rw .cpx-th,.rw .cpx-tr{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 92px 80px;gap:8px}
}
@media (max-width:900px){
 
 .rw .cpx{height:auto;min-height:470px}
 
 .rw .cpx-main{padding:12px}
 
 .rw .cpx-th{display:none}
 .rw .cpx-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "c c";height:auto;padding:9px 12px;row-gap:6px}
 .rw .cpx-tr > .cpx-pn{grid-area:n}.rw .cpx-tr > .cpx-chs{grid-area:c}.rw .cpx-tr > div:last-child{grid-area:s}
 .rw .cpx-tr > .cpx-num,.rw .cpx-tr > .cpx-bar{display:none}
 
}
/* ===== lx: the platform pages after linear.app (2 Oct 2026) =====
   Section head with "+" or arrow; the explainer that opens on the right; feature tabs that change one stage;
   open product fragments that fade into the page; cards that open an explainer; the row of platform pages.
   Page tokens only (the draft's :root). */

/* stages bleed to the window edge on purpose; nothing may scroll the page sideways (also the nav's sub-pixel at 1024) */
html{overflow-x:clip}

/* ---- section head: title left, intro right with its "+" or arrow ---- */
.rw .lx-sec{padding-top:var(--s10)}
.rw .lx-sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.rw .lx-sh h2{grid-column:1 / span 7;font-weight:800;font-size:var(--t-title);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.rw .lx-sh .lx-si{grid-column:8 / span 5}
.rw .lx-sh .lx-si p{font-size:var(--p-s);line-height:1.45;color:var(--dim);max-width:34em}
.rw .lx-sh .lx-si .lx-more{margin-top:24px}
.rw .lx-sh-0 .lx-si .lx-more{margin-top:0}
.rw .lx-body{margin-top:var(--s4)}
/* the first section has no head: its stage follows the page head (2M); the page head carries the stage's "+",
   under the lead (columns 8 to 12), 24 below it */
.rw .lx-first > .wrap > .lx-body:first-child{margin-top:0}
.rw .hero .lx-hm{grid-column:8 / span 5;margin-top:24px}



@media (max-width:900px){
  .rw .lx-sh h2,.rw .lx-sh .lx-si{grid-column:1 / -1}
  .rw .lx-sh .lx-si{margin-top:var(--s2)}
  
  .rw .hero .lx-hm{grid-column:1 / -1}
}

/* ---- the two kinds of link: "+" stays on the page, the arrow leaves it ---- */
.rw .lx-more{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.rw .lx-more svg{flex:none;transition:transform .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .lx-more:hover{text-decoration:underline;text-underline-offset:3px}}
@media (any-hover:hover) and (min-width:901px){.rw .lx-more:hover svg{transform:rotate(90deg)}}

.rw .lx-more:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---- the explainer: a dialog from the right ---- */
.rw .lx-dr{position:fixed;inset:0;z-index:1000;display:block}
.rw .lx-dr[hidden]{display:none}
.rw .lx-dr-bg{position:absolute;inset:0;background:rgba(250,249,247,.8);opacity:0;transition:opacity .45s ease}
.rw .lx-dr-p{position:absolute;top:16px;right:16px;bottom:16px;width:min(640px,calc(100vw - 32px));display:flex;flex-direction:column;
  background:var(--ground);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:0 24px 48px -24px rgba(17,14,10,.28);
  transform:translateX(calc(100% + 24px));transition:transform .5s cubic-bezier(.32,.72,0,1);outline:none;overflow:hidden}
.rw .lx-dr.on .lx-dr-bg{opacity:1}
.rw .lx-dr.on .lx-dr-p{transform:none}
.rw .lx-dr-h{flex:none;display:flex;justify-content:flex-end;align-items:center;height:64px;padding:0 16px}
/* the close control is the cross alone (Kaspar, 2 Oct: "close not needed"); its name stays for screen readers */
.rw .lx-dr-x{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-s);cursor:pointer;color:var(--ink)}
.rw .lx-dr-x svg{display:block}
@media (any-hover:hover) and (min-width:901px){.rw .lx-dr-x:hover{background:var(--stone)}}
.rw .lx-dr-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .lx-dr-c{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s2) var(--s4)}
.rw .lx-dr-c h2{font-weight:800;font-size:var(--t-title);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.rw .lx-dr-c .lx-di{margin-top:16px;font-size:var(--p-s);line-height:1.45;color:var(--dim)}
.rw .lx-dr-c figure{margin:var(--s4) 0 0}
.rw .lx-dr-c .lx-df{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--paper);padding:24px}
.rw .lx-dr-c figcaption{margin-top:12px;font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rw .lx-dr-c h3{margin-top:var(--s4);font-weight:800;font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em}
.rw .lx-dr-c h3+p{margin-top:8px}
.rw .lx-dr-c p{font-size:var(--p-s);line-height:1.45;color:var(--dim)}
.rw .lx-dr-c p+p{margin-top:12px}
.rw .lx-dr-c p b{color:var(--ink);font-weight:500}
.rw .lx-spec{list-style:none;margin:var(--s4) 0 0;padding:0;border-bottom:1px solid var(--line)}
.rw .lx-spec li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.rw .lx-spec .k,.rw .lx-spec .st{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rw .lx-spec .v{font-size:var(--p-s);line-height:1.45;color:var(--ink)}
.rw .lx-spec .st{white-space:nowrap;color:var(--ink)}
.rw .lx-spec .st.pc,.rw .lx-spec .st.co{color:var(--dim)}

@media (max-width:560px){
  .rw .lx-dr-p{top:8px;right:8px;bottom:8px;width:calc(100vw - 16px)}
  .rw .lx-dr-c{padding:0 20px 40px}
  .rw .lx-spec li{grid-template-columns:minmax(0,1fr) auto}
  .rw .lx-spec .k{grid-column:1 / -1}
}
html.lx-lock{overflow:hidden}

/* ---- feature tabs: a list that changes one stage ---- */
.rw .lx-ft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.rw .lx-ft-l{grid-column:1 / span 3;position:relative;display:flex;flex-direction:column;gap:4px;padding-top:24px}
.rw .lx-ft-hl{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--r-m);background:var(--ground);pointer-events:none;
  transition:transform .5s cubic-bezier(.32,.72,0,1),height .5s cubic-bezier(.32,.72,0,1)}
.rw .lx-ft-b{all:unset;position:relative;z-index:1;box-sizing:border-box;display:block;padding:16px 18px 18px;border-radius:var(--r-m);cursor:pointer}
.rw .lx-ft-b .t{display:block;font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .2s ease}
.rw .lx-ft-b .d{display:block;margin-top:6px;font-size:14px;line-height:18px;color:var(--dim)}
.rw .lx-ft-b[aria-pressed=true] .t{color:var(--ink)}@media (any-hover:hover) and (min-width:901px){.rw .lx-ft-b:hover .t{color:var(--ink)}}
.rw .lx-ft-b:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.rw .lx-ft-s{grid-column:4 / -1;position:relative;height:var(--lx-h,560px);min-width:0;
  margin-right:calc(-1 * (var(--m) + max(0px, (100vw - 1432px) / 2)))}
/* tabs under the stage, one scene each */
.rw .lx-ft.under .lx-ft-s{grid-column:1 / -1;grid-row:1}
.rw .lx-ft.under .lx-ft-l{grid-column:1 / -1;grid-row:2;flex-direction:row;gap:var(--g);padding-top:var(--s2)}
.rw .lx-ft.under .lx-ft-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;padding:0 0 0 16px;border-radius:0;border-left:1px solid var(--line);transition:border-color .2s ease}
.rw .lx-ft.under .lx-ft-b[aria-pressed=true]{border-left-color:var(--ink)}
.rw .lx-ft.under .lx-ft-hl{display:none}
/* the layers of a stage */
/* a scene change is a cross-fade: the old scene leaves first, the new one arrives a beat later and settles from 98.5 %
   (Kaspar, 2 Oct: the scenes "drop" between topics; nothing moves up or down any more) */
.rw .lx-l{position:absolute;opacity:0;pointer-events:none;transform-origin:30% 20%;transition:opacity .45s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.rw .lx-l.on{opacity:1;pointer-events:auto;transition:opacity .45s ease .14s,transform .5s cubic-bezier(.32,.72,0,1) .14s}
.rw .lx-ft-s .lx-l.front:not(.on){transform:scale(.985)}
.rw .lx-l.seen{opacity:.35}
@media (max-width:900px){
  .rw .lx-ft{display:block}
  .rw .lx-ft-l,.rw .lx-ft.under .lx-ft-l{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 var(--s2);margin-right:calc(-1 * var(--m))}
  .rw .lx-ft-l::-webkit-scrollbar{display:none}
  .rw .lx-ft-hl{display:none}
  .rw .lx-ft-b,.rw .lx-ft.under .lx-ft-b{flex:none;padding:0 12px;height:32px;display:inline-flex;align-items:center;border:0;border-radius:var(--r-s);background:transparent}
  .rw .lx-ft-b .d{display:none}
  .rw .lx-ft-b[aria-pressed=true],.rw .lx-ft.under .lx-ft-b[aria-pressed=true]{background:var(--ink)}
  .rw .lx-ft-b[aria-pressed=true] .t{color:#FFFFFF}
  .rw .lx-ft-s{height:var(--lx-hm,480px);margin-right:calc(-1 * var(--m))}
  .rw .lx-ft.under{display:flex;flex-direction:column;align-items:stretch}
  .rw .lx-ft.under .lx-ft-l{order:-1;padding:0 0 var(--s2)}
}

/* ---- product fragments: open surfaces that fade into the page ---- */
.rw .lx-frag{background:var(--ground);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.rw .lx-frag.front{box-shadow:0 24px 48px -24px rgba(17,14,10,.28)}


.rw .lx-frb{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 140px);
  mask-image:linear-gradient(to left,transparent 0,#000 22%),linear-gradient(to top,transparent 0,#000 140px);-webkit-mask-composite:source-in;mask-composite:intersect}
/* the one control that waits for the visitor */
@keyframes lxRing{0%{box-shadow:inset 0 0 0 0 rgba(var(--lx-glow,66,126,108),0)}35%{box-shadow:inset 0 0 10px 3px rgba(var(--lx-glow,66,126,108),.7)}100%{box-shadow:inset 0 0 14px 5px rgba(var(--lx-glow,66,126,108),0)}}
.rw .lx-wait{animation:lxRing 2s ease-out .4s 3!important}
/* a group of choices invites button by button, in a wave from the first to the last, never as one block around the
   group (Kaspar, 2 Oct: "highlight buttons individually"); each ring follows its own button */
@keyframes lxRingS{0%{box-shadow:inset 0 0 0 0 rgba(var(--lx-glow,66,126,108),0)}35%{box-shadow:inset 0 0 6px 2px rgba(var(--lx-glow,66,126,108),.75)}100%{box-shadow:inset 0 0 10px 4px rgba(var(--lx-glow,66,126,108),0)}}
.rw .lx-wait-each.lx-wait-each > button{animation:lxRingS 2s ease-out 3;animation-delay:calc(.4s + var(--wi,0) * .12s)}
.rw .lx-wait-each > button:nth-child(2){--wi:1}.rw .lx-wait-each > button:nth-child(3){--wi:2}.rw .lx-wait-each > button:nth-child(4){--wi:3}
.rw .lx-wait-each > button:nth-child(5){--wi:4}.rw .lx-wait-each > button:nth-child(6){--wi:5}.rw .lx-wait-each > button:nth-child(7){--wi:6}

/* ---- a card that opens an explainer: the plus in the corner, the whole card is the button ---- */
.rw .tc.lx-xc{cursor:pointer}
.rw .tc.lx-xc .lx-xb{all:unset;position:absolute;inset:0;z-index:5;border-radius:inherit;cursor:pointer}
.rw .tc.lx-xc .lx-xb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .tc.lx-xc .lx-cp{position:absolute;top:12px;right:12px;z-index:6;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#CDC8C2;pointer-events:none;transition:color .2s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.rw .tc.lx-xc:focus-within .lx-cp{color:var(--ink);transform:rotate(90deg)}@media (any-hover:hover) and (min-width:901px){.rw .tc.lx-xc:hover .lx-cp{color:var(--ink);transform:rotate(90deg)}}
/* hover (S19): no background of its own; the draft's .tc:hover lifts the card, a white card stays white, a colour card takes its -hover */

/* ---- a quote card across the full width ---- */
.rw .grid6 .lx-story{grid-column:1 / -1}

/* ---- sideways: the row of platform pages ---- */
.rw .lx-sib{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}
.rw .lx-sib li{border-top:1px solid var(--line)}
.rw .lx-sib li:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
.rw .lx-sib a,.rw .lx-sib .cur{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:150px;box-sizing:border-box;padding:20px 0 24px;color:var(--ink);text-decoration:none}
.rw .lx-sib .h{font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em;font-weight:500;max-width:22em;text-wrap:balance}
.rw .lx-sib .n{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
@media (any-hover:hover) and (min-width:901px){.rw .lx-sib a:hover .n{text-decoration:underline;text-underline-offset:3px}}
@media (any-hover:hover) and (min-width:901px){.rw .lx-sib a:hover svg{transform:translateX(2px)}}
.rw .lx-sib svg{transition:transform .2s ease}
.rw .lx-sib .cur .h,.rw .lx-sib .cur .n{color:var(--dim)}
.rw .lx-sib a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:900px){
  .rw .lx-sib{grid-template-columns:minmax(0,1fr)}
  .rw .lx-sib li:nth-last-child(-n+3){border-bottom:0}
  .rw .lx-sib li:last-child{border-bottom:1px solid var(--line)}
  .rw .lx-sib a,.rw .lx-sib .cur{min-height:0}
}

/* ---- reveal once in view ---- */
/* Entrances appear in place, one after the other, without rising, dropping or sliding (Kaspar, 3 Oct: "it seems that often the standard loading animation is like a downwards swoop. can you load static one by one unless otherwise described?"). */
.rw [data-lx-in]{opacity:0;transition:opacity .45s ease}
.rw [data-lx-in].lx-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rw .lx-dr-bg,.rw .lx-dr-p,.rw .lx-ft-hl,.rw .lx-l,.rw [data-lx-in],.rw .lx-ft-x,.rw .lx-ft-x.on,.rw .lx-ft-xi,.rw .lx-ft-x.on .lx-ft-xi{transition:none}
  .rw [data-lx-in]{opacity:1;transform:none}
  .rw .lx-wait{animation:none!important;box-shadow:inset 0 0 0 2px rgb(var(--lx-glow,66,126,108))!important}
  .rw .lx-wait-each.lx-wait-each > button{animation:none;box-shadow:inset 0 0 0 2px rgb(var(--lx-glow,66,126,108))}
}

/* ---- focus rings only for the keyboard: a click on a stage control never leaves a ring (Kaspar, 2 Oct, the ringed switch) */
html.lx-mouse .rw .lx-ft-s :focus,html.lx-mouse .rw .lx-ft-s :focus-visible,html.lx-mouse .rw .lx-body :focus-visible{outline:none!important}

/* ---- a link stands with what it is about (Kaspar, 2 Oct: a row of links under the stage "looks lost", and the head's
   lone "Connectors" "is lost"). A link about one feature tab sits in that tab, under its line, and opens with it; a link
   about the whole section is the last entry of the tab column; without tabs, it sits S under the stage on its left edge,
   2M clear of what follows. At 900 and below the tab's link moves under the stage with it. ---- */
.rw .lx-ft-i{display:block}
.rw .lx-ft-x{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .5s cubic-bezier(.32,.72,0,1),visibility 0s linear .45s}
.rw .lx-ft-x.on{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.32,.72,0,1),visibility 0s}
.rw .lx-ft-xi{min-height:0;overflow:hidden;position:relative;z-index:1;opacity:0;transition:opacity .2s ease}
.rw .lx-ft-x.on .lx-ft-xi{opacity:1;transition:opacity .45s ease .15s}
.rw .lx-ft-xi > div{padding:6px 18px 18px}

.rw .lx-ft-m{display:none}


@media (max-width:900px){
  .rw .lx-ft-i{display:contents}   /* the tab stays the pill in the row */
  .rw .lx-ft-x{display:none}
  .rw .lx-ft-m{display:flex;flex-direction:column;align-items:flex-start;gap:16px;list-style:none;margin:var(--s2) 0 0;padding:0}
  .rw .lx-ft-m li[data-for]:not(.on){display:none}
}

/* ===== Listen, after linear.app (2 Oct 2026) ===== */
.rw .lx-first{padding-top:calc(var(--s4) * 2)}
.rw .ls1 .lx-ft{--lx-h:540px}

/* the survey list behind: Silvia's list without the app's sidebar, fading right and down */
.rw .ls-s .ls-list.cpx{position:absolute;left:264px;top:0;right:0;bottom:0;height:auto;display:block;border:1px solid var(--border);border-radius:var(--r-l);background:#fff;opacity:1;pointer-events:auto}
.rw .ls-s .ls-list .cpx-main{height:100%;box-sizing:border-box;padding:18px 22px 18px 100px}
.rw .ls-s .ls-list .cpx-card{flex:none}
.rw .ls-s .ls-list .cpx-body{overflow:visible}
.rw .ls-cnt{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-right:22%}
.rw .ls-cnt b{font-weight:600;font-size:20px;line-height:1.2;color:var(--vi);font-variant-numeric:tabular-nums}
.rw .ls-cnt span{font-family:'Sometype Mono',ui-monospace,monospace;font-size:10px;color:var(--vd)}
.rw .ls-cnt.tick b{animation:lsTick .6s ease}
@keyframes lsTick{40%{color:var(--vt)}}
.rw .ls-new{position:relative;align-self:stretch;margin-left:auto;width:0}
.rw .ls-pill{position:absolute;right:16px;top:50%;margin-top:-12px;z-index:2;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;
  background:var(--vt);color:#fff;font-family:'Sometype Mono',ui-monospace,monospace;font-size:10.4px;opacity:0;transition:opacity .45s ease}
.rw .ls-pill.on{opacity:1;transform:none}
.rw .ls-pill.lo{background:var(--vr)}   /* a complaint lands in brick, with its case */
.rw .ls-pill i{width:5px;height:5px;border-radius:50%;background:#fff}
.rw .ls-s .cpx-tr.ls-hit{animation:cpxnew 2.4s ease-out}
.rw .ls-s .cpx-tr.ls-hit .cpx-num{color:var(--vt);font-weight:600}

/* the respondent's side, in front: no label rows above the content (no eyebrows); 24 px of air inside;
   every change of height runs on the stage's curve, nothing plops (Kaspar, 2 Oct) */
.rw .ls-s .ls-ph,.rw .ls-s .ls-rules{left:0;top:56px;width:360px;overflow:hidden}
.rw .ls-s .lx-l.on{transform:none}
.rw .ls-s .lb,.rw .lx-dr .ls-dfq .lb{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.rw .ls-s .d{color:var(--dim)}
.rw .ls-s .sm{font-size:14px;line-height:20px}
.rw .ls-s p{margin:0}
.rw .ls-mb{padding:24px}
.rw .ls-q{margin-top:10px!important;font-weight:800;font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.rw .ls-scale,.rw .ls-rep,.rw .ls-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:18px;border-radius:var(--r-s)}
.rw .ls-scale button,.rw .ls-rep button,.rw .ls-pad button,.rw .ls-tb button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:40px;border-radius:var(--r-s);
  background:var(--paper);border:1px solid var(--border);font-size:14px;line-height:18px;color:var(--ink);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .45s ease}
@media (any-hover:hover) and (min-width:901px){.rw .ls-scale button:hover,.rw .ls-rep button:hover,.rw .ls-pad button:hover,.rw .ls-tb button:hover{background:var(--stone)}}
.rw .ls-scale button[aria-pressed=true],.rw .ls-rep button[aria-pressed=true],.rw .ls-pad button[aria-pressed=true],.rw .ls-tb button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.rw .ls-scale button:disabled,.rw .ls-rep button:disabled,.rw .ls-pad button:disabled,.rw .ls-tb button:disabled{cursor:default}
.rw .ls-scale button:disabled:not([aria-pressed=true]),.rw .ls-rep button:disabled:not([aria-pressed=true]),.rw .ls-pad button:disabled:not([aria-pressed=true]),.rw .ls-tb button:disabled:not([aria-pressed=true]){opacity:.45;background:var(--paper)}
.rw .ls-s button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .ls-ends{display:flex;justify-content:space-between;margin-top:8px}

/* a follow-up that opens: its space is measured once and opened on the curve; its lines fade in one after another */
.rw .ls-fuw{height:0;overflow:hidden;transition:height .5s cubic-bezier(.32,.72,0,1)}
.rw .ls-fu{padding-top:22px}
.rw .ls-fu > *{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.rw .ls-fu > .in{opacity:1;transform:none}
.rw .ls-q2{font-weight:800;font-size:var(--p-s);line-height:1.4}
.rw .ls-ans{margin-top:10px!important;min-height:44px;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:#FFFFFF}
.rw .ls-ok{display:flex;align-items:center;gap:8px;margin-top:14px!important}
.rw .ls-ok::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--green)}

/* typing: the whole sentence is laid out from the first letter (the rest invisible), so nothing grows while it types */
.rw .ls-s .tv{position:relative}
.rw .ls-s .typ .tv::after{content:'';position:absolute;right:-2px;top:2px;bottom:2px;width:1px;background:var(--ink);animation:lsBlink .9s steps(1) infinite}
.rw .ls-s .tr{visibility:hidden}
@keyframes lsBlink{50%{opacity:0}}

/* SMS and WhatsApp: a thread that unrolls; when it is full, it scrolls on the same curve */
.rw .ls-chat{display:flex;flex-direction:column;padding:24px 24px 0}
.rw .ls-th{display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:height .5s cubic-bezier(.32,.72,0,1)}
.rw .ls-th>*{flex:none}
.rw .ls-th.full{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 36px);mask-image:linear-gradient(to bottom,transparent 0,#000 36px)}
.rw .ls-in,.rw .ls-out{max-width:86%;padding:12px 14px;border-radius:var(--r-m)}
.rw .ls-th > .new{animation:lsIn .5s cubic-bezier(.32,.72,0,1) both}
.rw .ls-in{align-self:flex-start;background:var(--paper)}
.rw .ls-out{align-self:flex-end;background:var(--stone)}
@keyframes lsIn{from{opacity:0}to{opacity:1}}
.rw .ls-rep{margin:18px 0 24px}
.rw .ls-tpl{max-width:92%}
.rw .ls-tb{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rw .ls-tb button{background:#FFFFFF;height:36px}
.rw .ls-chat[data-l=whatsapp]{padding-bottom:24px}

/* IVR: the call, and the open answer as an audio track */
.rw .ls-pr{padding:12px 14px;border-radius:var(--r-m);background:var(--paper)}
.rw .ls-trk{display:flex;align-items:center;gap:12px;margin-top:12px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-s);background:#FFFFFF}
.rw .ls-rec{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color .2s ease}
.rw .ls-call.rec .ls-rec{background:var(--brick);animation:lsRec 1s ease-in-out infinite}
@keyframes lsRec{50%{opacity:.35}}
.rw .ls-wave{flex:1;min-width:0;height:28px;display:flex;align-items:center;gap:2px;overflow:hidden}
.rw .ls-wave i{flex:1 1 0;min-width:1px;max-width:3px;border-radius:1px;background:var(--line);transform:scaleY(.12);transform-origin:50% 50%;transition:transform .2s ease,background-color .2s ease}
.rw .ls-wave i.on{background:var(--ink);transform:none}
.rw .ls-tm{flex:none;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

/* contact rules: the descriptions never change, so a switch never moves the layout; the result changes below */
.rw .ls-rl{list-style:none;margin:0;padding:12px 24px 0;border-bottom:0}
.rw .ls-rl li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.rw .ls-rl li:first-child{border-top:0}
.rw .ls-rl b{display:block;font-weight:800;font-size:14px;line-height:18px}
.rw .ls-rl em{display:block;font-style:normal;font-size:14px;line-height:18px;color:var(--dim)}
.rw .ls-tg{all:unset;flex:none;position:relative;width:36px;height:20px;border-radius:10px;background:var(--stone);cursor:pointer;transition:background-color .2s ease}
.rw .ls-tg i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:8px;background:#FFFFFF;box-shadow:0 1px 2px rgba(17,14,10,.2);
  transition:transform .5s cubic-bezier(.32,.72,0,1),width .2s ease}
.rw .ls-tg:active i{width:20px}
.rw .ls-tg[aria-checked=true]{background:var(--green)}
.rw .ls-tg[aria-checked=true] i{transform:translateX(16px)}
.rw .ls-tg[aria-checked=true]:active i{transform:translateX(12px)}
.rw .ls-tg:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rw .ls-s .ls-next{display:flex;align-items:center;justify-content:space-between;margin:0 24px;padding:14px 0 22px;border-top:1px solid var(--line)}
.rw .ls-nx{display:grid;justify-items:end;font-size:14px;line-height:18px}
.rw .ls-nx > span{grid-area:1 / 1;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.rw .ls-nx > span.on{opacity:1;transform:none}

/* the survey list behind: filtering by channel folds rows away and back on the same curve, it never jumps */
.rw .ls-s .ls-list.cpx .cpx-tr{display:grid!important;overflow:hidden;transition:height .5s cubic-bezier(.32,.72,0,1),opacity .45s ease,border-color .2s ease}
.rw .ls-s .ls-list.cpx .cpx-tr.ls-off{height:0;opacity:0;border-top-color:transparent}
.rw .ls-s .ls-list .cpx-f{transition:background-color .2s ease,color .2s ease,border-color .2s ease}

/* the cards that open explainers */
.rw .ls-cards{gap:var(--g)}
.rw .ls3 .grid6{gap:var(--g)}

/* explainer pictures */
.rw .ls-dfq{background:#FFFFFF;border-radius:var(--r-m);padding:20px}
.rw .ls-dfq .ls-q{margin:0!important}
.rw .ls-11{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin-top:14px}
.rw .ls-11 span{display:flex;align-items:center;justify-content:center;height:34px;border-radius:var(--r-s);background:var(--paper);border:1px solid var(--border);font-size:14px}








@media (max-width:900px){
  .rw .ls1 .lx-ft{--lx-hm:560px}
  .rw .ls-s .ls-list.cpx{left:96px}
  .rw .ls-s .ls-list .cpx-main{padding-left:22px}
  .rw .ls-s .ls-ph,.rw .ls-s .ls-rules{top:40px;width:min(340px,calc(100vw - 2 * var(--m) - 24px))}
}
@media (max-width:560px){
  .rw .ls-s .ls-list.cpx{left:48px;top:-8px}
  .rw .ls-cnt{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rw .ls-th > .new,.rw .ls-pill,.rw .ls-call.rec .ls-rec,.rw .ls-cnt.tick b,.rw .ls-s .typ .tv::after{animation:none}
  .rw .ls-fuw,.rw .ls-th,.rw .ls-fu > *,.rw .ls-wave i,.rw .ls-nx > span,.rw .ls-tg,.rw .ls-tg i,.rw .ls-s .ls-list.cpx .cpx-tr{transition:none}
}

/* the brand colours on the logos again (Kaspar, 2 Oct: "hover over colors got lost on icons"): the card's explainer button
   lay over them. The logos sit above it and take the pointer; a click on them opens the card's explainer all the same. */
.rw .tc.lx-xc .ls-logos{position:relative;z-index:6;cursor:pointer}

/* the marks in two rows of five, as Silvia set them (Kaspar, 2 Oct: "should that be a carousel? super crampt"): her
   rules for the logo rows (five to a row, one optical size per mark, 32 px between 901 and 1200) were scoped to her
   section (.topics); the cards live in .ls2 since the drafts, so the signal marks fell back to one row of ten */
.rw .ls2 .ls-c .ls-logos[style]{grid-template-columns:repeat(5,40px)!important;max-width:360px!important}
@media (min-width:901px) and (max-width:1200px){
 .rw .ls2 .ls-c .ls-logos,.rw .ls2 .ls-c .ls-logos[style]{grid-template-columns:repeat(5,32px)!important}
 .rw .ls2 .ls-c .ls-logos li,.rw .ls2 .ls-c .ls-logos svg{width:32px;height:32px}
}
.rw .ls2 .ls-logos li[title="Trustpilot"] svg{transform:scale(0.854)}
.rw .ls2 .ls-logos li[title="Google Maps"] svg{transform:scale(0.956)}
.rw .ls2 .ls-logos li[title="App Store"] svg{transform:scale(0.843)}
.rw .ls2 .ls-logos li[title="Google Play"] svg{transform:scale(0.843)}
.rw .ls2 .ls-logos li[title="Booking.com"] svg{transform:scale(0.800)}
.rw .ls2 .ls-logos li[title="Tripadvisor"] svg{transform:scale(1.000)}
.rw .ls2 .ls-logos li[title="G2"] svg{transform:scale(0.800)}
.rw .ls2 .ls-logos li[title="YouTube"] svg{transform:scale(0.956)}
.rw .ls2 .ls-logos li[title="Reddit"] svg{transform:scale(0.800)}
.rw .ls2 .ls-logos li[title="TikTok"] svg{transform:scale(0.855)}
.rw .ls2 .ls-logos li[title="Salesforce"] svg{transform:scale(0.956)}
.rw .ls2 .ls-logos li[title="HubSpot"] svg{transform:scale(0.821)}
.rw .ls2 .ls-logos li[title="Dynamics 365"] svg{transform:scale(0.924)}
.rw .ls2 .ls-logos li[title="Zendesk"] svg{transform:scale(0.924)}
.rw .ls2 .ls-logos li[title="Google Analytics 4"] svg{transform:scale(0.843)}
.rw .ls2 .ls-logos li[title="Adobe Analytics"] svg{transform:scale(0.855)}
.rw .ls2 .ls-logos li[title="Mixpanel"] svg{transform:scale(0.821)}
.rw .ls2 .ls-logos li[title="Amplitude"] svg{transform:scale(0.800)}
.rw .ls2 .ls-logos li[title="Segment"] svg{transform:scale(0.810)}
.rw .ls2 .ls-logos li[title="Snowflake"] svg{transform:scale(0.821)}
/* the two rows of marks sit on one line across the cards (Kaspar, 2 Oct: "align vertically"): the captions under them
   keep the same height, two lines (three between 901 and 1200), as Silvia set it for her section */
@media (min-width:901px){.rw .ls2 .ls-c .ls-chan{min-height:32px}}
@media (min-width:901px) and (max-width:1200px){.rw .ls2 .ls-c .ls-chan{min-height:48px}}
/* the full nav comes in at 981 px; below 1100 it is tighter, so it never runs past the window (from 981 to 1024 it ran up
   to 23 px over): the wordmark at its scrolled height, the menu pills 6 at the sides, the bar's gap 12 (clean-up,
   2 Oct 2026) */
@media (min-width:981px) and (max-width:1099px){
  html .rw > .nv .bar{gap:12px}
  html .rw > .nv .brand svg{height:27.6px}
  html .rw > .nv .items > li > :is(.dt,.plain){padding-left:6px;padding-right:6px}
}
/* the logo as the page before left it (Kaspar, 3 Oct, 21:39: "small logo, load new page, expand"): s+, the fold's end
   state; the script takes over at once and unfolds it when the page stands at its top */
@media (min-width:901px){
  html.nv-arr .rw > .nv .brand svg g > path:not(:first-child){opacity:0}
  html.nv-arr .rw > .nv .brand svg g > path:first-child{transform:translateX(79.1px)}
  html.nv-arr .rw > .nv .brand svg .lgp{transform:translateX(-2717.5px)}
}
@media (min-width:981px){ html.nv-arr .rw > .nv .brand svg{height:27.6px} }
.rw > .nv .v1 .t1 li.t1-sep::before,.rw .nv .mob li.t1-sep::before{content:"";display:block;height:1px;background:var(--border);margin:6px 12px}.rw .nv .mob li.t1-sep::before{margin:6px 0}
/* Footer lands on the page end (27 Sep): square foot, no bottom line; the sides and dividers run into the page end.
   The artifact skeleton pads the root by the safe area (iPhone home bar); that padding moves into the footer's last row,
   so the frame reaches the true end and the links stay clear of the home bar. */
:root{padding-bottom:0}
.rw .lf .cols{position:relative;box-shadow:none;border-radius:var(--r-l) var(--r-l) 0 0}
.rw .lf .cols::after{content:'';position:absolute;inset:0;border:1px solid var(--line);border-bottom:0;border-radius:inherit;pointer-events:none}
.rw .lf .cols .lc{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
@media (max-width:1359px){.rw .lf .cols .lc.c1,.rw .lf .cols .lc.c2{padding-bottom:56px}}
@media (max-width:560px){.rw .lf .cols .lc.c1,.rw .lf .cols .lc.c2,.rw .lf .cols .lc.c3{padding-bottom:32px}.rw .lf .cols .lc.c4{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}}
.cc{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;box-sizing:border-box;width:min(420px,calc(100vw - 32px));padding:20px;background:#FFFFFF;border:1px solid #E3E2DF;border-radius:8px;box-shadow:0 24px 48px -24px rgba(17,14,10,.28);font-family:'Geist',system-ui,sans-serif;font-weight:500;color:#110E0A;-webkit-font-smoothing:antialiased}.cc[hidden]{display:none}.cc p{margin:0;font-size:15px;line-height:22px}.cc p a{color:inherit;text-decoration:underline 1px;text-underline-offset:3px;white-space:nowrap}.cc .cc-b{display:flex;gap:8px;margin-top:16px}.cc button{flex:1 1 0;height:32px;border:0;border-radius:4px;background:#E3E2DF;color:#110E0A;cursor:pointer;font-family:'Sometype Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s ease}@media (any-hover:hover) and (min-width:901px){.cc button:hover{background:#CDC8C2}}.cc button[data-v="accept"]{background:#427E6C;color:#FFFFFF}@media (any-hover:hover) and (min-width:901px){.cc button[data-v="accept"]:hover{background:#3A6F5F}}.cc button:focus-visible,.cc p a:focus-visible{outline:2px solid #110E0A;outline-offset:2px}@media (min-width:901px){.cc{left:32px;bottom:calc(32px + env(safe-area-inset-bottom,0px))}}@media (prefers-reduced-motion:reduce){.cc button{transition:none}}
/* CI simplifications (29 Sep 2026), accepted by Kaspar. S8: one shadow for floating things; the product window keeps its frame. */
.rw .shots{box-shadow:none!important}
.rw .nv .dp{box-shadow:0 24px 48px -24px rgba(17,14,10,.28)!important}
/* S9: three spacing steps, S 31.5 (--s2), M 61 (--s4), L 150 (--s10) at 1440 */
.rw{--s3:var(--s2)!important;--s5:var(--s4)!important;--s6:var(--s4)!important;--s8:var(--s10)!important}
/* CI deviations fixed (29 Sep 2026): the rules of the CI guidelines, section Draft deviations */
/* Type: card body at the body line height */
.rw .tc .kb{line-height:1.45!important}
/* Shape: radius by size; tabs, back links and tiles are small, so 4 */
.rw .ptabs .pm,.rw .ptabs,.rw .ls-back{border-radius:4px!important}

/* Raster: split sections put the list in page columns 6 to 12 */


/* baked 1 Oct 2026: warm page + white cards. Nav hovers use stone; every card lifts on hover. */
.rw .nv{--ground:#E3E2DF}
.rw .tc{transition:background-color .2s ease,box-shadow .2s ease}
.rw .sv-opt{transition:background-color .2s ease,box-shadow .2s ease}
.rw .bk{transition:background-color .2s ease,box-shadow .2s ease}
@media (any-hover:hover) and (min-width:901px){.rw .tc:hover,.rw .sr:hover,.rw .bk:hover,.rw .sv-opt:hover{box-shadow:0 0 0 1px #E3E2DF,0 10px 24px -14px rgba(17,14,10,.2)}}

/* 1 Oct 2026: Silvia's card classes lift on hover like every other card; white cards stay white */
@media (any-hover:hover) and (min-width:901px){.rw .cs:hover,.rw .rp:hover{box-shadow:0 0 0 1px #E3E2DF,0 10px 24px -14px rgba(17,14,10,.2)}}

/* Silvia's pages (1 Oct 2026): her own components on the CI's styles. Shared components already carry the draft's rules. */
/* Labels: Sometype Mono, 12 / 15, 0.08em, capitals (S2); the brand stays lowercase inside a label */
.rw #pr .mono:not(.vh):not(.tl-link){font-size:12px!important;line-height:15px!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.rw #pr .mono .bc{text-transform:none!important}
/* Quotes in a column narrower than 560 px: card title (S4) */
.rw #pr .cxq .cxt{font-size:var(--t-s)!important;line-height:1.2!important;letter-spacing:-.025em!important}


/* Buttons: one height, 32 (S14); a button fused to an input keeps the field's height */
.rw .sv-btn{height:32px!important}
/* Radius by size (S7): 8 for 200 x 120 and larger, 4 below */
.rw #pr .ls-feed{border-radius:8px!important}
/* ===== Footer study 4 (2 Oct 2026): the agreed structure in six treatments. Scoped by #rw[data-lfv]. Mono as now (.ll). ===== */
.rw .lf .fv{display:none}
#rw[data-lfv] .lf > .wrap{display:none}

#rw[data-lfv="4"] .lf .fv-4{display:block}

.rw .lf .fv ul{margin:0}
.rw .lf .fv-h{margin:0}
.rw .lf .fv-wm{display:block;height:17px;width:auto}
.rw .lf .fv a:is([href="/"],[href="/de"],[href="/it"],[href="/es"]){color:var(--ink);display:inline-block}
.rw .lf .fv a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rw .lf .fv-h{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:4.5px 0;margin-bottom:12px}
.rw .lf .fv-row{display:flex;flex-wrap:wrap;column-gap:24px}
.rw .lf .fv .ll a{color:var(--dim)}
@media (any-hover:hover) and (min-width:901px){.rw .lf .fv .ll a:hover{color:var(--ink)}}

/* the structure: wordmark in columns 1-2, five columns of two, the legal row from column 3 */
.rw .lf .fvG{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s2)}

.rw .lf .fvG-col{grid-column:span 2}


.rw .lf .fv-cp{margin-left:auto}
@media (min-width:1360px){ .rw .lf .fv-4 .fvG-col > .ll > li > a{white-space:nowrap} }
@media (max-width:1359px){
  
  .rw .lf .fvG-col{grid-column:span 4}
  
}
@media (max-width:900px){
  .rw .lf .fvG-col{grid-column:span 6}
  .rw .lf .fv-cp{margin-left:0;flex-basis:100%}
}

/* disclosures: Articles and the copyright. Buttons look like the links; the nav's chevron turns when open. */
.rw .lf .fv-dis{display:inline-block;margin:0;padding:4.5px 0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);text-align:left}
.rw .lf .fv-dis[aria-expanded="true"]{color:var(--ink)}@media (any-hover:hover) and (min-width:901px){.rw .lf .fv-dis:hover{color:var(--ink)}}
.rw .lf .fv-nw{white-space:nowrap}
/* the three headings with a destination: underline on hover like the links, and the nav's arrow appears and shoots */
.rw .lf .fv-ha{color:inherit;text-decoration:none;text-underline-offset:3px;white-space:nowrap}
@media (any-hover:hover) and (min-width:901px){.rw .lf .fv-ha:hover{text-decoration:underline}}

.rw .lf .fv-ha .ar{display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1.5px;opacity:0;transition:opacity .2s ease;
  will-change:transform;backface-visibility:hidden}
.rw .lf .fv-ha:focus-visible .ar{opacity:1}@media (any-hover:hover) and (min-width:901px){.rw .lf .fv-ha:hover .ar{opacity:1}}
@media (hover:hover) and (min-width:901px){ @media (any-hover:hover) and (min-width:901px){.rw .lf .fv-ha:hover .ar{animation:nv-shoot .5s ease-in-out}} }
.rw .lf .fv-ha:focus-visible .ar{animation:nv-shoot .5s ease-in-out}
@media (prefers-reduced-motion:reduce){ .rw .lf .fv-ha .ar{animation:none!important;transition:none} }
.rw .lf .fv-dis:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rw .lf .fv-dis .cv{display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:-1px;transition:transform .2s ease}
.rw .lf .fv-dis[aria-expanded="true"] .cv{transform:rotate(180deg)}
.rw .lf .fv-pan{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease,visibility 0s linear .2s}
.rw .lf .fv-pan[data-open]{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s ease,visibility 0s linear 0s}
.rw .lf .fv-pan-in{min-height:0;overflow:hidden}
/* the addresses keep their space when closed (Kaspar, 2 Oct: "give enough space below so expand on address does not add
   space"): the footer is as tall closed as open, and the addresses fade in where the space already is */
.rw .lf .fv-pan.fv-adr{grid-template-rows:1fr;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.rw .lf .fv-pan.fv-adr[data-open]{opacity:1;transition:opacity .2s ease,visibility 0s linear 0s}
/* the articles: more air than the links, as titles run over two or three lines */
.rw .lf .fv-sub{padding:6px 0 10px 12px}
.rw .lf .fv .ll.fv-sub a{white-space:normal;line-height:20px;padding:6px 0}
.rw .lf .fv-sub li + li{margin-top:4px}
/* the addresses, under the legal row, on the list rhythm; ending under the copyright */
.rw .lf .fv-adr{grid-column:1 / -1}
.rw .lf .fv-adr-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:16px;padding-top:24px}
.rw .lf .fv-a{font-style:normal;font-family:var(--mono);font-weight:300;font-size:12px;line-height:24px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);grid-column:span 2}
.rw .lf .fv-a:first-child{grid-column:7 / span 2}
@media (max-width:1359px){ .rw .lf .fv-a{grid-column:span 3} .rw .lf .fv-a:first-child{grid-column:4 / span 3} }
@media (max-width:900px){ .rw .lf .fv-a{grid-column:span 4} .rw .lf .fv-a:first-child{grid-column:1 / span 4} }
@media (prefers-reduced-motion:reduce){ .rw .lf .fv-dis .cv,.rw .lf .fv-pan,.rw .lf .fv-pan[data-open],.rw .lf .fv-pan.fv-adr,.rw .lf .fv-pan.fv-adr[data-open]{transition:none} }

/* ink treatments (2, 4): headings and the wordmark white, links and small print in line grey, white on hover and when open */
.rw .lf .fv-dark{background:var(--ink);color:#FFFFFF}
.rw .lf .fv-dark .fv-h,.rw .lf .fv-dark a:is([href="/"],[href="/de"],[href="/it"],[href="/es"]){color:#FFFFFF}
.rw .lf .fv-dark .ll a,.rw .lf .fv-dark .fv-dis,.rw .lf .fv-dark .fv-a{color:#CDC8C2}
.rw .lf .fv-dark .fv-dis[aria-expanded="true"]{color:#FFFFFF}@media (any-hover:hover) and (min-width:901px){.rw .lf .fv-dark .ll a:hover,.rw .lf .fv-dark .fv-dis:hover{color:#FFFFFF}}

/* 4 Ramp: the page ends as a sheet with rounded corners over the ink footer */
.rw .lf .fv-4{background:var(--ink)}
.rw .lf .fv4-sheet{height:var(--s10);background:var(--paper);border-radius:0 0 8px 8px}
.rw .lf .fv4{padding:calc(var(--s4) * 2) 0 calc(var(--s2) + env(safe-area-inset-bottom,0px))}  /* Kaspar, 2 Oct: "ramp is the one. reduce the space below a bit." (was --s4) */
.rw .lf .fv4-rule{height:1px;background:#6E6963;margin:calc(var(--s4) * 2) 0 var(--s2)}
.rw .lf .fv4-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s2);align-items:start}
.rw .lf .fv4-b .fv-legal{grid-column:1 / span 10}
.rw .lf .fv4-brand{grid-column:11 / span 2;justify-self:end;padding-top:3.5px}
@media (max-width:1359px){ .rw .lf .fv4-b .fv-legal{grid-column:1 / span 9} .rw .lf .fv4-brand{grid-column:10 / span 3} }
@media (max-width:900px){ .rw .lf .fv4-b .fv-legal,.rw .lf .fv4-brand{grid-column:1 / -1} .rw .lf .fv4-brand{justify-self:start;order:-1} }


















/* phones: the 12-column grids' eleven gaps are wider than a 320 to 360 px screen; two columns, one below 360 */
@media (max-width:560px){
  .rw .lf .fv .fvG,.rw .lf .fv .fv4-b,.rw .lf .fv .fv-adr-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rw .lf .fv .fv4-b .fv-legal,.rw .lf .fv .fv4-brand,.rw .lf .fv .fv-adr,
  .rw .lf .fv .fv-a,.rw .lf .fv .fv-a:first-child{grid-column:1 / -1}
  .rw .lf .fv .fvG-col{grid-column:span 1}
  
  
  
  
  
}

@media (max-width:359px){ .rw .lf .fv .fvG-col{grid-column:1 / -1} }







.rw .lf .fv-4{display:block}
/* ===== card hover (S19, 1 Oct 2026; Kaspar, 2 Oct: "We defined a different hover over behavior for white cards (shadow and light border)") =====
   A clickable card lifts: 1 px light border and a soft shadow, box-shadow 0 0 0 1px #E3E2DF, 0 10px 24px -14px rgba(17,14,10,.20).
   A white card stays white; a colour card also takes its -hover shade. Two older rules still turned white cards stone on
   hover in this copy: the old kit's a.sv-card:hover (Customer stories) and Migration's customer card (.mg2 .tc.cxc). */
/* ===== the corner arrow, after ramp.com (Kaspar, 2 Oct 2026: "corner arrow behavior grab the one from ramp.com") =====
   Read on ramp.com (PlatformCard): the arrow is always there; on hover it leaves through the top-right corner, fading
   out, and comes back in from the bottom-left: 0.5 s ease-in-out, keyframes 0 / 20 / 40 / 60 / 100 %, run once per hover.
   Ramp moves its 16 px arrow 8 px; ours is 24 px, so it moves 12 px. Position stays the CI's 12 px from the top and the
   right (S20). The card itself only lifts (S19). With reduced motion the arrow stays still.
   Applies to every diagonal arrow on the site: card corners (.cxa, .sv-card__arrow) and the link rows (.ovl-ar, .crl-ar).
   The plus of a card that opens an explainer (.lx-cp, .ig-cpx) keeps its quarter turn: it does not leave the page. */
@keyframes cx-ramp{
  0%{opacity:1;transform:translate(0,0)}
  20%{opacity:0;transform:translate(12px,-12px)}
  40%{opacity:0;transform:translate(-12px,12px)}
  60%{opacity:0;transform:translate(-12px,12px)}
  100%{opacity:1;transform:translate(0,0)}
}
/* always shown, at rest in place and grey (Kaspar, 2 Oct, second round: "make them grey and at hover over play animation and
   switch to ink. hover off back to grey."; third round: "brighter grey for arrows pre hover over": the line grey #CDC8C2,
   no longer dim); on a colour card the arrow stays white in both states */
html .rw .tc .cxa:not(.ig-cpx){opacity:1;transform:none;transition:color .2s ease;color:#CDC8C2}
html .rw .tc:focus-within .cxa:not(.ig-cpx){color:#110E0A}@media (any-hover:hover) and (min-width:901px){html .rw .tc:hover .cxa:not(.ig-cpx){color:#110E0A}}
html .rw .tc.ls-next .cxa{color:#FFFFFF!important}
/* on hover or keyboard focus: out through the corner, back in from the opposite one */
html .rw .tc:focus-within .cxa:not(.ig-cpx){animation:cx-ramp .5s ease-in-out 0s 1 normal forwards}@media (any-hover:hover) and (min-width:901px){html .rw .tc:hover .cxa:not(.ig-cpx){animation:cx-ramp .5s ease-in-out 0s 1 normal forwards}}
@media (prefers-reduced-motion:reduce){
  html .rw .tc:focus-within .cxa:not(.ig-cpx){animation:none}@media (any-hover:hover) and (min-width:901px){html .rw .tc:hover .cxa:not(.ig-cpx){animation:none}}
}
.rw .ls-mb > .ls-q:first-child{margin-top:0!important}   /* the question opens the mail (no sender line over it, 3 Oct) */
/* Story card logo (Kaspar, 3 Oct: "MTN logo looks lost. make it bigger and place it better"): name and role stay under
   the quote; the logo stands at the card's bottom left, S from its edges, each logo at about the same visual weight
   (an area of about 4,000 px at 1440): Kantonsspital Winterthur 158 x 25, Swisscom 122 x 33, MTN 90 x 45. */
@media (min-width:901px){
  .rw .cxc .cxv{display:flex;flex-direction:column}
  .rw .cxc .cxq{flex:1 1 auto;display:flex;flex-direction:column}
  .rw .cxc .cxq footer{flex:1 1 auto;display:flex;flex-direction:column}
  .rw .cxc .cxq footer .cxl{margin-top:auto}
  .rw .cxc .cxq footer .cxr:last-of-type{margin-bottom:24px}
}
.rw .cxc img.cxl[alt="Kantonsspital Winterthur"]{width:158px;height:25px;max-width:none}
.rw .cxc img.cxl[alt="Swisscom"]{width:122px;height:33px;max-width:none}
.rw .cxc svg.cxl[aria-label="MTN"]{width:90px;height:45px;max-width:none}
/* Only English exists yet: the other languages show in the line grey and do nothing; nothing in a menu looks clickable
   unless it is (Kaspar, 3 Oct: "make all menu points clickable or grey the ones that aren't"). */
.rw .nv .lgl a.off,.rw .nv .lgl a.off b,.rw .nv .lgl a.off span,.rw .nv .mob .mlang a.off{color:var(--line);cursor:default}
@media (any-hover:hover) and (min-width:901px){.rw .nv .lgl a.off:hover{background:none}}
/* T07 (Kaspar, 3 Oct: "change to CI standard"): the connector rows in CI connector tiles: 44 tall, radius 4, a paper
   well with a 1 px line frame in the white card, the mark 18 px in the family colour (or the 8 px square), the name
   Geist Black 12/14 in ink; five rows, 10 apart. A row loops over half its track (two copies of eight tiles); the gap
   at its end keeps the loop seamless. */
.rw .b2 .tw.tws{top:40px;gap:10px}
.rw .b2 .tws .trow{height:44px}
.rw .b2 .tws .trow.r2,.rw .b2 .tws .trow.r4{margin-left:-40px}
.rw .b2 .tws .trk{gap:10px;padding-right:10px;animation-name:tws2-rtl;animation-duration:30s}
.rw .b2 .tws .r1 .trk,.rw .b2 .tws .r3 .trk,.rw .b2 .tws .r5 .trk{animation-name:tws2-ltr}
.rw .b2 .tws .r1 .trk{animation-duration:28s}
.rw .b2 .tws .r3 .trk{animation-duration:34s}
.rw .b2 .tws .r4 .trk{animation-duration:32s}
.rw .b2 .tws .r5 .trk{animation-duration:29s}
@keyframes tws2-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes tws2-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rw .b2 .tws .mt{flex:none;height:44px;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:0 12px;border-radius:4px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.rw .b2 .tws .mt svg{flex:none;width:18px;height:18px;fill:currentColor;color:var(--full)}
.rw .b2 .tws .mt b{font-weight:800;font-size:12px;line-height:14px;letter-spacing:-.02em;white-space:nowrap;text-align:left}
.rw .b2 .tws .mt:not(:has(svg))::before{content:'';flex:none;width:8px;height:8px;margin:0 5px;border-radius:2px;background:var(--full)}
@media (prefers-reduced-motion:reduce){
  .rw .b2 .tws .trk{animation:none!important;transform:none!important}
  .rw .b2 .tws .r1 .trk,.rw .b2 .tws .r3 .trk,.rw .b2 .tws .r5 .trk{transform:translateX(-50%)!important}
}
/* C02 (Kaspar, 3 Oct: "it is meant to be glas. improve glas effect."): the nav is glass */
.rw > .nv{background:rgba(250,249,247,.72);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .rw > .nv{background:rgba(250,249,247,.96)} }
/* R04 (Kaspar, 3 Oct: "simplify"): nothing round but a person's avatar; radius 8 from 200 x 120, 4 below; marks are
   squares (8 px radius 2), bars square-ended, switches radius 4 with a radius 2 knob and no shadow (R02, R03, R05 to R07) */
.rw .cpx-ch,.rw .cpx-f,.rw .cpx-pill,.rw .ls-pill{border-radius:4px}
.rw .cpx-pill i,.rw .ls-pill i{border-radius:1px}
.rw .ls-rec{border-radius:2px}
.rw .cpx-bar span{border-radius:0}
.rw .ls-tg{border-radius:4px}
.rw .ls-tg i{border-radius:2px;box-shadow:none}
/* N03: every invitation fills (Kaspar, 3 Oct: "add timers to all"): a band in the control's hover shade runs across it */
@keyframes lxFill{from{background-size:0% 100%}to{background-size:100% 100%}}
.rw .lx-fill.lx-fill{background-image:linear-gradient(var(--lx-band),var(--lx-band));background-repeat:no-repeat;background-position:left center;
  animation:lxFill 5.2s linear forwards!important}
.rw .lx-wait-each.lx-filling > button:not(.lx-fill),.rw .lx-wait.lx-filling > button:not(.lx-fill),.rw .lx-wait.lx-filling:not(.lx-fill){animation:none!important}
@media (prefers-reduced-motion:reduce){ .rw .lx-fill.lx-fill{animation:none!important;background-image:none} }
/* V01: only a card that is a link lifts */
@media (any-hover:hover) and (min-width:901px){.rw .tc:not(a):not(:has(.tl-link, .lx-xb, a[href])):hover{box-shadow:none}}
/* V05: filters hover to stone */
@media (any-hover:hover) and (min-width:901px){.rw .cpx-f:not(:has(input:checked)):hover{background:var(--stone)}}
/* Kaspar, 3 Oct, 13:02: "make the glow within the button, not around it." The invitation glows inside the control: green
   on a light control, white on a green or ink one */
.rw :is(.ct-go,.agx-send,.dt-pri,.mx-btn,.hs-btn,.btn-primary),.rw .lx-wait-each > button[aria-pressed="true"]:not(.mxb-w){--lx-glow:255,255,255}
/* Listen: the WhatsApp and IVR explainers (Kaspar, 3 Oct, 20:38). The window keeps its frame; at 0.75 its left part
   (the phone and what the platform sees, the question, the questionnaire) is in view and the rest scrolls sideways. The
   caption follows the view, cross-fading in one cell. The app's frame keeps the size the pages gave it (their #pw-voc,
   1720 x 747, cropped and scaled by .pw-voc as there); without it the frame falls back to 300 x 150. */
.rw .lx-dr-c .ls-xw .ptabs{justify-content:flex-start;margin-bottom:16px}
.rw .lx-dr-c .ls-xw .shots{width:auto;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--r-l);background:#FFFFFF;box-shadow:none;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rw .lx-dr-c .ls-xw .shot{border-radius:0}
.rw .lx-dr-c .ls-xw .scaler{transform-origin:0 0}
.rw .lx-dr-c .ls-xw .pw-voc iframe{width:1720px;height:747px}
.rw .lx-dr-c .ls-xw figcaption{display:grid}
.rw .lx-dr-c .ls-xw figcaption > span{grid-area:1 / 1;opacity:0;transition:opacity .45s ease}
.rw .lx-dr-c .ls-xw figcaption > span.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .rw .lx-dr-c .ls-xw figcaption > span{transition:none} }
/* product windows show once their own screen is drawn (clean-up, 3 Oct) */
.rw iframe.lx-app{opacity:0;transition:opacity .45s ease}
.rw iframe.lx-app.lx-up{opacity:1}
@media (prefers-reduced-motion:reduce){.rw iframe.lx-app{transition:none}}
/* a product window's box has its final size before the script scales it (clean-up, 3 Oct) */
.rw .shot:has(> .scaler):not([style*="height"]){aspect-ratio:1180 / 586}
/* the cookie card fades in (clean-up, 3 Oct) */
.cc:not([hidden]){animation:ccIn .45s ease both}
@keyframes ccIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.cc:not([hidden]){animation:none}}
.rw .lf .fv-4 .fvG-col > .ll > li > a,.rw .lf .fv-ha{white-space:normal}
.rw .hs-vb{grid-template-columns:96px minmax(0,560px) max-content}
@media (min-width:901px){.rw .mx-kp{grid-template-columns:repeat(4,minmax(min-content,1fr))}}
@media (max-width:560px){.rw .dt-seg button{padding:0 6px}.rw .dt-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}}
@media (max-width:400px){.rw .agx-out{height:620px}}
@media (max-width:1180px) and (min-width:901px),(max-width:560px){.rw .pov-move li{grid-template-columns:150px minmax(0,1fr) max-content}}
@media (max-width:900px){.rw .pov-move li{grid-template-columns:120px minmax(0,1fr) max-content}}
/* ===== sandsiv+ on a phone (kphone, Home Mobile Study, 3 Oct 2026; phone-rules-2026-10-03.md) ===== */
/* the menu: over the page from under the bar to the bottom, the page colour at 80% with a 20 px blur, a 180 ms fade; the
   bar solid with its line while it is open; the page behind neither scrolls nor takes focus; the burger turns into a cross */
@media (max-width:980px){
  .sv-mob-open .rw > .nv{-webkit-backdrop-filter:none;backdrop-filter:none;background:#FAF9F7;border-bottom-color:#E3E2DF}
  .rw > .nv .mob{position:fixed;left:0;right:0;top:var(--sv-nvb,69px);bottom:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;
    border-top:0;background:rgba(250,249,247,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .18s ease}
  .rw > .nv .mob.on{opacity:1}
}

@media (prefers-reduced-motion:reduce){ .rw > .nv .mob{transition:none} }

/* ---- the bar on a phone: wordmark and burger (Home Mobile Study, 3 Oct, 15:27) ---- */
.rw > .nv .burger .sv-xi{display:none}
@media (max-width:980px){
  .rw > .nv .gsw{display:none}
  .rw > .nv .bar > :has(> .burger){margin-left:auto}
  .rw > .nv .burger{position:relative}
  .rw > .nv .burger > svg{transition:opacity .16s cubic-bezier(.25,.46,.45,.94),transform .16s cubic-bezier(.25,.46,.45,.94)}
  .rw > .nv .burger > svg.sv-xi{display:block;position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;opacity:0;transform:rotate(-45deg) scale(.7)}
  .rw > .nv .burger[aria-expanded=true] > svg:not(.sv-xi){opacity:0;transform:rotate(45deg) scale(.7)}
  .rw > .nv .burger[aria-expanded=true] > svg.sv-xi{opacity:1;transform:none}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){ .rw > .nv .burger > svg{transition:none} }

/* ---- the footer on a phone (Kaspar, 15:27: "footer is super cramped and chaotic. clean up.") ----
   The wordmark on top; the five groups in two columns, Platform beside Customers and Sovereignty, then Company beside
   Connect; the links in Geist at 14 (small), sentence case, 30 px a row, so nothing breaks over two lines (it set
   "Analyse & Quantify" and "Tele-communications" in two); the group names stay labels. Customers lists its two pages (the
   four industries are the Customer stories filter); Articles goes to the blog (the list of three folds away on desktop).
   Then the line, the legal links as one run of words, the copyright with its addresses folded (on desktop they keep
   their room when closed; on a phone that room was 272 px of black under the last line). */
.rw .lf .sv-fph{display:none}
@media (max-width:560px){
  .rw .lf .fv4 .wrap{display:flex;flex-direction:column}
  .rw .lf .fv4 .fv4-b{display:contents}
  .rw .lf .fv4 .fv4-brand{order:0;margin:0 0 var(--s4);padding:0}
  .rw .lf .fv4 .fvG{order:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"p c" "p s" "co cn";column-gap:var(--g);row-gap:32px;align-items:start}
  .rw .lf .fv4 .fvG-col:nth-child(1){grid-area:p}
  .rw .lf .fv4 .fvG-col:nth-child(2){grid-area:c}
  .rw .lf .fv4 .fvG-col:nth-child(3){grid-area:s}
  .rw .lf .fv4 .fvG-col:nth-child(4){grid-area:co}
  .rw .lf .fv4 .fvG-col:nth-child(5){grid-area:cn}
  .rw .lf .fv4 .fv-h{margin:0 0 6px}
  .rw .lf .fv4 .fvG .ll li{margin:0}
  .rw .lf .fv4 .fvG .ll a,.rw .lf .fv4 .fv-legal a,.rw .lf .fv4 .fv-cp .fv-dis{display:inline-block;padding:6px 0;
    font-family:var(--font-sans,'Geist',system-ui,sans-serif);font-weight:400;font-size:14px;line-height:18px;letter-spacing:0;text-transform:none;white-space:nowrap}
  .rw .lf .fv4 .fvG-col:nth-child(2) li:has(> a[href*="#"]){display:none}
  .rw .lf .fv4 .fv-art{display:none}
  .rw .lf .fv4 .sv-fph{display:list-item}
  .rw .lf .fv4 .fv4-rule{order:2;margin:var(--s4) 0 18px}
  .rw .lf .fv4 .fv-legal{order:3;display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
  .rw .lf .fv4 .fv-legal .fv-cp{flex-basis:100%;margin:6px 0 0}
  .rw .lf .fv4 .fv-adr{order:4}
  .rw .lf .fv-pan.fv-adr{grid-template-rows:0fr;transition:grid-template-rows .2s ease,opacity .2s ease,visibility 0s linear .2s}
  .rw .lf .fv-pan.fv-adr[data-open]{grid-template-rows:1fr;transition:grid-template-rows .2s ease,opacity .2s ease,visibility 0s linear 0s}
  .rw .lf .fv4 .fv-adr-g{padding-top:12px;row-gap:12px}
  .rw .lf .fv4 .fv-a{font-family:var(--font-sans,'Geist',system-ui,sans-serif);font-style:normal;font-size:14px;line-height:18px;letter-spacing:0;text-transform:none}
  .rw .lf .fv-ink.fv4{padding-top:56px;padding-bottom:40px}
}

/* ---- links to other sites, one way on a phone (Kaspar: "vairous arrows for similar off links."): a row that links
   (an award, a role, a page) has the corner arrow on its first line, by the title (it stood in the middle of the row,
   so on a tall row it sat beside the figures); a link inside a line of text is underlined words, no arrow (the source
   of the Info-Tech scores, on Analyst recognition and Customer stories, was capitals with a 12 px arrow after them) ---- */
@media (max-width:900px){
  
  
  
  .rw #pr :is(.rg-src,.crt-src){font-family:var(--font-sans,'Geist',system-ui,sans-serif);font-weight:400;font-size:14px;line-height:18px;
    letter-spacing:0;text-transform:none;color:var(--dim)}
  
  
  .rw #pr :is(.rg-src,.crt-src) a{display:block;width:fit-content;padding:0;font:inherit;letter-spacing:0;text-transform:none;color:var(--ink);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
  .rw #pr :is(.rg-src,.crt-src) a svg{display:none}
}
/* a panel over a window (Kaspar, 3 Oct, 08:52, on Home: "the overlap is confusing. needs clearer separation"; he chose A):
   the window behind lies under a veil of the page colour at 55%, so it reads as further away; the panel stays crisp
   white with its shadow. Every stage where a white panel lies over a white window: Listen, Close the loop (both), Agents
   and the platform overview's agents, Migration (the history and the move). Not Migration's green team panel: a white
   card on green is apart already, and the veil would only wash the green out. */
@media (max-width:900px){
  .rw .lx-body:has(.lx-frag.front) .lx-frag:not(.front){isolation:isolate}
  .rw .lx-body:has(.lx-frag.front) .lx-frag:not(.front)::after{content:"";position:absolute;inset:0;z-index:9;
    background:rgba(250,249,247,.55);pointer-events:none;border-radius:inherit}
}

/* the customer quote cards (Listen, Close the loop, Migration), as Home's customer card: the portrait, 120 px, stands in
   the flow under the quote, at the card's foot, so the card is as tall as quote and portrait; the quote uses the
   card's width (the corner arrow sits in the padding) */
@media (max-width:900px){
  .rw .tc.cxc{min-height:0}
  .rw .tc.cxc .cxs,.rw .tc.cxc .cxv{min-height:0;height:auto}
  .rw .tc.cxc .cxv{display:flex;flex-direction:column}
  .rw .tc.cxc .cxq{padding-right:var(--s2)}
  .rw .tc.cxc .cxp{position:relative;inset:auto;bottom:auto;width:120px;height:auto;flex:none;margin-top:auto;margin-bottom:-2px}
  .rw .tc.cxc .l .cxp{align-self:flex-start}
  .rw .tc.cxc .r .cxp{align-self:flex-end}
  
  
}

/* ---- 1. words, not buttons (Kaspar, 3 Oct, 12:28: "no buttons. make it always the text, can be a sentence or just words
   with underlines for links."; v171: "Kill all framed chips and have it underlined text everywhere instead.") ----
   A row of choices is one line of words in the text size, underlined, the chosen one ink and the others dim (the
   industries of Customer stories), that scrolls sideways ("make the channel list horizonally scrollable") and fades at
   the right edge while more follows. */
@media (max-width:900px){
  .rw .lx-ft-l,.rw .agx-rl,.rw .ls-bar .ptabs,.rw .aq-win .wn-tabs,.rw .aq-bc .aq-drs,.rw .aq-bc .aq-seg{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:flex-start;gap:0 20px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--m) * -1);margin-right:calc(var(--m) * -1);padding:0 var(--m);scroll-padding-inline:var(--m);
    background:none;border:0;border-radius:0;box-shadow:none;height:auto;width:auto;max-width:none}
  .rw .lx-ft-l::-webkit-scrollbar,.rw .agx-rl::-webkit-scrollbar,.rw .ls-bar .ptabs::-webkit-scrollbar,.rw .aq-win .wn-tabs::-webkit-scrollbar,.rw .aq-bc .aq-drs::-webkit-scrollbar,.rw .aq-bc .aq-seg::-webkit-scrollbar{display:none}
  .rw .lx-ft-l,.rw .lx-ft.under .lx-ft-l{padding-bottom:20px}
  .rw .sv-more{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 48px);mask-image:linear-gradient(to left,transparent 0,#000 48px)}
  .rw .lx-ft-l .lx-ft-b,.rw .ls-bar .ptabs .pm,.rw .aq-win .wn-tabs .pm,.rw .aq-bc .aq-seg button{all:unset;flex:none;box-sizing:border-box;display:inline-block;position:relative;height:auto;padding:4px 0;margin:0;cursor:pointer;
    font-family:var(--font-sans,'Geist',system-ui,sans-serif);font-weight:400;font-size:var(--p-s);line-height:1.45;letter-spacing:0;
    text-transform:none;color:var(--dim);white-space:nowrap;background:none;border:0;border-radius:0;box-shadow:none;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:currentColor;transition:color .2s ease}
  .rw .lx-ft-l .lx-ft-b > *,.rw .ls-bar .ptabs .pm > *,.rw .aq-win .wn-tabs .pm > *,.rw .aq-bc .aq-seg button > *{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;white-space:inherit;display:inline}
  .rw .lx-ft-l .lx-ft-b[aria-pressed=true],.rw .lx-ft-l .lx-ft-b[aria-current=true],.rw .lx-ft-l .lx-ft-b[aria-selected=true],.rw .lx-ft-l .lx-ft-b.on,.rw .ls-bar .ptabs .pm[aria-pressed=true],.rw .ls-bar .ptabs .pm[aria-current=true],.rw .ls-bar .ptabs .pm[aria-selected=true],.rw .ls-bar .ptabs .pm.on,.rw .aq-win .wn-tabs .pm[aria-pressed=true],.rw .aq-win .wn-tabs .pm[aria-current=true],.rw .aq-win .wn-tabs .pm[aria-selected=true],.rw .aq-win .wn-tabs .pm.on,.rw .aq-bc .aq-seg button[aria-pressed=true],.rw .aq-bc .aq-seg button[aria-current=true],.rw .aq-bc .aq-seg button[aria-selected=true],.rw .aq-bc .aq-seg button.on{color:var(--ink);background:none}
  .rw .lx-ft-l .lx-ft-b[aria-pressed=true] > *,.rw .lx-ft-l .lx-ft-b[aria-current=true] > *,.rw .lx-ft-l .lx-ft-b[aria-selected=true] > *,.rw .lx-ft-l .lx-ft-b.on > *,.rw .lx-ft-l .lx-ft-b > *,.rw .ls-bar .ptabs .pm[aria-pressed=true] > *,.rw .ls-bar .ptabs .pm[aria-current=true] > *,.rw .ls-bar .ptabs .pm[aria-selected=true] > *,.rw .ls-bar .ptabs .pm.on > *,.rw .ls-bar .ptabs .pm > *,.rw .aq-win .wn-tabs .pm[aria-pressed=true] > *,.rw .aq-win .wn-tabs .pm[aria-current=true] > *,.rw .aq-win .wn-tabs .pm[aria-selected=true] > *,.rw .aq-win .wn-tabs .pm.on > *,.rw .aq-win .wn-tabs .pm > *,.rw .aq-bc .aq-seg button[aria-pressed=true] > *,.rw .aq-bc .aq-seg button[aria-current=true] > *,.rw .aq-bc .aq-seg button[aria-selected=true] > *,.rw .aq-bc .aq-seg button.on > *,.rw .aq-bc .aq-seg button > *{color:inherit}
  .rw .lx-ft-l .lx-ft-b:focus-visible,.rw .ls-bar .ptabs .pm:focus-visible,.rw .aq-win .wn-tabs .pm:focus-visible,.rw .aq-bc .aq-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  .rw .lx-ft-hl,.rw .lx-ft-l .lx-ft-b > .d,.rw .agx-rl li::before,.rw .agx-rl li::after{display:none}
  .rw .agx-rl li{display:contents}
}
@media (max-width:900px) and (any-hover:hover) and (min-width:901px){ .rw .lx-ft-l .lx-ft-b:hover,.rw .ls-bar .ptabs .pm:hover,.rw .aq-win .wn-tabs .pm:hover,.rw .aq-bc .aq-seg button:hover{color:var(--ink)} }
/* a tour's timer on a word (CI section 9, as Migration's sentence of three kinds of source; 3 Oct, evening): the underline
   fills in ink from left to right in 5.2 s, then the tour takes the word; a word carries no glow. The draft's band is a
   background across a button, which a word does not have (measured at 393: Analyse's 8,000 changed by itself, nothing showed). */
@keyframes svWordFill{from{background-size:0% 1px,100% 1px}to{background-size:100% 1px,100% 1px}}
@media (max-width:900px){
  .rw .lx-ft-l .lx-ft-b.lx-fill,.rw .ls-bar .ptabs .pm.lx-fill,.rw .aq-win .wn-tabs .pm.lx-fill,.rw .aq-bc .aq-seg button.lx-fill{text-decoration-color:transparent;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;background-position:0 calc(4px + 1.1em),0 calc(4px + 1.1em);background-size:0% 1px,100% 1px;animation:svWordFill 5.2s linear forwards!important}
}

/* A link is an underlined word in the text size (Kaspar: '"text +" are horrible on mobile.'): the explainers, the link
   under a stage, the way back to Listen, the sibling links; no capitals, no plus, no arrow, no frame. */
@media (max-width:900px){
  .rw .lx-more,.rw .lx-sib .n,.rw .ls-back{all:unset;box-sizing:border-box;display:inline;cursor:pointer;
    font-family:var(--font-sans,'Geist',system-ui,sans-serif);font-weight:400;font-size:var(--p-s);line-height:1.45;letter-spacing:0;text-transform:none;
    color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:currentColor}
  .rw .lx-more svg,.rw .lx-sib .n svg{display:none}
  .rw .lx-more:focus-visible,.rw .ls-back:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  .rw .lx-sib .cur .n{color:var(--dim);text-decoration:none;cursor:default}
  .rw .lx-sib .n{display:block;margin-top:8px}
  .rw .ls-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;height:auto}
  .rw .ls-back span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
  
  
  /* a link under a stage has air ("agent is glued to the graph. give it some air."): M under the stage, both the
     section's link and the link that goes with the chosen tab */
  .rw .lx-ft > .lx-ft-m{margin-top:var(--s4)}
}

/* ---- 3. cards: one height per row, and that height as low as the tallest card's words and picture (Kaspar, 12:28:
   "cards way too high. Make sure all cards are less high on mobile."; 14:15: "make cards the same hight") ---- the cards
   of a sideways row share the height of the tallest, and every card drops its minimum height (the pages set 440 or 520,
   some by id, so this goes by id too); the connector tiles show two of their three rows, as on Home; a picture stands
   24 px under the card's text. */
@media (max-width:900px){
  .rw [data-sv-row]{align-items:stretch}
  .rw [data-sv-row] > *{min-height:0;height:auto}
  .rw [data-sv-row] .tc.b2 .bp:has(.tws){height:190px}
  .rw [data-sv-row] .tc.b2 .bp .tws{top:-47px;margin-top:6.7%}
  .rw [data-sv-row] .tc .kb + :is(ul,ol,div){margin-top:24px}
}
/* the rows of tiles in a card (the survey tools on Listen, the channels on Agents) move by themselves on a touch screen
   at half their hover speed, as Home's connector rows do (14:15: "animate card."); on desktop they move under the mouse */
@media (hover:none),(max-width:900px){
  .rw .b2 .tws .trk{animation-play-state:running;animation-duration:60s}
  .rw .b2 .tws .r1 .trk{animation-duration:56s}
  .rw .b2 .tws .r3 .trk{animation-duration:68s}
  .rw .b2 .tws .r4 .trk{animation-duration:64s}
  .rw .b2 .tws .r5 .trk{animation-duration:58s}
  
  
}

@media (max-width:900px){
  .rw .lx-body .lx-frag:not(.front)::after{transition:opacity .45s ease}
  .rw .lx-body.sv-lit .lx-frag:not(.front)::after,.rw .ct-st.sv-lit .lx-frag:not(.front)::after{opacity:0}
}

/* the cards that share a row on desktop share a row you swipe on a phone (Kaspar, 3 Oct, 09:19: "all the cards below the
   hero less high and swipe-able for the ones that are currently on the same hight in the layout"): the browser's own
   scroll, snap to each card's start, one card a swipe, no dots, no arrows; the next card shows at the edge; the cards
   drop their phone minimum height, so a row is as tall as its tallest card */
@media (max-width:900px){
  .rw .ls2 .ls-cards{display:flex;align-items:stretch;gap:var(--s2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);scroll-padding-inline:var(--m);scrollbar-width:none}
  .rw .ls2 .ls-cards::-webkit-scrollbar{display:none}
  .rw .ls2 .ls-cards > *{flex:0 0 calc(100% - 32px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .rw .ls2 .ls-cards::after{content:"";flex:0 0 4px;order:99}   /* room for the last card to reach the margin; order 99: the cards carry an order */
  /* while a mouse drags a row (the script) the snap waits, and nothing is selected */
  .rw .ls2 .ls-cards.sv-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
  .rw .ls2 .ls-cards.sv-drag *{cursor:grabbing}
  .rw .ls2 .ls-cards > *{min-height:0}
}
@media (max-width:900px){
  .rw .ls1 .lx-ft{--lx-hm:520px}
  .rw .ls-s .ls-list.cpx{left:32px;top:0;right:0;width:auto;height:470px;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
  .rw .ls-s .ls-list.cpx::-webkit-scrollbar{display:none}
  .rw .ls-s .ls-list.cpx::after{display:none}
  .rw .ls-s .ls-list .cpx-main{flex:none;width:600px;padding:14px 18px 16px}
  .rw .ls-s .ls-list .cpx-main > :not(.cpx-hd){opacity:.45;transition:opacity .45s ease}
  .rw .ls1 .lx-body.sv-lit .ls-list .cpx-main > *{opacity:1}
  .rw .ls-s .ls-list .cpx-th{display:grid}
  .rw .ls-s .ls-list .cpx-tr{grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 86px 92px 84px;grid-template-areas:none;height:43px;padding:0 12px;row-gap:0}
  .rw .ls-s .ls-list .cpx-tr > *{grid-area:auto}
  .rw .ls-s .ls-list .cpx-tr > .cpx-num{display:block}
  .rw .ls-s .ls-list .cpx-tr > .cpx-bar{display:flex}
  .rw .ls-s .ls-ph,.rw .ls-s .ls-rules{top:auto;bottom:0;left:0;width:calc(100% - 80px)}
}

@media (max-width:900px){
  .rw .ls2 .ls-cards .ls-logos[style]{grid-template-columns:repeat(5,32px)!important;row-gap:16px;padding-top:20px}
  .rw .ls2 .ls-cards .ls-logos li,.rw .ls2 .ls-cards .ls-logos svg{width:32px;height:32px}
  .rw .ls2 .ls-cards .ls-feed .fr:nth-of-type(5){display:none}
  .rw .ls2 .ls-cards .ls-feed ~ .ls-logos,.rw .ls2 .ls-cards .ls-feed ~ .ls-chan{display:none}
  .rw .ls2 .ls-cards[data-sv-row] .tc.b2 .bp:has(.tws){height:240px}
}
/* the two panels (WhatsApp and IVR surveys, the explainers on Listen, 3 Oct, 20:38) are on phones too (Kaspar, 4 Oct,
   06:36: "bring back panels on mobile."): their links sit S under the stage at 900 and below, as on every page with
   feature tabs (section 8); the rule of 3 Oct, 20:51 that hid them is gone */