/* ==========================================================================
   BlueShifts — Police Calendar app
   Colours sampled directly from the in-app July 2026 month view.
   ========================================================================== */

:root{
  /* app-sampled palette */
  --paper:#EEF3FB;        /* page background            */
  --dow:#DBE6F5;          /* day-of-week band           */
  --white:#FFFFFF;
  --navy:#00338E;         /* scheduled shift cell       */
  --green:#3A7227;        /* leave block                */
  --gold:#FFC525;         /* off-duty block             */
  --prev-shift:#9EAFCF;   /* previous-month shift day   */
  --prev:#EBEDF2;         /* previous-month day         */
  --next:#AFC2B0;         /* next-month day             */
  --line:#E2E5EC;         /* grid hairline              */
  --ink:#030C35;          /* date + entry numerals      */
  --ink-dow:#3A5077;      /* Su Mo Tu We Th Fr Sa       */
  --muted:#9FA3B5;        /* previous-month numerals    */
  --blue:#0A63D6;         /* chevrons, links, actions   */
  --red:#CE1F1F;          /* earnings                   */
  --red-deep:#8E1616;     /* mileage deduction          */
  --ink-soft:#5A6B80;
  --line-soft:#DCE3EC;

  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(18px,5vw,60px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
/* the row of related links at the foot of a term page: plain text, not buttons */
.term-links{margin:0 0 6px;font-size:15.5px;line-height:1.9;color:var(--ink-soft)}
.term-links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:#9DB6DC;white-space:nowrap}
.term-links a:hover{text-decoration-color:currentColor}

/* body copy: a link should be visible as one without relying on colour alone */
.prose p a:not(.q),.prose li a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:#9DB6DC}
.prose p a:not(.q):hover,.prose li a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
[id]{scroll-margin-top:92px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--white);padding:10px 16px;border-radius:8px;z-index:99}

/* ============================ header ============================ */
.top{position:sticky;top:0;z-index:50;background:rgba(238,243,251,.94);backdrop-filter:blur(10px);border-bottom:1px solid #C9D1DB}
.top-in{display:flex;align-items:center;gap:13px;padding-block:11px}
.shield{height:48px;width:auto;display:block;flex:none}
.vrule{width:2px;align-self:stretch;background:var(--blue);border-radius:2px;margin-block:4px}
.mark{font-family:var(--display);font-size:27px;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:.02em}
.mark b{color:var(--blue);font-weight:700}
.mark em{display:block;font-family:var(--ui);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.15em;color:var(--ink-soft);margin-top:3px}
.nav{margin-left:auto;position:relative}
.menu{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0}
.menu a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.menu a:hover{color:var(--blue)}
.menu-btn{display:none;align-items:center;gap:9px;background:var(--white);border:1px solid #C9D1DB;border-radius:9px;
  padding:9px 15px;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);cursor:pointer}
.menu-btn:hover{border-color:var(--blue);color:var(--blue)}
.bars{display:grid;gap:3.5px}
.bars span{display:block;width:17px;height:2px;background:currentColor;border-radius:2px}
@media(max-width:820px){
  .menu-btn{display:flex}
  .menu{position:absolute;top:calc(100% + 12px);right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    min-width:210px;background:var(--white);border:1px solid #C9D1DB;border-radius:12px;padding:6px;
    box-shadow:0 18px 36px -18px rgba(3,12,53,.5);z-index:60}
  .menu.open{display:flex}
  .menu li+li{border-top:1px solid var(--line-soft)}
  .menu a{display:block;padding:12px 13px;font-size:13px}
}
.btn{display:inline-block;background:var(--blue);color:var(--white);font-size:14px;font-weight:600;letter-spacing:.04em;padding:10px 18px;border-radius:9px;border:1px solid #0951B0}
.btn:hover{background:#0951B0}
.btn.ghost{background:var(--white);color:var(--blue);border-color:#C9D1DB}
.btn.ghost:hover{background:var(--dow)}


/* ---- store buttons: equal size, centred, never wider than their box ----
   A two-column grid guarantees the pair are identical and share the space
   available, so neither can spill past the edge of a narrow container. */
.cta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;max-width:456px;margin-inline:auto;
}
.store{
  display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:11px;
  width:100%;height:62px;box-sizing:border-box;padding:0 14px;
  background:#0B2447;color:var(--white);border-radius:10px;white-space:nowrap;overflow:hidden;
}
.store:hover{background:#16345A}
.store svg{width:40px;height:40px;display:block;margin:0 auto;fill:currentColor}
.store span{min-width:0;overflow:hidden}
.store i{font-style:normal;display:block;font-size:8.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;opacity:.78;line-height:1.3}
.store b{display:block;font-size:16px;font-weight:700;line-height:1.15;letter-spacing:.01em}

@media(max-width:560px){
  .cta{gap:9px}
  .store{height:54px;padding:0 10px;column-gap:8px;grid-template-columns:33px minmax(0,1fr)}
  .store svg{width:33px;height:33px}
  .store b{font-size:13.5px}
  .store i{font-size:7.5px;letter-spacing:.09em}
}
@media(max-width:380px){
  .store{height:50px;padding:0 8px;column-gap:6px;grid-template-columns:28px minmax(0,1fr)}
  .store svg{width:28px;height:28px}
  .store b{font-size:12px}
  .store i{font-size:7px;letter-spacing:.06em}
}

/* ============================= hero ============================= */
/* One centred column. The second column used to hold a screenshot; the collage
   below took that job, and an empty 420px track was leaving the hero stranded
   against the left edge on a wide screen. */
.hero{max-width:860px;margin-inline:auto;
  padding-block:clamp(24px,3.4vw,44px) clamp(20px,3vw,34px)}
.hero h1{max-width:16ch}
.hero .lede{max-width:58ch}
.hero .eyebrow{margin-bottom:16px}
.hero .cta{margin-inline:0}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:0 0 14px}
h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,6.6vw,80px);font-weight:700;line-height:.96;margin:0;max-width:14ch}
h1 span{color:var(--blue)}
.lede{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-soft);max-width:50ch;margin:20px 0 26px}








/* =========================== collage ============================
   Five real screens, fanned. The calendar sits centre and forward —
   it is the middle of the app, so it is the middle of the fan.
   ================================================================ */
.collage-wrap{padding-block:clamp(6px,1.6vw,20px) clamp(22px,3vw,34px)}
.collage{
  display:flex;align-items:flex-start;justify-content:center;
  gap:0;padding-top:14px;
}
.shot{
  position:relative;flex:0 0 auto;width:19%;margin-inline:-2.4%;
  border-radius:20px;overflow:hidden;background:var(--paper);
  border:1px solid #C2CEDD;
  box-shadow:0 22px 44px -22px rgba(3,12,53,.5);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
  cursor:zoom-in;
  opacity:0;animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(20px) scale(var(--s,1))}to{opacity:1;transform:translateY(var(--y,0)) scale(var(--s,1))}}
.shot img{display:block;width:100%;height:auto}
.shot.s1{--s:.86;--y:36px;z-index:1;animation-delay:.10s}
.shot.s2{--s:.93;--y:18px;z-index:2;animation-delay:.05s}
.shot.s3{--s:1;--y:0;z-index:3;animation-delay:0s;box-shadow:0 30px 56px -20px rgba(3,12,53,.6)}
.shot.s4{--s:.93;--y:18px;z-index:2;animation-delay:.05s}
.shot.s5{--s:.86;--y:36px;z-index:1;animation-delay:.10s}
.shot.s6{--s:.80;--y:52px;z-index:0;animation-delay:.14s}
.shot.s7{--s:.74;--y:70px;z-index:0;animation-delay:.18s}
.shot:hover,.shot:focus-visible{transform:translateY(calc(var(--y,0) - 14px)) scale(calc(var(--s,1) + .03));z-index:6;
  box-shadow:0 34px 60px -22px rgba(3,12,53,.62)}
