/* Paws.do legal pages. Tokens mirror the app (ios/Paws/DesignSystem/Theme.swift). Apple HIG applied to the web:
   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: #ffffff; --surface: #f0f6ff; --sky: #e5f1ff; --foreground: #202b42; --muted: #5e6d84; --line: #dbe5f0;
  --accent: #255ce4; --accent-text: #2051cc; --on-accent: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --background: #141d2e; --surface: #202c40; --sky: #24364e; --foreground: #f3f7ff; --muted: #aebcd2; --line: #394a65;
          --accent: #3d65d7; --accent-text: #aac6ff; }
}
* { 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); }