/* ActivityLane v2 — phone & tablet layer. Loaded LAST on every page.
   Every rule lives inside a max-width / pointer / hover query so the laptop
   (>=1280) rendering is byte-for-byte what it was. Desktop nav starts at 960. */

/* ---------- global safety (all sizes <= 1024 or touch) ---------- */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  a,button,summary,[role=button],input,select,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(47,107,216,.15)}
  img,video,iframe,canvas{max-width:100%}
  body{overflow-wrap:break-word}
  .litespot{display:none!important}
}

/* ---------- mobile nav (<960): compact bar + drawer ---------- */
.rsp-burger{display:none}
@media (max-width:959.98px){
  .wrap header.nav{-webkit-backdrop-filter:none;backdrop-filter:none}
  .wrap header.nav.rsp-open{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .wrap header.nav .nav-in{display:flex;flex-wrap:wrap;align-items:center;height:auto;min-height:60px;gap:0 8px;padding-top:0;padding-bottom:0;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .wrap header.nav .brand{order:1;min-height:44px;gap:9px}
  .wrap header.nav .nav-cta{display:contents}
  .wrap header.nav .nav-cta .btn-primary{order:2;margin-left:auto;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;white-space:nowrap}
  /* language selector: compact globe-only button between Provider sign up and the menu button (tap opens the language list) */
  .wrap header.nav .nav-cta .lang-sw{order:3;margin:0;padding:0;border:0}
  .wrap header.nav .nav-cta .lang-sel{width:42px;height:42px;padding:0;color:transparent;background-image:none;max-width:none}
  .wrap header.nav .nav-cta .lang-globe{inset-inline-start:13px}
  .wrap header.nav .nav-cta .lang-sel option{color:#171534}
  .rsp-burger{order:4;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:12px;padding:0}
  .rsp-burger span,.rsp-burger span::before,.rsp-burger span::after{display:block;width:22px;height:2px;border-radius:2px;background:#fff;content:"";position:relative;transition:transform .2s ease,background .2s ease}
  .rsp-burger span::before{position:absolute;top:-7px;left:0}
  .rsp-burger span::after{position:absolute;top:7px;left:0}
  header.nav.rsp-open .rsp-burger span{background:transparent}
  header.nav.rsp-open .rsp-burger span::before{transform:translateY(7px) rotate(45deg)}
  header.nav.rsp-open .rsp-burger span::after{transform:translateY(-7px) rotate(-45deg)}
  /* drawer content = the ORIGINAL nav elements, so translations keep working */
  .wrap header.nav .nav-links,
  .wrap header.nav .nav-cta .navtab-parent,
  .wrap header.nav .nav-cta .signin{display:none}
  .wrap header.nav.rsp-open .nav-links{display:flex;order:5;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:0;margin:4px 0 0;border-top:1px solid rgba(255,255,255,.18)}
  .wrap header.nav.rsp-open .nav-cta .navtab-parent{display:flex;order:6;flex:1 0 100%;justify-content:center;align-items:center;min-height:48px;margin:12px 0 0;border-radius:14px}
  .wrap header.nav.rsp-open .nav-cta .signin{display:flex;order:7;flex:1 0 100%;justify-content:center;align-items:center;min-height:48px;margin:6px 0 16px;color:#fff;font-size:15px}
  .wrap header.nav .nav-links > a,
  .wrap header.nav .navdrop-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin:0;padding:0 2px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;background:transparent}
  .wrap header.nav .navdrop{display:block;position:static}
  .wrap header.nav .navdrop-btn:hover,.wrap header.nav .navdrop-btn:focus{background:transparent}
  .wrap header.nav .navdrop-btn .caret{font-size:12px;opacity:.8}
  .wrap header.nav .navdrop.rsp-open .caret{transform:rotate(180deg)}
  .wrap header.nav .navdrop-menu,
  .wrap header.nav .navmega-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;width:auto;min-width:0;max-height:none;overflow:visible;margin:8px 0 10px;box-shadow:none}
  .wrap header.nav .navdrop.rsp-open > .navdrop-menu,
  .wrap header.nav .navdrop.rsp-open > .navmega-menu{display:block}
  .wrap header.nav .navmega-menu{grid-template-columns:1fr}
  .wrap header.nav .navdrop.rsp-open > .navmega-menu{display:grid}
  .wrap header.nav .navdrop-menu a,
  .wrap header.nav .navmega-grid a{min-height:48px}
  html.rsp-lock{overflow:hidden}
}
@media (max-width:374px){
  .wrap header.nav .nav-in{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .wrap header.nav .brand{font-size:17px;gap:7px}
  .wrap header.nav .logo{width:32px;height:32px}
  .wrap header.nav .nav-cta .btn-primary{padding:0 11px;font-size:12.5px}
}
/* touch tablets using the desktop nav (>=960): tap-to-toggle instead of hover */
@media (min-width:960px) and (hover:none){
  .wrap header.nav .navdrop:not(.rsp-open) .navdrop-menu,
  .wrap header.nav .navdrop:not(.rsp-open) .navmega-menu{opacity:0;visibility:hidden}
  .wrap header.nav .navdrop.rsp-open .navdrop-menu,
  .wrap header.nav .navdrop.rsp-open .navmega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}

/* ---------- product-window mockups (.pw): the sidebar squeezed the body to a sliver ---------- */
@media (max-width:860px){
  .wrap .pw{grid-template-columns:minmax(0,1fr)}
  .wrap .pw-side{display:none}
}

/* parents page header (brand + .pa-auth pill + .pa-navright) uses the same drawer */
@media (max-width:959.98px){
  .wrap header.nav .nav-in>.pa-auth{display:contents}
  .wrap header.nav .pa-auth .pa-up{order:2;margin-left:auto;min-height:44px;padding:0 16px;font-size:13.5px}
  .wrap header.nav .pa-auth .pa-in{display:none}
  .wrap header.nav.rsp-open .pa-auth .pa-in{display:flex;order:6;flex:1 0 100%;justify-content:center;align-items:center;min-height:48px;margin:0 0 16px;font-size:15px;border:1px solid rgba(255,255,255,.3);border-radius:14px}
  .wrap header.nav .nav-in>.pa-navright{margin-left:0;justify-self:auto}
  .wrap header.nav.rsp-open .nav-in>.pa-navright{order:5}
}
/* ---------- home: orbit diagram becomes a tidy laptop + wrapped chips on phones/small tablets ---------- */
@media (max-width:900px){
  .wrap #orbit .orbit-stage{height:auto;max-width:none;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:18px}
  .wrap #orbit .orbit-hub{position:relative;left:auto;top:auto;transform:none}
  .wrap #orbit .orbit-ring{position:static;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .wrap #orbit .ochip{position:static!important;transform:none!important;opacity:1!important;filter:none!important;z-index:auto!important;will-change:auto;font-size:13px;padding:10px 13px}
}

/* ---------- hero sliders (companies etc.): content was centred inside a fixed-height slide and clipped at the top ---------- */
@media (max-width:860px){
  html body .wrap .hs-track .hs-slide{justify-content:flex-start}
  html body .wrap .hs-track{align-items:flex-start}
}
@media (max-width:900px){
  /* activly.css:3578 sets height:auto for <=900 but the 540px rule at :3623 re-wins by source order */
  html body .wrap .hs-view,html body .wrap .hero-slider .hs-slide,html body .wrap .hs-art,html body .wrap .hs-breakout .hs-art{height:auto}
  .wrap .hs-view{touch-action:pan-y}
}

/* ---------- inline two-column grids with a fixed px column (e.g. parent-app block) ---------- */
@media (max-width:640px){
  .wrap .tfc-grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
}

/* ---------- tidy small things ---------- */
@media (max-width:640px){
  .wrap .trust .tsep{display:none}
  .wrap .trust{gap:8px 16px}
}
/* ---------- comparison tables: fit the screen instead of hiding columns behind a sideways scroll ---------- */
@media (max-width:640px){
  html body .wrap .cmp-wrap .cmp,html body .wrap #compare table.compare{min-width:0;width:100%;table-layout:auto}
  html body .wrap .cmp th,html body .wrap .cmp td,html body .wrap table.compare th,html body .wrap table.compare td{padding:11px 7px;font-size:12.5px;line-height:1.3;overflow-wrap:anywhere}
  html body .wrap .cmp thead th,html body .wrap table.compare thead th{font-size:12px;letter-spacing:0}
  html body .wrap .cmp th:first-child,html body .wrap .cmp td:first-child{padding-left:12px}
}

/* ---------- pricing add-on card: title was squeezed into a 100px column ---------- */
@media (max-width:560px){
  html body .wrap .addon-head{flex-wrap:wrap;padding:16px;row-gap:6px}
  html body .wrap .addon-h{flex:1 1 0;min-width:0}
  html body .wrap .addon-price{order:3;flex:1 1 auto;margin-left:56px;text-align:left}
  html body .wrap .addon-chev{order:4}
}
/* ---------- freelancers hero stage: 330px phone sat in a 260px-tall 4:3 box and spilled over the CTAs ---------- */
@media (max-width:900px){
  html body .wrap .fh-stage{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px 22px;overflow:visible}
  html body .wrap .fh-stage::before{display:none}
  html body .wrap .fh-wires{display:none}
  html body .wrap .fh-phone{position:relative;left:auto;top:auto;transform:none;flex:none;margin:0 0 14px}
  html body .wrap .fh-stage .fh-card{position:static;display:flex;width:100%;max-width:340px;left:auto;right:auto;top:auto;bottom:auto}
  html body .wrap .fh-stage .fh-c3{display:block;min-width:0}
}

/* ---------- touch targets >=44px (phones, tablets, any coarse pointer) ---------- */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  html body .wrap .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  html body .wrap .demo-banner-btn{min-height:44px}
  html body .wrap .billtoggle .bt{min-height:44px}
  html body .wrap summary{min-height:44px;display:flex;align-items:center}
  html body .wrap .foot-col a{min-height:44px;display:flex;align-items:center;padding:0}
  html body .wrap > footer a{min-height:44px}
  html body .wrap #who .ptxt .plink{display:inline-flex;align-items:center;min-height:44px}
  html body .wrap .brand{min-height:44px}
  html body .wrap .hs-dots button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:44px}
  html body .wrap .hs-dots button,html body .wrap .rd-dots button{position:relative}
  html body .wrap .rd-dots button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:44px}
  html body .wrap a[href="#websiteAddon"]{min-height:44px}
}
/* dev-only "Live · auto-updates" badge (fixed, bottom-left) covers content on touch screens; hidden there only */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  #liveflag{display:none!important}
}
/* ---------- tablets: hero dashboard mock-up is squeezed between 860 and 1200 ---------- */
@media (max-width:1200px){
  html body .wrap .pw.pw-ho{grid-template-columns:minmax(0,1fr)}
  html body .wrap .pw.pw-ho .pw-side{display:none}
}
@media (max-width:1100px){
  html body .wrap .pw-col,html body .wrap .pw-card{overflow-wrap:break-word}
}
@media (min-width:700px) and (max-width:979px){
  html body .wrap .hero .sub{max-width:600px}
}
/* ---------- finance reconciliation ledger: the 6-cell row became a 6-line stack; make it a compact 2-column card ---------- */
@media (max-width:720px){
  html body .wrap .rec tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:0;row-gap:0;align-items:center}
  html body .wrap .rec tbody td{padding:3px 0}
  html body .wrap .rec tbody td:nth-child(1){grid-column:1;grid-row:1;font-size:12px;opacity:.8}
  html body .wrap .rec tbody td:nth-child(4){grid-column:2;grid-row:1;font-weight:800;text-align:right}
  html body .wrap .rec tbody td:nth-child(2){grid-column:1;grid-row:2}
  html body .wrap .rec tbody td:nth-child(6){grid-column:2;grid-row:2;text-align:right}
  html body .wrap .rec tbody td:nth-child(3){grid-column:1;grid-row:3;font-size:12px;opacity:.8}
  html body .wrap .rec tbody td:nth-child(5){grid-column:1 / -1;grid-row:4;margin-top:2px}
}

