/* ---------------------------------------------------------------------------
   Nothing Slips — Simple Change house style

   Built to docs/brand-reference.md. The one line that governs everything here:
   "No colour in the interface at all. Every colour on the page comes from
   artwork. Buttons are black pills. Nothing is blue because it is a link."

   So: black type on white and cream, one serif for headings and figures, Inter
   for everything else, and the only colour on screen is the score scale, which
   carries meaning rather than decoration.

   Light theme only. The brand has no dark palette.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bureau Serif';
  src: url('/brand/fonts/STKBureauSerif_Light.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --surface-base: #ffffff;
  --surface-elevated: #f2f1ed;
  --surface-hover: #f7f6f5;
  --surface-active: #dbd7cd;

  /* Content */
  --content-primary: #000000;
  --content-secondary: #0000008c; /* black 55% */
  --content-tertiary: #00000066;  /* black 40% */
  --content-contrast: #ffffff;
  --content-danger: #e27457;      /* warm terracotta, the only red */

  /* Borders */
  --border-base: #f2f1ed;
  --border-strong: #dbd7cd;
  --border-focus: #000000;

  /* Interactive */
  --interactive-base: #000000;
  --interactive-hover: #2a2420;   /* warm near-black, not grey */

  /* Score scale, red to green. Muted so it sits on cream. */
  --score-red: #d9563f;
  --score-orange: #e8853a;
  --score-yellow: #e8b33a;
  --score-lime: #a8b93e;
  --score-green: #3e9b5f;

  /* The navigation, and only the navigation, is dark.
     Sampled from handhold.io: the Zinc scale, resolved out of its lab()
     values. The rest of the interface stays on the brand's light palette —
     these are deliberately scoped to the nav rather than added to the theme,
     so nothing else can quietly go dark. */
  --nav-surface: #18181b;
  --nav-surface-active: #27272a;
  --nav-surface-hover: #212124;
  --nav-content: #fafafa;
  --nav-content-muted: #d4d4d8;
  --nav-content-faint: #a1a1aa;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --tap: 44px;
  --gutter: 20px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--content-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

body.no-tabs { padding-bottom: 48px; }

/* --- type ------------------------------------------------------------------
   One face, Inter, at different weights and sizes — handhold's scale, taken
   off its own app rather than its marketing site, which is where the serif
   lives:

       page title   30px / 600 / -0.75px / 36px
       section      20px / 600 / -0.3px  / 28px
       body         16px / 400 /  normal / 24px
       interface    14px / 400 or 500    / 22px
       small        12px / 400 or 500    / 18px

   Bureau Serif is the brand voice, and it belongs to the front door: the
   wordmark beside the mark, and the heading on the sign-in page. Everything
   past the sign-in is Inter — an app is worked in rather than read, and a
   display face on a settings panel is decoration a client has to look past
   every day.
   --------------------------------------------------------------------------- */

.serif,
h1, h2, h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 30px; letter-spacing: -0.75px; line-height: 36px; }
h2 { font-size: 20px; letter-spacing: -0.3px; line-height: 28px; }
h3 { font-size: 16px; letter-spacing: -0.18px; line-height: 24px; }

/* Sentence case, not shouted.
   The uppercase micro-label with wide tracking is a 2016 SaaS habit, and
   simplechange.co.uk does not do it: headings there are Bureau Serif, light,
   sentence case. This follows the website. */
.eyebrow {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--content-secondary);
  line-height: 1.4;
}

/* A section heading is a heading, so it is set like one. */
.section-head .eyebrow {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.1;
  color: var(--content-primary);
}

.lede { font-size: 18px; line-height: 1.6; color: var(--content-secondary); }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--content-secondary); }
.caption {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12px;
  color: var(--content-tertiary);
}
.muted { color: var(--content-secondary); }
.faint { color: var(--content-tertiary); }

/* --- shell ----------------------------------------------------------------- */

.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1100px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-base);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
/* The mark is 2:1 (viewBox 0 0 369 186). Never fit it into a square: set a
   width and let aspect-ratio do the rest. */
.mark { display: block; aspect-ratio: 369 / 186; color: var(--content-primary); }
.mark img,
.mark svg { width: 100%; height: 100%; display: block; }
.topbar .mark { width: 34px; flex-shrink: 0; }
.topbar .titles { min-width: 0; flex: 1; }
.topbar .titles .name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.18px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .titles .eyebrow { line-height: 1.2; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 12px;
}
.section-head .eyebrow { margin: 0; }

/* --- segmented control ----------------------------------------------------- */

.segmented {
  display: flex;
  background: var(--surface-elevated);
  border-radius: 999px;
  padding: 4px;
  margin: 20px 0 24px;
}
.segmented button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--content-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.13px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.segmented button[aria-pressed='true'] {
  background: var(--interactive-base);
  color: var(--content-contrast);
}

/* --- the headline figure ---------------------------------------------------
   One number leads. Everything else is support. The old layout gave four
   equal boxes and the eye had nowhere to land.
   --------------------------------------------------------------------------- */

.headline {
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.headline .figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -1.2px;
  margin-top: 6px;
}
.headline .side { text-align: right; flex-shrink: 0; }
.headline .side .figure { font-size: 40px; }
.headline .note { margin-top: 10px; }

/* --- supporting stats ------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.stat {
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.stat--wide { grid-column: 1 / -1; }
.stat .figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.75px;
  margin-top: 6px;
}
.stat .note { margin-top: 6px; }
.stat a { color: var(--content-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Score scale. The one place colour is allowed, because it carries meaning. */
.score-red { color: var(--score-red); }
.score-orange { color: var(--score-orange); }
.score-yellow { color: var(--score-yellow); }
.score-lime { color: var(--score-lime); }
.score-green { color: var(--score-green); }

/* --- panels and rows ------------------------------------------------------- */

.panel {
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel--cream { background: var(--surface-elevated); border-color: transparent; }
.panel .pad { padding: 20px; }
.panel + .panel { margin-top: 12px; }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-base);
  align-items: start;
}
.row:first-child { border-top: 0; }
/* The action on the right lines up with the name, not the top of a block of
   quoted text underneath it. */
.row > .actions, .row > button { align-self: center; }
.row .who { min-width: 0; }
.row .num {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 12px;
  font-size: 12px;
  letter-spacing: 0.12px;
  color: var(--content-tertiary);
  margin-top: 3px;
}
.row .quote {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--content-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status in words rather than a row of unexplained glyphs. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12px;
  color: var(--content-tertiary);
}
.state .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.state--done { color: var(--score-green); }
.state--waiting { color: var(--score-orange); }
.state--quiet { color: var(--content-tertiary); }
.state--failed { color: var(--content-danger); }

