/* ==========================================================================
   Alshaheed Adventures — legal + support pages (/privacy, /support)

   A SEPARATE FILE, loaded only by the two routes that need it (the `pageCss`
   hook in partials/head.ejs). Two reasons:
     · test/brand.test.js asserts that NOTHING follows the footer LOGO LOCK
       rules in brand.css — an append there fails the suite outright;
     · these are the least-visited pages on the site and the most read-heavy.
       They should not tax the home page's first paint to exist.

   Everything here is built from the shipped palette and the V7 alpha ramp
   (public/tokens.css). No new hue, no effect the brand guardrail forbids.

   DYNAMIC TYPE. Every size on these two pages is stated as
   `calc(<px> * var(--type-scale))`. --type-scale is 1 in tokens.css, so on the
   web and at the default iOS text size these pages compute byte-identically to
   what they always did; the app raises it to follow Settings ▸ Display & Text
   Size ▸ Larger Text, clamped at 1.35 (www/shim.js, AlshaheedTypeScale.swift).
   THESE PAGES FIRST because they are the longest reading in the product and
   have no fixed-height geometry to break — measured in Chrome at 1.35 in both
   languages, with no clipping, no horizontal overflow and every target still
   >= 44px. The rest of the site is named in the note beside --type-scale.
   One exception, found while measuring A4 (2026-09-28) and open separately:
   at 1.35 on a 320px screen the unbroken support email in .legal-row dd is
   wider than the card column, so the first /support card overflows it and
   the page scrolls sideways (336px EN, 330px AR in the app). Fine from 360.
   ========================================================================== */

/* --legal-cards-max: the support page's card column, named once so the notice
   above the cards and the cards themselves cannot drift apart (TAS amendments
   2026-09-28 p.6 (A4)). .page-legal is the <main> of /privacy, /support and
   /delete-account in both skins, and every .legal-cards sits inside it. Here,
   not on :root: this file is not the token file. */
.page-legal {
  --legal-cards-max: 760px;
  background: var(--c-paper);
}

/* ---- page header band ---------------------------------------------------- */

.legal-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 6vw 20px;
}
.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-block-end: 16px;
}
/* The brand's karting rounded-triangle (#shp-karting, partials/shapes), the
   mark the app's legal heads use — not a CSS-drawn petal, which marketing
   flagged as a weird shape (amendments 2026-10-07). */
.legal-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--c-karting);
  clip-path: url(#shp-karting);
  display: block;
}
.legal-head h1 {
  font-size: calc(clamp(34px, 5.2vw, 60px) * var(--type-scale));
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--c-ink);
  margin: 0;
}
.legal-head h1 .accent { color: var(--c-karting); }
.legal-head .lede {
  font-size: calc(clamp(16px, 1.6vw, 19px) * var(--type-scale));
  font-weight: 600;
  color: var(--c-mute);
  max-width: 58ch;
  line-height: 1.55;
  margin: 16px 0 0;
}

/* ---- "not published yet" notice -----------------------------------------
   Deliberately loud. A reader must never take a draft policy, or a contact
   row TAS have not supplied, for the real thing. Sky yellow is the palette's
   attention hue and carries navy text at full contrast. */

