:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}[hidden]:not([hidden=until-found i]){display:none!important}
/* 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} }
@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')}
:root{color-scheme:light}
body{font-size:14px}
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{
  --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{--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 ul{margin:0}
.rw .wrap{max-width:1432px;margin:0 auto;padding-inline:var(--m)}
.rw .mono{font-family:var(--mono);font-weight:300;font-size:12px;line-height:16px;letter-spacing:.02em;
          text-transform:uppercase}
.rw section{position:relative}
.rw .sp{display:block;position:relative}
.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 .t1{font-weight:800;font-size:12px;line-height:15px;letter-spacing:-.025em}




.rw .lf .ll{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}

.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}



.rw .lf .c1{padding-top:32px}













.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 .lg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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}}

.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}}














.cx-chip{font:500 15px/20px 'Geist',system-ui,sans-serif;color:#110E0A;background:#FFF;border:1px solid #CDC8C2;
  border-radius:var(--r-m);padding:10px 16px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,opacity .45s ease}
@media (any-hover:hover) and (min-width:901px){.cx-chip:hover{background:#FFFFFF;border-color:#6E6963}}
.cx-chip:focus-visible{outline:2px solid #110E0A;outline-offset:2px}













@media (max-width:640px){



.cx-chip{font-size:14px;padding:9px 13px}}
@media (prefers-reduced-motion: reduce){
.cx-chip{transition: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;--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}

/* ---------- raster ---------- */
.sv-wrap{max-width:1432px;margin:0 auto;padding-inline:var(--m)}
.sv-g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.sv-g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.sv-span-2{grid-column:span 2}
.sv-sec{padding-top:var(--s10)}  /* 2M after the page head */

/* ---------- type ---------- */
.sv-display{font-weight:800;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em}
.sv-title{font-weight:800;font-size:var(--t-title);line-height:1.1;letter-spacing:-.03em}
.sv-card-title{font-weight:800;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}

.sv-lead{font-weight:500;font-size:var(--p-l);line-height:1.4;letter-spacing:-.015em}


.sv-label{font-family:var(--font-mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase}
.sv-label .sv-brand,.sv-btn .sv-brand{text-transform:none}



/* ---------- button ---------- */
.sv-btns{display:flex;flex-wrap:wrap;gap:8px}
.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}



/* ---------- page head ---------- */
.sv-head{padding-top:var(--s10)}                 /* L under the nav */
.sv-head .sv-g12{align-items:end}
.sv-head h1{grid-column:1 / 8}
.sv-head .sv-lead{grid-column:8 / 13}
@media (max-width:900px){
  .sv-head .sv-g12{grid-template-columns:minmax(0,1fr)}
  .sv-head h1,.sv-head .sv-lead{grid-column:1 / -1}
  .sv-head .sv-lead{margin-top:24px}
}











.sv-card__arrow{position:absolute;top:var(--s2);right:var(--s2);width:24px;height:24px;opacity:0;transform:translate(-10px,10px);
                transition:opacity .2s ease,transform .2s ease;pointer-events:none}

@media (hover:none),(max-width:900px){.sv-card__arrow{opacity:1;transform:none}}
@media (max-width:900px){
  .sv-g6{grid-template-columns:minmax(0,1fr)}
  .sv-span-2{grid-column:1 / -1}
  
}






































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


/* ---------- CTA block ---------- */
.sv-cta{align-items:end}
.sv-cta__line{grid-column:1 / 8}
.sv-cta .sv-btns{grid-column:9 / 13;justify-content:flex-end;margin-top:24px}
@media (max-width:900px){
  .sv-cta{grid-template-columns:minmax(0,1fr)}
  .sv-cta__line,.sv-cta .sv-btns{grid-column:1 / -1}
  .sv-cta .sv-btns{justify-content:flex-start;margin-top:var(--s2)}
}













/* ===== Customer stories page. Signature element: the black and white portraits.
   Only kit tokens and the eight type styles; no new colours, sizes or spacing. ===== */

/* page rhythm */
.cu-names{padding-top:calc(var(--s4) * 2)}
.cu-stories{padding-top:calc(var(--s4) * 2)}


