/* ================================================
   SHOULD YOU FAST? A TWO-MINUTE CHECK (/pages/ready.php)

   Loaded only by pages/ready.php. Colours are the site's own tokens; every text and
   background pair below was measured against WCAG AA (4.5:1 for body text):
     slate #1A2332 on white 15.8, on #F5F7FA 14.6, on #EEF2F7 14.0, on #E8A24E 7.3
     #4C566A (secondary text) on white 7.4, on #F5F7FA 6.8
     white on #B5532F (red) 4.95, on #557A61 (green) 4.84, on #8A5220 (buttons) 6.3
     #A8452A (errors, phone numbers) on white 5.9, on #FFF6F2 5.6, on #F5F7FA 5.5
     #8A5220 (links) on white 6.3, on #F5F7FA 5.9, on #FFF6F2 6.1
   --text-muted (#697883) is 4.4:1 on white, so it is not used for text here.
   ================================================ */

.rd-page {
    --rd-red: var(--burnt-sienna-fill, #B5532F);
    --rd-red-ink: #A8452A;
    --rd-amber: var(--color-warning, #E8A24E);
    --rd-amber-line: #B7791F;
    --rd-green: var(--sage-fill, #557A61);
    --rd-ink: var(--slate-dark, #1A2332);
    --rd-ink-2: var(--text-secondary, #4C566A);
    --rd-line: var(--border-color, #D8DEE9);
    --rd-control: #697883;           /* 4.4:1 on white: enough for a control's outline (3:1) */
    --rd-link: var(--bronze-text, #8A5220);
}

.rd-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Page frame ---------- */

.rd-main {
    background: var(--bg-secondary, #F5F7FA);
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.rd-container {
    max-width: 820px;
}

.rd-page h2,
.rd-page h3 {
    letter-spacing: -0.01em;
}

.rd-page a:focus-visible,
.rd-page button:focus-visible,
.rd-page summary:focus-visible,
.rd-page select:focus-visible,
.rd-num:focus-visible {
    outline: 3px solid var(--rd-ink);
    outline-offset: 3px;
}

.rd-page [tabindex="-1"]:focus {
    outline: none;
}

.rd-card {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.rd-small {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rd-ink-2);
}

/* Links inside running text are underlined: the bronze link colour is only 1.2:1 against
   the grey body text, so colour alone would not tell them apart (WCAG 1.4.1). */
.rd-page p a,
.rd-page li a,
.rd-page .rd-print-help a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rd-tel {
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(.rd-page) .rd-tel {
    color: var(--rd-red-ink);
}

:where(.rd-page) .rd-tel:hover {
    color: var(--rd-ink);
}

/* ---------- Intro ---------- */

.rd-intro h2,
.rd-read h2,
.rd-faq h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
}

.rd-intro p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.rd-key {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.rd-key li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.02rem;
    line-height: 1.5;
}

.rd-chip {
    flex: 0 0 4.75rem;
    display: inline-block;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill, 100px);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.rd-chip--red   { background: var(--rd-red);   color: #fff; }
.rd-chip--amber { background: var(--rd-amber); color: var(--rd-ink); }
.rd-chip--green { background: var(--rd-green); color: #fff; }

.rd-privacy {
    padding: 0.9rem 1rem;
    background: #EEF2F7;
    border-radius: var(--radius-md, 8px);
    color: var(--rd-ink);
}

.rd-intro .rd-small {
    margin-bottom: 0;
}

/* ---------- Form ---------- */

.rd-form {
    margin: 0;
}

.rd-step + .rd-step {
    margin-top: var(--space-lg);
}

.rd-step-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    scroll-margin-top: 110px;
}

.rd-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--rd-ink);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.rd-q {
    border: 0;
    border-top: 1px solid var(--rd-line);
    margin: 0;
    padding: 1.1rem 0 1.25rem;
    min-width: 0;
    scroll-margin-top: 110px;
}

.rd-step-title + .rd-q {
    border-top: 0;
}

/* Floated, so the browser stops drawing the legend inside the fieldset's top border:
   otherwise the divider line runs behind the question, or beside a short one. */
.rd-q-legend {
    float: left;
    width: 100%;
    white-space: normal;
    box-sizing: border-box;
    padding: 0;
    margin: 0 0 0.5rem;
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rd-ink);
}

.rd-q .rd-hint,
.rd-q .rd-error-msg,
.rd-q .rd-options {
    clear: both;
}

label.rd-q-legend {
    float: none;
    display: block;
}

.rd-hint {
    margin: -0.15rem 0 0.7rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--rd-ink-2);
}

.rd-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 24rem;
}

.rd-q--multi .rd-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
}

.rd-opt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    margin: 0;
    padding: 0.55rem 0.9rem;
    background: #fff;
    border: 2px solid var(--rd-control);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rd-ink);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.rd-opt input {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    accent-color: var(--rd-ink);
    cursor: pointer;
}

.rd-opt:hover {
    border-color: var(--rd-ink);
}

.rd-opt:has(input:checked) {
    border-color: var(--rd-ink);
    background: #EEF2F7;
    box-shadow: inset 0 0 0 1px var(--rd-ink);
}

.rd-opt input:checked + span {
    font-weight: 700;
}

.rd-opt:has(input:focus-visible) {
    outline: 3px solid var(--rd-ink);
    outline-offset: 2px;
}

.rd-select {
    display: block;
    width: 100%;
    max-width: 16rem;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
    font-size: 16px;          /* below 16px iOS zooms the page on focus */
    color: var(--rd-ink);
    background: #fff;
    border: 2px solid var(--rd-control);
    border-radius: var(--radius-md, 8px);
}

/* Errors, from the server or from js/ready.js. Not colour alone: a thick bar and a message. */
.rd-q--error,
.rd-bmi--error .rd-bmi-body {
    padding-left: 1rem;
    border-left: 5px solid var(--rd-red-ink);
}

.rd-error-msg {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--rd-red-ink);
}

.rd-q--error .rd-opt,
.rd-q--error .rd-select,
.rd-num[aria-invalid="true"] {
    border-color: var(--rd-red-ink);
}

.rd-errors {
    background: #fff;
    border: 4px solid var(--rd-red-ink);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--space-lg);
    scroll-margin-top: 110px;
}

.rd-errors h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.rd-errors p {
    margin: 0 0 0.75rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.rd-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.rd-errors li {
    margin: 0.35rem 0;
    line-height: 1.45;
}

.rd-errors a,
.rd-errors a:hover {
    color: var(--rd-red-ink);
    font-weight: 600;
    text-decoration: underline;
}

/* BMI helper */
.rd-bmi {
    margin: -0.5rem 0 1.1rem;
}

.rd-bmi-summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--rd-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rd-bmi-body {
    margin-top: 0.4rem;
    padding: 1rem 1.1rem;
    background: var(--bg-secondary, #F5F7FA);
    border-radius: var(--radius-md, 8px);
}

.rd-bmi-body .rd-hint {
    margin-top: 0;
}

.rd-bmi-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.rd-bmi-name {
    flex: 0 0 100%;
    font-weight: 700;
    color: var(--rd-ink);
}

.rd-bmi-set {
    display: inline-flex;
    gap: 0.75rem;
}

.rd-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.rd-unit label {
    font-weight: 600;
    color: var(--rd-ink);
}

.rd-num {
    width: 5rem;
    min-height: 48px;
    padding: 0.5rem 0.6rem;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--rd-ink);
    background: #fff;
    border: 2px solid var(--rd-control);
    border-radius: var(--radius-md, 8px);
}

.rd-unit--s .rd-num {
    width: 3.75rem;
}

.rd-or {
    color: var(--rd-ink-2);
    font-style: italic;
}

.rd-bmi-out {
    margin: 0;
    min-height: 1.5em;
    font-weight: 700;
    color: var(--rd-ink);
}

/* Submit */
.rd-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rd-line);
}

.rd-submit-note {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--rd-ink-2);
}

