:root {
  --bg: #f7f8f6;
  --surface: #ffffff;
  --text: #1c2521;
  --muted: #5a6660;
  --line: #d9dfda;
  --accent: #1f6f5c;
  --accent-text: #ffffff;
  --accent-soft: #e3f0ec;
  --high: #b3261e;
  --high-soft: #fbeae8;
  --medium: #8a5a00;
  --medium-soft: #fbf1dc;
  --low: #3d5a80;
  --low-soft: #e6edf6;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131816;
    --surface: #1b221f;
    --text: #e8ece9;
    --muted: #9aa6a0;
    --line: #2d3733;
    --accent: #5cc3a6;
    --accent-text: #0d1512;
    --accent-soft: #1d2f29;
    --high: #f2a29b;
    --high-soft: #3a1f1c;
    --medium: #e8bf6a;
    --medium-soft: #372c14;
    --low: #9db8dc;
    --low-soft: #1e2a3a;
  }
}

* { box-sizing: border-box; }

/* Without this, any rule that sets display (like .status) beats the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
/* Safari fills the space beside a selection that runs over several lines out to the edges
   of the nearest "selection root", which is the page body unless something closer is, so
   selected text was highlighted out to both edges of the window. A transform makes each
   column a root (WebKit's isSelectionRoot) without moving or clipping anything. It also
   pins position: fixed to the column rather than the screen, so anything fixed to the
   screen (the save bar) sits outside every .wrap. Chrome and Firefox don't fill these
   gaps at all. */
.wrap { transform: translate(0); }

.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { margin: 0; padding: 14px 0; font-weight: 700; font-size: 1.2rem; color: var(--accent); letter-spacing: -0.01em; }
a.brand { display: inline-block; text-decoration: none; }
/* The home page's header also holds the intro; a thin line sets the name and links apart
   from it, as the other pages' header line does. */
.site-bar { border-bottom: 1px solid var(--line); }

/* -- Pages beside the review form (pages/, e.g. /for-advisers) -------------- */
/* The way back to the form stays in reach at the top, on a phone as much as anywhere. */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-link { color: var(--accent); font-weight: 600; text-decoration: none; padding: 10px 0; }
.page h2 { margin-top: 2rem; }
.page ol { padding-left: 1.25rem; }
.crumbs { margin: 1.25rem 0 0; font-size: 0.9rem; }
.crumbs + h1 { margin-top: 0.25rem; }
.page .guide-list { list-style: none; padding: 0; }
.guide-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.guide-list a { font-weight: 600; font-size: 1.05rem; }
.guide-list p { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }
/* The email form on /sign-in and the expired-link page. */
.signin-form { margin: 1.25rem 0; }
.signin-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.signin-form input, .signin-form button[type='submit'] {
  display: block;
  width: 100%;
  max-width: 24rem;
}
.signin-form input {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 12px;
  /* 16px or more, or iOS Safari zooms the page when the field is focused. */
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.guide-meta { margin-top: 2rem; font-size: 0.88rem; color: var(--muted); }
/* The one thing each guide asks the reader to do. */
.cta { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin: 2rem 0; }
.button-link, .header-action {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap;
}
.page ul { padding-left: 1.25rem; }
.page li { margin-bottom: 0.4rem; }
.prices { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; background: var(--surface); }
.prices th, .prices td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prices th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.prices td:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

h1 { font-size: 1.75rem; line-height: 1.2; margin: 1.5rem 0 0.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.25rem; }
p { margin: 0 0 0.75rem; }
.lede { font-size: 1.05rem; color: var(--muted); }

/* The intro sits in the header, above the prices, so it is tighter than a page's first h1. */
.site-header .intro { padding-bottom: 1rem; }
.site-header .intro h1 { margin-top: 1.25rem; }
.site-header .intro .lede { margin-bottom: 0.5rem; }
/* Signed in, a returning customer knows what Flatwise does: the headline stays, smaller,
   and the blurb and the closed example step aside, so the balance and the form come up
   the screen. An example opened from a link (/#example) still shows. */
.signed-in .site-header .intro h1 { font-size: 1.35rem; margin-bottom: 0; }
.signed-in .intro .lede,
.signed-in .intro .sample:not([open]) { display: none; }

/* The example review: one line when closed, the real review's cards when open. */
.sample > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  padding: 10px 0;
  min-height: 44px;
}
.sample-note { font-size: 0.9rem; color: var(--muted); margin: 0.25rem 0 0; }
.sample .flag { margin: 0.75rem 0; background: var(--bg); }
/* A cut-off card after each full one says "and more like this". The mask fades the
   border and background too, so it reads as continuing, not as a short card. */