/* ---------- weekly rota grid (staff page): 7 columns cannot fit 330px; scroll inside its card instead of being clipped ---------- */
@media (max-width:700px){
  html body .wrap .pw-col:has(> .rota-grid){overflow-x:auto;-webkit-overflow-scrolling:touch}
  html body .wrap .rota-grid{min-width:540px}
}
/* ---------- platform-bookings: #booking .bk-top stayed 2-column on phones (text in a 117px column) ---------- */
@media (max-width:860px){
  html body .wrap #booking .bk-top{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
}
/* ---------- more touch targets: legal TOC, footer socials, desktop-width nav on touch tablets ---------- */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  html body .wrap .toc a{display:inline-block;padding:12px 6px 12px 0}
  html body .wrap footer .ft-soc{width:44px;height:44px}
}
@media (min-width:960px) and (hover:none){
  html body .wrap header.nav .navtab,html body .wrap header.nav .navdrop-btn,html body .wrap header.nav .nav-cta .signin{min-height:44px;display:inline-flex;align-items:center}
  html body .wrap header.nav .navdrop-btn{margin:0}
  html body .wrap header.nav .navtab{min-width:44px;justify-content:center}
  html body .wrap header.nav .pa-auth a{min-height:44px}
}
/* ---------- pricing on tablets: three plan cards stacked in a 440px column left half the iPad empty ---------- */
@media (min-width:640px) and (max-width:900px){
  html body .wrap .price{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;gap:20px}
  html body .wrap .price > :nth-child(3){grid-column:1 / -1}
}
/* @@END@@ */