/* --- buttons ---------------------------------------------------------------
   Black pills. Secondary is the same pill outlined. Nothing else.
   --------------------------------------------------------------------------- */

button,
.btn {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.13px;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  color: var(--content-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
button:hover,
.btn:hover { background: var(--surface-hover); border-color: var(--border-hover, #2a2420); }
button:disabled { opacity: 0.45; cursor: default; }

.btn--primary,
button.primary {
  background: var(--interactive-base);
  border-color: var(--interactive-base);
  color: var(--content-contrast);
}
.btn--primary:hover,
button.primary:hover {
  background: var(--interactive-hover);
  border-color: var(--interactive-hover);
}
.btn--sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--quiet { border-color: transparent; background: transparent; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* --- forms ----------------------------------------------------------------- */

.field + .field { margin-top: 22px; }
label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.13px;
  margin-bottom: 6px;
}
.help {
  font-size: 13px;
  line-height: 1.5;
  color: var(--content-secondary);
  margin: 0 0 10px;
  font-weight: 400;
}

input[type='text'], input[type='email'], input[type='password'],
input[type='number'], input[type='tel'], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--content-primary);
  background: var(--surface-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: var(--tap);
}
textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  background: var(--surface-base);
}

.counter {
  display: flex;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.12px;
  color: var(--content-tertiary);
  margin-top: 8px;
}
.counter .over { color: var(--content-danger); font-weight: 500; }

.preview {
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 12px;
}
.preview .from {
  display: block;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--content-tertiary);
  margin-bottom: 6px;
}
.preview .body {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.6;
}

/* --- switch ---------------------------------------------------------------- */

.switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.switch .track {
  width: 46px; height: 28px; border-radius: 999px;
  background: var(--surface-active); position: relative; flex-shrink: 0;
  transition: background 0.2s var(--ease); margin-top: 2px;
}
.switch .track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-base);
  transition: transform 0.2s var(--ease);
}
.switch input:checked + .track { background: var(--interactive-base); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* --- notices --------------------------------------------------------------- */

/* An icon and the words, on a card. The coloured rule down the left edge read
   as a system message rather than something written for the person reading
   it — and a 2px stripe is a lot of weight for "by the way". */
.notice {
  position: relative;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px 48px;
  font-size: 14px;
  line-height: 1.55;
  margin: 14px 0;
  background: var(--surface-base);
}
/* Absolute rather than a flex child, so mixed inline content — a bold lead-in
   followed by plain text — keeps flowing as one paragraph instead of each
   element becoming its own column. */
.notice::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.notice--warn::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e27457' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
.notice--bad::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9563f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
.notice--good::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e9b5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.notice--warn { border-color: #e2745733; }
.notice--bad { border-color: #d9563f40; }
.notice--good { border-color: #3e9b5f33; }
.notice strong { font-weight: 600; }
.notice > p:first-child { margin-top: 0; }
.notice > p:last-child { margin-bottom: 0; }

/* --- dial codes ------------------------------------------------------------ */

.code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  letter-spacing: 0.02em;
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin: 8px 0;
  color: var(--content-primary);
  text-decoration: none;
  word-break: break-all;
}
a.code:active { background: var(--surface-active); }

/* --- navigation ------------------------------------------------------------
   One element, two layouts.

   On a phone it sits at the bottom. The top of a modern handset is out of
   thumb reach, and this is used one handed, outdoors, by somebody already
   holding something. Every consumer app worth copying puts primary navigation
   at the bottom on mobile for that reason, and moving it up would be a step
   backwards however tidy it looks on a desktop mock.

   From 900px it becomes a left sidebar, which is what Podium, Jobber, Stripe
   and Linear all do on a wide screen. It scales past the five items a bottom
   bar can hold, which matters as Quote Chaser, Receptionist, Reviews,
   Reminders and Site & Stats arrive.
   --------------------------------------------------------------------------- */

/* --- the menu, on a phone -------------------------------------------------
   A drawer rather than a bottom bar. Three links did not justify a permanent
   strip across the bottom of a small screen, and the bar had nowhere to put
   the account without becoming a fourth tab.
   ------------------------------------------------------------------------ */

/* A full-screen sheet, inset and rounded — handhold's `w-full m-2
   rounded-2xl`, not a narrow slab down one side. On a phone there is nothing
   worth seeing behind it, and a drawer that covers most of the screen but not
   all of it reads as neither one thing nor the other. */
nav.tabs {
  position: fixed;
  inset: 8px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--nav-surface);
  border-top: 0;
  border-radius: 16px;
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), visibility 300ms;
}
body.nav-open nav.tabs { transform: none; visibility: visible; }

.nav-veil {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(39, 39, 42, 0.64);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
body.nav-open .nav-veil { opacity: 1; }
body.nav-open { overflow: hidden; }

nav.tabs .tabs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 16px to put the mark on the same left edge as the icons below it, and the
     same 22px + 12px as an item so the wordmark starts where the labels do.
     Two vertical lines down the sidebar rather than four near-misses. */
  padding: 6px 16px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
nav.tabs .tabs__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bureau Serif', Georgia, serif;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: -0.4px;
  color: var(--nav-content);
}
nav.tabs .tabs__brand .mark { width: 22px; flex-shrink: 0; }
nav.tabs .tabs__brand .mark img { filter: invert(1); }
nav.tabs .tabs__brand > span { white-space: nowrap; }
nav.tabs .tabs__close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--nav-content-muted);
  cursor: pointer;
}
nav.tabs .tabs__close:hover { background: var(--nav-surface-hover); color: var(--nav-content); }
/* In the drawer everything shows; the desktop rules below re-lay it out. */

nav.tabs .tabs__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--nav-content);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.14px;
  transition: background 0.2s var(--ease);
}
nav.tabs .tabs__item[aria-current='page'] {
  background: var(--nav-surface-active);
  font-weight: 500;
}

/* Visible, so people can see what is coming, but plainly not available. */

