/* ==========================================================================
   Rellony Rescue — the pages under /r/ and /rescue/: warm paper, and one
   olive card per page for its main action.

   Loaded after /styles.css on Rescue pages only, which carry <body class="rx">.
   Every rule sits under .rx, so no Rellony Check page sees any of it.

   The rule: the page is paper (vellum); what you read or fill in is a warm
   white sheet lifted off it by a warm hairline and a soft, layered shadow;
   olive is an accent (primary button, badge, bars, progress, the mark of a
   chosen answer, small labels) plus the page's ONE olive card for its main
   action and the site's olive footer. No pure white and no neutral grey:
   every light tone here is warm.

   The home page keeps its own rule ("no drop shadows"); the shadows below are
   Rescue's alone, because white sheets on a paper page need them to separate.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------------ */
body.rx {
  --rx-ground: var(--vellum);              /* #F4F1E9, the page */
  --rx-sheet: #FFFCF6;                     /* cards, the question sheet, answer tiles */
  --rx-hair: rgba(74, 62, 38, 0.10);       /* card outline, header and sticky-bar rules */
  --rx-hair-firm: rgba(74, 62, 38, 0.20);  /* answer-tile outline, header divider */
  --rx-field: rgba(74, 62, 38, 0.60);      /* a text box's outline: 3.34:1 on the sheet (WCAG 1.4.11) */
  --line-paper: rgba(74, 62, 38, 0.12);    /* the site's divider, warmed */
  --rx-tint: rgba(69, 75, 55, 0.08);       /* olive wash: secondary-button hover */
  --rx-track: #EAE4D5;                     /* empty bars and progress: sand */
  --rx-chosen: #F5F0E1;                    /* a chosen answer: warm cream */
  --rule: rgba(69, 75, 55, 0.42);          /* the H1 hairline, olive on paper */
  --rx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --rx-shadow-1: 0 1px 2px rgba(28, 26, 21, 0.05);
  --rx-shadow-card: 0 1px 2px rgba(28, 26, 21, 0.04), 0 2px 6px rgba(28, 26, 21, 0.035), 0 14px 32px -16px rgba(28, 26, 21, 0.16);
  --rx-shadow-lift: 0 1px 2px rgba(28, 26, 21, 0.05), 0 4px 12px rgba(28, 26, 21, 0.06), 0 20px 40px -18px rgba(28, 26, 21, 0.22);
  --rx-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 1px rgba(28, 26, 21, 0.16), 0 2px 4px rgba(46, 51, 38, 0.14), 0 10px 22px -10px rgba(46, 51, 38, 0.55);
  --rx-shadow-btn-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(28, 26, 21, 0.16), 0 4px 8px rgba(46, 51, 38, 0.16), 0 16px 30px -12px rgba(46, 51, 38, 0.60);
  --rx-shadow-btn-press: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 1px rgba(28, 26, 21, 0.18);

  color: var(--paper-ink);
  background-color: var(--rx-ground);
  /* the home page's grain, fainter: paper, not dirt */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* styles.css paints <html> olive for the overscroll on the home page; and
   the phone sticky bar must never hide what has focus (WCAG 2.4.11).
   The browser's own scroll anchoring is off: Safari has none, Chrome has it,
   and where a page changes height above the reader ("Show fewer") the page
   keeps its own anchor (preview.js) — one rule for every browser. */
html:has(body.rx) { background: var(--vellum); scroll-padding-bottom: 6rem; overflow-anchor: none; }

.rx :focus-visible { outline-color: var(--paper-ink); }
.rx .rx-olive :focus-visible,
.rx .site-foot :focus-visible { outline-color: var(--bone); }
.rx main:focus { outline: none; }

/* --- the bar: lockup, a divider, "Rescue" --------------------------------------- */
.rx .site-head { background: var(--rx-ground); border-bottom: 1px solid var(--rx-hair); }
.rx-product {
  padding-left: 0.9rem; border-left: 1px solid var(--rx-hair-firm);
  font-family: var(--display); font-size: 0.875rem; font-weight: 600; line-height: 1.6;
  letter-spacing: -0.005em; color: var(--paper-soft);
}

/* --- page frame and heading ----------------------------------------------------- */
.rx-main { padding-block: clamp(1.25rem, 3.5vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); }
/* While a page waits for its data the frame keeps the screen, so the footer
   doesn't jump up and back down (no layout shift). */
.rx-main[aria-busy="true"] { min-height: 100vh; }
.rx-h1 { font-size: clamp(1.875rem, 2.1vw + 1.25rem, 3.25rem); max-width: 22ch; text-wrap: balance; color: var(--paper-ink); }
.rx-lede { margin-top: 0.6rem; max-width: 46ch; font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.5; color: var(--paper-soft); }
.rx .h1-rule { margin: 1rem 0 1.25rem; max-width: 12ch; }
.rx .eyebrow { color: var(--base); }

.rx-grid { display: grid; gap: 1rem; align-items: start; }
.rx-stack { display: grid; gap: 1rem; align-content: start; }
.rx-narrow { max-width: 46rem; margin-inline: auto; }
@media (min-width: 64rem) {
  .rx-grid { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); gap: 1.25rem 1.5rem; }
  .rx-aside { position: sticky; top: 1.5rem; }
}

/* A line of phrases joined by " · " breaks at a dot, not inside a phrase:
   each phrase is an inline block, which wraps inside itself only when it is
   wider than the whole line. */
.rx-nw { display: inline-block; }

/* --- sheets ------------------------------------------------------------------------ */
.rx-card,
.rx .panel {
  background: var(--rx-sheet); color: var(--paper-ink);
  border: 1px solid var(--rx-hair); border-radius: var(--r-paper);
  box-shadow: var(--rx-shadow-card);
  padding: clamp(1.1rem, 1.2vw + 0.85rem, 1.9rem);
}
.rx-card h2 { font-size: clamp(1.125rem, 0.45vw + 1rem, 1.375rem); margin-bottom: 0.85rem; text-wrap: balance; }
.rx-card p { color: var(--paper-soft); text-wrap: pretty; }
.rx-card strong { color: var(--paper-ink); font-weight: 600; }
.rx-card a:not(.btn), .rx .panel a:not(.btn) { color: var(--paper-ink); }
.rx-card .eyebrow { margin-bottom: 0.55rem; }
/* a card heading kept to one line, with a quiet line under it saying what the list is */
.rx-card h2:has(+ .rx-card__sub) { margin-bottom: 0.2rem; }
.rx-card .rx-card__sub { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-paper); font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft); }
.rx-fine { font-size: 0.8125rem; line-height: 1.5; color: var(--paper-soft); }

