/* Refine: mature and finished. One deep indigo that means "the AI is working", surfaces that hold light instead of
   flat grey boxes, product that dissolves into the page instead of being cropped, and every detail set by hand. */
:root{--zi:#3D4280;--zi-2:#6B6FA6;--zi-3:#D9DAEA;--zi-4:#F2F2F8;
  --ok:#2F8A5B;--rv:#C4871C;
  --surf:radial-gradient(90% 70% at 50% 0%,rgb(61 66 128 / .07),rgb(61 66 128 / 0) 70%),linear-gradient(180deg,#F7F7F9 0%,#F4F4F5 100%);
  --edge:inset 0 0 0 1px rgb(20 22 50 / .045);
  --win:0 0 0 1px rgb(20 22 50 / .07),0 1px 1px rgb(20 22 50 / .03),0 10px 20px -10px rgb(20 22 50 / .10),0 40px 80px -32px rgb(20 22 50 / .22)}
body{font-feature-settings:"cv11","ss03";text-rendering:optimizeLegibility}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
.aw{font-variant-numeric:tabular-nums}

/* ---- the hero ---- */
.dhero{padding-block:88px 0}
.dhero.home h1{font-size:64px;line-height:1.02;letter-spacing:-.042em!important}
.dhero.home .dh-side p{font-size:18px;color:rgb(17 17 17 / .6)}
.dhero.home .kick{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:999px;margin-bottom:28px;font-size:13px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px #E6E6EA!important}
.dhero.home .kick i{display:block;width:6px;height:6px;border-radius:50%;background:var(--zi);box-shadow:0 0 0 3px var(--zi-4)!important}
.erp2{display:none}
.hstage2{margin-top:72px;border-radius:16px;background:var(--surf)!important;box-shadow:var(--edge)!important;padding:56px 56px 0;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hstage2 .aw{border-radius:12px 12px 0 0!important;box-shadow:var(--win)!important}
@media (max-width:760px){.hstage2{padding:20px 16px 0;margin-top:48px}.dhero.home h1{font-size:36px}}
@media (min-width:761px) and (max-width:1000px){.dhero.home h1{font-size:48px}}

/* ---- logos: one voice, one size, one grey ---- */
.logos2{padding:36px 0;border-top:0!important;border-bottom:1px solid var(--line)}
.logos2 p{font-size:13px;color:rgb(17 17 17 / .5)}
.logos2 ul{gap:16px 56px;color:#9C9CA3!important}
.logos2 li{font-family:"Inter",sans-serif!important;font-style:normal!important;font-weight:500!important;font-size:19px!important;letter-spacing:-.03em!important;text-transform:none!important}
.logos2 li::before{display:none!important}

/* ---- section rhythm ---- */
.dsec{padding-block:120px 0}
.dsec + .dsec .wrap::before{margin-bottom:120px}
.shead{margin-bottom:56px}
@media (max-width:760px){.dsec{padding-block:72px 0}.dsec + .dsec .wrap::before{margin-bottom:72px}.shead{margin-bottom:36px}}

/* ---- product surfaces: light, an edge, a real window ---- */
.day,.frame,.row.flip .frame,.frame.c,.mw,.flow{background:var(--surf)!important;box-shadow:var(--edge)!important;border-radius:16px!important}
.wv-s .aw,.frame .aw,.frame.c .aw{border-radius:12px!important;box-shadow:var(--win)!important}

/* workflow viewer: text starts where the window starts; checks instead of bullets; the tab fills in indigo */
.wv-tabs{gap:28px}
.wvt[aria-selected="true"] i{background:linear-gradient(90deg,var(--zi) var(--k,0%),#E4E4E8 var(--k,0%))}
.wv-p{align-items:start;gap:64px;margin-top:40px}
.wv-t{padding-top:48px}
.wv-t h3{font-size:30px!important}
.wv-t p{font-size:16px;margin-top:16px}
.wv-t ul{gap:0;margin:28px 0 28px;border-top:1px solid var(--line)}
.wv-t li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.wv-t li::before{width:12px;height:6px;border-radius:0;background:none;border-left:1.5px solid var(--zi);border-bottom:1.5px solid var(--zi);transform:rotate(-45deg) translate(1px,-2px);margin-right:4px}
.wv-s{padding:48px}
@media (max-width:1000px){.wv-t{padding-top:0}.wv-s{padding:16px}}

/* the month: Zenday's lane is the only one in colour */
.mw .ok{background:var(--zi-4)!important;box-shadow:inset 0 0 0 1px var(--zi-3)!important}
.mw .ok::after{border-color:var(--zi)!important}
.mw .bar.fast{background:var(--zi)!important}
.mw .bar.close{background:#DEDEE2!important}
.mw .bar.wait{background:repeating-linear-gradient(135deg,#E9E9EC 0 6px,#F3F3F5 6px 12px)!important}
.mw .cur,.mw .cur2{background:linear-gradient(90deg,rgb(245 245 247 / .5),rgb(245 245 247 / .95) 32px)!important}

/* AI team: the agents carry the indigo mark; no boxed tags */
.ri{background:var(--zi-4)!important;color:var(--zi)!important;box-shadow:inset 0 0 0 1px var(--zi-3)!important;border-radius:10px}
.rr.own .ri{background:#fff!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px #E3E3E7!important}
.rn em{background:none!important;padding:0;font-size:12.5px;color:rgb(17 17 17 / .5)!important}
.rr{transition:background .2s}
.rr .ra{transition:transform .2s;color:rgb(17 17 17 / .4)}
.rr:hover .ra{transform:translateX(3px);color:var(--ink)}

/* integrations: quiet wires, one indigo pulse */
.flow{padding:48px 56px;min-height:460px}
.flow .chip{min-width:176px;padding:8px 14px 8px 8px;border-radius:10px;box-shadow:0 0 0 1px rgb(20 22 50 / .06),0 1px 2px rgb(20 22 50 / .04)!important}
.flow .col.r .chip{min-width:156px}
.flow .core{padding:28px 28px 24px;border-radius:16px;box-shadow:var(--win)!important}
.flow .core .zmark{background:var(--zi)!important;border-radius:12px}

/* proof: the quote with a face and two numbers beside it */
.proof{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:80px;align-items:end;padding:72px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .quote2{padding:0;border:0}
.proof blockquote{font-size:32px!important;line-height:1.28!important;text-indent:-.42em}
.proof figcaption{display:flex;align-items:center;gap:12px;margin-top:32px}
.proof .pav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#EDEDF0;font-size:12px;font-weight:500;color:var(--ink)}
.proof figcaption span{display:flex;flex-direction:column;line-height:1.35;font-size:14px;color:rgb(17 17 17 / .55)}
.proof figcaption b{font-weight:500;color:var(--ink)}
.proof dl{margin:0;display:grid;gap:0;border-left:1px solid var(--line)}
.proof dl > div{padding:4px 0 28px 40px}
.proof dl > div + div{padding:28px 0 4px 40px;border-top:1px solid var(--line)}
.proof dt{font-size:48px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.proof dt small{font-size:20px;letter-spacing:-.02em;color:rgb(17 17 17 / .45);margin-left:6px}
.proof dd{margin:10px 0 0;font-size:14.5px;color:rgb(17 17 17 / .6);line-height:1.5}
@media (max-width:900px){.proof{grid-template-columns:1fr;gap:40px;padding:48px 0}.proof blockquote{font-size:24px!important}.proof dl{border-left:0;border-top:1px solid var(--line)}.proof dl > div,.proof dl > div + div{padding:24px 0}}

/* security: four columns, icons without boxes, rules that run the full height */
.sect2{border-top:1px solid var(--line)}
.sect2 > div{padding:32px 32px 4px 0}
.sect2 > div + div{padding-left:32px}
.sico{width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border:0!important;display:block;place-items:initial}
.sico svg{width:22px!important;height:22px!important;stroke-width:1.4!important}
.sect2 h3{margin-top:24px;font-size:17px}

/* closing: the same light as the hero, so the page opens and closes the same way */
.cta3{padding-block:128px 0}
.cta3 .day{padding:104px 40px 108px;background:radial-gradient(70% 90% at 50% 0%,rgb(61 66 128 / .09),rgb(61 66 128 / 0) 70%),linear-gradient(180deg,#F7F7F9,#F4F4F5)!important}
.cta3 h2{font-size:48px;letter-spacing:-.035em!important}
.cta3 .btn-s{background:#fff}

/* product: one indigo for every agent, muted status colours */
.aag,.aag.b,.aag.g{background:var(--zi)!important}
.ast.ok::before{background:var(--ok)}.ast.rv::before{background:var(--rv)}
.ast.ai::before,.ast.run::before{background:var(--zi)}.ast.run{color:var(--zi)}
.arw.hl{box-shadow:inset 2px 0 0 var(--zi)!important;background:#F8F8FB}
.anew{background:var(--zi-4);color:var(--zi)}
.ani .q{background:var(--zi)!important}
.amon .d i{background:var(--zi-3)}.amon .c i{background:var(--zi)}
.aws[data-s="1"] .live{background:var(--zi)}

/* buttons and links: settled, with a calm hover */
.btn{transition:background .2s,box-shadow .2s,color .2s}
.btn-p:hover{background:#26272E}
.btn-s{border-color:#E1E1E5}
.lnk svg{transition:transform .2s}.lnk:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:no-preference){
  .flow .wire{animation:pulse 3.6s cubic-bezier(.45,0,.25,1) infinite}
  .flow .wire:nth-of-type(3n){animation-delay:-1.2s}.flow .wire:nth-of-type(3n+1){animation-delay:-2.4s}
  @keyframes pulse{from{stroke-dashoffset:16}to{stroke-dashoffset:-420}}
}
@media (prefers-reduced-motion:reduce){.flow .wire{display:none}}
/* fixes after the first render */
.dhero.home .dh-top{max-width:1080px}
:root{--surf:radial-gradient(140% 100% at 50% -30%,rgb(61 66 128 / .055),rgb(61 66 128 / 0) 62%),linear-gradient(180deg,#F7F7F9 0%,#F4F4F5 100%)}
.cta3 .day{background:var(--surf)!important}
@media (max-width:900px){.proof blockquote{text-indent:0}}