.sample .flag.partial {
  max-height: 8.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

.card, .flag, .summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 1.25rem 0;
}

/* One row, full width: the old pill radios wrapped on a phone. */
.modes {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  min-height: 44px;
  min-inline-size: 0;
  overflow: hidden;
}
.modes label {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.modes label + label { border-left: 1px solid var(--line); }
.modes label:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.modes label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.modes:has(input:disabled) label { opacity: 0.45; cursor: not-allowed; }

.field-label { display: block; font-weight: 600; margin-bottom: 6px; }

textarea {
  width: 100%;
  font: inherit;
  /* 16px or more, or iOS Safari zooms the page when the field is focused. */
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  min-height: 9em;
}

/* Clipped, not display:none: iOS Safari will not open the camera or file
   sheet from a display:none file input. The visible control is the label. */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
}
#file-input:focus-visible + .file-button {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
#file-input:disabled + .file-button {
  opacity: 0.45;
  cursor: not-allowed;
}

.hint { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }

.file-list { list-style: none; padding: 0; margin: 8px 0 0; }
.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.file-list button.link {
  flex: none;
  min-height: 44px;
  padding: 10px 12px;
}

.legal {
  margin: 1.25rem 0;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.92rem;
}
.legal p { color: var(--muted); }
/* The privacy statement's lead-ins, in full-strength text so it can be scanned by topic. */
.legal p strong { color: var(--text); }
.ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 600; cursor: pointer; }
.ack input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* Same wording, less padding, so the checkbox is fewer swipes away on a phone. */
@media (max-width: 639px) {
  .legal { margin: 1rem 0; padding: 12px; }
  .legal p { margin-bottom: 0.55rem; }
  .legal h2 { margin-bottom: 0.35rem; }
  .legal h3 { margin: 0.7rem 0 0.15rem; }
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  padding: 12px 20px;
  font-weight: 600;
  min-height: 44px;
}
button[type='submit'] { width: 100%; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--accent); }
button.link { background: none; border: 0; color: var(--accent); padding: 4px 8px; min-height: 0; font-weight: 500; text-decoration: underline; }

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

.submit-note { margin: 12px 0 0; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; font-size: 0.95rem; }
.restored { margin: 0 0 1rem; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; font-size: 0.92rem; }

.error { color: var(--high); background: var(--high-soft); padding: 10px 12px; border-radius: 8px; margin: 12px 0 0; }