/* a card's label row: what the card is (olive), a note on the right, a hairline */
.rx-label {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-paper);
}
.rx-label .eyebrow, .rx-label .rx-fine { margin: 0; }

/* notes and wells sit on the sheet in vellum: olive at 8 % reads grey on it */
.rx-well { padding: 0.75rem 0.9rem; background: var(--vellum); border-radius: var(--r-input); font-size: 0.875rem; line-height: 1.5; color: var(--paper-ink); }

/* --- status: the rating as the FSA publishes it --------------------------------------- */
.rx-status__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
/* a plain numeral on olive — never the FHRS sticker's shape or colours */
.rx-badge {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  background: var(--base); color: var(--vellum);
  font-family: var(--display); font-weight: 700; font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 1px rgba(28, 26, 21, 0.14), 0 8px 18px -8px rgba(46, 51, 38, 0.6);
}
.rx-card .rx-status__line { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--paper-ink); }
.rx-status__meta { margin-top: 0.1rem; }
.rx-status__source { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line-paper); }

/* --- the three scores ----------------------------------------------------------------- */
.rx-scores__list { list-style: none; margin: 0; padding: 0; }
.rx-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 0.45rem 1rem; padding-block: 0.7rem 0.8rem; border-bottom: 1px solid var(--line-paper);
}
.rx-score:first-child { padding-top: 0; }
/* the rule's own hairline closes the list: no second line above it */
.rx-score:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.rx-score__name { color: var(--paper-ink); font-size: 0.9375rem; line-height: 1.35; }
.rx-score__value { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--paper-ink); }
/* The track runs 0–30 (management's scale; hygiene and structure stop at 25).
   The tick at 15 is the highest a 2 allows, named once under the first bar.
   The bar is drawing; the number beside it is the data. Its length is set by
   the script through --v (CSSOM, so the page needs no inline styles). */
.rx-score__bar { grid-column: 1 / -1; position: relative; height: 0.5rem; border-radius: 999px; background: var(--rx-track); }
.rx-score__bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100% / 30);
  border-radius: inherit; background: var(--base);
}
.rx-score__bar::after {
  content: ""; position: absolute; left: 50%; top: -0.3rem; bottom: -0.3rem;
  width: 2px; margin-left: -1px; border-radius: 1px; background: var(--base); opacity: 0.6;
}
.rx-score:first-child .rx-score__bar { margin-bottom: 1.35rem; }
.rx-score__mark {
  position: absolute; left: 50%; top: calc(100% + 0.45rem); transform: translateX(-50%);
  white-space: nowrap; font-size: 0.75rem; line-height: 1; font-weight: 500; color: var(--paper-soft);
}
.rx-score.is-high .rx-score__value { color: var(--unverified-paper); }
.rx-score.is-high .rx-score__bar::before { background: var(--unverified-paper); }

.rx-rule { margin-top: 1.1rem; padding-top: 1.05rem; border-top: 1px solid var(--line-paper); }
.rx-card .rx-rule > p:first-child { color: var(--paper-ink); }
/* the table's figure stands out without pushing its line apart */
.rx-rule__result { font-family: var(--display); font-weight: 700; font-size: 1.25em; line-height: 1; letter-spacing: -0.02em; }
.rx-rule .rx-fine { margin-top: 0.5rem; }

/* --- buttons: the home page's pill, with depth ------------------------------------------- */
/* styles.css drops a link-button's underline only through .btn--inline */
.rx a.btn { text-decoration: none; }
.rx .btn {
  opacity: 1; text-wrap: balance;
  box-shadow: var(--rx-shadow-btn);
  transition: background-color 0.18s var(--rx-ease), border-color 0.18s var(--rx-ease), box-shadow 0.18s var(--rx-ease), transform 0.09s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rx .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: var(--rx-shadow-btn-hover); }
}
.rx .btn:active { background: var(--btn-press); border-color: var(--btn-press); box-shadow: var(--rx-shadow-btn-press); transform: scale(0.97); }
.rx .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Two levels: what happens, then what it costs you. The second line never
   breaks inside a phrase: below 22.5rem it breaks at the dot instead, and the
   dot goes (measured at 320, 360, 375 and 390). */
.rx .btn--two { flex-direction: column; gap: 0.15rem; min-height: 3.75rem; padding: 0.7rem 1rem; line-height: 1.2; font-size: 1.0625rem; }
.btn__sub { display: flex; justify-content: center; flex-wrap: nowrap; white-space: nowrap; font-size: 0.8125rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.005em; }
@media (max-width: 24rem) { .btn__sub { font-size: 0.75rem; } }
@media (max-width: 22.49rem) {
  .btn__sub { flex-direction: column; align-items: center; }
  .btn__dot { display: none; }
}

/* the outlined secondary: the sheet, the home page's olive ring */
.rx .btn--secondary { background: var(--rx-sheet); color: var(--base); border-color: var(--base); box-shadow: inset 0 0 0 1px var(--base), var(--rx-shadow-1); }
@media (hover: hover) and (pointer: fine) {
  .rx .btn--secondary:hover { background: var(--rx-tint); border-color: var(--base); box-shadow: inset 0 0 0 1px var(--base), 0 6px 16px -10px rgba(46, 51, 38, 0.45); }
}
.rx .btn--secondary:active { background: var(--press-paper); border-color: var(--base); box-shadow: inset 0 0 0 1px var(--base); }
/* inside a form, styles.css's form:valid .btn:hover / :active (0,3,1) painted the outlined button dark under its
   dark text ("Add your own opening check", "Refund £79"): the outlined button keeps its own fills there */
@media (hover: hover) and (pointer: fine) {
  .rx form .btn.btn--secondary:hover { background: var(--rx-tint); border-color: var(--base); }
  .rx .rx-olive form .btn.btn--secondary:hover { background: var(--wash); border-color: var(--bone); }
}
.rx form .btn.btn--secondary:active { background: var(--press-paper); border-color: var(--base); }
.rx .rx-olive form .btn.btn--secondary:active { background: var(--press-olive); border-color: var(--bone); }

