/* UnBizzy — shared styles
   Palette from the app: Sherwin Williams "Reticence" inspired.
   No third-party requests anywhere in this file. */

/* Playfair Display, self-hosted.
   If the font files aren't present, browsers fall back to Georgia
   and the site still looks right. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --daisy-gold: #E8A849;
  --daisy-pink: #D94F6B;
  --stem-green: #4A8C5E;
  --petal-white: #F8F1EE;
  --whisper: #FDF9F7;
  --reticence: #E5D6D1;
  --espresso: #4A3530;
  --warm-grey: #7A5E56;
  --dusty-rose: #B09890;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  /* The reading measure. In em, so it resolves against the font of the
     element that uses it: about 72 characters at any text size. */
  --measure: 34em;
}

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

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

body {
  margin: 0;
  background: var(--petal-white);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- layout ---------- */

/* The one container every page uses, at the homepage's width. */
.page {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  flex: 1;
}

/* Outside the homepage layouts, everything in that container sits in one
   reading column of about 72 characters, centred under the logo. The
   padding does it, so headings, text and tables share one left edge. */
.page:not(.page--home) {
  padding-inline: max(1.5rem, (min(100%, 72rem) - var(--measure)) / 2);
}

.masthead {
  text-align: center;
  padding: 2.5rem 1.5rem 0;
}

.masthead img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

.masthead--home img { max-width: 380px; }

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.2;
}

h1 {
  font-size: 2.1rem;
  margin: 0 0 1rem;
}

.masthead--home + .page h1 {
  text-align: center;
  color: var(--warm-grey);
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 0.6rem;
}

p { margin: 0 0 1.1rem; }

.lead {
  font-size: 1.15rem;
  color: var(--warm-grey);
}

.meta {
  color: var(--dusty-rose);
  font-size: 0.9rem;
}

a {
  color: var(--daisy-pink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--espresso); }

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

ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.4rem; }

/* ---------- small pieces ---------- */

.rule {
  border: 0;
  border-top: 1px solid var(--reticence);
  margin: 2.5rem 0;
}

.notice {
  background: var(--whisper);
  border-left: 3px solid var(--daisy-gold);
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
}

.notice p:last-child { margin-bottom: 0; }

.contact {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
}

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

.site-footer {
  border-top: 1px solid var(--reticence);
  padding: 1.75rem 1.5rem 2.5rem;
  text-align: center;
  color: var(--dusty-rose);
  font-size: 0.9rem;
}

.site-footer nav {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  justify-content: center;
}

.site-footer a { color: var(--warm-grey); }
.site-footer a:hover { color: var(--espresso); }

/* ---------- responsive ---------- */

@media (max-width: 30rem) {
  body { font-size: 16px; }
  h1 { font-size: 1.75rem; }
  .masthead--home img { max-width: 280px; }
  .page { padding-top: 2rem; }
}

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

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

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--espresso);
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 4px;
}

input[type="email"]:focus-visible {
  outline: 2px solid var(--daisy-gold);
  outline-offset: 1px;
  border-color: var(--daisy-gold);
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--espresso);
  background: var(--daisy-gold);
  border: 0;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

button:hover { background: #d99a3f; }

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

button[disabled] {
  background: var(--reticence);
  color: var(--dusty-rose);
  cursor: default;
}

button.danger { background: var(--daisy-pink); color: var(--whisper); }
button.danger:hover { background: #c74560; }

.field { margin-bottom: 1.5rem; }

.result {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--dusty-rose);
  background: var(--whisper);
}

.result p:last-child { margin-bottom: 0; }
.result--ok { border-left-color: var(--stem-green); }
.result--bad { border-left-color: var(--daisy-pink); }
.hidden { display: none; }

/* ---------- homepage ---------- */

/* Text blocks are held to a comfortable measure inside the container;
   tables and grids use the full width. */

.page--home { padding-top: 1.5rem; }

.masthead--home { padding-top: 2rem; }
.masthead--home img { max-width: 320px; }

.measure { max-width: 40rem; }

.section {
  padding: 3.5rem 0 1rem;
}

.section h2 {
  font-size: 2rem;
  margin: 0 0 0.75rem;
}

.section > p { margin-bottom: 1.5rem; }

.section .lead { font-size: 1.15rem; }

/* soft band behind alternate sections, running edge to edge.
   Box-shadow never adds scrollable overflow, so this needs no
   overflow clipping on the body. */
.band {
  padding: 3.5rem 0 3rem;
  background: var(--whisper);
  box-shadow: 0 0 0 100vmax var(--whisper), 0 0 0 calc(100vmax + 1px) var(--reticence);
  clip-path: inset(-1px -100vmax);
}

/* hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: center;
  padding: 1.5rem 0 2rem;
}

.masthead--home + .page--home .hero h1 {
  text-align: left;
  color: var(--espresso);
  font-size: 3.4rem;
  margin: 0 0 1.25rem;
}

/* The homepage hero is text only: the bee is already in the masthead logo,
   and a second bee right under it read as the logo twice on a phone. */
.hero--solo { grid-template-columns: minmax(0, 1fr); }

.hero .lead { font-size: 1.3rem; max-width: var(--measure); }
.hero p:not(.lead) { font-size: 1.05rem; max-width: 34rem; }

.hero img {
  width: 100%;
  max-width: 26rem;
  height: auto;
  display: block;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 52% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 52% 50%, #000 62%, transparent 100%);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.5rem 0 0;
}

.button {
  display: inline-block;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--espresso);
  background: var(--daisy-gold);
  border-radius: 4px;
  padding: 0.85rem 1.75rem;
  text-decoration: none;
}