nav.tabs .tabs__account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--nav-content);
}
nav.tabs .tabs__avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--nav-surface-active);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: -0.14px;
  font-weight: 600;
}
nav.tabs .tabs__who { min-width: 0; }
nav.tabs .tabs__business,
nav.tabs .tabs__owner { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
nav.tabs .tabs__business { font-size: 14px; font-weight: 500; line-height: 20px; }
nav.tabs .tabs__owner { font-size: 12px; line-height: 18px; color: var(--nav-content-muted); }
nav.tabs .icon { display: block; }

@media (min-width: 900px) {
  /* A card resting on the page, not a panel welded to the window edge.
     Geometry from handhold.io: 256 wide, 32px corners, 16px of padding,
     8px clear of every edge. */
  nav.tabs {
    inset: 8px auto 8px 8px;
    width: 256px;
    border-radius: 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
    background: var(--nav-surface);
    border: 0;
    border-radius: 32px;
  }
  nav.tabs .tabs__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    /* No horizontal padding: .tabs__head already supplies the 16px, and adding
       it again here pushed the lockup 16px right of every icon below it. */
    padding: 8px 0 14px;
    font-family: 'Bureau Serif', Georgia, serif;
    font-size: 20px;
    font-weight: 200;
    letter-spacing: -0.4px;
    color: var(--nav-content);
  }
  /* The mark is an <img>, so its fill="currentColor" resolves inside the SVG
     document and comes out black. It is a single flat colour, so inverting is
     exact rather than approximate. */
  nav.tabs .tabs__brand .mark { width: 22px; }
  nav.tabs .tabs__brand .mark img { filter: invert(1); }

  
  /* Whose account this is, at the foot of the column. */
  nav.tabs .tabs__account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--nav-content);
    transition: background 0.2s var(--ease);
  }
  nav.tabs .tabs__account:hover { background: var(--nav-surface-hover); }
  nav.tabs .tabs__avatar {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--nav-surface-active);
    color: var(--nav-content);
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    letter-spacing: -0.14px;
  font-weight: 600;
  }
  nav.tabs .tabs__who { min-width: 0; }
  nav.tabs .tabs__business,
  nav.tabs .tabs__owner {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  nav.tabs .tabs__business { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.14px; }
  nav.tabs .tabs__owner { font-size: 12px; line-height: 18px; color: var(--nav-content-muted); }
  /* Inter 14px, 400 idle and 500 current, on a 12px-radius pill — the same
     numbers handhold uses, because they are the reason it reads as settled
     rather than shouty. */
  nav.tabs .tabs__item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.14px;
    text-transform: none;
    color: var(--nav-content);
  }
  nav.tabs a.tabs__item:hover { background: var(--nav-surface-hover); }
  nav.tabs .tabs__item[aria-current='page'] {
    background: var(--nav-surface-active);
    color: var(--nav-content);
    font-weight: 500;
    letter-spacing: 0.175px;
  }
  nav.tabs .tabs__item[aria-current='page']::before { display: none; }
    nav.tabs .icon { color: currentColor; }

  body { padding-left: 288px; padding-bottom: 40px; }
  body.no-tabs { padding-left: 0; }
  .topbar { padding-left: 288px; }
  body.no-tabs .topbar { padding-left: 0; }

  /* No header at all on desktop. The sidebar carries the mark and shows which
     section you are in, and a client only ever looks at their own account, so
     the bar was a strip of things they already knew. The phone keeps it: there
     is no sidebar down there, so it is the only place the brand appears.

     The exception is an admin looking at somebody else's account, where whose
     account this is stops being obvious and starts being the point. */
  body:not(.viewing-client) .topbar { display: none; }
  body.no-tabs .topbar { display: block; }
  .topbar .mark { display: none; }
  .topbar .titles .eyebrow { display: none; }
  .topbar .titles .name { font-size: 16px; }
}

/* --- tables (admin) -------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  text-align: left;
  padding: 14px 16px;
  border-top: 1px solid var(--border-base);
  white-space: nowrap;
}
th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--content-tertiary);
  border-top: 0;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-elevated); }
td a { color: var(--content-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* --- share card ------------------------------------------------------------ */

.share-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.share-card .brand-line {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.share-card .brand-line .mark { width: 32px; }
.chain { list-style: none; margin: 22px 0 0; padding: 0; }
.chain li { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
.chain li::before {
  content: '';
  position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 1px; background: var(--border-strong);
}
.chain li:last-child { padding-bottom: 0; }
.chain li:last-child::before { display: none; }
.chain .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--content-primary);
  margin-top: 6px; flex-shrink: 0;
}
.chain .what { font-size: 15px; font-weight: 500; letter-spacing: -0.18px; }
.chain .detail { font-size: 14px; color: var(--content-secondary); margin-top: 2px; line-height: 1.5; }
.chain .at { font-size: 12px; letter-spacing: 0.12px; color: var(--content-tertiary); margin-top: 3px; }

/* --- states ---------------------------------------------------------------- */

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--content-tertiary);
  font-size: 14px;
}
.spinner { padding: 60px 20px; text-align: center; color: var(--content-tertiary); font-size: 14px; }
.stack > * + * { margin-top: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ' +'; color: var(--content-tertiary); }
details[open] summary::after { content: ' –'; }
/* The Questions list draws its own circled plus, so it must not inherit this
   one as well. Two plus signs on every row is what that looked like. */
.faq summary::after,
.faq details[open] summary::after { content: none; }
details + details { border-top: 1px solid var(--border-base); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

@media (min-width: 720px) {
  .wrap--wide .stats { grid-template-columns: repeat(4, 1fr); }
}

/* --- guided setup ----------------------------------------------------------
   Six screens, one thing on each. The dial code is deliberately the largest
   thing on its screen: it is the only step where getting it wrong means the
   product silently does nothing.
   --------------------------------------------------------------------------- */

.steps { display: flex; align-items: center; gap: 7px; padding: 20px 0 4px; }
.steps__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface-active);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.steps__dot.is-done { background: var(--content-tertiary); }
.steps__dot.is-current { background: var(--content-primary); transform: scale(1.35); }

.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}
.setup-actions .primary { min-width: 140px; }

.illus {
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: 24px 16px;
  color: var(--content-primary);
}
.illus svg { width: 100%; height: auto; display: block; }

.choices { display: grid; gap: 10px; }
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-base);
  text-align: left;
}
.choice__label { font-size: 16px; font-weight: 500; letter-spacing: -0.18px; }
.choice__note { font-size: 12px; letter-spacing: 0.12px; color: var(--content-tertiary); }
.choice.is-chosen {
  background: var(--interactive-base);
  border-color: var(--interactive-base);
  color: var(--content-contrast);
}
.choice.is-chosen .choice__note { color: #ffffff8c; }

.dial {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--interactive-base);
  color: var(--content-contrast);
  border-radius: var(--radius-xl);
  padding: 26px 18px;
}
/* One line, always. A dialling code broken across two lines mid-number is
   hard to read and harder to trust, so it shrinks to fit instead. */
.dial__code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(15px, 5.1vw, 24px);
  letter-spacing: 0;
  white-space: nowrap;
}
.dial__hint {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: #ffffff8c;
}