/* --- the page's one olive card ----------------------------------------------------------------- */
.rx .rx-olive {
  background-color: var(--base);
  background-image: linear-gradient(180deg, rgba(240, 239, 227, 0.06) 0%, rgba(240, 239, 227, 0) 55%);
  color: var(--bone);
}
/* /r/'s action card is a card of its own, so it carries the olive shadow; the
   free check's price head is part of the price panel and has none */
.rx .rx-action { border-color: transparent; box-shadow: 0 1px 2px rgba(28, 26, 21, 0.10), 0 22px 44px -20px rgba(46, 51, 38, 0.55); }
/* its main button is cream */
.rx .rx-olive .btn:not(.btn--secondary) {
  background: var(--vellum); border-color: var(--vellum); color: var(--olive-ink);
  box-shadow: inset 0 -1px 0 rgba(28, 26, 21, 0.06), 0 1px 1px rgba(0, 0, 0, 0.18), 0 10px 22px -10px rgba(0, 0, 0, 0.50);
}
@media (hover: hover) and (pointer: fine) {
  .rx .rx-olive .btn:not(.btn--secondary):hover { background: var(--rx-sheet); border-color: var(--rx-sheet); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 16px 30px -12px rgba(0, 0, 0, 0.55); }
}
.rx .rx-olive .btn:not(.btn--secondary):active { background: var(--bone); border-color: var(--bone); }
.rx .rx-olive .btn--secondary { background: transparent; color: var(--bone); border-color: rgba(240, 239, 227, 0.55); box-shadow: inset 0 0 0 1px rgba(240, 239, 227, 0.55); }
@media (hover: hover) and (pointer: fine) {
  .rx .rx-olive .btn--secondary:hover { background: var(--wash); border-color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
}
.rx .rx-olive .btn--secondary:active { background: var(--press-olive); }

/* --- /r/: the action card ----------------------------------------------------------------- */
.rx-action .btn { width: 100%; }
.rx-action .btn-note { text-align: left; margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.5; color: var(--sage); }

/* --- the council ---------------------------------------------------------------------------- */
.rx-card .rx-council__fee { font-size: 1.0625rem; color: var(--paper-ink); }
.rx-council__fee strong { margin-left: 0.15rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.rx-council__apply { margin-top: 0.6rem; font-size: 0.9375rem; }
.rx-council__links { margin-top: 0.75rem; font-size: 0.9375rem; }

/* --- quiet links ------------------------------------------------------------------------------- */
.rx-after { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rx .rx-quiet {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--paper-soft);
  text-decoration: underline; text-decoration-color: var(--rx-hair-firm); text-underline-offset: 0.25em;
  transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rx .rx-quiet:hover { color: var(--paper-ink); text-decoration-color: currentColor; }
}
.rx .rx-quiet:active { color: var(--paper-ink); }

/* --- /r/ without a code ------------------------------------------------------------------------- */
.rx-code { max-width: 30rem; }
.rx-legal .rx-stop { margin-top: 1.75rem; }   /* /stop/: the code box under the text */
.rx-code__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; }
.rx .rx-code__row .btn { width: auto; min-width: 5.5rem; min-height: 3rem; padding-inline: 1.4rem; }
.rx .rx-code input {
  min-height: 3rem; font-family: var(--record); font-weight: 500; font-size: 1.125rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* --- text boxes: warm, with an outline you can see ----------------------------------------------- */
.rx input[type="text"],
.rx input[type="email"],
.rx textarea { background: var(--rx-sheet); color: var(--paper-ink); border: 1px solid var(--rx-field); }
.rx input::placeholder, .rx textarea::placeholder { color: var(--paper-hint); }
.rx .form-error { background: rgba(150, 36, 26, 0.06); color: var(--paper-ink); }
.rx .field > label { color: var(--paper-ink); }
.rx .hint { color: var(--paper-soft); }

/* --- while data loads ------------------------------------------------------------------------------ */
.rx-skel { display: grid; gap: 1rem; }
.rx-skel__line { height: 2.4rem; max-width: 22ch; border-radius: 8px; background: var(--rx-track); }
.rx-skel__card { height: 11rem; border-radius: var(--r-paper); background: var(--rx-sheet); border: 1px solid var(--rx-hair); box-shadow: var(--rx-shadow-card); }
@media (prefers-reduced-motion: no-preference) {
  .rx-skel__line, .rx-skel__card { animation: rx-breathe 1.6s ease-in-out infinite alternate; }
}
@keyframes rx-breathe { from { opacity: 1; } to { opacity: 0.55; } }

/* --- when a page can't load ------------------------------------------------------------------------- */
.rx-problem { max-width: 34rem; }
.rx-problem p { color: var(--paper-ink); }
.rx-problem .btn { width: auto; margin-top: 1rem; padding-inline: 1.75rem; }

/* ==========================================================================
   Questions — /rescue/start/
   ========================================================================== */

.rx-flow { max-width: 46rem; margin-inline: auto; }
/* a new question screen fades in (opacity only) */
@media (prefers-reduced-motion: no-preference) {
  .rx-screen { animation: rx-in 0.16s ease-out; }
}
@keyframes rx-in { from { opacity: 0; } to { opacity: 1; } }

/* five steps; names shown from 40rem (screen readers always get them) */
.rx-progress { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.rx-progress li { display: grid; gap: 0.45rem; font-size: 0.75rem; line-height: 1.3; color: var(--paper-soft); }
.rx-progress li::before { content: ""; height: 0.3rem; border-radius: 999px; background: var(--rx-track); }
.rx-progress li.is-done::before,
.rx-progress li[aria-current="step"]::before { background: var(--base); }
.rx-progress li[aria-current="step"] { color: var(--paper-ink); font-weight: 600; }
@media (max-width: 39.99rem) {
  .rx-progress li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.rx-stepcount { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--base); }
.rx-screen-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
/* "Free · about 3 minutes · no account": one line down to 320 px (measured) */
.rx-start-note { margin-top: 0.85rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em; color: var(--paper-ink); }

/* the sheet you fill in; a hairline between questions */
.rx .rx-form { padding: clamp(1.1rem, 2vw + 0.6rem, 2.5rem); }
.rx-q { border: 0; margin: 0; padding: 1.75rem 0 1.85rem; min-width: 0; border-top: 1px solid var(--line-paper); }
.rx-q:first-of-type, .rx-method + .rx-q { border-top: 0; padding-top: 0.35rem; }
/* A floated legend sits in the flow like a heading instead of straddling the
   fieldset's top rule. The body clears it; a clearing element's own top
   margin would be eaten by the float, so the gap lives inside the body. */
.rx-q > legend { float: left; width: 100%; padding: 0; }
.rx-q__body { clear: left; padding-top: 0.05rem; }
/* The question: the sheet's heading, full width (no number column; the
   sheet itself keeps the line length), lines of even length (balance) so a
   two-line question never leaves one word alone. */
.rx-ask {
  display: block;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.1875rem, 0.35vw + 1.1rem, 1.375rem);
  line-height: 1.26; letter-spacing: -0.016em; color: var(--paper-ink); text-wrap: balance;
}
.rx-help { max-width: 60ch; padding-top: 0.45rem; font-size: 0.9375rem; line-height: 1.5; color: var(--paper-soft); text-wrap: pretty; }
.rx-q .rx-well { margin-top: 0.85rem; }
.rx-options { display: grid; gap: 0.5rem; margin-top: 1.05rem; }
.rx-q .form-error { margin-top: 0.85rem; }
.rx-q .rx-text { margin: 1.05rem 0 0; }
/* "Something else": its box opens under the answers; an error sits between
   the box's label and the box (GOV.UK's place for it) */
.rx-q .rx-other { margin: 0.75rem 0 0; max-width: 30rem; }
.rx-other label { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--paper-ink); }
.rx-q .rx-other .form-error { margin: 0 0 0.5rem; }
.rx-other input { width: 100%; min-height: 3rem; }
.rx-other input[aria-invalid="true"] { border-color: var(--contradicted-paper); box-shadow: inset 0 0 0 1px var(--contradicted-paper); }

/* A tiny answer set (Yes · No · Not sure) sits on one line as pills, as
   wide as their words; every other answer is a full-width row. */
.rx-q .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.05rem; }

