/* The portal's one stylesheet. Served from /portal.css so the CSP can say
   style-src 'self' and nothing else; no page carries a style attribute.

   The look is synapseretention.com's, as its DESIGN.md has it since its
   review round 2 of 13 October 2026 (owner, 2026-10-14: "Redesign the portal
   to match the website: its colors, fonts, buttons, cards and top bar"):
   * its colours, as the variables below with the same names and the same
     dark twin: a light page with white cards, and the night band, dark in
     both schemes, for the top bar, the foot and the sign-in pages;
   * its top bar: the lockup, the places as pills with the current one in
     glass, and Settings and the account as glass pills;
   * its buttons: pills, Pine on the light page, mint in the dark scheme;
   * its cards: a surface with one line, round corners, flat;
   * its typeface, Archivo, at its normal width: headings at weight 400 and
     the font's own spacing, the wordmark alone wide;
   * every colour the logo's green or a neutral, as the site's are, with one
     warm one: amber, for problems alone (owner, 2026-10-14: "Problems must
     not look fine ... Use one warm colour, amber, for problems only ...
     Keep mint for things that pass. Still no red anywhere").
   Its mark (/static/mark.svg) and Archivo, under the SIL Open Font License
   (/static/OFL.txt), are served from the portal itself, so no page asks
   anything of any other host. Every word, field, button and step is as it
   was: only the look changed.

   The simple portal (2026-10-09): four places and Settings, a status that
   says whether anything is wrong, problems in plain words with what to do,
   cards where a table would not help, tables of four columns at most that
   become cards on a phone, and folds (<details>) for everything else. Still
   no script. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/static/archivo-latin.4c98b9d490d1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* The site's light page. */
  --bg: #F3F7F4;
  --surface: #FFFFFF;
  --tint: #E8F1EC;
  --line: #D7E4DB;
  --line-strong: #AFC7BA;
  --ink: #05251A;
  --ink-2: #46614F;
  --ink-3: #657F71; /* the site's captions; here only a dot or an icon: as small
                      text on the light page it reads at 4.0 to 1, under the 4.5 small
                      text needs, so small text is --ink-2 */
  --signal: #0A7B52;
  --btn: #0B4D36;
  --btn-hover: #05251A;
  --btn-ink: #F0FFF7;
  --shadow: 0 1px 2px rgb(5 37 26 / 0.06), 0 18px 40px -18px rgb(5 37 26 / 0.22);

  /* The site's night band: the same in both schemes, a shade deeper in the
     dark one so it still reads as a band. */
  --night: #03120C;
  --night-ink: #EAF5EF;
  --night-ink-2: #A6C1B4;
  --night-ink-3: #7F9C8E;
  --night-line: rgb(234 245 239 / 0.11);
  --glass: rgb(255 255 255 / 0.045);
  --glass-2: rgb(255 255 255 / 0.085);
  --glass-line: rgb(255 255 255 / 0.11);
  --mint: #45E0A4;
  --mint-2: #6CEBBA;
  --mint-ink: #03170F;
  --glow: rgb(69 224 164 / 0.2);

  /* The portal's own, from the same green: what is well. */
  --good-wash: #DCF2E5;
  /* And its one warm colour, for problems alone: the amber of a problem's
     mark (a ring, a dot, the "!"), at 3 to 1 or better on a light card and on
     the band (the redesign, 2026-10-22, as its previews measured it); a deeper
     amber where a problem is a word on the light page, which reads at 5 to 1;
     the band's own, brighter; and a wash behind a count of problems. */
  --amber: #C77405;
  --amber-ink: #B45309;
  --amber-night: #F5B544;
  --amber-wash: #FCEFD9;

  /* The redesign's frame (2026-10-22): the sidebar's width, the top bar's
     height, the page's most, a card's corner and a row's; a deeper band for
     what opens on it, the logo's deeper green, and the mark behind a word a
     search found. */
  --night-2: #071B13;
  --mint-deep: #1A8F63;
  --mark-bg: rgb(69 224 164 / 0.32);
  --side: 15.75rem;
  --bar: 4rem;
  --page: 68rem;
  --r-card: 18px;
  --r-row: 12px;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 22px;
  --radius-lg: 28px;
  --radius-sm: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07120D;
    --surface: #0C1913;
    --tint: #0F2119;
    --line: #1B3429;
    --line-strong: #2E5544;
    --ink: #E6F2EC;
    --ink-2: #9CB6A9;
    --ink-3: #7B978A;
    --signal: #45E0A4;
    --btn: #45E0A4;
    --btn-hover: #6CEBBA;
    --btn-ink: #03170F;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -18px rgb(0 0 0 / 0.7);

    --night: #010805;
    --glow: rgb(69 224 164 / 0.17);

    --good-wash: #0E2A1E;
    --amber: #F5B544;
    --amber-ink: #F5B544;
    --amber-wash: rgb(245 181 68 / 0.12);
    --night-2: #04120C;
    --mark-bg: rgb(69 224 164 / 0.24);
  }
}

* { box-sizing: border-box; }

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

/* A column: the top bar, the page, and the foot at the bottom of the window
   however short the page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

::selection { background: var(--mint); color: var(--mint-ink); }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
/* On the night band, the focus ring is mint, as the site's is. */
.top-row > .lockup:focus-visible, .signin-brand :focus-visible { outline-color: var(--mint); }
code, .code { font-family: var(--mono); font-size: 0.875em; overflow-wrap: anywhere; }
/* One click selects a whole address, as no script may copy it. Safari reads
   only its prefixed name: unprefixed alone, a click there selected nothing
   (measured in WebKit, 2026-10-21). So every such rule says both. */
.address { -webkit-user-select: all; user-select: all; }

/* ---------------------------------------------------------------------
   The frame (the redesign, 2026-10-22; owner, 2026-10-21: "a sidebar that
   takes you anywhere, and a search to find what you need"): the sidebar on
   the night band, the places in it with their counts, a brand switcher at
   its head, the plan, the person and the time zone at its foot, and a thin
   mint line where you are (the "signal"); the top bar with the search box.
   On a phone the same sidebar is a drawer: the browser's own popover,
   opened by the Menu button, so no script is needed.
   --------------------------------------------------------------------- */

/* Signed out: the lockup on the night band, then the page. */
.top { background: var(--night); color: var(--night-ink); }
.top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  min-height: 4rem;
  margin-inline: auto;
  padding-block: 0.6rem;
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--night-ink);
  text-decoration: none;
  border-radius: 6px;
}
.lockup-mark { width: 1.85rem; height: auto; flex: none; }
.wordmark {
  display: flex;
  flex-direction: column;
  font-size: 0.71875rem;
  font-stretch: 125%;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.12;
  text-transform: uppercase;
}
.product {
  margin-left: 0.35rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--night-line);
  color: var(--night-ink-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* The first stop for a keyboard: straight to the page. */
.skip {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font-weight: 500; text-decoration: none;
  translate: 0 -300%;
}
.skip:focus { translate: 0 0; }

/* The app: the sidebar's column, then the page's. */
body.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 64rem) {
  body.app { background: linear-gradient(to right, var(--night) var(--side), var(--bg) var(--side)); }
}

/* The sidebar, on the night band in both schemes. One element on every
   screen: on a desktop always there, in the page's first column; on a phone
   the browser's own popover (`popover`), shown by the Menu button. The
   browser's popover styles are undone here. */
.rail {
  display: block; position: sticky; inset: auto; top: 0;
  width: auto; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0;
  overflow-y: auto; background: var(--night); color: var(--night-ink);
  border: 0; border-right: 1px solid var(--night-line);
  scrollbar-width: thin; scrollbar-color: var(--glass-line) transparent;
}
.side {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.2rem;
  min-height: 100%; padding: 1rem 0.85rem;
}
/* The site's glow, low on the band behind the places. */
.side::before {
  content: ""; position: absolute; z-index: -1; inset: -6rem auto auto -6rem;
  width: 22rem; height: 22rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.rail :focus-visible, .top :focus-visible, .bar-mark:focus-visible { outline-color: var(--mint); }
.side-brand {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.35rem 0.45rem 0.35rem 0.35rem; border-radius: var(--r-row);
  color: var(--night-ink); text-decoration: none;
}
.side-brand:hover { background: var(--glass); }
.side-brand img { width: 2rem; height: auto; flex: none; }
.side-names { min-width: 0; display: grid; line-height: 1.25; }
.side-names b { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-names span { font-size: 0.78rem; color: var(--night-ink-2); }

/* Another workspace, for staff and a person in several. */
.spaces { margin: 0.4rem 0 0; }
.spaces > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border-radius: 10px; color: var(--night-ink-2); font-size: 0.85rem;
}
.spaces > summary::-webkit-details-marker { display: none; }
.spaces > summary:hover { background: var(--glass); color: var(--night-ink); }
.spaces > summary svg, .switcher > summary svg { width: 1rem; height: 1rem; flex: none; color: var(--night-ink-2); }
.spaces[open] > summary svg, .switcher[open] > summary svg { rotate: 180deg; }
.spaces-list, .switcher-list {
  list-style: none; margin: 0.35rem 0 0; padding: 0.3rem;
  border-radius: var(--r-row); background: var(--night-2); border: 1px solid var(--glass-line);
}
.spaces-list a {
  display: block; padding: 0.45rem 0.55rem; border-radius: 9px;
  color: var(--night-ink); text-decoration: none; font-size: 0.88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spaces-list a:hover, .spaces-list a[aria-current] { background: var(--glass-2); }

/* The brand switcher: which brand you're looking at, or all of them. */
.switcher { margin: 0.75rem 0 0.9rem; }
.switcher > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: var(--r-row);
  background: var(--glass-2); border: 1px solid var(--glass-line);
}
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { background: rgb(255 255 255 / 0.12); }
.switcher > summary svg { grid-row: 1; grid-column: 3; justify-self: end; }
.switcher-label { grid-column: 1 / 3; grid-row: 1; font-size: 0.72rem; color: var(--night-ink-3); line-height: 1.2; }
.switcher-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--night-ink-3); flex: none; }
.switcher-dot.bad { background: var(--amber-night); box-shadow: 0 0 0 3px rgb(245 181 68 / 0.18); }
.switcher-dot.ok { background: var(--mint); }
.switcher-dot.wait { background: transparent; border: 1.5px solid var(--night-ink-2); }
.switcher-dot.all { background: transparent; border: 1.5px solid var(--night-ink-2); border-radius: 3px; }
.switcher-now { grid-column: 2 / 4; grid-row: 2; font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.55rem; border-radius: 9px;
  color: var(--night-ink); text-decoration: none; font-size: 0.88rem;
}
.switcher-list a span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-list a:hover, .switcher-list a[aria-current] { background: var(--glass-2); }
.switcher-list .meta { font-size: 0.74rem; color: var(--night-ink-2); font-variant-numeric: tabular-nums; }
.switcher-list .add { color: var(--mint); }
.switcher-list .add svg { width: 0.9rem; height: 0.9rem; }

