/* A personal record beside the invitation; a saved thought beside its ongoing practice. */
.readers-review :is(h1, h2, h3) { text-wrap: balance; }
.readers-opening { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 72px; padding-block: 24px 56px; align-items: start; }
.readers-invitation { grid-column: 1; grid-row: 1; }
.readers-invitation h1 { font-size: 72px; line-height: 1.03; max-width: 13ch; }
.readers-intro { font-size: 18px; margin-block: 28px; max-width: 40ch; }
.readers-free { font-size: 15px; margin-top: 20px; }
.readers-small { font-size: 14px; color: var(--muted); margin-top: 14px; }
.readers-proof { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.readers-proof figcaption { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.readers-record { border: 1px solid var(--ink); padding: 28px; }
.readers-record > header { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--field-rule); }
.readers-record h2 { font-size: 48px; line-height: 1.04; margin-top: 24px; }
.readers-count { font-size: 14px; margin-top: 14px; }
.readers-evidence { list-style: none; padding: 0; margin-top: 20px; }
.readers-evidence li { padding-block: 10px; border-top: 1px solid var(--rule); }
.readers-evidence cite { display: block; font: 500 26px/1.2 var(--display); }
.readers-evidence span { display: block; font-size: 14px; margin-top: 4px; }
.readers-review summary { min-height: 48px; cursor: pointer; padding-block: 14px; font-size: 15px; }
.readers-basis { border-block: 1px solid var(--field-rule); }
.readers-basis p, .readers-terms p, .readers-ownership p { font-size: 15px; margin-block: 12px 18px; }
.readers-chosen { margin-top: 20px; }
.readers-chosen p { font-size: 13px; }
.readers-chosen h3 { font-size: 32px; font-style: italic; margin-top: 8px; }
.readers-link { display: flex; align-items: center; min-height: 48px; font-size: 15px; margin-top: 12px; }
.readers-guide { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding-top: 20px; border-top: 1px solid var(--field-rule); }
.readers-guide img { width: 100%; height: auto; align-self: center; }
.readers-guide h2 { font-size: 28px; line-height: 1.15; }
.readers-guide h2 + p { font-size: 15px; margin-top: 14px; }
.readers-guide .readers-small { font-size: 13px; }
.readers-practice { display: grid; grid-template-columns: 1.6fr 1fr; gap: 72px; padding-block: 48px; border-top: 1px solid var(--ink); }
.readers-practice h2, .readers-sharing h2 { font-size: 44px; max-width: 20ch; }
.readers-practice h2 + p, .readers-sharing h2 + p { font-size: 17px; margin-top: 24px; }
.readers-revisit { margin-top: 32px; padding: 28px; background: var(--surface); }
.readers-revisit > p:first-child { margin-top: 0; }
.readers-revisit h3 { font-size: 38px; margin-top: 24px; }
.readers-note { border-block: 1px solid var(--field-rule); margin-top: 20px; }
.readers-note blockquote { font: 500 32px/1.2 var(--display); margin: 16px 0 24px; }
.readers-note > p { padding-bottom: 20px; }
.readers-plus { padding-left: 32px; border-left: 1px solid var(--field-rule); align-self: start; }
.readers-plus h3 { font-size: 32px; }
.readers-price { font: 500 60px/1.1 var(--display); margin-top: 14px; }
.readers-price span { display: block; font: 400 15px/1.5 var(--body); margin-block: 6px 14px; }
.readers-plus > p:not(.readers-price) { font-size: 15px; }
.readers-availability { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 20px; }
.readers-terms { border-top: 1px solid var(--field-rule); margin-top: 14px; }
.readers-sharing { display: grid; grid-template-columns: 1.6fr 1fr; gap: 72px; padding-block: 48px; border-top: 1px solid var(--ink); margin-bottom: 32px; }
.readers-sharing .button { margin-top: 28px; }
.readers-ownership { align-self: start; border-block: 1px solid var(--field-rule); }
.marketing-page:has(.readers-review) .public-nav a[aria-current] { border-bottom: 2px solid var(--accent); text-decoration: none; }
.marketing-page:has(.readers-review) .public-nav a:hover { background: var(--surface); text-decoration: underline; box-shadow: none; }
@media (max-width: 1000px) { .readers-opening, .readers-practice, .readers-sharing { column-gap: 32px; } .readers-invitation h1 { font-size: 60px; } .readers-guide { grid-template-columns: 110px 1fr; gap: 12px; } }
@media (max-width: 900px) {
  .marketing-page:has(.readers-review) .public-header { position: relative; flex-wrap: wrap; }
  .marketing-page:has(.readers-review) .public-header:has(.public-menu[open]) { background: var(--surface); border-bottom: 1px solid var(--ink); }
  .marketing-page:has(.readers-review) .public-menu[open] { width: 100%; margin-left: 0; border-bottom: 0; padding-bottom: 12px; }
  .marketing-page:has(.readers-review) .public-menu[open] > summary { position: absolute; top: 20px; right: 28px; }
  .marketing-page:has(.readers-review) .public-menu[open] nav { position: static; margin-top: 20px; padding: 10px 0 24px; border-block: 1px solid var(--rule); background: transparent; gap: 0; }
  .marketing-page:has(.readers-review) .public-menu nav > a:not(.button) { font: 400 18px/1.4 var(--body); padding-block: 12px; }
  .marketing-page:has(.readers-review) .public-menu[open] .button { width: 100%; justify-self: stretch; margin-top: 16px; }
}
@media (max-width: 700px) {
  .readers-opening, .readers-practice, .readers-sharing { display: flex; flex-direction: column; gap: 28px; padding-block: 28px 36px; }
  .readers-invitation h1 { font-size: 48px; max-width: 13ch; }
  .readers-intro { font-size: 17px; margin-block: 20px; }
  .readers-invitation { order: 1; }
  .readers-proof { order: 2; width: 100%; }
  .readers-guide { order: 3; grid-template-columns: 100px 1fr; gap: 16px; }
  .readers-guide h2 { font-size: 26px; }
  .readers-guide .readers-small { margin-left: -116px; }
  .readers-guide .readers-link { margin-left: -116px; }
  .readers-review .button { width: 100%; text-align: center; font-size: 14px; }
  .readers-record { padding: 20px; }
  .readers-record > header { font-size: 13px; gap: 12px; }
  .readers-record h2 { font-size: 42px; margin-top: 20px; }
  .readers-evidence cite { font-size: 24px; }
  .readers-practice h2, .readers-sharing h2 { font-size: 36px; }
  .readers-revisit { padding: 24px 20px; }
  .readers-revisit h3 { font-size: 34px; }
  .readers-plus { border-left: 0; padding: 24px 0 0; border-top: 1px solid var(--field-rule); width: 100%; }
  .readers-plus .readers-price { font-size: 48px; }
  .readers-ownership { width: 100%; }
}

/* Revision 3: the reader can try the naming choice; availability precedes the offer. */
.readers-chosen > p { color: var(--ink); }
.readers-name { margin-top: 14px; }
.readers-name label { display: block; font-size: 14px; margin-top: 8px; }
.readers-name input { width: 100%; min-height: 48px; margin-top: 8px; padding: 12px; border: 1px solid var(--field-rule); border-radius: 2px; font: 400 17px/1.4 var(--body); color: var(--ink); background: var(--bg); }
.readers-name input + p { margin-top: 12px; }
.readers-name summary { text-decoration: underline; text-underline-offset: 4px; }
.readers-guide { grid-template-columns: 1fr 1fr; align-items: center; }
.readers-guide img { max-width: none; }
.readers-guide h2 { font-size: 32px; }
.readers-guide > p, .readers-guide > .readers-link, .readers-import-example { grid-column: 1 / -1; }
.readers-guide > p { font-size: 15px; }
.readers-import-example { padding: 20px; background: var(--surface); }
.readers-import-example > p:first-child { margin-top: 0; }
.readers-import-example h3 { font-size: 28px; margin-top: 12px; }
.readers-import-example > p { font-size: 14px; margin-top: 8px; }
.readers-note summary { font: 500 24px/1.3 var(--display); }
.readers-revisit > .readers-small:not(:first-child) { color: var(--ink); }
.readers-availability { border: 0; margin-top: 10px; padding-top: 0; }
.readers-plus-benefits { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (max-width: 700px) {
  .readers-guide { grid-template-columns: 140px 1fr; gap: 16px; }
  .readers-guide h2 { font-size: 28px; }
  .readers-guide .readers-small, .readers-guide .readers-link { margin-left: 0; }
}