/* WB-6 secondary pages: the base layout for pricing, support, legal, 404 and the ID-12 link
   fallbacks. Canonical compositions: marketing-web.html, 2026-09-14 frames. Shared tokens
   (radius pill/16/28/40, the four elevations, --fs-* / --lh-* and --d-*) live in soft.css;
   the Pearl route layer that has to outrank soft.css lives in pages-art.css, which loads
   after it on every route here. Nothing in this file edits legal article bytes; it only
   styles them.
   Round 4 (plan §2, call 14): text sets at 13 / 15 / 17 / 20px with a 1.4 leading for
   labels, controls and short lines and 1.6 for running text; display sizes come only from
   the --d-* triples; radii only from pill / 16 / 28 / 40 or a nested outer − padding. */

summary,
li {
  text-wrap: pretty;
}

/* Public carrier evidence for the two app-only SMS opt-ins. The phone panels
   reproduce the exact shipped English disclosures; they are documentation,
   never interactive enrollment controls. */
/* Lane SP (2026-10-20): the soft.css spacing scale; the disclosures are unchanged. */
.sms-proof-intro {
  padding: var(--space-top) 0 0;
}

.sms-proof-note {
  max-width: 64ch;
  margin: 20px 0 0;
  padding: 16px 20px;
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.sms-proof-section {
  margin-top: var(--space-section);
  padding: 0;
}

.sms-proof-grid {
  display: grid;
  gap: 32px;
}

.sms-proof-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 48px;
  align-items: center;
  padding: 40px;
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised);
}

.sms-proof-card__copy h3 {
  margin: 10px 0 20px;
  font-family: var(--font-display);
  font-size: var(--d-card, 32px);
  line-height: var(--d-card-lh, 1.05);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sms-proof-card__copy ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}