.watch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  color: var(--content-secondary);
}
.watch.is-done {
  border-color: transparent;
  background: var(--surface-elevated);
  color: var(--content-primary);
  font-weight: 500;
}
.watch__pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--content-primary);
  animation: watch-pulse 1.6s var(--ease) infinite;
}
@keyframes watch-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* --- proof and value ------------------------------------------------------
   The billing page leads with the client's own results rather than the price.
   These figures are theirs, so they get the serif treatment that the headline
   numbers on Home get.
   --------------------------------------------------------------------------- */

.proof {
  display: grid;
  /* Two by two on a phone. auto-fit left the fourth figure stranded on a row
     of its own, which made the set look like an afterthought. */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
  margin-top: 14px;
}
@media (min-width: 480px) {
  .proof { grid-template-columns: repeat(4, 1fr); }
}
.proof__figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.9px;
  margin-bottom: 4px;
}

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 15px;
  line-height: 1.55;
  border-top: 1px solid var(--border-base);
}
.ticks li:first-child { border-top: 0; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--content-primary);
  border-bottom: 1.5px solid var(--content-primary);
  transform: rotate(-45deg);
}

/* --- the plan card ---------------------------------------------------------
   The plan reads as an object being acquired rather than a page being read,
   which is how every subscription page worth copying handles it. The price
   sits inside the card with its period beside it: what makes a price feel
   reasonable is the company it keeps, not its absence.
   --------------------------------------------------------------------------- */

.plan {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 22px;
  margin-top: 28px;
}
.plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-base);
}
.plan__name { font-size: 17px; font-weight: 500; letter-spacing: -0.18px; }
.plan__price { text-align: right; white-space: nowrap; }
.plan__amount {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.75px;
}
.plan__period { font-size: 13px; color: var(--content-tertiary); margin-left: 4px; }
.plan__list { margin: 6px 0 20px; }
.plan__list li { border-top: 0; padding: 7px 0 7px 26px; font-size: 14px; }
.plan__list li::before { top: 16px; }
.plan__reassure { text-align: center; margin: 12px 0 0; line-height: 1.5; }

/* --- trial timeline --------------------------------------------------------
   The most useful thing on a trial page. The worry is not the price, it is
   being charged without warning, so the dates are spelled out.
   --------------------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  position: relative;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 4px; top: 16px; bottom: 0;
  width: 1px;
  background: var(--border-strong);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--content-primary);
  margin-top: 7px;
  flex-shrink: 0;
}
.timeline li:last-child .timeline__dot {
  background: var(--surface-base);
  box-shadow: inset 0 0 0 1.5px var(--content-primary);
}
.timeline__when { font-size: 15px; font-weight: 500; letter-spacing: -0.18px; }
.timeline__when .caption { font-weight: 400; margin-left: 6px; }

/* --- settings, and any list-then-detail screen -----------------------------
   Settings used to be one scroll of six unrelated things. It is now a list you
   choose from, which is how every console handles the same problem: you go to
   the thing you came for rather than past five things you did not.
   --------------------------------------------------------------------------- */

.view-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 4px 0 10px;
}

.sidelist { display: grid; gap: 2px; margin: 20px 0 0; }
.sidelist a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--content-primary);
  transition: background 0.15s var(--ease);
}
.sidelist a:hover { background: var(--surface-elevated); }
.sidelist a[aria-current='page'] { background: var(--surface-elevated); }
.sidelist__label { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.18px; }
.sidelist__hint { display: block; font-size: 12px; letter-spacing: 0.12px; color: var(--content-tertiary); }
.sidelist__chev { margin-left: auto; color: var(--content-tertiary); font-size: 20px; line-height: 1; }
.sidelist .icon { color: var(--content-tertiary); flex-shrink: 0; }
.sidelist a[aria-current='page'] .icon { color: var(--content-primary); }

/* On a phone: the menu, then the section under it. On a wide screen: both,
   side by side, so the shape of the whole thing stays visible. */
.split__body { padding-top: 26px; }
@media (min-width: 760px) {
  .split { display: grid; grid-template-columns: 236px 1fr; gap: 32px; align-items: start; }
  .sidelist { margin-top: 26px; position: sticky; top: 84px; }
  .sidelist__chev { display: none; }
  .split__body { padding-top: 26px; min-width: 0; }
}

.savebar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-base);
}
.savebar .saved { font-size: 13px; color: var(--score-green); }
.savebar .over { font-size: 13px; color: var(--content-danger); }

/* --- sign in ---------------------------------------------------------------
   Matched to simplechange.co.uk/login, values read off the live page rather
   than eyeballed: Bureau Serif 40px at 200 with -1.2px tracking, cream inputs
   at 12px radius, a black pill that sizes to its label instead of filling the
   width.

   The one deliberate difference is control height. The site uses 40px, which is
   fine for a desktop marketing page; this gets used on a phone, so they keep
   the 44px minimum a thumb needs.
   --------------------------------------------------------------------------- */

body.signin { padding-bottom: 40px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bureau Serif', Georgia, serif;
  font-weight: 200;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--content-primary);
}
.wordmark .mark { width: 42px; }

.signin__top { padding: 26px 0 0; }
.signin__body { max-width: 420px; margin: 0 auto; padding-top: 15vh; }

.signin__title {
  /* The one heading in Bureau Serif. The sign-in page is the front door and
     reads as the brand; everything inside it is Inter. */
  font-family: 'Bureau Serif', Georgia, serif;
  font-weight: 200;
  font-size: 40px;
  letter-spacing: -0.6px;
  line-height: 1.05;
  margin: 0 0 8px;
}
@media (max-width: 480px) {
  .signin__title { font-size: 34px; }
}
.signin__sub {
  font-size: 15px;
  color: var(--content-secondary);
  margin: 0 0 30px;
}

.signin__body .field + .field { margin-top: 18px; }
.signin__body label { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.signin__body input {
  border-radius: 12px;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-elevated);
  font-size: 16px;
  padding: 11px 14px;
}
.signin__body input::placeholder { color: var(--content-tertiary); }

.signin__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.signin__actions .primary { padding: 0 22px; font-weight: 400; }

/* A button that reads as a link. The brand has no blue links, so it is the
   underline that carries it. */
.linkish {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--content-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { background: none; color: var(--content-primary); }
.signin__sub .linkish { font-size: inherit; color: var(--content-primary); font-weight: 500; }

.signin__error, .signin__ok {
  font-size: 14px;
  line-height: 1.5;
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--content-danger);
}
.signin__ok { border-left-color: var(--score-green); color: var(--content-secondary); }

.account-email {
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
}