.shot .tag{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  background:linear-gradient(transparent,rgba(3,12,53,.86));
  color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
.shot-note{margin:22px auto 0;max-width:60ch;text-align:center;font-size:14px;color:var(--ink-soft)}

@media(max-width:820px){
  /* swipeable strip on a phone — one screen at a time, snapping into place */
  .collage{
    display:grid;grid-auto-flow:column;grid-auto-columns:60%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 6vw 30px;
    margin-inline:calc(var(--pad) * -1);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .collage::-webkit-scrollbar{display:none}
  /* the screen in the middle sits at full size; the ones either side sit back */
  .shot{
    width:auto;margin:0;scroll-snap-align:center;border-radius:16px;
    animation:none;opacity:.55;transform:scale(.84);transform-origin:center center;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease,box-shadow .3s ease;
    box-shadow:0 12px 26px -20px rgba(3,12,53,.5);
  }
  .shot.is-active{opacity:1;transform:scale(1);box-shadow:0 26px 50px -22px rgba(3,12,53,.6)}
  .shot:hover,.shot:focus-visible{transform:scale(.84)}
  .shot.is-active:hover,.shot.is-active:focus-visible{transform:scale(1)}
  .shot .tag{font-size:11px;padding:24px 8px 8px}
}
@media(max-width:420px){
  .collage{grid-auto-columns:68%;gap:11px}
}
.only-mobile{display:none}
@media(max-width:820px){.only-mobile{display:inline}
  .menu li.only-mobile{display:block}}

/* lightbox */
.box{position:fixed;inset:0;z-index:90;background:rgba(3,12,53,.88);display:none;place-items:center;padding:24px}
.box.on{display:grid}
.box img{max-width:min(94vw,420px);max-height:92vh;width:auto;border-radius:18px;box-shadow:0 30px 70px -20px #000}
.box button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1}
.box button:hover{background:rgba(255,255,255,.26)}


/* ===================== calendar legend ========================== */
.legend-wrap{padding-block:0 clamp(22px,3vw,34px)}
.legend-box{background:var(--white);border-radius:14px;padding:clamp(20px,3vw,28px);box-shadow:0 1px 3px rgba(3,12,53,.16)}
.legend-h{font-family:var(--display);text-transform:uppercase;font-size:22px;font-weight:700;margin:0 0 4px}
.legend-sub{margin:0 0 20px;font-size:14.5px;color:var(--ink-soft)}
.legend{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:16px 0}
/* a hairline between the columns, so the two halves read as separate lists */
.legend li{padding-left:22px;border-left:1px solid var(--line)}
.legend li:nth-child(2n+1){padding-left:0;border-left:0}
@media(min-width:900px){
  .legend{grid-template-columns:repeat(4,1fr)}
  .legend li:nth-child(2n+1){padding-left:22px;border-left:1px solid var(--line)}
  .legend li:nth-child(4n+1){padding-left:0;border-left:0}
}
.legend li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:13px}
.legend .txt{min-width:0}
.legend .txt b{display:block;font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
.legend .txt small{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
/* a miniature of the real cell: top band + entry block, hairline between */
.cell{flex:none;width:40px;height:38px;display:grid;grid-template-rows:35.8% 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.cell i,.cell u{display:block;background:var(--white);text-decoration:none}
.cell u{display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--ink);line-height:1}
.cell.shift i,.cell.shift u{background:var(--navy)}
.cell.today i,.cell.today u{background:var(--gold)}
/* the rest of what a calendar cell can show */
.cell.leave i,.cell.leave u{background:#4A7C2F}
.cell.faded i,.cell.faded u{background:#C7D3E6}
/* the sun and moon are lifted straight from the app, not redrawn */
.cell.ic2 i{display:flex;align-items:center;justify-content:center;gap:2px}
.cell.ic2 i img{display:block;width:11px;height:11px}
.cell.picked{position:relative}
.cell.picked u{position:relative}
.cell.picked u::after{content:"";position:absolute;inset:3px;border:2px solid #fff;border-radius:3px}
.cell.leave i,.cell.leave u{background:var(--green)}

/* ============================ sections =========================== */
section{padding-block:clamp(24px,3.2vw,44px)}
.sec-head{max-width:58ch;margin-bottom:clamp(18px,2.6vw,30px)}
.sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,4.4vw,50px);font-weight:700;margin:0;line-height:1}
.sec-head p{color:var(--ink-soft);margin:14px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:15px}
.card{display:grid;grid-template-columns:6px 1fr;background:var(--white);border-radius:12px;overflow:hidden;
      box-shadow:0 1px 3px rgba(3,12,53,.16);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(3,12,53,.5)}
.card .bar{background:var(--navy)}
.card.b2 .bar{background:var(--gold)}
.card.b3 .bar{background:var(--blue)}
.card.b4 .bar{background:var(--green)}
.card .in{padding:22px 22px 24px}
.card h3{font-size:20px;font-weight:700;margin:0 0 9px}
.card p{margin:0;color:var(--ink-soft);font-size:15.5px}
.card ul{margin:13px 0 0;padding:0;list-style:none}
.card li{font-size:14.5px;color:var(--ink-soft);padding-left:16px;position:relative;margin-top:7px}
.card li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--navy)}
.card.b2 li::before{background:var(--gold)}
.card.b3 li::before{background:var(--blue)}
.card.b4 li::before{background:var(--green)}

.band-navy{background:var(--navy);color:var(--white)}
.band-navy h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4.2vw,46px);font-weight:700;margin:0;max-width:17ch;line-height:1}
.band-navy h2 span{color:#8FBBF5}
.band-navy>.wrap>p{color:#C3D3EA;max-width:54ch;margin:16px 0 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:22px;margin-top:36px}
.cols div{border-top:3px solid rgba(255,255,255,.22);padding-top:13px}
.cols h3{font-size:17.5px;font-weight:700;margin:0}
.cols p{font-size:15px;color:#C3D3EA;margin:6px 0 0}

.get{text-align:center}
.get h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(32px,5vw,58px);font-weight:700;margin:0;line-height:1.02}
.get p{color:var(--ink-soft);max-width:44ch;margin:12px auto 20px}


footer{border-top:3px solid var(--blue);background:var(--white);padding-block:24px;font-size:14px;color:var(--ink-soft)}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.foot .shield{height:42px}
.foot .mark{font-size:22px}

.fnote{width:100%;font-size:12.5px;color:#8494A6;border-top:1px solid var(--line-soft);padding-top:13px;margin:0}

/* ============================ 404 ============================ */
.mid{min-height:62vh;display:grid;place-items:center;text-align:center}
.mid h1{max-width:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition:none!important}
  .c{opacity:1}
  html{scroll-behavior:auto}
}

/* ======================= interior pages ========================= */
.brand{display:flex;align-items:center;gap:13px;color:inherit}
.brand:hover .mark b{color:#0951B0}
.page-head{padding-block:clamp(22px,3vw,38px) clamp(16px,2.2vw,24px);max-width:900px}
.page-head h1{max-width:20ch}
.page-head .meta{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 0}
.page-head .lede{margin-bottom:0}

/* ---- support form ---- */
.form-wrap{max-width:720px;padding-bottom:clamp(30px,4vw,52px)}
.form{background:var(--white);border-radius:14px;padding:clamp(20px,3vw,30px);box-shadow:0 1px 3px rgba(3,12,53,.16);display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid #C9D1DB;border-radius:9px;padding:11px 13px;width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:var(--white)}
.field .bad{border-color:var(--red);background:#FDF4F4}
.err{display:none;margin:0;font-size:13.5px;color:var(--red);font-weight:600}
.err.on{display:block}
.form .btn{justify-self:start;cursor:pointer;font-family:var(--ui)}
.form .btn[disabled]{opacity:.6;cursor:default}
.state{background:var(--white);border-radius:14px;padding:clamp(24px,4vw,36px);box-shadow:0 1px 3px rgba(3,12,53,.16);border-left:6px solid var(--green)}
.state.bad{border-left-color:var(--red)}
.state h2{font-family:var(--display);text-transform:uppercase;font-size:30px;font-weight:700;margin:0 0 10px}
.state p{margin:0 0 14px;color:var(--ink-soft)}
.state .btn{cursor:pointer;font-family:var(--ui)}

/* ---- legal document ---- */
.doc-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:start;padding-bottom:clamp(30px,4vw,52px)}
@media(max-width:880px){.doc-wrap{grid-template-columns:1fr}}
.toc{position:sticky;top:86px;background:var(--white);border-radius:12px;padding:18px 18px 20px;box-shadow:0 1px 3px rgba(3,12,53,.16)}
@media(max-width:880px){.toc{position:static}}
.toc-h{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.toc ol{margin:0;padding-left:20px;display:grid;gap:6px}
.toc li{font-size:14px;color:var(--ink-soft)}
.toc a{color:var(--ink-soft)}
.toc a:hover{color:var(--blue)}
.doc{background:var(--white);border-radius:14px;padding:clamp(22px,3.4vw,44px);box-shadow:0 1px 3px rgba(3,12,53,.16);max-width:76ch}
.doc h2{display:flex;align-items:center;gap:12px;font-family:var(--display);text-transform:uppercase;font-size:clamp(23px,2.6vw,30px);font-weight:700;
        margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line-soft);line-height:1}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h2 span{display:grid;place-items:center;flex:none;width:34px;height:34px;background:var(--navy);color:var(--white);
             font-size:18px;font-weight:700;border-radius:7px}
.doc h3{font-size:17px;font-weight:700;margin:20px 0 8px;color:var(--blue)}
.doc p{margin:0 0 12px;font-size:16px;color:#243A55}
.doc ul{margin:0 0 14px;padding:0;list-style:none}
.doc li{position:relative;padding-left:18px;margin-top:7px;font-size:15.5px;color:#243A55}
.doc li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--gold)}
.doc .strong-note{font-weight:700;background:var(--dow);border-left:5px solid var(--navy);padding:13px 15px;border-radius:0 8px 8px 0}
.doc-end{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-soft)}

/* ==================== rotating shift pages ====================== */
/* dropdown in the header menu */
.menu .has-sub{position:relative}
.menu .has-sub>button{background:none;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}
.menu .has-sub>button:hover,.menu .has-sub[data-open="true"]>button{color:var(--blue)}
.menu .has-sub>button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.sub{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:250px;background:var(--white);border:1px solid #C9D1DB;border-radius:12px;display:none;z-index:70;
  box-shadow:0 18px 36px -18px rgba(3,12,53,.5)}
.menu .has-sub[data-open="true"] .sub{display:block}
.sub a{display:block;padding:10px 12px;font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--ink);border-radius:7px}
.sub a:hover{background:var(--dow);color:var(--blue)}
.sub a small{display:block;font-size:11.5px;color:var(--ink-soft)}
.sub .all{border-top:1px solid var(--line-soft);margin-top:5px;padding-top:8px;font-weight:700;color:var(--blue)}
@media(max-width:820px){
  .menu .has-sub{border-top:1px solid var(--line-soft)}
  .menu .has-sub>button{display:flex;width:100%;justify-content:space-between;padding:12px 13px;font-size:13px;color:var(--ink-soft)}
  .menu .has-sub>button::after{transform:rotate(45deg);transition:transform .2s ease}
  .menu .has-sub[data-open="true"]>button::after{transform:rotate(225deg)}
  .sub{position:static;transform:none;display:none;min-width:0;border:0;box-shadow:none;padding:0 0 6px;background:none}
  .menu .has-sub[data-open="true"] .sub{display:block}
  .sub a{padding:10px 13px 10px 28px;font-size:12.5px}
  .sub a small{display:none}
  .sub .all{margin-left:15px}
}

/* breadcrumb + page intro */
.crumb{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--blue)}
.pat-head{padding-block:clamp(20px,2.8vw,34px) 0;max-width:900px}
.pat-head h1{font-size:clamp(34px,5.4vw,64px);max-width:18ch}
.pat-head .lede{margin-bottom:0}

/* quick facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:clamp(24px,3vw,34px)}
.facts div{background:var(--white);padding:15px 17px}
.facts dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 5px}
.facts dd{margin:0;font-size:17px;font-weight:700;color:var(--ink)}

/* one cycle, drawn exactly as the app's rotation template screen draws it.
   Tile geometry measured from the app: 50 x 46pt tiles, 4pt column gap,
   8pt row gap, 2px blue border, seven tiles to a row. */
.cycle{margin:26px 0 8px}
.cyc{
  display:grid;grid-template-columns:repeat(7,minmax(0,50px));
  column-gap:4px;row-gap:8px;justify-content:start;max-width:374px;
}
.cyc span{
  aspect-ratio:150/138;border-radius:10px;background:var(--paper);border:2px solid #1A56DB;
  display:grid;place-content:center;justify-items:center;gap:0;
}
.cyc span b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.cyc .mk{width:12px;height:12px;display:block}
.cyc .d{background:#D97706;border-color:#D97706}
.cyc .n{background:#4338CA;border-color:#4338CA}
.cyc .h{background:linear-gradient(140deg,#D97706 0 52%,#4338CA 52% 100%);border-color:#4338CA}
.cyc .d b,.cyc .n b,.cyc .h b{color:#fff}
.cyc-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-soft);margin:12px 0 0}
.cyc-key span{display:flex;align-items:center;gap:7px}
.cyc-key i{width:15px;height:15px;display:inline-block;border-radius:4px;border:2px solid #1A56DB;background:var(--paper)}
.cyc-key .k-d{background:#D97706;border-color:#D97706}
.cyc-key .k-n{background:#4338CA;border-color:#4338CA}
.cyc-key .k-h{background:linear-gradient(140deg,#D97706 0 52%,#4338CA 52% 100%);border-color:#4338CA}

/* on a narrow phone the seven columns share the width instead of overflowing */
@media(max-width:420px){
  .cyc{grid-template-columns:repeat(7,minmax(0,1fr));max-width:none}
  .cyc span b{font-size:13px}
  .cyc .mk{width:11px;height:11px}
}

/* prose */
.prose{max-width:74ch}
.prose h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.2vw,34px);font-weight:700;
  margin:30px 0 11px;line-height:1}
.prose h3{font-size:18px;font-weight:700;margin:26px 0 8px}
.prose p{margin:0 0 14px;font-size:16.5px;color:#243A55}
.prose ul{margin:0 0 16px;padding:0;list-style:none}
.prose li{position:relative;padding-left:19px;margin-top:8px;font-size:16px;color:#243A55}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--navy)}
.pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:18px 0 6px}
.pc>div{background:var(--white);border-radius:12px;padding:20px 22px;box-shadow:0 1px 3px rgba(3,12,53,.14);
  border-left:6px solid var(--green)}
.pc>div.con{border-left-color:#B3402F}
.pc h3{margin:0 0 8px}
.pc li::before{background:var(--green)}
.pc .con li::before{background:#B3402F}

/* download call-out used mid-page and at the foot of every page */
.grab{background:var(--white);border-radius:14px;padding:clamp(20px,2.6vw,28px);margin:26px 0 0;
  box-shadow:0 1px 3px rgba(3,12,53,.16);border-top:4px solid var(--blue)}
.grab.wide{margin-top:0}
.grab .cta,.grab-band .cta{margin-inline:auto}
.grab h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.4vw,36px);font-weight:700;margin:0 0 10px;line-height:1}
.grab p{margin:0 0 18px;color:var(--ink-soft);font-size:16px;max-width:60ch}
.trial{margin:14px 0 0;font-size:14.5px;color:var(--ink-soft)}
.trial b{color:var(--ink);font-weight:700}
.grab-band{background:var(--navy);color:var(--white)}
.grab-band h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,4vw,44px);font-weight:700;margin:0 0 12px;line-height:1}
.grab-band p{color:#C3D3EA;max-width:56ch;margin:0 0 20px}
.grab-band .trial{color:#A9C0DE}
.grab-band .trial b{color:#fff}

/* pattern index */
.pat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:15px}
.pat-card{display:block;background:var(--white);border-radius:12px;padding:22px 22px 24px;color:inherit;
  box-shadow:0 1px 3px rgba(3,12,53,.16);border-left:6px solid var(--navy);transition:transform .18s ease,box-shadow .18s ease}
.pat-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(3,12,53,.5)}
.pat-card h3,.pat-card h2.cardh{font-size:20px;font-weight:700;margin:0 0 4px}
.pat-card .alias{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 9px}
.pat-card p{margin:0;font-size:15px;color:var(--ink-soft)}


.cyc-note{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft);background:var(--white);
  border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:12px 15px}

/* payment status legend, matching the app's buttons */
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0 22px}
.pstat{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:11px;padding:13px 15px;
  box-shadow:0 1px 3px rgba(3,12,53,.14)}
.pstat .chip{display:grid;place-items:center;width:40px;height:36px;flex:none;border:1px solid #C9D1DB;
  border-radius:8px;background:linear-gradient(#FBFCFE,#E8EDF5);font-size:20px;font-weight:800;line-height:1}
.pstat b{font-size:15px;font-weight:700}
.chip.s-pend{color:#E0A31E}
.chip.s-unpaid{color:#D32F2F}
.chip.s-paid{color:#2E7D32}
.chip.s-cancel{color:#123A85}
.disclaimer{margin-top:28px;padding:14px 16px;background:var(--dow);border-left:4px solid var(--navy);
  border-radius:0 8px 8px 0;font-size:14.5px;color:var(--ink-soft)}

/* a real page of the exported report */
.repshot{margin:20px 0 24px;background:var(--white);border:1px solid #C9D1DB;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 26px -18px rgba(3,12,53,.5)}
.repshot img{display:block;width:100%;height:auto}
.repshot figcaption{font-size:13.5px;color:var(--ink-soft);padding:11px 15px 13px;border-top:1px solid var(--line-soft);
  background:var(--paper)}

/* flyers */
.flyer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.flyer-card{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(3,12,53,.16);
  display:flex;flex-direction:column}
.flyer-card img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line-soft)}
.flyer-card .in{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.flyer-card h2{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:700;margin:0;line-height:1}
.flyer-card p{margin:0;color:var(--ink-soft);font-size:15.5px;flex:1}
.flyer-card .btn{align-self:flex-start;margin-top:4px}
/* who built it */
.maker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--white);
  border-radius:14px;padding:24px 26px;box-shadow:0 1px 3px rgba(3,12,53,.16);border-left:6px solid var(--navy)}
.maker img{width:64px;height:auto;display:block}
.maker h2{font-family:var(--display);text-transform:uppercase;font-size:26px;font-weight:700;margin:0 0 8px;line-height:1}
.maker p{margin:0 0 10px;color:var(--ink-soft);font-size:16px}
.maker p:last-child{margin-bottom:0}
@media(max-width:560px){.maker{grid-template-columns:1fr}.maker img{width:56px}}

/* store QR codes — shown at every size: scan from a computer, or hold your
   phone up for the officer standing next to you. */
/* the codes line up with the store buttons above them, which are centred
   in a 456px column, so the codes centre on the same axis */
.qrs{display:block;margin-top:30px;width:100%;max-width:560px;margin-inline:auto}
.qrs-lead{margin:0 0 16px;font-size:14.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);text-align:center}
.qrs-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.qrs figure{margin:0;background:var(--white);border:1px solid #C9D1DB;border-radius:14px;padding:14px 14px 10px;
  width:172px;text-align:center}
.qrs img{display:block;width:144px;height:144px;image-rendering:pixelated;margin:0 auto}
.qrs figcaption{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  padding-top:9px}
.grab-band .qrs-lead{color:#C3D3EA}
.grab-band .qrs figure{border-color:rgba(255,255,255,.25)}
@media(max-width:560px){
  .qrs{margin-top:26px}
  .qrs-row{gap:20px}
  .qrs figure{width:168px;padding:13px 13px 9px}
  .qrs img{width:140px;height:140px}
  .qrs figcaption{font-size:12px}
}

/* ================== head-to-head comparison unit ==================
   One block. Our name top left, theirs top right, the feature sitting
   between the two answers. Built on a real table so it stays readable
   to screen readers and to Google. */

.vsunit{background:var(--white);border-radius:16px;overflow:hidden;margin:22px 0 12px;
  box-shadow:0 14px 34px -24px rgba(3,12,53,.55),0 1px 3px rgba(3,12,53,.16)}
.vsunit .cmp{width:100%;border-collapse:separate;border-spacing:0;display:block}

/* the two names, once, at the top. Each side gets its own background so
   it is obvious at a glance which column belongs to which app: ours is the
   solid shift-blue the app uses, theirs is a light neutral panel, with a
   white gutter between the two. */
.vsunit thead{display:block}
.vsunit thead tr{display:grid;grid-template-columns:1fr 74px 1fr;align-items:stretch}
.vsunit thead th{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.6vw,27px);
  font-weight:700;letter-spacing:.02em;padding:22px 14px 20px;text-align:center;line-height:1.05;position:relative}
.vsunit thead th::after{content:"";position:absolute;left:20%;right:20%;bottom:12px;height:4px;border-radius:3px}

.vsunit thead th.ours{background:#00338E;color:#fff}
.vsunit thead th.ours::after{background:#FFC525}

.vsunit thead th.theirs{background:#E8ECF3;color:#3A4A63;font-weight:600}
.vsunit thead th.theirs::after{background:#AEB9CA}

.vsunit thead th.fcol{background:var(--white);padding:0;display:grid;place-items:center;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 #D6DCE6}
.vsunit thead th.fcol::after{display:none}
.vsunit thead th.fcol span{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--ink-soft);text-transform:uppercase;width:34px;height:34px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}

/* the rows */
.vsunit tbody{display:block}
.vsunit tbody tr{display:grid;grid-template-columns:1fr minmax(120px,1.5fr) 1fr;align-items:stretch;
  border-top:1px solid var(--line-soft)}
.vsunit tbody tr:first-child{border-top:0}
.vsunit tbody th{font-weight:600;font-size:14.5px;color:var(--ink);padding:14px 12px;text-align:center;
  display:grid;align-items:center;background:var(--paper);border-inline:1px solid var(--line-soft)}
.vsunit tbody td{padding:14px 10px;display:grid;place-items:center;text-align:center}
.vsunit td.ours{background:rgba(0,51,142,.055)}
.vsunit tbody tr:hover td.ours{background:rgba(0,51,142,.1)}
.vsunit td.theirs{background:rgba(58,74,99,.035)}
.vsunit tbody tr:hover td.theirs{background:rgba(58,74,99,.07)}
.vsunit tbody tr:hover th{background:#EEF4FD}

/* section dividers */
.vsunit tbody tr.sec{display:block;border-top:0}
.vsunit tbody tr.sec th{display:block;background:#E3EAF6;color:#123A85;font-family:var(--display);
  text-transform:uppercase;font-size:15px;letter-spacing:.1em;padding:11px 16px;text-align:center;
  border-top:1px solid #C6D3E8;border-bottom:1px solid #C6D3E8}

/* the markers */
.mk{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;color:var(--ink);
  font-size:12.5px;line-height:1.25}
.mk .ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:700;color:#fff;line-height:1}
.mk.yes .ic{background:#2E7D32;box-shadow:0 2px 6px -2px rgba(46,125,50,.7)}
.mk.yes .ic::before{content:"\2713"}
.mk.dev .ic{background:#E0A31E;color:#3B2A00}
.mk.dev .ic::before{content:"\2026";font-size:18px;line-height:.5}
.mk.no .ic{background:#CBD3DF}
.mk.no .ic::before{content:"\2013"}
.mk.info .ic{background:var(--blue)}
.mk.info .ic::before{content:"i";font-family:Georgia,serif;font-style:italic}
.mk.no{color:var(--ink-soft);font-weight:500}
.mk .lb{display:block}
.mk .lb small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.3}

/* legend under the unit */
.legend-mk{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 12px;padding:13px 16px;background:var(--white);
  border-radius:11px;box-shadow:0 1px 3px rgba(3,12,53,.14);font-size:13px;justify-content:center}
.legend-mk .mk{flex-direction:row;align-items:center;gap:8px;font-size:13px}
.legend-mk .mk .ic{width:20px;height:20px;font-size:12px}

.src{font-size:14px;color:var(--ink-soft)}
.fairness{background:var(--dow);border-left:5px solid var(--navy);border-radius:0 10px 10px 0;
  padding:18px 20px 20px;margin:26px 0 24px}
.fairness>*:last-child{margin-bottom:0}
.fairness h2{font-size:20px;margin:0 0 10px}
.fairness p{font-size:15px;margin-bottom:10px}
.fairness p:last-child{margin-bottom:0}

@media(max-width:560px){
  .vsunit thead tr{grid-template-columns:1fr 44px 1fr}
  .vsunit thead th{font-size:18px;padding:17px 6px 16px}
  .vsunit thead th::after{bottom:9px;height:3px;left:16%;right:16%}
  .vsunit thead th.fcol span{width:26px;height:26px;font-size:9px}
  .vsunit tbody tr{grid-template-columns:1fr minmax(96px,1.3fr) 1fr}
  .vsunit tbody th{font-size:12.5px;padding:12px 8px}
  .vsunit tbody td{padding:12px 6px}
  .mk{font-size:11px}
  .mk .ic{width:26px;height:26px;font-size:14px}
  .mk .lb small{font-size:10.5px}
  .legend-mk{gap:10px 16px;font-size:12px}
}

/* who else uses it */
.jobs-lead{margin:26px 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.jobs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.jobs li{background:var(--white);border:1px solid #C9D1DB;border-radius:3px;padding:8px 14px;font-size:14.5px;
  color:var(--ink)}

@media(max-width:560px){.jobs li{font-size:13.5px;padding:7px 13px}}

/* the flexible-categories section follows another section, so the two lots of
   padding stack into a big empty band — pull the top back */
#anyone{padding-top:clamp(10px,1.6vw,20px)}

/* suggested setup block on the role pages */
.setup{background:var(--white);border-radius:14px;padding:22px 24px 24px;margin:6px 0 26px;
  box-shadow:0 1px 3px rgba(3,12,53,.16);border-left:6px solid var(--blue)}
.setup h3{font-family:var(--display);text-transform:uppercase;font-size:21px;font-weight:700;margin:0 0 14px;line-height:1}
.setup ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.setup li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;align-items:baseline;font-size:15.5px}
.setup b{font-weight:700;color:var(--ink)}
.setup span{color:var(--ink-soft)}
@media(max-width:520px){.setup li{grid-template-columns:1fr;gap:2px}}

/* sticky install bar on long content pages */
.installbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  backdrop-filter:saturate(160%) blur(8px);box-shadow:0 -6px 22px -12px rgba(3,12,53,.55);
  border-top:1px solid var(--line);animation:ibUp .22s ease-out}
@keyframes ibUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.installbar[hidden]{display:none}
.installbar img{flex:none}
.ib-txt{flex:1;min-width:0;line-height:1.2}
.ib-txt b{display:block;font-family:var(--display);text-transform:uppercase;font-size:16px;color:var(--ink)}
.ib-txt span{display:block;font-size:12px;color:var(--ink-soft)}
.ib-get{flex:none;background:var(--blue);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;
  padding:10px 18px;border-radius:999px;white-space:nowrap}
.ib-get:hover{background:#153F9E}
.ib-x{flex:none;background:none;border:0;font-size:22px;line-height:1;color:var(--ink-soft);padding:4px 2px;
  cursor:pointer}
/* The app exists for iPhone, iPad and Android only. The bar is therefore
   hidden unless the page has positively identified one of those - a desktop
   visitor never sees it, whatever the window size. iPad included, since the
   app installs there. Desktop gets the download block and QR codes instead. */
.installbar{display:none}
html.is-mobile .installbar:not([hidden]){display:flex}

/* ================= off-duty analytics page =====================
   Graphics are built in HTML/SVG in the site's own styling rather than
   pasted screenshots: sharp at any size, quick to load, and every figure
   is an illustration rather than anyone's real pay. */

.ana-q{font-family:var(--display);text-transform:uppercase;font-size:clamp(23px,3.2vw,34px);font-weight:700;
  margin:38px 0 10px;line-height:1.05;color:var(--ink)}
.ana-q span{display:block;font-family:var(--ui);text-transform:none;font-size:15px;font-weight:400;
  letter-spacing:0;color:var(--ink-soft);margin-top:7px}
.demo-note{font-size:12.5px;color:var(--ink-soft);margin:10px 2px 30px;font-style:italic}

/* a card that looks like a panel from the app */
.panel{background:var(--white);border-radius:16px;padding:20px 20px 22px;box-shadow:0 1px 3px rgba(3,12,53,.16);
  margin:0 0 14px}
.panel-h{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.panel-h .av{width:40px;height:40px;border-radius:50%;background:#E7EEFB;display:grid;place-items:center;
  color:var(--blue);font-weight:700;font-size:15px;flex:none}
.panel-h b{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.02em;color:var(--ink)}
.panel-h small{display:block;font-family:var(--ui);text-transform:none;font-size:12.5px;font-weight:400;
  letter-spacing:0;color:var(--ink-soft);margin-top:2px}

/* four-up stat row */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;margin:0 0 18px}
.statrow div{background:var(--paper);border-radius:11px;padding:12px 6px}
.statrow b{display:block;font-size:clamp(17px,2.4vw,21px);font-weight:700;color:var(--ink);line-height:1.15}
.statrow span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:3px}
@media(max-width:520px){.statrow{grid-template-columns:repeat(2,1fr)}}

/* paid / pending */
.pp{margin:4px 0 0}
.pp .track{height:14px;border-radius:8px;overflow:hidden;display:flex;background:var(--line-soft)}
.pp .paid{background:#2E7D32}
.pp .pend{background:#C63A2E}
.pp .key{display:flex;justify-content:space-between;font-size:14px;margin-top:9px}
.pp .key .g{color:#2E7D32;font-weight:700}
.pp .key .r{color:#C63A2E;font-weight:700}
.pp .key i{font-style:normal;color:var(--ink-soft);font-weight:400}

/* share bars */
.share{display:grid;gap:14px;margin:2px 0 0}
.share .row b{font-size:14.5px;color:var(--ink)}
.share .row .pct{float:right;color:var(--blue);font-weight:700;font-size:14.5px}
.share .track{height:10px;background:var(--line-soft);border-radius:6px;margin:7px 0 4px;overflow:hidden}
.share .fill{height:100%;background:var(--blue);border-radius:6px}
.share small{font-size:12px;color:var(--ink-soft)}

/* days of the week */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:132px;margin:6px 0 0}
.days .d{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.days .bar{background:#C9D8F2;border-radius:6px 6px 0 0}
.days .bar.hot{background:var(--blue)}
.days .n{font-size:11.5px;color:var(--ink-soft);margin-bottom:4px}
.days .lb{font-size:12px;color:var(--ink-soft);margin-top:7px;border-top:1px solid var(--line-soft);padding-top:6px}
.insight{display:flex;gap:9px;align-items:center;margin:14px 0 0;font-weight:600;font-size:15px;color:var(--ink)}
.insight .sp{color:var(--blue);font-size:17px}

/* employer effectiveness table */
.eff{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.eff th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;
  text-align:right;padding:0 0 10px}
.eff th:first-child{text-align:left}
.eff td{padding:12px 0;border-top:1px solid var(--line-soft);text-align:right;color:var(--ink-soft)}
.eff td:first-child{text-align:left;color:var(--ink);font-weight:600}
.eff td.this{color:var(--ink);font-weight:700}
.eff td.up{color:#2E7D32;font-weight:700;white-space:nowrap}
.eff td.down{color:#C63A2E;font-weight:700;white-space:nowrap}

/* ranked employers */
.rank{display:grid;gap:12px;margin:2px 0 0}
.rank .r{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center}
.rank .no{width:30px;height:30px;border-radius:50%;background:#8C9AB2;color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700}
.rank .r.top .no{background:var(--blue)}
.rank .nm{font-size:14.5px;color:var(--ink);font-weight:600}
.rank .track{height:9px;background:var(--line-soft);border-radius:6px;margin-top:6px;overflow:hidden}
.rank .fill{height:100%;background:#2E7D32;border-radius:6px}
.rank .r.top .fill{background:var(--blue)}
.rank .amt{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}

/* the one real screenshot, as proof */
.proof{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:center;margin:26px 0 0}
.proof img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(3,12,53,.6)}
@media(max-width:640px){.proof{grid-template-columns:1fr;gap:16px}.proof img{max-width:280px;margin-inline:auto}}

/* quiet in-text links: same colour as the surrounding copy, with a hairline
   underline so they still read as links */
a.q{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:#B9C6DA}
a.q:hover{color:var(--blue);text-decoration-color:var(--blue)}

/* support page: one card, three fields */
.support-wrap{max-width:620px;padding-block:clamp(18px,3vw,40px) clamp(30px,4vw,56px)}
.support-card{background:var(--white);border-radius:22px;padding:clamp(26px,4vw,40px);
  box-shadow:0 18px 44px -30px rgba(3,12,53,.55),0 1px 3px rgba(3,12,53,.14)}
.support-card h1{font-size:clamp(30px,5.4vw,42px);margin:0 0 14px;line-height:1.05}
.support-card .lede{font-size:clamp(16px,2.2vw,18px);margin:0 0 26px}
.form.plain .field{margin-bottom:14px}
.form.plain input,.form.plain textarea{width:100%;background:var(--paper);border:1px solid #E3E8F1;border-radius:16px;
  padding:17px 19px;font:inherit;font-size:16px;color:var(--ink)}
.form.plain textarea{border-radius:20px;resize:vertical;min-height:150px}
.form.plain input::placeholder,.form.plain textarea::placeholder{color:#9AA6B8}
.form.plain input:focus,.form.plain textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,86,219,.16);background:var(--white)}
.btn.wide{display:block;width:100%;border-radius:999px;padding:17px 20px;font-size:16px;margin-top:4px}
.form-note{text-align:center;color:var(--ink-soft);font-size:15px;margin:16px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.support-tip{text-align:center;font-size:14px;color:var(--ink-soft);margin:20px auto 0;max-width:46ch}

/* the rotations menu carries 21 items, so it runs in two columns on desktop */
@media(min-width:900px){
  .sub.wide{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;min-width:520px}
  .sub.wide .all-row{grid-column:1 / -1}
}

/* long menus scroll rather than running off the screen */
.nav .sub{max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.nav .sub::-webkit-scrollbar{width:8px}
.nav .sub::-webkit-scrollbar-thumb{background:#C6D0E0;border-radius:8px}
.nav .sub::-webkit-scrollbar-track{background:transparent}
@media(max-width:899px){
  /* the whole panel scrolls on a phone, and each sub-list gets its own limit */
  .nav .menu{max-height:calc(100vh - 66px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:22px}
  .nav .sub{max-height:52vh}
}
@media(min-width:900px){
  .sub.wide{max-height:min(74vh,560px)}
}

/* footer: white background, so the links are ink not pale blue. Wordmark on
   the left, links on the right, one line on desktop, centred on a phone. */
footer{padding-block:16px 18px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.foot-top{display:flex;align-items:center;gap:10px;margin:0;color:inherit;text-decoration:none}
.foot .shield{width:30px;height:35px}
.mark{font-size:20px}
.flinks{display:flex;flex-wrap:wrap;align-items:center;margin-left:auto;gap:4px 0}
.flinks a{color:#465A75;text-decoration:none;font-size:13.5px;line-height:1.2;padding:0 11px;
  border-right:1px solid var(--line)}
.flinks a:last-child{border-right:0}
.flinks a:hover{color:var(--blue);text-decoration:underline}
.fnote{width:100%;font-size:12px;color:#8494A6;border-top:1px solid var(--line-soft);
  padding-top:10px;margin:2px 0 0}
@media(max-width:760px){
  .foot{gap:0}
  .foot-top{width:100%;justify-content:center;padding-bottom:16px}
  /* the wordmark needs air before the links, and a hairline to sit against */
  .flinks{margin-left:0;width:100%;justify-content:center;gap:8px 0;
    border-top:1px solid var(--line-soft);padding-top:16px}
  .flinks a{font-size:13px;padding:0 9px;line-height:1.35}
  .fnote{margin-top:14px;padding-top:12px}
}

/* plain figures inside the head-to-head unit (no yes/no icon) */
.vsunit .val{display:block;font-weight:700;font-size:clamp(14px,2vw,16px);color:var(--ink);line-height:1.25}
.vsunit .val small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.3}
.legend-mk .mk .lb{font-weight:500;color:var(--ink-soft)}

/* "which is best" chooser */
.goals{display:grid;gap:16px;margin:6px 0 22px}
.goal{background:var(--white);border-radius:15px;padding:20px 22px 22px;box-shadow:0 1px 3px rgba(3,12,53,.16);
  border-left:6px solid var(--blue)}
.goal h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(19px,2.6vw,24px);font-weight:700;
  margin:0 0 8px;line-height:1.05}
.goal>p{margin:0 0 15px;color:var(--ink-soft);font-size:15.5px}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.pick{display:block;background:var(--paper);border:1px solid var(--line-soft);border-radius:11px;
  padding:12px 14px;text-decoration:none}
.pick b{display:block;color:var(--blue);font-size:15.5px}
.pick span{display:block;color:var(--ink-soft);font-size:13px;margin-top:3px;line-height:1.35}
.pick:hover{border-color:var(--blue);background:#F2F7FE}

/* pinned group at the top of the rotations dropdown */
.sub .pinned{position:sticky;top:0;z-index:3;background:var(--white);padding:4px 0 2px;
  border-bottom:1px solid var(--line-soft);display:block}
.sub.wide .pinned{grid-column:1 / -1}
.sub .grp{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 16px 4px}
.sub .grp.lower{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:9px}
.sub a.pin{display:block;padding:8px 16px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.sub a.pin small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:2px}
.sub a.pin:hover{background:#F2F7FE;color:var(--blue)}

/* related comparisons on a pattern page */
.related{background:var(--white);border-radius:14px;padding:20px 22px 22px;margin:0 0 22px;
  box-shadow:0 1px 3px rgba(3,12,53,.16);border-left:6px solid var(--blue)}
.related h2{font-family:var(--display);text-transform:uppercase;font-size:21px;font-weight:700;margin:0 0 6px;line-height:1}
.related>p{margin:0 0 14px;color:var(--ink-soft);font-size:15px}
.rel-links{display:flex;flex-wrap:wrap;gap:9px}
.rel-links a{background:var(--paper);border:1px solid var(--line-soft);border-radius:999px;padding:9px 16px;
  font-size:14.5px;color:var(--blue);text-decoration:none;font-weight:600}
.rel-links a:hover{border-color:var(--blue);background:#F2F7FE}

/* collapsible rotation groups */
.sub.grouped{min-width:330px;max-height:min(76vh,600px)}
.sub .acc{display:block}
.sub .acc>button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;font:inherit;font-weight:700;font-size:15px;color:var(--ink);text-align:left;
  padding:12px 16px;cursor:pointer}
.sub .acc>button::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);margin-left:auto;transition:transform .16s ease}
.sub .acc.open>button::after{transform:rotate(-135deg)}
.sub .acc>button:hover{background:#F2F7FE;color:var(--blue)}
.sub .acc .cnt{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--paper);
  border-radius:999px;padding:2px 9px;margin-left:6px}
.sub .acc-list{display:none;list-style:none;margin:0;padding:0 0 6px;background:#F7FAFE}
.sub .acc.open .acc-list{display:block}
.sub .acc-list a{padding-left:26px}
.sub .acc+.acc{border-top:1px solid var(--line-soft)}

/* shift work life pages */
.rots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:4px 0 22px}
.rot{background:var(--white);border-radius:13px;padding:18px 20px 20px;box-shadow:0 1px 3px rgba(3,12,53,.16);
  border-top:4px solid var(--blue)}
.rot h3{font-family:var(--display);text-transform:uppercase;font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.1}
.rot p{font-size:15px;margin:0 0 10px;color:#243A55}
.rot .rot-pat{font-size:13.5px;color:var(--ink-soft);margin:0}
.rot .rot-pat a{color:var(--blue);text-decoration:none;font-weight:600}
.rot .rot-pat a:hover{text-decoration:underline}
.med-note{background:#FFF6E8;border-left:5px solid #E0A31E;border-radius:0 12px 12px 0;
  padding:18px 20px 20px;margin:24px 0 26px}
.med-note>*:last-child{margin-bottom:0}
.med-note h2{font-size:20px;margin:0 0 10px}
.med-note p{font-size:15px;margin-bottom:10px}
.med-note p:last-child{margin-bottom:0}


.goal>*:last-child,.rot>*:last-child,.setup>*:last-child,.related>*:last-child{margin-bottom:0}

/* country toggle in the header */
.ctry{display:inline-flex;align-items:center;gap:2px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin-right:10px}
.ctry a{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.ctry a.on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(3,12,53,.18)}
.ctry a:hover{color:var(--blue)}
.ctry .flag{width:18px;height:12.6px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(3,12,53,.12)}
@media(max-width:420px){.ctry a span{display:none}.ctry a{padding:4px 7px}}

/* country hint bar */
.ctry-hint{background:#0B2447;color:#fff;font-size:14px;padding:10px 14px;display:flex;align-items:center;
  gap:12px;justify-content:center;flex-wrap:wrap}
.ctry-hint a{color:#9FC0F5;font-weight:700}
.ctry-hint button{background:none;border:0;color:#8FA3C2;font-size:19px;line-height:1;cursor:pointer;padding:0 4px}

/* ================= directory page ==========================
   The list and the gate entry are drawn in HTML and SVG to match the app's
   own screens, so they stay sharp and load instantly. */

.dm{background:var(--white);border-radius:16px;overflow:hidden;margin:6px 0 26px;
  box-shadow:0 14px 34px -24px rgba(3,12,53,.55),0 1px 3px rgba(3,12,53,.16);max-width:560px}
.dm-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.dm-tabs span{text-align:center;padding:13px 6px;font-weight:600;font-size:15px;color:var(--ink-soft)}
.dm-tabs span.on{color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
.dm-list{padding:6px 0}
.dm-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 16px}
.dm-row+.dm-row{border-top:1px solid var(--line-soft)}
.dm-ic{width:42px;height:42px;border-radius:11px;background:#E7EEFB;display:grid;place-items:center}
.dm-ic svg{width:25px;height:25px;fill:var(--blue);stroke:none}
.dm-ic svg.solid rect:first-child{fill:var(--blue)}
.dm-txt b{display:block;font-size:15.5px;color:var(--ink);line-height:1.2}
.dm-txt small{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.35}
.dm-count{min-width:38px;text-align:center;background:#E7EEFB;color:var(--blue);font-weight:700;font-size:15px;
  border-radius:9px;padding:6px 8px}

/* one gate entry */
.gate{background:var(--white);border-radius:16px;padding:18px;margin:6px 0 26px;max-width:560px;
  box-shadow:0 14px 34px -24px rgba(3,12,53,.55),0 1px 3px rgba(3,12,53,.16)}
.gate>*+*{margin-top:12px}
.gate-head{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:12px;padding:14px}
.gate-badge{width:50px;height:50px;border-radius:50%;background:#0B2447;display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 2px #C9A227}
.gate-badge svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.6}
.gate-name small{display:block;font-size:12px;color:var(--ink-soft);font-weight:600}
.gate-name b{display:block;font-size:20px;color:var(--ink);line-height:1.15;margin-top:2px}
.gate-addr{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper);
  border-radius:12px;padding:14px;font-size:15px;color:var(--ink)}
.gate-btns{display:flex;gap:8px;flex:none}
.gb{width:40px;height:40px;border-radius:10px;background:var(--white);display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(3,12,53,.2)}
.gb svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.gate-code{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);
  border-radius:12px;padding:16px}
.gc-left{text-align:center;flex:1}
.gc-label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.gc-dots{display:block;font-size:22px;letter-spacing:.22em;color:var(--ink);margin:9px 0 7px;font-weight:700}
.gc-dots.shown{letter-spacing:.16em;color:var(--blue)}
.gc-hint{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
.gc-eye{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.gc-print{flex:none;background:none;border:0;border-left:1px solid var(--line);padding:6px 4px 6px 18px;cursor:pointer}
.gc-print svg{width:44px;height:44px;fill:none;stroke:#D7261E;stroke-width:1.7;stroke-linecap:round}
.gc-print:active svg,.gc-print.on svg{stroke:#8E140F}
.gate-note{background:var(--paper);border-radius:12px;padding:14px;margin:0}
.gate-note b{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.gate-note span{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:520px){
  .dm-txt small{font-size:12px}
  .gate-name b{font-size:18px}
  .gc-dots{font-size:19px}
}
.card.b5 .bar{background:#2E7D32}
.card.b5 li::before{background:#2E7D32}
.card-more{margin:12px 0 0;font-size:14.5px}
.cmp th.ours small,.cmp th.theirs small{display:block;font-family:var(--ui);text-transform:none;font-weight:600;
  font-size:11.5px;letter-spacing:.02em;opacity:.75;margin-top:3px}

/* Desktop is where these actually get used — someone reads the page on a
   monitor and scans with the phone in their hand. A camera at arm's length
   needs a bigger target than a thumbnail. */
@media(min-width:900px){
  .qrs{max-width:640px;margin-top:34px}
  .qrs-row{gap:30px}
  .qrs figure{width:220px;padding:18px 18px 12px;border-radius:16px}
  .qrs img{width:184px;height:184px}
  .qrs figcaption{font-size:13px;padding-top:11px}
  .qrs-lead{font-size:15.5px;margin-bottom:18px}
}
@media(max-width:400px){
  .qrs-row{gap:14px}
  .qrs figure{width:calc(50% - 7px);padding:11px 11px 8px}
  .qrs img{width:100%;height:auto;aspect-ratio:1}
}

/* labelled groups inside the roles dropdown */
.sub .grp-row{display:block}
.sub .grp-row .grp{padding:9px 16px 5px}
.sub .grp-row .grp.lower{border-top:1px solid var(--line-soft);margin-top:5px;padding-top:11px}

/* where you are in the menu */
.nav .menu > li > a.here,
.nav .menu > li > button.here{color:var(--blue)}
.nav .menu > li > button.here{position:relative}
.nav .sub a.here,.nav .acc-list a.here{background:#E7EEFB;color:var(--blue);font-weight:700}
.nav .sub a.here small{color:var(--blue);opacity:.75}
@media(min-width:900px){
  .nav .menu > li > a.here,.nav .menu > li > button.here{box-shadow:inset 0 -3px 0 var(--blue)}
}
@media(max-width:899px){
  .nav .menu > li > a.here,.nav .menu > li > button.here{border-left:3px solid var(--blue);padding-left:13px}
}

/* ============ settings screens, drawn to match the app ============ */
.setmock{background:var(--white);border-radius:16px;padding:0 0 18px;margin:6px 0 22px;max-width:560px;
  overflow:hidden;box-shadow:0 14px 34px -24px rgba(3,12,53,.55),0 1px 3px rgba(3,12,53,.16)}
.set-head{font-weight:700;font-size:17px;color:var(--ink);text-align:center;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.set-new{margin:16px;background:var(--blue);color:#fff;border-radius:11px;text-align:center;
  padding:14px;font-weight:700;font-size:16px}
.set-label{margin:4px 16px 8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.set-note{margin:12px 16px;font-size:13px;color:var(--ink-soft);line-height:1.45}

.cats{display:grid;gap:9px;padding:0 16px}
.cat-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;background:var(--paper);
  border-radius:11px;padding:13px 14px}
.cat-row .dot{width:13px;height:13px;border-radius:50%}
.cat-row b{font-size:16px;color:var(--ink);font-weight:600}
.cat-ic{display:flex;gap:13px;align-items:center}
.cat-ic svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;opacity:.75}
.cat-ic svg.x{stroke:#D7261E}
/* a control that is not available on that row, as the app shows it */
.cat-ic svg.dim{opacity:.25}
.cat-ic svg.x.dim{stroke:#9AA6B8;opacity:.45}

.swatches{display:flex;flex-wrap:wrap;gap:9px;padding:0 16px 4px}
.swatches span{width:26px;height:26px;border-radius:50%}
.swatches span:first-child{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.tg-name{background:var(--paper);border-radius:11px;margin:14px 16px;padding:13px 14px}
.tg-name b{display:block;font-size:15px;color:var(--ink);margin-bottom:7px}
.tgs{display:grid;gap:10px;padding:0 16px}
.tg-row{background:var(--paper);border-radius:11px;padding:13px 14px}
.tg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tg-top b{font-size:15.5px;color:var(--ink)}
.tg-field{display:block;margin-top:9px;background:var(--white);border-radius:8px;padding:10px 12px;
  font-size:13.5px;color:#9AA6B8}
.tg{width:48px;height:28px;border-radius:999px;background:#0B2447;position:relative;flex:none;cursor:pointer;
  transition:background .15s ease}
.tg i{position:absolute;top:3px;left:23px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:left .15s ease}
.tg-row.off .tg{background:#C3CBD8}
.tg-row.off .tg i{left:3px}
.tg-row.off .tg-field{display:none}
.tg-row.off .tg-top b{color:var(--ink-soft)}
@media(max-width:520px){
  .cat-ic{gap:10px}
  .swatches span{width:23px;height:23px}
}

/* the Appearance settings */
.app-rows{padding:0 16px}
.app-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0}
.app-row+.app-row{border-top:1px solid var(--line-soft)}
.app-row b{font-size:16px;color:var(--ink);font-weight:600}
.app-val{color:var(--ink-soft);font-size:15.5px}
.tg.small{width:44px;height:26px}
.tg.small i{width:20px;height:20px;top:3px;left:21px}
.tg.small.off{background:#C3CBD8}
.tg.small.off i{left:3px}
.set-sub{margin:16px 16px 10px;font-size:14.5px;color:var(--ink-soft)}
.bar-icons{display:flex;flex-wrap:wrap;gap:14px 18px;padding:0 16px 4px;justify-content:space-between}
.bar-ic{display:grid;justify-items:center;gap:9px}
.bar-ic .bi svg{width:27px;height:27px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;color:var(--ink)}
.ck{width:28px;height:28px;border-radius:6px;background:var(--blue);position:relative;cursor:pointer}
.ck::after{content:"";position:absolute;left:9px;top:5px;width:7px;height:13px;border:solid #fff;
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bar-ic.off .ck{background:var(--white);box-shadow:inset 0 0 0 2px #C3CBD8}
.bar-ic.off .ck::after{display:none}
.bar-ic.off .bi svg{opacity:.3}

/* eight entries is a long column on a phone, so pair them up */
@media(max-width:640px){
  .legend{gap:15px 0}
  .legend li{column-gap:9px;padding-left:14px}
  .legend li:nth-child(2n+1){padding-left:0}
  .legend .txt b{font-size:13.5px}
  .legend .txt small{font-size:12px;line-height:1.3}
  .cell{width:32px;height:31px}
  .cell u{font-size:12.5px}
  .cell.ic2 i img{width:9px;height:9px}
}
@media(max-width:340px){
  .legend{grid-template-columns:1fr}
  .legend li{padding-left:0;border-left:0}
}

/* the skin picker */
.skins{display:grid;gap:10px;padding:0 16px}
.skin-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:var(--paper);
  border-radius:11px;padding:14px}
.chips{display:flex;align-items:center}
.chips i{width:22px;height:22px;border-radius:50%;border:1px solid #C3CBD8;background:#EEF3FB;margin-right:-8px}
.chips i:nth-child(2){background:#fff}
.chips i:nth-child(3){background:var(--blue);border-color:var(--blue)}
.chips i:nth-child(4){background:#0B1436;border-color:#0B1436;margin-right:0}
.chips.round i{border-radius:7px}
.skin-txt b{display:block;font-size:15.5px;color:var(--ink);line-height:1.2}
.skin-txt small{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px}
.skin-row .tick{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round}

/* light and dark, split on the diagonal */
.split{margin:2px 0 20px;max-width:620px}
.split img{display:block;width:100%;height:auto}
.split figcaption{margin-top:11px;font-size:13.5px;color:var(--ink-soft);text-align:center}

/* Section padding was stacking on top of whatever the last block already had,
   which left a dead band between sections. The last thing in a section carries
   no bottom margin of its own. */
section > .wrap > :last-child,
section > .wrap > .prose > :last-child,
.wrap > .prose > :last-child{margin-bottom:0}
.prose > :last-child{margin-bottom:0}
.sec-head{margin-bottom:clamp(14px,2vw,24px)}
.sec-head p:last-child{margin-bottom:0}

/* the same rule for the block wrappers that sit directly in a .wrap */
.wrap > .setmock:last-child,.wrap > .split:last-child,.wrap > .dir-grid:last-child,
.wrap > .rots:last-child,.wrap > .goals:last-child,.wrap > .vsunit:last-child{margin-bottom:0}

/* Every display heading gets a tight line-height; two of them were inheriting
   the body's, which left a chasm between wrapped lines. */
.state h2{line-height:1.05}
.get{padding-block:clamp(22px,3vw,40px)}

/* The closing navy band sits inside a .wrap that carries no padding, so once
   the last block above it lost its bottom margin the two colours met with no
   gap at all. The band brings its own separation. */
.grab-band{margin-top:clamp(22px,3vw,40px)}

/* a single phone screen sitting in the text — small, centred, on its own */
.phone-shot{margin:6px auto 24px;max-width:270px}
.phone-shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid #C2CEDD;
  box-shadow:0 22px 44px -24px rgba(3,12,53,.6)}
.phone-shot figcaption{margin-top:11px;font-size:13.5px;color:var(--ink-soft);text-align:center;max-width:44ch;
  margin-inline:auto}
@media(max-width:520px){
  .phone-shot{max-width:220px}
}

/* payment status legend, off-duty work page */
.pay-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:6px 0 22px;
  max-width:760px}
.pay-row{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:13px;background:var(--white);
  border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(3,12,53,.16)}
.pay-mark{width:40px;height:40px;border-radius:9px;background:var(--paper);display:grid;place-items:center;
  font-size:22px;font-weight:800;line-height:1}
.pay-txt b{display:block;font-size:15.5px;line-height:1.2}
.pay-txt small{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.4;margin-top:4px}

/* a strip of job cards lifted from the app */
.cards-shot{margin:6px 0 22px;max-width:560px}
.cards-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 14px 34px -26px rgba(3,12,53,.6)}
.cards-shot figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-soft)}

/* where the comparison came from — sits under the table, not against it */
.tbl-src{margin:0 0 34px;font-size:13.5px;color:var(--ink-soft);text-align:center}

/* card grids used on the off-duty work and shift-worker pages */
.dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin:22px 0 30px}
.dir-card{background:var(--white);border-radius:12px;padding:19px 20px 21px;
  box-shadow:0 1px 3px rgba(3,12,53,.16);border:1px solid var(--line)}
.dir-card h3{font-size:16.5px;font-weight:700;margin:0 0 6px;line-height:1.25}
.dir-card p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.5}

/* A slim call to action partway down a long page. Desktop only: on a phone the
   sticky install bar is already on screen from the intro onward, so this would
   be a second button saying the same thing. */
html.is-mobile .midcta{display:none}
.midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  margin:26px 0 30px;box-shadow:0 1px 3px rgba(3,12,53,.14)}
.midcta p{margin:0;font-size:15px;line-height:1.45;max-width:46ch;color:var(--ink)}
.midcta .stores{margin:0;gap:10px}
.midcta .store{transform:scale(.82);transform-origin:left center;margin:0 -8px 0 0}
@media(max-width:640px){
  .midcta{flex-direction:column;align-items:flex-start;padding:16px}
  .midcta .store{transform:scale(.9)}
}

/* Images are centred in their column; the text around them is not. */
.split,.cards-shot,.repshot{margin-inline:auto}
.split img,.cards-shot img,.repshot img{display:block;margin-inline:auto}
.split figcaption,.cards-shot figcaption,.repshot figcaption,.phone-shot figcaption{text-align:center}

/* Desktop: the reading column stays on the left but takes more of the width.
   1040px is about 100 characters at this size — wide enough that the page does
   not look half-empty on a large screen, short enough that a line is still
   comfortable to read. Below 1000px nothing changes. */
@media(min-width:1000px){
  /* One column width for the whole page. Every text block, heading, intro and
     panel spans the same width as the comparison tables, so nothing steps in or
     out as you scroll. Pictures and the support form are the exceptions. */
  /* Blocks that sit INSIDE the page container fill it. Blocks that ARE the
     container (.wrap hero, .wrap pat-head, .wrap page-head) keep the 1200px
     cap and stay centred — otherwise they run to the edges of the window and
     the page loses its left margin. */
  .prose,.doc,.sec-head,.lede,.pay-legend,
  .legend-box,.setup,.grab,.med-note,.fairness,.panel{max-width:none}
  .prose p,.doc p,.prose li,.doc li,.sec-head p,.lede{max-width:none}
  .prose:not(.wrap),.doc:not(.wrap){margin-inline:0}
  .wrap.hero,.wrap.pat-head,.wrap.page-head{max-width:1200px;margin-inline:auto}
  /* The hero: headline and paragraph use the full container, and the two store
     buttons sit in the middle of it. */
  .hero h1,.hero .lede{max-width:none}
  .hero .cta{margin-inline:auto}
  /* Page headlines wrap at 18 characters, which breaks most of them across two
     lines for no reason. On desktop they use the width they have. */
  .pat-head h1,.page-head h1,.doc-wrap h1{max-width:none}
}

/* The panel sits 14px below the button. That gap used to break the hover: the
   pointer left the menu item on its way down and the panel closed. This spans
   it with a transparent strip that belongs to the panel itself. */
@media(min-width:821px){
  .sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
}