/* a section of a screen, named after the SFBB safe method it fills in — in
   the SFBB's own words, so sentence case: an upper-case label of a long
   method name ("Personal hygiene and fitness to work") takes two lines */
.rx-method {
  margin: 0.5rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rx-hair-firm);
  font-family: var(--display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.005em; line-height: 1.3; color: var(--base);
}
.rx-method:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- an answer: a tile you tap. Chosen = cream with an olive ring and mark,
       never a solid olive fill (ten ticked rows would turn the sheet green). --- */
.rx-option,
.rx-q .chip {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start;
  min-height: 3rem; padding: 0.8rem 0.95rem;
  background: var(--rx-sheet); color: var(--paper-ink);
  border: 1px solid var(--rx-hair-firm); border-radius: 12px; box-shadow: var(--rx-shadow-1);
  font-size: 1rem; line-height: 1.4; text-align: left; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: border-color 0.16s var(--rx-ease), background-color 0.16s var(--rx-ease), box-shadow 0.16s var(--rx-ease), transform 0.09s ease;
}
.rx-q .chip {
  display: inline-grid; grid-template-columns: 1.125rem auto; gap: 0.55rem; align-items: center; max-width: 100%;
  padding: 0.6rem 1.05rem 0.6rem 0.8rem; min-height: 2.75rem; border-radius: 999px; font-size: 0.9375rem; line-height: 1.3;
}
/* a label and, under it, its hint: examples or a condition, quieter */
.rx-tile__text { min-width: 0; text-wrap: pretty; }
.rx-tile__hint { display: block; margin-top: 0.12rem; font-size: 0.875rem; line-height: 1.4; color: var(--paper-soft); }
@media (hover: hover) and (pointer: fine) {
  .rx-option:hover, .rx-q .chip:hover { border-color: rgba(69, 75, 55, 0.55); box-shadow: 0 1px 2px rgba(28, 26, 21, 0.05), 0 6px 14px -8px rgba(28, 26, 21, 0.20); }
}
.rx-option:active, .rx-q .chip:active { transform: scale(0.985); background: var(--press-paper); }
.rx-option input, .rx-q .chip input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0;
  /* the empty mark carries "not chosen": 5.59:1 on the sheet; the tile's own
     outline is decorative, its label already names it */
  border: 1.5px solid var(--paper-soft); border-radius: 999px; background: var(--rx-sheet);
}
.rx-q .chip input { width: 1.125rem; height: 1.125rem; margin-top: 0; }
.rx-option input[type="checkbox"], .rx-q .chip--multi input { border-radius: 5px; }
.rx-option:has(input:checked), .rx-option.is-on,
.rx-q .chip:has(input:checked), .rx-q .chip.is-on {
  background: var(--rx-chosen); border-color: var(--base); color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--base);
}
.rx-option:has(input:checked) input, .rx-q .chip:has(input:checked) input { border-color: var(--base); }
.rx-option input[type="radio"]:checked, .rx-q .chip:not(.chip--multi) input:checked {
  background: radial-gradient(circle, var(--base) 0 38%, var(--rx-sheet) 42%);
}
.rx-option input[type="checkbox"]:checked, .rx-q .chip--multi input:checked {
  background-color: var(--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFFCF6' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 5.8-6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.rx-option:has(input:focus-visible), .rx-q .chip:has(input:focus-visible) { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.rx-option input:focus-visible, .rx-q .chip input:focus-visible { outline: none; }

/* "None of these yet" / "None of these": always the last tile, after a thin
   dashed rule. Choosing it clears the other ticks; ticking any other clears it. */
.rx-none-sep { border: 0; border-top: 1px dashed var(--rx-hair-firm); margin: 0.2rem 0; }
.rx-q .chips .rx-none-sep { flex-basis: 100%; }
.rx-options .rx-none-sep { grid-column: 1 / -1; }
/* a wide screen: short answers two or three to a row (the script picks; never two-and-one) */
@media (min-width: 40rem) {
  .rx-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- a count: minus, the value, plus ------------------------------------------------------ */
.rx-stepper { display: inline-flex; align-items: stretch; margin-top: 1.05rem; background: var(--rx-sheet); border: 1px solid var(--rx-field); border-radius: 999px; box-shadow: var(--rx-shadow-1); }
.rx-stepper button { width: 3rem; min-height: 3rem; border: 0; border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 1.375rem; font-weight: 600; color: var(--paper-ink); transition: background-color 0.12s ease; }
.rx-stepper button:active { background: var(--press-paper); }
.rx-stepper input { width: 3.5rem; border: 0; background: none; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--paper-ink); -moz-appearance: textfield; }
.rx-stepper input::placeholder { color: var(--paper-hint); }
.rx-stepper input::-webkit-inner-spin-button, .rx-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- the foot of a screen ----------------------------------------------------------------------- */
.rx-form__foot { margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-paper); display: grid; gap: 0.75rem; }
.rx-form__foot .btn { width: 100%; }
.rx .rx-form__foot .backlink { justify-self: center; margin: 0; color: var(--paper-soft); text-decoration: none; }
.rx .rx-form__foot .backlink:active { color: var(--paper-ink); background: var(--press-paper); }
@media (min-width: 40rem) {
  .rx-form__foot { grid-template-columns: auto 1fr; align-items: center; }
  .rx-form__foot .btn { width: auto; min-width: 16rem; justify-self: end; grid-column: 2; grid-row: 1; }
  .rx .rx-form__foot .backlink { justify-self: start; grid-column: 1; grid-row: 1; }
}

/* "Not saved yet": a quiet line that stays until the save goes through */
.rx-toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  max-width: min(30rem, calc(100vw - 2rem)); padding: 0.7rem 1.1rem;
  background: var(--paper-ink); color: var(--vellum); border-radius: 999px;
  font-size: 0.875rem; line-height: 1.4; text-align: center; box-shadow: var(--rx-shadow-lift);
}