.legal-draft {
  max-width: 1180px;
  margin: 0 auto 8px;
  padding: 0 6vw;
}
.legal-draft__in {
  border: 2px solid var(--c-ink);
  border-radius: 16px;
  background: var(--c-sky);
  color: var(--c-ink);
  padding: 18px 20px;
}
.legal-draft__t {
  display: block;
  font-size: calc(12px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-block-end: 8px;
}
.legal-draft p {
  margin: 0;
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  line-height: 1.55;
  max-width: 68ch;
}
/* Over a column of cards (/support), the notice takes the cards' width. The
   wrapper already shares .legal-body's max-width and padding, so the
   inline-start edges always met; the box had no cap, so from 864px wide it
   ran on past the cards' inline-end edge (266.4px at 1280: right in English,
   left in Arabic). Capping the border box at the same named width lines up
   inline-end too, at every width, in both directions (TAS amendments
   2026-09-28 p.6 (A4)). The notice's own look and its 68ch measure are
   untouched, and nothing animates: a layout constraint, not a state change.
   /privacy does not opt in; its notice heads the contents rail and prose. */
.legal-draft--cards .legal-draft__in { max-width: var(--legal-cards-max); }

/* ---- layout: prose + contents rail --------------------------------------- */

.legal-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 6vw 64px;
  display: grid;
  /* minmax(0,…) not 1fr: a grid item's automatic minimum is its MIN-CONTENT
     width, and the widest thing in the prose is a 520px table. Without this
     the column refuses to shrink and the whole page scrolls sideways on a
     phone — the table has its own scroller for exactly that reason. */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.legal-toc,
.legal-prose,
.legal-cards { min-width: 0; }

/* Contents. On a phone it is a compact wrapping grid above the prose; from
   1040px it becomes a sticky rail beside it. It carries no numbering of its
   own — the section headings already number themselves, and TAS's approved
   text may number differently or not at all. */
.legal-toc {
  background: #fff;
  border: 1px solid var(--c-line-l);
  border-radius: 16px;
  padding: 16px 18px;
}
.legal-toc h2 {
  font-size: calc(11px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 10px;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two-up from about a large phone in landscape; one column below that,
     where two would be too narrow to read. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 18px;
}
.legal-toc a {
  display: block;
  padding: 6px 0;
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
  text-decoration: none;
}
.legal-toc a:focus-visible { outline: 2px solid var(--karting); outline-offset: 2px; border-radius: 4px; }

/* ---- the document itself -------------------------------------------------
   65-75 characters is the readable measure; 1.7 leading for a long read. */

.legal-prose {
  max-width: 68ch;
  color: var(--c-ink);
  font-size: calc(16px * var(--type-scale));
  line-height: 1.7;
}
.legal-prose > :first-child { margin-block-start: 0; }
.legal-prose p { margin: 0 0 16px; }
.legal-prose h2 {
  font-size: calc(clamp(22px, 2.6vw, 30px) * var(--type-scale));
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 40px 0 14px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--c-line-l);
  scroll-margin-block-start: 90px;
}
.legal-prose h2:first-child { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.legal-prose h3 {
  font-size: calc(17px * var(--type-scale));
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 26px 0 10px;
  color: var(--c-ink);
}
.legal-prose h4 { font-size: calc(15px * var(--type-scale)); font-weight: 800; margin: 20px 0 8px; }
.legal-prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-prose li { margin-block-end: 8px; }
.legal-prose strong { font-weight: 800; }
.legal-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--a10);
  border-radius: 5px;
  padding: 1px 5px;
}
.legal-prose hr { border: 0; border-block-start: 1px solid var(--c-line-l); margin: 32px 0; }
.legal-prose a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:focus-visible { outline: 2px solid var(--karting); outline-offset: 2px; border-radius: 3px; }

/* A wide table still scrolls inside its own box on a tablet rather than letting
   the page scroll sideways — but on a PHONE it stops being a wide table at all.
   See the stacked block below.

   -webkit-overflow-scrolling: touch is gone: it has been a no-op since iOS 13
   and it was the only line here implying this scroller had been thought about
   recently. overscroll-behavior-x: contain is the line that was actually
   missing — without it a horizontal fling at the end of the table chains to the
   page, which is what the two V7 decks already prevent. */
.legal-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 0 20px;
  border: 1px solid var(--c-line-l);
  border-radius: 14px;
  background: #fff;
}
.legal-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: calc(14.5px * var(--type-scale)); }
/* the per-cell heading: carried in the markup always, shown only when stacked */
.legal-cellh { display: none; }
.legal-table th,
.legal-table td {
  text-align: start;
  vertical-align: top;
  padding: 12px 14px;
  border-block-end: 1px solid var(--c-line-l);
  line-height: 1.5;
}
.legal-table th { font-weight: 800; font-size: calc(12px * var(--type-scale)); letter-spacing: .06em; text-transform: uppercase; color: var(--c-mute); }
.legal-table tr:last-child td { border-block-end: 0; }

/* The gap marker. It has to be impossible to read as a fact: full-contrast
   navy on sky yellow, boxed, with its own label rather than blank space. */
.legal-gap {
  display: inline-block;
  background: var(--c-sky);
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  padding: 0 7px;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.7;
}

/* ---- support page rows ---------------------------------------------------- */