.sms-phone {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  border: 8px solid light-dark(#1f1f22, #050506);
  border-radius: 44px;
  background: light-dark(#f2f2f7, #000);
  box-shadow: 0 24px 60px light-dark(rgb(27 32 38 / 18%), rgb(0 0 0 / 55%));
  color: light-dark(#111114, #f5f5f7);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

.sms-phone__status,
.sms-phone__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.sms-phone__status {
  grid-template-columns: 1fr 1fr;
  padding: 13px 24px 8px;
  font-size: 12px;
  font-weight: 700;
}

.sms-phone__status span:last-child {
  text-align: right;
}

.sms-phone__nav {
  min-height: 44px;
  padding: 0 16px 8px;
  border-bottom: 1px solid light-dark(rgb(60 60 67 / 14%), rgb(84 84 88 / 65%));
}

.sms-phone__nav span:first-child {
  color: var(--brand-primary);
  font-size: 32px;
  line-height: 1;
}

.sms-phone__nav strong {
  font-size: 16px;
  text-align: center;
}

.sms-phone__body {
  padding: 34px 20px 52px;
  text-align: center;
}

.sms-phone__body--settings {
  padding-top: 28px;
  text-align: left;
}

.sms-phone__mark {
  margin-bottom: 10px;
  color: var(--brand-primary);
  font-size: 40px;
}

.sms-phone h4 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.sms-phone__body > p:not(.sms-phone__footnote):not(.sms-phone__caption) {
  margin: 0 0 28px;
  color: light-dark(#6c6c70, #aeaeb2);
  font-size: 15px;
}

.sms-phone__caption {
  margin: 0 0 8px 16px;
  color: light-dark(#6c6c70, #aeaeb2);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sms-phone__group {
  overflow: hidden;
  margin: 0 0 12px;
  border-radius: 12px;
  background: light-dark(#fff, #1c1c1e);
  text-align: left;
}

.sms-phone__row {
  display: flex;
  min-height: 50px;
  align-items: center;
  padding: 10px 16px;
  color: inherit;
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
}

.sms-phone__row + .sms-phone__row {
  border-top: 1px solid light-dark(rgb(60 60 67 / 14%), rgb(84 84 88 / 65%));
}

.sms-phone__row--action {
  color: var(--brand-primary);
  font-weight: 600;
}

.sms-phone__row--toggle {
  justify-content: space-between;
  gap: 16px;
  color: inherit;
  font-weight: 500;
}

.sms-toggle {
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  padding: 2px;
  border-radius: 999px;
  background: light-dark(#e9e9ea, #39393d);
}

.sms-toggle span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
}

.sms-phone__footnote {
  margin: 0 14px 24px;
  color: light-dark(#6c6c70, #aeaeb2);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.sms-phone__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.sms-proof-details {
  margin-top: var(--space-section);
  padding: 0;
}

.sms-proof-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.sms-proof-details__grid > div {
  display: grid;
  gap: 6px;
  padding: 20px;
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
}

.sms-proof-details__grid strong {
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sms-proof-details__grid span {
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
}

@media (max-width: 820px) {
  .sms-proof-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .sms-phone {
    width: min(100%, 390px);
    margin-inline: auto;
  }

  .sms-proof-details__grid {
    grid-template-columns: 1fr;
  }
}

/* The round 3 contract's 44px hit height for a standalone text link (soft.css owns the
   utility; this is the same rule, so these routes keep it whichever file loads first). */
.hit-44 {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

.pages-intro {
  padding: 72px 0 36px;
}

/* Display headings take their size, leading and tracking from soft.css's triples
   (.t-h1 / .t-h2 / .t-card and the selectors it maps); only spacing lives here. */
.pages-title {
  margin: 0 0 24px;
}

.pages-lede {
  max-width: 40ch;
  margin: 0 0 24px;
  color: var(--ink-secondary);
  font-size: var(--fs-20);
  line-height: var(--lh-prose, 1.6);
}

.pages-section {
  padding: 96px 0;
}

.pages-section-title {
  margin: 0 0 28px;
}

.pages-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 24px;
}

.pages-section-head > p {
  max-width: 32ch;
  margin: 0 0 28px;
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.pages-caption {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

/* Pricing ---------------------------------------------------------------------------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 40px 0 48px;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  border-radius: var(--r-28);
  background: var(--surface);
}

.plan-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
}

.plan-title {
  margin: 0;
}

/* The price token (DESIGN.md: --d-price, 40px, lining tabular numerals). */
.plan-price {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--d-price, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums tabular-nums;
}

.plan-terms {
  margin: 0 0 24px;
}

.plan-duration {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.plan-description {
  margin: 4px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
}

.plan-features {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
}

.plan-features li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

/* Lucide check as a mask, so it takes the secondary ink like every icon on the site. */
.plan-features li::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-top: calc((1.4em - 16px) / 2);
  background: var(--ink-secondary);
  -webkit-mask: url('/icons/check.svg') center / 16px 16px no-repeat;
  mask: url('/icons/check.svg') center / 16px 16px no-repeat;
}

.plan-action {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.plan-action .button {
  width: 100%;
}

.plan-notes {
  gap: 24px var(--grid-gap, 32px);
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--border);
}

.plan-notes p {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.plan-notes strong {
  color: var(--ink);
  font-weight: 600;
}

.comparison-scroll {
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: var(--lh-ui, 1.4);
}

.comparison-table th:first-child {
  width: 46%;
  padding-left: 0;
}

.comparison-table thead th {
  padding-top: 24px;
  padding-bottom: 20px;
  font-size: var(--fs-15);
  font-weight: 600;
}

.comparison-table tbody th {
  font-weight: 400;
}

.comparison-table td {
  color: var(--ink-secondary);
}

.cell-mark {
  display: block;
  width: 20px;
  height: 20px;
}

.organization-panel {
  display: grid;
  gap: 28px;
  padding: 40px;
  border-radius: var(--r-40);
  background: var(--surface);
}

.organization-panel h2 {
  margin: 0 0 12px;
}

.organization-panel .organization-availability {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.organization-panel__copy > p:last-child {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}

/* FAQ disclosures (pricing, support) ---------------------------------------------------
   Each row is soft.css's .disclosure (round 4 contract: the raised-row hover and the
   chevron that turns 90 degrees); this file lays the row out on its rules. */

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
  interpolate-size: allow-keywords;
}

/* Answers open and close by height (240ms) where the browser can animate to auto;
   elsewhere they open at once. Reduced motion: at once everywhere (pages-art.css). */
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 240ms var(--ease-out),
    content-visibility 240ms allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

/* The question text sits on the row's rules: no inline padding (round 4, C2). */
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  column-gap: 16px;
  align-items: start;
  padding: 22px 0;
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary {
  padding-bottom: 10px;
}

.faq-answer {
  max-width: 60ch;
  padding: 0 36px 26px 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.faq-answer p {
  margin: 0;
}

.faq-answer strong {
  color: var(--ink);
  font-weight: 600;
}

/* Support ------------------------------------------------------------------------------ */

.support-layout {
  padding: 32px 0 48px;
}

.support-contact {
  align-self: start;
}

.support-contact-main {
  padding: 32px;
  border-radius: var(--r-28);
  background: var(--surface);
}

.support-contact h2 {
  margin: 0 0 16px;
}

.support-contact-main > p {
  margin: 0 0 24px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.support-safety {
  margin-top: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.support-safety h3 {
  margin: 0 0 8px;
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.support-safety p,
.support-help-note {
  margin: 0 0 14px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.support-help-note {
  margin-top: 20px;
}

.support-questions {
  min-width: 0;
}

.faq-search {
  margin: 0 0 24px;
}

.faq-search label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.faq-search input {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
}

.faq-search input::placeholder {
  color: var(--ink-secondary);
  opacity: 1;
}

.faq-search .pages-caption {
  margin-top: 8px;
  font-size: var(--fs-13);
  line-height: var(--lh-ui, 1.4);
}

.faq-empty {
  padding: 26px 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

/* Legal ---------------------------------------------------------------------------------
   Legal prose is preserved byte for byte. This frame adds document navigation without
   changing the versions, policy statements or existing section links. */

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 620px);
  align-items: start;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 48px;
}

.legal-nav {
  position: sticky;
  top: 104px;
}

.legal-nav-label {
  margin: 0 0 12px;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.legal-shortcuts {
  margin-top: 28px;
}

.legal {
  min-width: 0;
  max-width: 620px;
  margin: 0;
  padding: 0;
}

/* The article's h1 and h2 cannot take a class (its bytes are fixed), so they read the
   --d-h1 and --d-card triples directly; at 760px and below soft.css steps --d-h1 down,
   so the phone h1 matches every other route's. */
.legal h1 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: var(--d-h1);
  font-weight: 700;
  line-height: var(--d-h1-lh);
  letter-spacing: var(--d-h1-ls);
}

.legal__meta {
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-prose, 1.6);
}

.legal__meta strong {
  color: var(--ink);
  font-weight: 600;
}

/* Section headings in the display face, so the document reads in the site's voice. */
.legal h2 {
  margin: 48px 0 16px;
  font-family: var(--font-display);
  font-size: var(--d-card);
  font-weight: 700;
  line-height: var(--d-card-lh, 1.05);
  letter-spacing: var(--d-card-ls, -0.01em);
  scroll-margin-top: 112px;
}

.legal h3 {
  margin: 32px 0 12px;
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}

.legal p,
.legal li {
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}

.legal p {
  margin: 0 0 20px;
}

.legal ul,
.legal ol {
  padding-left: 22px;
}

.legal li {
  margin-bottom: 10px;
}

.legal strong {
  font-weight: 600;
}

.legal a {
  color: var(--ink);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal .legal__meta {
  margin-bottom: 32px;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-prose, 1.6);
}

.legal__summary {
  margin-bottom: 40px;
  padding: 32px;
  border-radius: var(--r-28);
  background: var(--surface);
}

.legal__summary h2 {
  margin: 0 0 16px;
}

.legal__summary p,
.legal__summary li {
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.legal__summary p:last-child,
.legal__summary ul:last-child {
  margin-bottom: 0;
}

.legal .toc {
  columns: 2;
  column-gap: 28px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.legal .toc li {
  margin-bottom: 10px;
  font-size: var(--fs-13);
  line-height: var(--lh-ui, 1.4);
  break-inside: avoid;
}

.legal .toc a {
  text-decoration: none;
}

.legal .toc a:hover {
  text-decoration: underline;
}

.legal__table {
  max-width: 100%;
  margin: 20px 0 28px;
  overflow-x: auto;
}

.legal__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}

.legal__table th,
.legal__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  text-align: left;
  vertical-align: top;
}

.legal__table th {
  background: var(--surface);
  font-weight: 600;
}

/* "Not yet live": a pearl mini-pill pressed into the page. */
.soon {
  display: inline-block;
  padding: 1px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
  vertical-align: 2px;
  white-space: nowrap;
}

/* 404 ------------------------------------------------------------------------------------ */

.not-found {
  min-height: 62vh;
  padding-top: 88px;
  padding-bottom: 48px;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
}

@media (max-width: 960px) {
  .plan-card {
    padding: 24px;
  }

  .plans-grid {
    gap: 16px;
  }
}

@media (max-width: 760px) {
  .pages-intro {
    padding: 48px 0 24px;
  }

  .pages-lede {
    font-size: var(--fs-17);
  }

  .plans-grid,
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .plans-grid {
    gap: 20px;
    padding-top: 24px;
  }

  .plan-card {
    padding: 28px 24px 24px;
  }

  .pages-section {
    padding: 64px 0;
  }

  .pages-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .pages-section-head > p {
    max-width: 100%;
    margin-bottom: 16px;
  }

  .organization-panel {
    padding: 28px 24px;
    border-radius: var(--r-28);
  }

  .organization-panel .button {
    white-space: normal;
  }

  .support-layout {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .support-contact-main {
    padding: 28px 24px;
  }

  .faq-answer {
    padding-right: 0;
  }

  .legal-layout {
    padding-top: 32px;
    padding-bottom: 24px;
    gap: 32px;
  }

  .legal-nav {
    position: static;
  }

  .legal-nav-label,
  .legal-shortcuts {
    display: none;
  }

  .legal h2 {
    margin-top: 40px;
  }

  .legal__summary {
    padding: 24px;
  }

  .legal .toc {
    columns: 1;
    padding-block: 8px;
  }

  /* Round 5: the article's own contents list is a tap list on phones, one 44px row per
     section (check-compositions.py's target rule), at the UI text size. */
  .legal .toc li {
    margin-bottom: 0;
    font-size: var(--fs-15);
  }

  .legal .toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .not-found {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 24px;
  }
}

/* Legal tables on phones (round 4, call 17): each table scrolls sideways on its own, its
   first column stays put, and a soft shade on the right edge says there is more. The
   shade is the scrolling-shadow pattern: a pearl cover travels with the content
   (background-attachment: local) and hides the shade once the end is reached; the shade
   itself stays on the box (scroll). Stacked cards were rejected: generated labels would
   repeat the header text to screen readers and break table semantics in Safari. The
   wrapper stops scrolling so there is one scroller per table. */
@media (max-width: 600px) {
  .legal__table {
    overflow: visible;
  }

  .legal table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(
          to left,
          var(--surface) 24px,
          light-dark(rgb(232 233 229 / 0), rgb(26 29 40 / 0))
        )
        right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgb(13 15 20 / 18%), rgb(13 15 20 / 0)) right
        center / 16px 100% no-repeat scroll,
      var(--surface);
    scrollbar-width: thin;
  }

  .legal table :is(th, td) {
    min-width: 180px;
  }

  .legal table :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 132px;
    max-width: 132px;
    background: var(--surface);
    box-shadow: inset -1px 0 0 var(--border);
  }
}

/* 360px and below (round 5, call 15): a two-column table fits the column instead of
   scrolling. Its first column takes 34%, its cells drop the scroller's minimum widths and
   hyphenate a long word ("conver-sations") before breaking it anywhere, and the sticky
   column and the edge shade go, since nothing scrolls.
   Tables of three or more columns keep the scroller above, sticky first column included. */
@media (max-width: 360px) {
  .legal table:not(:has(tr > :nth-child(3))) {
    display: table;
    width: 100%;
    table-layout: fixed;
    overflow: visible;
    background: none;
  }
  .legal table:not(:has(tr > :nth-child(3))) :is(th, td) {
    min-width: 0;
    padding-inline: 10px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .legal table:not(:has(tr > :nth-child(3))) :is(th, td):first-child {
    position: static;
    width: 34%;
    min-width: 0;
    max-width: none;
    box-shadow: none;
  }
}

@media print {
  .legal-nav {
    display: none;
  }

  .legal-layout {
    display: block;
    padding: 0;
  }

  .legal {
    max-width: none;
  }

  .legal__table {
    overflow: visible;
  }
}