/* Jackdaw Book — shared styles
   Palette drawn from the jackdaw itself: blue-black plumage, a silver-grey hood,
   and that pale ice-blue eye, which is the one thing everyone remembers. */

:root {
  --ink: #14141a;
  --slate: #414652;
  --muted: #676d78;
  --paper: #e9eaea;
  --card: #ffffff;
  --line: #cfd2d3;
  --iris: #a8cdde;
  --steel: #2f5d78;
  --hood: #b9c1c6;
  --clay: #8c4a3f;
  --brand-teal: #034255; /* sampled from the jackdawbook_logo1.png background */
  --brand-cream: #f4f0e6; /* sampled from the logo's wordmark */
  --fire-red: #ce2029; /* fire engine red, for the erase/clear-everything buttons */
  --fire-red-dark: #b71c22;

  --measure: 66ch;
  --radius: 10px;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 3rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); margin-top: 2rem; }
h3 { font-size: var(--step-1); margin-top: 1.5rem; }

p, li { max-width: var(--measure); }
a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.wrap { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }

/* ---------- masthead ---------- */

.masthead {
  background: var(--brand-teal);
  color: var(--brand-cream);
  padding: 0.9rem 0;
}
.masthead a { color: var(--brand-cream); }

.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--step-1); font-weight: 700; text-decoration: none;
}
.brand-logo { display: block; height: 36px; width: auto; border-radius: 6px; }
.brand-word {
  font-family: "Bricolage Grotesque", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--brand-cream); font-size: 1rem; white-space: nowrap;
}

.nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem;
  margin: 0; padding: 0; font-size: var(--step--1);
}
.nav li { max-width: none; }
.nav a { text-decoration: none; padding: 0.25rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.nav a::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.35em;
  vertical-align: -3px; border-radius: 50%;
  background: url("images/jackdawbook_logo3.png") center 32% / 260%;
}
.nav a:hover { border-bottom-color: var(--iris); }
.nav a[aria-current="page"] { border-bottom-color: var(--iris); color: var(--iris); }

.menu-toggle { display: none; }

@media (max-width: 860px) {
  .brandbar { flex-direction: column; align-items: flex-start; }
  .nav ul { gap: 0.1rem 0.9rem; }
}

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

main { padding: 2.5rem 0 4rem; }

