: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}img{max-width:100%}[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} } [hidden]{display:none!important} /* Geist Black, SIL Open Font License 1.1 */ @font-face{font-family:'Geist';font-weight:900;font-style:normal;font-display:swap;src:url(/site/a/59cb5148c7192a0a.woff2) format('woff2')} /* Geist Regular, SIL Open Font License 1.1 */ @font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;src:url(/site/a/7c2537cd074f2c5a.woff2) format('woff2')} /* Sometype Mono Medium, SIL Open Font License 1.1 */ @font-face{font-family:'Sometype Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/site/a/62447ad5540e963e.woff2) format('woff2')} :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; } /* boxes at 8 px (Kaspar, 27 Sep: "radius 8 it is", chosen on the page "sandsiv+ Radius Test"); the product window, the connector tiles, the mode and ask buttons and the footer frame follow (see each rule) */ .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 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-contact-centre{--full:#7F3125;--on:#FFFFFF} .rw .t-crm{--full:#427E6C;--on:#FFFFFF} .rw .t-data{--full:#3F627E;--on:#FFFFFF} .rw .t-marketing{--full:#C38612;--on:#FFFFFF} .rw .t-collaboration{--full:#6E6963;--on:#FFFFFF} .rw .t-mcp{--full:#6E6963;--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{margin-top:var(--s2);align-self:flex-start} .rw .tc .tl-link::after{content:'';position:absolute;inset:0;border-radius:var(--r-l)} .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 .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 .vl{list-style:none;margin:0;padding:0} .rw .nv .vl a{display:block;padding:8px 12px;margin:0 -12px;border-radius:var(--r-m);font-size:15px;line-height:21px; text-decoration:none;color:var(--ink)} @media (any-hover:hover) and (min-width:901px){.rw .nv .vl a:hover{background:var(--ground)}} .rw .nv-C .dp.wide{width:640px;padding:12px} .rw .nv-C .two{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px} .rw .nv-C .two > div{padding:10px 12px} .rw .nv-C .inline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .rw .nv-C .inline a{display:inline-block;padding:5px 10px;border-radius:var(--r-m);background:var(--ground);font-size:13px; color:var(--ink);text-decoration:none} @media (any-hover:hover) and (min-width:901px){.rw .nv-C .inline a:hover{background:var(--stone)}} .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 .start a{padding:14px 14px;margin:0 -14px 6px} .rw .nv .start a.demo{background:#B6D9B9} .rw .nv .start a.trial{background:#E3E2DF} @media (any-hover:hover) and (min-width:901px){.rw .nv .start a.demo:hover{background:#A5CFA9}} @media (any-hover:hover) and (min-width:901px){.rw .nv .start a.trial:hover{background:#CDC8C2}} .rw .nv .start span{color:rgba(17,14,10,.7)} .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} .rw > .nv .gsp .two{grid-template-columns:minmax(0,1fr)} .rw > .nv .gsp .two > div{padding:0} .rw > .nv .gsp .start a{margin:0 0 8px;padding:16px} .rw > .nv .gsp .start li:last-child a{margin-bottom:0} .rw > .nv [data-k=cust] .two > div:first-child,.rw > .nv [data-k=blog] .two > div:first-child{display:flex;flex-direction:column} .rw > .nv [data-k=cust] .vl,.rw > .nv [data-k=blog] .vl{margin-bottom:14px} .rw > .nv [data-k=cust] .two > div:first-child{padding-bottom:16px} .rw > .nv [data-k=blog] .two > div:first-child{padding-bottom:18px} @media (max-width:1279px){ .rw > .nv [data-k=cust] .dp-r{left:0;right:auto} } .rw > .nv [data-k=sov] .two > div:first-child{display:flex;flex-direction:column;padding-bottom:18px} .rw > .nv [data-k=sov] > .dp{left:50%;right:auto;transform:translateX(-50%)} .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 > .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 .start a.demo, .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 .start a.demo:hover,.rw .nv .mob .mc.demo:hover{background:#3A6F5F}} .rw .nv .start a.demo span,.rw .nv .mob .mc.demo span,.rw .nv .start a.demo b,.rw .nv .mob .mc.demo b{color:#FFFFFF} .rw .nv .gs:focus-visible{outline:2px solid #427E6C;outline-offset:2px} .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{font-weight:500;font-size:10px;line-height:14px;letter-spacing:.08em;text-transform:uppercase} .rw .lf .ad{margin-top:14px} .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{--por-ksw:url(/site/a/b5b265c39e57be59.webp);--por-swc:url(/site/a/73b8be33b4b27710.webp)} .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.k-agents{background:#427E6C} .rw .tc.k-agents .kh, .rw .tc.k-agents .kb, .rw .tc.k-agents .tl-link{color:#FFFFFF} @media (any-hover:hover) and (min-width:901px){.rw .tc.k-agents:hover{background:#3A6F5F}} .rw .tc.moa .kq{margin:0} .rw .tc.moa .qa{margin-top:14px;display:flex;flex-direction:column;gap:4px;color:var(--ink)} .rw .tc.moa{container-type:inline-size;--mr:14px;--link-lh:16px} .rw .tc.b2.moa .bp{position:relative;flex:1 1 auto;height:auto;min-height:190px;margin:0 calc(var(--s2) * -1);overflow:visible} .rw .tc.b2.moa .tl-link{margin-top:0;padding-top:0;padding-bottom:var(--s2);line-height:var(--link-lh)} .rw .tc.moa .mp{position:absolute;z-index:-1;right:calc(var(--mr) * -1);bottom:calc((var(--link-lh) + var(--s2)) * -1); width:min(330px,calc((100cqw + 2 * var(--s2) + var(--mr) - 193px) / .80));aspect-ratio:700 / 858;height:auto; max-height:calc((100% + var(--link-lh) + var(--s2) - 24px) / .932);max-width:none;transform:translateY(3%); background-size:contain;background-position:right bottom;background-repeat:no-repeat; transition:opacity .45s ease} .rw .tc.moa .mp.sm{opacity:0} .rw .tc.moa:focus-within .mp.sm{opacity:1}@media (any-hover:hover) and (min-width:901px){.rw .tc.moa:hover .mp.sm{opacity:1}} /* Kaspar 24 Sep: the smile replaces the rest portrait, no transition, so no frame shows both */ .rw .tc.moa .mp{transition:none} .rw .tc.moa:focus-within .mp:not(.sm){opacity:0}@media (any-hover:hover) and (min-width:901px){.rw .tc.moa:hover .mp:not(.sm){opacity:0}} @media (prefers-reduced-motion:reduce){ .rw .tc.moa .mp{transition:none} } @media (max-width:1279px){ .rw .tc.moa{--mr:30px} } @media (max-width:900px){ .rw .tc.b2.moa .bp{min-height:250px} } .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:0;width:min(420px,46cqw);aspect-ratio:700 / 754;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none} .rw .cxc .l .cxp{left:0;background-image:var(--por-ksw)} .rw .cxc .r .cxp{right:0;background-image:var(--por-swc)} /* v70: portraits flush with the outer edge; Nathalie's file has 25/700 empty margin on her side; both bleed 2px, clipped by the card */ .rw .cxc .cxp{bottom:-2px} .rw .cxc .l .cxp{transform:translateX(calc(-100% * 25 / 700 - 2px))} .rw .cxc .r .cxp{transform:translateX(2px)} .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} /* the arrow keeps its own layer at all times (27 Sep, "i still get a flicker of the cards with videos when hover over"): 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 (its own layer under the card's text) is repainted at both moments */ .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.k-agents .cxa{color:#FFFFFF} .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} .rw .tc.b2.moa{--link-lh:0px} @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 .tc.an1{container-type:inline-size} .rw .an1 .ant{min-height:calc(3 * 1.4em);margin-bottom:0} .rw .an1 .an-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .rw .an1 .anq{margin:auto 0 0} .rw .an1 .ant2{margin:0;font-weight:800;font-size:clamp(22px,8cqw,32px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance} .rw .an1 .anq footer{margin-top:22px} .rw .an1 .ana{margin:0;font-size:11px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .rw .an1 .anf{margin:4px 0 0;font-weight:800;font-size:15px;line-height:19px;letter-spacing:-.02em} .rw .tc.an1 .tl-link{margin-top:0} @media (hover:none),(max-width:900px){ .rw .an1 .anty::before{content:attr(data-full)} } @media (max-width:900px){ .rw .tc.an1{min-height:440px} } .rw .tc.svb{background:#3F627E;container-type:inline-size} @media (any-hover:hover) and (min-width:901px){.rw .tc.svb:hover{background:#355874}} .rw .tc.svb .kh,.rw .tc.svb .cxa{color:#FFFFFF} .rw .tc.svb .kb{color:#FFFFFF;margin-bottom:0} .rw .tc.svb .sfoot{margin-top:auto} .rw .tc.svb .tl-link{margin-top:0} .rw .svb .spl{list-style:none;margin:0;padding:0} .rw .svb .spl li{color:#FFFFFF;font-weight:800;font-size:clamp(22px,5cqw,32px);line-height:1.15;letter-spacing:-.03em; opacity:0;filter:blur(10px);transform:translateY(6px); transition:opacity 1.8s linear calc(var(--i) * 90ms),filter 1.2s cubic-bezier(.2,0,.2,1) calc(var(--i) * 90ms),transform 1.8s ease calc(var(--i) * 90ms)} .rw .svb.on .spl li,.rw .svb:focus-within .spl li{opacity:1;filter:none;transform:none; transition:opacity .45s ease calc(var(--i) * 70ms),filter .5s ease calc(var(--i) * 70ms),transform .5s cubic-bezier(.32,.72,0,1) calc(var(--i) * 70ms)} .rw .svb .sce{margin:18px 0 0;font-size:11px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF} @media (hover:none),(max-width:900px){ .rw .svb .spl li{opacity:1;filter:none;transform:none} } @media (prefers-reduced-motion:reduce){ .rw .svb .spl li{transform:none;filter:none;transition:opacity .4s linear} } @media (max-width:900px){ .rw .tc.svb{min-height:440px} } .rw .tc.agw{container-type:inline-size} .rw .agw .kb{margin-bottom:0} .rw .agw .ag3w{margin:auto 0 0;display:flex;flex-direction:column;color:#FFFFFF;font-weight:800;font-size:clamp(32px,11cqw,48px);line-height:1.02;letter-spacing:-.04em} .rw .tc.agw .tl-link{margin-top:0} @media (max-width:900px){ .rw .tc.agw{min-height:440px} } @media (max-width:640px){ .rw .feat{overflow-x:clip} } .rw > .nv [data-k=cust] .csw .cs{position:absolute;inset:0;padding:16px;display:block;opacity:0;visibility:hidden; transition:opacity .2s ease,visibility 0s linear .25s} .rw > .nv [data-k=cust] .csw .cs.on{opacity:1;visibility:visible;transition:opacity .2s ease} @media (prefers-reduced-motion:reduce){ .rw > .nv [data-k=cust] .csw .cs{transition:none} } .rw > .nv [data-k=cust] .csw .cs img:first-child{right:auto;left:-22px} .rw > .nv [data-k=cust] .csw .cs .lg{left:auto;right:16px} .rw > .nv [data-k=cust] .csw .cs[data-i="1"] img:first-child{transform:scaleX(-1)} .cx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cx-ask{display:flex;align-items:center;gap:8px;max-width:760px;margin:36px auto 0;background:#FFF; border:1px solid #CDC8C2;border-radius:var(--r-m);padding:8px 20px;transition:border-color .2s ease} @media (any-hover:hover) and (min-width:901px){.cx-ask:hover{border-color:#6E6963}} .cx-ask:focus-within{border-color:#110E0A} .cx-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 18px/26px 'Geist',system-ui,sans-serif; color:#110E0A;letter-spacing:-.01em;padding:8px 0} .cx-ask input::placeholder{color:#6E6963} .cx-fw{position:relative;flex:1;min-width:0;display:flex} .cx-fw input{width:100%} .cx-ph{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%; font:500 18px/26px 'Geist',system-ui,sans-serif;letter-spacing:-.01em;color:#6E6963} .cx-ph.off{visibility:hidden} .cx-a .cx-ask{margin-top:clamp(40px,2rem + 1.4vw,56px);padding-block:14px} .cx-a .cx-grow{margin-top:8px} .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} .cx-chip.gone{opacity:0} .cx-thread{text-align:left} .cx-qa{display:flex;flex-direction:column;gap:14px;padding-top:28px} .cx-q{align-self:flex-end;max-width:80%;background:#E3E2DF;color:#110E0A;border-radius:var(--r-m);padding:10px 14px; font:500 16px/22px 'Geist',system-ui,sans-serif;letter-spacing:-.01em} .cx-ans{max-width:680px} .cx-at{font:500 18px/28px 'Geist',system-ui,sans-serif;letter-spacing:-.01em;color:#110E0A;margin:0} .cx-at .w{opacity:0;transition:opacity .45s ease} .cx-at .w.on{opacity:1} .cx-q.in{animation:cx-in .4s cubic-bezier(.32,.72,0,1) both} @keyframes cx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .cx-a .cx-grow{max-width:760px;margin:0 auto;overflow:hidden} .cx-a .cx-qa{border-top:1px solid #E3E2DF;margin-top:28px} .cx-a .cx-qa:first-child{border-top:0;margin-top:0} @media (max-width:640px){ .cx-ph{font-size:16px} .cx-ask{padding-inline:14px} .cx-ask input{font-size:16px} .cx-at{font-size:16px;line-height:25px} .cx-chip{font-size:14px;padding:9px 13px} } @media (prefers-reduced-motion: reduce){ .cx-at .w, .cx-chip{transition:none} .cx-q.in{animation:none} } .rw .ask .hi{min-height:1em;margin:0 0 clamp(28px,1.4rem + 1.2vw,44px);font-weight:800} .rw .ask .cx-ask{margin-top:0;padding:16px 24px} .rw .ask .cx-ask input,.rw .ask .cx-ph{font-size:20px;line-height:28px} @media (max-width:640px){ .rw .ask .cx-ask{padding:12px 16px} .rw .ask .cx-ask input,.rw .ask .cx-ph{font-size:16px;line-height:24px} } .rw .ask .cx-ask.cx-cmp{flex-direction:column;align-items:stretch;gap:6px;padding:18px 14px 12px 24px;border-radius:var(--r-l); border-color:#CDC8C2;box-shadow:0 1px 2px rgba(17,14,10,.04),0 6px 24px -10px rgba(17,14,10,.10);transition:border-color .2s ease,box-shadow .2s ease} @media (any-hover:hover) and (min-width:901px){.rw .ask .cx-ask.cx-cmp:hover{border-color:#6E6963}} .rw .ask .cx-ask.cx-cmp:focus-within{border-color:#110E0A;box-shadow:0 1px 2px rgba(17,14,10,.05),0 10px 32px -12px rgba(17,14,10,.18)} .rw .ask .cx-cmp .cx-fw{padding-right:10px} .rw .ask .cx-cmp input{padding:4px 0 8px} .rw .ask .cx-cmp .cx-bar{display:flex;align-items:center;justify-content:flex-end;gap:6px} .rw .ask .cx-ask.cx-cmp{position:relative} .rw .ask .cx-fb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 12px;border:0;border-radius:4px; background:transparent;color:#110E0A;font:500 14px/18px 'Geist',system-ui,sans-serif;letter-spacing:-.005em;cursor:pointer; transition:background-color .2s ease} .rw .ask .cx-fb[aria-expanded=true]{background:#FFFFFF}@media (any-hover:hover) and (min-width:901px){.rw .ask .cx-fb:hover{background:#FFFFFF}} .rw .ask .cx-fb .cv{width:10px;height:10px;transition:transform .2s ease} .rw .ask .cx-fb[aria-expanded=true] .cv{transform:rotate(180deg)} .rw .ask .cx-send{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border:0;border-radius:4px; background:#110E0A;color:#FFF;cursor:pointer;transition:background-color .2s ease} .rw .ask .cx-fb:focus-visible,.rw .ask .cx-send:focus-visible,.rw .ask .cx-fl .cx-chip:focus-visible{outline:2px solid #110E0A;outline-offset:2px} .rw .ask .cx-fl{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(380px,100%);margin:0;padding:6px; list-style:none;background:#FFF;border:1px solid #E3E2DF;border-radius:var(--r-l);box-shadow:0 18px 40px -18px rgba(17,14,10,.30);text-align:left} .rw .ask .cx-fl.up{top:auto;bottom:calc(100% + 8px)} .rw .ask .cx-fl .cx-chip{display:block;width:100%;text-align:left;border:0;border-radius:4px;background:transparent;padding:10px 12px; font-size:15px;line-height:20px} @media (any-hover:hover) and (min-width:901px){.rw .ask .cx-fl .cx-chip:hover{background:#FFFFFF}} @media (max-width:640px){ .rw .ask .cx-ask.cx-cmp{padding:14px 10px 10px 16px} } @media (prefers-reduced-motion:reduce){ .rw .ask .cx-fb .cv,.rw .ask .cx-ask.cx-cmp{transition:none} } .rw .ask .cx-a{text-align:left;padding-inline:0} .rw .ask .hi{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em} .rw .ask .cx-ask{max-width:none;margin-inline:0} .rw .ask .cx-grow{max-width:none;margin-inline:0} .rw .ask .cx-ans{max-width:calc((100% - 5 * var(--g)) / 6 * 4 + 3 * var(--g))} @media (max-width:900px){ .rw .ask .cx-ans{max-width: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 .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} } @media (max-width:900px){ .rw .hero .g12{grid-template-columns:minmax(0,1fr)} } /* ── Dropdowns: titles with an overview row (the "Nav Dropdowns" review page, version 1; Kaspar, 25 Sep) ── The panel hangs from its menu name, the names in it lined up with the name above. The overview comes first, a full-width row in white mono on the menu's colour (the colours the old menu cards carried; each darkens on hover). No lines inside the panel. */ .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}} /* ── Get started: two rows in mono, like the titles dropdowns (Kaspar, 25 Sep: "simplify the get started drop down. but make sure that both are mono.") ── */ .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} /* 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}} /* the arrow keeps its own compositing layer all the time: a layer made when the animation starts and dropped when it ends repaints the whole pill, which showed as a flicker of the pill (Kaspar, 25 Sep: "the whole pill flickers at scroll over") */ .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} } .rw .tc.moa .mv{position:absolute;z-index:-1;right:calc(var(--mr) * -1);bottom:calc((var(--link-lh) + var(--s2)) * -1); width:min(330px,calc((100cqw + 2 * var(--s2) + var(--mr) - 193px) / .80));aspect-ratio:700 / 858;height:auto; max-height:calc((100% + var(--link-lh) + var(--s2) - 24px) / .932);max-width:none;transform:translateY(3%); object-fit:contain;object-position:right bottom;display:block;opacity:0;pointer-events:none;background:transparent} /* the pricing page's consultation card: the video in that card's own picture box (the .mp rule of that card); before the rules that show the video, which must win over its opacity 0 at equal specificity */ .rw .tc.rep:not(.dm-rep) .mv{position:absolute;z-index:-1;top:12px;right:calc(var(--mr) * -1); height:calc((100% + var(--link-lh) + var(--s2) - 12px) * var(--k, 1.25));width:auto;aspect-ratio:var(--ar);max-width:none; max-height:none;object-fit:fill;display:block;opacity:0;pointer-events:none;background:transparent} .rw .tc.rep:not(.dm-rep)[data-rep=sho] .mv{--ar:1156 / 1348} .rw .tc.rep:not(.dm-rep)[data-rep=ale] .mv{--ar:1000 / 1225} .rw .tc.rep:not(.dm-rep)[data-rep=cris] .mv{--ar:1000 / 1219} /* the still stays until the video's first frame is up, then the video replaces it (no fade, as the pictures); from then on the video stays */ .rw .tc.vid .mp.sm{display:none} .rw .tc.vid:focus-within .mp:not(.sm){opacity:1}@media (any-hover:hover) and (min-width:901px){.rw .tc.vid:hover .mp:not(.sm){opacity:1}} .rw .tc.vid.mv-on .mp:not(.sm){opacity:0} .rw .tc.vid.mv-on .mv{opacity:1} /* reduced motion, when the file can't be seeked to its end: the smiling still on hover, as the pages had it */ .rw .tc.vid.mv-sm .mp.sm{display:block} .rw .tc.vid.mv-sm:focus-within .mp:not(.sm),.rw .tc.vid.mv-sm:focus-within .mv{opacity:0}@media (any-hover:hover) and (min-width:901px){.rw .tc.vid.mv-sm:hover .mp:not(.sm),.rw .tc.vid.mv-sm:hover .mv{opacity:0}} /* Safari and iOS: the MP4 carries Moa's resting colour, so his card keeps it */ .rw .tc.moa.mv-mp4:focus-within{background:#FFFFFF}@media (any-hover:hover) and (min-width:901px){.rw .tc.moa.mv-mp4:hover{background:#FFFFFF}} /* live agent in the Ask box (1 Oct 2026) */ .cx-at.cx-live{white-space:pre-wrap} .cx-at.cx-live:has(p),.cx-at.cx-live:has(ul){white-space:normal} .cx-at p{margin:0 0 14px}.cx-at p:last-child{margin-bottom:0} .cx-at ul{margin:0 0 14px;padding-left:22px}.cx-at li{margin:0 0 6px} .cx-at a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .cx-at b{font-weight:800} .cx-dots{display:inline-flex;gap:5px;padding:10px 0} .cx-dots i{width:6px;height:6px;border-radius:50%;background:#6E6963;animation:cx-dot 1.2s infinite ease-in-out} .cx-dots i:nth-child(2){animation-delay:.15s}.cx-dots i:nth-child(3){animation-delay:.3s} @keyframes cx-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .cx-cta{align-self:flex-start;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:var(--r-m,8px);background:#427E6C;color:#FFFFFF; font:300 12px/1 var(--mono,'Sometype Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;text-decoration:none} @media (any-hover:hover) and (min-width:901px){.cx-cta:hover{background:#3A6F5F}} .cx-ask input:disabled{cursor:not-allowed} @media (prefers-reduced-motion: reduce){.cx-dots i{animation:none;opacity:.6}} /* the stage bleeds to the window edge on purpose; nothing may scroll the page sideways */ html{overflow-x:clip} /* ===== Hero stage (1 Oct 2026; reactive, 2 Oct): the tour as two open fragments, after linear.app ===== Front: the Scoty conversation, crisp. Back: one InsightNarrator view per beat (sources, cockpit, plan), bleeding off the right edge and fading into the page. Page tokens only. */ @property --hs-pad{syntax:'';inherits:true;initial-value:0px} .rw .hs{--hs-h:640px;--pc:calc((100cqw - 11 * var(--g)) / 12);container-type:inline-size;position:relative} .rw .hs-box{position:relative;height:var(--hs-h)} /* the two surfaces */ .rw .hs-chat,.rw .hs-back{position:absolute;background:var(--ground);border:1px solid var(--border);border-radius:var(--r-l)} .rw .hs-chat{z-index:2;left:0;top:0;width:calc(var(--pc) * 4 + var(--g) * 3);height:560px;display:flex;flex-direction:column; box-shadow:0 24px 48px -24px rgba(17,14,10,.28);overflow:hidden} .rw .hs-back{z-index:1;top:48px;bottom:0;left:calc(var(--pc) * 3 + var(--g) * 3); right:calc(-1 * (var(--m) + max(0px, (100vw - 1432px) / 2)));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden; -webkit-mask-image:linear-gradient(to left,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 150px); mask-image:linear-gradient(to left,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 150px); -webkit-mask-composite:source-in;mask-composite:intersect; --hs-pad:calc(var(--pc) + var(--s2));container-type:inline-size} /* labels and type inside the stage (the page's styles: label, small, body, item-title, card-title) */ .rw .hs .lb{font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .rw .hs .sm{font-size:14px;line-height:18px} .rw .hs b{font-weight:800} /* front: Scoty */ /* no header row (Kaspar, 2 Oct: "kill eyebrow"): the conversation starts at the top of the panel */ .rw .hs-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;padding:24px 24px 18px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)} .rw .hs-msgs::-webkit-scrollbar{display:none} .rw .hs-msgs>:first-child{margin-top:auto} .rw .hs-g>.hs-u{margin-left:auto} .rw .hs-u{width:fit-content;max-width:86%;background:var(--paper);border-radius:var(--r-m);padding:10px 14px;font-size:var(--p-s);line-height:1.4} /* what Scoty did: a quiet line in sentence case, not a label above the answer */ .rw .hs-st{display:flex;align-items:center;gap:8px;font-size:14px;line-height:18px;color:var(--dim)} .rw .hs-st i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--green)} .rw .hs-st.run i{background:var(--line);animation:hsPulse 1s ease-in-out infinite} .rw .hs-g{flex:none;overflow:hidden;height:0;transition:height .5s cubic-bezier(.32,.72,0,1)} .rw .hs-g>*{opacity:0;transition:opacity .45s ease .2s} .rw .hs-g>:first-child{margin-top:18px} .rw .hs-g.tight>:first-child{margin-top:8px} .rw .hs-g>.hs-st+.hs-st,.rw .hs-g>.hs-st+p,.rw .hs-g>.hs-st+.hs-st{margin-top:8px} .rw .hs-g.on>*{opacity:1} @keyframes hsPulse{50%{opacity:.35}} /* the composer (Kaspar, 2 Oct: "jerks the chat input window bigger and smaller", then "the first chat input to scoty is horrible ... make it feel nice and organic"): one fixed height with room for two lines, so it never grows and nothing slides sideways. It behaves like a real field: it takes focus (ink frame), the caret blinks in the empty field, the placeholder goes with the first letter, the question is laid out in full from the first letter (a word never jumps to the next line while it is typed), the send button wakes up once there is text, is pressed, and the question lifts out of the field as it lands in the conversation. */ .rw .hs-cmp{flex:none;margin:0 14px 14px;display:flex;align-items:flex-end;gap:10px;height:76px;box-sizing:border-box;padding:12px 12px 12px 18px; border:1px solid var(--line);border-radius:var(--r-m);background:var(--ground);transition:border-color .2s ease} .rw .hs-cmp.focus{border-color:var(--ink)} .rw .hs-fld{position:relative;flex:1;min-width:0;align-self:stretch;font-size:var(--p-s);line-height:24px} .rw .hs-fld .ph{position:absolute;left:0;top:0;right:0;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease} .rw .hs-cmp.has .ph{opacity:0} .rw .hs-cmp.ret .ph{transition:opacity .45s ease .1s} .rw .hs-fld .tx{display:block;max-height:48px;overflow:hidden;color:var(--ink);overflow-wrap:break-word;transition:opacity .2s ease,transform .5s cubic-bezier(.32,.72,0,1)} .rw .hs-fld .tx.out{opacity:0;transform:translateY(-8px)} .rw .hs-fld .tr{visibility:hidden} /* the caret is an inline border that takes no room and adds no break point, so the reserved line breaks never change */ .rw .hs-fld .cr{display:inline;border-left:1.5px solid var(--ink);margin-right:-1.5px;visibility:hidden} .rw .hs-cmp.focus .cr{visibility:visible;animation:hsBlink 1.05s steps(1) infinite} .rw .hs-cmp.focus.typing .cr{animation:none} @keyframes hsBlink{50%{opacity:0}} .rw .hs-send{flex:none;width:32px;height:32px;border-radius:var(--r-s);background:var(--stone);color:var(--dim);display:flex;align-items:center;justify-content:center; transition:background-color .2s ease,color .2s ease,transform .2s ease} .rw .hs-cmp.has .hs-send{background:var(--ink);color:#FFFFFF} .rw .hs-send.press{transform:scale(.88)} .rw .hs-send svg{width:12px;height:12px;transform:rotate(-90deg)} /* the question lands in the conversation: it rises a few px into its place as its line opens */ .rw .hs-g>.hs-u{transform:translateY(10px);transition:opacity .45s ease .1s,transform .5s cubic-bezier(.32,.72,0,1) .05s} .rw .hs-g.on>.hs-u{transform:none} /* back: the view that answers the current question */ .rw .hs-vw{position:absolute;inset:0;padding:80px 0 0 var(--hs-pad);opacity:0;transition:opacity .45s ease;pointer-events:none} .rw .hs-vw.on{opacity:1;pointer-events:auto} .rw .hs-vw.on.idle{pointer-events:none} .rw .hs-vw.on.idle{opacity:.4} .rw .hs-vw .in{width:1000px} .rw .hs-vw[data-v="3"] .in{width:min(660px,calc(76cqw - var(--hs-pad)))} .rw .hs-vw[data-v="4"] .in{width:min(800px,calc(80cqw - var(--hs-pad)))} .rw .hs-vw[data-v="4"] .hs-cu{grid-template-columns:180px 170px minmax(0,1fr) 96px} .rw .hs-vh{display:flex;align-items:baseline;gap:24px;margin-bottom:24px} .rw .hs-vh h3{margin:0;font-weight:800;font-size:var(--p-m);line-height:1.3;letter-spacing:-.01em} /* view 1: the four sources */ .rw .hs-rows{border-bottom:1px solid var(--line)} .rw .hs-row{display:grid;grid-template-columns:330px 240px 48px 120px;align-items:center;gap:24px;padding:16px 0;border-top:1px solid var(--line)} .rw .hs-row .nm b{display:block} .rw .hs-row .nm span{display:block;margin-top:2px;color:var(--dim)} .rw .hs-trk{height:8px;border-radius:2px;background:var(--paper);overflow:hidden} .rw .hs-trk i{display:block;height:100%;width:0;background:var(--ink);border-radius:2px;transition:width .9s cubic-bezier(.2,.7,.2,1)} .rw .hs-row .pc{text-align:right;font-variant-numeric:tabular-nums} /* view 2: the cockpit */ .rw .hs-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:28px} .rw .hs-kp{background:var(--paper);border-radius:var(--r-m);padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;min-height:112px} .rw .hs-kp .v{font-weight:800;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .rw .hs-kp .d{color:var(--dim)} .rw .hs-kp.hot{background:#7F3125;color:#FFFFFF} .rw .hs-kp.hot .lb,.rw .hs-kp.hot .d{color:#FFFFFF} .rw .hs-bars{display:flex;flex-direction:column;gap:12px;padding:4px 0} .rw .hs-bar{all:unset;box-sizing:border-box;display:grid;grid-template-columns:150px minmax(0,1fr) 40px;align-items:center;gap:16px;width:calc(100% + 16px);margin:-4px -8px;padding:4px 8px;border-radius:var(--r-s);cursor:pointer;transition:background-color .2s ease} @media (any-hover:hover) and (min-width:901px){.rw .hs-bar:hover{background:var(--paper)}} .rw .hs-bar:focus-visible{outline:2px solid var(--ink);outline-offset:0} .rw .hs-bar .trk{height:20px;border-radius:var(--r-s);background:transparent} .rw .hs-bar .trk i{display:block;height:100%;width:0;border-radius:var(--r-s);background:var(--stone);transition:width .9s cubic-bezier(.2,.7,.2,1)} .rw .hs-bar.hot .trk i{background:#7F3125} .rw .hs-bar .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)} .rw .hs-bar.hot .n,.rw .hs-bar.hot .k{color:var(--ink);font-weight:800} .rw .hs-bar .k{color:var(--dim)} .rw .hs-cap{margin:0 0 14px} /* view 3: the plan */ .rw .hs-pr{display:grid;grid-template-columns:minmax(0,1fr) 150px 140px;align-items:center;gap:24px;padding:16px 0;border-top:1px solid var(--line)} .rw .hs-pr .t b{display:block} .rw .hs-pr .t span{display:block;margin-top:2px;color:var(--dim)} .rw .hs-chip{justify-self:start;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--r-s);background:var(--paper)} .rw .hs-chip i{width:8px;height:8px;border-radius:2px;background:var(--line);transition:background-color .2s ease} .rw .hs-chip.ok i{background:var(--green)} .rw .hs-btn{border:0;margin:0;cursor:default;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 18px;border-radius:var(--r-s); background:var(--green);color:#FFFFFF;font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.08em;text-transform:uppercase; transition:background-color .2s ease,color .2s ease,transform .2s ease} .rw .hs-btn.press{transform:scale(.96);background:#3A6F5F} .rw .hs-btn.done{background:var(--stone);color:var(--ink)} .rw .hs-btn.ready{cursor:pointer;animation:hsRing 2s ease-out .4s 3} @media (any-hover:hover) and (min-width:901px){.rw .hs-btn.ready:hover{background:#3A6F5F}} .rw .hs-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px} @keyframes hsRing{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)}} /* controls under the stage */ .rw .hs-ctl{position:absolute;z-index:3;left:0;top:600px;transform:translateY(-50%);width:max-content;max-width:calc(var(--pc) * 4 + var(--g) * 3 + var(--s2) - 8px); display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .rw .hs-ctl button{all:unset;cursor:pointer;color:var(--dim);transition:color .2s ease} .rw .hs-ctl button[aria-current=step]{color:var(--ink)}@media (any-hover:hover) and (min-width:901px){.rw .hs-ctl button:hover{color:var(--ink)}} .rw .hs-ctl button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px} /* 900 and below: the conversation first, the view under it, still bleeding right and fading */ @media (prefers-reduced-motion:reduce){ .rw .hs-g,.rw .hs-g>*,.rw .hs-vw,.rw .hs-trk i,.rw .hs-bar .trk i{transition:none} .rw .hs-st.run i,.rw .hs-cmp .cr{animation:none} .rw .hs-fld .tx,.rw .hs-fld .ph,.rw .hs-send,.rw .hs-g>.hs-u{transition:none} } .rw .hs-two{display:grid;grid-template-columns:560px 340px;gap:56px} .rw .hs-cant{border-bottom:1px solid var(--line)} .rw .hs-cant>div{display:grid;grid-template-columns:minmax(0,1fr) 56px 72px;gap:12px;padding:9px 0;border-top:1px solid var(--line);color:var(--dim);font-variant-numeric:tabular-nums} .rw .hs-cant>div span:not(:first-child){text-align:right} .rw .hs-cant>.hot{color:var(--ink);font-weight:800} .rw .hs-row .hs-chip{justify-self:start} .rw .hs-g>p{margin:0;font-size:var(--p-s);line-height:1.45} /* ===== 2 Oct: what the visitor can do ===== */ /* view tabs at the top of the workspace: they follow the tour, and are the visitor's once the plan is approved */ .rw .hs-tabs{position:absolute;z-index:2;top:24px;left:var(--hs-pad);right:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .rw .hs-tabs::-webkit-scrollbar{display:none} .rw .hs-tabs button{all:unset;flex:none;box-sizing:border-box;height:32px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-s); font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:background-color .2s ease,color .2s ease} .rw .hs-tabs button[aria-pressed=true]{background:var(--ink);color:#FFFFFF} .rw .hs-tabs button:disabled{cursor:default} .rw .hs-tabs button:disabled:not([aria-pressed=true]){color:var(--line)} @media (any-hover:hover) and (min-width:901px){.rw .hs-box.explore .hs-tabs button:not([aria-pressed=true]):hover{background:var(--paper);color:var(--ink);cursor:pointer}} .rw .hs-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* Scoty's next question: a chip; the fill is the time before Scoty asks it itself */ .rw .hs-nx{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .rw .hs-q{all:unset;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;min-height:32px;padding:7px 12px;border-radius:var(--r-s); border:1px solid var(--line);background:var(--ground);font-size:14px;line-height:18px;color:var(--ink);transition:background-color .2s ease} .rw .hs-q span{position:relative} .rw .hs-q .f{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--paper)} .rw .hs-q.fill .f{animation:hsFill linear forwards} @media (any-hover:hover) and (min-width:901px){.rw .hs-q:hover{background:var(--paper)}} .rw .hs-q:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .rw .hs-q:disabled{cursor:default} @keyframes hsFill{to{width:100%}} /* an answer opens its view */ .rw .hs-go{all:unset;align-self:flex-start;cursor:pointer;margin-top:8px;color:var(--ink);border-bottom:1px solid var(--line);font-family:var(--mono);font-weight:300;font-size:12px;line-height:15px;letter-spacing:.08em;text-transform:uppercase} .rw .hs-g>.hs-go{display:inline-block} @media (any-hover:hover) and (min-width:901px){.rw .hs-go:hover{border-bottom-color:var(--ink)}} .rw .hs-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .rw .hs-cant.swap>div{animation:hsIn .45s ease both} .rw .hs-cant.swap>div:nth-child(2){animation-delay:.05s} .rw .hs-cant.swap>div:nth-child(3){animation-delay:.1s} .rw .hs-cant.swap>div:nth-child(4){animation-delay:.15s} @keyframes hsIn{from{opacity:0}} /* the plan: the SMS behind the credit */ .rw .hs-xs{all:unset;display:inline-block;margin-top:6px;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--line)} @media (any-hover:hover) and (min-width:901px){.rw .hs-xs:hover{border-bottom-color:var(--ink)}} .rw .hs-xs:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .rw .hs-sms{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);max-width:520px} .rw .hs-sms p{margin:0} .rw .hs-sms .lb{margin-bottom:8px} .rw .hs-sms-e{margin-top:6px!important;color:var(--dim)} /* view 4: customers at risk */ .rw .hs-cu{display:grid;grid-template-columns:200px 190px minmax(0,1fr) 120px;align-items:center;gap:20px;padding:12px 0;border-top:1px solid var(--line)} .rw .hs-cu-h{border-top:0;padding:0 0 8px} .rw .hs-cu b{font-weight:800} .rw .hs-cu em{display:block;font-style:normal;color:var(--dim)} .rw .hs-rk{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums} .rw .hs-lv{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-s);background:var(--paper)} .rw .hs-lv.crit{background:#7F3125;color:#FFFFFF} .rw .hs-foot{margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--dim)} /* view 5: the auditor's check */ .rw .hs-ev{display:grid;grid-template-columns:280px minmax(0,560px);gap:16px;margin-bottom:20px} .rw .hs-cf,.rw .hs-sql{background:var(--paper);border-radius:var(--r-m);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px} .rw .hs-cf .v{font-weight:800;font-size:var(--t-s);line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .rw .hs-cf .hs-trk{background:var(--ground)} .rw .hs-cf .hs-trk i{background:var(--green)} .rw .hs-sql p{margin:0} .rw .hs-sql code{font-family:var(--mono);font-weight:300;font-size:13px;line-height:20px;color:var(--ink)} .rw .hs-chk{list-style:none;margin:0;padding:0;max-width:856px;border-bottom:1px solid var(--line)} .rw .hs-chk li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)} .rw .hs-chk i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--green)} .rw .hs-chk .warn i{background:#C38612} /* view 6: what customers say */ .rw .hs-vb{display:grid;grid-template-columns:96px minmax(0,560px) 80px;align-items:start;gap:20px;padding:14px 0;border-top:1px solid var(--line)} .rw .hs-vb p{margin:0} .rw .hs-vb p+p{margin-top:4px} .rw .hs-vb b{font-weight:800} .rw .hs-vb .d{color:var(--dim)} .rw .hs-vb .lb.d{padding-top:4px} /* the plan's action sits in its header, so it is never in the fade */ .rw .hs-vh-pl{justify-content:space-between;align-items:flex-start} .rw .hs-vh-pl .hs-pc{margin:6px 0 0;color:var(--dim)} .rw .hs-vh-pl .hs-pc b{color:var(--ink)} .rw .hs-vw[data-v="3"] .hs-pr:last-of-type{border-bottom:1px solid var(--line)} @media (prefers-reduced-motion:reduce){ .rw .hs-btn.ready{animation:none;box-shadow:inset 0 0 0 2px rgb(var(--lx-glow,66,126,108))} .rw .hs-cant.swap>div{animation:none} } /* the view behind has no left edge line (Kaspar, 2 Oct: "that line is not needed"): its left edge sits under Scoty's panel, and the part below the panel ran as a lone line past the chapters */ @media (min-width:901px){.rw .hs-back{border-left-color:transparent}} /* the composer is a real field, an easter egg (Kaspar, 2 Oct: "make ask scoty chat box also chatable (as an easter egg, not call to action)"): nothing points to it; a click or a tab into it and it takes the question. The tour's typed text makes way while it is the visitor's. */ .rw .hs-cmp{cursor:text} .rw .hs-ask{position:absolute;left:0;top:0;right:0;width:100%;height:48px;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;background:transparent; resize:none;overflow:hidden;font:inherit;line-height:24px;letter-spacing:inherit;color:var(--ink);caret-color:var(--ink);cursor:text} .rw .hs-ask:focus,.rw .hs-ask:focus-visible{outline:0} .rw .hs-cmp.own .tx{display:none} .rw button.hs-send{border:0;padding:0;margin:0;font:inherit;cursor:default} .rw .hs-cmp.own.has button.hs-send{cursor:pointer} .rw .hs-g>.hs-ans>*{margin:0;font-size:var(--p-s);line-height:1.45} .rw .hs-g>.hs-ans>*+*{margin-top:8px} .rw .hs-g>.hs-ans ul{padding-left:18px} .rw .hs-g>.hs-ans a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .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} /* AI assistant label on the chat field (28 Sep) */ .rw .ask .cx-cmp .cx-ai{display:block;text-align:right;margin:0 0 2px;font-family:var(--mono);font-weight:300;font-size:11px;line-height:15px;letter-spacing:.02em;text-transform:uppercase;color:#6E6963} /* 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 .ask .cx-ask.cx-cmp,.rw .ask .cx-ask.cx-cmp:focus-within,.rw .ask .cx-fl,.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} /* S4 titles and quotes on the four title sizes */ .rw main p.ag3w > span, .rw main ul.spl > li{font-size:var(--t-title)!important;line-height:1.1!important;letter-spacing:-0.03em!important} /* S4 titles and quotes on the four title sizes */ .rw main p.cxt, .rw main p.ant2{font-size:var(--t-s)!important;line-height:1.2!important;letter-spacing:-0.025em!important} /* S2 labels at 12 / 15, 0.08em */ .rw main span.mono.cxn, .rw main span.mono.cxr, .rw main p.mono.ana, .rw main p.mono.sce{font-size:12px!important;line-height:15px!important;letter-spacing:.08em!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 .ls-back{border-radius:4px!important} /* Type: the analyst card's attribution, name in ink and company in dim, both labels (as on a story card) */ .rw .an1 .ana{color:var(--ink)!important} .rw .an1 .anf{margin:2px 0 0!important;font-family:var(--mono)!important;font-weight:300!important;font-size:12px!important;line-height:15px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--dim)!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} @media (any-hover:hover) and (min-width:901px){.rw .tc:hover,.rw .sr:hover{box-shadow:0 0 0 1px #E3E2DF,0 10px 24px -14px rgba(17,14,10,.2)}} /* ===== 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.k-agents .cxa,html .rw .tc.svb .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}} } /* The Approve button fills like the question chips (Kaspar, 3 Oct): the darker green runs across it, and when it is full the plan is approved; the fill replaces the ring as its invitation. */ .rw .hs-btn{position:relative;overflow:hidden} .rw .hs-btn span{position:relative} .rw .hs-btn .f{position:absolute;left:0;top:0;bottom:0;width:0;background:#3A6F5F} .rw .hs-btn.fill .f{animation:hsFill linear forwards} .rw .hs-btn.ready.fill{animation:none} /* 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) */ .cx-dots i{border-radius:1px} .rw .sv-brand{text-transform: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: the hero tabs, once the tour hands over, hover to stone */ @media (any-hover:hover) and (min-width:901px){.rw .hs-box.explore .hs-tabs button:not([aria-pressed=true]):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){--lx-glow:255,255,255} /* a resting video is drawn under its picture's look, so the swap never shows an empty frame (clean-up, 3 Oct) */ .rw .tc.vid:not(.mv-on):not(.mv-sm) .mv{opacity:.01} /* 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}} /* the booking button when the questions are used up: the CI's button, 32 px tall, radius 4 (4 Oct 2026) */ .cx-cta{height:32px;border-radius:4px} /* ===== 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) ---- */ /* the "Hello." field: one box holding the question and the send button, room for two lines; the common questions and the caption on one line under the box (the box is the form's ::before; nothing in the markup moves) */ @media (max-width:900px){ .rw .ask .cx-ask.cx-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;row-gap:0; padding:0;border:0;border-radius:0;background:transparent;box-shadow:none!important} .rw .ask .cx-ask.cx-cmp:focus-within{box-shadow:none!important} .rw .ask .cx-ask.cx-cmp::before{content:"";grid-area:1 / 1 / 2 / 3;align-self:stretch;background:#FFFFFF;border:1px solid #CDC8C2; border-radius:var(--r-l);transition:border-color .2s} .rw .ask .cx-ask.cx-cmp:has(input:focus)::before{border-color:#110E0A} .rw .ask .cx-cmp .cx-fw{grid-area:1 / 1 / 2 / 3;position:relative;z-index:1;box-sizing:border-box;height:76px;padding:14px 56px 14px 16px;align-items:flex-start} .rw .ask .cx-cmp .cx-fw input{height:24px;padding:0;font-size:16px;line-height:24px} .rw .ask .cx-cmp .cx-ph{top:14px;left:16px;right:56px;max-width:none;max-height:48px;transform:none;white-space:normal;font-size:16px;line-height:24px} .rw .ask .cx-cmp .cx-bar{display:contents} .rw .ask .cx-cmp .cx-send{grid-area:1 / 2;justify-self:end;position:relative;z-index:2;margin:0 12px 12px 0} .rw .ask .cx-cmp .cx-faq{grid-area:2 / 1;justify-self:start;margin:8px 0 0 -12px} .rw .ask .cx-cmp .cx-ai{grid-area:2 / 2;justify-self:end;align-self:center;margin:8px 0 0;text-align:right} } @media (max-width:900px) and (any-hover:hover) and (min-width:901px){ .rw .ask .cx-ask.cx-cmp:hover::before{border-color:#6E6963} .rw .ask .cx-ask.cx-cmp:has(input:focus)::before{border-color:#110E0A} } @media (prefers-reduced-motion:reduce){ .rw .ask .cx-ask.cx-cmp::before{transition:none} } /* ===== Home on a phone, after linear.app (proposal, 3 Oct 2026). Review: linear-mobile-transitions-2026-10-02.md ===== */ /* the intro's start state, only while the script has set the class (it runs once per visit, on phones) */ @media (max-width:900px){ html.sv-intro .rw .hero h1,html.sv-intro .rw .hero .lead,html.sv-intro .rw .hs-chat,html.sv-intro .rw .hs-back, html.sv-intro .rw .hs-ctl{opacity:0} .rw .hero .sv-ln,.rw .hero .sv-lp{display:block} .rw .sv-veil{position:absolute;inset:0;z-index:10;background:var(--ground);pointer-events:none} } /* the hero stage on a phone (Kaspar, 3 Oct, 08:16: "hero animation not below eachother. make chat window smaller and keep some of the cockpit behind it. see how linear does it"). linear.app shows its desktop window on a phone scaled to 0.5, cropped by the screen on the right. Here both windows keep their desktop insides and type and are scaled together by --sv-sc, which the script sets from the stage's width (520 design px fill the column, at most 1): the view behind at the top, 48 design px in, running off the right edge of the screen and fading out at its foot; Scoty in front, lower left, so the top of the view (its tabs, title and first row) and a strip on the right stay in sight. The controls stay at their own size under the stage. The stage's own phone rules (which stacked the two) are switched off in this study. */ @media (max-width:900px){ .rw .feat{overflow-x:clip} .rw .hs{--sv-sc:.62;--sv-cw:360px;--sv-ch:520px;--sv-ct:240px;--sv-bl:48px;--sv-bw:1000px;--sv-bh:600px} .rw .hs-box{height:auto;padding-top:calc((var(--sv-ct) + var(--sv-ch)) * var(--sv-sc))} .rw .hs-chat,.rw .hs-back{--p-s:18px;--p-m:20px;--t-s:24px;--g:32px;--s2:32px;transform:scale(var(--sv-sc));transform-origin:0 0} .rw .hs-chat{left:0;top:calc(var(--sv-ct) * var(--sv-sc));width:var(--sv-cw);height:var(--sv-ch)} .rw .hs-back{left:calc(var(--sv-bl) * var(--sv-sc));top:0;right:auto;bottom:auto;width:var(--sv-bw);height:var(--sv-bh);--hs-pad:32px; -webkit-mask-image:linear-gradient(to top,transparent 0,#000 160px);mask-image:linear-gradient(to top,transparent 0,#000 160px)} .rw .hs-vh-pl{flex-direction:column;gap:12px} /* the controls on one line (Kaspar, 3 Oct, 08:52: "the menu breaks in mobile"): the four labels (25.4 em at the label's .08em tracking) spread over the column with at least 10 px between them; the label size gives way below 12 px only where the column is too narrow for that (11.6 px at 390, 10.5 at 360); the row is never wider than at 12 px with 18 px gaps */ .rw .hs-ctl{position:static;transform:none;margin-top:var(--s2);width:auto;max-width:362px;flex-wrap:nowrap;justify-content:space-between; gap:0;white-space:nowrap;font-size:min(12px,calc((100cqw - 30px) / 25.42))} .rw .hs-ctl .sep{display:none} .rw .sv-shine{transform:scale(var(--sv-sc));transform-origin:0 0} } /* Scoty and the view apart (Kaspar, 3 Oct, 08:52: "the overlap is confusing. needs clearer separation"; of three variations he chose A at 09:19): the window behind lies under a veil of the page colour at 55%, so it reads as further away; Scoty stays crisp white with his shadow. */ @media (max-width:900px){ .rw .hs-back::after{content:"";position:absolute;inset:0;z-index:9;background:rgba(250,249,247,.55);pointer-events:none} } /* the light on the stage's edge (review 1 "the shine" and 2 "the hero light follows the scroll"): the panel's 1 px frame drawn again in dim and masked to a 200 px stretch, which runs into the corner during the intro, then follows the scroll down the left edge */ .rw .sv-shine{position:absolute;z-index:3;pointer-events:none;box-sizing:border-box;border:1px solid #6E6963;border-radius:8px;opacity:0; --x:0%;--y:0%;-webkit-mask-image:radial-gradient(200px circle at var(--x) var(--y),#000 0,transparent 100%); mask-image:radial-gradient(200px circle at var(--x) var(--y),#000 0,transparent 100%)} @media (min-width:901px){.rw .sv-shine{display:none}} /* sideways rows (review 2 "the two sideways carousels"; 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 cards that share a row on desktop share a row you swipe on a phone, four rows of two: AI agents and connectors, customers and analysts, customer success and sovereignty, pricing and migration. The browser's own scroll: snap to each card's start, one card per swipe, no dots, no arrows, no scaling or dimming. The next card shows at the edge. Above 900 px the rows are not boxes at all, so the grid is as it is. */ .rw .topics .swipe{display:contents} @media (max-width:900px){ .rw .topics .swipe{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 .topics .swipe::-webkit-scrollbar{display:none} .rw .topics .swipe > .tc{flex:0 0 calc(100% - 32px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always} .rw .topics .swipe::after{content:"";flex:0 0 4px} /* room for the last card to reach the margin (100% - 32 px wide, S at least 28) */ /* while a mouse drags a row (the script) the snap waits, and nothing is selected */ .rw .topics .swipe.sv-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none} .rw .topics .swipe.sv-drag .tc,.rw .topics .swipe.sv-drag a{cursor:grabbing} /* lower cards (Kaspar, 3 Oct: "cards are too high", then "all the cards below the hero less high"): a row takes the height of its taller card, so every card drops its phone minimum (440, 600, 440, 496, 440) and the pictures get smaller: - the connector tiles show two of their three rows (a 190 px box, the rows moved up to its top); - the customer's 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, as on the other cards); - Moa's picture box is 120 high. */ .rw .topics .swipe > .tc{min-height:0} .rw .topics .swipe .tc.b2 .bp:has(.tws){height:190px} .rw .topics .swipe .tc.b2 .bp .tws{top:-47px;margin-top:6.7%} /* the tilted rows are 2,450 px long: their left end, the part in the card, sits low */ .rw .topics .swipe .cxc .cxv{display:flex;flex-direction:column} .rw .topics .swipe .cxc .cxq{padding-right:var(--s2)} .rw .topics .swipe .cxc .cxp{position:relative;bottom:auto;width:120px;flex:none;margin-top:auto;margin-bottom:-2px} .rw .topics .swipe .cxc .l .cxp{align-self:flex-start} .rw .topics .swipe .cxc .r .cxp{align-self:flex-end} .rw .topics .swipe .tc.b2.moa .bp{min-height:120px} } @media (prefers-reduced-motion:reduce){ .rw .sv-shine{display:none} } @media (max-width:900px){ .rw .tc.moa .mp{right:0} /* Kaspar, 21:19: "moa is cut off too much." */ } /* k0436 e: the cloud card's places on phones in the card title size (Kaspar, 4 Oct, 12:36: "cloud card text is too big"); the draft's S4 rule sets them with !important */ @media (max-width:900px){ .rw main ul.spl > li{font-size:var(--t-s)!important;line-height:1.2!important;letter-spacing:-0.025em!important} } /* the card's link is a box over the whole card (port, 4 Oct 2026, 21:48: Safari on the iPhone dropped taps on the old 0 px wide link); its old place in the card stays as span.tl-link, without the ::after */ .rw .tc .tl-link::after{content:none!important} .rw .tc .tc-hit{position:absolute;inset:0;z-index:5;border-radius:var(--r-l);font-size:0;line-height:0;color:transparent;overflow:hidden;-webkit-tap-highlight-color:transparent} .rw .tc.aq-quote .tc-hit{z-index:1} .rw .tc .tc-hit:focus-visible{outline:none} .rw .tc:has(.tc-hit:focus-visible){outline:2px solid var(--ink);outline-offset:2px}