/* A count beside a place, a tab or a view: amber where it counts problems
   (problems alone are amber). */
.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem;
  padding: 0 0.45rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.45rem; font-variant-numeric: tabular-nums;
  background: var(--tint); color: var(--ink-2);
}
.count.bad { background: var(--amber-wash); color: var(--amber-ink); }

/* The places. */
.side-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-nav a {
  position: relative; display: flex; align-items: center; gap: 0.72rem;
  padding: 0.5rem 0.65rem; border-radius: 10px;
  color: var(--night-ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 450;
}
.side-nav a:hover { background: var(--glass); color: var(--night-ink); }
.side-nav a[aria-current="page"] { background: var(--glass-2); color: var(--night-ink); font-weight: 500; }
/* The signal: where you are, a mint line on the band's edge. */
.side-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -0.85rem; top: 0.45rem; bottom: 0.45rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mint); box-shadow: 0 0 14px 1px var(--mint);
}
.side-nav svg { width: 1.15rem; height: 1.15rem; flex: none; }
.side-nav .count { margin-left: auto; background: var(--glass-2); color: var(--night-ink-2); }
.side-nav .count.bad { background: rgb(245 181 68 / 0.16); color: var(--amber-night); }
.side-gap { height: 1px; margin: 0.6rem 0.65rem; background: var(--night-line); }

