/* =============================================================================
   Hire Friday — the platform's front door.

   Same palette and voice as iamfriday.uk so the two read as one brand, but a
   standalone stylesheet on purpose: this site sits on its own hosting package
   and must never break because a marketing page elsewhere was restyled.
   ============================================================================= */
:root{
  --cream:#FFFBF5; --cream-2:#FFF3E6;
  --ink:#16232B; --muted:#5F7078;
  --coral:#FF6B4A; --coral-soft:#FFE3DA;
  --teal:#0E9B8E; --teal-soft:#D8F2EF;
  --amber:#E8833A; --amber-soft:#FFEBD6;
  --lilac:#EFE9FF; --purple:#5B43B8;
  --line:rgba(22,35,43,.08);
  --maxw:1180px; --r:20px;
  --disp:"Outfit",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --gut:clamp(1.25rem,5vw,5rem);
  --pop:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(255,107,74,.13), transparent 62%),
    radial-gradient(1000px 560px at -6% 42%, rgba(14,155,142,.10), transparent 60%),
    radial-gradient(900px 500px at 92% 88%, rgba(124,92,255,.09), transparent 60%),
    var(--cream);
  background-attachment:fixed;
}
a{color:var(--coral)}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.035em;line-height:1.05;margin:0}
h1 em,h2 em{font-style:normal;color:var(--coral)}

/* ── nav ───────────────────────────────────────────────────────────────
   THE HEADER IS FULL WIDTH; THE PILL IS NOT.
   The pill used to be the fixed element itself, pinned .85rem from each edge —
   so at 1440 it ran ~90px wider on each side than every section beneath it and
   read as a different piece of software bolted on top. The header still spans
   the viewport (it has to, to sit above everything and to catch the blur), and
   the pill is now an inner box on exactly --maxw, so its left and right edges
   line up with the cards, the headings and the footer.

   `pointer-events` is off on the bar and back on for the pill, or the invisible
   full-width strip would swallow clicks on anything near the top of the page. */
.nav{
  position:fixed;top:.85rem;left:0;right:0;z-index:50;
  padding-inline:var(--gut);pointer-events:none;
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .7rem .7rem 1.4rem;
  background:rgba(255,251,245,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(22,35,43,.07);border-radius:999px;
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.nav.stuck .nav__in{background:rgba(255,251,245,.95);box-shadow:0 8px 28px rgba(22,35,43,.08)}
/* The gutter is up to 5rem on a wide screen, which pushes the pill well inside
   the content it is supposed to align with. Past the point where --maxw is the
   constraint, drop back to a small fixed inset so the pill can reach 1180. */
@media (min-width:1300px){.nav{padding-inline:1.25rem}}
.brand{font:600 1.35rem/1 var(--disp);color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.brand i{font-style:normal;color:var(--coral)}
.nav nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.8rem)}
.nav nav a{color:var(--muted);font:500 .9375rem/1 var(--sans);text-decoration:none;white-space:nowrap}
.nav nav a:hover{color:var(--ink)}
.nav nav a.btn,.nav nav a.btn:hover{color:#fff}
.nav .btn{min-height:44px;padding:.65rem 1.35rem;font-size:.9375rem}
@media (max-width:820px){.nav nav a:not(.btn){display:none}}
@media (max-width:560px){.nav{padding-inline:.85rem}.nav__in{padding-left:1.1rem}}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;min-height:52px;
  padding:.95rem 1.9rem;background:linear-gradient(120deg,var(--coral),#FF8A55);color:#fff;
  font:600 1rem/1 var(--sans);border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 20px rgba(255,107,74,.28);
  transition:transform .3s var(--pop),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 28px rgba(255,107,74,.36);color:#fff}
.btn--plain{background:transparent;color:var(--ink);box-shadow:none;border:2px solid rgba(22,35,43,.15)}
.btn--plain:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--lg{min-height:58px;padding:1.05rem 2.1rem;font-size:1.0625rem}

/* ── hero ──────────────────────────────────────────────────────────────
   Copy left, picture right. The REST of the page stays centred — this is the
   one section that isn't, on purpose: a centred column reads as a poster, a
   two-column split reads as a product.

   `overflow:clip` rather than `hidden`, because the two cards deliberately
   overhang the picture and `hidden` on an ancestor would create a scroll
   container that swallows them on a narrow screen. */
.hero{position:relative;padding:clamp(7.5rem,13vw,10rem) var(--gut) clamp(3rem,6vw,5rem);overflow:clip}
.hero__in{
  max-width:var(--maxw);margin-inline:auto;position:relative;z-index:1;
  display:grid;gap:clamp(3rem,6vw,4.5rem);align-items:center;text-align:center;
}
@media (min-width:980px){
  .hero__in{grid-template-columns:1.02fr .98fr;text-align:left}
  /* The global .lede and .cta are centred for every other section, so both
     have to be un-centred here rather than the hero inheriting them. */
  .hero__copy .lede{margin-left:0;margin-right:0;max-width:54ch}
  .hero__copy .cta{justify-content:flex-start}
}

/* A fine dot grid behind the art. Structure instead of another blur — the
   blobs alone read as a startup landing page, and this one is selling to
   somebody who runs a business. */
.hero__dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(22,35,43,.13) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 76% 45%, #000, transparent 72%);
          mask-image:radial-gradient(70% 60% at 76% 45%, #000, transparent 72%);
}

.hero__trust{
  list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.4rem;justify-content:center;
}
.hero__trust li{
  position:relative;padding-left:1.4rem;color:var(--muted);font-size:.875rem;
}
.hero__trust li::before{
  content:"";position:absolute;left:0;top:.34em;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--teal-soft);
  box-shadow:inset 0 0 0 2px var(--teal);
}
/* Placed AFTER .hero__trust, not inside the layout media query above it: both
   rules are (0,1,0), so the one that comes later in the file wins. Sitting it
   above the base rule left the row centred on desktop. */
@media (min-width:980px){.hero__trust{justify-content:flex-start}}
.eyebrow{
  margin:0 0 1.1rem;display:inline-block;padding:.4rem .9rem;border-radius:999px;
  background:var(--coral-soft);color:#B8451F;
  font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
h1{font-size:clamp(2.6rem,7.5vw,5rem);font-weight:600}
.lede{margin:1.5rem auto 0;max-width:62ch;color:var(--muted);font-size:1.125rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;justify-content:center}
.cta--mid{justify-content:center;position:relative;z-index:1}
.proof{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) auto 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));max-width:760px;width:100%;
  text-align:center;
}
.proof li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;
  box-shadow:0 2px 10px rgba(22,35,43,.04)}
