/* GigFee site shell: tokens, typography, masthead and footer.
   Shared by index.html, privacy-policy.html, terms.html and the guides, so
   the pages cannot drift apart. Page-specific layout stays in each page.

   The palette is paper and ink. It used to open on a saturated violet
   gradient, which is the house style of every generated landing page on the
   internet and made a tax tool look like a toy. The brand is now a blue, and
   it is an accent on the mark, the links and the ticks, spent where
   it means something instead of poured over the fold. The only dark object
   above the fold is the phone itself, and the one dark band is at the end. */

:root {
  color-scheme: light dark;

  /* Ink and paper, the app's own neutrals, faintly cool. */
  --page: #fbfcff;
  --surface: #ffffff;
  --panel: #f3f5f7;
  --ink: #171819;
  --body: #3a3c3f;
  --muted: #696b6c;
  --line: #e1e3e5;
  --line-strong: #171819;
  --code: #eeeff2;

  /* The brand blue. The deeper one is the app's own accent and clears 4.5:1
     as link text on paper; the lighter one is the mark, for fills only. */
  --accent: #315f9b;
  --accent-light: #3a68a5;
  --accent-wash: #e3efff;

  /* Warning red, the app's overdue colour. The text weight clears 4.5:1; the
     brighter one is a fill, never a word. */
  --warn: #c03028;
  --warn-fill: #e0453c;

  /* The single dark tone: the phone bezel and the closing band. */
  --slate: #171819;
  --slate-ink: #ffffff;
  --slate-body: #b6b8bb;
  --slate-line: #2e3032;

  /* Kept because other pages reference them. The hero no longer uses a
     gradient, so these now describe the closing band. */
  --hero-from: #171819;
  --hero-to: #171819;
  --hero-ink: #ffffff;
  --hero-body: #b6b8bb;

  --shadow: rgba(23, 24, 25, 0.1);

  --radius: 12px;
  --shell: 68rem;
  --measure: 44rem;

  /* Everything made of words. */
  --f-ui: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Figures only, so a reader can find the money without reading the page.
     Loaded on the pages that use it; the fallback is a real condensed face,
     so a page that has not loaded it still lines its columns up. */
  --f-fig: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101112;
    --surface: #171819;
    --panel: #1c1e1f;
    --ink: #eff1f3;
    --body: #c5c7ca;
    --muted: #9a9b9d;
    --line: #2c2e30;
    --line-strong: #eff1f3;
    --code: #232425;

    --accent: #5582c5;
    --accent-light: #4c7bbd;
    --accent-wash: #152234;

    --warn: #ff8a80;
    --warn-fill: #e0453c;

    --slate: #0a0b0c;
    --slate-line: #26282a;

    --shadow: rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* `text-wrap: balance` evens out the lines of a heading so the last one is
   not left holding a single word. Ignored by browsers that do not have it,
   which just wrap as before. */
h1, h2, h3 { color: var(--ink); line-height: 1.18; margin: 0 0 0.6rem; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 5vw, 3.35rem); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.25rem; }

/* Any figure, anywhere. Condensed and tabular: columns of money line up, and
   the numbers are findable without reading the sentence around them. */
.fig {
  font-family: var(--f-fig);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}

/* The label above a heading. Says what kind of thing follows. */
.kicker {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

/* Masthead */
.masthead {
  position: sticky; top: 0; z-index: 10;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.8rem; padding-bottom: 0.8rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand span { font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.02em; }
.brand span b { color: var(--accent); font-weight: 700; }
.masthead nav { display: flex; gap: 1.45rem; font-size: 0.95rem; font-weight: 500; }
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }
@media (max-width: 46rem) { .masthead nav { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.35rem; border-radius: 9px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent;
}
.btn-solid { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline { border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--page); }

/* The Google Play badge.
   Google's brand guidelines require the supplied asset unmodified, with
   clear space around it and a minimum height, so it is sized rather than
   restyled: no border, no filter, no recolour.

   The asset carries 41px of mandatory clear space on every side, baked into
   the PNG: the visible badge is 564x168 inside 646x250. Sized naively it
   draws a small badge floating in invisible margin, which is why it never
   lined up with anything beside it. The height below is the image height
   that yields --badge-h of actual badge, and the negative margin hands the
   baked-in clear space back to the layout, so a flex gap is the real gap. */
.play-badge { display: inline-block; line-height: 0; border-radius: 8px; --badge-h: 54px; }
.play-badge img {
  height: calc(var(--badge-h) * 1.4881);  /* 250/168: asset over visible */
  width: auto;
  /* The global img rule caps every image at the width of its container, and
     an inline-block that is sized by the image it contains resolves that to
     less than the image needs: the badge came out narrower than it is tall,
     which is exactly the distortion Google forbids. */
  max-width: none;
  margin: calc(var(--badge-h) * -0.2440); /* the baked 41px, scaled */
}
.play-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Long-form document pages */
.doc { max-width: 46rem; padding-top: 3rem; padding-bottom: 4rem; }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.doc h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.doc .updated { color: var(--muted); margin-top: 0; font-size: 0.95rem; }
.doc .lede {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
}
.doc .lede strong { color: var(--ink); }
.doc code {
  background: var(--code); padding: 0.1rem 0.35rem;
  border-radius: 4px; font-size: 0.92em;
}

/* Footer */
footer { border-top: 1px solid var(--line); padding: 3rem 0; font-size: 0.94rem; color: var(--muted); }
.foot-top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.foot-links a { color: var(--body); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.disclaimer { max-width: var(--measure); margin: 0; }
.copyright { margin-top: 0.75rem; font-size: 0.88rem; }

/* ------------------------------------------------------------------ *
 * Guides
 *
 * The long-form pages under /guides/. They reuse the masthead, footer
 * and tokens above; everything here is the reading column and the
 * furniture that only appears inside an article.
 * ------------------------------------------------------------------ */

.article { max-width: var(--measure); padding: 2.5rem 0 4rem; }

/* Inside an article the kicker is the one place the accent carries a label.
   It marks the subject of the piece rather than labelling a layout section. */
.article .kicker { color: var(--accent); }

.article h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin-bottom: 1rem; }
.article h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin-top: 3rem; margin-bottom: 0.8rem;
}
.article h3 { margin-top: 2rem; }
.article > p, .article > ul, .article > ol { font-size: 1.09rem; }

.dek {
  font-size: 1.22rem; line-height: 1.5; color: var(--ink);
  font-weight: 500; margin-bottom: 1.5rem;
}

.byline {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  font-size: 0.92rem; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0.85rem 0; margin-bottom: 2.25rem;
}
.byline b { color: var(--body); font-weight: 600; }

.article-figure { margin: 0 0 2.5rem; }
.article-figure img { border-radius: var(--radius); border: 1px solid var(--line); }

/* On this page. Short enough to scan, long enough to be worth having. */
.toc {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0 2.5rem;
}
.toc p { font-weight: 600; color: var(--ink); margin: 0 0 0.6rem; font-size: 0.95rem; }
.toc ol { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.98rem; }
.toc li { margin-bottom: 0.3rem; }

/* Pulled-out point. Red for "read this bit", blue for the plain note. */
.note, .warn {
  border-left: 3px solid var(--accent); background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.35rem; margin: 1.9rem 0;
}
.warn { border-left-color: var(--warn-fill); }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }
.note strong, .warn strong { color: var(--ink); }