/* ---------- Buttons ---------- */

.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.rd-btn--primary,
.rd-btn--primary:visited {
    background: var(--rd-link);
    color: #fff;
}

.rd-btn--primary:hover {
    background: #6E4119;
    color: #fff;
}

.rd-btn--secondary,
.rd-btn--secondary:visited {
    background: #fff;
    color: var(--rd-ink);
    border-color: var(--rd-ink);
}

.rd-btn--secondary:hover {
    background: #EEF2F7;
    color: var(--rd-ink);
}

.rd-btn[hidden] {
    display: none;
}

/* ---------- Stepper (js/ready.js) ---------- */

.rd-progress {
    margin: 0 0 var(--space-md);
    scroll-margin-top: 110px;
}

.rd-progress-text {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rd-ink-2);
}

.rd-progress-bar {
    height: 6px;
    background: #D8DEE9;
    border-radius: 3px;
    overflow: hidden;
}

.rd-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--rd-ink);
    transition: width var(--transition-base);
}

.rd-step[hidden] {
    display: none;
}

.rd-form--stepped .rd-step + .rd-step {
    margin-top: 0;
}

.rd-step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rd-line);
}

.rd-step-nav .rd-btn--primary {
    margin-left: auto;
}

.rd-form--stepped .rd-submit-row {
    justify-content: space-between;
}