.status { color: var(--muted); padding: 8px 4px; }
.status-head { display: flex; gap: 12px; align-items: center; margin: 0; }
/* The review's steps (app.js): done, the one under way, and those still to come. */
.status-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.status-steps li { position: relative; padding: 4px 0 4px 28px; }
.status-steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(4px + 0.45em);
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.status-steps .current { color: var(--text); font-weight: 600; }
.status-steps .current::before { border-color: var(--accent); background: var(--accent); }
/* A tick, drawn with borders so it looks the same in every font. */
.status-steps .done::before {
  left: 7px;
  top: calc(4px + 0.2em);
  width: 6px;
  height: 12px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: rotate(45deg);
}
.step-detail { display: block; margin-top: 2px; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.spinner {
  width: 20px; height: 20px; flex: none;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.summary h2 { margin-bottom: 0.4rem; }
.flag { border-left-width: 5px; }
.flag.high { border-left-color: var(--high); }
.flag.medium { border-left-color: var(--medium); }
.flag.low { border-left-color: var(--low); }

.flag-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.badge { font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.badge.high { background: var(--high-soft); color: var(--high); }
.badge.medium { background: var(--medium-soft); color: var(--medium); }
.badge.low { background: var(--low-soft); color: var(--low); }
.ref { font-weight: 600; }

blockquote {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.unmatched { color: var(--muted); font-size: 0.88rem; font-style: italic; }

.flag dl { margin: 0; }
.flag dt { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-top: 10px; }
.flag dd { margin: 2px 0 0; }
.act { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

.results-foot { color: var(--muted); font-size: 0.9rem; }
.results-foot .actions { margin-top: 12px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 20px 0 40px; color: var(--muted); font-size: 0.9rem; }
.site-footer .feedback { color: var(--text); }
/* Lead-ins ("Got feedback?", "Private by design:") in full-strength text, like the privacy statement's. */
.site-footer strong { color: var(--text); }
a { color: var(--accent); }

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

@media (min-width: 640px) {
  h1 { font-size: 2.1rem; }
  button[type='submit'] { width: auto; }
  textarea { min-height: 18em; }
}

/* -- Billing bar -------------------------------------------------------- */
/* A card in the page's column, lined up with the form below it, rather than a
   band across the whole window: on a laptop a full-width band looked like a site
   banner. The outer box takes the column's gutter; the inner one is the card. */
.billing-bar { max-width: 44rem; margin: 1.25rem auto 0; padding: 0 16px; }
.billing-bar .wrap {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.billing-lede, .billing-status, .billing-keep-note { margin: 0 0 8px; font-size: 0.92rem; color: var(--muted); }
/* "Why there's no review history", for a signed-in customer: one line until opened. */
.billing-why { margin: -4px 0 4px; font-size: 0.92rem; }
.billing-why summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; }
.billing-why p { margin: 0 0 8px; color: var(--muted); }
/* Signed in: the balance leads, the account under it. */
.billing-status { display: flex; flex-direction: column; gap: 2px; }
.billing-balance { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.billing-account { font-size: 0.88rem; overflow-wrap: anywhere; }
.billing-warning { color: var(--high); font-weight: 600; }
.billing-fineprint { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); }
.billing-notice { margin: 0 0 8px; font-size: 0.92rem; font-weight: 600; color: var(--accent); }
.billing-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Three equal columns rather than wrapping pills: at $25/mo the three one-line pills
   no longer fit a phone, and the last one dropped onto a row of its own. */
/* The empty fourth column takes the spare width on a wide screen, so the plans stay
   8rem each and the fine print below can still span the whole bar. */
.billing-buy { display: grid; grid-template-columns: repeat(3, minmax(0, 8rem)) 1fr; gap: 8px; width: 100%; }
.billing-buy .billing-fineprint { grid-column: 1 / -1; }
.billing-actions .secondary,
.billing-actions .link,
#billing-portal-link {
  font: inherit;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  min-height: 44px;
}
.billing-actions .secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.billing-actions .link, #billing-portal-link {
  background: transparent;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  /* No left padding, so the link lines up with the text above it. */
  padding: 10px 12px 10px 0;
}
.billing-email-row .link { min-height: 44px; }
.billing-actions .plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 14px;
  padding: 6px 4px;
  line-height: 1.15;
  white-space: nowrap;
}
.billing-actions .plan:hover { border-color: var(--accent); }
.plan-name { font-size: 0.8rem; color: var(--muted); }
.plan-price { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 0.72em; font-weight: 500; color: var(--muted); }

/* The keep-note shows on a phone too (decided 2026-10-02), though the note under the
   submit button says it again: that one is four screens down, past the point where
   people have decided, and this one is read before paying. */
@media (max-width: 639px) {
  .billing-bar { margin-top: 1rem; }
  .billing-bar .wrap { padding: 10px 12px; }
  .billing-lede, .billing-status { margin: 0 0 6px; }
}

/* -- Saving a review ---------------------------------------------------------- */
.save-panel {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 1.25rem 0;
}
.save-heading { margin-bottom: 0.25rem; }
.save-panel p { margin-bottom: 0.75rem; font-size: 0.95rem; }
/* Done: calmer, so the panel reads as finished rather than still asking. */
.save-panel.saved { background: var(--surface); border-color: var(--line); }

/* The end of a review: the same choices under their own heading. */
.save-end { margin: 1.25rem 0 0.75rem; color: var(--text); font-size: 1rem; }
.save-end .save-heading { font-size: 1.05rem; }

/* One main button (full width on a phone), and the other ways beside it, smaller. */
.save-main { width: 100%; }
.save-others { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 8px; }
.save-others button {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.92rem;
  padding: 10px 8px;
  min-height: 44px;
  white-space: nowrap;
}
/* Once it's saved, the main button stops asking for attention. */
.saved .save-main { background: transparent; color: var(--accent); }
.save-status { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--muted); min-height: 1.2em; }
.save-status:empty { display: none; }
@media (min-width: 640px) {
  .save-main { width: auto; }
  .save-others button { flex: 0 1 auto; padding: 10px 14px; }
}
/* A link, so it sits below the save buttons in weight; still a full-size tap target. */
.results-foot .start-over { min-height: 44px; padding: 10px 0; font-size: 1rem; }

/* "Not saved yet" (app.js): on a phone, pinned to the bottom of the screen while an unsaved
   review's save buttons are out of view. A laptop's browser asks before the tab closes,
   so it's phones only. */
.save-bar { display: none; }
@media (max-width: 639px) {
  .save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
    font-weight: 600;
    animation: save-bar-in 0.2s ease-out;
  }
  .save-bar button { flex: none; }
  /* Room at the foot of the page while a review could need the bar (app.js), so the bar
     never covers the last of it. */
  .save-bar-room body { padding-bottom: 76px; }
}
@keyframes save-bar-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .save-bar { animation: none; } }