.legal-cards {
  display: grid;
  gap: 14px;
  max-width: var(--legal-cards-max);   /* 760px, named on .page-legal (A4) */
}
.legal-card {
  background: #fff;
  border: 1px solid var(--c-line-l);
  border-radius: 18px;
  padding: 20px 22px;
}
.legal-card h2 {
  font-size: calc(11px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 14px;
}
.legal-rows { display: grid; gap: 2px; }
.legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 0;
  border-block-end: 1px solid var(--c-line-l);
}
.legal-row:last-child { border-block-end: 0; }
.legal-row dt {
  flex: 0 0 auto;
  min-width: 150px;
  font-size: calc(13px * var(--type-scale));
  font-weight: 800;
  color: var(--c-mute);
}
.legal-row dd { flex: 1 1 220px; margin: 0; font-size: calc(16px * var(--type-scale)); font-weight: 700; color: var(--c-ink); }
.legal-row dd a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-row dd a:focus-visible { outline: 2px solid var(--karting); outline-offset: 2px; border-radius: 3px; }

.legal-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-block-end: 1px solid var(--c-line-l);
  text-decoration: none;
  color: var(--c-ink);
}
.legal-link > span { flex: 1 1 auto; min-width: 0; }
.legal-link:last-child { border-block-end: 0; }
.legal-link:focus-visible { outline: 2px solid var(--karting); outline-offset: 2px; border-radius: 8px; }
.legal-link__t { display: block; font-size: calc(17px * var(--type-scale)); font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.legal-link__d { display: block; font-size: calc(14px * var(--type-scale)); font-weight: 600; color: var(--c-mute); line-height: 1.5; margin: 0; max-width: 56ch; }
.legal-link__go { flex: 0 0 auto; width: 20px; height: 20px; stroke: var(--c-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[dir=rtl] .legal-link__go { transform: scaleX(-1); }

/* A row that is NOT a link, because the destination does not exist yet: the
   self-service deletion route (lib/legal-links ACCOUNT_DELETE_LIVE). A dead
   link is worse for a store reviewer than an honest instruction. */
.legal-static { display: block; padding: 16px 0; border-block-end: 1px solid var(--c-line-l); }
.legal-static:last-child { border-block-end: 0; }

.legal-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--c-line-l);
  border-radius: 999px;
  color: var(--c-ink);
}
.legal-social svg { width: 18px; height: 18px; fill: currentColor; }
.legal-social:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }

.legal-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--c-ink);
  color: #fff;
  font-size: calc(12px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.legal-cta:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }

/* ---- press + hover -------------------------------------------------------
   PRESS comes first because these pages are read in the app, on a touch
   screen, where hover does not exist and a tap is the only input. A row that
   does not acknowledge the tap reads as a dead row.

   HOVER is gated: on a touch device `:hover` fires on tap and STICKS, leaving
   a row painted orange after the finger has gone. */

.legal-link:active .legal-link__t,
.legal-row dd a:active,
.legal-prose a:active,
.legal-toc a:active { color: var(--c-karting); }
.legal-link:active .legal-link__go { stroke: var(--c-karting); }
.legal-social:active { border-color: var(--c-ink); }

.legal-cta { transition: transform 160ms var(--ease-out); }
.legal-cta:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .legal-toc a:hover { color: var(--c-karting); }
  .legal-prose a:hover { color: var(--c-karting); }
  .legal-row dd a:hover { color: var(--c-karting); }
  .legal-link:hover .legal-link__t { color: var(--c-karting); }
  .legal-social:hover { border-color: var(--c-ink); }
}

/* ---- responsive ----------------------------------------------------------- */