.proof b{display:block;font:600 1.9rem/1 var(--disp);color:var(--coral);letter-spacing:-.04em}
.proof span{display:block;margin-top:.35rem;font-size:.85rem;color:var(--muted)}

.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.blob--a{width:38vw;height:38vw;background:var(--coral-soft);top:-8vw;right:-8vw}
.blob--b{width:30vw;height:30vw;background:var(--teal-soft);bottom:-10vw;left:-10vw}

/* ── sections ────────────────────────────────────────────────────────── */
.sec{padding:clamp(3.5rem,8vw,6rem) var(--gut);position:relative}
.sec--tint{background:rgba(255,243,230,.55)}
/* EVERYTHING SITS ON ONE AXIS.
   A buying page whose headings start at the left margin and whose cards start
   somewhere else reads like a blog. Section heads are centred, the supporting
   line is centred under them on a comfortable measure, and the grids below are
   centred within the same container — so the eye never has to re-find the
   start of a line. Titles are NOT given a max-width: they run the full measure
   and wrap naturally. */
.head{
  max-width:var(--maxw);margin:0 auto clamp(2.2rem,4.5vw,3.2rem);
  position:relative;z-index:1;text-align:center;
}
.head .lede{margin-inline:auto;max-width:64ch}
.head .eyebrow{margin-inline:auto}
h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:600}
.head .lede{margin-top:1.1rem}

.grid{max-width:var(--maxw);margin-inline:auto;display:grid;gap:1.15rem;position:relative;z-index:1}
@media (min-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.1rem);box-shadow:0 2px 10px rgba(22,35,43,.04);
  transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(22,35,43,.1)}
