/* Lifted from the approved design file, which loaded Inter from Google
   Fonts. The app self-hosts the same file, so the public site now does too:
   no external request, and the two halves of the site look identical. */
@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================================
   HRStuff — the public site: Home, Pricing and FAQ.
   Palette, type and metrics follow the existing site and product stylesheet, so
   these read as the same product: one committed white palette — black ink on
   white, #0071E3 for anything actionable, hairlines instead of boxes, 980px
   buttons. Type is the product's own: the system sans of public/styles.css,
   headings at 600, uppercase labels at .05em, and the system mono kept for
   figures alone. There is no dark mode, so a machine set to dark does not
   repaint the page — the same choice styles.css makes.
   =========================================================================== */

:root {
  --ground:       #ffffff;
  --paper:        #f5f6f8;
  --ink:          #000000;
  --muted:        #33333a;
  --faint:        #5b5b62;
  /* The small uppercase words that open a section or head a group: SIMPLE,
     FUNCTIONAL, and the labels inside cards. One step lighter than --faint, so
     they sit back from the words they introduce without going quiet.

     Its own value rather than a lighter --faint, which seven other things use.

     6.74:1 before, 5.96:1 now, against the 4.5:1 that text this small is asked
     to stand from white. Room to go lighter still if wanted: 4.56:1 at #75757e
     is the floor. */
  --label-ink:    #63636a;
  --rule:         #e2e4e8;
  --rule-strong:  #c9ccd2;
  --accent:       #0071e3;
  --accent-ink:   #0058b4;
  --accent-wash:  #eef5fd;
  --adds:         #12522f;
  /* The ground its pill sits on, taken from the product's own status pills so
     a saving here looks like a status there. #12522f on it reads at 9.4:1. */
  --adds-wash:    #e8f5ea;
  --takes:        #8a2f1b;
  --shadow:       0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(16,24,40,.28);

  /* Both stacks are public/styles.css's own, so the page renders in the
     same face the product does: SF Pro on a Mac, Inter on Windows. */
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Bahnschrift", ui-monospace, SFMono-Regular, "Lucida Console", "Courier New", monospace;
  --display: var(--sans);
  --body:    var(--sans);

  --col: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.06; letter-spacing: -.032em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.22; letter-spacing: -.024em; }
/* One heading, capped a touch lower than every other h2, so it never grows
   past what its own sentence fits on one line.

   THE COLUMN IT SITS IN STOPS GROWING BEFORE THE LETTERS DO. Past about
   1176px wide the page has reached its own maximum width, so the column
   this heading sits in stops getting any wider — but the letters, sized off
   the screen's own width, keep growing until 1200px. In that gap the words
   are still getting bigger with nowhere left to grow into, and "Enterprise-
   style flexibility, without the complexity." stops fitting on one line and
   never goes back, however much wider the screen gets after that.

   35 UNMOVING PIXELS RATHER THAN A SHARE OF THE SCREEN, AND MEASURED, NOT
   GUESSED: the widest this column is ever measured to get is 826px, and this
   exact sentence, in this typeface, needs no more than 818px of it at 35px —
   32px to spare. Every other h2 keeps growing past that point; only this one
   stops early, because it is the only one this close to not fitting. */
.stays-one-line { font-size: clamp(1.65rem, 3vw, 35px); }
h3 { font-size: 1.08rem; letter-spacing: -.012em; line-height: 1.35; }
p  { margin: 0; }
a  { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--col); margin: 0 auto; padding: 0 28px; }

/* --- The Contact form ------------------------------------------------------
   THE FIRST AND ONLY FORM ON THE PUBLIC SITE, so none of this existed before.
   Written from the same handful of tokens as everything else here rather than
   borrowed from the app: the app's fields are drawn for dense screens of them,
   and one form on a page of prose wants more air and no boxes around boxes.

   Hairlines, one accent, and the label above the field — the same as every
   other block on this site. Nothing here is clever, on purpose: a contact form
   that surprises somebody is a contact form they abandon. */