/* --- Questions ------------------------------------------------------------
   Lifted from simplechange.co.uk so the app and the website answer questions
   in the same voice and the same shape: Bureau Serif question, circular cream
   button on the right with a plus that turns into a cross, answer in Inter at
   55% black. <details> does the toggling, so there is no JavaScript and it
   still works with a keyboard and a screen reader.
   ------------------------------------------------------------------------ */

.faq { display: grid; grid-template-columns: 1fr; gap: 4px; }

.faq details { border: 0; }
.faq summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary h3 {
  flex: 1;                       /* pushes the circle to the right-hand edge */
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.18px;
  line-height: 1.4;
  margin: 0;
  text-align: left;
  color: var(--content-primary);
  transition: color 0.15s var(--ease);
}
.faq summary:hover h3 { color: var(--content-secondary); }

.faq .plus {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-elevated);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.faq .plus::before,
.faq .plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  /* 1.5px of pure black read as a heavy plus against the cream. A hairline in
     the secondary tone is the same shape without the weight. */
  background: var(--content-secondary);
  transform: translate(-50%, -50%);
}
.faq .plus::before { width: 10px; height: 1px; }
.faq .plus::after { width: 1px; height: 10px; }
.faq summary:hover .plus::before,
.faq summary:hover .plus::after { background: var(--content-primary); }

.faq details[open] .plus { transform: rotate(45deg); }

.faq details > p {
  width: calc(100% - 48px);
  max-width: 640px;
  margin: 0;
  padding-top: 8px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: var(--content-secondary);
}

/* Matches the "Questions" heading on the website: 32px, weight 200, -0.96px. */
.questions-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

/* --- section tabs ---------------------------------------------------------
   Settings used to be a menu column beside a detail column. On a 1280px
   screen that spent 236px restating a list of five words and squeezed the
   actual settings — the part you came to read and type into — into whatever
   was left. The sections run across the top now and the panel gets the full
   width underneath.
   ------------------------------------------------------------------------ */

.page-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.75px;
  line-height: 1.05;
  margin: 24px 0 0;
}

/* On a phone the tabs wrap onto as many rows as they need, each with its own
   underline. The thing to avoid was sideways scrolling, which hides tabs
   behind a gesture nobody knows is there — wrapping keeps every one of them
   on screen without turning the page into a list of buttons. */
.subtabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
  row-gap: 14px;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-base);
}
.subtabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.18px;
  color: var(--content-tertiary);
  transition: color 0.15s var(--ease);
}
.subtabs a[aria-current='page'] { color: var(--content-primary); }

@media (min-width: 900px) {
  .subtabs {
    /* Wraps here too. It used to be nowrap, which was fine at five tabs and
       ran straight off the edge at seven — the settings column is capped at
       680px, so there was never much room to run into. Wrapping keeps every
       section visible and clickable, with no arrows and no sideways scroll
       gesture nobody knows is there. The sliding underline measures each
       tab's own bottom edge, so it follows across rows on its own. */
    column-gap: 32px;
    row-gap: 10px;
    margin-top: 22px;
    padding-bottom: 12px;
  }
  .subtabs a {
    display: block;
    min-height: 0;
    padding: 0 0 10px;
    /* Never break a label across lines — "Quote follow-" on its own is worse
       than a second row. */
    white-space: nowrap;
  }
}
@media (min-width: 900px) {
  .subtabs a:hover { color: var(--content-secondary); }
  .subtabs a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--content-primary);
  }
}

.subtabs__body { padding-top: 26px; }

@media (min-width: 900px) {
  /* Room to actually read a setting. The website caps body text at 640px;
     this matches it rather than the 560px the phone layout wanted. */
  .wrap { max-width: 680px; }
}

/* --- status pill, first run ----------------------------------------------
   The one place colour is allowed. The brand rule is that nothing in the
   interface is coloured, and that holds — but "is this thing running?" is
   status, and status is the one thing a shape cannot say on its own.
   ------------------------------------------------------------------------ */

.statuspill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-base);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--content-primary);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.statuspill:hover { background: var(--surface-hover); }
.statuspill:disabled { opacity: 0.6; cursor: default; }

.statuspill__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--score-green);
  flex-shrink: 0;
}
.statuspill.is-off { color: var(--content-secondary); }
.statuspill.is-off .statuspill__dot { background: var(--content-tertiary); }

.firstrun { margin-top: 28px; }
.firstrun__lead {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: 0;
}
.firstrun__quiet {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--content-secondary);
}


/* --- status pill, first run ----------------------------------------------
   The one place colour is allowed. The brand rule is that nothing in the
   interface is coloured, and that holds — but "is this thing running?" is
   status, and status is the one thing a shape cannot say on its own.
   ------------------------------------------------------------------------ */

.statuspill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-base);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: var(--content-primary);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.statuspill:hover { background: var(--surface-hover); }
.statuspill:disabled { opacity: 0.6; cursor: default; }

.statuspill__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--score-green);
  flex-shrink: 0;
}
.statuspill.is-off { color: var(--content-secondary); }
.statuspill.is-off .statuspill__dot { background: var(--content-tertiary); }

.firstrun { margin-top: 28px; }
.firstrun__lead {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: 0;
}
.firstrun__quiet {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--content-secondary);
}

/* --- the hero -------------------------------------------------------------
   A count, not a rate. See the comment above headline() in dashboard.js for
   why there are no percentages here.
   ------------------------------------------------------------------------ */

.lifetime {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--content-tertiary);
}

.hero { margin-top: 22px; }

.hero__figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.75px;
  line-height: 1.08;
  margin: 0;
}
.hero__line {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.75px;
  line-height: 1.08;
  margin: 0;
  color: var(--content-tertiary);
}

.chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--content-secondary);
}
.chain__dot { color: var(--border-strong); }

.hero__won {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-base);
}
.hero__wonlabel {
  display: block;
  font-size: 13px;
  color: var(--content-secondary);
}
.hero__wonfigure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.hero__est { font-size: 12px; color: var(--content-tertiary); }
.hero__setvalue { font-size: 14px; }

.hero__prompt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-base);
  font-size: 14px;
  color: var(--content-secondary);
}

/* A win is not on offer for somebody who never answered. Still clickable —
   a job can be won on the phone — just not invited. */
.btn--faint { opacity: 0.45; }
.btn--faint:hover { opacity: 1; }

@media (min-width: 700px) {
  .hero__figure,
  .hero__line { font-size: 40px; letter-spacing: -1.2px; }
}

/* --- the dashboard counts -------------------------------------------------
   Three counts that go up, and one estimate underneath. See the comment at
   the top of views/dashboard.js for why there is not a percentage in sight.
   ------------------------------------------------------------------------ */