.tag{
  display:inline-block;padding:.3rem .7rem;margin-bottom:.85rem;border-radius:999px;
  font:700 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.tag--teal{background:var(--teal-soft);color:#0B7A70}
.tag--coral{background:var(--coral-soft);color:#C1391B}
.tag--amber{background:var(--amber-soft);color:#A8541A}
.tag--lilac{background:var(--lilac);color:var(--purple)}
.card h3{font-size:1.4rem;margin-bottom:.3rem}
.sum{margin:0;color:var(--ink);font-weight:500;font-size:.9375rem}
.card ul{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem}
.card li{position:relative;padding-left:1.5rem;color:var(--muted);font-size:.9375rem;line-height:1.6}
.card li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.45rem;height:.45rem;
  border-radius:50%;background:var(--coral)}
.card:nth-child(1) li::before{background:var(--teal)}
.card:nth-child(3) li::before{background:var(--amber)}
.card:nth-child(4) li::before{background:var(--purple)}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps{list-style:none;max-width:var(--maxw);margin-inline:auto;padding:0;display:grid;gap:1rem;
  position:relative;z-index:1}
@media (min-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps li{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem;box-shadow:0 2px 10px rgba(22,35,43,.04)}
.steps .n{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--coral),#FF9A3C);color:#fff;
  font:600 1.05rem/1 var(--disp);box-shadow:0 6px 14px rgba(255,107,74,.28);
}
.steps h3{font-size:1.15rem;margin-bottom:.35rem}
.steps p{margin:0;color:var(--muted);font-size:.9375rem}

/* ── the honest figures ──────────────────────────────────────────────── */
.figs{max-width:var(--maxw);margin-inline:auto;display:grid;gap:1rem;position:relative;z-index:1}
@media (min-width:760px){.figs{grid-template-columns:repeat(3,1fr)}}
.fig{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;
  text-align:center;box-shadow:0 2px 10px rgba(22,35,43,.04)}
.fig b{display:block;font:600 clamp(2.2rem,5vw,3rem)/1 var(--disp);color:var(--coral);
  letter-spacing:-.04em;margin-bottom:.7rem}
.fig b em{font-style:normal;font-size:.44em;color:var(--muted);font-weight:400}
.fig p{margin:0;color:var(--muted);font-size:.9375rem}

.note{
  max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;position:relative;z-index:1;
  background:var(--lilac);border-radius:var(--r);padding:clamp(1.5rem,3vw,2rem);
  color:var(--ink);font-size:1rem;line-height:1.7;
}
.note strong{display:block;margin-bottom:.4rem;font-weight:600}

.small{max-width:var(--maxw);margin:1.5rem auto 0;text-align:center;color:var(--muted);
  font-size:.9375rem;position:relative;z-index:1}

/* ── the live chat ─────────────────────────────────────────────────────
   Two columns on a wide screen: the chat, and the three things worth trying.
   A demo with no instructions gets "hello" typed into it and proves nothing —
   the list beside it is what turns a toy into evidence. It sits BELOW the chat
   on a phone, because the thing itself must be the first thing reached. */
.tryrow{
  max-width:var(--maxw);margin-inline:auto;position:relative;z-index:1;
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
}
@media (min-width:980px){.tryrow{grid-template-columns:1.15fr .85fr}}
.trychat{min-width:0}

/* Theme the chat into this page. fc-chat.css ships deliberately unbranded and
   every colour, radius and font in it is a variable — so the panel is themed
   here rather than by editing a file the marketing site also relies on. */
.fc{
  --fc-bg:#fff;
  --fc-panel:rgba(255,243,230,.75);
  --fc-line:var(--line);
  --fc-text:var(--ink);
  --fc-muted:var(--muted);
  --fc-accent:var(--coral);
  --fc-accent-ink:#fff;
  --fc-her-bg:#FFF6F2;
  --fc-her-text:var(--ink);
  --fc-you-bg:var(--ink);
  --fc-you-text:#fff;
  --fc-radius:var(--r);
  --fc-bubble:16px;
  --fc-font:var(--sans);
  --fc-shadow:0 18px 44px rgba(22,35,43,.10);
}
.fc .btn{box-shadow:0 6px 16px rgba(255,107,74,.26)}
/* On a phone the status bar needs 298px for its two labels and has 298px, so
   both wrapped to two lines and the bar grew to 51px. Measured, then shaved
   off the tracking rather than the words — "5 questions left" is the bit a
   visitor is actually reading. Overridden here so fc-chat.css stays byte-for-
   byte the file iamfriday.uk runs, and a diff between them stays meaningful. */
@media (max-width:480px){
  .fc__bar{font-size:.625rem;letter-spacing:.08em;padding-inline:.9rem}
}

.tryside{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,1.9rem);text-align:left;
  box-shadow:0 2px 10px rgba(22,35,43,.04);
}
.tryside h3{font-size:1.15rem;margin-bottom:1rem}
.trylist{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.trylist li{
  position:relative;padding-left:1.7rem;color:var(--muted);
  font-size:.9375rem;line-height:1.6;
}
.trylist li::before{
  content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.62rem;
  border-radius:50%;background:var(--coral-soft);border:2px solid var(--coral);
}
.trylist b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.trynote{
  margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.875rem;line-height:1.6;
}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem);
  padding:clamp(2.5rem,5vw,4rem) var(--gut) clamp(1.5rem,3vw,2rem);background:rgba(255,255,255,.55)}
.foot__in{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(2rem,4vw,3.5rem);
  align-items:start;text-align:left}
@media (min-width:980px){.foot__in{grid-template-columns:1fr 1.6fr}}
.foot__name{display:block;font:600 1.5rem/1 var(--disp);letter-spacing:-.03em;margin-bottom:.8rem}
.foot__name i{font-style:normal;color:var(--coral)}
.foot__in p{margin:0 0 .9rem;max-width:46ch;color:var(--muted);font-size:.9375rem;line-height:1.65}
.foot__in p:last-child{margin-bottom:0}
.foot__made{font-size:.875rem!important}
.foot__made b{color:var(--ink);font-weight:600}

/* Small facts a sceptic checks, set as chips rather than another paragraph —
   they are scanned, not read. Deliberately claims we can stand behind. */
.foot__badges{
  list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;
}
.foot__badges li{
  padding:.34rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--line);
  font:600 .6875rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
/* The registration number is the checkable part, so it gets the ink. */
.foot__badges span{color:var(--ink);letter-spacing:.08em}

/* Three link columns that collapse to two, then one. `auto-fit` would let a
   single column stretch the full width on a phone and leave the headings
   floating a long way from their lists, so the breakpoints are explicit. */
.foot__nav{display:grid;gap:2rem}
@media (min-width:560px){.foot__nav{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.foot__nav{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.foot__nav h2{margin:0 0 .9rem;font:600 .72rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.foot__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot__nav a{color:var(--ink);text-decoration:none;font-size:.9rem;opacity:.8}
.foot__nav a:hover{opacity:1;color:var(--coral)}
.foot__hours{margin-top:1.1rem!important;font-size:.8125rem!important;line-height:1.6}
.foot__mark{max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;padding-top:1.4rem;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;
  align-items:baseline;justify-content:space-between;text-align:left}
.foot__mark .createmark{flex:0 0 auto}
.createmark{color:var(--muted);font-size:.8125rem;text-decoration:none}
.createmark b{color:var(--ink);font-weight:600;letter-spacing:.04em}
.createmark:hover{color:var(--ink)}
.foot__legal{color:var(--muted);font-size:.8125rem;max-width:64ch;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .btn:hover,.card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE CLASSES THE MARKUP WAS ALREADY USING.

   index.html referenced .figs--2, .faq, .faq__q, .faq__a and .plainlink, and
   none of them existed in this stylesheet — I wrote that CSS for the OTHER
   site and never brought it here. The FAQ therefore rendered as raw <details>
   at full page width, which is what "doesn't fit the design" was.

   Lesson worth keeping: a class in the HTML is not a class in the CSS. Diff
   the two before shipping a page built by copying markup between sites.
   ═══════════════════════════════════════════════════════════════════════ */

/* Two things, two columns. It was inheriting repeat(3,1fr) from .figs and
   leaving a third of the row empty. */
.figs--2{max-width:920px;margin-inline:auto}
@media (min-width:760px){.figs--2{grid-template-columns:repeat(2,1fr)}}
.figs--2 .fig{text-align:left;padding:1.8rem}
.figs--2 .fig b{
  display:block;font:600 1.45rem/1.15 var(--disp);color:var(--ink);
  letter-spacing:-.03em;margin-bottom:.6rem;
}
.figs--2 .fig b::before{
  content:"";display:block;width:34px;height:4px;border-radius:999px;
  background:var(--coral);margin-bottom:.9rem;
}
.figs--2 .fig:nth-child(2) b::before{background:var(--teal)}

.plainlink{font-weight:500}

/* ── FAQ ──────────────────────────────────────────────────────────────
   <details>, not a JS accordion: open to a crawler and to Ctrl-F whether or
   not the script runs, which is the point of putting answers on the page. */
.faq{max-width:860px;margin-inline:auto;position:relative;z-index:1;display:grid;gap:.75rem}
.faq__q{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 2px 10px rgba(22,35,43,.04);overflow:hidden;
  transition:box-shadow .35s var(--ease);
}
.faq__q[open]{box-shadow:0 18px 38px rgba(22,35,43,.08)}
.faq__q summary{
  list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem clamp(1.1rem,2.4vw,1.6rem);
}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary h3{margin:0;font-size:clamp(1rem,1.9vw,1.1rem);flex:1;font-weight:600}
.faq__q summary::after{
  content:"";flex:0 0 auto;width:12px;height:12px;margin-top:.42rem;
  border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq__q[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 clamp(1.1rem,2.4vw,1.6rem) 1.3rem}
.faq__a p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.7}

/* ── hero art ─────────────────────────────────────────────────────────
   A rounded RECTANGLE on an offset panel, not a morphing organic frame. The
   blob was warm and personal; this is the page where somebody decides whether
   to spend money with a company, and a straight edge is worth more here than
   a friendly one. */
.hero__art{position:relative;max-width:460px;width:100%;margin-inline:auto}

.shot{
  position:relative;z-index:1;margin:0;border-radius:26px;overflow:hidden;
  border:1px solid rgba(22,35,43,.10);
  box-shadow:0 30px 64px rgba(22,35,43,.16);
  background:var(--cream-2);
}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
/* The offset panel behind it. A solid, slightly rotated block reads as
   deliberate; a blur reads as decoration. */
.hero__art::before{
  content:"";position:absolute;z-index:0;inset:5% -7% -6% 9%;border-radius:26px;
  background:linear-gradient(140deg,var(--coral-soft),var(--teal-soft) 78%);
  transform:rotate(2.6deg);
}

/* ── the two overlay cards ────────────────────────────────────────────
   These are the graphic device: they say "this is software" faster than any
   sentence in the headline can. Both sit on the picture's edge so the
   composition is one object rather than a photo with labels near it. */
.hcard{
  position:absolute;z-index:3;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 40px rgba(22,35,43,.16);
  padding:.9rem 1.05rem;text-align:left;
}
.hcard__k{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;
  font:600 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);flex:0 0 auto;
  animation:beat 2s var(--ease) infinite;
}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

.hcard--live{top:7%;left:-7%;width:min(17rem,80%);animation:float 7s ease-in-out infinite}
.hcard--hours{bottom:6%;right:-7%;width:min(16.5rem,82%);animation:float 9s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* The rotating status lines. The BOX is sized and the lines stack inside it and
   cross-fade, so a longer line never shunts the card's width. */
.pillbox{display:grid;min-height:2.4em}
.pillbox>*{grid-area:1/1}
.pill{
  align-self:start;font:500 .8125rem/1.35 var(--sans);color:var(--ink);
  opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.pill.on{opacity:1;transform:none}

/* ── the hours graphic ────────────────────────────────────────────────
   Eight lit segments against twenty-four. The same claim as the 24/7 figure
   below, drawn rather than asserted — and understood before a word is read. */
.hrs{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem .5rem;margin-bottom:.7rem}
.hrs:last-child{margin-bottom:0}
.hrs__t{grid-column:1;font:500 .75rem/1 var(--sans);color:var(--muted)}
.hrs__n{grid-column:2;grid-row:1/3;font:600 1.5rem/1 var(--disp);color:var(--muted);letter-spacing:-.03em}
.hrs--on .hrs__n{color:var(--coral)}
.hrs__bar{grid-column:1;display:flex;gap:2px}
.seg{flex:1 1 0;height:.6rem;border-radius:2px;background:rgba(22,35,43,.08)}
.hrs .seg.on{background:rgba(22,35,43,.45)}
.hrs--on .seg.on{background:var(--coral)}

@media (max-width:979px){
  .hero__art{max-width:400px}
  .hcard--live{left:-4%}
  .hcard--hours{right:-4%}
}
@media (max-width:560px){
  /* Below this the cards would overhang the viewport. They stop overlapping
     and sit under the picture instead — still the same two facts, no sideways
     scroll, and nothing hidden from a phone.

     `position:relative`, NOT `static`. A static element's z-index is inert, so
     the offset panel behind (which IS positioned, at z-index:0) painted over
     both cards and left a blank gradient block where the facts should be.
     A positioned element beats non-positioned content regardless of how low
     its z-index is. Caught on a 375px screenshot, not in the numbers — every
     measurement said the cards were the right size in the right place.

     The panel itself goes: in one column it sits behind the CARDS rather than
     behind the picture, which is not what it is for. */
  .hero__art{max-width:100%}
  .hcard{position:relative;z-index:3;width:auto;animation:none;margin-top:.9rem}
  .hcard--live{margin-top:1.3rem}
  .hero__art::before{display:none}
  /* The dot grid is masked towards the right-hand column, which on a phone is
     straight over the headline. */
  .hero__dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hcard--live,.hcard--hours{animation:none}
  .dot{animation:none}
}

/* ── a photograph on each "what you get" card ────────────────────────── */
.card__shot{
  margin:calc(clamp(1.6rem,2.6vw,2.1rem) * -1) calc(clamp(1.6rem,2.6vw,2.1rem) * -1) 1.3rem;
  overflow:hidden;border-radius:var(--r) var(--r) 0 0;position:relative;
}
.card__shot img{
  display:block;width:100%;height:clamp(170px,22vw,215px);object-fit:cover;
  object-position:center center;transition:transform .6s var(--ease);
}
.card:hover .card__shot img{transform:scale(1.035)}
/* The tag sits above the photo, so it has to come out of the flow. */
.card .tag{position:relative;z-index:2}
.card:has(.card__shot) .tag{
  position:absolute;margin:0;top:1rem;left:1rem;
  box-shadow:0 4px 12px rgba(22,35,43,.18);
}
.card:has(.card__shot){position:relative}

/* ── full-bleed band ─────────────────────────────────────────────────── */
.band{
  position:relative;margin:0;padding:0;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow:hidden;isolation:isolate;
}
/* THE HEIGHT MOVED FROM THE IMAGE TO THE BAND. The image is absolutely
   positioned now, so it no longer holds the band open — leaving the height on
   it collapses the section to nothing but the caption. */
.band{height:clamp(380px,52vh,560px)}
.band picture,.band picture img{display:block;width:100%;height:100%}
.band img{object-fit:cover;object-position:center 40%}

/* ── the parallax ─────────────────────────────────────────────────────
   The media box is 130% of the band and hangs 15% above and below, translating
   ±10%. Those two numbers are not free choices — they decide whether a bare
   strip of background ever shows at the top or bottom of the image:

       margin = H * (overhang - translate * (1 + 2*overhang))

   At 15% and 10% that leaves 9.4px of cover in hand on a 468px band, and it
   travels 122px. The first pair I tried (12% / 9%) left THREE pixels, which is
   inside sub-pixel rounding — it measured as covered and would have flickered
   a hairline on some displays. If either number is edited, redo the sum.

   `background-attachment:fixed` would have been three lines and is what most
   sites use. It is not used here: iOS Safari ignores it and paints the image
   at the wrong scale, and on desktop it forces a full repaint of the image on
   every scroll tick. Moving a transform is composited instead. */
.band__media{
  position:absolute;inset:-15% 0;z-index:0;
  will-change:transform;transform:translate3d(0,0,0);
}
.band figcaption{z-index:1}

@keyframes bandPan{
  from{transform:translate3d(0,-10%,0)}
  to  {transform:translate3d(0, 10%,0)}
}
/* Preferred path: a scroll-driven animation, which runs off the main thread
   and needs no JavaScript at all. `view()` ties progress to the element
   crossing the viewport. Chrome, Edge and Safari 26 have it; the script at the
   foot of the page feature-detects and only does the work where they don't. */
@supports (animation-timeline: view()){
  /* A NAMED timeline on the band, not an anonymous `view()` on the media.
     `view()` resolves against the subject's nearest SCROLLPORT, and `.band`
     has `overflow:hidden` — which makes it a scroll container. So the media's
     anonymous timeline was measured against a box that never scrolls, progress
     sat at 0 for ever, and the transform stayed at identity at every scroll
     position while `CSS.supports('animation-timeline','view()')` cheerfully
     reported true and the JS fallback stood down. Measured, not assumed.

     Declaring the timeline on `.band` fixes it: the band's own nearest
     scrollport is the document, and a named timeline is visible to its
     descendants. */
  .band--parallax{view-timeline-name:--band;view-timeline-axis:block}
  .band--parallax .band__media{
    animation:bandPan linear both;
    animation-timeline:--band;
    animation-range:cover 0% cover 100%;
  }
}

@media (prefers-reduced-motion:reduce){
  /* No drift at all, and the media sits square in the window. */
  .band__media{inset:0;animation:none!important;transform:none!important;will-change:auto}
}
.band figcaption{
  position:absolute;inset:auto 0 0 0;color:#fff;
  padding:clamp(4rem,9vw,6.5rem) var(--gut) clamp(2rem,4vw,3rem);
  background:linear-gradient(to top,
    rgba(8,13,17,.94) 0%, rgba(8,13,17,.82) 26%, rgba(8,13,17,.42) 62%, transparent 100%);
}
.band figcaption>*{max-width:min(var(--maxw),52ch);margin-inline:auto}
.band__k{
  display:block;font:600 .75rem/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:#FFB99E;margin-bottom:.55rem;
}
.band figcaption p{
  margin:0 auto;font:400 clamp(1.15rem,2.3vw,1.6rem)/1.45 var(--disp);color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion:reduce){
  .card:hover .card__shot img{transform:none}
  .portrait img{animation:none}
  .pillbox--a,.pillbox--b{animation:none}
  .pill i{animation:none}
}


/* ═══════════════  THE SECTIONS ADDED IN THE REBUILD  ═══════════════════ */

/* ── where the week goes ──────────────────────────────────────────────── */
.pains{
  list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;gap:.8rem;position:relative;z-index:1;
}
@media (min-width:700px){.pains{grid-template-columns:repeat(2,1fr)}}
.pains li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.4rem;box-shadow:0 2px 10px rgba(22,35,43,.04);
  display:grid;gap:.15rem;text-align:left;
}
.pains b{font:600 1rem/1.4 var(--sans);color:var(--ink)}
.pains span{color:var(--muted);font-size:.9375rem;line-height:1.55}

.aside{
  max-width:68ch;margin:clamp(2rem,4vw,2.8rem) auto 0;text-align:center;
  color:var(--muted);font-size:1.0625rem;line-height:1.75;position:relative;z-index:1;
}
.aside strong{color:var(--ink);font-weight:600}
.aside--tight{font-size:.9375rem;max-width:74ch}

/* ── the worth calculator ─────────────────────────────────────────────
   Deliberately plain arithmetic the visitor can check. A number somebody
   works out themselves persuades; a number we assert gets discounted. */
.calc{
  max-width:var(--maxw);margin-inline:auto;position:relative;z-index:1;
  display:grid;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 12px 34px rgba(22,35,43,.07);
}
@media (min-width:860px){.calc{grid-template-columns:1.1fr .9fr}}
.calc__controls{padding:clamp(1.6rem,3vw,2.4rem);text-align:left}
.calc__controls label{display:block;margin-bottom:1.8rem}
.calc__lab{display:block;font:600 .9375rem/1.4 var(--sans);margin-bottom:.9rem}
.calc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--coral),#FFD0C2);outline:none;margin:0 0 .6rem;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--coral);cursor:pointer;
  box-shadow:0 4px 12px rgba(255,107,74,.35);
}
.calc input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--coral);
  cursor:pointer;box-shadow:0 4px 12px rgba(255,107,74,.35);
}
.calc output{display:block;font:600 1.05rem/1 var(--disp);color:var(--coral)}
.calc__note{margin:0;color:var(--muted);font-size:.875rem;line-height:1.6}
.calc__result{
  padding:clamp(1.8rem,3.5vw,2.6rem);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,#16232B,#22333F);color:#fff;
}
.calc__k{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65)}
.calc__result b{
  display:block;margin:.7rem 0 .2rem;font:600 clamp(2.6rem,7vw,4rem)/1 var(--disp);
  letter-spacing:-.045em;color:#FFC94D;font-variant-numeric:tabular-nums;
}
.calc__sub{color:rgba(255,255,255,.7);font-size:.95rem}
.calc__line{margin:.9rem 0 1.6rem;color:rgba(255,255,255,.85);font-size:.95rem}

/* ── the employee comparison ──────────────────────────────────────────── */
.compare{max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;position:relative;z-index:1}
.compare h3{text-align:center;font-size:1.3rem;margin-bottom:1.2rem}
.compare .scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.compare table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.compare th,.compare td{padding:.85rem 1rem;text-align:right;border-bottom:1px solid var(--line)}
.compare th:first-child,.compare td:first-child{text-align:left;font-weight:600}
.compare thead th{
  font:600 .7rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:rgba(22,35,43,.03);
}
.compare tbody tr:last-child td{border-bottom:0}
.compare td b{color:var(--coral);font-size:1.05rem}
.compare__note{
  max-width:74ch;margin:1.2rem auto 0;text-align:center;color:var(--muted);
  font-size:.875rem;line-height:1.7;
}

/* ── capability grid ──────────────────────────────────────────────────── */
.caps{
  max-width:var(--maxw);margin-inline:auto;display:grid;gap:1rem;
  position:relative;z-index:1;
}
@media (min-width:640px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.5rem;text-align:left;box-shadow:0 2px 10px rgba(22,35,43,.04);
  transition:transform .35s var(--pop),box-shadow .35s var(--ease);
}
.cap:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,35,43,.09)}
.cap h3{
  font-size:1.05rem;margin-bottom:.55rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
}
.cap p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}

