/* The setup section: the one block that says the implementation is a single upload.
   It lives in its own sheet because the brokers page uses it too and does not load
   employers.css, and copying it would let the two drift. */



  /* what a rollout costs them: nothing */
  .zero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:0}
  .zerolead h2{max-width:none}
  .zerolead p{margin-top:24px;font-size:19px;line-height:1.6;color:var(--ink-1);max-width:34ch}
  .zpanel{background:var(--panel);border-radius:22px;padding:40px 44px 42px}
  .zlist{list-style:none}
  .zlist li{margin-top:11px}
  .zlist li:first-child{margin-top:0}
  .zw{position:relative;display:inline-block;font-size:21px;line-height:1.34;
      letter-spacing:-.012em;color:var(--ink-1)}
  .zw .ovl{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
  .zkept{margin-top:30px;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:23px;
         line-height:1.32;letter-spacing:-.02em;color:var(--ink)}

  /* the heading joined the left column, so the row is not half empty */
  .zerolead h2{max-width:none}
  .zerolead p{margin-top:22px}
  #sfzero .sfgone .zw{display:inline-block;position:relative;font-size:20px;line-height:1.3;
                      font-weight:400;color:var(--ink-2)}

/* ── the setup screen ──────────────────────────────────────────────────────
   The whole implementation fits inside one screen, and showing that is the argument.
   Bezel and proportions are the device kit's; on a white ground the dark frame reads
   sharply on its own, so it takes a shadow rather than the violet pool. */