/* On a phone these stack. Side by side, the period control gets whatever is
   left after the status pill and ends up a squeezed pair of half-words. */
.topline {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 22px;
}
.topline .segmented { width: 100%; margin: 0; }

@media (min-width: 700px) {
  .topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}
/* Our own control, not the operating system's picker — a native <select>
   drops an iOS wheel or a Mac menu into the middle of the page and it looks
   like a different application. */
@media (min-width: 700px) {
  .topline .segmented { margin: 0 0 0 auto; width: auto; flex: 0 0 auto; }
  .topline .segmented button { padding: 0 16px; white-space: nowrap; flex: 0 0 auto; }
}

/* Status, not a switch: it says how things are and opens the place to change
   them. It used to toggle the service on click, which put taking Text-Back
   down one stray tap away on the screen people open most. */
a.statuspill { text-decoration: none; }

.counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-base);
}
.count__label { font-size: 13px; color: var(--content-secondary); line-height: 1.3; }
.count__figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.05;
  margin-top: 6px;
}
.count__sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--content-tertiary);
}
/* Green when up, grey otherwise. Never red — see delta() for why. */
.count__sub.is-up { color: var(--score-green); }

.recovered { padding: 22px 0 26px; border-bottom: 1px solid var(--border-base); }
.recovered__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.recovered__head > div:first-child { display: flex; align-items: baseline; gap: 14px; }
.recovered__figure {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.75px;
  line-height: 1.05;
}
.recovered__worth { font-size: 14px; color: var(--content-secondary); }
.recovered__worth span { cursor: help; border-bottom: 1px dotted var(--border-strong); }
.recovered__since { margin-top: 10px; font-size: 13px; color: var(--content-tertiary); }

.failnote { margin: 18px 0 0; font-size: 13px; color: var(--content-secondary); }

/* The one dot on the page: the people who wrote back and are waiting. */
.dot--back {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--score-green);
  vertical-align: middle;
}

@media (max-width: 520px) {
  .counts { gap: 10px; }
  .count__figure { font-size: 32px; letter-spacing: -0.96px; }
  .count__label { font-size: 12px; }
}

/* --- a code, with a copy button ------------------------------------------ */

.codefield { display: flex; align-items: stretch; gap: 8px; margin: 8px 0; }
.codefield .code { flex: 1; margin: 0; }
.codefield__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--content-secondary);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.codefield__copy:hover { background: var(--surface-hover); color: var(--content-primary); }
.codefield__said:empty { display: none; }
.codefield__said { font-size: 12px; letter-spacing: -0.12px; }

.inline-field { display: flex; align-items: center; gap: 10px; }
.inline-field span { font-size: 15px; color: var(--content-secondary); }
.inline-field input { width: 90px; }

/* --- motion ---------------------------------------------------------------
   Measured off handhold.io, then tuned.

   What they do: the shell stays put and only the panel swaps; the incoming
   panel fades up from below on a JS spring; the sub-tab underline slides and
   resizes between tabs; labels cross-fade over 150ms. That last part is the
   trick — the movement is what reads as considered, not the duration.

   What we do differently: theirs travels 200px over about 700ms, which is a
   choice you can afford when the navigation is waiting on a server round trip
   anyway. Ours renders in single-digit milliseconds, so the same distance
   would be inventing a delay that is not there. Same character, a tenth of the
   travel, and finished in under half the time.
   ------------------------------------------------------------------------ */

/*
 * Sampled frame by frame off handhold.io. The thing that makes it read the way
 * it does is that position and opacity are on *different clocks*: the panel
 * drops into place quickly and then keeps fading in long after it has stopped
 * moving. Their measurements, from the mount:
 *
 *     t+15ms   y 135   opacity 0.001
 *     t+97ms   y  65   opacity 0.035
 *     t+187ms  y  28   opacity 0.119
 *     t+310ms  y   6   opacity 0.355
 *     t+351ms  y   3   opacity 0.540
 *
 * Position is 97% done by 310ms; opacity is barely half way. One shared curve
 * cannot do that, which is why the first attempt at this felt wrong.
 */
@keyframes viewRise {
  from { transform: translateY(28px); }
  to   { transform: none; }
}

@keyframes viewFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#view.is-entering,
#section-body.is-entering,
#dash-counts.is-entering,
#dash-recovered.is-entering,
#dash-callers.is-entering {
  animation:
    viewRise 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
    viewFade 620ms cubic-bezier(0.5, 0, 0.85, 0.6) both;
}

/* --- the sliding underline ------------------------------------------------
   One bar, moved, rather than a pseudo-element appearing under whichever tab
   is current. Appearing is a cut; moving is a transition, and the eye follows
   it to where it is going.
   ------------------------------------------------------------------------ */

/* --- the sliding underline ------------------------------------------------
   One bar, moved, rather than a pseudo-element appearing under whichever tab
   is current. Appearing is a cut; moving is a transition, and the eye follows
   it to where it is going.

   The easing is handhold's spring, read off its own config rather than
   guessed at: Framer Motion `{ type: 'spring', duration: 0.3, bounce: 0.2 }`.
   Bounce 0.2 is a damping ratio of 0.8, which means it very slightly
   overshoots and settles back — 1.3% at around 288ms. That tiny overshoot is
   the whole difference between this and a plain deceleration curve, and no
   cubic-bezier that only decelerates will ever feel like it. linear() encodes
   the real curve, sampled from the oscillator.
   ------------------------------------------------------------------------ */

.subtabs__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5px;
  background: var(--content-primary);
  will-change: transform, width;
}

.subtabs__bar.is-sliding {
  transition:
    transform 300ms cubic-bezier(0.22, 1.2, 0.36, 1),
    width 300ms cubic-bezier(0.22, 1.2, 0.36, 1);
  /* Overrides the line above wherever linear() is understood. */
  transition:
    transform 300ms linear(0, 0.0194, 0.0694, 0.1394, 0.2212, 0.3085, 0.3965, 0.4817, 0.5618, 0.6354, 0.7015, 0.7598, 0.8104, 0.8537, 0.8901, 0.9202, 0.9447, 0.9643, 0.9796, 0.9914, 1.0001, 1.0064, 1.0106, 1.0133, 1),
    width 300ms linear(0, 0.0194, 0.0694, 0.1394, 0.2212, 0.3085, 0.3965, 0.4817, 0.5618, 0.6354, 0.7015, 0.7598, 0.8104, 0.8537, 0.8901, 0.9202, 0.9447, 0.9643, 0.9796, 0.9914, 1.0001, 1.0064, 1.0106, 1.0133, 1);
}