/* ── three-across plain cards ─────────────────────────────────────────── */
@media (min-width:1040px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card--plain{text-align:left}
.card--plain h3{font-size:1.15rem;margin-bottom:.5rem}
.card--plain p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.65}

/* ── the connections marquee ──────────────────────────────────────────── */
.mq{
  position:relative;z-index:1;margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  display:grid;gap:1rem;
  /* CLIP, don't just mask. A mask hides the overflowing rows visually and does
     nothing about layout — the 2,833px row still widened the document and gave
     the whole page 1,393px of horizontal scroll. Measured, not guessed. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* SCALING THE PILLS CHANGES THE SPEED, because the duration is a fixed time to
   travel the row's own width — and the row grew from 3,271px to 4,831px when
   the logos doubled. Left alone, the marquee went from 26px/sec to 38px/sec:
   bigger AND faster, which reads as frantic rather than confident.
   Measured on the live page and re-timed to hold the original speed. If the
   list of brands changes again, re-measure — these numbers are tied to the row
   width, not to a feel. */
.mq__row{display:flex;width:max-content;animation:mq-left 93s linear infinite}
.mq__row--back{animation:mq-right 120s linear infinite}
.mq__set{display:flex;gap:1rem;padding-right:1rem;flex:0 0 auto}
@keyframes mq-left {from{transform:translateX(0)}    to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.mq:hover .mq__row{animation-play-state:paused}
.tick{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.7rem 1rem 1.3rem;
  border-radius:999px;white-space:nowrap;background:#fff;border:1px solid var(--line);
  box-shadow:0 3px 12px rgba(22,35,43,.06);
  font:500 1.125rem/1 var(--sans);color:var(--ink);
}
/* THE GLYPH BOX IS FIXED, THE ARTWORK IS NOT.
   Every brand draws its mark to a different aspect: Slack fills a square,
   WordPress is a circle, Stripe is a tall S. Sizing by height alone would make
   the wide ones visually enormous next to the narrow ones, which is exactly the
   "all different sizes" look we are trying to avoid. So each glyph gets an
   identical 1.05rem box and is contained inside it — uniform optical weight
   across twenty-four marks drawn by twenty-four different design teams. */
.tick__i{
  flex:0 0 auto;width:2.2rem;height:2.2rem;display:block;
  fill:currentColor;color:var(--muted);
}
/* On a phone the full-size pill averages 201px, so only 1.9 of them are on
   screen at once and the strip stops doing its job — the point of this section
   is how MANY things it works with, and two logos sliding past does not say
   that. Stepped down just enough to show closer to three, while still landing
   well above where it started (53px tall against the original 37). */
@media (max-width:640px){
  .tick{gap:.6rem;padding:.72rem 1.15rem .72rem .9rem;font-size:1rem}
  .tick__i{width:1.7rem;height:1.7rem}
  .mq__set{gap:.7rem;padding-right:.7rem}
  .mq{gap:.7rem}
}
/* The sprite must not occupy layout. `display:none` on the <svg> would stop
   <use> resolving in some engines, so it is taken out of flow instead. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Brand colours, darkened only where the official hex could not hold 2.6:1
   on the cream. See the sprite comment in index.html. */
.tick--gmail .tick__i{color:#EA4335}
.tick--googlecalendar .tick__i{color:#4285F4}
.tick--googlesheets .tick__i{color:#34A853}
.tick--googledrive .tick__i{color:#4285F4}
.tick--xero .tick__i{color:#12ABDE}
.tick--quickbooks .tick__i{color:#2CA01C}
.tick--sage .tick__i{color:#00B530}
.tick--stripe .tick__i{color:#635BFF}
.tick--whatsapp .tick__i{color:#1FB356}
.tick--shopify .tick__i{color:#73AB57}
.tick--woocommerce .tick__i{color:#96588A}
.tick--mailchimp .tick__i{color:#B29C12}
.tick--slack .tick__i{color:#4A154B}
.tick--dropbox .tick__i{color:#0061FF}
.tick--notion .tick__i{color:#000000}
.tick--airtable .tick__i{color:#15ABE5}
.tick--calendly .tick__i{color:#006BFF}
.tick--hubspot .tick__i{color:#F27354}
.tick--salesforce .tick__i{color:#00A1E0}
.tick--trello .tick__i{color:#0052CC}
.tick--asana .tick__i{color:#F06A6A}
.tick--wordpress .tick__i{color:#21759B}
.tick--zapier .tick__i{color:#FF4F00}
.tick--twilio .tick__i{color:#F22F46}


@media (prefers-reduced-motion:reduce){
  .mq__row,.mq__row--back{animation:none}
  .mq{-webkit-mask-image:none;mask-image:none;margin-left:0;margin-right:0;width:auto}
  .mq__row{flex-wrap:wrap;width:auto}
  .mq__row--back,.mq__set:nth-child(2){display:none}
  .mq__set{flex-wrap:wrap}
  .cap:hover{transform:none}
}

/* The closing argument. Set larger than body copy and centred on a tight
   measure, because it is the last thing read before the button. */
.closing{
  max-width:62ch;margin:0 auto clamp(2rem,4vw,2.8rem);text-align:center;
  position:relative;z-index:1;
}
.closing p{font-size:1.15rem;line-height:1.7;color:var(--muted)}
.closing p:last-child{margin-bottom:0}
.closing strong{color:var(--ink);font-weight:600}