/* ==========================================================================
   The free check — /rescue/preview/
   ========================================================================== */

.rx-gaps { list-style: none; margin: 0; padding: 0; }
.rx-gap { padding-block: 0.9rem; border-top: 1px solid var(--line-paper); }
.rx-gap:first-child { border-top: 0; padding-top: 0.15rem; }
.rx-gap:last-child { padding-bottom: 0; }
.rx-gap__title { display: block; color: var(--paper-ink); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.rx-card .rx-gap p { margin-top: 0.3rem; font-size: 0.9375rem; }
.rx-card .rx-gap .rx-gap__said { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft); }
.rx-gaps + .rx-gaps { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-paper); }

/* Today · Do first · Important · Good practice — a hierarchy, strongest first */
.rx-tag {
  display: inline-block; margin-bottom: 0.35rem; padding: 0.1rem 0.55rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6;
  border: 1px solid currentColor; border-radius: 999px;
}
.rx-tag--today { background: var(--unverified-paper); border-color: var(--unverified-paper); color: var(--rx-sheet); }
.rx-tag--first { color: var(--unverified-paper); }
.rx-tag--important { color: var(--base); }
.rx-tag--good { color: var(--paper-soft); }

/* Important and Good practice fold behind "Show N more" */
.rx-more { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-paper); }
.rx-more button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.1rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--base); text-decoration: underline; text-decoration-color: var(--rx-hair-firm); text-underline-offset: 0.25em; }
.rx-more button::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.16s var(--rx-ease); }
.rx-more button[aria-expanded="true"]::after { transform: translateY(0.1rem) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .rx-more button:hover { text-decoration-color: currentColor; } }

/* S2: what you get / what Rellony does not do */
.rx-scope__cols { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .rx-scope__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
.rx-scope h3 { margin-bottom: 0.6rem; font-size: 1rem; }
.rx-card .rx-scope__count { margin: -0.15rem 0 0.6rem; font-size: 0.9375rem; line-height: 1.5; color: var(--paper-ink); }
.rx-scope ul { list-style: none; margin: 0; padding: 0; }
.rx-scope li { position: relative; padding: 0.45rem 0 0.45rem 1.5rem; border-bottom: 1px solid var(--line-paper); font-size: 0.9375rem; line-height: 1.45; color: var(--paper-soft); }
.rx-scope li:last-child { border-bottom: 0; }
.rx-scope li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.6rem; height: 1px; background: var(--rx-hair-firm); }
.rx-scope .rx-scope__does li::before { content: "\2713"; top: 0.45rem; width: auto; height: auto; background: none; color: var(--confirmed-paper); font-weight: 700; }
.rx-sample { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-paper); font-size: 0.9375rem; }

/* --- the price panel: an olive head, the paper you fill in below it ------------------------------ */
.rx .rx-price { padding: 0; overflow: hidden; box-shadow: var(--rx-shadow-lift); }
.rx-price__head { padding: clamp(1.35rem, 1.4vw + 0.9rem, 2.25rem) clamp(1.35rem, 1.4vw + 0.9rem, 2.25rem) clamp(1.1rem, 1vw + 0.8rem, 1.6rem); }
.rx-price__head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; font-size: 1.1875rem; color: var(--bone); }
.rx-price__head .price__figure { color: var(--bone); }
.rx-price__points { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.rx-price__points li { padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.45; color: var(--sage); }

/* --- "Not for you right now?" -------------------------------------------------------------------- */
.rx-exit { padding: 1.1rem clamp(1.35rem, 1.4vw + 0.9rem, 2.25rem) clamp(1.25rem, 1.2vw + 0.85rem, 2rem); text-align: center; font-size: 0.875rem; color: var(--paper-soft); }
.rx-exit .linkish { position: relative; color: var(--paper-soft); text-decoration-color: var(--rx-hair-firm); }
.rx-exit .linkish::after { content: ""; position: absolute; inset: -12px -8px; }
.rx-exit-q { text-align: left; }
.rx-exit-q .rx-ask { display: block; font-size: 1.0625rem; }
.rx-exit-q .rx-options { margin-left: 0; margin-top: 0.75rem; }
.rx-exit-q .rx-option { font-size: 0.9375rem; }
/* the four reasons are buttons (one tap sends), drawn as answer tiles without a mark */
.rx .rx-option--button { display: block; width: 100%; font-family: inherit; font-weight: 400; }
.rx .rx-option--button[aria-pressed="true"] { background: var(--rx-chosen); border-color: var(--base); box-shadow: inset 0 0 0 1px var(--base); }
.rx .rx-option--button[aria-busy="true"] { cursor: progress; }
.rx-option--button:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.rx-exit-note { margin-top: 0.9rem; }
.rx-exit-note .field { margin-bottom: 0.75rem; }
.rx .rx-exit-note .btn { width: auto; min-width: 8rem; }
.rx-exit .rx-well { text-align: left; font-size: 0.9375rem; }

/* --- when we can't help ---------------------------------------------------------------------------- */
.rx-card.rx-refer p { font-size: 1.0625rem; line-height: 1.6; color: var(--paper-ink); }
.rx-refer .rx-quiet { margin-top: 0.75rem; }

/* ==========================================================================
   Phone: the bar that keeps the one action in reach. When it shows is the
   page's own rule (stickyBar in js/dom.js); it also hides while the footer
   is on screen, and never shows at 64rem and wider.
   ========================================================================== */
.rx-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 252, 246, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--rx-hair);
  box-shadow: 0 -10px 30px -18px rgba(28, 26, 21, 0.35);
  transition: transform 0.2s var(--rx-ease), opacity 0.2s var(--rx-ease), visibility 0s linear 0s;
}
.rx-sticky[hidden] { display: block !important; transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.2s var(--rx-ease), opacity 0.2s var(--rx-ease), visibility 0s linear 0.2s; }
.rx-sticky .btn { width: 100%; min-height: 3rem; }
.btn__meta { margin-left: 0.5rem; font-weight: 500; opacity: 0.8; }
@media (min-width: 64rem) { .rx-sticky, .rx-sticky[hidden] { display: none !important; } }