/* Worked example: the sums, set apart so they can be checked at a glance.
   The one device on this site that is entirely the subject's own material,
   an invoice extract, and the reason a reader believes the rest. */
.sums {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.5rem; margin: 1.9rem 0; background: var(--surface);
}
.sums h4 {
  margin: 0 0 0.9rem; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.sums dl { margin: 0; }
.sums .row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.44rem 0; border-bottom: 1px solid var(--line);
}
.sums .row:last-child { border-bottom: 0; }
.sums .row.total {
  border-top: 1px solid var(--line-strong); border-bottom: 0;
  margin-top: 0.35rem; padding-top: 0.7rem;
}
.sums .row.total dt, .sums .row.total dd { color: var(--ink); font-weight: 700; }
.sums dt { margin: 0; color: var(--body); }
.sums dd {
  margin: 0; color: var(--ink); font-weight: 600;
  font-family: var(--f-fig); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum"; white-space: nowrap; font-size: 1.05em;
}
.sums .note-row { margin: 0.85rem 0 0; font-size: 0.93rem; color: var(--muted); }

/* A figure that is not part of the total above it. Set below the settled
   sum, on its own rule, with a label saying where the money actually goes,
   because a super figure tucked under "the client pays" reads as part of
   what the client pays, which is the exact mistake the block exists to
   correct. */
.sums .aside {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}
.sums .aside .row { border-bottom: 0; padding-bottom: 0; }
.sums .aside .whose {
  display: block; margin-top: 0.15rem;
  font-size: 0.85rem; font-weight: 500; color: var(--muted);
}

.article table {
  width: 100%; border-collapse: collapse; margin: 1.9rem 0; font-size: 0.98rem;
}
.article th, .article td {
  text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article th { color: var(--ink); font-weight: 600; background: var(--panel); }
.table-scroll { overflow-x: auto; }

.article blockquote {
  margin: 1.9rem 0; padding: 0 0 0 1.35rem;
  border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.1rem;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote cite {
  display: block; margin-top: 0.6rem; font-size: 0.92rem;
  color: var(--muted); font-style: normal;
}

.article ul li, .article ol li { margin-bottom: 0.5rem; }

/* Sources. Small, but the whole point of trusting the page. */
.sources { font-size: 0.94rem; color: var(--muted); }
.sources li { margin-bottom: 0.45rem; }

.disclose {
  font-size: 0.94rem; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.35rem; margin-top: 3rem;
}
.disclose p:last-child { margin-bottom: 0; }

/* The app, mentioned once, where it is actually relevant. */
.plug {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin: 3rem 0 0; background: var(--panel);
  display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; align-items: start;
}
.plug > img { width: 56px; height: 56px; border-radius: 14px; }
.plug h2 { margin-top: 0; font-size: 1.2rem; }
.plug p { margin-bottom: 0.9rem; }
.plug .play-badge { --badge-h: 46px; }
@media (max-width: 34rem) { .plug { grid-template-columns: 1fr; } }

/* Guide cards, on the hub and at the foot of each article. */
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem; margin: 0; padding: 0; list-style: none;
}
.guide-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
}
.guide-card img { border-bottom: 1px solid var(--line); }
.guide-card .body { padding: 1.2rem 1.3rem 1.4rem; }
.guide-card h3 { margin: 0 0 0.45rem; font-size: 1.06rem; line-height: 1.3; }
.guide-card h3 a { color: var(--ink); text-decoration: none; }
.guide-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.guide-card p { margin: 0; color: var(--muted); font-size: 0.96rem; }

.more-guides { border-top: 1px solid var(--line); padding: 3rem 0 1rem; }
.more-guides h2 { font-size: 1.35rem; margin-bottom: 1.5rem; }

.crumbs { font-size: 0.92rem; color: var(--muted); padding-top: 1.75rem; }
.crumbs a { color: var(--muted); }
.crumbs span { padding: 0 0.4rem; }

/* The guides hub: one heading, then the cards. */
.guide-list { padding: 1rem 0 2rem; }
.guide-list h2 { margin-bottom: 1.75rem; }
.article + .guide-list { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}