/* Couples.do legal pages. Tokens mirror the app (ios/Couples/DesignSystem/Theme.swift) and the home page. Apple HIG applied to the web:
@font-face { font-family: "Source Sans 3"; src: url("/assets/SourceSans3-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
   17px default text, 4.5:1 contrast in light and dark, 44px targets, a readable measure, system font stack,
   skip link + visible focus, reduced-motion friendly, respects the user's text size and colour scheme. */
:root {
  color-scheme: light dark;
  --background: #fdfdfc; --surface: #f3f3f8; --sky: #e8eff7; --foreground: #303b50; --muted: #626d80; --line: #e0e3ec;
  --accent: #56688f; --accent-text: #485a80; --on-accent: #ffffff;
  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --background: #161b26; --surface: #232a38; --sky: #25304a; --foreground: #f1f3f8; --muted: #aeb6c6; --line: #3a4356;
          --accent: #6f82ac; --accent-text: #bcc8e6; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--accent); color: var(--on-accent); padding: .75rem 1rem; border-radius: 12px; z-index: 10; }
.skip:focus { top: 1rem; }
a { color: var(--accent-text); text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
header.site, main, footer.site { width: min(100% - 2.5rem, 42.5rem); margin-inline: auto; }
@supports (padding: max(0px)) { header.site, main, footer.site { width: min(100% - max(2.5rem, env(safe-area-inset-left) + env(safe-area-inset-right) + 2rem), 42.5rem); } }
header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.25rem 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; color: var(--foreground); text-decoration: none; font-weight: 650; font-size: 1.2rem; letter-spacing: -.02em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
nav.site { display: flex; flex-wrap: wrap; gap: .25rem; }
nav.site a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .85rem; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: .95rem; }
nav.site a:hover { background: var(--surface); color: var(--foreground); }
nav.site a[aria-current="page"] { background: var(--surface); color: var(--foreground); font-weight: 600; }
main { padding-block: 1.5rem 3rem; }
h1 { font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 650; margin: 0 0 .5rem; text-wrap: balance; }
h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 650; margin: 2.4rem 0 .6rem; text-wrap: balance; scroll-margin-top: 1rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .3rem; }
p, li { text-wrap: pretty; }
p { margin: .7rem 0; }
ul, ol { padding-left: 1.3rem; } li { margin: .35rem 0; }
.meta { color: var(--muted); font-size: .95rem; margin: 0 0 1.5rem; }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--foreground); }
.glance { background: var(--sky); border-radius: 20px; padding: 1.25rem 1.4rem; margin: 1.5rem 0 2rem; }
.glance h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.glance ul { list-style: none; padding: 0; margin: 0; }
.glance li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; margin: .55rem 0; }
.glance li span[aria-hidden] { font-size: 1.1rem; }
.toc { background: var(--surface); border-radius: 16px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.toc h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--muted); text-transform: none; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2 14rem; }
.toc a { display: inline-block; padding-block: .2rem; }
details { border-top: 1px solid var(--line); padding-block: .2rem; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details p { margin-top: 0; }
.hero { display: grid; justify-items: center; text-align: center; padding-block: 1rem 2rem; }
.hero .pets { display: flex; align-items: flex-end; gap: -1rem; height: 10.5rem; margin-bottom: 1rem; }
.hero .pets img { height: 100%; width: auto; }
.hero .pets img + img { margin-left: -1.2rem; height: 86%; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: 1.4rem; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
footer.site { border-top: 1px solid var(--line); padding-block: 1.5rem 3rem; color: var(--muted); font-size: .95rem; }
footer.site a { color: var(--muted); }
@media print { header.site nav, .skip, .toc { display: none; } body { background: #fff; color: #000; } a { color: #000; } }

/* Footer links: small, quiet, underlined on hover (as on the home page). */
footer.site a { font-size: .875rem; color: var(--muted); text-decoration: none; margin-left: .75rem; }
footer.site a:hover, footer.site a:focus-visible { text-decoration: underline; color: var(--foreground); }