@media (min-width: 1040px) {
  /* --doc only: the contents rail belongs to the long document. The support
     page is one column of cards and must keep the full measure. */
  .legal-body--doc { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
  .legal-toc { position: sticky; top: 92px; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-toc a { font-size: calc(14px * var(--type-scale)); padding: 7px 0; }
}

@media (max-width: 640px) {
  .legal-head { padding: 34px 22px 14px; }
  .legal-head h1 { font-size: calc(32px * var(--type-scale)); }
  .legal-draft { padding-inline: 22px; }
  .legal-body { padding: 18px 22px 48px; }
  .legal-prose { font-size: calc(15.5px * var(--type-scale)); }
  /* A contents list should cost a glance, not a screen: eleven rows at the
     desktop rhythm pushed the first line of actual policy a full phone
     screen down. Tighter here, unchanged where there is room. */
  .legal-toc { padding: 14px 16px; }
  .legal-toc a { font-size: calc(13px * var(--type-scale)); padding: 4px 0; line-height: 1.35; }
  /* Tighter cells so the third column peeks past the edge — the clipped
     column is the only honest cue that the table scrolls. */
  .legal-table th,
  .legal-table td { padding: 10px 11px; }
  .legal-row dt { min-width: 100%; }
}

/* The contents list's jumps glide, on the legal screens only. The root is
   named by what it holds (main.page-legal: /privacy, /support and
   /delete-account), not bare `html`: in the app public/nav.js keeps every
   screen's stylesheet after a swap and keeps the <html> element, so a bare
   root rule outlived its screen and every later scroll that did not say
   'instant' glided (/cart's, the account pages', a checkout's). The swap
   takes .page-legal away with the screen, and the smooth root goes with it.
   An engine without :has() drops the rule and jumps at once, which is also
   what reduced motion gets. Rebase follow-up F1, 2026-09-29. */
@media (prefers-reduced-motion: no-preference) {
  html:has(main.page-legal) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  /* the press colour stays — it is feedback, not travel */
  .legal-cta { transition: none; }
  .legal-cta:active { transform: none; }
}

/* ==========================================================================
   Account deletion — the in-app confirmation (/account/delete), its receipt
   (/account/deleted) and the public page Google's Data safety form takes
   (/delete-account).

   The one screen on this site whose job is to slow the reader down. Its whole
   argument is that the two lists are EQUAL: TAS's rule is deactivate-and-keep,
   so "what is kept" gets the same card, the same type size and the second,
   last-read position — never small print under a red button. There is no red
   button: the palette has no red, and the honest signal here is weight, not
   alarm. The safe exit is the filled navy CTA; deleting is the outlined
   karting one. Weight follows consequence.
   ========================================================================== */

.del-lists { display: grid; gap: 12px; margin: 20px 0 4px; }
.del-list {
  background: #fff;
  border: 1px solid var(--c-line-l);
  border-radius: 18px;
  padding: 18px 20px;
}
/* No coloured edge on either card (Haytham 2026-09-25: the side stripe is
   "very standard of AI designed ui"). The two are told apart by their
   headings, "What is deleted" and "What is kept". The modifier classes stay
   on the markup so both skins render as before. */
.del-list h2 {
  font-size: calc(11px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 12px;
}
.del-list ul { margin: 0; padding-inline-start: 20px; }
.del-list li {
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-ink);
  margin-block-end: 9px;
}
.del-list li:last-child { margin-block-end: 0; }
.del-why {
  margin: 12px 0 0;
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-mute);
}

/* The irreversibility line stands alone, in the palette's attention hue, so it
   cannot be skimmed past as one bullet among eight. */
.del-warn {
  margin: 14px 0 20px;
  padding: 14px 18px;
  border: 2px solid var(--c-ink);
  border-radius: 16px;
  background: var(--c-sky);
  color: var(--c-ink);
  font-size: calc(14.5px * var(--type-scale));
  font-weight: 700;
  line-height: 1.55;
}

/* Which account is about to close. On a shared phone this is the difference
   between deleting yours and deleting somebody else's. */
.del-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--c-line-l);
}
.del-who__l {
  font-size: calc(10px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.del-who__v { font-size: calc(15px * var(--type-scale)); font-weight: 800; color: var(--c-ink); word-break: break-all; }

/* The acknowledgement. A 22px box with a 12px gap clears the 8px minimum
   spacing to the field above it, and the whole row is the label, so the
   tap target is the sentence rather than the box. */
.del-ack {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 18px;
  padding: 4px 0;
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
  cursor: pointer;
}
.del-ack input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-ink);
}
.del-ack input:focus-visible { outline: 2px solid var(--c-karting); outline-offset: 2px; }

/* Deleting: outlined, karting, full width, and NEVER disabled — the server is
   the only judge of whether the box was ticked, so the button still works with
   JavaScript broken, which is how an App Review device may well arrive. */
.del-go {
  display: block;
  width: 100%;
  margin-block-start: 20px;
  padding: 15px 22px;
  border: 2px solid var(--c-karting);
  border-radius: 999px;
  background: #fff;
  color: var(--c-karting);
  font-family: inherit;
  font-size: calc(12px * var(--type-scale));
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.del-go:active { transform: scale(.98); background: var(--c-karting); color: #fff; }
.del-go:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Keeping the account is the filled primary, and it sits after the delete
   button so the last thing under the thumb is the safe one. */
.del-keep { width: 100%; margin-block-start: 10px; }

.del-privacy { color: var(--c-mute); text-decoration: underline; text-underline-offset: 3px; }
.del-privacy:active { color: var(--c-karting); }

/* ---- the receipt ---------------------------------------------------------- */

.del-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-ink);
}
.del-done__tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  stroke: var(--c-snow);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.del-done__kept {
  margin: 14px 0 0;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--c-line-l);
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-mute);
}

/* ---- the public page ------------------------------------------------------ */

.del-steps { margin: 0 0 4px; padding-inline-start: 20px; }
.del-steps li {
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-ink);
  margin-block-end: 8px;
}
.del-steps__note { margin-block-start: 12px; }
.del-bullets { margin: 0; padding-inline-start: 20px; }
.del-bullets li {
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-ink);
  margin-block-end: 9px;
}
.del-bullets li:last-child { margin-block-end: 0; }

@media (hover: hover) and (pointer: fine) {
  .del-go:hover { background: var(--c-karting); color: #fff; }
  .del-privacy:hover { color: var(--c-karting); }
}

@media (min-width: 720px) {
  /* Side by side only where BOTH columns still hold a readable measure. The
     app renders below 861px, so the stacked order — what goes, then what
     stays — is the one a reviewer and a customer actually read. */
  .del-lists { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the press colour stays — it is feedback, not travel */
  .del-go { transition: none; }
  .del-go:active { transform: none; }
}

/* ==========================================================================
   THE TABLE STACKS ON A PHONE.
   MEASURED 2026-09-23 at 402pt: the table was 460px inside a 356px box, so its
   third column was cut mid-word — "Perfo…", "agree…", "intere…" — with no fade,
   no shadow, no scrollbar and no hint that it scrolled. It read as broken.

   A SCROLL CUE WOULD NOT HAVE BEEN ENOUGH, which is why this is a restack and
   not an edge fade. Every cell in these tables is a whole sentence ("Create and
   run your account; sign you in; show your booking history"), so three columns
   in 356px is about 100px each however honestly the cut is signposted. Reading
   a privacy policy sideways, one hundred pixels at a time, is not a thing to
   make prettier. (The fade was doubly wrong here: the brand guardrail bans the
   one CSS feature it would have been drawn with, and test/brand.test.js fails
   on the word itself — so the audit's proposed fix could not have shipped.)

   IT ALSO FIXES THE TABLE FOR DYNAMIC TYPE. legal.css opted fully into
   --type-scale, and the one block that could not survive the ceiling was this
   one: a fixed 460px minimum with growing text inside it. Stacked, each cell
   has the full column width to grow into.

   560px, not 420px: the breakpoint is where three sentence-columns stop being
   readable, not where they start being clipped.

   SEMANTICS SURVIVE THE RESTACK, and that is measured rather than assumed.
   The accessibility tree is IDENTICAL stacked and wide — 2 tables, 4 rowgroups,
   12 rows, 6 column headers, 30 cells (Chrome, 2026-09-23). lib/legal-doc.js
   names the roles explicitly; stripping them costs two nodes here (rowgroup
   4 -> 2) rather than the whole structure the folklore promises, so they are
   insurance for stricter engines more than a rescue in this one.

   The <thead> is hidden from the eye but LEFT IN THE TREE, so the column
   headers still exist to be associated with; the visible per-cell heading is
   aria-hidden so nothing is announced twice.
   ========================================================================== */
@media (max-width: 560px) {
  /* nothing scrolls sideways any more, so the box goes with it — each row
     becomes its own card instead */
  .legal-tablewrap { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .legal-table { display: block; min-width: 0; }
  .legal-table tbody { display: block; }
  .legal-table tr { display: block; border: 1px solid var(--c-line-l); border-radius: 14px; background: #fff; padding: 6px 0; margin-block-end: 12px; }
  .legal-table tr:last-child { margin-block-end: 0; }
  .legal-table td { display: block; border-block-end: 0; padding: 8px 14px; }
  .legal-table td:last-child { padding-block-end: 10px; }

  /* visually hidden, still in the accessibility tree — the column headers have
     to exist for the roles above to associate with */
  .legal-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* the same treatment the <th> has on the wide layout, so a stacked row reads
     as the same table it is */
  .legal-cellh {
    display: block;
    font-weight: 800;
    font-size: calc(12px * var(--type-scale));
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-mute);
    margin-block-end: 3px;
  }
}