/* --- names row: the customers' marks, one slow line --- */
.cu-row{overflow:hidden;height:44px}
.cu-track{display:flex;align-items:center;gap:72px;width:max-content;height:44px;animation:cu-run 60s linear infinite}
@media (any-hover:hover) and (min-width:901px){.cu-row:hover .cu-track{animation-play-state:paused}}
.cu-track svg,.cu-track img{display:block;flex:none;fill:currentColor;color:var(--ink)}
@keyframes cu-run{to{transform:translateX(-50%)}}

/* --- the story grid --- */
.cu-grid{grid-auto-flow:row dense}
.cu-grid > *{transition:opacity .2s ease}
.cu-grid > [hidden]{display:none}
.cs{text-decoration:none}













































































.rv{grid-area:q}







/* the carousel */
.rv{justify-content:space-between;padding:var(--s2)}

.rv-slide{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden}
.rv-slide.is-on{visibility:visible}
.rv-q{font-weight:800;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em}
.rv-q .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .45s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.rv-slide.is-on .rv-q .w{opacity:1;transform:none}



.rv-pip{flex:1;height:20px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.rv-pip span{position:relative;display:block;width:100%;height:2px;background:var(--mustard-hover);overflow:hidden}
.rv-pip span::after{content:'';position:absolute;inset:0;width:0;background:var(--on-colour)}
.rv-pip[aria-selected="true"] span::after{width:100%}
.rv.is-playing .rv-pip[aria-selected="true"] span::after{animation:rv-fill var(--rv-t,7s) linear forwards}
@keyframes rv-fill{from{width:0}to{width:100%}}
.rv-pip:focus-visible{outline:2px solid var(--on-colour);outline-offset:2px}
@media (max-width:900px){
  
  .rv{min-height:440px}
  
}
@media (prefers-reduced-motion:reduce){.rv-q .w{transition:none}}














.rw-row{overflow:hidden}
.rw-trk{display:flex;gap:var(--g);width:max-content;will-change:transform}
.js .rw-trk{animation:none}










@media (prefers-reduced-motion:reduce){.rw-trk{animation:none}.rw-row{overflow-x:auto}}





.rv2-trk{display:flex;flex-direction:column;gap:var(--s2);padding-block:var(--s2);animation:rv2-up 60s linear infinite}






@keyframes rv2-up{to{transform:translateY(calc(-50% - var(--s2) / 2))}}

@media (prefers-reduced-motion:reduce){.rv2-trk{animation:none}}


/* --- the reviews: one at a time, large and still; the reader picks by name, or lets them turn every 8 s with a pause control --- */
.rx{padding:var(--s2);justify-content:space-between}

.rx-slide{grid-area:1 / 1}
.rx-slide[hidden]{display:block;visibility:hidden}

.rx{min-height:640px}






.rx-tab{position:relative;display:flex;align-items:center;min-height:44px;padding:0;border:0;border-top:1px solid var(--on-colour);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rx-bar{position:absolute;left:0;top:-2px;height:3px;width:0;background:var(--on-colour)}
.rx-tab[aria-selected="true"] .rx-bar{width:100%}
.rx.is-playing .rx-tab[aria-selected="true"] .rx-bar{animation:rx-fill var(--rx-t,8s) linear forwards}
@keyframes rx-fill{from{width:0}to{width:100%}}
@media (any-hover:hover) and (min-width:901px){.rx-tab:hover .sv-label{text-decoration:underline;text-underline-offset:3px}}
.rx-tab:focus-visible,.rx-play:focus-visible{outline:2px solid var(--on-colour);outline-offset:3px}
.rx-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--on-colour);border-radius:4px;background:none;color:inherit;cursor:pointer}


@media (max-width:900px){.rx-play{align-self:flex-start}.rx{min-height:0}}





















/* --- how users rate: one report card. The aggregate on top, four short lines from the reviewers under it --- */
.rp{padding:var(--s2)}












@media (min-width:901px) and (max-width:1180px){.rp-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}