.button:hover { background: #d99a3f; color: var(--espresso); }

/* how a week goes */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li { margin: 0; }

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--daisy-gold);
  margin-bottom: 0.6rem;
}

.steps h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}

.steps p { margin: 0; color: var(--warm-grey); }

/* pull quote */

.pull {
  margin: 3.5rem auto 0;
  max-width: 44rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--warm-grey);
  text-align: center;
}

/* the things it gets right */

.truths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 2.5rem;
  margin-top: 1rem;
}

.truths h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.truths p { margin: 0; font-size: 0.97rem; }

/* the allergy line */

.honest {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem 4rem;
  align-items: start;
  border-left: 3px solid var(--daisy-pink);
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 3.5rem 0 0;
}

.honest h2 { font-size: 2rem; margin: 0; }
.honest p:last-child { margin-bottom: 0; }

/* comparison tables */

.compare-wrap {
  position: relative; /* keeps the cells' hidden labels inside the scroll box */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0 0.75rem;
}

/* The footnote under the table keeps the hero's reading measure. */
.compare-wrap + .meta { max-width: var(--measure); }

.swipe-hint { display: none; }

.compare {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 6px;
}

.compare th, .compare td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--reticence);
  vertical-align: top;
  text-align: left;
}

.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

.compare thead th {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--espresso);
  background: var(--petal-white);
  border-bottom: 2px solid var(--reticence);
  vertical-align: bottom;
}

.compare thead th small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--dusty-rose);
  margin-top: 0.15rem;
}

.compare tbody th {
  font-weight: 600;
  color: var(--espresso);
  width: 22%;
  min-width: 14rem;
}

.compare tbody th small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--warm-grey);
}

.compare .us {
  background: #FBEBDD;
  color: var(--espresso);
  font-weight: 600;
}

.compare thead .us { border-top: 3px solid var(--daisy-gold); }

.compare td.center, .compare th.center { text-align: center; }

.compare td.center { vertical-align: middle; }

.compare svg {
  width: 1.3rem;
  height: 1.3rem;
  vertical-align: middle;
}

.compare--solo {
  min-width: 0;
  max-width: 40rem;
  margin-top: 0.5rem;
}

.compare--solo th { width: 9rem; min-width: 0; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--warm-grey);
  margin: 0 0 0.75rem;
}

.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend svg { width: 1.1rem; height: 1.1rem; }

.price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  white-space: nowrap;
}


/* closing */

.closing {
  text-align: center;
  padding: 4rem 0 1rem;
}

.closing h2 { font-size: 2.4rem; margin: 0 0 0.75rem; }
.closing .lead { font-size: 1.25rem; }
.closing .cta { justify-content: center; }

/* responsive */

@media (max-width: 64rem) {
  .truths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead--home + .page--home .hero h1 { font-size: 2.8rem; }
}

@media (max-width: 44rem) {
  .page--home { padding-top: 1rem; }
  .section { padding-top: 2.5rem; }
  .section h2, .honest h2 { font-size: 1.6rem; }
  .hero { grid-template-columns: 1fr; gap: 1rem; padding-top: 0.5rem; }
  .hero img { max-width: 14rem; order: -1; }
  .masthead--home + .page--home .hero h1 { font-size: 2.1rem; text-align: center; }
  .hero .lead, .hero p { text-align: center; }
  .hero .cta { justify-content: center; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .truths { grid-template-columns: 1fr; gap: 1.5rem; }
  .honest { grid-template-columns: 1fr; padding-left: 1.25rem; }
  .pull { font-size: 1.25rem; margin-top: 2.5rem; }
  .compare tbody th { min-width: 11rem; }
  .swipe-hint { display: block; }
  .closing h2 { font-size: 1.8rem; }
}

/* ---------- how it works page ---------- */

.kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--daisy-pink);
  margin: 0 0 0.5rem;
}