.ask { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 34rem; }

.ask-row { display: flex; flex-direction: column; gap: 6px; }

/* The same lettering as the small labels that open each section, so the form
   reads as part of the page rather than as something pasted onto it. */
.ask-label {
  font-family: var(--sans); font-size: .715rem; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; color: var(--label-ink);
}
.ask-optional {
  letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--faint);
}

.ask-input {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 11px 13px; width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.ask-input::placeholder { color: var(--faint); }
.ask-input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
/* Room to write a real message in, and free to grow rather than scroll inside
   a fixed box. */
.ask-text { resize: vertical; min-height: 9rem; line-height: 1.55; }

.ask-send { display: flex; flex-direction: column; gap: 10px; align-items: start; }

/* --- What came back of it --------------------------------------------------
   One block, above the form, for both answers: it worked, or it did not. They
   are drawn alike apart from their colour because they are the same thing —
   the page telling somebody what just happened — and a reader should not have
   to learn two shapes to read one sentence. */
.ask-said {
  border: 1px solid var(--rule); border-left-width: 3px; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 4px; max-width: 34rem;
  font-size: .95rem; line-height: 1.55;
}
.ask-said p { margin: 0; }
.ask-said p + p { margin-top: 8px; }
.ask-said-good { border-left-color: var(--accent); background: var(--accent-wash); }
.ask-said-bad { border-left-color: #c8322f; background: #fdf2f2; }

/* The box the message is about, so a refusal is not a sentence somebody has to
   match to a field themselves. The same idea as the app's own forms. */
.ask-row-wrong .ask-input { border-color: #c8322f; }
.ask-row-wrong .ask-label { color: #a32a27; }

/* --- Shared page furniture ----------------------------------------------- */

.band { border-top: 1px solid var(--rule); }
.band-inner { display: grid; grid-template-columns: 190px 1fr; gap: 48px; padding: 38px 0; align-items: start; }
.rail { position: sticky; top: 34px; }
.label {
  font-family: var(--sans); font-size: .715rem; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; color: var(--label-ink); display: block;
}
/* The word that opens each section. Larger than the small labels inside
   cards, because it is doing the job of a heading. */
.rail .label { font-size: .88rem; padding-top: .5rem; border-top: 2px solid var(--ink); }

.stack { display: flex; flex-direction: column; gap: 26px; align-items: start; }
.lede { font-size: 1.22rem; line-height: 1.55; color: var(--muted); max-width: 62ch; }
/* Full width of the column, so the right edge lands with the pairs grid
   below it rather than stopping 140px short of it. It was capped at 64ch,
   which is the usual advice for a comfortable line — the trade is a longer
   line for a column that lines up, and the owner asked for the alignment. */
.prose { width: 100%; color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 500; }
.masthead {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 20px; padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: 11px; font-weight: 600;
  letter-spacing: -.01em; font-size: 1.04rem; color: var(--ink); text-decoration: none;
}
.brand svg { display: block; border-radius: 7px; }

/* The wordmark, at the widths the product itself uses: 116px on the sign-in
   page, 94px in the sidebar. Sized by width, because that is what keeps it
   the same size as the app's. */
.brand-mark {
  display: block; width: 116px; aspect-ratio: 640 / 135;
  background: url("/logo.png") no-repeat center / contain;
}
.brand-mark-sm { width: 94px; }

.nav { display: flex; align-items: center; gap: 26px; margin-left: 34px; margin-right: auto; }
.nav-link {
  font-size: .93rem; color: var(--muted); text-decoration: none;
  padding: 3px 0; border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-here { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent); }

@media (max-width: 720px) {
  .nav { order: 3; width: 100%; margin-left: 0; margin-right: 0; gap: 20px; }
  .nav-link { font-size: .9rem; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: .96rem; font-weight: 500;
  padding: 12px 22px; border-radius: 980px; text-decoration: none;
  border: 1px solid transparent; transition: background-color .16s ease, border-color .16s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { border-color: var(--rule-strong); color: var(--accent); }
.btn-secondary:hover { background: var(--paper); border-color: var(--faint); }
/* The header Log in. Declared after .btn, or .btn would win on equal
   specificity and none of this would apply. */
.btn-small { font-size: .85rem; line-height: 1.25; padding: 7px 15px; }
.masthead-actions { display: flex; align-items: center; gap: 10px; }
.hero-note { font-size: .88rem; color: var(--faint); max-width: 48ch; }
/* #75757b is the lightest grey the product itself uses on white: 4.6:1,
   just over the 4.5 that text this small wants. Lighter reads better and
   fails the check. */
.footnote { font-size: .65rem; line-height: 1.55; color: #75757b; max-width: 52ch; }
.footnote sup { margin-right: .35em; }

.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; width: 100%; }
.pair { display: flex; flex-direction: column; gap: 7px; }
.pair p { font-size: .95rem; color: var(--muted); }

/* --- Margin marks ---------------------------------------------------------
   A small drawing in the gutter beside a paragraph. Only a pair given the
   "marked" class changes shape; every other pair on every other page keeps the
   plain stack it has now.

   All twelve are built on the same 88-unit square drawn at 84px, the same
   hairline weight, and one blue element each, so the column of them down the
   page reads as a rhythm rather than a scatter of icons.

   The fill-* rules must stay after the stroke rules: .acc and friends set
   fill:none, and these override it by declaration order at equal specificity. */

.pair.marked { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
.pair.marked .pair-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* The same gutter for the "what we do not do" answers, which are .qa rather
   than .pairs and so carry their own layout. */
.qa > div.marked { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
.qa > div.marked .qa-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.mark { display: block; width: 84px; height: 84px; }

.mark .hair     { stroke: var(--rule-strong); stroke-width: 1.25; fill: none; }
.mark .ink      { stroke: var(--muted);       stroke-width: 1.4;  fill: none; }
.mark .acc      { stroke: var(--accent);      stroke-width: 1.5;  fill: none; }
.mark .dash     { stroke: var(--rule-strong); stroke-width: 1.25; fill: none; stroke-dasharray: 3 2.5; }
.mark .dash-acc { stroke: var(--accent);      stroke-width: 1.25; fill: none; stroke-dasharray: 3 2.5; }
.mark .no       { stroke: var(--takes);       stroke-width: 1.5;  fill: none; stroke-linecap: round; }

.mark .fill-acc  { fill: var(--accent); }
.mark .fill-wash { fill: var(--accent-wash); }
.mark .fill-page { fill: var(--ground); }
.mark .fill-soft { fill: var(--paper); }
.mark .fill-hair { fill: var(--rule-strong); }

/* Between the existing 900px breakpoint and about 1058px the pairs are still
   two across but the columns have shrunk, and a 100px gutter would squeeze the
   paragraph to 193px — about 26 characters a line. Measured, not guessed. In
   that band the mark moves above its heading instead, which keeps it visible
   and hands the whole column back to the text. */
@media (min-width: 901px) and (max-width: 1060px) {
  .pair.marked { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qa > div.marked { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* --- The payslip-style document ------------------------------------------ */

.doc {
  background: var(--ground); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; font-variant-numeric: tabular-nums; margin: 0; width: 100%;
}
.doc-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.doc-who { font-weight: 600; font-size: 1rem; }
.doc-sub { font-size: .82rem; color: var(--muted); }
.doc-period { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .73rem; color: var(--faint); text-align: right; letter-spacing: .02em; line-height: 1.5; }
.doc-body { padding: 8px 24px 20px; }
.grp { padding: 14px 0 4px; }
.grp + .grp { border-top: 1px solid var(--rule); }
.grp > .label { margin-bottom: 8px; }
.line { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: .93rem; align-items: baseline; }
.line > span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9125rem; letter-spacing: 0; white-space: nowrap; }
.line em { font-style: normal; color: var(--faint); font-size: .84rem; }
.plus  { color: var(--adds); }
.total { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.total-label { font-weight: 600; font-size: .98rem; }
.total-figure { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.36rem; letter-spacing: -.01em; }
.total-figure sup { font-size: .4em; font-weight: 400; color: #75757b; margin-left: .1em; }
/* --- What twenty-five people cost, drawn ---------------------------------
   Four rows of bars against one scale, so the gap between the prices is a
   thing you SEE rather than four numbers you have to hold in your head.

   NO SCRIPT AND NO INLINE STYLE, which is what decides the shape of this. The
   site ships no JavaScript at all, and inline style attributes are refused, so
   a bar cannot carry its own width. Each width is a class below instead.

   WHICH MEANS THE FIGURE IS WRITTEN TWICE — once as the words in the row, once
   as a percentage here — and the two can drift apart. The class is named after
   the money it draws (.cmp-w-2400 is $2,400) so a wrong pair is visible rather
   than something you have to work out. Every width is that figure over $9,000,
   the top of the scale.

   The scale is linear and starts at zero, which is the whole point: ours is a
   sliver beside the rest, and any other scale would flatter somebody. */
.cmp { margin: 26px 0 0; }
.cmp-row {
  display: grid; grid-template-columns: 190px 1fr 126px; gap: 20px;
  align-items: center; padding: 15px 0;
}
.cmp-row + .cmp-row { border-top: 1px solid var(--rule); }
.cmp-who { display: flex; flex-direction: column; gap: 3px; }
.cmp-who strong { font-size: .93rem; font-weight: 600; }
.cmp-who em { font-style: normal; font-size: .78rem; line-height: 1.4; color: var(--faint); }
/* The track is the full $9,000, drawn faintly, so a short bar reads as short
   against something rather than just as small. */
.cmp-track { position: relative; height: 15px; border-radius: 4px; background: var(--paper); }
.cmp-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--rule-strong); }
/* A price given as a range is two bars: the lighter one reaches the top of the
   range, the solid one stops at the bottom of it. */
.cmp-bar-to { background: var(--rule); }
.cmp-row-ours .cmp-bar { background: var(--accent); }
.cmp-fig {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .875rem; letter-spacing: 0; white-space: nowrap; color: var(--muted);
}
.cmp-row-ours .cmp-fig { color: var(--ink); font-weight: 600; }
/* What the row above costs MINUS ours, in the green the site uses for money
   coming in rather than going out. The label sits on its own line and the
   figure under it, so a range fits the column without the column having to
   grow wide enough to swallow the bars.

   No such line on our own row: there is nothing to save against ourselves,
   and a "saves $0" would be a strange thing to print.

   A GREEN BOX, THE ONE THE PRODUCT ALREADY USES. Inside HRStuff a status is a
   small tinted pill — #e8f5ea behind #137535, 4px corners — and a saving is the
   same kind of thing: a short verdict on the row it sits in. Borrowing the shape
   means somebody who signs up meets a pattern they have already seen.

   FLAT, NOT SEE-THROUGH. The product's pills are a solid tint rather than a
   transparent green, and a transparent one here would pick up the faint grey of
   the bar track behind it on some rows and white on others — the same box in two
   shades down one column. */
/* BLOCK WITH fit-content, NOT inline-block, AND THAT PAIR IS THE WHOLE TRICK.
   The cell around it is nowrap, so an inline-block pill was held on the same
   line as the price above it and the column asked for both widths side by side
   — which pushed the page sideways. Block puts it on its own line; fit-content
   stops it stretching to the full column; margin-left:auto keeps it against the
   right edge with the figures. */
.cmp-saving {
  display: block; width: fit-content; margin: 8px 0 0 auto;
  padding: 5px 8px 6px; border-radius: 4px;
  background: var(--adds-wash); color: var(--adds);
  line-height: 1.35; white-space: nowrap; text-align: right;
}
/* The label, sized and spaced like the product's status pills. */
.cmp-saving > span {
  display: block; font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .82;
}
/* The figure, in the same face the other money on this page is set in. */
.cmp-saving b {
  display: block; margin-top: 2px; font-weight: 600; font-size: .8rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.cmp-w-300  { width: 3.33%; }
.cmp-w-900  { width: 10%; }
.cmp-w-1800 { width: 20%; }
.cmp-w-2400 { width: 26.67%; }
.cmp-w-4500 { width: 50%; }
.cmp-w-6000 { width: 66.67%; }
.cmp-w-9000 { width: 100%; }
/* The row of headings, in the same grid as everything below it so "Per year"
   lands over the figures it names. It uses .label for its lettering, which is
   what every other small heading on the site is set in.

   The line under it is heavier than the ones between rows: it separates a
   heading from data, which is a different job from separating one row from the
   next. */
.cmp-head { padding: 0 0 10px; border-bottom: 1px solid var(--rule-strong); }
.cmp-head + .cmp-row { border-top: 0; }
.cmp-head .cmp-head-fig { text-align: right; }

/* The scale sits in the same grid as the rows, so its marks line up with the
   track above without anybody counting pixels. */
.cmp-scale { padding-top: 9px; }
.cmp-scale + .cmp-row, .cmp-row + .cmp-scale { border-top: 0; }
.cmp-ticks { display: flex; justify-content: space-between; }
.cmp-ticks span {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .68rem; letter-spacing: 0; color: var(--label-ink);
}
@media (max-width: 720px) {
  /* Too narrow for three columns. The name and its figure share a line, and
     the bar drops underneath the pair it belongs to. */
  .cmp-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .cmp-track { grid-column: 1 / -1; }
  .cmp-fig { align-self: start; }
  .cmp-scale { grid-template-columns: 1fr; }
  /* The spacer that holds the bar column open on a wide screen has no column
     to sit in here, and left in place it pushed "Per year" onto a line of its
     own instead of letting it sit opposite "Compared". */
  .cmp-blank { display: none; }
}

.working { background: var(--accent-wash); border-top: 1px solid var(--rule); padding: 18px 24px 20px; }
.working .label { color: var(--accent-ink); margin-bottom: 10px; }
.work-line { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .755rem; letter-spacing: 0; line-height: 1.85; color: var(--muted); }
.work-line b { font-weight: 500; color: var(--ink); }

/* The "Included" against each line, in the green this design already uses for
   something added rather than taken away — the same --adds as the plus figures
   and the free-of-charge price.

   .working-included, not .working: there are two of these panels and the other
   is the payroll workings, where the values are amounts rather than answers.

   The label above them keeps its blue. It says "Included at no charge", which
   is the panel's heading rather than one of its answers. 8.41:1 on the panel's
   pale blue, where text this small is asked to stand 4.5:1. */
.working-included .work-line b { color: var(--adds); }

/* --- Rules and Actions: an element shown as the sentences it is made of --- */

.rules { display: flex; flex-direction: column; }
/* 68px, not 56. The column was sized when the labels read "Rule 1"; they now
   read "Rule Set 1" and need 66px to stay on one line, so all three were
   wrapping. A fixed width rather than auto, because the three labels have to
   line up with each other and with the rule text beside them. */
.rule {
  display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: baseline;
  padding: 13px 0;
}
.rule + .rule { border-top: 1px solid var(--rule); }
.rule > .label { font-size: .66rem; }
.rule p { font-size: .93rem; line-height: 1.5; }
.rule b { font-weight: 600; }
.rule .amt, .says b {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .86rem; font-weight: 500; letter-spacing: 0;
}
.rule .none { color: var(--faint); }

/* A sentence quoted out of the software, rather than written for the page. */
p.says {
  color: var(--ink); font-size: .93rem; line-height: 1.5;
  border-left: 2px solid var(--rule-strong); padding-left: 14px;
}

@media (max-width: 620px) {
  .rule { grid-template-columns: 1fr; gap: 5px; }
}

/* --- Closing + footer ---------------------------------------------------- */

.closing {
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 38px 0; max-width: 62ch; margin: 0 auto; text-align: center;
}
.page-foot { border-top: 1px solid var(--rule); padding: 30px 0 78px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.page-foot p { font-size: .82rem; color: var(--faint); max-width: 66ch; }

/* --- Direction switching -------------------------------------------------- */

.page { display: none; }
.page.is-on { display: block; animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page.is-on { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===========================================================================
   A — The three words
   =========================================================================== */

/* The two columns start together at the top. Centred, the shorter copy
   column sat noticeably below the card beside it. */
.a-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; padding: 30px 0 38px; align-items: start; }
/* Sits a little below the top of the card, without going back to being
   centred against it — that moved whenever the card grew a row. */
.a-copy { display: flex; flex-direction: column; gap: 28px; align-items: start; padding-top: 44px; }
.a-copy h1 em { font-style: normal; color: var(--accent); }
.a-copy h1 span { display: block; }

.price-list { width: 100%; border-top: 2px solid var(--ink); }
.price-row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums;
}
.price-row > div { display: flex; flex-direction: column; gap: 3px; }
.price-row p { font-size: .8rem; color: var(--muted); }
.price-row .fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .92rem; letter-spacing: 0; color: var(--ink); }
.price-row .fig-free { font-family: var(--sans); font-size: .71rem; font-weight: 600; color: var(--adds); letter-spacing: .05em; text-transform: uppercase; }
.price-row h3 { font-size: .92rem; }
.price-foot { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-top: 16px; }
.price-foot .total-figure { font-size: 1.6rem; }

/* ===========================================================================
   Pricing and FAQ pages
   =========================================================================== */

.page-hero { padding: 30px 0 38px; display: flex; flex-direction: column; gap: 26px; align-items: start; max-width: 72ch; }
.page-hero h1 em { font-style: normal; color: var(--accent); }

.price-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }
.price-strip-item { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.price-strip-item .fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.42rem; letter-spacing: -.01em; }
.price-strip-item p { font-size: .9rem; color: var(--muted); }

/* A screenshot of the product, framed like the payslip cards so it belongs to
   the same page rather than sitting on it. */
/* A drawn illustration rather than a screenshot or one of the margin marks.

   NARROWER THAN THE COLUMN IT SITS IN, and centred. At the full width of the
   stack it towered over the twelve small line marks below it and became the
   thing the section was about, which it is not.

   The width and height attributes on the tag matter as much as this rule: they
   tell the browser the shape before the file arrives, so the twelve points
   below do not jump down the page as it loads. */
/* THE NEGATIVE TOP MARGIN CANCELS EMPTY SPACE INSIDE THE PICTURE, and without
   knowing that it looks like a mistake. The file carries about 41px of blank
   above the drawing at the size it is shown, on top of the 26px the stack puts
   between everything. Pulling it up 29px leaves roughly 38px of real air.

   The bottom is the same trick against the 34px of blank below the drawing:
   -20px leaves about 40px there, which evens the picture up between the
   paragraph above and the points below.

   ASKED FOR: a little more room above and below. Both pulls were eased by 10px
   — they were -39 and -30, giving about 28px and 30px — so the picture now
   sits a touch clear of the words rather than tight against them. The pair are
   kept close to each other on purpose: the air above and the air below should
   look the same, and the ten came off both for that reason.

   BOTH NUMBERS BELONG TO THIS PARTICULAR FILE. They were -26 and -33 for the
   picture that was here before, whose blank ran the other way round, and they
   had to be worked out again the moment it was swapped. Recrop or replace the
   image and these stop matching it. */
.illus { width: 100%; margin: -29px 0 -20px; }
.illus img { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

/* A second illustration, under the People heading on Features. Its own class
   rather than reusing .illus: that one's margins cancel blank space specific
   to the Home hero picture's crop, and this is a different file with a
   different crop — reusing them would be tuned to the wrong picture, the same
   mistake the note above this warns about.

   This file carries about 27px of blank top and bottom at the size it is
   shown — symmetric, unlike the Home picture — on top of the 26px the stack
   already puts between everything, so the gap read as 53px on both sides
   before this. -27px each side cancels it back to that 26px. */
.people-illus { width: 100%; margin: -27px 0 -27px; }
.people-illus img { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

.shot { width: 100%; margin: 0; }
.shot-frame {
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; background: var(--paper);
  min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame:has(.shot-live) { display: block; min-height: 0; background: var(--ground); }
.shot-live { display: block; width: 100%; border: 0; }
/* One picture is drawn at a desktop width and scaled down to fit the column.
   Squeezed into 824px the app stacks the two date boxes on top of each other,
   which is honest but makes the picture a third taller than it needs to be; at
   1120px they sit side by side as they do on a real screen. The frame carries
   the scaled height, because a transform does not change the room an element
   takes up — without it the frame would still reserve all 646px. And the
   picture is taken out of the flow: left in it, its 1120px box stretched the
   frame to 1122px and the whole band broke out of the 826px column. */
.shot-scaled {
  position: absolute; top: 0; left: 0;
  width: 1120px; height: 646px;
  transform: scale(.7357); transform-origin: top left;
}
.shot-frame:has(.shot-scaled) { position: relative; height: 476px; }
.shot figcaption { font-size: .85rem; color: var(--muted); padding-top: 10px; }

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; }
.plan {
  display: flex; flex-direction: column; gap: 7px; align-items: start;
  padding: 22px 48px 24px 24px; border: 1px solid var(--rule); border-radius: 14px;
  flex: 1; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
/* Picking a plan.

   The radio sits immediately before its card and the card is its label, so a
   click anywhere in the box chooses that plan and the keyboard reaches it
   through the radio. The blue border used to mark the cheaper plan; it marks
   the CHOSEN one now, and the "Half price" badge is what says which is the
   bargain — two jobs that were doing one thing before.

   Written as `:checked + .plan` rather than `.plan:has(:checked)`. Both work;
   the sibling selector is the older, more widely supported of the two, and the
   radio has to sit outside the label for it, which is no loss. */
.plan-choice { position: relative; display: flex; }
.plan-radio:checked + .plan { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-radio:focus-visible + .plan { outline: 2px solid var(--accent); outline-offset: 3px; }
.plan-radio {
  position: absolute; top: 20px; right: 20px; z-index: 1; margin: 0;
  width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer;
}
.plan-note { font-size: .9rem; color: var(--muted); }
.plans-form { display: flex; flex-direction: column; gap: 26px; align-items: start; width: 100%; }
/* A fieldset is what groups a set of radios for anybody using a screen reader.
   Its own borders and padding are in the way of the grid inside it. */
.plans-set { border: 0; padding: 0; margin: 0; min-width: 0; width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.plan .fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.plan .per { font-size: .84rem; color: var(--muted); }
.badge {
  font-size: .63rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 980px;
}

.qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 44px; width: 100%; }
.qa > div { display: flex; flex-direction: column; gap: 6px; }
.qa p { font-size: .93rem; color: var(--muted); }

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .band-inner { grid-template-columns: 1fr; gap: 22px; padding-top: 38px; padding-bottom: 38px; }
  .rail { position: static; }
  .a-hero { grid-template-columns: 1fr; gap: 44px; padding: 30px 0 38px; }
  .pairs, .qa, .price-strip, .plans { grid-template-columns: 1fr; gap: 26px; }
  .page-hero { padding: 30px 0 38px; }
  .closing { padding: 38px 0; }
}

/* The framed pictures on the Features page. Each carried its height as a style
   attribute in the design file; the app's Content-Security-Policy drops those,
   which left both at the browser's default 150px with the picture cut off. The
   numbers are the design's own. */
.shot-250 { height: 250px; }
.shot-430 { height: 430px; }