/* ---------- phone header fit, footer socials centred, footer lists in two columns (1 Oct) ---------- */
@media (max-width:959.98px){
  /* brand + Provider sign up + language globe + menu button must fit on ONE row at 360-430px */
  .wrap header.nav .nav-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:0 6px}
  .wrap header.nav .nav-cta .btn-primary{padding:0 12px;font-size:14px}
  .rsp-burger{margin-right:-10px}
}
@media (max-width:374px){
  .wrap header.nav .nav-cta .btn-primary{padding:0 10px;font-size:12.5px}
  .wrap header.nav .nav-cta .lang-sel{width:38px;height:38px}
  .wrap header.nav .nav-cta .lang-globe{inset-inline-start:11px}
}
/* the 44px touch-target rule turns footer links into flex boxes, which left the social icons stuck top-left of their tiles */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  html body .wrap footer .ft-soc{display:grid;place-items:center;padding:0}
}
/* long footer lists (Pages, Get in touch, Legal) read as one endless column on a phone: compact wrapping pills instead */
@media (max-width:900px){
  html body .wrap footer .foot-col{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  html body .wrap footer .foot-col > :not(a){flex:1 0 100%;margin-bottom:2px}
  html body .wrap footer .foot-col > a{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:14px;white-space:nowrap}
  html body .wrap footer .foot-col > a:hover{background:rgba(255,255,255,.16);text-decoration:none}
  html body .wrap footer .foot-col{margin-bottom:6px}
}

/* phones + tablets (<960px): the language picker lives in the menu as a full-width row */
@media (max-width:959.98px){
  .wrap header.nav .nav-cta .lang-sw{display:none}
  .wrap header.nav.rsp-open .nav-cta .lang-sw{display:flex;order:8;flex:1 0 100%;margin:0 0 18px}
  .wrap header.nav.rsp-open .nav-cta .lang-sel{width:100%;max-width:none;height:48px;padding:0 40px 0 44px;padding-inline:44px 40px;color:#fff;font-size:15px;
    background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px}
  [dir=rtl] .wrap header.nav.rsp-open .nav-cta .lang-sel{background-position:left 16px center}
  .wrap header.nav.rsp-open .nav-cta .lang-globe{inset-inline-start:16px}
}

/* ---------- symmetrical phone header (1 Oct): [menu] [logo centred] [Book a demo]; banner card hidden; sign-up inside the menu ---------- */
.rsp-demo{display:none}
@media (max-width:959.98px){
  .demo-banner{display:none}
  .wrap header.nav .nav-in:has(> .nav-cta){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:6px;min-height:60px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .rsp-burger{grid-column:1;grid-row:1;justify-self:start;margin:0 0 0 -10px;order:0}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand{grid-column:2;grid-row:1;justify-self:center;order:0}
  .wrap header.nav .nav-in:has(> .nav-cta) > .rsp-demo{grid-column:3;grid-row:1;justify-self:end;order:0;display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 10px;border-radius:999px;background:var(--gold,#f5b81f);color:#241a00;font-size:12.5px;font-weight:800;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 6px 16px -8px rgba(245,184,31,.6)}
  /* drawer items span the full width underneath */
  .wrap header.nav .nav-in:has(> .nav-cta) .nav-links,
  .wrap header.nav .nav-in:has(> .nav-cta) .nav-cta > *{grid-column:1/-1;grid-row:auto}
  /* Provider sign up: hidden in the bar, a full-width primary button in the menu */
  html body .wrap header.nav .nav-cta .btn-primary{display:none}
  html body .wrap header.nav.rsp-open .nav-cta .btn-primary{display:flex;order:6;justify-content:center;width:100%;margin:12px 0 0;min-height:48px;font-size:15px;grid-column:1/-1}
  html body .wrap header.nav.rsp-open .nav-cta .navtab-parent{order:7}
  html body .wrap header.nav.rsp-open .nav-cta .signin{order:8}
  html body .wrap header.nav.rsp-open .nav-cta .lang-sw{order:9}
}
@media (max-width:374px){
  .wrap header.nav .nav-in:has(> .nav-cta) > .rsp-demo{padding:0 8px;font-size:12px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand{font-size:16px;gap:6px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand .logo{width:30px;height:30px}
}

/* ---------- phone spacing (1 Oct): section bands were 88px top and bottom, plus 72px above the footer = big blank stretches ---------- */
@media (max-width:759.98px){
  .wrap > section.band,.wrap > main > section.band{padding-top:52px;padding-bottom:52px}
  .wrap > section:has(+ footer),.wrap > main > section:last-of-type{padding-bottom:30px}
  .wrap > footer{margin-top:0}
}

/* Phone bar spacing (10 Oct): [menu] [lockup centred in the free space, >=16px clear of both neighbours] [Book a demo]. */
@media (max-width:520px){
  .wrap header.nav .nav-in:has(> .nav-cta){grid-template-columns:auto minmax(0,1fr) auto;column-gap:0}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand{justify-self:center;margin:0 16px;min-width:0;gap:7px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand .brand-mark{height:38px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand .brand-name{font-size:18px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .rsp-demo{padding:0 12px;font-size:12.5px}
}
@media (max-width:389px){
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand{margin:0 16px 0 12px;gap:5px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand .brand-mark{height:34px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .brand .brand-name{font-size:16px}
  .wrap header.nav .nav-in:has(> .nav-cta) > .rsp-demo{padding:0 10px;font-size:12px}
}