/* ==========================================================================
   rack — legal & support pages
   Palette and type lifted from the app's DesignSystem/Theme.swift so these
   read as the same product, not a generic policy page.
   Light mode only, deliberately: these are printed, PDF'd and screenshotted
   by reviewers, and a dark variant only adds ways for that to look wrong.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Theme.swift — light values */
  --bg:            #F3EEE3;   /* Palette.bg           */
  --surface:       #ECE7DA;   /* Palette.surface      */
  --surface-muted: #DFD8C7;   /* Palette.surfaceMuted */
  --ink:           #1A1714;   /* Palette.ink          */
  --ink-2:         #8A857B;   /* Palette.inkSecondary */
  --line:          rgba(26,23,20,.10);  /* Palette.line, lightAlpha .10 */
  --rail:          #C5C1B8;   /* Palette.rail         */

  /* Accents */
  --pink:       #E79FC2;
  --lime:       #C6DE6E;
  --butter:     #EBD46A;
  --periwinkle: #AEC1E8;
  --sage:       #9DB877;
  --lilac:      #CBBEE9;
  --coral:      #E8654E;

  --r-s: 14px; --r-m: 20px; --r-l: 26px; --r-pill: 999px;

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{ max-width:760px; margin:0 auto; padding:40px 24px 96px }

/* ---- header -------------------------------------------------------------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:20px; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none;
}
/* the hanging rail: a small bar with two pastel "hangers" under it */
.brand .rail{
  width:26px; height:14px; position:relative; flex:none;
}
.brand .rail::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--rail); border-radius:2px;
}
.brand .rail::after{
  content:""; position:absolute; top:3px; left:5px;
  width:7px; height:7px; border-radius:2px; background:var(--pink);
  box-shadow:10px 0 0 var(--butter);
}
.nav{ display:flex; gap:18px; flex-wrap:wrap }
.nav a{
  font-size:14px; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--pink) }

/* ---- type ---------------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:1.6px;
  color:var(--ink-2); margin:38px 0 0;
}
h1{
  font-size:clamp(30px,6vw,42px); line-height:1.1; letter-spacing:-.035em;
  font-weight:600; margin:10px 0 12px;
}
h2{
  font-size:20px; letter-spacing:-.02em; font-weight:600;
  margin:44px 0 10px; scroll-margin-top:24px;
}
h3{ font-size:16.5px; font-weight:600; margin:26px 0 4px; letter-spacing:-.01em }
p{ margin:0 0 14px }
.lede{ color:var(--ink-2); font-size:17.5px; line-height:1.6; margin:0 0 6px }
.meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--ink-2); margin:14px 0 0;
}
a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink);
   text-decoration-thickness:2px; text-underline-offset:3px }
a:hover{ text-decoration-color:var(--ink) }
strong{ font-weight:600 }
ul{ padding-left:18px; margin:0 0 14px }
li{ margin:7px 0 }
li::marker{ color:var(--rail) }
hr{ border:0; border-top:1px solid var(--line); margin:40px 0 }

/* ---- cards --------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:20px 22px; margin:20px 0;
}
.card > :last-child{ margin-bottom:0 }
/* One card, no variants. The app draws a card as a filled surface inside a
   hairline with a soft radius — it has no accent stripe anywhere, so neither
   does this. tldr/contact/warn are kept as hooks only, styled identically. */
.card.tldr, .card.contact, .card.warn{ background:var(--surface) }

/* ---- tables -------------------------------------------------------------- */
.table-scroll{ overflow-x:auto; margin:18px 0 }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:440px }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top }
th{
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-2);
  border-bottom:1px solid var(--rail);
}
tr:last-child td{ border-bottom:0 }

/* ---- footer -------------------------------------------------------------- */
footer{
  margin-top:64px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:14px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer nav{ display:flex; gap:16px; flex-wrap:wrap }
footer a{ color:var(--ink-2); text-decoration:none }
footer a:hover{ color:var(--ink) }

/* ---- a11y ---------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:24px; top:16px; position:fixed; background:#fff; padding:10px 14px;
  border-radius:var(--r-s); border:1px solid var(--line); z-index:9 }

@media print{
  body{ background:#fff }
  .nav,.skip{ display:none }
  .card{ background:#fff }
  a{ text-decoration:none; color:#000 }
}