.discard-warning {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--high-soft);
  border: 1px solid var(--high);
  border-radius: 8px;
  color: var(--text);
}
.discard-warning p { margin-bottom: 0.5rem; }
.discard-warning .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
button.danger { background: transparent; color: var(--high); border-color: var(--high); }

.print-only { display: none; }

/* Saving as PDF prints this page, so print only the review, in light colours
   whatever the screen theme (a dark-mode print would be pale text on white). */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --text: #111; --muted: #444; --line: #bbb;
    --accent: #1f6f5c; --accent-soft: #fff;
    --high: #b3261e; --high-soft: #fff; --medium: #8a5a00; --medium-soft: #fff; --low: #3d5a80; --low-soft: #fff;
  }
  body { font-size: 12pt; }
  .wrap { transform: none; }
  .site-header, .billing-bar, .site-footer, .save-panel, .save-end, .save-actions, .save-bar,
  .discard-warning, .results-foot .actions, main > *:not(#results) { display: none !important; }
  .print-only { display: block; }
  .print-only h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
  .summary, .flag { break-inside: avoid; border-color: #999; margin: 0.75rem 0; }
  .flag { border-left-width: 4px; }
  a { color: inherit; }
}

.plain-review { width: 100%; font: inherit; font-size: 0.9rem; }

/* Email address form in the billing bar (replaces a browser dialog). */
.billing-email-form { margin: 12px 0 4px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.billing-email-title { margin: 0 0 6px; font-weight: 600; font-size: 0.95rem; }
.billing-email-form label { display: block; font-size: 0.85rem; font-weight: 600; }
.billing-email-form .hint { margin: 2px 0 8px; }
.billing-email-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.billing-email-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  /* 16px or more, or iOS Safari zooms the page when the field is focused. */
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.billing-email-form .error { margin-top: 8px; }

/* In the sign-in form's place once a link is on its way: outlined in the accent so it
   reads as the answer to what was just pressed. Focused for screen readers, but it isn't
   a control, so no focus ring. */
.billing-sent { border-color: var(--accent); }
.billing-sent:focus { outline: none; }
.billing-sent .billing-email-title { font-size: 1.05rem; }
.billing-sent p { margin: 0 0 6px; font-size: 0.95rem; }
.billing-sent p:last-child { margin-bottom: 0; }
.billing-sent .link { padding: 10px 0; min-height: 44px; font-size: inherit; }

/* The note about the safety copy kept in this browser, inside the save panel. */
.save-panel .safety-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); }
.safety-note button.link { padding: 0 2px; min-height: 0; font-size: inherit; }