/* --- the footer: the site's olive band, S1, the five links, who runs it ----------------------------- */
.rx .site-foot { text-align: center; }
.rx-foot__s1 { max-width: 60ch; margin: 0 auto; font-size: 0.9375rem; line-height: 1.55; color: var(--bone); text-wrap: balance; }
.rx .site-foot .foot__links { margin-top: 1.25rem; }
.rx .site-foot .foot__note p { font-size: 0.8125rem; line-height: 1.55; color: var(--sage); text-wrap: balance; }
.rx .site-foot .foot__note p + p { margin-top: 0.6rem; }
.rx .site-foot .foot__note a { color: var(--bone); }

/* --- phones ------------------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .rx-q { padding: 1.5rem 0 1.6rem; }
  .rx-option { padding: 0.75rem 0.85rem; }
  .rx .rx-form { padding: 1.25rem 1.1rem; }
  .rx-q .chip { padding: 0.55rem 0.95rem 0.55rem 0.75rem; }
  /* five links: a centred wrap gives 3 + 2 */
  .rx .site-foot .foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; max-width: 18rem; margin-inline: auto; }
}

/* below 360 px (an iPhone SE 1st gen): tighter sheet and rows, so a
   28-character answer still takes one line */
@media (max-width: 22.49rem) {
  .rx .rx-form { padding: 1.1rem 0.85rem; }
  .rx-option { gap: 0.6rem; padding: 0.7rem 0.75rem; font-size: 0.9375rem; }
  .rx-start-note { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rx-sticky, .rx-sticky[hidden] { transition: none; }
}

/* ==========================================================================
   Phase 5 — the checkout, the paid questions, the pack page, the legal pages
   (design v1.5 §11). Same materials: paper, warm sheets, one olive card.
   ========================================================================== */

/* --- the checkout: the paper under the price panel's olive head ------------------------------------ */
.rx-pay { display: grid; gap: 1rem; padding: clamp(1.25rem, 1.2vw + 0.9rem, 2rem) clamp(1.35rem, 1.4vw + 0.9rem, 2.25rem) 0; }
.rx-pay__form { display: grid; gap: 1rem; }
.rx-pay__form .field { margin: 0; }
.rx-pay__form input { width: 100%; min-height: 3rem; }
.rx-pay .btn { width: 100%; }
.rx-summary { display: grid; gap: 0.35rem; padding: 0.95rem 1rem; font-size: 0.9375rem; }
.rx-summary:focus { outline: none; }
.rx-summary:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.rx-summary p { margin: 0; color: var(--paper-ink); overflow-wrap: anywhere; }
.rx-summary .rx-summary__h { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--base); }
.rx-summary__suggest { padding: 0.45rem 0.6rem; border-radius: 6px; background: rgba(150, 36, 26, 0.06); }
.rx-summary .linkish { min-height: 2.75rem; padding: 0 0.15rem; }
.rx-summary__edit a { color: var(--paper-ink); }
.rx .rx-s3 { font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.rx .rx-s3 a { color: var(--paper-ink); }
.rx .rx-s3.is-invalid { border-color: var(--contradicted-paper); box-shadow: inset 0 0 0 1px var(--contradicted-paper); }
.rx-paybuttons { display: grid; gap: 0.6rem; min-height: 6.6rem; align-content: start; transition: opacity 0.2s var(--rx-ease); }
.rx-paybuttons.is-busy { opacity: 0.45; pointer-events: none; }
.rx-paybuttons paypal-button, .rx-paybuttons paypal-basic-card-container { display: block; width: 100%; }
.rx-paybuttons__wait { display: grid; gap: 0.6rem; }
.rx-paybuttons__wait span { height: 3rem; border-radius: 999px; background: var(--rx-track); }
@media (prefers-reduced-motion: no-preference) { .rx-paybuttons__wait span { animation: rx-breathe 1.2s ease-in-out infinite alternate; } }
.rx-card .rx-pay__note, .rx-pay__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--paper-soft); text-align: center; }
.rx-pay__status:empty { display: none; }
.rx-wait { position: relative; padding-left: 2.2rem; }
.rx-wait::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 0.85rem; height: 0.85rem; margin-top: -0.425rem; border-radius: 999px; border: 2px solid var(--rx-track); border-top-color: var(--base); }
@media (prefers-reduced-motion: no-preference) { .rx-wait::before { animation: rx-spin 0.9s linear infinite; } }
@keyframes rx-spin { to { transform: rotate(360deg); } }

