/* Marketing area adjustments (site.css tokens only). */

/* Legal documents: today's text, in the mock's document style. Documents without contents (refund policy, cookies)
   use one column. Today's HTML has a table (privacy: data retention) and bare lists. */

.account-legal--plain { grid-template-columns: minmax(0, 1fr); }
.rdm-legal { overflow-wrap: anywhere; }
.rdm-legal h2 { scroll-margin-top: 16px; }
.rdm-legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); display: block; overflow-x: auto; }
.rdm-legal th, .rdm-legal td { padding: 8px 10px; border: 1px solid var(--rule-2); text-align: left; vertical-align: top; }
.rdm-legal th { background: var(--paper-2); font-weight: 700; }
.rdm-legal p:empty { display: none; }
.rdm-legal-more { margin-top: 1.5em; }

/* Help: subgroups inside a topic, and today's FAQ answers (Markdown with images and HTML). */
.rdm-faq-sub { margin-top: var(--s-5, 24px); }
.rdm-faq-sub > .h3 { margin-bottom: 6px; color: var(--ink-2); }
.account-faq .prose img { max-width: 100%; height: auto; }
.account-faq .prose { overflow-wrap: anywhere; }
.account-faq .prose iframe { max-width: 100%; }
.account-faq > li { scroll-margin-top: 16px; }
.account-faq-group, .rdm-faq-sub { scroll-margin-top: 16px; }

/* Links inside a list item of today's legal text (terms §4 lists five documents in one sentence) wrap as one box each:
   an inline link split over two lines would cover its neighbours' tap area. A list of links (privacy: "the policy
   covers the following areas") gets full-height taps. Links in paragraphs stay inline text. */
.rdm-legal li > a { display: inline-block; max-width: 100%; }
.rdm-legal li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Today's brochure copy in the new layout (17 Oct): an h4 subtitle under a section heading, today's paragraphs in a
   row or a band head, the tool pages' three intro boxes and the about page's three figures. */
.rdm-sub { color: var(--ink); font-weight: 600; }
.account-rows .rdm-sub { color: var(--ink); max-width: 60ch; }
.rdm-copy > * + * { margin-top: .75em; }
.rdm-copy a, .band-intro a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.band-head .rdm-copy { color: var(--ink-2); }
.rdm-guide .rdm-sub { margin-top: .5em; }
.rdm-guide .rdm-guide-cta { margin-top: 20px; }
/* signed in, a tool page's start buttons are create forms (rdm_start_button): the form adds no box of its own */
.rdm-start { display: contents; }
.rdm-intros { display: grid; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.rdm-intros li { display: grid; gap: 6px; align-content: start; }
.rdm-intros p { color: var(--ink-2); }
@media (min-width: 760px) { .rdm-intros { grid-template-columns: repeat(3, minmax(0, 1fr)); -moz-column-gap: 32px; column-gap: 32px; } }
.rdm-stats { display: grid; gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); }
.rdm-stats li { display: grid; gap: 4px; align-content: start; }
.rdm-stat-n { font-family: var(--serif); font-size: var(--fs-5); font-weight: 600; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.rdm-stats p:not(.rdm-stat-n) { color: var(--ink-2); }
@media (min-width: 640px) { .rdm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); -moz-column-gap: 28px; column-gap: 28px; } }

/* Today's images back (17 Oct). Media rows: a section's words with today's screenshot beside them on desktop (sides
   alternate down the list), the screenshot under the words on phones and tablets. Screenshots keep their own ratio
   (width/height attributes + height:auto), capped so a 1606 px capture never outgrows its column. */
.rdm-media { display: grid; gap: 20px; }
.rdm-media-text { display: grid; gap: 4px; align-content: start; min-width: 0; }
.rdm-media-fig { min-width: 0; }
.rdm-media-fig picture, .rdm-intros picture, .rdm-stats picture { display: block; }
.rdm-media-fig img { display: block; width: auto; max-width: min(100%, 480px); height: auto; margin-inline: auto; }   /* never wider than the file */
.account-rows > li.rdm-media { gap: 20px; }
.account-rows .rdm-media h3 { grid-row: auto; }
.rdm-media--head { margin-bottom: 28px; }
.rdm-media--head .rdm-media-text { gap: 0; }
.rdm-media--head .rdm-media-text > .link { justify-self: start; margin-top: 10px; font-weight: 600; }
.rdm-media--head .band-intro + .band-intro { margin-top: 10px; }
.rdm-guide { display: grid; gap: 48px; }
.rdm-guide .rdm-media-text { display: block; }
@media (min-width: 900px) {
  .rdm-media { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); -moz-column-gap: 56px; column-gap: 56px; align-items: center; }
  .rdm-media--text { grid-template-columns: minmax(0, 1fr); }
  .account-rows > li.rdm-media { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); -moz-column-gap: 56px; column-gap: 56px; align-items: center; }
  .account-rows > li.rdm-media > * { grid-column: auto; }
  .account-rows > li.rdm-media:nth-child(even), .rdm-guide > .rdm-media:nth-child(even) { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .account-rows > li.rdm-media:nth-child(even) > .rdm-media-fig, .rdm-guide > .rdm-media:nth-child(even) > .rdm-media-fig { order: -1; }
  .rdm-guide { gap: 72px; }
  .rdm-media--head { margin-bottom: 36px; }
}

/* Today's banner picture beside the hero's words, wide screens only (display:none + loading=lazy below 1100 px, so it
   is never fetched there). It sits behind the words, on the hero's white, as on today's page. */
.rdm-hero { position: relative; }
.rdm-hero > .account-head { position: relative; z-index: 1; }
.rdm-hero-art { display: none; }
@media (min-width: 1100px) {
  .rdm-hero-art { display: block; position: absolute; top: 40px; right: var(--gutter); width: min(44%, 540px); height: auto; pointer-events: none;
    clip-path: inset(4px); -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }   /* the file has a faint edge line; fade its empty left side */
}

/* Today's small icons where the new page had none: the tool pages' three intro boxes and the about figures. */
.rdm-intro-icon, .rdm-stat-icon { display: block; width: 88px; height: auto; margin: -6px 0 2px -8px; }   /* the files have ~10% padding */

/* Help, a group URL: that group's questions right under the search (usability checks 21 Oct, item 14) */
.rdm-faq-lead--group { margin-top: 12px; }
.rdm-faq-lead--group + .account-head { padding-top: 24px; }   /* the topics right after the group's questions (23 Oct: 12 → 15+ at 1280×720) */
.rdm-faq-lead--group + .account-head .account-topics { margin-top: 0; }
/*
 * Redesign, marketing area (agent C): what the mock's account.css doesn't cover because the Rails pages carry today's
 * content (today's legal HTML, today's FAQ answers). Loaded after redesign.css + redesign-account.css.
 *

 */