/* Someone who has asked their machine to stop moving things means it. */
@media (prefers-reduced-motion: reduce) {
  #view.is-entering,
  #section-body.is-entering,
  #dash-counts.is-entering,
  #dash-recovered.is-entering,
  #dash-callers.is-entering { animation: none; }
  .subtabs__bar.is-sliding { transition: none; }
  * { scroll-behavior: auto; }
}

/* --- the app bar (phones only) --------------------------------------------
   handhold's geometry: a floating dark bar, 12px corners, clear of the edges,
   carrying the way into the menu, the page you are on, and who you are.
   ------------------------------------------------------------------------ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  margin: 12px 12px 0;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--nav-surface);
  color: var(--nav-content);
}
/* `button:hover` further up sets a white background, and an element+pseudo
   selector outranks a plain class — so without these the burger lit up white
   on a black bar. */
.appbar__burger {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  min-height: 0;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--nav-content);
  cursor: pointer;
}
.appbar__burger:hover,
.appbar__burger:active {
  background: var(--nav-surface-active);
  border: 0;
  color: var(--nav-content);
}
.appbar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  color: var(--nav-content);
}
.appbar__avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--nav-surface-active);
  color: var(--nav-content);
  text-decoration: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: -0.14px;
  font-weight: 600;
}

/* The phone no longer has a bar along the bottom to leave room for. */
body { padding-bottom: 40px; }

@media (min-width: 900px) {
  /* The sidebar is permanent up here, so there is no bar and no drawer. */
  .appbar { display: none; }
  .nav-veil { display: none; }
  nav.tabs {
    transform: none;
    visibility: visible;
    transition: none;
  }
  nav.tabs .tabs__head {
    padding: 8px 16px 14px;
    margin-bottom: 6px;
    border-bottom: 0;
  }
  nav.tabs .tabs__close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  nav.tabs, .nav-veil { transition: none; }
}

nav.tabs:focus { outline: none; }

/* Everything a client needs to sign in, shown once at handover. */
.handover { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 0; }
.handover dt { font-size: 13px; color: var(--content-secondary); }
.handover dd { margin: 0; font-size: 14px; }

/* --- the setup test checklist ---------------------------------------------
   Three lines that tick themselves off while the call is in the air, so the
   wait has something to look at and a failure says which part failed.
   ------------------------------------------------------------------------ */

.teststate { margin-top: 22px; }
.teststate__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.teststate__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--content-tertiary);
  transition: color 0.2s var(--ease);
}
.teststate__mark {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.teststate__list li.is-doing { color: var(--content-primary); }
.teststate__list li.is-doing .teststate__mark {
  border-color: var(--content-primary);
  animation: testPulse 1.4s ease-in-out infinite;
}

.teststate__list li.is-done { color: var(--content-secondary); }
.teststate__list li.is-done .teststate__mark {
  border-color: var(--score-green);
  background: var(--score-green);
  animation: none;
}
.teststate__list li.is-done .teststate__mark::after {
  content: '';
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

@keyframes testPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .teststate__list li.is-doing .teststate__mark { animation: none; }
}

/* The five steps, where the work happens rather than in a document. */
.runbook {
  margin: 22px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
}
.runbook > summary { font-size: 15px; font-weight: 600; padding: 0; }
.runbook ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.runbook p { margin: 14px 0 0; font-size: 13px; color: var(--content-secondary); }
.runbook code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-base);
  padding: 1px 5px;
  border-radius: 4px;
}

/* The first screen anybody sees, so it leads with the brand. */
.setuptop {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-base);
}
.setuptop .wrap {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px;
}
.setuptop .wordmark { display: flex; align-items: center; gap: 10px; }
.setuptop .wordmark .mark { width: 30px; flex-shrink: 0; }
.setuptop .wordmark > span { white-space: nowrap; }

/* Belongs to whoever is previewing, not to the client whose page this is. */
.previewbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--nav-surface);
  color: var(--nav-content-muted);
  font-size: 13px; line-height: 1.4;
}
.previewbar strong { color: var(--nav-content); font-weight: 600; }
.previewbar a { margin-left: auto; color: var(--nav-content); white-space: nowrap; }

/* --- the divert checklist -------------------------------------------------
   Four numbered things to do, all on the page. See divert() in setup.js for
   why none of them is folded away.
   ------------------------------------------------------------------------ */

.dials { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.dials__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.dials .screening,
.dials .dials__vm { margin-left: 36px; }

.dials__n {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
  border-radius: 999px;
  background: var(--content-primary); color: var(--content-contrast);
  font-size: 13px; font-weight: 600;
}
.dials__head strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.18px; }
.dials__why {
  display: block; margin-top: 3px;
  font-size: 14px; line-height: 1.45; color: var(--content-secondary);
}
.dial--sm { padding: 18px 16px; }
.dial--sm .dial__code { font-size: clamp(14px, 4.6vw, 20px); }
.dials__vm {
  margin: 0 0 8px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  font-size: 14px; line-height: 1.45;
}
.dials__vm:last-child { margin-bottom: 0; }