.masthead--home + .page--how .hero h1 { font-size: 3rem; }

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.jump a {
  font-size: 0.9rem;
  color: var(--espresso);
  text-decoration: none;
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

.jump a:hover { border-color: var(--daisy-gold); color: var(--espresso); }

.jump-cta { margin: 1.5rem 0 0; }
.jump-cta .button { font-size: 1.15rem; padding: 1rem 2.25rem; }

.page--how section[id] { scroll-margin-top: 1.5rem; }

.page--how h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 1rem;
}

.pillars > div { border-top: 3px solid var(--daisy-gold); padding-top: 1rem; }
.pillars p { margin: 0; color: var(--warm-grey); }

/* setup */

.setup {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: start;
  margin-top: 1rem;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: q;
}

.checklist li {
  position: relative;
  padding: 0 0 0.9rem 2.6rem;
  margin: 0 0 0.9rem;
  border-bottom: 1px solid var(--reticence);
}

.checklist li:last-child { border-bottom: 0; margin-bottom: 0; }

.checklist li::before {
  counter-increment: q;
  content: counter(q);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--daisy-gold);
  color: var(--espresso);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.75rem;
}

.setup-after {
  background: var(--petal-white);
  border: 1px solid var(--reticence);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 0.5rem;
}

.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }

.notice--tip { margin-top: 2.5rem; }

/* the screens */

.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 1rem;
}

.screens p { margin: 0; font-size: 0.97rem; }

.ico {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--daisy-pink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.5rem;
}

/* shopping */

.howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 1rem;
}

.howto p { margin: 0; color: var(--warm-grey); }

/* recipes */

.recipe-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin-top: 1rem;
}

.recipe-lists dl { margin: 0; }

.recipe-lists dt {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 1.25rem;
}

.recipe-lists dt:first-child { margin-top: 0; }
.recipe-lists dd { margin: 0.2rem 0 0; }

.page--how .honest { margin-top: 0; }

/* testers */

.testers {
  max-width: 44rem;
  background: var(--whisper);
  border: 1px dashed var(--daisy-gold);
  border-radius: 6px;
  padding: 1.75rem 2rem 0.75rem;
}

.testers h2 { font-size: 1.6rem !important; }

@media (max-width: 64rem) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .masthead--home + .page--how .hero h1 { font-size: 2.1rem; }
  .jump { justify-content: center; }
  .jump-cta { text-align: center; }
  .pillars, .setup, .screens, .howto, .recipe-lists, .steps--four {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .recipe-lists { gap: 1.25rem; }
  .testers { padding: 1.25rem 1.25rem 0.5rem; }
}

/* tester sign-up form */

.signup {
  background: var(--petal-white);
  border: 1px solid var(--reticence);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 0.75rem;
  margin: 1.5rem 0 2rem;
}

.signup h3, .testers > h3 { margin-top: 0; }
.testers > h3 { margin-top: 0.5rem; }

input[type="text"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--espresso);
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 4px;
}

input[type="text"]:focus-visible {
  outline: 2px solid var(--daisy-gold);
  outline-offset: 1px;
  border-color: var(--daisy-gold);
}

.choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.choice legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
  margin: 0 1.5rem 0 0;
  cursor: pointer;
}
.choice input { accent-color: var(--daisy-gold); width: 1.1rem; height: 1.1rem; }

.hint { font-size: 0.88rem; color: var(--warm-grey); margin: 0.4rem 0 0; }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.signup .result { margin: 1.25rem 0 0; }
.signup .small { font-size: 0.82rem; margin-top: 1.25rem; }

@media (max-width: 44rem) {
  .signup { padding: 1.25rem 1rem 0.5rem; }
}

/* ---------- waitlist (M9c) ---------- */

/* Elements switched by the Functions (data-when, data-state) and by
   js/waitlist.js rely on `hidden`; a display rule must never beat it. */
[hidden] { display: none !important; }

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

.waitlist {
  max-width: 32rem;
  margin: 1.5rem 0 2rem;
}

.waitlist-row {
  display: flex;
  gap: 0.5rem;
}

.waitlist-row input[type="email"] { flex: 1; min-width: 0; }
.waitlist-row button { flex: none; white-space: nowrap; }

.waitlist-consent {
  font-size: 0.88rem;
  color: var(--warm-grey);
  margin: 0.6rem 0 0;
}

.waitlist-terms {
  color: var(--dusty-rose);
  line-height: 1.45;
  margin: 0.4rem 0 0;
}

.waitlist-error {
  color: var(--daisy-pink);
  font-size: 0.92rem;
  margin: 0.5rem 0 0;
}

.waitlist-done {
  background: var(--whisper);
  border-left: 3px solid var(--stem-green);
  padding: 1rem 1.2rem;
}

.waitlist-done p { margin: 0; }
.waitlist-done:focus { outline: none; }

.waitlist .meta { margin: 0.75rem 0 0; }