/* --- after payment, and other one-card screens -------------------------------------------------- */
.rx-done { max-width: 38rem; }
.rx-done .rx-action { display: grid; gap: 1rem; }
.rx .rx-action__lead { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: var(--bone); text-wrap: pretty; }
.rx-done .rx-action .btn-note { margin-top: 0; }
.rx-done__ref { margin-top: 1rem; }
.rx-action .btn-note--top { margin: 0 0 0.85rem; }
.rx-again { display: grid; gap: 0.75rem; }
.rx-again .btn { width: 100%; }
.rx-again__form { display: grid; gap: 0.75rem; }
.rx-again__form input { width: 100%; min-height: 3rem; }
.rx .rx-olive .rx-again__done { margin: 0; color: var(--bone); line-height: 1.5; }
.rx .rx-olive .form-error { background: rgba(240, 239, 227, 0.12); color: var(--bone); }
.rx-again__done:focus { outline: none; }

/* --- the paid questions ------------------------------------------------------------------------- */
.rx-progress--paid { grid-template-columns: repeat(var(--n, 11), minmax(0, 1fr)); gap: 0.25rem; }
.rx-progress--paid li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rx-q-note { margin-top: 1rem; text-align: center; }
.rx-text .hint { margin: 0 0 0.4rem; font-size: 0.875rem; }
.rx-text input { width: 100%; min-height: 3rem; }
.rx-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.rx .rx-suggest__b { min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid var(--rx-hair-firm); border-radius: 999px; background: var(--rx-sheet); color: var(--paper-ink); font: inherit; font-size: 0.875rem; cursor: pointer; box-shadow: var(--rx-shadow-1); }
.rx .rx-suggest__b:active { background: var(--press-paper); transform: scale(0.97); }
.rx-struct { margin-top: 1.05rem; display: grid; gap: 0.5rem; }
.rx-struct textarea { width: 100%; min-height: 9rem; line-height: 1.5; }
.rx .rx-struct select, .rx .rx-freq {
  min-height: 2.75rem; padding: 0.35rem 2rem 0.35rem 0.7rem; border: 1px solid var(--rx-field); border-radius: 8px;
  background: var(--rx-sheet); color: var(--paper-ink); font: inherit; font-size: 0.9375rem; max-width: 100%;
}
.rx .rx-freq:disabled { opacity: 0.45; }
.rx .rx-sched__h { margin: 0.9rem 0 0.1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; color: var(--base); }
.rx-sched__h:first-child { margin-top: 0; }
.rx-sched, .rx-own, .rx-suppliers, .rx-checks__sfbb { list-style: none; margin: 0; padding: 0; }
.rx-sched__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line-paper); }
.rx-sched__item { display: flex; gap: 0.65rem; align-items: flex-start; min-height: 2.75rem; padding-top: 0.55rem; cursor: pointer; font-size: 0.9375rem; line-height: 1.4; }
.rx-sched__row.is-off .rx-sched__item span { color: var(--paper-soft); }
.rx-struct input[type="checkbox"], .rx-sched__dis input, .rx-steps input, .rx-day input { accent-color: var(--base); width: 1.15rem; height: 1.15rem; flex: none; margin: 0.1rem 0 0; }
.rx-sched__row--own { grid-template-columns: minmax(0, 1fr) auto; }
.rx-sched__row--own input[type="text"] { grid-column: 1 / -1; width: 100%; min-height: 2.75rem; }
.rx-sched__dis { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; font-size: 0.875rem; }
.rx .rx-remove { justify-self: start; min-height: 2.75rem; padding: 0 0.15rem; font-size: 0.875rem; color: var(--paper-soft); }
.rx .rx-add { justify-self: start; width: auto; min-height: 2.75rem; margin-top: 0.4rem; padding-inline: 1.2rem; font-size: 0.9375rem; }
.rx-menu { display: grid; gap: 0.4rem; }
.rx-menu__eg { margin: 0.1rem 0 0.4rem 2.2rem; }
.rx-menu__eg label { display: block; margin-bottom: 0.2rem; font-size: 0.875rem; font-weight: 600; }
.rx-menu__eg .hint { margin: 0 0 0.35rem; font-size: 0.8125rem; }
.rx-menu__eg input { width: 100%; min-height: 2.75rem; }
.rx-checks { display: grid; gap: 0.4rem; padding-bottom: 0.6rem; }
.rx-checks__sfbb li { position: relative; padding: 0.3rem 0 0.3rem 1.4rem; font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft); }
.rx-checks__sfbb li::before { content: "\2713"; position: absolute; left: 0; color: var(--confirmed-paper); font-weight: 700; }
.rx-own li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.rx-own input { width: 100%; min-height: 2.75rem; }
.rx-extra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; padding: 0.75rem 0; border-top: 1px solid var(--line-paper); }
@media (min-width: 40rem) { .rx-extra { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; } }
.rx-extra:first-child { border-top: 0; padding-top: 0; }
.rx-extra__what { font-weight: 600; font-size: 0.9375rem; color: var(--paper-ink); }
.rx-card .rx-extra__detail, .rx-extra__detail { margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft); max-width: 52ch; }
.rx-supplier { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; padding: 0.9rem 1rem; background: var(--vellum); border-radius: var(--r-input); }
.rx-supplier .field { margin: 0; }
.rx-supplier input[type="text"] { width: 100%; min-height: 2.75rem; }
.rx-days { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rx-days legend { width: 100%; margin-bottom: 0.3rem; font-size: 0.875rem; font-weight: 600; color: var(--paper-ink); }
.rx-day { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.7rem; border: 1px solid var(--rx-hair-firm); border-radius: 999px; background: var(--rx-sheet); font-size: 0.875rem; cursor: pointer; }
.rx-day:has(input:checked) { background: var(--rx-chosen); border-color: var(--base); }
.rx-day input { margin: 0; }

/* check your answers */
.rx-sum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.rx-card .rx-sum__head h2 { margin: 0; }
.rx .rx-sum__change { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--base); }
.rx-sum dl { margin: 0; }
.rx-sum__row { display: grid; gap: 0.15rem; padding: 0.6rem 0; border-top: 1px solid var(--line-paper); }
@media (min-width: 40rem) { .rx-sum__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; } }
.rx-sum dt { font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft); }
.rx-sum dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--paper-ink); overflow-wrap: anywhere; }
.rx-sum dd.is-missing { color: var(--contradicted-paper); font-weight: 600; }
.rx .rx-make { display: grid; gap: 0.75rem; margin-top: 1rem; }
.rx-make .btn { width: 100%; }
@media (min-width: 40rem) { .rx-make .btn { width: auto; min-width: 16rem; justify-self: end; } }