.rd-form--stepped .rd-submit-row .rd-btn--primary {
    margin-left: auto;
}

/* ---------- Result ---------- */

/* styles.css pads every <section> by 4-6rem; these sections are cards, not page bands. */
.rd-result,
.rd-letter-section {
    padding: 0;
}

.rd-result {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    scroll-margin-top: 110px;
}

.rd-result-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
}

.rd-result--red .rd-result-head   { background: var(--rd-red);   color: #fff; }
.rd-result--amber .rd-result-head { background: var(--rd-amber); color: var(--rd-ink); }
.rd-result--green .rd-result-head { background: var(--rd-green); color: #fff; }

.rd-result-icon {
    flex: 0 0 auto;
    font-size: 2.4rem;
    line-height: 1;
    margin-top: 0.15rem;
}

.rd-result-badge {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.1rem 0.7rem;
    border: 2px solid currentColor;
    border-radius: var(--radius-pill, 100px);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
}

.rd-result-title {
    color: inherit;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.rd-result-lede {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
}

.rd-result-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.rd-result-body h3,
.rd-letter-intro h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 1.25rem 0 0.75rem;
}

.rd-result-body > h3:first-child {
    margin-top: 0;
}

.rd-reasons {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.rd-reason {
    padding: 0.15rem 0 0.15rem 1rem;
    border-left: 5px solid var(--rd-red);
}

.rd-reason--amber {
    border-left-color: var(--rd-amber-line);
}

.rd-reason p {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rd-ink-2);
}

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

.rd-reason strong {
    color: var(--rd-ink);
}

.rd-reason .rd-reason-said {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--rd-ink);
}

.rd-instead,
.rd-already,
.rd-notes {
    margin-top: 1.25rem;
}

.rd-instead ul,
.rd-notes ul,
.rd-stop ul,
.rd-todo {
    margin: 0;
    padding-left: 1.25rem;
}

.rd-instead li,
.rd-notes li,
.rd-stop li,
.rd-todo li {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.rd-todo li {
    margin-bottom: 0.75rem;
}

.rd-already {
    padding: 1rem 1.25rem;
    background: #FFF6F2;
    border: 2px solid var(--rd-red);
    border-radius: var(--radius-md, 8px);
}

.rd-already h3 {
    margin-top: 0;
}

.rd-already p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.rd-stop {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: #FFF6F2;
    border: 2px solid var(--rd-red);
    border-radius: var(--radius-md, 8px);
}

.rd-stop h3 {
    margin-top: 0;
}

.rd-stop p {
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

.rd-stop ul {
    margin-bottom: 0.9rem;
}

.rd-stop .rd-stop-bp {
    margin-bottom: 0;
}

.rd-notes {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #F5F7FA);
    border-radius: var(--radius-md, 8px);
}

.rd-notes h3 {
    margin-top: 0;
}

.rd-notes p {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.rd-notes li:last-child {
    margin-bottom: 0;
}

/* ---------- Letter ---------- */

.rd-letter-section {
    margin-bottom: var(--space-lg);
}

.rd-letter-intro {
    margin-bottom: 1.25rem;
}

.rd-letter-intro h2 {
    margin-top: 0;
}

.rd-letter-intro p {
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 0.9rem;
}

.rd-print-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.rd-print-help {
    flex: 1 1 18rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--rd-ink-2);
}

/* Green: the letter is optional, so it waits behind a summary. */
.rd-letter-details {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: var(--radius-lg, 12px);
    padding: 0.4rem 1.5rem;
}

.rd-letter-details[open] {
    padding-bottom: 1.5rem;
}

.rd-letter-summary {
    display: flex;
    align-items: center;
    min-height: 52px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rd-ink);
}

.rd-letter-details[open] .rd-letter-summary {
    margin-bottom: 0.5rem;
}

/* Summaries drawn as flex boxes lose the browser's triangle, so they get a chevron. */
.rd-letter-summary,
.rd-change > summary,
.rd-bmi-summary {
    list-style: none;
}

.rd-letter-summary::-webkit-details-marker,
.rd-bmi-summary::-webkit-details-marker {
    display: none;
}

.rd-chev {
    flex: 0 0 auto;
    font-size: 0.85em;
    transition: transform var(--transition-fast);
}

.rd-letter-summary .rd-chev {
    margin-left: auto;
    padding-left: 0.75rem;
}

details[open] > summary .rd-chev {
    transform: rotate(180deg);
}

.rd-bmi-summary .rd-chev {
    margin-left: 0.45rem;
}

.rd-letter {
    background: #fff;
    border: 1px solid #BCC5CE;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(26, 35, 50, 0.10);
    padding: 2.25rem 2.5rem;
    color: var(--rd-ink);
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.rd-letter p,
.rd-letter li {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rd-ink);
}

.rd-letter p {
    margin: 0 0 0.75rem;
}

.rd-letter-kicker {
    margin: 0 0 0.25rem !important;
    font-size: 0.85rem !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rd-ink-2) !important;
}

.rd-letter-title {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 1rem;
}

.rd-letter h3 {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 1.25rem 0 0.5rem;
    color: var(--rd-ink);
}

.rd-letter ul,
.rd-letter ol {
    margin: 0 0 0.75rem;
    padding-left: 1.4rem;
}

.rd-letter li {
    margin-bottom: 0.3rem;
}

.rd-letter-sub {
    font-weight: 700;
    margin-bottom: 0.35rem !important;
}

.rd-letter-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.25rem;
}