/* The homepage hero sizes its paragraphs up; the form's small print stays
   small. Same specificity as `.hero p:not(.lead)`, later, so it wins. */
.hero .waitlist { max-width: 34rem; }
.hero .waitlist p { font-size: 0.88rem; max-width: none; }
.hero .waitlist .waitlist-done p { font-size: 1rem; }

/* the Mealime switcher page */

.page--switch h1 { font-size: 2.3rem; }

.save-steps, .does { padding-left: 1.3rem; }
.save-steps li, .does li { margin-bottom: 0.6rem; }

.faq h3 {
  font-size: 1.02rem;
  margin: 1.5rem 0 0.3rem;
}

.faq p { margin-bottom: 0; }

.waitlist--closing { margin-top: 3rem; }

.fine {
  font-size: 0.8rem;
  color: var(--dusty-rose);
  margin-top: 2.5rem;
}

@media (max-width: 30rem) {
  .waitlist-row { flex-direction: column; }
  .waitlist-row button { width: 100%; }
  .page--switch h1 { font-size: 1.8rem; }
}

@media (max-width: 44rem) {
  .hero .waitlist { margin-left: auto; margin-right: auto; }
}

/* the guide pages: /best-family-meal-planner-apps, /picky-eaters,
   /busy-weeknights (Prompt G7). The text keeps the reading column; only the
   roundup table is wider. */

.page--guide h1 { font-size: 2.3rem; }

.apps h3 {
  font-size: 1.1rem;
  margin: 2rem 0 0.4rem;
}

.related {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
}

/* The roundup table. On a wide screen it steps out of the reading column to
   the page container's width, centred on the column; below 56rem each app
   becomes a card, its cells labelled from data-label, so a phone never
   scrolls sideways. The explicit ARIA roles keep it a table to screen
   readers once the cards change its display. */

.roundup-wrap {
  margin: 1.25rem calc(50% - min(34.5rem, 50vw - 1.5rem)) 0.75rem;
}

.roundup {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 6px;
}

.roundup th, .roundup td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--reticence);
  vertical-align: top;
  text-align: left;
}

.roundup tbody tr:last-child > * { border-bottom: 0; }

.roundup thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warm-grey);
  background: var(--petal-white);
  border-bottom: 2px solid var(--reticence);
  vertical-align: bottom;
}

.roundup tbody th {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--espresso);
}

/* the comparison tables' UnBizzy tint */
.roundup .us > * { background: #FBEBDD; }
.roundup .us > th { box-shadow: inset 3px 0 0 var(--daisy-gold); }

/* A line under an app's name, such as a shutdown date (Prompt OLLIE1). */
.roundup .row-note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--warm-grey);
}

@media (max-width: 56rem) {
  .roundup-wrap { margin-inline: 0; }
  .roundup, .roundup tbody, .roundup tr, .roundup th, .roundup td { display: block; }
  .roundup { background: none; border: 0; border-radius: 0; font-size: 0.95rem; }
  .roundup thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .roundup tr {
    background: var(--whisper);
    border: 1px solid var(--reticence);
    border-radius: 6px;
    margin-bottom: 0.9rem;
    overflow: hidden;
  }
  .roundup tbody th { font-size: 1.2rem; padding: 0.7rem 1rem; }
  .roundup td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.15rem 1rem;
    padding: 0.6rem 1rem;
  }
  .roundup td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warm-grey);
  }
  .roundup tbody tr > :not(:last-child) { border-bottom: 1px solid var(--reticence); }
  .roundup tbody tr > :last-child { border-bottom: 0; }
  .roundup .us > th { box-shadow: inset 0 3px 0 var(--daisy-gold); }
  /* An empty cell keeps the wide table's columns aligned; a card has no
     columns, so it drops the empty line (Ollie's price, Prompt OLLIE1). */
  .roundup td:empty { display: none; }
}

@media (max-width: 30rem) {
  .page--guide h1 { font-size: 1.8rem; }
  .roundup td { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- legal pages (privacy.html, terms.html) ---------- */

.page--legal h2 { font-size: 1.3rem; margin-top: 2.4rem; }
.page--legal h3 { font-size: 1.05rem; margin: 1.8rem 0 0.5rem; }
.page--legal ul, .page--legal ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
.page--legal li { margin-bottom: 0.45rem; }
.page--legal hr { border: 0; border-top: 1px solid var(--reticence); margin: 2.5rem 0; }
.page--legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1.4rem; }
.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  background: var(--whisper);
  border: 1px solid var(--reticence);
  border-radius: 6px;
}
.legal-table th, .legal-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--reticence);
  vertical-align: top;
  text-align: left;
}
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: 0; }
.legal-table thead th {
  font-weight: 600;
  color: var(--espresso);
  background: var(--petal-white);
  border-bottom: 2px solid var(--reticence);
}