/* Paws & Clover: the brand's look, 2026-10-21 (material/design/industries/pets.md, owner rejected the old
   Nunito Sans look). Rethink Sans 400/800 self-hosted, oat + kale + green, a marigold action, one radius
   family (pill buttons, 12px fields, 20px cards, 24px sheets), soft tinted depth. Every stream page wears it.
   Colours are the pets.md OKLCH tokens written as sRGB hex: the contrast check (lib/visual.ts) reads rgb() only. */
@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/rethink-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Rethink Fallback"; src: local("Arial"), local("Helvetica Neue"); size-adjust: 101%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --oat: #faf6ee;        /* page */
  --oat-2: #f3eadb;       /* sunk panels, hover */
  --surface: #fffdfa;    /* cards, fields, sheets */
  --line: #ded6c9;         /* borders */
  --hair: rgb(23 34 28 / .12);  /* 1px hairline */
  --ring: rgb(23 34 28 / .22);  /* control outline */
  --ink: #17221c;         /* text */
  --ink-2: #445149;       /* secondary text */
  --kale: #143e2e;       /* headings, the dark band */
  --green: #27694a;      /* brand: logo, selected, progress, links */
  --green-soft: #d8eee1;  /* selected fill, calm zone */
  --marigold: #fabb41;     /* primary button, ink text */
  --marigold-2: #ed9e2f;   /* button hover and pressed */
  --calm: #60bb83;        /* ruler: working zone */
  --coral: #d45b3d;        /* ruler: too close marker, never body text */
  --coral-soft: #ffe4da;
  --bad: #ac3225;
  --r-chip: 8px; --r-field: 14px; --r-card: 20px; --r-sheet: 24px; --r-btn: 999px;
  --shadow-1: 0 1px 2px rgb(23 34 28 / .06), 0 1px 1px rgb(23 34 28 / .04);
  --shadow-2: 0 1px 2px rgb(23 34 28 / .05), 0 4px 12px rgb(23 34 28 / .06), 0 16px 32px rgb(23 34 28 / .06);
  --shadow-sheet: 0 -2px 14px rgb(23 34 28 / .08), 0 -12px 40px rgb(23 34 28 / .10);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --font: "Rethink Sans", "Rethink Fallback", system-ui, Arial, sans-serif;
  --gut: clamp(20px, 5vw, 32px);
  /* names other pages already use (brand-needs.md) */
  --accent: var(--green); --accent-dark: var(--kale); --soft: var(--green-soft); --paper: var(--oat);
  /* the site kit, styled from here (material/design/components.md, Styling the kit) */
  --kit-accent: var(--green); --kit-ink: var(--ink); --kit-bg: var(--surface); --kit-line: var(--ring);
  --kit-soft: var(--oat-2); --kit-err: var(--bad); --kit-ok: var(--green); --kit-radius: var(--r-field);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; } /* a slide-in step never widens the page: phones zoomed out and taps missed (2026-10-22) */
html { touch-action: manipulation; background: var(--oat); color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/1.5 var(--font); color: var(--ink); background: var(--oat); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
@media (hover: hover) { a:hover { color: var(--kale); } }
h1, h2, h3 { margin: 0 0 .5em; color: var(--kale); font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(34px, 3vw + 22px, 56px); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 1vw + 26px, 38px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut); }
.page { padding-top: 40px; padding-bottom: 64px; }
.page > h1, .page > h2, .page > p, .page > ul, .page > ol, .page > table { max-width: 720px; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, transparent); outline-offset: 2px; }

/* Buttons: one marigold pill per screen, a quiet secondary, a text ghost. Five states each. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--r-btn);
  font: 800 18px/1.1 var(--font); letter-spacing: -0.005em; text-decoration: none; text-align: center; cursor: pointer;
  color: var(--ink); background: var(--marigold);
  box-shadow: 0 1px 2px rgb(105 60 0 / .25), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform 120ms var(--ease-out), background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
@media (hover: hover) { .btn:hover { background: var(--marigold-2); color: var(--ink); } }
.btn:active { transform: scale(.97); background: var(--marigold-2); }
.btn:focus-visible { outline: 3px solid var(--kale); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--oat-2); color: color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: none; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.alt, .btn--secondary { background: var(--surface); color: var(--kale); box-shadow: inset 0 0 0 1.5px var(--ring), var(--shadow-1); }
@media (hover: hover) { .btn.alt:hover, .btn--secondary:hover { background: var(--oat-2); color: var(--kale); } }
.btn.alt:active, .btn--secondary:active { background: var(--oat-2); }
.btn--ghost { background: transparent; color: var(--green); box-shadow: none; padding: 0 12px; }
@media (hover: hover) { .btn--ghost:hover { background: var(--green-soft); color: var(--kale); } }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.spin { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Fields: 54px, 18px text, a ring not a grey box, a green ring on focus. */
label { display: block; font-weight: 600; margin: 0 0 8px; }
input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=hidden]), select, textarea {
  width: 100%; min-height: 54px; padding: 0 16px; margin: 0;
  font: 400 18px/1.3 var(--font); color: var(--ink); background: var(--surface);
  border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgb(39 105 74 / .45), 0 1px 2px rgb(23 34 28 / .06), 0 2px 6px rgb(23 34 28 / .04);
  transition: box-shadow 200ms var(--ease-out); -webkit-appearance: none; appearance: none;
}
textarea { padding: 14px 16px; min-height: 120px; }
::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--hair); padding: 12px 8px; text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--ink-2); }

