/* Layout, not colour, carries the design. The page changes shape as it goes: the product runs off the edge in the
   hero, the month runs edge to edge, the team and the controls sit beside their headline. One small pop of colour,
   used once: the accountant's double rule, drawn under "Approved by your team." at the moment the controller approves. */
:root{--pop:#C8233B} /* Zenday Red (carmine): the one accent, used only for the hero dot, the eyebrow dot and the ink edge */

/* the one pop */
.dhero.home .kick i{background:var(--pop)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pop) 12%,#fff)!important}
.dhero.home h1 .dbl{display:inline;padding-bottom:.14em;background-image:linear-gradient(var(--pop),var(--pop)),linear-gradient(var(--pop),var(--pop));
  background-repeat:no-repeat;background-position:0 100%,0 calc(100% - 6px);background-size:0 2px,0 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s cubic-bezier(.65,0,.25,1)}
.dhero.home.sealed h1 .dbl{background-size:100% 2px,100% 2px}
@media (prefers-reduced-motion:reduce){.dhero.home h1 .dbl{transition:none}}

/* section numbers: structure, in grey */
.kick em{font-style:normal;font-variant-numeric:tabular-nums;color:rgb(17 17 17 / .32);margin-right:12px}
.wv-t li::before{border-color:var(--ink)!important}

/* hero: the product runs off the right edge of the page */
@media (min-width:761px){
  .hstage2{margin-right:calc(50% - 50vw);border-radius:16px 0 0 0!important;padding:56px 0 0 56px;
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%),linear-gradient(90deg,#000 0,#000 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
  .hstage2 .fit{width:max(1240px,100%)}
  .hstage2 .aw{border-radius:12px 0 0 0!important}
}

/* the month: edge to edge, the one full-width band */
.mw{margin-inline:calc(50% - 50vw);border-radius:0!important;padding-inline:calc(50vw - 50% + 40px)!important;padding-block:48px 44px!important;box-shadow:inset 0 1px 0 rgb(20 22 50 / .05),inset 0 -1px 0 rgb(20 22 50 / .05)!important}
@media (max-width:760px){.mw{padding-inline:calc(50vw - 50% + 8px)!important}}

/* the team and the controls: headline beside the content */
@media (min-width:1001px){
  #team .wrap,#security .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  #team .wrap::before,#security .wrap::before{grid-column:1/-1}
  #team .shead,#security .shead{grid-column:1;grid-row:2 / span 2;position:sticky;top:120px;margin:0}
  #team .shead h2,#security .shead h2{font-size:36px}
  #team .roster,#security .sect2{grid-column:2;grid-row:2}
  #team .aside{grid-column:2;grid-row:3}
  #team .roster{border-top:1px solid var(--line)}
  #team .rr{grid-template-columns:44px minmax(0,1fr) 20px;gap:6px 20px;align-items:start;padding:26px 8px}
  #team .rr:hover{padding-inline:8px}
  #team .rp,#team .rt{grid-column:2}
  #team .ra{grid-row:1;grid-column:3;align-self:center}
  #team .rn{display:flex;align-items:baseline;gap:12px}
  #team .rn em{margin:0}
  #team .rp{color:var(--ink);font-size:15px}
  #team .rt,#team .rt span{font-size:13px}
  #security .sect2{grid-template-columns:1fr 1fr;border-top:0}
  #security .sect2 > div,#security .sect2 > div + div{padding:32px 32px 32px 0;border-left:0;border-top:1px solid var(--line)}
  #security .sect2 > div:nth-child(2n){padding-left:32px;border-left:1px solid var(--line)}
}

/* the close: one dark moment for contrast, no colour in it */
.cta3 .day{background:radial-gradient(70% 120% at 50% -20%,rgb(255 255 255 / .09),transparent 60%),#0F1012!important;box-shadow:none!important}
.cta3 h2{color:#fff!important}
.cta3 p{color:rgb(255 255 255 / .62)!important}
.cta3 .btn-p{background:#fff;color:#0F1012}
.cta3 .btn-p:hover{background:#EDEDED}
.cta3 .btn-s{background:transparent!important;color:#fff;border-color:rgb(255 255 255 / .22)}
.cta3 .btn-s:hover{background:rgb(255 255 255 / .08)!important}

/* product: totals get the double rule, as on a real schedule */
.arw.tot{border-bottom:3px double var(--a-ink,#111)}
@media (min-width:1001px){#team .ri{grid-row:1 / span 3;align-self:start}#team .rp{margin-top:2px}}
.dhero.home h1 .dbl{background-position:0 100%,0 calc(100% - 5px)}
.dhero.home.sealed h1 .dbl{background-size:100% 1.5px,100% 1.5px}