/* --- the pack page --------------------------------------------------------------------------------- */
.rx-dates { max-width: 60ch; font-size: 1rem; }
/* one column on a phone in the page's order (intro, SFBB card, plan, scope); from 64rem the SFBB card
   stands beside the plan and stays in view */
.rx-packgrid { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "sfbb" "plan" "scope"; }
.rx-packgrid > .rx-intro { grid-area: intro; }
.rx-packgrid > .rx-sfbb { grid-area: sfbb; }
.rx-packgrid > .rx-plan { grid-area: plan; }
.rx-packgrid > .rx-scope { grid-area: scope; }
@media (min-width: 64rem) {
  .rx-packgrid { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); gap: 1.25rem 1.5rem;
    grid-template-areas: "intro sfbb" "plan sfbb" "scope sfbb"; }
  .rx-packgrid > .rx-sfbb { position: sticky; top: 1.5rem; }
}
/* a fold (details): the whole row is the button, with our own arrow (Safari drops the marker of a flex summary) */
.rx-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.rx-fold > summary::-webkit-details-marker { display: none; }
.rx-fold > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: -0.2rem 0.3rem 0 auto;
  border-right: 2px solid var(--paper-soft); border-bottom: 2px solid var(--paper-soft); transform: rotate(45deg); transition: transform 0.15s ease; }
.rx-fold[open] > summary::after { margin-top: 0.3rem; transform: rotate(-135deg); }
.rx-fold > summary:focus-visible { outline: 2px solid var(--base); outline-offset: 3px; border-radius: 0.375rem; }
@media (prefers-reduced-motion: reduce) { .rx-fold > summary::after { transition: none; } }
.rx-intro p { color: var(--paper-ink); }
.rx-plan-pdf { display: grid; gap: 0.4rem; margin-top: 1rem; }
.rx-plan-pdf .btn { width: 100%; }
@media (min-width: 40rem) { .rx-plan-pdf .btn { width: auto; justify-self: start; padding-inline: 1.6rem; } }
.rx-plan { display: grid; gap: 1rem; }
.rx-plan > h2 { margin-top: 0.5rem; font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.625rem); }
.rx-plan__intro { max-width: 62ch; color: var(--paper-soft); font-size: 0.9375rem; line-height: 1.55; }
.rx-week h3 { margin-bottom: 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-paper); font-size: 1.0625rem; color: var(--base); }
.rx-week--today h3 { color: var(--unverified-paper); }
.rx-week__sub { font-weight: 500; color: var(--paper-soft); }
.rx-plan__done { font-size: 0.9375rem; color: var(--paper-soft); }
.rx-plan__done strong { color: var(--paper-ink); }
.rx-week h3 + .rx-topic { margin-top: -0.4rem; }
.rx-topic + .rx-topic { border-top: 1px solid var(--line-paper); }
.rx-topic > summary { padding: 0.45rem 0; }
.rx-topic__title { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--paper-ink); }
.rx-topic__count { flex: none; font-size: 0.8125rem; color: var(--paper-soft); font-variant-numeric: tabular-nums; }
.rx-topic.is-done .rx-topic__count { color: var(--confirmed-paper); font-weight: 600; }
.rx-topic[open] { padding-bottom: 0.9rem; }
.rx-topic__where { margin: 0.1rem 0 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: var(--paper-soft); }
.rx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.rx-steps .rx-option { cursor: pointer; }
.rx-steps .rx-option:has(input:checked) .rx-tile__text > :first-child { color: var(--paper-soft); }
.rx-step__when { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--confirmed-paper); }
.rx-step__when:empty { display: none; }
.rx-topic__ev { margin-top: 0.5rem; }
.rx-sfbb h2 { color: var(--bone); font-size: 1.125rem; margin-bottom: 0.25rem; }
.rx-sfbb__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.rx-sfbb__steps > li { counter-increment: step; display: grid; gap: 0.7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rx .rx-sfbb .rx-sfbb__step { margin: 0; color: var(--sage); font-size: 0.9375rem; line-height: 1.5; }
.rx-sfbb__step strong { display: block; margin-bottom: 0.2rem; color: var(--bone); font-family: var(--display); font-size: 1rem; }
.rx-sfbb__step strong::before { content: counter(step) " · "; }
.rx-sfbb .btn { width: 100%; }
.rx-sfbb .btn-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sage); }
.rx-sfbb__out { display: grid; gap: 0.7rem; }
.rx-sfbb__out:empty { display: none; }
.rx .rx-sfbb__out p { margin: 0; color: var(--bone); }
.rx .rx-sfbb__wrong { padding: 0.75rem 0.9rem; border-radius: var(--r-input); background: rgba(240, 239, 227, 0.12); line-height: 1.5; }
.rx-scope--fold summary { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }
.rx-scope--fold[open] summary { margin-bottom: 1rem; }
.rx-order { align-items: center; }

/* --- Terms, Refunds, Legal information -------------------------------------------------------------- */
.rx-legal { max-width: 46rem; }
.rx-legal .h1-rule { display: block; }
.rx-legal h2 { margin: 2rem 0 0.5rem; font-size: 1.125rem; color: var(--paper-ink); }
.rx-legal p, .rx-legal li { max-width: 68ch; color: var(--paper-ink); line-height: 1.6; }
.rx-legal p + p { margin-top: 0.6rem; }
.rx-legal .rx-legal__sub { padding-left: 1.25rem; }
.rx-legal ul { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
.rx-legal li + li { margin-top: 0.35rem; }
.rx-legal .rx-legal__summary { margin: 1rem 0 0.5rem; }
.rx-legal .rx-fine { margin-top: 2rem; }

/* --- Giorgi's review page ----------------------------------------------------------------------------- */
.rx-review__facts .rx-sum__row:first-child { border-top: 0; padding-top: 0; }
.rx-review__fold > summary { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }
.rx-review__plan { margin: 0.75rem 0 1rem; padding-left: 1.25rem; font-size: 0.9375rem; }
.rx-review__plan > li + li { margin-top: 0.6rem; }
.rx-review__plan ul { margin: 0.25rem 0 0; padding-left: 1rem; color: var(--paper-soft); }

@media print {
  .rx .site-head, .rx .site-foot, .rx-sfbb, .rx-plan-pdf, .rx-sticky, .rx-toast { display: none !important; }
  .rx-card, .rx .panel { box-shadow: none; }
}