.side-foot { margin-top: auto; padding-top: 1rem; display: grid; gap: 0.55rem; }
/* The plan, where it is calm: early access, a trial with days left. */
a.plan-line {
  display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; border-radius: var(--r-row);
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--night-ink); text-decoration: none; font-size: 0.85rem; font-weight: 500; line-height: 1.3;
}
a.plan-line span { font-size: 0.78rem; font-weight: 400; color: var(--mint); }
a.plan-line span.plan-sub { color: var(--night-ink-2); }
a.plan-line:hover { background: var(--glass-2); }
.me > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.65rem;
  padding: 0.45rem 0.5rem; border-radius: var(--r-row);
}
.me > summary::-webkit-details-marker { display: none; }
.me > summary:hover { background: var(--glass); }
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--mint), var(--mint-deep)); color: var(--mint-ink);
  font-size: 0.85rem; font-weight: 600;
}
.me-names { min-width: 0; display: grid; line-height: 1.25; }
.me-names b { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-names span { font-size: 0.75rem; color: var(--night-ink-2); }
.me-menu { display: grid; gap: 1px; margin-top: 0.3rem; padding: 0.3rem; border-radius: var(--r-row);
  background: var(--night-2); border: 1px solid var(--glass-line); }
.me-menu form { margin: 0; }
.me-menu a, .me-menu button {
  display: block; width: 100%; min-height: 0; padding: 0.45rem 0.55rem; border-radius: 9px; border: 0; background: none;
  color: var(--night-ink); font: inherit; font-size: 0.88rem; font-weight: 400; text-align: left; text-decoration: none;
  cursor: pointer;
}
.me-menu a:hover, .me-menu button:hover { background: var(--glass-2); }
.side-time { margin: 0; padding: 0 0.55rem; font-size: 0.75rem; color: var(--night-ink-3); }

/* The page's column: the top bar, the plan's line where something needs
   doing, then the page. */
.frame { min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* The top bar: the search box, and the one action every page has. It
   sticks, and turns to glass as the page scrolls under it, where motion is
   welcome (below). */
.bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--bar); padding: 0.6rem 2.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.menu-button { display: none; }
.bar-mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.bar-mark img { width: 1.75rem; height: auto; }
.find { flex: 1; max-width: 36rem; display: block; }
.find form { position: relative; display: block; }
.find svg { position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem;
  color: var(--ink-2); pointer-events: none; }
.find input {
  width: 100%; min-height: 2.6rem; height: 2.6rem; padding: 0 1rem 0 2.6rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.95rem; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
}
.find input::placeholder { color: var(--ink-2); opacity: 1; }
.find input:focus-visible { outline-offset: 1px; border-color: var(--signal); }
.find input::-webkit-search-cancel-button { cursor: pointer; }
/* The search script's answers under the box (the redesign, step 8): a list
   of the box's own, drawn as text; the chosen one tinted, as a hovered one. */
.find .answers {
  position: absolute; z-index: 30; top: calc(100% + 0.4rem); left: 0; right: 0; margin: 0; padding: 0.35rem;
  list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow); max-height: min(60vh, 26rem); overflow: auto;
}
.find .answers[hidden] { display: none; }
.find .answers a { display: block; padding: 0.55rem 0.8rem; border-radius: 12px; color: var(--ink); text-decoration: none; }
.find .answers [aria-selected="true"] a, .find .answers a:hover { background: var(--tint); }
.find .answers .title { display: block; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
/* Not a page's subtitle (`.sub`): no room under it, and no measure. */
.find .answers .sub { display: block; margin: 0; max-width: none; font-size: 0.85rem; line-height: 1.4;
  color: var(--ink-2); overflow-wrap: anywhere; }
.bar .add { margin-left: auto; flex: none; }
.bar .add svg { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------------
   The page
   --------------------------------------------------------------------- */

main {
  flex: 1 0 auto;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.frame > main {
  width: 100%; max-width: var(--page); margin: 0;
  padding: 2rem 2.5rem 5rem;
}
.frame > main:focus { outline: none; }
/* Sections, and cards, one after another on a page have room between them
   (found rendering the redesign's build, 2026-10-22: a brand's Overview,
   Klaviyo and Settings tabs stacked theirs touching). A section's own
   margin, where it has one, still decides. */
main > section + section { margin-top: 2.25rem; }
main > .card + .card, main > .card + .folds { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------
   The frame on a phone: the sidebar closed, the top bar on the night band
   with the Menu button and the search box; the drawer when it opens.
   --------------------------------------------------------------------- */

@media (max-width: 63.99rem) {
  body.app { display: block; }
  /* Closed, the popover the browser hides; open, the drawer. */
  .rail:not(:popover-open) { display: none; }
  .bar {
    min-height: 3.6rem; padding: 0.45rem 0.6rem 0.45rem 0.35rem; gap: 0.35rem;
    background: var(--night); border-bottom-color: var(--night-line); color: var(--night-ink);
  }
  .menu-button {
    display: grid; place-items: center; flex: none;
    width: 2.75rem; min-height: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-row);
    background: transparent; color: var(--night-ink); cursor: pointer;
  }
  .menu-button svg { width: 1.4rem; height: 1.4rem; }
  .menu-button:hover { background: var(--glass); }
  .menu-button:focus-visible { outline-color: var(--mint); }
  .bar-mark { color: var(--night-ink); }
  .find { max-width: none; }
  .find input { height: 2.5rem; min-height: 2.5rem; background: var(--glass-2); border-color: var(--glass-line); color: var(--night-ink); }
  .find input::placeholder { color: var(--night-ink-2); }
  .find svg { color: var(--night-ink-2); }
  .find input:focus-visible { outline-color: var(--mint); border-color: var(--mint); }
  .bar .add { display: none; }
  .frame > main { padding: 1.35rem var(--gutter) 4rem; }
}

/* The drawer: the sidebar on a phone. The Menu button opens it; Escape, a
   tap outside or Close closes it; the keyboard goes into it, and back to
   the button after. */
.drawer-close { display: none; }
@media (max-width: 63.99rem) {
  .rail:popover-open {
    position: fixed; inset: 0 auto 0 0; z-index: auto;
    width: min(20rem, 86vw); height: 100vh; height: 100dvh;
    box-shadow: 24px 0 60px -24px rgb(0 0 0 / 0.6);
  }
  .rail::backdrop { background: rgb(1 8 5 / 0.55); }
  .rail .side { padding-top: 0.75rem; }
  .rail .side-brand { margin-right: 3rem; }
  .drawer-close {
    position: absolute; z-index: 2; top: 0.75rem; right: 0.6rem;
    display: grid; place-items: center; width: 2.6rem; min-height: 2.6rem; height: 2.6rem; padding: 0;
    border: 0; border-radius: var(--r-row); background: var(--glass-2); color: var(--night-ink); cursor: pointer;
  }
  .drawer-close svg { width: 1.2rem; height: 1.2rem; }
}
/* A browser without popovers: no Menu button, and the sidebar shown above
   the page instead. */
@supports not selector(:popover-open) {
  .menu-button, .drawer-close { display: none !important; }
  @media (max-width: 63.99rem) { .rail { display: block !important; position: static; height: auto; } }
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
h2 {
  margin: 2.5rem 0 0.85rem;
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}
h3 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
p { margin: 0 0 0.75rem; }
.sub { margin: 0 0 1.75rem; color: var(--ink-2); max-width: 62ch; font-size: 1.0625rem; line-height: 1.5; }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.note { font-size: 0.8125rem; color: var(--ink-2); max-width: 70ch; }
/* A note or a line of help under a card, a list or a form: a little room
   between the two. */
:is(.card, .cards, .problems, .table-wrap, .figures, .news, form.stacked) + :is(.note, .help) { margin-top: 0.75rem; }
.crumb { margin: 0 0 1rem; font-size: 0.9375rem; }
.crumb a { font-weight: 560; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin: 0 0 1.5rem; }
.page-head > div { min-width: 0; }
.page-head .sub { margin-bottom: 0; }
.domain-name { overflow-wrap: anywhere; }
/* A web address is never split across lines (owner, 2026-10-14: "Never
   split a web address across lines"): `views.breakable` marks the part of
   an address a browser would break, at a hyphen or after a link's "//". */
.web { white-space: nowrap; }
/* A heading's longest word drawn to fit its box (owner, 2026-10-14, round
   6's second review: "Keep the "'s" with the address everywhere"): a web
   address with its "'s" is one word, and a heading's can be wider than its
   card. `views.fitted` names the word's width in half ems (fit-23 is
   11.5em), and the heading is drawn no larger than its box's width over it,
   nor larger than it is. The box is the page, the sign-in card or an empty
   card. */
main, .signin-panel, .empty { container-type: inline-size; }
.fit { display: block; font-size: min(1em, 100cqi / var(--em)); }
.fit-16 { --em: 8; } .fit-17 { --em: 8.5; } .fit-18 { --em: 9; } .fit-19 { --em: 9.5; } .fit-20 { --em: 10; } .fit-21 { --em: 10.5; } .fit-22 { --em: 11; }
.fit-23 { --em: 11.5; } .fit-24 { --em: 12; } .fit-25 { --em: 12.5; } .fit-26 { --em: 13; } .fit-27 { --em: 13.5; } .fit-28 { --em: 14; } .fit-29 { --em: 14.5; }
.fit-30 { --em: 15; } .fit-31 { --em: 15.5; } .fit-32 { --em: 16; } .fit-33 { --em: 16.5; } .fit-34 { --em: 17; } .fit-35 { --em: 17.5; } .fit-36 { --em: 18; }
.fit-37 { --em: 18.5; } .fit-38 { --em: 19; } .fit-39 { --em: 19.5; } .fit-40 { --em: 20; } .fit-41 { --em: 20.5; } .fit-42 { --em: 21; } .fit-43 { --em: 21.5; }
.fit-44 { --em: 22; } .fit-45 { --em: 22.5; } .fit-46 { --em: 23; } .fit-47 { --em: 23.5; } .fit-48 { --em: 24; } .fit-49 { --em: 24.5; } .fit-50 { --em: 25; }
.fit-51 { --em: 25.5; } .fit-52 { --em: 26; } .fit-53 { --em: 26.5; } .fit-54 { --em: 27; } .fit-55 { --em: 27.5; } .fit-56 { --em: 28; } .fit-57 { --em: 28.5; }
.fit-58 { --em: 29; } .fit-59 { --em: 29.5; } .fit-60 { --em: 30; } .fit-61 { --em: 30.5; } .fit-62 { --em: 31; } .fit-63 { --em: 31.5; } .fit-64 { --em: 32; }

.notice { padding: 0.8rem 1.05rem; background: var(--surface); border: 1px solid var(--signal); border-radius: var(--radius-sm); }
/* What went wrong with what was asked: plain, in ink, never in red (the
   site's No-Third-Hue Rule). */
.error { padding: 0.8rem 1.05rem; background: var(--tint); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; }
/* A brand that still counts on the bill though nothing watches it
   (owner, 2026-10-13): said where the brand is, in bold. */
.notice.bill-note { border-color: var(--line-strong); background: var(--tint); font-weight: 560; }
.card .bill-note, td .bill-note { color: var(--ink); font-weight: 600; }
.working { display: flex; gap: 0.6rem; align-items: center; }
.working::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--good-wash); flex: none; }
/* Still: its words say the page updates by itself, and nothing moves on its
   own (owner, 2026-10-13, round 3). */

/* ---------------------------------------------------------------------
   Status: whether anything is wrong, in form as well as in words. The
   site's chips: a pill with a dot. What is well in its green; a problem
   on the night band, with an amber dot and ring.
   --------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.75rem 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 560;
  line-height: 1.35;
  white-space: nowrap;
}
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.status.ok { background: var(--good-wash); color: var(--signal); }
.status.bad { background: var(--night); color: var(--night-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent); }
.status.bad::before { background: var(--amber); }
.status.wait { background: var(--tint); color: var(--ink-2); }
.status.wait::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status.off { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.status.big { font-size: 1rem; padding: 0.35rem 0.95rem 0.35rem 0.8rem; }
/* Worth a look: calm, never a warning's colour (owner, 2026-10-13). */
.status.look { background: var(--tint); color: var(--ink-2); }
.status.look::before { background: var(--ink-3); }

/* The Home's answer: a sentence with its mark. */
.answer { display: flex; gap: 1.1rem; align-items: flex-start; margin: 0 0 2.25rem; }
.answer-mark { flex: none; width: 3rem; height: 3rem; margin-top: 0.1rem; border-radius: 50%; display: grid; place-items: center; }
.answer-mark svg { width: 1.4rem; height: 1.4rem; }
.answer.ok .answer-mark { background: var(--good-wash); color: var(--signal); }
.answer.bad .answer-mark { background: var(--night); color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.answer.none .answer-mark { background: var(--tint); color: var(--ink-3); }
.answer h1 { margin: 0.05rem 0 0.4rem; }
.answer .sub { margin: 0; }

/* ---------------------------------------------------------------------
   Cards: the site's, a surface with one line and round corners, flat
   --------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.spaced { margin-top: 1rem; }
.status.info { background: var(--tint); color: var(--signal); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 0.6rem; }
.card-head h2, .card-head h3 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.card-head h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.card-head a { color: var(--ink); text-decoration: none; }
.card-head a:hover { color: var(--signal); text-decoration: underline; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.9rem 0 0; font-size: 0.9375rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card-foot { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }

/* A brand watched: its card, with its status at the top right. */
.client .card-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.client .card-head h3 { font-size: 1.25rem; }
.client.bad { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); }

/* ---------------------------------------------------------------------
   A problem: what is wrong, the brand's own words, and what to do. Its
   number on the night band, ringed in amber.
   --------------------------------------------------------------------- */

.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.problem {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.25rem 1.4rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.problem .n {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 0.05rem;
  background: var(--night); color: var(--night-ink);
  box-shadow: 0 0 0 2px var(--amber);
  font-weight: 650; font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.problem .what { margin: 0.15rem 0 0.4rem; font-weight: 560; font-size: 1.0625rem; line-height: 1.45; }
.problem .why { margin: -0.1rem 0 0.4rem; color: var(--ink-2); }
.problem .todo { margin: 0.7rem 0 0; }
.problem .todo b { color: var(--signal); font-weight: 600; }
.problem .seen { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.problem .seen a { font-weight: 560; }
.problems.compact .problem { padding: 1rem 1.25rem 1rem 1.1rem; }
.problems.compact .problem .what { font-size: 1rem; margin-bottom: 0.25rem; }
/* A problem's name: one name per check, the same on every page, alert and
   report (owner, 2026-10-13). */
.problem .name { margin: 0 0 0.15rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
/* Worth a look is never drawn like a problem (owner, 2026-10-13: "no orange
   '!' or orange bar"): a calm card, with no mark. */
.problem.look { grid-template-columns: minmax(0, 1fr); padding-left: 1.4rem; }
.problem.look .what { font-weight: 500; }
/* One kind said once for all its emails (owner, 2026-10-27: "Group them"):
   its emails one click away, each a row with its numbers and its own
   Dismiss. The chevron is the emails' folds' own. */
.problem details.members { margin: 0.9rem 0 0; border-top: 1px solid var(--line); }
.problem details.members > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0;
  padding: 0.55rem 0.4rem 0.35rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--signal);
  font-weight: 560;
  font-size: 0.9375rem;
}
.problem details.members > summary::-webkit-details-marker { display: none; }
.problem details.members > summary::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translate(-0.08rem, 0) rotate(-45deg);
}
.problem details.members[open] > summary::before { transform: translate(0, -0.1rem) rotate(45deg); }
.problem ul.members { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.problem ul.members > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.problem ul.members > li:first-child { border-top: 0; }
.problem ul.members .member-what { grid-column: 1; margin: 0; font-weight: 500; line-height: 1.45; }
.problem ul.members .seen { grid-column: 1; margin: 0; }
.problem ul.members .button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* The answer at the top of a brand's page: what to fix, then what's worth a
   look; a line said once for a whole list, above it. */
.answer-list { margin: 1.75rem 0 0; }
.answer-list > h2 { margin: 0 0 0.35rem; }
.answer-list > .sub { margin: 0 0 0.9rem; color: var(--ink-2); font-size: 0.9375rem; }
.answer-list.calm > h2 { font-size: 1.25rem; }
.shared { margin: 0 0 0.75rem; color: var(--ink-2); font-size: 0.9375rem; }

/* The brand's own words, word for word: each side of a contradiction. */
.quotes { display: grid; gap: 0.35rem; margin: 0.6rem 0 0; }
.quote {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  background: var(--tint);
  border-radius: 10px;
  font-size: 0.9375rem;
}
.quote .label { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; padding-top: 0.1rem; }
.quote .words { min-width: 0; overflow-wrap: anywhere; }

/* A brand group on the Home: the brand, then its problems. */
.brand-group { margin: 0 0 2.25rem; }
.brand-group > .card-head { margin-bottom: 0.8rem; }
.brand-group > .card-head h2 { margin: 0; font-size: 1.375rem; }
.brand-group > .card-head h2 a { color: var(--ink); text-decoration: none; }
.brand-group > .card-head h2 a:hover { color: var(--signal); text-decoration: underline; }
.brand-group > .more { margin: 0.8rem 0 0; }
.brand-group > .more a { font-weight: 560; }

/* A brand's status at the top of its page. */
.brand-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.4rem 0 1.75rem; }
.brand-status .status-line { font-weight: 500; }
.brand-status .meta { color: var(--ink-2); font-size: 0.9375rem; }

/* Manage, at the foot of a brand's page: the steps done, a line each, with
   our addresses, the alerts emailed and stopping. */
.manage { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.manage > h2 { font-size: 1.375rem; margin: 0 0 0.6rem; }
.manage > p { margin: 0 0 0.4rem; color: var(--ink-2); }
.manage > .folds { margin-top: 1.1rem; }

/* Dismissing a problem (owner, 2026-10-20): each problem's and look's
   "Dismiss", a small quiet button under it; the dismiss page's card, the
   item as its page says it; and the Dismissed list at the foot of a brand's
   page, each with its Undo. */
.problem .dismiss-line { margin: 0.8rem 0 0; }
.dismiss-item { margin: 0 0 1.5rem; }
.dismiss-item .name { margin: 0 0 0.15rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.dismiss-item .what { margin: 0; font-weight: 560; font-size: 1.0625rem; line-height: 1.45; }
.dismiss-item.look .what { font-weight: 500; }
.dismiss-item .seen { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.dismiss-form legend { margin: 0 0 0.75rem; padding: 0; font-weight: 560; font-size: 1.0625rem; }
.dismissed-rows { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.dismissed-rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: start;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dismissed-rows .name { margin: 0 0 0.15rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.dismissed-rows .what { margin: 0 0 0.25rem; font-weight: 500; }
.dismissed-rows .said { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.dismissed-rows form { margin: 0; }
@media (max-width: 34rem) {
  .dismissed-rows > li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Folds: what sits underneath, one click away. The chevron in a circle,
   as the site's questions have it.
   --------------------------------------------------------------------- */

.folds { display: grid; gap: 0.6rem; margin: 2.25rem 0 0; }
details.fold {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
details.fold > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.85rem 1.25rem 0.85rem 3.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
details.fold > summary::-webkit-details-marker { display: none; }
/* Every fold's chevron, the same one (owner, 2026-10-13): pointing right
   when closed, down when open. */
details.fold > summary::before {
  content: "";
  position: absolute;
  left: calc(1.1rem + 0.95rem - 0.25rem);
  top: 50%;
  width: 0.45rem; height: 0.45rem;
  margin-top: -0.225rem;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translate(-0.08rem, 0) rotate(-45deg);
}
details.fold[open] > summary::before { transform: translate(0, -0.1rem) rotate(45deg); }
details.fold > summary::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1.9rem; height: 1.9rem;
  margin-top: -0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
details.fold > summary .count { margin-left: auto; min-width: 0; padding: 0; background: none; color: var(--ink-2); font-weight: 400; font-size: 0.875rem; line-height: inherit; white-space: nowrap; }
details.fold > .inside { padding: 0 1.4rem 1.4rem; border-top: 1px solid var(--line); }
details.fold > .inside > :first-child { margin-top: 1.1rem; }
details.fold.danger > summary { color: var(--ink); font-weight: 600; }

/* An email in the full checks: its line, and its five checks folded. */
.emails { list-style: none; margin: 0; padding: 0; }
.emails > li { border-bottom: 1px solid var(--line); }
.emails > li:last-child { border-bottom: 0; }
.emails details > summary {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.85rem;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
}
.emails details > summary::-webkit-details-marker { display: none; }
.emails details > summary::before {
  content: "";
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg);
}
.emails details[open] > summary::before { transform: rotate(45deg); }
.emails .subject { grid-column: 2; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.emails .when { grid-column: 2; color: var(--ink-2); font-size: 0.875rem; }
.emails .status { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.emails details > .checks { margin-left: 1.35rem; }
.checks { display: grid; gap: 0.55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.75rem; font-size: 0.9375rem; }
/* A list whose first column names an email, a list or a form, with a line
   under it: room for the name (2026-10-13). */
.checks.named li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.checks .check-name { color: var(--ink-2); font-weight: 500; font-size: 0.875rem; }
/* A name's second line, under it (owner, 2026-10-13: ""Diagnostic"List"
   needs a space). */
.checks .check-name .sub-line { display: block; font-weight: 400; }
.checks .check-name .brand-words { color: var(--ink); }
.result-fail { color: var(--amber-ink); font-weight: 650; }
.result-look { color: var(--ink-2); font-weight: 600; }
.result-pass { color: var(--signal); font-weight: 600; }
.result-unknown, .result-none { color: var(--ink-2); font-weight: 560; }

/* ---------------------------------------------------------------------
   Tabs, filters, actions: tabs are the site's pills
   --------------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.tabs a {
  display: block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.tabs a b { font-weight: 400; color: var(--ink-2); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.tabs a:hover { border-color: var(--signal); }
.tabs a[aria-current="page"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.tabs a[aria-current="page"] b { color: inherit; }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.toolbar.start { justify-content: flex-start; }
.toolbar form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.toolbar label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.3rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.size-line { margin: 0 0 1rem; }
.size-line b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Tables: four columns at most, and a card each row on a phone
   --------------------------------------------------------------------- */

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.8rem 1.05rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
thead th { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; border-bottom: 1px solid var(--line); background: var(--surface); }
th.num, td.num { text-align: right; }
td.brand a { color: var(--ink); font-weight: 560; text-decoration: none; overflow-wrap: anywhere; }
td.brand a:hover { color: var(--signal); text-decoration: underline; }
td .sub-line { display: block; color: var(--ink-2); font-size: 0.875rem; margin-top: 0.15rem; }
tr.own td { background: color-mix(in srgb, var(--mint) 12%, var(--surface)); }

@media (max-width: 40rem) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { padding: 0.15rem 0; border: 0; text-align: left; }
  /* Its label in a column of its own, and its value in another beside it,
     however long either is (found rendering the redesign's build: "Proof
     it's from you" ran into its value; owner, 2026-10-22: long values
     "wrap back under their label ... Keep each value in its own column").
     The cell is drawn as a table: its label one cell, and everything after
     the label one cell the browser makes round it, so a value's lines stay
     beside the label. The longest label, "Proof it's from you", is 6.6rem. */
  table.stack td[data-label] { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow-wrap: break-word; }
  table.stack td[data-label]::before { content: attr(data-label); display: table-cell; width: 7.4rem; padding-right: 0.6rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; }
  table.stack td.brand { font-size: 1rem; padding-bottom: 0.3rem; }
  table.stack td.brand::before { display: none; }
}

.pages { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin: 1rem 0; }

/* The mark the Market and a list put on a brand: yours, or on your list. */
.mark {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.5rem;
  border: 1px solid var(--signal);
  border-radius: 999px;
  color: var(--signal);
  font-size: 0.75rem;
  font-weight: 560;
  line-height: 1.5;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.mark.listed { border-color: var(--line-strong); color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------------
   Forms: the site's pill buttons
   --------------------------------------------------------------------- */

form.inline { display: inline; }
/* Disconnect stands apart from what is above it (owner, 2026-10-13). */
form.disconnect { margin: 1.5rem 0 0; }
.klaviyo-brands { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.klaviyo-brands > li { padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.klaviyo-brands > li:first-child { border-top: 0; padding-top: 0; }
.klaviyo-brands h3 { margin: 0; font-size: 1.125rem; }
form.stacked { display: grid; gap: 1rem; max-width: 36rem; }
form.stacked > button { justify-self: start; }
form.stacked .field { display: grid; gap: 0.35rem; }
form.stacked label, .field > label { font-weight: 500; font-size: 0.9375rem; }
.help { color: var(--ink-2); font-size: 0.875rem; margin: 0; }
input[type=email], input[type=url], input[type=text], input:not([type]), textarea, select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  min-height: 3rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--signal); outline-offset: 1px; }
.toolbar select, .toolbar input { width: auto; }
/* A select beside a small button, the size of the button. */
.people select, .toolbar select, .menu .switch select { min-height: 2.25rem; padding: 0.3rem 0.75rem; font-size: 0.9375rem; border-radius: 12px; }
select { padding: 0.6rem 0.8rem; }
label.check { display: flex; gap: 0.65rem; align-items: flex-start; font-weight: 500; }
label.check input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--signal); }
textarea { font-family: var(--mono); font-size: 0.9rem; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.2;
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
button:hover, .button:hover { background: var(--btn-hover); }
.button.secondary, button.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.secondary:hover, button.secondary:hover { border-color: var(--signal); background: var(--surface); }
button.small, .button.small { min-height: 2.25rem; padding: 0.45rem 0.95rem; font-size: 0.875rem; }
/* What can't be undone: outlined in ink, the words saying what it does (no
   red: the site's No-Third-Hue Rule). */
button.danger, .button.danger { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
button.danger:hover, .button.danger:hover { background: var(--tint); }
button.link {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--signal); font-weight: 400; text-decoration: underline;
}
.button.plus::before { content: "+"; font-size: 1.15em; line-height: 1; margin-top: -0.1em; }

/* ---------------------------------------------------------------------
   Add a brand, and every brand's two steps (2026-10-10): our addresses on
   its list, for alerts; Connect Klaviyo, for the audit. Side by side on a
   wide screen, one above the other on a phone.
   --------------------------------------------------------------------- */

.brand-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem); min-width: 0; }
.step-card .card-head h2 { font-size: 1.25rem; font-weight: 500; }
.step-card .step-n { display: inline-block; margin-bottom: 0.45rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--tint); color: var(--signal); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.step-card .gives { color: var(--ink-2); margin: 0 0 0.8rem; }
.step-card p { overflow-wrap: anywhere; }
.step-card .actions { margin-top: 0.8rem; }
.step-card form.inline { margin-top: 0.8rem; }
.client-link { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; }
.client-link h3 { margin: 0; font-size: 1.0625rem; }
.client-link p { margin: 0; }
input.copy { width: 100%; font-family: var(--mono); font-size: 0.8125rem; }
.setup { max-width: 46rem; }
.setup-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.setup-card h2 { margin-top: 0; }
.address-box { display: grid; gap: 0.75rem; margin: 1rem 0; }
.address-line { display: grid; gap: 0.2rem; padding: 0.85rem 1.05rem; background: var(--tint); border-radius: var(--radius-sm); }
.address-line .label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.address-line code { font-size: 1rem; font-weight: 560; }
ol.how { margin: 0.75rem 0 1rem; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
ol.how li::marker { color: var(--signal); font-weight: 600; }

/* ---------------------------------------------------------------------
   Setting a brand up, one step a screen (owner, 2026-10-18: "Rebuild 'Add
   a brand' as one step per screen, each with a 'Step 1 of 3' line, short
   exact instructions and a 'Next' button"): the progress line, the step's
   line, its card, then Back and Next under it. Our two addresses large,
   each selected whole by one click (`.address`), and the message for a
   client the same, as no script may copy them. A brand's page leads with
   one card back to the step it is on.
   --------------------------------------------------------------------- */

.setup.steps ol.step-dots { justify-content: flex-start; margin: 0.25rem 0 1.25rem; }
ol.step-dots li.skipped::before { content: "\2013"; border-style: dashed; }
.step-of { margin: 0 0 0.4rem; color: var(--signal); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.setup .lead { margin: 0 0 1.25rem; color: var(--ink-2); font-size: 1.0625rem; max-width: 62ch; }
.setup > .notice, .setup > .error { margin: 0 0 1rem; }
/* A screen with no line under its title gives its card the same room. */
.setup.steps > h1 + .setup-card, .setup.steps > h1 + .notice, .setup.steps > h1 + .error { margin-top: 1.25rem; }
.setup-card > :last-child { margin-bottom: 0; }
.setup-card form.stacked { margin: 0; }
.setup-card details.fold { margin: 0 0 1rem; }
.address-box.big { margin: 0.25rem 0 1.25rem; }
.address-box.big .address-line { padding: 1rem 1.2rem; }
.address-box.big code.address { font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.4rem); font-weight: 560; }
.setup-card .how-title { margin: 1.5rem 0 0.25rem; font-size: 1.125rem; font-weight: 500; }
.link-fold .paste { margin: 0 0 0.9rem; }
.paste { -webkit-user-select: all; user-select: all; padding: 0.85rem 1.05rem; background: var(--tint); border-radius: var(--radius-sm); cursor: text; }
.paste p { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.paste p:last-child { margin: 0; }
.next-lines { display: grid; gap: 0.65rem; margin: 0; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.25rem; margin: 1.25rem 0 0; }
.setup-actions .back { margin-right: auto; font-weight: 560; }
.setup-actions form.inline { margin: 0; }
.next-help { margin: 0.6rem 0 0; text-align: right; }
.setup-skip { margin-top: 1.75rem; }
.setup-skip p { margin: 0; }

/* What is happening now, and what the reader does (owner, 2026-10-19:
   "Every screen says plainly what's happening now, and what, if anything,
   the user has to do"): the same two lines at the top of every screen's
   card, with a sign beside them. */
.setup-now { display: flex; gap: 0.9rem; align-items: flex-start; margin: 0 0 1.25rem; }
.setup-now:last-child { margin-bottom: 0; }
.setup-now > div { min-width: 0; }
.setup-now p { margin: 0; overflow-wrap: anywhere; }
.setup-now .now { font-size: 1.0625rem; font-weight: 560; }
.setup-now .you { margin-top: 0.2rem; color: var(--ink-2); }
.now-mark { flex: none; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; }
.now-mark svg { width: 1rem; height: 1rem; }
.now-mark.done { background: var(--good-wash); color: var(--signal); }
.now-mark.alert { background: var(--night); color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.setup-card .before-connect { color: var(--ink-2); }
.setup-card details.good-to-know { margin: 1.25rem 0 0; }
.setup-card details.link-fold { margin: 1.25rem 0 0; }
.good-to-know .inside > p, .link-fold .inside > p { margin: 0 0 0.6rem; }
.good-to-know .address-box { margin: 0.4rem 0 0.9rem; }
/* The waiting sign: a dot with its soft halo, and while we wait a faint
   ring that grows from it and fades, every 3 seconds (`waiting-ripple`,
   in the motion guard below). Still, for a reader who asks for less
   motion: the dot and its halo. */
.waiting-sign { flex: none; width: 0.8rem; height: 0.8rem; margin: 0.4rem 0.35rem 0; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.3em var(--good-wash); }
/* A pill whose dot is the waiting sign: filled, on a page that updates by
   itself while we wait, its ring smaller to stay inside the pill. */
.status.wait.moving::before { background: var(--signal); box-shadow: 0 0 0 0.3em var(--good-wash); font-size: 0.55em; }
/* "You're all set": its check mark in a soft mint glow, drawn once (the
   motion guard below draws it). */
.all-set-mark { width: 4.75rem; height: 4.75rem; margin: 0.85rem 0 1.25rem 0.45rem; border-radius: 50%; background: var(--good-wash); color: var(--signal);
  box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--mint) 16%, transparent), 0 0 1.6rem 0.4rem color-mix(in srgb, var(--mint) 36%, transparent); }
.all-set-mark svg { display: block; width: 100%; height: 100%; }
.all-set-mark .tick { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* A brand's page: the button back to setting it up, under its status. */
.status-action { margin: 0.9rem 0 1.5rem; }
/* Klaviyo offered on a watched brand's page (2026-10-22): a calm line, not a step. */
.offer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.9rem 0 1.5rem;
  padding: 0.85rem 1rem; border: 1px dashed var(--line); border-radius: 18px; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   Empty pages say what to do next
   --------------------------------------------------------------------- */

.empty { padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); max-width: 46rem; }
.empty h2 { margin: 0 0 0.6rem; }
.empty p { color: var(--ink-2); max-width: 56ch; }
.empty .actions { margin-top: 1.1rem; }

/* ---------------------------------------------------------------------
   Settings, the Team, the Market
   --------------------------------------------------------------------- */

.settings { display: grid; gap: 1.25rem; max-width: 54rem; }
.settings .card h2 { margin: 0 0 0.4rem; }
.settings .card > .help { margin-bottom: 1rem; }
.setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: 0; }
.setting-row > div { min-width: 0; }
.logo-preview { display: block; max-width: 100%; height: auto; max-height: 3rem; padding: 0.6rem 0.8rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; }

.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.people li:first-child { border-top: 0; }
.people .person { min-width: 0; }
.people .person b { display: block; font-weight: 560; overflow-wrap: anywhere; }
.people .person span { color: var(--ink-2); font-size: 0.875rem; }
.people form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.people select { width: auto; }
.role { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 0.8125rem; font-weight: 560; text-transform: capitalize; }

.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; }
.figure-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.figure-card.own { border-color: var(--signal); }
.figure-card h3 { margin: 0 0 0.45rem; font-size: 0.9375rem; font-weight: 500; }
/* A figure is the site's numeral: light, tight, tabular. */
.figure-card .big { font-size: 2rem; font-weight: 340; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figure-card .small { color: var(--ink-2); }
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.news li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.15rem; }
.news .kicker { display: block; color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.15rem; }

/* ---------------------------------------------------------------------
   The offer map: weeks across, each flow and its campaigns down
   --------------------------------------------------------------------- */

.scroll { overflow-x: auto; }
table.offer-map { font-size: 0.875rem; }
table.offer-map th:first-child, table.offer-map td:first-child { position: sticky; left: 0; background: var(--surface); }
table.offer-map td { min-width: 10rem; }
table.offer-map td:first-child { min-width: 8rem; font-weight: 560; }
.sent { margin: 0 0 0.45rem; }
.sent:last-child { margin-bottom: 0; }
.sent .when { display: block; color: var(--ink-2); font-size: 0.75rem; }
.sent .offer { display: block; color: var(--signal); font-weight: 600; }

/* ---------------------------------------------------------------------
   The sign-in pages: on the site's night band, its mint glow from above,
   the mark large in the middle and the wordmark under it; then what to
   do, on a card. The mark moves once, as the page opens: nothing moves on
   its own (owner, 2026-10-13, round 3), where it moved over and over. CSS
   alone; still for a reader who asks for less.
   --------------------------------------------------------------------- */

main.signin {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 3rem;
  overflow: clip;
  background: var(--night);
  color: var(--night-ink);
}
main.signin::before {
  /* The glow: a soft spotlight from above, and a low wash of mint. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 50% -6%, var(--glow), transparent 68%),
    radial-gradient(40rem 26rem at 8% 108%, rgb(69 224 164 / 0.07), transparent 62%);
}
.signin-card { width: min(100%, 28rem); text-align: center; }
.signin-mark { display: block; width: clamp(8rem, 36vw, 12.5rem); height: auto; margin: 0 auto 1.1rem; overflow: visible; }
.signin-brand { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin: 0 0 2rem; color: var(--night-ink); }
.signin-brand .wordmark { flex-direction: row; gap: 0.45em; font-size: 0.875rem; }
.signin-brand .product { margin: 0; padding: 0; border: 0; color: var(--night-ink-2); }
/* What to do: the site's card, on the band. */
.signin-panel {
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.signin-panel h1 { margin-top: 0; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.signin-panel > :last-child { margin-bottom: 0; }
/* A fold on the card reads from the left, as every fold does; so do a
   page's paragraphs where it has many (owner, 2026-10-14, of the client's
   page: "left-align that page's paragraphs inside the card"). */
.signin-panel details.fold, .signin-panel .left { text-align: left; }
.signin form.stacked { margin: 0 auto 1rem; text-align: left; }
.signin form.stacked button { justify-self: center; }
.signin-mark .signal { fill: none; stroke: #F2FFF8; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .signin-mark .upper { animation: synapse-upper 3.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .signin-mark .lower { animation: synapse-lower 3.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .signin-mark .upper .signal { animation: signal-upper 3.2s linear; }
  .signin-mark .lower .signal { animation: signal-lower 3.2s linear; }
  /* Past the first page of a sign-up, the mark is still. */
  .signin-card.compact .signin-mark .half, .signin-card.compact .signin-mark .signal { animation: none; }
}
@keyframes signal-upper { 0% { stroke-dashoffset: 14; opacity: 0; } 5% { opacity: 0.95; } 44% { stroke-dashoffset: -100; opacity: 0.95; } 48%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes signal-lower { 0%, 50% { stroke-dashoffset: 14; opacity: 0; } 55% { opacity: 0.95; } 94% { stroke-dashoffset: -100; opacity: 0.95; } 98%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes synapse-upper { 0%, 36%, 70%, 100% { transform: translate(0, 0); } 49% { transform: translate(9px, 13px); } }
@keyframes synapse-lower { 0%, 36%, 70%, 100% { transform: translate(0, 0); } 49% { transform: translate(-9px, -13px); } }

/* ---------------------------------------------------------------------
   A phone
   --------------------------------------------------------------------- */

@media (max-width: 40rem) {
  body { font-size: 15.5px; }
  .product { display: none; }
  .wordmark { font-size: 0.6875rem; }
  .top-row { gap: 0.5rem 0.75rem; }
  .problem { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
  .problem .n { margin-bottom: 0.5rem; }
  /* A group's email on a phone: its words, then its Dismiss under them. */
  .problem ul.members > li { grid-template-columns: minmax(0, 1fr); }
  .problem ul.members .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.45rem; }
  .quote { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .checks li, .checks.named li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .step-card { padding: 1.15rem; }
  .page-head .button { width: 100%; }
  .setup-card { padding: 1.15rem; }
  /* Next is the width of the page on a phone, Back under it. */
  .setup-actions { justify-content: stretch; }
  .setup-actions > .button, .setup-actions > form.inline, .setup-actions > form.inline button { width: 100%; }
  .setup-actions .back { order: 2; margin: 0 auto; }
  .next-help { text-align: left; }
  .answer { gap: 0.8rem; }
  .answer-mark { width: 2.4rem; height: 2.4rem; }
  .answer-mark svg { width: 1.15rem; height: 1.15rem; }
  details.fold > summary { padding-left: 3.4rem; }
  details.fold > summary::after { left: 0.95rem; }
  details.fold > summary::before { left: calc(0.95rem + 0.95rem - 0.25rem); }
  details.fold > .inside { padding: 0 1.1rem 1.1rem; }
  /* A button's words may wrap on a phone, a web address in them whole,
     rather than push the button past the card's edge (owner, 2026-10-14,
     round 6's second review: "Check every other place where a web address
     sits inside a label, button or pill"). */
  button, .button { white-space: normal; text-align: center; }
  button.link { text-align: left; }
  /* A heading that holds a whole web address fits a phone's line. */
  h1.domain-name { font-size: 1.6rem; }
  .signin-panel { padding: 1.4rem 1.25rem; }
  .signin-panel h1 { font-size: 1.5rem; }
}

/* The monthly reports (2026-10-09): a report as a page, in the box's words. */
.report .kicker { color: var(--ink-2); font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 0.5rem; }
.report-section { margin-top: 2rem; }
.report-section h2 { margin-bottom: 0.6rem; }
.report-items { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.75rem; }
.report-item { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1rem 1.25rem 1.05rem; }
/* A plain card, as every card (owner, 2026-10-14: "Make them plain cards
   like the rest"): its section's heading and its pill say its state. */
.report-item h3 { font-size: 1.0625rem; margin: 0; }
.report-item p { margin: 0.4rem 0 0; }

/* A season on a watched brand's page (2026-10-09). */
.season { margin: 1.4rem 0 0; }
.season h3 { margin: 0 0 0.3rem; }

/* The Klaviyo page's lists: what we read, what we never do, what was asked
   (2026-10-10). */
ul.plain { margin: 0.5rem 0 0.75rem; padding-left: 1.2rem; }
ul.plain li { margin: 0.25rem 0; }
ul.plain li::marker { color: var(--signal); }
ul.plain li .sub-line { display: block; color: var(--ink-2); font-size: 0.875rem; }


/* ---------------------------------------------------------------------
   Starting a workspace, the second sign-in step, and plans and billing
   (designed 2026-10-10). Still no script, but on the two passkey pages.
   --------------------------------------------------------------------- */

/* Read aloud, not shown: a group of choices' name. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The plan's line above the page where something needs doing (billing,
   2026-10-10; under the top bar since the redesign): a trial nearly over, a
   failed payment, read-only. Early access and a trial with days left are
   calm, and said at the sidebar's foot (`a.plan-line`). */
div.plan-line { background: var(--tint); color: var(--ink); border-bottom: 1px solid var(--line); }
div.plan-line p { max-width: var(--page); margin: 0; padding: 0.55rem 2.5rem; font-size: 0.9375rem; }
div.plan-line a { margin-left: 0.25rem; font-weight: 600; white-space: nowrap; }
div.plan-line.soon { font-weight: 560; }
div.plan-line.bad { background: var(--ink); color: var(--bg); }
div.plan-line.off { color: var(--ink-2); }
div.plan-line.bad a { color: inherit; }
@media (max-width: 63.99rem) {
  div.plan-line p { padding-inline: var(--gutter); }
}

/* The page in the middle, a little wider for a form, and its words. */
.signin-card .lead { color: var(--ink-2); font-size: 1.0625rem; }
.signin-card ol.how { max-width: 22rem; margin: 0.5rem auto 0.75rem; text-align: left; }
.working.centred { justify-content: center; }
/* Past the first page of a sign-up, the mark is small and still, so a phone scrolls less. */
.signin-card.compact .signin-mark { width: 4.5rem; margin-bottom: 0.75rem; }
.signin-card.compact .signin-brand { margin-bottom: 1.5rem; }
.help.spaced { margin-top: 1rem; }

/* How far a sign-up has got: three steps, in a line, at the top of the card. */
ol.step-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: dot; color: var(--ink-2); font-size: 0.8125rem; }
ol.step-dots li { display: flex; align-items: center; gap: 0.35rem; counter-increment: dot; }
ol.step-dots li::before { content: counter(dot); display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--line-strong); border-radius: 50%; font-weight: 600; font-variant-numeric: tabular-nums; }
ol.step-dots li:not(:last-child)::after { content: ""; width: 0.9rem; height: 1px; margin-left: 0.15rem; background: var(--line-strong); }
ol.step-dots li.done::before { content: "\2713"; background: var(--good-wash); border-color: var(--good-wash); color: var(--signal); }
ol.step-dots li.now { color: var(--ink); font-weight: 600; }
ol.step-dots li.now::before { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }

/* A choice between two: a card each, its button a radio, no script. */
fieldset.choices { display: grid; gap: 0.75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
form.stacked label.choice, label.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.75rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; font-size: 1rem; font-weight: 400; text-align: left; }
.choice input { grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; margin: 0.25rem 0 0; accent-color: var(--signal); }
.choice b { font-weight: 560; font-size: 1.0625rem; }
.choice span { color: var(--ink-2); font-size: 0.9375rem; }
.choice:hover { border-color: var(--signal); }
.choice:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: color-mix(in srgb, var(--mint) 8%, var(--surface)); }
.choice.off, .choice.off:hover { cursor: not-allowed; border-color: var(--line); background: transparent; }

/* The second step: the square for the app, its key, a code, backup codes. */
/* The square: black on white in either colour scheme, its quiet border drawn
   inside the picture, which has a viewBox and no size of its own, so it fills
   this box; three pixels a module and more, on a phone too. */
.qr { width: min(100%, 14rem); aspect-ratio: 1; margin: 0.5rem auto 1rem; padding: 0.3rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; }
.qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
code.key { display: inline-block; padding: 0.5rem 0.8rem; background: var(--tint); border-radius: 10px; font-size: 1rem; font-weight: 560; letter-spacing: 0.05em; word-spacing: 0.3em; -webkit-user-select: all; user-select: all; }
input.code { max-width: 11rem; font-family: var(--mono); font-size: 1.375rem; letter-spacing: 0.35em; text-indent: 0.35em; text-align: center; }
input.code.wide { max-width: 15rem; font-size: 1.125rem; letter-spacing: 0.15em; text-indent: 0.15em; }
/* A code's box, and its label, in the middle of the card, on a phone too
   (the owner's test run, 2026-10-10: "Centre it, on desktop and phone"). */
.field.code-field { justify-items: center; text-align: center; }
.field.code-field input.code { width: 100%; }
ul.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.5rem; margin: 1rem 0; padding: 1rem 1.25rem; list-style: none; background: var(--tint); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 1rem; font-weight: 560; letter-spacing: 0.04em; text-align: center; }

/* A plan to choose: monthly or yearly, side by side, a card each. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 1rem 0 0; }
.plan { display: grid; gap: 0.4rem; align-content: start; padding: 1.4rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.plan.best { border-color: var(--signal); background: color-mix(in srgb, var(--mint) 8%, var(--surface)); }
.plan h3 { margin: 0; color: var(--ink-2); font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase; }
.plan p { margin: 0; }
/* A price is the site's numeral: light, tight, tabular. */
.price { font-size: 2.25rem; font-weight: 340; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price small { margin-left: 0.2rem; color: var(--ink-2); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; }
.plan .saving { color: var(--signal); font-size: 0.9375rem; font-weight: 600; }
.plan form { margin-top: 0.75rem; }
.notice.test { border-style: dashed; border-color: var(--line-strong); background: var(--tint); color: var(--ink-2); }
.card .table-wrap.flush { margin-top: 0.25rem; }


/* ---------------------------------------------------------------------
   Motion (owner, 2026-10-13, round 3's review): a press answers at once, a
   fold opens and closes and its chevron turns, a page change cross-fades,
   what the reader just asked for eases in, and the top bar stays and turns
   to glass once the page scrolls. CSS alone: no script but passkey.js.

   One easing for all of it (`--ease`): a critically damped spring, with no
   bounce, sampled into linear() from x(t) = 1 - (1 + 7.4t)e^(-7.4t), which
   is 99.5% of the way at its end; and so a press, at 200 ms, is 88% of the
   way at 100 ms. Every motion is inside a reduced-motion guard, so a
   reader who asks for less motion gets the pages as they were; and nothing
   moves on its own but two signs (owner, 2026-10-19: "a calm moving sign
   that we're waiting", "a check mark drawing itself with a soft mint
   glow"; "Animations in CSS only, calm, nothing flashing, and none for
   people who turn motion off"), each with its own timing, at the end of
   this section. Everything else answers the reader, or brings in what they
   just asked for. A page that reloads itself while the box works links
   /still.css, which turns its reloads' page change off. A browser without
   a part simply shows the page as before.
   --------------------------------------------------------------------- */

:root {
  --ease: linear(0, 0.054, 0.17, 0.305, 0.435, 0.552, 0.65, 0.731, 0.795, 0.845, 0.884, 0.913, 0.936, 0.953, 0.965,
                 0.975, 0.981, 0.986, 0.99, 0.993, 1);
  --motion: 250ms;
  --motion-press: 200ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* A fold's height moves to "auto"; an anchor lands below the top bar. */
  :root { interpolate-size: allow-keywords; scroll-padding-top: calc(var(--bar) + 1.5rem); }

  /* A page change: the old page cross-fades into the new, short and
     subtle; the sidebar and the top bar, the same on both, stay put. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: var(--motion);
    animation-timing-function: var(--ease);
  }
  .rail { view-transition-name: rail; }
  .bar { view-transition-name: bar; }

  /* The top bar sticks, and turns to glass as the page scrolls under it,
     all but solid, so nothing passing under it competes with the search
     box: its scroll drives it, never the clock. On a phone, the night
     band's glass, the site's masthead at 98%. */
  .bar { position: sticky; top: 0; }
  @supports (animation-timeline: scroll()) {
    .bar {
      animation: bar-glass auto var(--ease) both;
      animation-timeline: scroll(root block);
      animation-range: 0 3rem;
    }
    @media (max-width: 63.99rem) {
      .bar { animation-name: bar-glass-night; }
    }
  }
  @keyframes bar-glass {
    to {
      background-color: color-mix(in srgb, var(--bg) 92%, transparent);
      -webkit-backdrop-filter: saturate(150%) blur(14px);
      backdrop-filter: saturate(150%) blur(14px);
    }
  }
  @keyframes bar-glass-night {
    to {
      background-color: color-mix(in srgb, var(--night) 98%, transparent);
      -webkit-backdrop-filter: saturate(150%) blur(14px);
      backdrop-filter: saturate(150%) blur(14px);
    }
  }

  /* A press answers at once: a button gives a little, a link dims, a
     fold's header shades. */
  button, .button, .tabs a, .side-nav a, .menu-button, .switcher > summary, .door, .fact {
    transition: transform var(--motion-press) var(--ease), background-color var(--motion) var(--ease),
                border-color var(--motion) var(--ease), color var(--motion) var(--ease);
  }
  button:active, .button:active, .menu-button:active { transform: scale(0.96); }
  a { transition: opacity var(--motion-press) var(--ease); }
  a:active { opacity: 0.55; }
  details.fold > summary, .emails details > summary, .problem details.members > summary, label.choice {
    border-radius: calc(var(--radius) - 1px);
    transition: background-color var(--motion-press) var(--ease);
  }
  details.fold > summary:active, .emails details > summary:active, .problem details.members > summary:active,
  label.choice:active {
    background-color: var(--tint);
  }

  /* A fold opens and closes, and its chevron turns with it. */
  details.fold::details-content, .emails details::details-content, .problem details.members::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--motion) var(--ease), content-visibility var(--motion) var(--ease) allow-discrete;
  }
  details.fold[open]::details-content, .emails details[open]::details-content,
  .problem details.members[open]::details-content { block-size: auto; }
  details.fold > summary::before, .emails details > summary::before, .problem details.members > summary::before {
    transition: transform var(--motion) var(--ease);
  }
  /* The sidebar's two folds, the workspaces and the brands: their chevron
     turns as they open. */
  .spaces > summary svg, .switcher > summary svg { transition: rotate var(--motion) var(--ease); }

  /* What the reader just asked for eases in: the box's answer, a row it
     just made (`fresh`). */
  .fresh { transition: opacity var(--motion) var(--ease), translate var(--motion) var(--ease); }
  @starting-style {
    .fresh { opacity: 0; translate: 0 -0.4rem; }
  }

  /* The Home's rows settle in one after another, once, as it opens (the
     plan the owner approved, 2026-10-22: "the Home's rows settle once"). */
  .settle > * { animation: settle var(--motion) var(--ease) both; }
  .settle > *:nth-child(2) { animation-delay: 50ms; }
  .settle > *:nth-child(3) { animation-delay: 100ms; }
  .settle > *:nth-child(4) { animation-delay: 150ms; }
  .settle > *:nth-child(n+5) { animation-delay: 200ms; }
  @keyframes settle { from { opacity: 0; translate: 0 6px; } }

  /* The drawer slides in from the left, the page dimming behind it, and
     back out as it closes (the plan: "the drawer slides"): on a phone, in a
     browser with popovers. */
  @supports selector(:popover-open) {
    @media (max-width: 63.99rem) {
      .rail {
        translate: -100% 0;
        transition: translate var(--motion) var(--ease), overlay var(--motion) var(--ease) allow-discrete,
                    display var(--motion) var(--ease) allow-discrete;
      }
      .rail:popover-open { translate: 0 0; }
      @starting-style { .rail:popover-open { translate: -100% 0; } }
      .rail::backdrop {
        opacity: 0;
        transition: opacity var(--motion) var(--ease), overlay var(--motion) var(--ease) allow-discrete,
                    display var(--motion) var(--ease) allow-discrete;
      }
      .rail:popover-open::backdrop { opacity: 1; }
      @starting-style { .rail:popover-open::backdrop { opacity: 0; } }
    }
  }
}

/* The two signs that move on their own (owner, 2026-10-19), each calm and
   each with its own timing. The waiting sign, while we wait for a brand's
   first email, its account's first read, or the box: a faint ring grows
   from its dot and fades, once every 3 seconds, never flashing. Its page
   reloads every 3 or 15 seconds, a whole number of rings, so each reload
   meets the ring as it starts, all but unseen. "You're all set"'s check
   mark draws itself once, as its glow settles; that screen never reloads. */
@media (prefers-reduced-motion: no-preference) {
  .waiting-sign, .status.wait.moving::before { animation: waiting-ripple 3s var(--ease) infinite; }
  .all-set-mark { animation: check-glow 1.4s var(--ease) both; }
  .all-set-mark .tick { animation: check-draw 0.8s var(--ease) 0.3s both; }
}
@keyframes waiting-ripple {
  0% { box-shadow: 0 0 0 0.3em var(--good-wash), 0 0 0 0.3em transparent; }
  12% { box-shadow: 0 0 0 0.3em var(--good-wash), 0 0 0 0.45em color-mix(in srgb, var(--signal) 28%, transparent); }
  100% { box-shadow: 0 0 0 0.3em var(--good-wash), 0 0 0 1.15em transparent; }
}
@keyframes check-draw { from { stroke-dashoffset: 1; } }
@keyframes check-glow { from { transform: scale(0.86); box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } }

/* ---------------------------------------------------------------------
   The green light (2026-10-20): a brand's Tests page, each test's page,
   and the page a client opens from a share link.
   --------------------------------------------------------------------- */

.tests-card { margin: 0 0 1.75rem; max-width: 46rem; }
.tests-card h2 { margin: 0 0 0.5rem; }
.tests-card p:last-child { margin-bottom: 0; }
.test-address { margin: 0 0 2rem; max-width: 46rem; }
/* The test address large, in its box, one click selecting it (2026-10-21);
   then how to send a test to it, click by click: the first step's two ways
   in side by side where there is room, each a small card, their clicks
   lettered under the step's number; then the tip, on the tint. */
.test-address .address-box.big { margin: 0.25rem 0 0.4rem; }
.test-address .select-note { margin: 0 0 1.25rem; }
.test-address .how-title, .signin-panel .how-title { margin: 1.5rem 0 0.25rem; font-size: 1.125rem; font-weight: 500; }
ol.how.steps > li > .how-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 0.6rem 0 0.35rem; }
.how-way { padding: 0.8rem 0.95rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.how-way-title { margin: 0 0 0.35rem; font-size: 0.9375rem; font-weight: 560; }
ol.how.clicks { list-style: lower-alpha; margin: 0; padding-left: 1.3rem; gap: 0.35rem; font-size: 0.9375rem; }
ol.how.clicks li::marker { color: var(--ink-2); }
.how .button-name { white-space: nowrap; }
.tip { margin: 0.25rem 0 1rem; padding: 0.75rem 1rem; background: var(--tint); border-radius: var(--radius-sm); }
.test-list h2 { margin: 0 0 0.9rem; }
.tests { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.test-row .card-head { margin-bottom: 0.35rem; }
.test-row .card-head h3 { font-size: 1.125rem; font-weight: 500; }
.test-row .sub-line { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
/* Test emails, for every brand (the redesign, step 6): a card a brand, its
   address, then its newest tests as Emails lists emails. */
.test-brand { container-type: inline-size; }
.test-brand .mail { margin: 1rem 0 0; }
.test-brand > p.small:last-child { margin: 0.9rem 0 0; }
.test-brand > p.small:last-child a { font-weight: 560; }
.test-subject { margin-bottom: 0.4rem; }
p.meta { margin: 0 0 1rem; color: var(--ink-2); font-size: 0.9375rem; }
.share-box { margin: 1.75rem 0; max-width: 46rem; }
.share-box input.copy { margin: 0.25rem 0 0.5rem; }

/* The share page: under the agency's name, and nothing of ours. No top bar,
   no mark: the site's card on the page's own ground, the agency's logo on
   white whatever the scheme, as a logo made for a white page needs. */
main.share { width: min(100% - 2 * var(--gutter), 44rem); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) 0 3rem; }
.share-head { margin: 0 0 1.25rem; }
.share-logo-box { display: inline-block; padding: 0.6rem 0.85rem; background: #FFFFFF; border-radius: var(--radius-sm); }
.share-logo { display: block; max-width: 12.5rem; max-height: 3rem; width: auto; height: auto; }
.share-agency { margin: 0; font-weight: 600; font-size: 1.125rem; }
.share-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); }
.share-card h1 { margin-top: 0; }
.share-card .eyebrow { margin: 0 0 0.35rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.share-status { margin: 0 0 1rem; }
.subject-line { margin: 0 0 1rem; }
.subject-line .label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.share-card .problems { margin: 1rem 0 1.25rem; }
.share-foot { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   The free email grader (2026-10-20): on the night band as signing in is,
   its card wide where it shows a test address or a grade. A grade is one
   letter in a ring: mint for A and B, amber for the rest, never red (owner,
   2026-10-14: "Use one warm colour, amber, for problems only").
   --------------------------------------------------------------------- */

.signin-card.wide { width: min(100%, 44rem); }
.signin-card.wide .signin-panel { padding: clamp(1.4rem, 4vw, 2.25rem); }
.signin-panel .left, .signin-panel .grade-head, .signin-panel .answer-list, .signin-panel .folds { text-align: left; }
.signin-panel .address-box.big { margin: 1rem 0 1.25rem; }
.signin-panel ol.how.left { max-width: none; margin: 0.5rem 0 0.9rem; }
.signin-panel .working.left { justify-content: flex-start; margin: 1.1rem 0 0.4rem; }
.grade-head { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1.4rem; }
.grade-head h1 { margin: 0.1rem 0 0.35rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.grade-head .eyebrow { margin: 0; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.grade-head .meta { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.grade-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}
.grade-mark.ok { background: var(--good-wash); color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.grade-mark.bad { background: var(--night); color: var(--night-ink); box-shadow: 0 0 0 3px var(--amber); }
.signin-panel .subject-line { margin: 0 0 1.5rem; }
.signin-panel .answer-list h2 { margin: 0 0 0.2rem; }
.signin-panel .answer-list .sub-line { margin: 0 0 0.9rem; color: var(--ink-2); }
.signin-panel .answer-list .fold { margin: 0.25rem 0 0; }
.signin-panel .answer-list.calm { margin-top: 1.75rem; }
.signin-panel .folds { margin: 1.75rem 0 0; }
.signin-panel .note { text-align: left; margin: 1.25rem 0 0; }
.signin-panel > details.kept { margin-top: 1.25rem; }
.kept ul.plain { font-size: 0.9375rem; }
/* A detail a grade or a shared test hides (owner, 2026-10-20: "show them as a
   clearly hidden chip, like 'name hidden', never as '[name]'"): a small
   dashed pill in the caption's ink, so it can't be read as the brand's own
   words, nor as a merge tag that didn't fill in. */
.hidden-word {
  display: inline-block;
  padding: 0 0.55em;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8em;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.06em;
}
.early {
  margin: 1.75rem 0 1.25rem;
  padding: 1.25rem 1.35rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.early h2 { margin: 0 0 0.45rem; font-size: 1.25rem; }
.early p { margin: 0 0 0.6rem; }
.early > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .grade-head { gap: 0.9rem; align-items: flex-start; }
  .grade-mark { width: 4rem; height: 4rem; font-size: 2rem; }
  .early .button { width: 100%; }
}

/* ---------------------------------------------------------------------
   The redesign's pages (2026-10-22): a page's head, the Home's queue and
   its doors, To fix, a brand's tabs and its Overview, and search's answers.
   --------------------------------------------------------------------- */

.page-head .kicker { margin: 0 0 0.4rem; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; }
.page-head h1 { margin: 0; }
.page-head .lead { margin: 0.45rem 0 0; color: var(--ink-2); font-size: 1.0625rem; max-width: 46rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.25rem 1rem; margin: 0 0 0.85rem; }
.section-head h2 { margin: 0; font-size: 1.25rem; }
.section-head p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.redesign-section { margin: 2.25rem 0 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 560; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { width: 1rem; height: 1rem; flex: none; }
.button svg { width: 1.05rem; height: 1.05rem; flex: none; }
.button.quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.button.quiet:hover { color: var(--ink); background: var(--tint); }
.brand-tag {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.brand-tag::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--line-strong); flex: none; }
mark { background: var(--mark-bg); color: inherit; border-radius: 4px; padding: 0 0.12em; }

/* Home: the first thing that needs you, on the night band ("Start here"). */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 0.65rem; margin: 1.75rem 0 0;
  padding: 1.6rem 1.75rem 1.65rem; border-radius: 24px;
  background: var(--night); color: var(--night-ink); border: 1px solid var(--night-line);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -8rem; top: -10rem;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.hero :focus-visible { outline-color: var(--mint); }
.hero p { margin: 0; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; font-weight: 500; color: var(--night-ink-2); }
.hero-kicker::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber-night);
  box-shadow: 0 0 0 4px rgb(245 181 68 / 0.18); }
.hero-kicker.calm::before { background: var(--mint); box-shadow: 0 0 0 4px rgb(69 224 164 / 0.18); }
.hero .brand-tag { color: var(--night-ink-2); }
.hero .brand-tag::before { background: var(--amber-night); border-radius: 50%; }
.hero h2 { margin: 0; font-size: 1.65rem; line-height: 1.22; font-weight: 500; max-width: 34ch; text-wrap: balance; }
.hero .where, .hero .todo { color: var(--night-ink-2); font-size: 1rem; max-width: 62ch; }
.hero .todo b { color: var(--night-ink); font-weight: 600; }
.hero .when-tag { font-size: 0.875rem; font-weight: 600; color: var(--amber-night); }
.hero-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
.hero .button { background: var(--mint); color: var(--mint-ink); }
.hero .button:hover { background: var(--mint-2); }
.hero .button.quiet { background: transparent; color: var(--night-ink-2); }
.hero .button.quiet:hover { background: var(--glass-2); color: var(--night-ink); }
.hero .steps { list-style: none; counter-reset: step; display: grid; gap: 0.7rem; margin: 0.35rem 0 0.25rem; padding: 0; max-width: 40rem; }
.hero .steps li { counter-increment: step; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0 0.8rem;
  color: var(--night-ink-2); line-height: 1.45; }
.hero .steps li::before {
  content: counter(step); grid-row: 1 / 3; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--mint); color: var(--mint); font-size: 0.85rem; font-weight: 600;
}
.hero .steps b { display: block; color: var(--night-ink); font-weight: 500; }

/* Then: the rest of the queue, compact rows in one card. */
.then { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; }
.then > li { border-top: 1px solid var(--line); }
.then > li:first-child { border-top: 0; }
.then a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.1rem 0.9rem; align-items: center;
  padding: 0.85rem 1.1rem; color: var(--ink); text-decoration: none;
}
.then a:hover { background: var(--tint); }
.then .n { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; grid-row: 1 / 3;
  border: 2px solid var(--amber); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.then .n.calm { border-style: dashed; border-color: var(--ink-3); }
.then .what { font-weight: 500; line-height: 1.4; }
.then .where { grid-column: 2; font-size: 0.875rem; color: var(--ink-2); }
.then .where b { color: var(--amber-ink); font-weight: 600; }
.then .go { grid-column: 3; grid-row: 1 / 3; color: var(--ink-2); }
.then .go svg { width: 1.1rem; height: 1.1rem; }
.more-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin: 0.85rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }

/* Where to go next: four doors, each with the one number that matters. */
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.door {
  display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
  padding: 1rem 1.1rem 1.05rem; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.door:hover { border-color: var(--line-strong); }
.door-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.door-head svg { width: 1.1rem; height: 1.1rem; color: var(--ink-2); flex: none; }
.door .big { font-size: 2rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.door .big.bad { color: var(--amber-ink); }
.door .said { font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; text-wrap: pretty; }

/* To fix and a brand's pages: views of one list, as links. */
.views { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; margin: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.views a {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.1rem 0.7rem;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.views a:hover { color: var(--ink); }
.views a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.brand-block { margin: 0 0 1.75rem; }
.brand-block > .section-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.brand-block > .section-head h2 a { color: var(--ink); text-decoration: none; }
.brand-block > .section-head h2 a:hover { color: var(--signal); text-decoration: underline; }
.rule-note { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* A brand's pages: its name and status, then its tabs, each a page. */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.brand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; }
.brand-head h1 { margin: 0; overflow-wrap: anywhere; }
.brand-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: 0.55rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.brand-meta span { white-space: nowrap; }
nav.brand-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1.25rem 0 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
nav.brand-tabs a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
}
nav.brand-tabs a:hover { background: var(--tint); color: var(--ink); }
nav.brand-tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); }
nav.brand-tabs a[aria-current="page"] .count { background: rgb(255 255 255 / 0.18); color: inherit; }

/* At a glance: four facts, each a door to its tab. */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.fact {
  display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  padding: 1rem 1.1rem; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.fact:hover { border-color: var(--line-strong); }
.fact-name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.fact-name svg { width: 1rem; height: 1rem; flex: none; }
.fact .value { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.fact .value.bad { color: var(--amber-ink); }
.fact .said { font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; text-wrap: pretty; }

/* How it sends: one row a check, its name, what we saw, and its pill. */
.checklist { list-style: none; margin: 0; padding: 0.25rem 1.35rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.checklist li {
  display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto; gap: 0.15rem 1rem; align-items: center;
  padding: 0.75rem 0; border-top: 1px solid var(--line);
}
.checklist li:first-child { border-top: 0; }
.checklist .check-name { font-weight: 500; }
.checklist .said { color: var(--ink-2); font-size: 0.9375rem; }
/* A record's own words, under what we saw: a signature's key is one long
   word, so it breaks anywhere rather than run past a phone's screen. */
.checklist .said .sub-line { display: block; margin-top: 0.15rem; overflow-wrap: anywhere; }

/* Emails: one row each, newest first. */
.mail { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; }
.mail > li { border-top: 1px solid var(--line); }
.mail > li:first-child { border-top: 0; }
.mail a {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center;
  padding: 0.8rem 1.15rem; color: var(--ink); text-decoration: none;
}
.mail a:hover { background: var(--tint); }
.mail .date { grid-column: 1; grid-row: 1 / 3; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mail .subj { grid-column: 2; grid-row: 1; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.mail .kind { grid-column: 2; grid-row: 2; font-size: 0.875rem; color: var(--ink-2); }
.mail .status { grid-column: 3; grid-row: 1 / 3; }

/* Search: what can be narrowed to, the best match, then each group. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0 0; }
.chips a {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem;
  padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500;
  white-space: nowrap;
}
.chips a:hover { background: var(--tint); }
.chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chips a[aria-current] .count { background: rgb(255 255 255 / 0.18); color: inherit; }
a.best {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center;
  margin: 1.5rem 0 0; padding: 1.15rem 1.3rem; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
a.best:hover { border-color: var(--signal); }
a.best .kind-icon { grid-row: 1 / 3; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint); color: var(--signal); }
a.best .kind-icon svg { width: 1.25rem; height: 1.25rem; }
a.best .title { font-size: 1.125rem; font-weight: 500; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
a.best .sub { grid-column: 2; font-size: 0.875rem; color: var(--ink-2); }
a.best .status { grid-column: 3; grid-row: 1 / 3; }
.result-group { margin: 1.75rem 0 0; }
.result-group h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 1.0625rem; font-weight: 560; }
.results { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.results.card { padding: 0; }
.results > li { border-top: 1px solid var(--line); }
.results > li:first-child { border-top: 0; }
.results a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center;
  padding: 0.8rem 1.15rem; color: var(--ink); text-decoration: none;
}
.results a:hover { background: var(--tint); }
.results .title { font-weight: 500; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.results .sub { grid-column: 1; font-size: 0.875rem; color: var(--ink-2); }
.results .status, .results .go { grid-column: 2; grid-row: 1 / 3; }
.results .go { color: var(--ink-2); }
.results .go svg { width: 1.05rem; height: 1.05rem; }
.found-tip { margin: 1.75rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }

@media (max-width: 63.99rem) {
  .doors, .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .hero { padding: 1.3rem 1.2rem 1.35rem; border-radius: 20px; }
  .hero h2 { font-size: 1.35rem; }
  .then a { padding: 0.8rem 0.95rem; gap: 0.1rem 0.75rem; }
  .doors, .facts-row { gap: 0.6rem; }
  .door { padding: 0.85rem 0.9rem 0.9rem; }
  .door .big { font-size: 1.7rem; }
  .door .said, .fact .said { font-size: 0.8125rem; }
  .fact { padding: 0.85rem 0.9rem; }
  .fact .value { font-size: 1rem; }
  .checklist { padding: 0.25rem 1rem; }
  .checklist li { grid-template-columns: minmax(0, 1fr) auto; }
  .checklist .said { grid-column: 1 / 3; grid-row: 2; font-size: 0.875rem; }
  nav.brand-tabs { gap: 0.15rem; }
  nav.brand-tabs a { padding: 0.36rem 0.62rem; font-size: 0.875rem; }
  .views { gap: 0.1rem 1rem; }
  .views a { font-size: 0.875rem; }
  .mail a { grid-template-columns: minmax(0, 1fr) auto; padding: 0.8rem 1rem; }
  .mail .date { grid-column: 1; grid-row: 1; }
  .mail .subj { grid-column: 1; grid-row: 2; }
  .mail .kind { grid-column: 1; grid-row: 3; }
  .mail .status { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  a.best { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; }
  a.best .status { grid-column: 2; grid-row: auto; justify-self: start; }
  .results a { padding: 0.75rem 1rem; }
}