/* reviewer lines as a small feed beside each other: every 4 s a new one arrives on the left, the others step right, the last leaves */
.rp-feed{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:var(--s4);overflow:hidden}








@media (max-width:900px){.rp-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* numbers left, reviewer lines right, in one card */
.rp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--g);align-items:stretch}

.rp .rp-feed{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;row-gap:var(--s2);margin-top:0;align-content:start}

@media (max-width:560px){.rp .rp-feed{grid-template-columns:minmax(0,1fr)}.rp-feed > li:nth-child(n+3):not(.is-leaving){display:none}}


/* ratings card, final: three figures left with even spacing; right a vertical feed of four rows,
   each row the line (body size, readable) and who said it in a fixed column; rows share the height of the figures */
.rp{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

.rp .rp-feed{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;margin:0;align-content:start}
.rp .rp-feed > li:nth-child(n+4):not(.is-leaving){display:none}


.rp .rp-feed{border-bottom:1px solid var(--line)}






@media (max-width:900px){.rp{grid-template-columns:minmax(0,1fr)}.rp .rp-feed{margin-top:var(--s4)}}


















/* motion: one entrance, then only what the reader triggers */
.js .cu-in-view{opacity:0}
.js .cu-in-view.is-in{opacity:1;transition:opacity .45s ease}


@media (prefers-reduced-motion:reduce){
  .cu-track{animation:none}
  .cu-row{overflow-x:auto}
  .js .cu-in-view{opacity:1;transform:none}
  
}
.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}
/* ===== Customer stories (2 Oct, later): six cards of one size, two rows of three; bigger logos; arrows; ratings ===== */
/* the cards: a white tile 440 tall, the title and the industry under it */
#pr #cu-grid{row-gap:var(--s2)}
#pr .cs6{display:block;color:inherit;text-decoration:none}
#pr .cs6-tile{position:relative;height:440px;background:var(--ground);border-radius:8px;overflow:hidden;transition:box-shadow .2s ease}
#pr a.cs6:focus-visible .cs6-tile{box-shadow:0 0 0 1px #E3E2DF,0 10px 24px -14px rgba(17,14,10,.20)}@media (any-hover:hover) and (min-width:901px){#pr a.cs6:hover .cs6-tile{box-shadow:0 0 0 1px #E3E2DF,0 10px 24px -14px rgba(17,14,10,.20)}}
#pr a.cs6:focus-visible{outline:none}
#pr a.cs6:focus-visible .cs6-tile{outline:2px solid var(--ink);outline-offset:2px}
#pr .cs6-t{margin:20px 0 0;text-wrap:balance}
#pr .cs6-ind{margin:8px 0 0;color:var(--dim)}
/* the logos: one size per brand on every card, balanced by area; in the people's tiles one 64 px row at the top */
#pr .cs6-logo{position:absolute;z-index:1;display:flex;align-items:center;color:var(--ink)}
#pr .cs6-logo svg,#pr .cs6-logo img{display:block;height:var(--lh);width:auto;max-width:100%;object-fit:contain;object-position:left center;fill:currentColor}
/* in a narrow tile (901 to about 1000 px) a wide logo gives way to the corner arrow: it shrinks, it never runs under it */
#pr .cs6--p .cs6-logo{top:var(--s2);left:var(--s2);right:44px;height:64px}