.page-head { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.page-head h1 { font-size: var(--step-3); margin-bottom: 0.25rem; }
.page-head p { color: var(--muted); margin: 0; }

.prose h2 { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

.note {
  background: var(--card); border-left: 4px solid var(--iris);
  padding: 0.9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0; max-width: var(--measure);
}
.note p { margin: 0; }

.stamp {
  display: inline-block; font-size: var(--step--1); color: var(--muted);
  border: 1px dashed var(--line); border-radius: 100px; padding: 0.2rem 0.7rem;
}

/* ---------- hero ---------- */

.hero { padding: 2rem 0 2.5rem; }

/* full width of the screen, with a true 1in margin either side — wider
   than the site's usual .wrap column on purpose, for both the logo and
   the diagram beneath it */
.hero-logo, .hero-diagram-wrap { width: 100%; box-sizing: border-box; padding-inline: 1in; }
.hero-logo { margin-bottom: 2rem; }
.hero-logo img { display: block; width: 100%; height: auto; }
/* desktop only: a quarter of the full-bleed size, centred; mobile keeps the
   full-width treatment above */
@media (min-width: 701px) { .hero-logo img { width: 25%; margin-inline: auto; } }
@media (max-width: 700px) { .hero-logo, .hero-diagram-wrap { padding-inline: 1.25rem; } }

.hero-copy { text-align: center; margin-bottom: 2.5rem; }
.hero-copy .btn-row { justify-content: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.hero .lede { font-size: var(--step-1); color: var(--slate); max-width: 46rem; margin-inline: auto; }

.mascot-card {
  display: inline-flex; padding: 0.6rem; background: #fbfbf9;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mascot-card img { display: block; width: 160px; height: auto; border-radius: 6px; }
.mascot-card.lg img { width: 220px; }

.btn {
  display: inline-flex; align-items: center;
  font-family: "Bricolage Grotesque", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; cursor: pointer;
  background: var(--brand-teal); color: #fff; border: 2px solid var(--brand-teal);
  padding: 0.65rem 1.15rem; border-radius: 100px; text-decoration: none;
}
.btn::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-right: 0.5em;
  border-radius: 50%; background: url("images/jackdawbook_logo3.png") center 32% / 260%;
}
.btn.small::before { width: 14px; height: 14px; margin-right: 0.35em; }
.btn:hover:not(:disabled) { background: var(--steel); border-color: var(--steel); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover:not(:disabled) { background: var(--iris); border-color: var(--iris); color: var(--ink); }
.btn.danger { background: var(--fire-red); border-color: var(--fire-red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--fire-red-dark); border-color: var(--fire-red-dark); color: #fff; }
.btn.small { padding: 0.4rem 0.85rem; font-size: var(--step--1); }
.btn.small[aria-pressed="true"] { background: var(--steel); border-color: var(--steel); }
#view-circles { min-height: 44px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* ---------- the app ---------- */

.app-shell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-top: 2rem;
}

.app-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.app-bar h2 { margin: 0; font-size: var(--step-1); }

.field { display: grid; gap: 0.25rem; margin-bottom: 0.8rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--slate); }
input, select, textarea {
  font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); width: 100%;
}
textarea { min-height: 4.5rem; resize: vertical; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

#nest-figure { background: #fbfbf9; border: 1px solid var(--line); border-radius: var(--radius); }
#nest { display: block; width: 100%; height: auto; }
#nest[hidden] { display: none; }
.nest-node { cursor: pointer; }
.nest-node text { font-size: 11px; font-family: "Public Sans", sans-serif; }
.nest-node:hover circle, .nest-node:focus circle { stroke-width: 3; }

/* ---------- circles menu ---------- */

.circles-menu { list-style: none; margin: 0; padding: 0; }
.circles-menu li { border-bottom: 1px solid var(--line); }
.circles-menu li:last-child { border-bottom: none; }
.circles-menu-row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  min-height: 44px; padding: 0.6rem 0.3rem; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.circles-menu-row:hover { background: #f4f5f5; }
.circles-menu-row:disabled { cursor: default; color: var(--muted); }
.circles-menu-row:disabled:hover { background: none; }
.circles-menu-row .rel { margin-left: auto; }

/* ---------- the turning ring ---------- */

.ring-viewport {
  position: relative; width: 100%; cursor: grab; touch-action: none; user-select: none;
}
.ring-viewport::before { content: ""; display: block; padding-top: 100%; }
.ring-viewport.dragging { cursor: grabbing; }
.ring-stage { position: absolute; inset: 0; perspective: 900px; }
.ring-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  text-align: center; line-height: 1.2;
}
.ring-hub .n { display: block; font-size: 1.5rem; font-weight: 700; }
.ring-hub .w { display: block; font-size: 0.7rem; font-weight: 600; opacity: 0.85; }
.ring-faces { position: absolute; inset: 0; }
.ring-face {
  position: absolute; left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  cursor: pointer; touch-action: none; user-select: none; will-change: transform;
}
.ring-avatar {
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #eceeef; flex: 0 0 auto;
}
.ring-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ring-name {
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, 0.88); padding: 0.1rem 0.5rem; border-radius: 100px;
  white-space: nowrap; max-width: 7rem; overflow: hidden; text-overflow: ellipsis;
}

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; font-size: var(--step--1); }
.legend .chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: var(--step--1); color: var(--slate);
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 0.25rem 0.7rem; cursor: pointer;
}
.legend .chip:hover { border-color: var(--steel); }
.legend .chip.on { background: var(--ink); color: #f2f4f5; border-color: var(--ink); }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

.circles-box { border-top: 1px solid var(--line); margin-top: 1.75rem; padding-top: 1.25rem; }
.circles-box h3 { margin-top: 0; }
.circles-box > p { font-size: var(--step--1); color: var(--muted); }
.circles-box .people li { padding: 0.45rem 0; }
.circles-box .when[disabled] { color: var(--muted); cursor: default; }

.circle-form { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.circle-form .field { margin: 0; flex: 1 1 16rem; }

.people { list-style: none; margin: 0; padding: 0; }
.people li {
  max-width: none; display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.people .who { font-weight: 600; }
.people .rel { color: var(--muted); font-size: var(--step--1); }
.people .when { margin-left: auto; font-size: var(--step--1); color: var(--slate); white-space: nowrap; }
.people button { background: none; border: 0; color: var(--clay); cursor: pointer; font: inherit; font-size: var(--step--1); padding: 0 0.2rem; }
.people li.group-head { background: #f4f5f5; border-bottom-color: var(--line); }
.people li.group-head .who { text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step--1); }
.people li.group-head .rel { margin-left: auto; }

.empty { color: var(--muted); padding: 1rem 0; }

.pill { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; align-self: center; }

/* ---------- feature rows ---------- */

.rows { border-top: 1px solid var(--line); margin-top: 3rem; }
.row { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.row h3 { margin: 0; }
.row p { margin: 0; }
.row.row-2col { grid-template-columns: 1fr 1fr; }
.row.row-label { grid-template-columns: 7rem 1fr; padding: 0.9rem 0; }
@media (max-width: 700px) { .row, .row.row-2col, .row.row-label { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- ads ---------- */

.ad-slot {
  margin: 2.5rem auto; max-width: 728px; min-height: 90px;
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: #f5f5f0; color: var(--muted); font-size: var(--step--1);
}

/* ---------- footer ---------- */

.foot { background: var(--brand-teal); color: #cfcac2; padding: 2.5rem 0 3rem; font-size: var(--step--1); }
.foot a { color: var(--brand-cream); }
.foot h2 { font-size: var(--step-0); color: #fff; margin: 0 0 0.6rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.35rem; max-width: none; }
.foot .fine { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #cfe3ea; }

.foot-brand {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center; margin-bottom: 2.25rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.foot-logo-main { height: 64px; width: auto; border-radius: 10px; }
.foot-mascots { display: flex; gap: 0.85rem; }
.foot-mascot {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25);
}
.social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.social-placeholder {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 100px;
  color: #cfe3ea; font-size: var(--step--1); cursor: default; user-select: none;
}
.social-placeholder .soon {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18); color: #fff; padding: 0.15rem 0.45rem; border-radius: 100px;
}

/* ---------- consent ---------- */

.consent {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 40;
  background: var(--ink); color: #f4f2ee; border-radius: var(--radius);
  padding: 1rem 1.15rem; max-width: 560px; margin-inline: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.consent p { margin: 0 0 0.75rem; font-size: var(--step--1); max-width: none; }
.consent a { color: var(--iris); }
.consent .btn-row { margin: 0; }
.consent .btn { background: var(--iris); border-color: var(--iris); color: var(--ink); }
.consent .btn.secondary { background: transparent; border-color: #5c554d; color: #f4f2ee; }
.consent[hidden] { display: none; }

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

/* ---------- vault ---------- */

.lock-panel {
  background: var(--ink); color: #f2f4f5; border-radius: var(--radius);
  padding: 1.5rem; max-width: 26rem; margin: 1rem auto;
}
.lock-panel h3 { margin-top: 0; color: #fff; }
.lock-panel p { color: var(--hood); font-size: var(--step--1); }
.lock-panel label { color: #f2f4f5; }
.lock-panel[hidden] { display: none; }

.vault-status {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: #f4f5f5; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.8rem 1rem; margin: 0 0 1.5rem; font-size: var(--step--1); color: var(--slate);
  max-width: var(--measure);
}
.vault-status::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.4rem;
  border-radius: 50%; background: var(--steel);
}

.msg { font-size: var(--step--1); color: var(--steel); margin-top: 0.75rem; }
.msg[hidden] { display: none; }

.danger { color: var(--clay); }

/* ---------- AI disclosure strip ---------- */

.ai-strip { padding: 0 0 3.5rem; }
.ai-strip .wrap { max-width: 820px; }
.ai-strip p {
  margin: 0; max-width: none;
  background: rgba(47, 93, 120, 0.06);
  border: 1px solid rgba(47, 93, 120, 0.3);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--slate);
}
.ai-strip strong { color: var(--steel); }
.ai-strip a { color: var(--steel); text-decoration: underline; }

.hint { font-size: 0.8125rem; color: var(--muted); margin: 0.15rem 0 0; max-width: none; line-height: 1.45; }

/* ---------- zoomed circle view ---------- */

.crumb {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 0.75rem; font-size: var(--step--1); color: var(--muted);
}
.crumb[hidden] { display: none; }
.crumb strong { color: var(--ink); }
.crumb span { color: var(--muted); }

#nest { transition: opacity 0.2s ease; }

.person-card {
  margin-top: 1rem; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--steel); border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.person-card[hidden] { display: none; }
.person-card h3 { margin: 0 0 0.6rem; font-size: var(--step-1); }
.person-card p { margin: 0 0 0.35rem; font-size: var(--step--1); max-width: none; }
.person-card strong { color: var(--slate); }
.person-card .btn { margin-top: 0.75rem; }
.person-card .field { margin: 0.75rem 0 0; max-width: 16rem; }
.person-card .btn-row { margin-top: 1rem; }

/* ---------- connections: "<Name>'s people" ---------- */

.connections { margin: 0.9rem 0; }
.connections h4 {
  margin: 0 0 0.5rem; font-size: var(--step--1); color: var(--slate);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.connections ul { list-style: none; margin: 0; padding: 0; }
.connections li { margin-bottom: 0.4rem; max-width: none; }
.connections button {
  width: 100%; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.7rem; font: inherit; cursor: pointer; min-height: 44px; text-align: left;
}
.connections button:hover { border-color: var(--steel); }
.connections .who { font-weight: 600; }
.connections .rel { color: var(--muted); font-size: var(--step--1); }
.connections .when { margin-left: auto; color: var(--slate); font-size: var(--step--1); white-space: nowrap; }

.choice-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-btn {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
  background: #fff; color: var(--ink); border: 2px solid var(--line);
  padding: 0.5rem 0.9rem; border-radius: 100px;
}
.choice-btn:hover { border-color: var(--steel); }
.choice-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- photos and icons ---------- */

.photo-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.9rem 0 0.4rem; }
.thumb {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center; background: #eceeef; border: 2px solid var(--line);
  font-size: 1.4rem; font-weight: 700; color: var(--slate);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- mobile app cards and screenshot gallery ---------- */

.app-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; margin: 1.5rem 0 2rem;
}
.app-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-align: center;
}
.app-card .platform-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; }
.app-card h3 { margin-top: 0; }
.app-card p { max-width: none; }

.screens-row {
  display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; padding: 0.5rem 0 1.5rem;
  scroll-snap-type: x proximity;
}
.screen-frame { flex: 0 0 auto; width: 160px; margin: 0; }
.screen-frame .shot {
  width: 100%; border-radius: 18px;
  border: 1px solid var(--line); background: #eceeef; overflow: hidden;
  scroll-snap-align: start;
}
/* each screenshot keeps its own natural proportions — no crop, no forced
   phone-shaped box, since the five samples aren't a uniform shape */
.screen-frame .shot img { width: 100%; height: auto; display: block; }
.screen-frame figcaption { text-align: center; font-size: var(--step--1); color: var(--muted); margin-top: 0.5rem; }

/* ---------- beta banner ---------- */

@media (prefers-reduced-motion: reduce) { .beta-banner * { transition: none !important; } }
.sa-sticky-top { position: sticky; top: 0; z-index: 9999; }
.beta-banner {
  width: 100%;
  background: linear-gradient(135deg,#8e949b 0%,#cfd4da 18%,#f5f7fa 35%,#bfc5cc 50%,#eef1f4 65%,#9aa0a8 100%);
  color: black; text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; padding: 8px 12px; box-sizing: border-box;
}
.beta-banner p {
  margin: 0; font: inherit; max-width: none; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
/* the banner text is long — shrink it in verified steps so it stays on one
   line rather than wrapping, down to the smallest phones still in common
   use. Sizes below are measured against the actual banner text, not guessed. */
@media (max-width: 480px) {
  .beta-banner { font-size: 9px; font-weight: 600; letter-spacing: 0; padding: 5px 3px; }
}
@media (max-width: 375px) {
  .beta-banner { font-size: 8px; }
}
@media (max-width: 340px) {
  .beta-banner { font-size: 7px; }
}