/* Prose links follow the paragraph, not the imported 24px link rule.
   Buttons and the standalone return action retain their own sizing. */
html body .header12 p:not(.emdr-return) a:not(.btn),
html body.reading-card-page .header12 li a:not(.btn) {
  font-size: inherit;
  line-height: inherit;
}

/* Only the explicitly selected EMDR privacy and Joy-Con reading surfaces. */
html body.reading-card-page .header12 .card-wrapper {
  border-radius: 16px;
}

/* Read mode: preserve the established surfaces and measure, improve hierarchy. */
html body.reading-card-page .header12 .card-box { text-align: start; overflow-wrap: break-word; }
html body.reading-card-page .header12 :is(p, li) { font-size: 19px; line-height: 1.5; }
html body.reading-card-page .header12 p { margin-block: 0 20px; }
html body.reading-card-page .header12 h2 {
  margin-block: 40px 12px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: normal;
}
html body.reading-card-page .header12 h3 {
  margin-block: 32px 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
html body.reading-card-page .header12 h2.reading-section-title { margin-top: 0; font-size: 32px; }
html body.reading-card-page .header12 :is(h2, h3)[id] { scroll-margin-top: 96px; }
html body.reading-card-page .reading-toc { margin-block: 28px 40px; padding-block: 20px; border-block: 1px solid #d2d2d7; }
html body.reading-card-page .reading-toc h2 { margin: 0 0 8px; font-size: 19px; }
html body.reading-card-page .reading-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; list-style: none; padding: 0; margin: 0; }
html body.reading-card-page .reading-toc li { font-size: 17px; line-height: 1.4; }
html body.reading-card-page .reading-toc a { display: block; padding-block: 10px; min-height: 44px; }
html body.reading-card-page :is(.reading-benefits, .reading-compatibility, .browser-steps) { padding-inline-start: 1.4em; margin-block: 0 24px; }
html body.reading-card-page :is(.reading-benefits, .reading-compatibility, .browser-steps) > li + li { margin-top: 12px; }
html body.reading-card-page .guide-steps { list-style: none; padding: 0; margin: 0; }
html body.reading-card-page .guide-steps > li + li { margin-top: 40px; }
html body.reading-card-page .guide-branch { padding: 0; margin: 0; background: transparent; }
html body.reading-card-page .guide-branch + .guide-branch { margin-top: 40px; padding-top: 8px; border-top: 1px solid #d2d2d7; }
html body.reading-card-page .guide-figure { width: 100%; max-width: 400px; margin: 24px auto 32px; overflow: visible; }
html body.reading-card-page .guide-figure-wide { max-width: 500px; }
html body.reading-card-page .guide-figure-buttons { max-width: 360px; }
html body.reading-card-page .guide-figure img { display: block; width: 100%; max-width: 100%; height: auto; }
@media (max-width: 767px) {
  html body.reading-card-page .header12 :is(p, li) { font-size: 17px; line-height: 1.5; }
  html body.reading-card-page .header12 h2 { font-size: 24px; margin-top: 32px; }
  html body.reading-card-page .header12 h3 { font-size: 20px; }
  html body.reading-card-page .header12 h2.reading-section-title { font-size: 26px; margin-top: 0; }
  html body.reading-card-page .reading-toc ul { grid-template-columns: minmax(0, 1fr); }
  html body.reading-card-page .reading-toc h2 { font-size: 19px; margin-top: 0; }
  html body.reading-card-page .guide-figure { margin-block: 20px 28px; }
}
@media (prefers-color-scheme: dark) {
  html body.reading-card-page .reading-toc,
  html body.reading-card-page .guide-branch + .guide-branch { border-color: #51515a; }
}

/* Joy-Con instructions: pair every non-hero illustration with its explanation.
   Container width, not device type, decides whether both columns remain readable. */
html body.joycon-guide .header12 .card-box { container-type: inline-size; }
@media (min-width: 768px) {
  html body.joycon-guide .header12 :is(p, li) { font-size: 18px; }
}
@media (min-width: 992px) {
  /* Avoid the legacy 75% tablet column shrinking just as the viewport widens. */
  html body.joycon-guide .header12 .card { flex-basis: 100%; max-width: 855px; }
}
@container (min-width: 620px) {
  html body.joycon-guide .guide-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: start;
    gap: 28px;
    margin-block: 28px 36px;
  }
  html body.joycon-guide .guide-pair > p { margin: 0; }
  html body.joycon-guide .guide-pair > .guide-figure { max-width: 320px; margin: 0 auto; }
  html body.joycon-guide .guide-pair-copy > :last-child { margin-bottom: 0; }
}
html body.joycon-guide .guide-figure a { display: block; border-radius: 4px; }
html body.joycon-guide .guide-figure a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }