/* Legal pages · Terms and Privacy.
   Paper, ink, coral and the type rhythm are copied from index.html's token
   block so the legal pages and the landing page drift together rather than
   apart. Kept in one file because two documents share it; index.html and
   login.html each keep their own inline styles. */

:root {
  --color-paper: #fcf9f8;
  --color-surface: #ffffff;
  --color-ink: #1c1b1b;
  --color-copy: #5c403a;
  --color-muted: #916f68;
  --color-rule: #e6bdb5;
  --color-rule-soft: #ece7e1;
  --color-accent: #b51d00;
  --color-brand-coral: #ff6b4a;
  --color-brand-orange: #ff9d3a;
  --color-accent-wash: rgba(255, 180, 165, .16);
  --color-shadow: rgba(105, 100, 94, .07);
  --color-signature: #e4e0dc;
  /* One face, as on the landing page: the hero sets its headline, its subtitle
     and its button in Plus Jakarta, so --font-display is the same stack. */
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Real monospace only where columns matter - inline code, ports and paths -
     taking the platform face, so no webfont. index.html draws the same line.
     Page furniture (eyebrows, labels, table heads, section numbers) is set in
     the body face instead, which is what a --font-mono alias pointing at Plus
     Jakarta was already doing under a misleading name. */
  --font-code: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  /* Type rhythm, read off the hero on index.html, so leading and tracking
     follow size instead of being re-decided per block.
       display  - the page title
       headline - numbered sections
       title    - sub-heads inside a section
       body     - running copy
       label    - nav and buttons; eyebrow - uppercase micro-labels */
  --lh-display: 1.1;    --ls-display: -.045em;
  --lh-headline: 1.15;  --ls-headline: -.03em;
  --lh-title: 1.25;     --ls-title: -.02em;
  --lh-body: 1.6;       --ls-body: -.01em;
  --lh-label: 1;        --ls-label: .05em;
  --ls-eyebrow: .08em;
  /* One size scale, so every block on the page is a step on the same ladder
     rather than a number decided where it was written. Desktop values are the
     ones these pages already shipped; the mobile block below re-points the
     ladder in one place instead of overriding a dozen rules.
       micro    - uppercase eyebrows, meta, labels, section numbers, table heads
       small    - nav links, contents links, table cells
       body     - running copy
       lede     - the standfirst under the title
       title    - h3;  headline - numbered h2;  display - the page title */
  --fs-micro: .6875rem;
  --fs-small: .875rem;
  --fs-body: .9375rem;
  --fs-lede: clamp(1rem, 1.5vw, 1.0625rem);
  --fs-title: 1rem;
  --fs-headline: 1.1875rem;
  --fs-display: clamp(1.65rem, 3.4vw, 2.15rem);
  --fs-logo: 1.0625rem;
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* The phone-width block that re-points this ladder lives at the foot of the
   file: a media query adds no specificity, so it has to come after the rules it
   is meant to beat. */


*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--color-accent-wash); }

/* ---------- nav (mirrors index.html) ---------- */

.brand-gradient {
  background: linear-gradient(135deg, #FF6B4A 0%, #FF9D3A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-brand-gradient { background: linear-gradient(135deg, #FF6B4A 0%, #FF9D3A 100%); }

.site-nav {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--color-paper);
  border-bottom: 1px solid rgba(230, 189, 181, .3);
  transition: box-shadow .2s ease;
}

.site-nav.is-scrolled { box-shadow: 0 1px 6px rgba(28, 27, 27, .06); }

.site-nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding: 1rem 1.5rem;
}

.nav-logo-mark {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  text-decoration: none;
}

.nav-logo-mark svg { width: 1.75rem; height: 1.75rem; flex: none; }
.nav-logo-ink { fill: #1b1a18; }
.nav-logo-accent { fill: url(#navMarkOrange); }

.nav-logo-text {
  font-weight: 700;
  font-size: var(--fs-logo);
  letter-spacing: -.01em;
  color: #1b1a18;
  white-space: nowrap;
}

/* Mobile keeps the two legal links only; the section anchors and the download
   pill would push the row past the viewport, which is what index.html avoids
   by collapsing them into its hamburger. */
.nav-links {
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 1.25rem;
}

.nav-links .nav-link-section { display: none; }

.nav-links a {
  color: var(--color-copy);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  transition: color .2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] { color: var(--color-accent); }

.nav-cta {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.5rem;
  border-radius: 9999px;
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.nav-cta:hover { opacity: .9; }

/* ---------- masthead ---------- */

/* Two columns from 62rem up: the masthead rides in a sticky left rail and the
   document runs beside it, so the page uses the width the nav and footer
   already claim instead of stranding one narrow strip in the middle. The rail
   plus the prose measure comes to 66.5rem, which fills a 1280 viewport down to
   a ~7rem gutter; the prose itself stays capped at a readable 44rem. */
.legal-shell {
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: 7rem 1.5rem 0;
}

.legal-masthead { padding-bottom: 1.5rem; }

@media (min-width: 62rem) {
  .legal-shell {
    width: min(100%, 80rem);
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 44rem);
    justify-content: center;
    gap: 0 4.5rem;
    padding-top: 8rem;
  }

  .legal-masthead {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    padding-bottom: 0;
  }
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color .2s ease, gap .2s ease;
}

.legal-back:hover,
.legal-back:focus-visible { color: var(--color-accent); gap: .75rem; }

/* flex, not inline-flex: the eyebrow starts its own line under the back link */
.legal-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  margin-top: 1.25rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* the same slow coral pulse every section masthead on the landing page uses,
   at the landing page's own timing */
.legal-eyebrow::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 9999px;
  background: var(--color-brand-coral);
  animation: label-pulse 2.4s ease-in-out infinite;
}

@keyframes label-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}

h1 {
  margin: .5rem 0 0;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1 em { font-style: normal; color: var(--color-brand-coral); }

.legal-meta {
  margin: .75rem 0 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}

.legal-lede {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* Terms opens straight onto an h2 whose own top margin carries the gap; privacy
   opens onto a paragraph with none, so the rule has to supply it below. */
.legal-rule {
  height: 1px;
  margin: 2rem 0 1.5rem;
  border: 0;
  background: linear-gradient(90deg, var(--color-rule) 0%, var(--color-rule-soft) 45%, transparent 100%);
}

/* ---------- prose ---------- */

.legal-body { padding-bottom: 3.5rem; }

.legal-body h2 {
  text-wrap: balance;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 2.25rem 0 .625rem;
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  scroll-margin-top: 6rem;
}

.legal-num {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brand-coral);
  transform: translateY(-.15em);
}

.legal-body h3 {
  margin: 1.375rem 0 .4375rem;
  text-wrap: balance;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--color-ink);
}

.legal-body p,
.legal-body li {
  color: var(--color-copy);
  font-size: var(--fs-body);
  /* leading opens as the measure widens, so the eye finds the next line */
  line-height: 1.7;
  letter-spacing: var(--ls-body);
  /* last lines never left as a single word */
  text-wrap: pretty;
}

.legal-body p { margin: 0 0 .875rem; }
.legal-body ul { margin: .75rem 0 1rem; padding-left: 1.15rem; }
.legal-body li { margin: .35rem 0; }
.legal-body li::marker { color: var(--color-rule); }
.legal-body strong { color: var(--color-ink); font-weight: 700; }

.legal-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(181, 29, 0, .3);
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}

.legal-body a:hover,
.legal-body a:focus-visible { text-decoration-color: currentColor; }

/* ---------- contents card (privacy runs long enough to need one) ---------- */

.legal-toc {
  margin: 2rem 0 0;
  padding: 1.25rem 1.375rem 1.375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: .75rem;
}

.legal-toc-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  list-style: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}

.legal-toc-summary::-webkit-details-marker { display: none; }
.legal-toc-summary::marker { content: ""; }

.legal-toc-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: .35rem;
  border-radius: .25rem;
}

.legal-toc ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc li { counter-increment: toc; margin: 0; }

.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  color: var(--color-copy);
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  text-decoration: none;
  transition: color .2s ease;
}

.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brand-coral);
}

.legal-toc a:hover,
.legal-toc a:focus-visible { color: var(--color-accent); }

code {
  font-family: var(--font-code);
  font-size: .8125em;
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: .35rem;
  padding: .1rem .35rem;
  color: var(--color-ink);
}

/* ---------- callout card ---------- */

.card {
  margin: 1.5rem 0;
  padding: 1.25rem 1.375rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: .75rem;
  box-shadow: 0 20px 40px var(--color-shadow);
}

.card--accent {
  border-color: var(--color-rule);
  background: linear-gradient(180deg, #fffaf8 0%, var(--color-surface) 60%);
}

.card .label {
  display: block;
  margin-bottom: .75rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.card p:last-child { margin-bottom: 0; }

/* ---------- permission table ---------- */

.tablewrap {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-rule-soft);
  border-radius: .75rem;
  background: var(--color-surface);
}

table { width: 100%; border-collapse: collapse; min-width: 34rem; }

/* the permission names are two words at most; give them room to stay on one line
   so the left edge of the table reads as a column rather than a ragged stack */
th:first-child, td:first-child { width: 36%; }

th, td {
  text-align: left;
  padding: .7rem 1rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  text-wrap: pretty;
  border-bottom: 1px solid var(--color-rule-soft);
}

th {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  background: #fdfbfa;
}

td { color: var(--color-copy); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--color-ink); font-weight: 600; }

/* ---------- footer (mirrors index.html) ----------
 * Hallmark · component: signature footer · genre: modern editorial · theme: Context Move coral
 * Utility rows sit above; the logotype bleeds off the bottom edge as the sign-off.
 * Kept byte-for-byte in step with the block of the same name in index.html.
 */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  /* Monochrome sign-off. The footer lays down its own opaque neutral ground so
     the page's warm paper stops at its top edge, and it re-points the palette
     tokens at greys, which turns the whole subtree black-and-white without
     touching the rules below. */
  background: #fbfbfb;
  --color-paper: #fbfbfb;
  --color-surface: #ffffff;
  --color-ink: #1a1a1a;
  --color-copy: #6b6b6b;
  --color-accent: #1a1a1a;
  --color-rule: #bdbdbd;
  --color-rule-soft: #e2e2e2;
  --color-signature: #e6e6e6;
}

#footer > .site-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 80rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
  border-top: 1px solid var(--color-rule-soft);
}

#footer > .site-footer-inner--meta { padding-block: 3rem 2.5rem; }

/* social buttons sit in the meta bar at the bottom of the footer */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* .footer-meta a further down sets display:inline-flex with no justification
   and wins on source order, which would pin every glyph to the left edge of its
   box. Both selectors are matched here so this one is unambiguously the more
   specific. The box is 2.75rem rather than 2.25rem because the tap-target floor
   is 44px: at 2.25rem the declared height is ignored and the square comes out a
   rectangle. */
.footer-meta .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-rule-soft);
  border-radius: .75rem;
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.footer-social svg {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  fill: currentColor;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--color-rule);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* --- meta bar --- */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  font-size: .8125rem;
  color: var(--color-copy);
}

.footer-meta-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
}

.footer-meta a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-meta a:hover,
.footer-meta a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.footer-meta-tag { font-weight: 500; color: var(--color-ink); }

.footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
}

.footer-google {
  max-width: 82ch;
  margin: 1.15rem 0 0;
  font-size: .72rem;
  line-height: 1.65;
  color: var(--color-copy);
  opacity: .78;
}

.footer-google a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .2s ease, opacity .2s ease;
}

.footer-google a:hover,
.footer-google a:focus-visible { color: var(--color-accent); }

/* --- oversized ghost wordmark, cropped by the page edge --- */
/* It sits still and is simply cropped: a logotype that slides for the whole time
   the footer is on screen reads as something loading, not as a sign-off. */
.footer-signature {
  position: relative;
  z-index: 0;
  height: clamp(5rem, 13vw, 12rem);
  overflow: hidden;
  user-select: none;
}

.footer-signature-track {
  position: absolute;
  top: 0;
  /* centred rather than pinned left, so the crop falls evenly on both page edges */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--font-body);
  /* sized so the whole lockup - mark plus wordmark - clears the viewport at
     every width; a lockup cropped mid-glyph just reads as broken */
  font-size: clamp(2.75rem, 11.5vw, 14rem);
  font-weight: 800;
  /* -.045em is the display tracking the headlines use. At this size it closes
     the word space up until "Context Move" reads as one word, so the tracking
     stays loose here and the word space is set explicitly. */
  letter-spacing: -.02em;
  word-spacing: .12em;
  line-height: .78;
  white-space: nowrap;
  color: var(--color-signature);
}

.footer-signature-group {
  display: flex;
  align-items: center;
  gap: .34em;
}

.footer-signature-track svg {
  width: .72em;
  height: .72em;
  flex: none;
  fill: currentColor;
}

@media (min-width: 48rem) {
  #footer > .site-footer-inner { padding-inline: 2rem; }
}

/* a notched phone held sideways still clears its own cutout */
@media (max-width: 47.99rem) {
  #footer > .site-footer-inner {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-meta a,
  .footer-social a { transition-duration: 0ms; }
}

@media (min-width: 62rem) {
  .site-nav-inner { justify-content: space-between; }
  .nav-links { flex: 1 1 auto; justify-content: center; margin-left: 0; gap: 2rem; }
  .nav-links .nav-link-section { display: inline; }
  .nav-cta { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Phone widths. Every clamp above bottoms out on its floor long before 390px -
   3.4vw is 13px there - so the "fluid" sizes were really desktop numbers held
   flat across the whole mobile range, and the page arrived at a 26px title over
   16px standfirst over 16px sub-heads over 15px copy: four steps inside 11px,
   which reads as one large undifferentiated size rather than a hierarchy.
   The hero on index.html sets its own mobile pair outright (29.6px headline,
   14.4px subtitle, a 2:1 step) instead of leaving it to a clamp floor, and this
   does the same: the title holds, everything under it steps down, and the gaps
   between the steps widen. Body copy stays at 15px - it is the one size a legal
   document cannot afford to shrink. */
@media (max-width: 47.99rem) {
  :root {
    --fs-micro: .625rem;
    --fs-small: .75rem;
    --fs-body: .875rem;
    --fs-lede: .875rem;
    --fs-title: .875rem;
    --fs-headline: 1rem;
    --fs-display: 1.5rem;
    --fs-logo: .9375rem;
  }

  /* Standfirst, sub-head and body all land on 14px here, so rank is carried by
     weight rather than size - the way the hero's subtitle is told apart from its
     headline by colour rather than by a third size. Three sizes inside four
     pixels is what made the old page read as one undifferentiated block. */
  .legal-lede { font-weight: 500; }
  .legal-body h3 { font-weight: 700; }

  /* 1.7 was set for the 44rem desktop measure. On a ~36-character line it spaces
     the block out until a six-line paragraph reads as a page of its own. */
  .legal-body p,
  .legal-body li { line-height: 1.65; }

  /* Vertical rhythm is measured in ems of a size that just dropped, but these
     were absolute rem gaps, so the whitespace stayed desktop-sized around type
     that no longer is. */
  .legal-shell { padding-top: 6.25rem; }
  .legal-body h2 { gap: .625rem; margin-top: 1.75rem; }
  .legal-body h3 { margin-top: 1.25rem; }
  .legal-toc { padding: 1rem 1.125rem 1.125rem; }
  .card { padding: 1rem 1.125rem .875rem; }
  .legal-rule { margin: 1.5rem 0 1.25rem; }

  /* ---- contents, folded away ----
     Eleven links between the standfirst and the first word of the policy is a
     screen and a half of navigation on a phone, in front of a reader who is
     already on the page they wanted. It collapses to its own title here; the
     inline script at the foot of privacy.html closes it at this width, so with
     no script it stays open exactly as it renders on the desktop. */
  .legal-toc-summary { cursor: pointer; }
  .legal-toc-summary::after {
    content: "";
    width: .45rem;
    height: .45rem;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform .2s var(--ease-in-out);
  }
  .legal-toc[open] .legal-toc-summary::after { transform: translateY(.1em) rotate(-135deg); }
  .legal-toc:not([open]) .legal-toc-summary { margin-bottom: 0; }

  /* ---- permission table, unrolled ----
     Two columns of prose need about 34rem to hold their shape; the table kept
     that width and put itself in a horizontally scrolling box, so on a phone the
     entire second column - the half that says WHY a permission is asked for -
     sat off the right edge, cut mid-sentence, with nothing to suggest it could
     be dragged into view. Each row becomes its own small card instead: the
     permission, then the reason under a label, nothing off-screen. */
  .tablewrap {
    overflow: visible;
    margin: .875rem 0 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
  }
  table { display: block; min-width: 0; }
  thead { display: none; }
  tbody { display: block; }
  tbody tr {
    display: block;
    margin-bottom: .5rem;
    padding: .8125rem .9375rem .875rem;
    border: 1px solid var(--color-rule-soft);
    border-radius: .625rem;
    background: var(--color-surface);
  }
  tbody tr:last-child { margin-bottom: 0; }
  td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
    font-size: var(--fs-body);
  }
  td:first-child {
    width: auto;
    margin-bottom: .5rem;
    font-size: var(--fs-body);
  }
  /* the header row is hidden, so the column it labelled says so itself */
  td:last-child::before {
    content: "Why it is needed";
    display: block;
    margin-bottom: .2rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-muted);
  }
}