/* Header: 56px, logo left, one action; on ad landing pages the logo only (body.landing). */
.top { position: sticky; top: 0; z-index: 30; background: var(--oat); box-shadow: 0 1px 0 var(--hair); }
.bar { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.logo { display: flex; align-items: center; min-height: 48px; flex: none; text-decoration: none; }
.logo img { height: 32px; width: auto; }
.top .top-nav { display: flex; gap: 4px; margin-right: auto; }
.top .top-nav a { color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: var(--r-chip); font-size: 16px; font-weight: 600; }
@media (hover: hover) { .top .top-nav a:hover { color: var(--kale); background: var(--oat-2); } }
.top-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-btn); background: var(--marigold); color: var(--ink); font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; flex: none; transition: transform 120ms var(--ease-out), background-color 200ms; }
@media (hover: hover) { .top-cta:hover { background: var(--marigold-2); color: var(--ink); } }
.top-cta:active { transform: scale(.97); }
.top-cta .short { display: none; }
.top-menu { display: none; position: relative; flex: none; }
.top-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: 22px; }
.top-menu summary::-webkit-details-marker { display: none; }
.top-menu summary span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); }
.top-drop { position: absolute; right: 0; top: 52px; width: 240px; background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); padding: 6px; z-index: 40; }
.top-drop a { display: block; padding: 12px 14px; color: var(--ink); text-decoration: none; border-radius: 10px; font-weight: 600; }
@media (hover: hover) { .top-drop a:hover { background: var(--oat-2); color: var(--kale); } }
@media (max-width: 900px) { .top .top-nav { display: none; } .top-cta { margin-left: auto; } .top-menu { display: block; } .bar { gap: 8px; } }
@media (max-width: 560px) { .top-cta .long { display: none; } .top-cta .short { display: inline; } .logo img { height: 28px; } }
body.landing .top-nav, body.landing .top-menu, body.landing .top-cta { display: none; }

/* Footer: one line of who we are, a row of links, the legal line. */
.foot { margin-top: 72px; padding: 36px 0 28px; background: var(--oat-2); color: var(--ink); }
.foot-grid { display: grid; gap: 18px; }
.foot-line { margin: 0; max-width: 60ch; color: var(--ink); }
.foot-line b { color: var(--kale); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
@media (hover: hover) { .foot-links a:hover { color: var(--green); text-decoration: underline; } }
.legal { margin: 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink-2); }
.legal a { color: var(--ink-2); }

/* Shared building blocks for the brand's pages */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: 22px; }
.notice { background: var(--oat-2); padding: 12px 0; font-size: 16px; }
.acc { border-bottom: 1px solid var(--hair); }
.acc:first-child { border-top: 1px solid var(--hair); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; font-weight: 600; color: var(--kale); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border: solid var(--ink-2); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -3px; transition: rotate 200ms var(--ease-out); }
.acc[open] summary::after { rotate: 225deg; translate: 0 2px; }
.acc > :not(summary) { margin-top: 0; }
.acc p:last-child { padding-bottom: 8px; }

/* The kit's parts, dressed to match (kit.css stays untouched) */
.kit-back { min-height: 54px; padding: 0 22px; border: 0; border-radius: var(--r-btn); font: 800 18px var(--font); color: var(--kale); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ring); cursor: pointer; }
.kit-progress { color: var(--ink-2); }
.kit-list { margin-top: 6px; padding: 6px; border: 0; border-radius: var(--r-field); box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); }
.kit-list [role="option"] { border-bottom: 0; border-radius: var(--r-chip); }
.kit-list [role="option"][aria-selected="true"], .kit-list [role="option"]:hover { box-shadow: none; background: var(--green-soft); }
.kit-toast { bottom: calc(18px + env(safe-area-inset-bottom)); max-width: min(calc(100vw - 32px), 400px); padding: 14px 20px; border-radius: 16px; text-align: left; background: var(--kale); color: var(--surface); font: 600 16px/1.35 var(--font); box-shadow: var(--shadow-2); }
[data-kit-done] h3 { margin-top: 0; }

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

/* The brand's home page: one photo where the dog is the subject, the words on the kale it fades into. */
.bhero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(540px, 46vw, 720px); background: var(--kale); color: var(--surface); }
.bhero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(2 17 9 / .82) 0%, rgb(2 17 9 / .5) 38%, rgb(2 17 9 / 0) 62%); }
.bhero-in { position: relative; z-index: 1; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.bhero h1 { color: var(--surface); max-width: 13ch; font-size: clamp(42px, 4vw + 24px, 72px); letter-spacing: -0.035em; line-height: 1.02; }
.bhero p { color: var(--surface); font-size: 20px; max-width: 34ch; }
@media (max-width: 899px) {
  .bhero { display: block; min-height: 0; }
  .bhero picture { position: relative; display: block; height: clamp(340px, 50svh, 520px); }
  .bhero::after { height: clamp(340px, 50svh, 520px); background: linear-gradient(to top, var(--kale) 0%, rgb(20 62 46 / .55) 22%, rgb(20 62 46 / 0) 48%); }
  .bhero-in { margin-top: -84px; padding-top: 0; }
}
body:has(.bhero) .foot { margin-top: 0; }
.bhero img { object-position: 66% 35%; }