.zudev{position:relative}
.zubez{background:linear-gradient(160deg,#3A3170,#171041 42%,#0B0730);
       border-radius:16px;padding:8px;box-shadow:0 34px 80px rgba(13,7,51,.30);
       box-shadow:0 34px 80px rgba(13,7,51,.30), 0 0 0 1px rgba(197,199,227,.15)}
.zubar{display:flex;gap:7px;padding:6px 8px 10px}
.zubar i{width:7px;height:7px;border-radius:50%;background:rgba(197,199,227,.34)}

/* the screen sets its own tokens, so nothing inside needs to know the page is light */
.zuscreen{--panel:#FFFFFF;--ink:#17075D;--ink-2:rgba(23,7,93,.62);
          --hair:rgba(23,7,93,.12);--accent:#E1541C;
          display:grid;grid-template-columns:58px 1fr;background:var(--panel);
          border-radius:9px;overflow:hidden;min-height:296px;color:var(--ink)}
.zuside{background:#F4F4F8;border-right:1px solid var(--hair);
        padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.zumark{width:19px;height:22px;color:#17075D;margin-bottom:8px}
.zunav{width:22px;height:4px;border-radius:2px;background:rgba(23,7,93,.14)}
.zunav.on{background:var(--accent)}

.zumain{padding:26px 30px 28px}
.zutitle{font-family:'Public Sans',system-ui,sans-serif;font-size:15px;font-weight:600;
         color:var(--ink)}
.zudrop{margin-top:16px;border:1.5px dashed rgba(23,7,93,.24);border-radius:12px;
        padding:20px 20px 22px;background:rgba(23,7,93,.025)}
.zufile{display:flex;align-items:center;gap:13px}
.zufi{width:30px;height:38px;border-radius:4px;flex:none;
      background:linear-gradient(160deg,#E1541C,#c4430f);position:relative}
.zufi::after{content:"";position:absolute;right:0;top:0;border-width:0 9px 9px 0;
             border-style:solid;border-color:#FFFFFF transparent}
.zufn{font-family:'Public Sans',system-ui,sans-serif;font-size:15px;color:var(--ink)}
.zufn i{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--ink-2)}
.zutrack{margin-top:16px;height:5px;border-radius:3px;background:rgba(23,7,93,.10);
         overflow:hidden}
.zufill{display:block;height:100%;width:100%;background:var(--accent);border-radius:3px;
        transform-origin:left center}
.zudone{margin-top:20px;display:flex;align-items:center;gap:11px;
        font-family:'Public Sans',system-ui,sans-serif;font-size:15px;font-weight:600;
        color:var(--ink)}
.zutick{width:21px;height:21px;border-radius:50%;background:var(--accent);flex:none;
        position:relative}
.zutick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;
               border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ── the loop ──────────────────────────────────────────────────────────────
   The whole act, on repeat: the cursor carries the file in, drops it, the bar fills,
   the tick lands, and it starts again. A loop because the reader arrives at an
   arbitrary moment and should not have to have caught the one performance.

   The finished screen is the resting state. The loop is only armed when the page can
   actually paint, so nobody is ever shown an empty drop zone and a blank bar. */
.zucarry{position:relative;display:block}
.zucur{position:absolute;left:104px;top:26px;width:14px;height:20px;
       display:block;opacity:0;pointer-events:none}
.zudrop{transition:border-color .3s ease,background .3s ease}

.zudev.armed .zufill{transform:scaleX(0)}
.zudev.armed .zudone{opacity:0}
.zudev.armed .zufile{opacity:0}

.zudev.armed.in .zucarry{animation:zu-carry var(--zl) cubic-bezier(.32,.06,.24,1) infinite}
.zudev.armed.in .zufile {animation:zu-file  var(--zl) linear infinite}
.zudev.armed.in .zucur  {animation:zu-cur   var(--zl) linear infinite}
.zudev.armed.in .zudrop {animation:zu-drop  var(--zl) linear infinite}
.zudev.armed.in .zufill {animation:zu-fill  var(--zl) cubic-bezier(.3,.02,.2,1) infinite}
.zudev.armed.in .zudone {animation:zu-done  var(--zl) linear infinite}
.zudev.armed{--zl:7.4s}

/* off screen the loop holds still rather than running to nobody */
.zudev.armed:not(.in) *{animation-play-state:paused}

@keyframes zu-carry{
  0%,4%   {transform:translate(122px,-64px) scale(1.03)}
  17%,100%{transform:translate(0,0) scale(1)}
}
@keyframes zu-file{
  0%      {opacity:0}
  4%      {opacity:1}
  0%,16%  {box-shadow:0 14px 30px rgba(13,7,51,.26)}
  20%,86% {opacity:1;box-shadow:0 0 0 rgba(13,7,51,0)}
  94%,100%{opacity:0}
}
@keyframes zu-cur{
  0%      {opacity:0}
  3%,16%  {opacity:1}
  22%,100%{opacity:0}
}
@keyframes zu-drop{
  0%,10%  {border-color:rgba(23,7,93,.24);background:rgba(23,7,93,.025)}
  15%,21% {border-color:var(--accent);background:rgba(225,84,28,.07)}
  28%,100%{border-color:rgba(23,7,93,.24);background:rgba(23,7,93,.025)}
}
@keyframes zu-fill{
  0%,22%  {transform:scaleX(0)}
  48%,88% {transform:scaleX(1)}
  95%,100%{transform:scaleX(0)}
}
@keyframes zu-done{
  0%,50%  {opacity:0}
  58%,88% {opacity:1}
  94%,100%{opacity:0}
}

/* the copy sits closer to the screen and carries more weight: the second line takes the
   accent, the way every other headline on the site marks its own payoff */
.zero{gap:44px}
.zerolead p{font-size:21px;line-height:1.56;color:var(--ink-1);max-width:30ch}
.zerolead .badges{margin-top:26px;gap:9px}
.zerolead .badges li{font-size:13.5px;padding:9px 17px}
@media (max-width:1080px){
  .zero{grid-template-columns:1fr;gap:30px}
  .zerolead p{font-size:19px}
  .zerolead .badges li{font-size:13px;padding:8px 15px}
}

/* ── the deep-ground variant ───────────────────────────────────────────────
   On the dark band the frame needs the pool of light behind it, the way every other
   device on the site has, or it sits on the ground instead of in it. */
.zdark .zudev::before{content:"";position:absolute;inset:-16% -10%;z-index:0;
  background:radial-gradient(closest-side,rgba(96,78,214,.32),rgba(96,78,214,0) 66%);
  pointer-events:none}
.zdark .zubez{position:relative;z-index:1;
  box-shadow:0 44px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(197,199,227,.15)}

/* ── the homepage section ──────────────────────────────────────────────────
   The two sides are read one at a time, the way the brokers page reads its three:
   the cards hold the argument and the frame beside them shows whichever is open.
   Side by side, a tall phone and a wide desktop never balanced, and the section paid
   for the taller of the two in height. */
.simple{max-width:1500px;margin:0 auto;padding:76px 56px 82px}
.simphead{text-align:center;max-width:48ch;margin:0 auto}
/* start on the same line: a card column and a frame that begin at different heights
   read as unbalanced however well each one is made */
.simsplit{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
          gap:56px;align-items:stretch;margin-top:56px}
.simtabs{display:flex;flex-direction:column;gap:18px;align-self:start}
.simtab{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
        background:var(--panel);border:1px solid rgba(197,199,227,.16);border-radius:20px;
        padding:24px 26px 26px;transition:border-color .22s ease,background .22s ease,
        transform .2s ease}
.simtab:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.42)}
.simtab[aria-expanded="true"]{border-color:var(--accent);background:rgba(255,122,61,.10)}
.simtab .gmk{display:block;width:26px;height:10px;overflow:hidden;
             transition:width .4s cubic-bezier(.2,.7,.2,1)}
.simtab .gmk svg{display:block;width:64px;height:10px;overflow:visible}
.simtab:hover .gmk,.simtab[aria-expanded="true"] .gmk{width:64px}
.simtab h3{margin-top:16px;font-family:'Fraunces',Georgia,serif;font-weight:500;
           font-size:clamp(21px,2vw,26px);letter-spacing:-.02em;line-height:1.18;
           color:var(--ink)}
.simbody{display:none}
.simtab[aria-expanded="true"] .simbody{display:block}
.simline{margin-top:16px;font-size:17px;line-height:1.56;color:var(--ink-1)}
.simtab .badges{margin-top:18px;gap:8px}
.simtab .badges li{font-size:12.5px;padding:7px 14px}

.simview{position:relative}
/* scoped per shot: a bare .simshot .zudev outranks .simphone and stretched the handset
   to the full column */
.simshot[data-s="co"] .zudev{width:100%}
.simshot[data-s="em"] .zudev{width:248px}
/* the phone is cropped, and shorter than it was: it no longer has a desktop beside it
   to keep up with */
/* Both sides occupy the same shelf, so the section does not jump when the card changes.
   The handset is built at 248 and scaled up rather than rebuilt wider: a phone widened
   to match a desktop stops being a phone, and a transform carries the type, the radii
   and the shadow up with it. The stage does the cropping. */
/* the frame is exactly as tall as the card column and starts on its top line. The
   desktop fills it, the handset is cropped by it. */
.simview{height:100%}
.simshot{height:100%;display:flex;justify-content:center;align-items:flex-start;
         overflow:hidden}
.simshot[data-s="em"] .zudev{transform:scale(1.52);transform-origin:top center}
/* a display value of our own outranks the browser's [hidden], and the closed side was
   still on the page as bare text */
.simshot[hidden]{display:none!important}
.simphone{width:248px}
.simphone .pscreen{aspect-ratio:auto;height:262px;overflow:hidden}

@media (max-width:1080px){
  .simsplit{grid-template-columns:1fr;gap:36px}
  .simphead{max-width:none}
  .simshot{height:360px}
  .simview{height:auto}
  .simshot[data-s="em"] .zudev{transform:scale(1.2)}
}


/* the phone. These rules went out with the previous version of this section and took
   the handset's frame with them, leaving its screen text loose on the page. */
.simphone{width:248px}
.pbez{position:relative;background:linear-gradient(160deg,#3A3170,#171041 42%,#0B0730);
      border-radius:34px;padding:7px;
      box-shadow:0 44px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(197,199,227,.15)}
.pnotch{position:absolute;left:50%;top:11px;transform:translateX(-50%);
        width:62px;height:5px;border-radius:3px;background:rgba(13,7,51,.85);z-index:2}
.pscreen{--panel:#FFFFFF;--ink:#17075D;--ink-2:rgba(23,7,93,.58);
         --hair:rgba(23,7,93,.12);--accent:#E1541C;
         background:var(--panel);border-radius:28px;overflow:hidden;
         aspect-ratio:9/19.5;padding:26px 18px 18px;color:var(--ink);
         display:flex;flex-direction:column}
.pnav{display:flex;align-items:center;gap:9px}
.pback{width:9px;height:9px;border:solid rgba(23,7,93,.55);border-width:0 0 1.6px 1.6px;
       transform:rotate(45deg);flex:none;margin-left:2px}
.ptrack{flex:1;height:4px;border-radius:2px;background:rgba(23,7,93,.10);overflow:hidden}
.ptrack i{display:block;height:100%;width:52%;background:#3B2E86;border-radius:2px}
.pstep{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-2)}
.pask{margin-top:20px;font-family:'Public Sans',system-ui,sans-serif;font-weight:600;
      font-size:13.5px;line-height:1.42;color:#3B2E86}
.pdrop{margin-top:16px;display:flex;align-items:center;gap:9px;
       border:1.4px dashed rgba(23,7,93,.22);border-radius:10px;padding:10px 12px;
       background:rgba(23,7,93,.025)}
.pdrop .zufi{width:18px;height:23px;border-radius:3px}
.pfn{font-family:'Public Sans',system-ui,sans-serif;font-size:12px;color:var(--ink)}
.plink{margin-top:14px;text-align:center;font-family:'Public Sans',system-ui,sans-serif;
       font-size:12px;color:#3B2E86;text-decoration:underline}
.pbtn{margin-top:12px;display:block;text-align:center;border-radius:8px;
      background:rgba(59,46,134,.28);color:#FFFFFF;padding:10px 0;
      font-family:'Public Sans',system-ui,sans-serif;font-weight:600;font-size:13px}

/* the phone runs the same beats as the desktop */
.zudev.armed .pdrop{opacity:0}
.zudev.armed.in .pdrop{animation:zu-pdrop var(--zl) linear infinite}
.zudev.armed.in .pbtn {animation:zu-pbtn  var(--zl) linear infinite}
@keyframes zu-pdrop{
  0%,8%   {opacity:0;transform:translateY(10px)}
  16%,88% {opacity:1;transform:translateY(0)}
  95%,100%{opacity:0;transform:translateY(10px)}
}
@keyframes zu-pbtn{
  0%,50%  {background:rgba(59,46,134,.28)}
  58%,88% {background:#3B2E86}
  95%,100%{background:rgba(59,46,134,.28)}
}
@media (prefers-reduced-motion: reduce){
  .zudev.armed .pdrop{opacity:1}
  .zudev.armed .pbtn{background:#3B2E86}
}

/* the light variant of the setup section. --panel IS white on this ground, so a card
   painted with it disappears behind a lavender hairline: the fill and the hairline both
   have to come from the ink instead. */
section.simple.light .simtab{background:rgba(23,7,93,.035);border-color:rgba(23,7,93,.12)}
section.simple.light .simtab:hover{background:rgba(23,7,93,.055);
                                   border-color:rgba(225,84,28,.45)}
section.simple.light .simtab[aria-expanded="true"]{border-color:var(--accent);
                                                   background:rgba(225,84,28,.07)}


@media (max-width:720px){
  /* inset:-16% -10% on a full-width frame reaches past the viewport */
  .zdark .zudev::before{inset:-10% 0}
  .simshot[data-s="em"] .zudev{transform:scale(1)}
}


/* ── phone ──────────────────────────────────────────────────────────────────
   On a phone there is no second column for the frame to sit in, so the tab
   pattern has nothing to switch: the two cards stand open and each one carries
   its own frame inside it. The script moves the frames in and out, so there is
   one copy of each rather than a mobile duplicate that would drift. */
@media (max-width:720px){
  .simple{padding:52px 20px 58px}
  .simsplit{gap:16px}
  .simtabs{gap:16px}
  .simphead{max-width:none}

  /* nothing to open, so nothing behaves like a control */
  .simtab{cursor:default;padding:24px 20px 22px}
  .simtab:hover{transform:none;border-color:rgba(197,199,227,.16)}
  .simtab .simbody{display:block}
  /* the bar is a mark here, not a hover affordance */
  .simtab .gmk{width:64px}

  .simtab .simshot{display:flex;height:auto;margin-top:24px;padding:0}
  .simtab .simshot[data-s="em"] .zudev{transform:none;width:220px}
  .simtab .simshot[data-s="co"] .zudev{width:100%}
  /* the column the frames used to live in has nothing left in it */
  .simview{display:none}
}