/* the person stands on the tile's bottom edge, under the logo row, looking toward the middle of the page */
#pr .cs6-por{position:absolute;left:0;right:0;bottom:0;top:calc(var(--s2) + 64px + 16px)}
#pr .cs6-por img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1)}
#pr .pf-l .cs6-por img{object-position:left bottom}
#pr .pf-l .cs6-por img[data-face=l]{transform:scaleX(-1);object-position:right bottom}
#pr .pf-r .cs6-por img{object-position:right bottom}
#pr .pf-r .cs6-por img[data-face=r]{transform:scaleX(-1);object-position:left bottom}
/* Frans's photo is cut at one shoulder: mirrored, he stands with that side on the tile's left edge */
#pr .pf-c .cs6-por img.mir{transform:scaleX(-1);object-position:right bottom}
/* the corner arrow 12 px from the top and the right, on the tiles and on the ratings card (S20) */
#pr .cs6-tile > .sv-card__arrow{position:absolute;top:12px;right:12px;z-index:2;width:24px;height:24px}
#pr a.cs6:focus-visible .sv-card__arrow.sv-card__arrow{color:var(--ink);animation:cx-ramp .5s ease-in-out forwards}@media (any-hover:hover) and (min-width:901px){#pr a.cs6:hover .sv-card__arrow.sv-card__arrow{color:var(--ink);animation:cx-ramp .5s ease-in-out forwards}}
@media (prefers-reduced-motion:reduce){
  #pr a.cs6:focus-visible .sv-card__arrow.sv-card__arrow{animation:none}@media (any-hover:hover) and (min-width:901px){#pr a.cs6:hover .sv-card__arrow.sv-card__arrow{animation:none}}
  #pr .cs6-tile{transition:none}
}
@media (max-width:560px){ #pr .cs6-tile{height:400px} }

/* beside the scores, the list's lines stop 12 px short of the card's padding, clear of the corner arrow */
@media (min-width:901px){ #pr .rp .rp-feed{margin-right:12px} }
/* 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}
.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}}
.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}
/* Shape: radius by size; tabs, back links and tiles are small, so 4 */
.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 .sv-opt{transition:background-color .2s ease,box-shadow .2s ease}

@media (any-hover:hover) and (min-width:901px){.rw .sr: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 .sv-brand,.rw #pr .mono .bc,.rw #pr .sv-label .sv-brand{text-transform:none!important}


/* Buttons: one height, 32 (S14); a button fused to an input keeps the field's height */
.rw .sv-btn{height:32px!important}




.rw #pr .rp-feed blockquote{line-height:18px!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 .sv-card__arrow,html .sv-card__arrow.sv-card__arrow{opacity:1;transform:none;transition:color .2s ease;color:#CDC8C2}
/* ===== sandsiv+ Customer stories (2 Oct 2026): the industries as the lead of the page head, the six stories, the ratings ===== */

/* one variation at a time (data-csn on #pr). The menu's strip sits M under the page head and M over the cards (CI: a thin
   strip in the head's 2M gap); in 1 and 3 the cards follow the head at 2M */
#pr .cu-stories{padding-top:var(--s4)}
#pr[data-csn="1"] #csn-root{padding-top:var(--s4)}
#pr .csn{display:none}
#pr #csn-root .csn{margin-bottom:var(--s4)}
#pr[data-csn="1"] .csn1{display:block}

/* ---------- 1. Text: the industries as the page head's lead, right of the title as on the home hero; each one underlined,
   the chosen one in ink, the others dim ---------- */
#pr .sv-head h1,#pr .sv-head .csn1{align-self:last baseline}
#pr .sv-head .csn1{margin:0;text-wrap:balance}
#pr .csn1 button{all:unset;cursor:pointer;margin-right:.3em;color:var(--dim);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:currentColor;transition:color .2s ease}
#pr .csn1 button:last-child{margin-right:0}
#pr .csn1 button[aria-pressed=true]{color:var(--ink)}@media (any-hover:hover) and (min-width:901px){#pr .csn1 button:hover{color:var(--ink)}}
#pr .csn1 button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
@media (max-width:900px){
  #pr .sv-head h1,#pr .sv-head .csn1{align-self:auto}
  #pr .sv-head .csn1{margin-top:24px}
}

/* ---------- one story left after a filter (1 and 2): the card runs all six columns and carries its text ----------
   A portrait card keeps the person in the left half, looking into the card, and the logo leads the text in the right half
   (from card column 4): the story's lead at the top, its figure at the foot. A logo card is built the same way: its logo,
   half as large again, stands centred in the left half where the person would be, and the right half holds the quote from
   its live card with the attribution under it, and the figure at the foot. Only published material: KSW's lead and
   figure; the live card quotes and figures of Enel and Swiss Life. At 560 and below the text follows the title under the
   tile and the logo goes back to its own size. */
#pr .cs6{position:relative}
#pr .cs6-more{display:none}
#pr #cu-grid > .cs6.is-solo{grid-column:1 / -1}
#pr .cs6.is-solo .cs6-more{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);position:absolute;z-index:1;
  top:var(--s2);height:calc(440px - 2 * var(--s2));pointer-events:none}
#pr .cs6--p.is-solo .cs6-more{left:calc(50% + var(--g) / 2);right:var(--s2);top:calc(var(--s2) + 80px);height:calc(440px - 2 * var(--s2) - 80px)}

#pr .cs6--p.is-solo .cs6-por{top:var(--s2);right:calc(50% - var(--g) / 2)}
#pr .cs6--p.is-solo .cs6-logo{left:calc(50% + var(--g) / 2)}


#pr .cs6-more p{margin:0}
#pr .cs6-p{font-size:var(--p-s);line-height:1.45;color:var(--ink);max-width:32em}
#pr .cs6-fig b{display:block;font-weight:800;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;white-space:nowrap}
#pr .cs6-fig .sv-label{display:block;margin-top:12px;max-width:288px;color:var(--dim)}
#pr .cs6-more .cs6-by{margin-top:16px;color:var(--dim)}
@media (max-width:560px){
  #pr .cs6.is-solo .cs6-more,#pr .cs6--p.is-solo .cs6-more{position:static;height:auto;margin-top:var(--s2);justify-content:flex-start}
  #pr .cs6--p.is-solo .cs6-por{top:calc(var(--s2) + 80px);right:0}
  #pr .cs6--p.is-solo .cs6-logo{left:var(--s2)}
  
  
}

/* ---------- the head offices: the corner (Salt: the round head) in the middle of the picture, the building fading to white
   at both sides (Kaspar, 2 Oct: "the head of the building more central", "the corner of the building to middle of the
   picture", then "dont cut the building off. fade to white.", "also fades left and right", "no fade over enel logo").
   The building keeps its size (as wide as the picture box, or as tall where the box is the narrower shape), stands on the
   box's foot, and its --hq-c point sits on the box's middle. Each picture fades in from transparent at --hq-l0 to full at
   --hq-l1 and out from --hq-r0 to transparent at --hq-r1 (per cent of the picture's width). The transparent ends reach past
   wherever the box's side can fall, so no side is ever cut hard; no fade runs over lettering on a building (Enel's "enel",
   Salt's signs, the Swiss Life sign). Swiss Life's side wing fades where Kaspar's red line ran down. Values: build_nav.py.
   v13 (Kaspar: "fade less strong on the building images."): the bands are narrower and the ramp is eased, so the building
   is at 60 % a quarter of the way in and at 90 % by six tenths; it still reaches transparent at the very end. */
#pr .cs6.cs6--hq .cs6-por{container-type:size;overflow:hidden}
#pr .cs6.cs6--hq .cs6-por img{position:absolute;bottom:0;left:50%;width:min(100cqw, 100cqh * var(--hq-ar));height:auto;max-width:none;
  object-fit:fill;transform:translateX(calc(-1 * var(--hq-c)));
  --hq-mask:linear-gradient(to right,transparent var(--hq-l0),rgba(0,0,0,.6) calc(var(--hq-l0) + (var(--hq-l1) - var(--hq-l0)) * .25),rgba(0,0,0,.9) calc(var(--hq-l0) + (var(--hq-l1) - var(--hq-l0)) * .6),#000 var(--hq-l1),#000 var(--hq-r0),rgba(0,0,0,.9) calc(var(--hq-r1) - (var(--hq-r1) - var(--hq-r0)) * .6),rgba(0,0,0,.6) calc(var(--hq-r1) - (var(--hq-r1) - var(--hq-r0)) * .25),transparent var(--hq-r1));
  -webkit-mask-image:var(--hq-mask);mask-image:var(--hq-mask)}

@media (prefers-reduced-motion:reduce){
  #pr .csn1 button{transition:none}
}
/* one story left: the building's box ends a gutter before the text, so the building never runs into the quote */
@media (min-width:561px){#pr .cs6.cs6--hq.is-solo .cs6-por{right:calc(50% + var(--g) / 2)}}

/* ===== the ratings, "How users rate sandsiv+." (2 Oct 2026, the figures row): the three figures, three of the six
   reviews with an arrow to the next one, the source S under; no card holds lines, the title keeps M to its content. */
#pr .cu-ratings .crt{display:none}
#pr[data-crt="1"] .crt1{display:block}
#pr .crt .crt-t{max-width:calc((100% - 11 * var(--g)) * 7 / 12 + 6 * var(--g));margin:0 0 var(--s4);text-wrap:balance}
#pr .crt blockquote{margin:0}

/* a figure: display, 12, its caption in label dim (max 288) */
#pr .crt-fig{margin:0}
#pr .crt-fig b{display:block;font-weight:800;font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;white-space:nowrap}
#pr .crt-fig > .sv-label{display:block;margin-top:12px;max-width:288px;color:var(--dim)}

/* who said it: name in label ink, 2, role in label dim; the score in label dim on the right */
#pr .crt-who{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0}
#pr .crt-nr{display:flex;flex-direction:column;gap:2px;min-width:0}
#pr .crt-n{color:var(--ink)}
#pr .crt-r,#pr .crt-s{color:var(--dim)}
#pr .crt-s{flex:none;white-space:nowrap}

/* the source line, S under (was 18; Kaspar: "give this more space."); the report's name opens it */
#pr .crt-src{margin:var(--s2) 0 0;color:var(--dim)}
#pr .crt-src a{color:inherit;text-decoration:none;text-underline-offset:3px;transition:color .2s ease}
#pr .crt-src a:focus-visible{color:var(--ink);text-decoration:underline}@media (any-hover:hover) and (min-width:901px){#pr .crt-src a:hover{color:var(--ink);text-decoration:underline}}
#pr .crt-src a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
#pr .crt-src svg{display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1.5px}

/* the next arrow: a 32 x 32 secondary button (stone, line on hover) with the 12 px arrow; it moves the reviews on by one */
#pr .crt-next{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:4px;background:var(--stone);color:var(--ink);cursor:pointer;transition:background-color .2s ease}
@media (any-hover:hover) and (min-width:901px){#pr .crt-next:hover{background:var(--line)}}
#pr .crt-next:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#pr .crt-next svg{display:block;width:12px;height:12px}
/* under the reviews: the source on the left (S under), the arrow on the right edge, tops aligned */
#pr .crt-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--g);margin-top:var(--s2)}
#pr .crt-foot .crt-src{margin:0}
#pr .crt-rv[hidden]{display:none}

/* ---------- 1. Figures row: the three figures across, M, three review cards (2 + 2 + 2), the source ---------- */
#pr .crt1 .crt-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}
#pr .crt1-rv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:var(--s4) 0 0;padding:0;list-style:none}
#pr .crt-rv{box-sizing:border-box;display:flex;flex-direction:column;height:var(--crt-h,auto);margin:0;background:var(--ground);border-radius:8px;padding:var(--s2)}
#pr .crt-rv blockquote{font-size:var(--p-s);line-height:1.45;color:var(--ink)}
#pr .crt-rv .crt-who{margin-top:auto;padding-top:16px}

@media (max-width:900px){
  #pr .crt .crt-t{max-width:none}
  #pr .crt1-rv{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){#pr .crt-src a,#pr .crt-next{transition: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}}
/* 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)} }

.rw .sv-brand{text-transform:none}
/* S05: the logo strip M under the stories and M over the ratings */
.rw section.cu-names{padding-top:var(--s4)}
.rw section.cu-ratings{padding-top:var(--s4)}
/* V01: only a card that is a link lifts */
/* 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 :is(.rg-src,.crt-src) .sv-dot{display:none}
  .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. */


/* 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) */


/* ---- 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{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 .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 .aq-bc .aq-seg button > *{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;white-space:inherit;display:inline}
  .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 .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 .aq-bc .aq-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  .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 .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). */



/* 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 .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 .ls-back:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  
  
  .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}
  
  
}

/* ---- 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}
  
  
  
}
/* 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 */



/* Home Mobile Study, the subpages (Kaspar, 3 Oct, 10:54: "customer cards horizontal swipes. customer quotes below also
   horizonal swipes as well."). At 900 and below, where the cards stack today:
   1. the story cards are one sideways row: all six, or the industry's three; a filter that leaves one story (Healthcare,
      Utilities, Insurance) shows that card across the row's width with its text, as today; a filter takes the row back to
      its first card;
   2. the reviews are one sideways row of all six (today three, with the arrow to the next one); every card keeps the
      height of the longest review, as today; the arrow goes, since every review is in the row. */
@media (max-width:900px){
  .rw #cu-grid{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 #cu-grid::-webkit-scrollbar{display:none}
  .rw #cu-grid > .cs6{flex:0 0 calc(100% - 32px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .rw #cu-grid::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 #cu-grid.sv-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
  .rw #cu-grid.sv-drag *{cursor:grabbing}
  #pr #cu-grid{row-gap:0}
  .rw #cu-grid > .cs6.is-solo{flex-basis:100%}
  .rw #cu-grid:has(> .cs6.is-solo)::after{display:none}
  #pr .crt1-rv{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}
  #pr .crt1-rv::-webkit-scrollbar{display:none}
  .rw .crt1-rv > .crt-rv{flex:0 0 calc(100% - 32px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .rw .crt1-rv::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 .crt1-rv.sv-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
  .rw .crt1-rv.sv-drag *{cursor:grabbing}
  .rw .crt1-rv{margin-top:var(--s4)}
  #pr .crt-next{display:none}
  /* 3. the three figures next to each other (Kaspar, 3 Oct, 11:25: "is it possible to have them next to each other?"):
        three equal columns with G between them, as on desktop; the figures share one size, as large as the widest
        (8.9 / 10, 3.07 em) allows in its column and never above today's; the labels wrap in their column */
  #pr .crt1 .crt-figs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:0;container-type:inline-size}
  #pr .crt1 .crt-fig b{font-size:min(var(--t-xl),calc((100cqw - 2 * var(--g)) / 3 / 3.1))}
}
@media (max-width:900px){
  #pr .crt1-rv > .crt-rv{height:auto}   /* the draft's #pr .crt-rv height (its measure, made for three at a time): in the row the cards share the tallest one's height by stretching (14:15 "make cards the same hight") */
}

@media (max-width:900px){
  .rw #pr .cs6-tile{height:280px}
}
/* Kaspar, 16:37: "the titles of the stories are cut off. is there a way to have the titles in the cards? or another
   solution?" On a phone the white card holds the whole story, as the CI's story card: the logo row at the top (64 px,
   S from the edges), the title and the industry under it, the person or the building standing on the card's bottom edge
   (160 px), the corner arrow 12 px from the top and the right. Before, the tile held the logo and the person and the
   title stood under it on the page, so the title of the next card was cut by the screen's edge and on the first screen
   the cards showed no title at all. The cards of the row share one height; the picture keeps to the foot. */
@media (max-width:900px){
  .rw #pr #cu-grid > .cs6{display:flex;flex-direction:column;position:relative;background:var(--ground);border-radius:8px;overflow:hidden}
  .rw #cu-grid > .cs6 .cs6-tile{display:contents}
  .rw #pr #cu-grid > .cs6 .cs6-logo{position:relative;inset:auto;order:0;flex:none;height:64px;margin:var(--s2) 44px 0 var(--s2)}
  .rw #pr #cu-grid > .cs6 .cs6-t{order:1;margin:16px var(--s2) 0}
  .rw #pr #cu-grid > .cs6 .cs6-ind{order:2;margin:8px var(--s2) 0}
  .rw #pr #cu-grid > .cs6 .cs6-more{order:3;margin:var(--s2) var(--s2) 0}
  .rw #pr #cu-grid > .cs6 .cs6-por{order:4;position:relative;inset:auto;flex:none;height:160px;margin-top:auto;padding-top:0}
  .rw #cu-grid > .cs6::after{content:"";order:3;flex:none;height:24px}
  .rw #pr #cu-grid > a.cs6:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}