/* A link long enough to need its own row, with the means to copy it. */
.linkrow { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.linkrow code {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}
.linkrow button { flex-shrink: 0; }

/* Turning off whatever answers calls first. Not a code to dial, so it does not
   look like one — but it is the step everything else depends on. */
.screening {
  display: grid; gap: 5px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  font-size: 14px; line-height: 1.45;
}
.screening strong { font-size: 13px; }
.screening code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.screening span { color: var(--content-secondary); font-size: 13px; }

/* The placeholder key under the follow-up editors. A description list, because
   that is what it is: a term and what it becomes. */
.tokens {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 13px;
}
.tokens dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.tokens dd {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 420px) {
  /* Two columns stop being two columns when the right one wraps to three
     lines. Stack instead, with the term above what it stands for. */
  .tokens { grid-template-columns: 1fr; gap: 2px; }
  .tokens dd { margin: 0 0 8px; }
}

/* The "any quotes out at the minute?" rows in setup. Four fields that are a
   row on a laptop and a stack on a phone, because four inputs side by side at
   375px is four unusable inputs. */
.qrow { margin-top: 10px; }
.qrow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qrow__grid input { width: 100%; }
@media (min-width: 700px) {
  .qrow__grid { grid-template-columns: 1.4fr 1.2fr 0.7fr 1.4fr; }
}

/* The quotes line under Saved on the Text-Back home. Quiet: it is a pointer to
   another tab, not a figure competing with the ones above it. */
.dash-quotes {
  margin: 14px 0 0;
  font-size: 14px;
}
.dash-quotes a {
  color: var(--content-secondary);
  text-decoration: none;
}
.dash-quotes a:hover { color: var(--content-primary); }

/* The "text it in instead" examples on the Quotes tab. Monospaced because they
   are literally what to type, and each one is a whole message, so they wrap
   rather than being clipped. */
.sms-examples {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sms-examples li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--content-secondary);
  background: var(--surface-sunken, rgba(0, 0, 0, 0.04));
  border-radius: 8px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

/* A section this login cannot open yet. Visibly present, plainly not a link:
   dimmed, no hover lift, no pointer cursor, and a padlock on the right. */
nav.tabs .tabs__item.is-locked {
  color: var(--nav-content-faint, #71717a);
  cursor: default;
}
nav.tabs .tabs__item.is-locked:hover { background: none; }
nav.tabs .tabs__lock {
  margin-left: auto;
  flex: none;
  opacity: 0.7;
}

/* A row with buttons in it, on a phone.
   `1fr auto` gives the buttons whatever they ask for and the text what is
   left — and four buttons ask for more than a 375px screen has, so the left
   column collapsed to nothing and the email address rendered straight over
   the top of them. Below this width the row stacks: the name gets its own
   line, the buttons get theirs. */
@media (max-width: 560px) {
  .row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .row .who { width: 100%; }
  .row .num {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .row .actions {
    width: 100%;
    gap: 8px;
  }
  /* Natural widths, not stretched. Stretching makes whichever button happens
     to wrap last full-width, and that was Remove — the destructive one ending
     up as the biggest target on the screen. */
  .row .actions button { flex: 0 0 auto; }

  /* The magic link and its Copy button, same problem in miniature. */
  .linkrow { flex-wrap: wrap; }
  .linkrow code { flex: 1 1 100%; }
  .linkrow button { width: 100%; }
}

/* A message somebody left. The words first, the player second — reading is
   what you can do on a roof with one hand. */
.row.vm { align-items: start; }
.vm__said {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--content-primary);
}
.vm__said.faint { color: var(--content-tertiary); font-style: italic; }
.row.vm audio {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  height: 34px;
}

/* Trimming a recorded greeting. The waveform fills the width; two handles sit
   on top of it and the parts outside the selection are dimmed rather than
   hidden, so you can see what you are cutting off. */
.trim {
  position: relative;
  margin-top: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  overflow: hidden;
  touch-action: none; /* or dragging a handle scrolls the page instead */
  user-select: none;
}
.trim__wave {
  display: block;
  width: 100%;
  height: 96px;
  color: var(--content-secondary);
}
.trim__shade {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--surface-sunken, rgba(0, 0, 0, 0.55));
  opacity: 0.65;
  pointer-events: none;
}
.trim__shade--before { left: 0; }
.trim__handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--content-primary);
  cursor: ew-resize;
}
/* A wider invisible target than the line itself — 3px is not a finger. */
.trim__handle::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -12px; right: -12px;
}
.trim__handle::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 13px; height: 26px;
  margin-top: -13px;
  border-radius: 4px;
  background: var(--content-primary);
}
.trim__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.trim__span {
  font-size: 13px;
  color: var(--content-secondary);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

/* A block that is present but not doing anything — a written greeting behind a
   recording, or everything at once when voicemail is switched off. Dimmed
   rather than hidden, because it still has to be editable: you change it in
   order to make it the one that plays. */
.is-inactive { opacity: 0.55; }
.is-inactive:focus-within { opacity: 1; }

/* A message left during a call, shown under that call rather than in a list of
   its own.
   The row is a two-column grid — details on the left, an action on the right —
   so anything that belongs under both has to say so. Without this the message
   landed in the right-hand column and sat alongside the phone number, which is
   what "eaten into the transcript" looked like. */
.row .vm { grid-column: 1 / -1; }
.vm {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-sunken, rgba(0, 0, 0, 0.035));
}
.vm__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-tertiary);
}
.vm__said {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--content-primary);
}
.vm__said.faint { color: var(--content-tertiary); font-style: italic; }
.vm audio {
  width: 100%;
  max-width: 340px;
  height: 32px;
  margin-top: 10px;
}

/* --- One instruction, repeated -------------------------------------------
   Every thing-to-do on the Diverting screen is the same shape: a label saying
   what it is for, the thing itself, and why. Before this the page set a
   different size, weight and margin at almost every line, inline, and read as
   four unrelated pages stacked on top of each other.
   ------------------------------------------------------------------------ */

.steps {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.step {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

/* The codes are a sequence — you dial all of them, in order — so they are
   numbered. The platform choices above are not: you do one and skip the rest,
   and numbering a choice tells a lie about it. */
.steps--numbered { counter-reset: step; }
.steps--numbered .step { counter-increment: step; padding-left: 50px; }
.steps--numbered .step::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--content-primary);
  color: var(--content-contrast);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-tertiary);
}

.step__do { margin-top: 8px; }
.step__do .codefield { margin: 0; }

/* The path is the instruction, so it reads first and biggest of the three. */
.step__path {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-elevated);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--content-primary);
  overflow-wrap: anywhere;
}

.step__why {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--content-secondary);
}

/* "If that did not do it." Pushed back, because it used to be a second
   sentence of identical weight saying something quite different. */
.step__note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-base);
  font-size: 13px;
  line-height: 1.5;
  color: var(--content-tertiary);
}

/* A line that is the whole instruction, like "Text VM OFF to 150". */
.step--plain {
  font-size: 15px;
  color: var(--content-primary);
}

.stack { margin-top: 16px; }

/* The first thing in a panel sets the top of the page, so it does not get the
   gap a section further down needs. Handled here rather than by an inline
   margin at each call site, which is how the spacing drifted to four different
   values on one screen. */
.subtabs__body > .section-head:first-child { margin-top: 4px; }

/* A sentence of orientation at the top of a panel. */
.panel-lede { margin: 0 0 26px; }

/* Quotes that finished without work. Present but closed: they are a record to
   check, not a list to work through, and marking something Lost should not
   feel like deleting it. */
.archive { margin-top: 36px; }
.archive > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border-base);
  cursor: pointer;
  list-style: none;
}
.archive > summary::-webkit-details-marker { display: none; }
.archive__label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.18px;
  color: var(--content-secondary);
}
.archive > summary::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--content-tertiary);
  border-bottom: 1.5px solid var(--content-tertiary);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.archive[open] > summary::after { transform: rotate(-135deg); }
.archive > .panel { margin-top: 4px; }

/* A phone number shown for reference rather than to dial. */
.numberline {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}