.rd-letter-meta div {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.rd-letter-meta dt {
    font-weight: 700;
    white-space: nowrap;
}

.rd-letter-meta dd {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.rd-blank {
    display: inline-block;
    width: 100%;
    min-width: 6rem;
    height: 1.3em;
    border-bottom: 1px solid var(--rd-ink);
    vertical-align: bottom;
}

.rd-letter-fill {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.rd-letter-fill .rd-blank--wide {
    flex: 1 1 10rem;
    width: auto;
}

.rd-lines span {
    display: block;
    height: 2.1rem;
    border-bottom: 1px solid var(--rd-control);
}

.rd-lines--short {
    margin: -0.25rem 0 0.5rem;
}

.rd-nice {
    margin: 0.75rem 0 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-secondary, #F5F7FA);
    border-left: 4px solid var(--steel-blue, #4A6FA5);
    border-radius: 0 6px 6px 0;
}

.rd-nice blockquote {
    margin: 0;
}

.rd-nice p,
.rd-nice li {
    font-size: 0.95rem;
    line-height: 1.5;
}

.rd-nice p {
    margin: 0 0 0.35rem;
}

.rd-nice ul {
    margin-bottom: 0.6rem;
}

.rd-nice li {
    margin-bottom: 0.15rem;
}

.rd-nice-title {
    font-weight: 700;
}

.rd-nice figcaption {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--rd-ink-2);
}

.rd-letter-foot {
    margin: 1.25rem 0 0 !important;
    padding-top: 0.75rem;
    border-top: 1px solid #BCC5CE;
    font-size: 0.9rem !important;
    color: var(--rd-ink-2) !important;
}

/* The site's tooltips (js/tooltips.js) underline terms such as "insulin" and, in print,
   add " ()" after them (tooltips.css). Neither belongs in a letter for a doctor. Their
   position: relative also paints the word in its own layer, which scrambles the text order
   of a saved PDF ("...on the Labs website ... Autophagy"), so that goes too. */
.rd-letter .tooltip-term {
    position: static !important;
    border-bottom: 0 !important;
    cursor: auto !important;
    padding: 0 !important;
}

/* ---------- After the result ---------- */

.rd-again {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: var(--space-xl);
}

.rd-change {
    flex: 1 1 100%;
}

.rd-change > summary {
    list-style: none;
}

.rd-change > summary::-webkit-details-marker {
    display: none;
}

.rd-change[open] > summary {
    margin-bottom: 1rem;
}

.rd-change .rd-card {
    margin-bottom: 0;
}

.rd-again > .rd-btn,
.rd-change > summary {
    width: max-content;
    max-width: 100%;
}

/* ---------- Read next and questions ---------- */

.rd-read {
    margin: var(--space-xl) 0 var(--space-lg);
}

.rd-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.rd-page .rd-links a {
    display: block;
    height: 100%;
    min-height: 44px;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--rd-line);
    border-left: 4px solid var(--rd-link);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
}

.rd-links a:hover {
    border-color: var(--rd-link);
}

.rd-links strong {
    display: block;
    font-size: 1.05rem;
    color: var(--rd-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rd-links span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--rd-ink-2);
}

.rd-faq h3 {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 1.25rem 0 0.35rem;
}

.rd-faq p {
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 0.5rem;
    color: var(--rd-ink);
}

.rd-faq .rd-small {
    margin-top: 1rem;
    color: var(--rd-ink-2);
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
    .rd-main {
        padding: var(--space-lg) 0 var(--space-2xl);
    }

    .rd-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rd-card {
        padding: 1.25rem 1.1rem;
    }

    .rd-intro h2,
    .rd-read h2,
    .rd-faq h2 {
        font-size: 1.4rem;
    }

    .rd-step-title {
        font-size: 1.3rem;
    }

    .rd-q-legend {
        font-size: 1.08rem;
    }

    .rd-q--multi .rd-options {
        grid-template-columns: 1fr;
    }

    .rd-result-head {
        padding: 1.25rem 1.1rem;
        gap: 0.75rem;
    }

    .rd-result-icon {
        font-size: 1.9rem;
    }

    .rd-result-title {
        font-size: 1.55rem;
    }

    .rd-result-body {
        padding: 1.25rem 1.1rem 1.4rem;
    }

    .rd-letter {
        padding: 1.4rem 1.1rem;
    }

    .rd-letter-details {
        padding: 0.3rem 1rem;
    }

    .rd-letter-details[open] {
        padding-bottom: 1rem;
    }

    .rd-letter-details .rd-letter {
        padding: 1.25rem 0.9rem;
    }

    .rd-btn {
        width: 100%;
    }

    .rd-step-nav .rd-btn,
    .rd-form--stepped .rd-submit-row .rd-btn {
        width: auto;
        flex: 1 1 8rem;
    }

    .rd-again > .rd-btn,
    .rd-change > summary {
        width: 100%;
    }
}

/* ---------- Print: the letter only ---------- */

@media print {
    @page {
        size: A4;
        margin: 14mm 16mm;
    }

    html,
    body {
        background: #fff !important;
    }

    body {
        font-size: 11pt;
        line-height: 1.45;
        color: #000;
    }

    /* Site furniture: header, footer, coach, cookie banner, toasts, tooltips, modal. */
    .main-header,
    .main-footer,
    .chatbot-fab,
    .chatbot-window,
    .cookie-consent-banner,
    #cookie-consent-banner,
    .toast-notification,
    .tooltip-container,
    #info-modal {
        display: none !important;
    }

    /* With a letter on the page, print nothing else. Green keeps its letter behind a
       summary, so it prints the letter only once that is open. */
    .rd-has-letter .rd-noprint,
    .rd-has-letter-optional:has(.rd-letter-details[open]) .rd-noprint {
        display: none !important;
    }

    .rd-main {
        padding: 0 !important;
        background: none !important;
    }

    .rd-container {
        max-width: none !important;
        padding: 0 !important;
    }

    .rd-letter-section,
    .rd-letter-details {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    .rd-letter {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 11pt;
        line-height: 1.45;
        color: #000;
    }

    .rd-letter p,
    .rd-letter li {
        font-size: 11pt;
        line-height: 1.45;
        color: #000;
    }

    .rd-letter-title {
        font-size: 17pt;
    }

    .rd-letter h3 {
        font-size: 12pt;
        margin-top: 10pt;
        break-after: avoid;
        page-break-after: avoid;
    }

    .rd-letter ul,
    .rd-letter ol,
    .rd-letter-meta,
    .rd-nice,
    .rd-lines,
    .rd-letter-foot {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rd-nice {
        background: none !important;
        border-left: 2pt solid #000;
    }

    .rd-nice p,
    .rd-nice li,
    .rd-nice figcaption {
        font-size: 10pt;
        color: #000;
    }

    .rd-lines span {
        height: 9mm;
        border-bottom-color: #000;
    }

    .rd-letter a {
        color: #000 !important;
        text-decoration: none !important;
    }

    .tooltip-term {
        border-bottom: 0 !important;
        font-weight: inherit !important;
    }

    .tooltip-term::after {
        content: none !important;
    }

    .rd-print-bar {
        display: none !important;
    }
}