/* Panjo Pets - hand-written, no framework.
   Two token layers: --p-* primitives hold every hex, --c-* semantic aliases are
   the only thing components use. docs/research/05.

   Type: Bricolage Grotesque (display) over Figtree (content). A sans display,
   not a serif: this is a trust-first marketplace, not a publication, and the
   "creative brief means serif" reflex is the most recognisable tell there is.
   Bricolage carries warmth without being cute, which is the register a page
   about live animals needs. Both self-hosted, latin subset, no third party. */

@font-face {
  font-family: Bricolage;
  src: url('/fonts/bricolage-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Figtree;
  src: url('/fonts/figtree-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* primitives ---------------------------------------------------------- */
 --p-teal-50:#f1f8f8; --p-teal-100:#d9ecee; --p-teal-200:#b3d9dd;
 --p-teal-300:#6fb8bf; --p-teal-400:#3f9aa4; --p-teal-500:#17747f;
 --p-teal-600:#0f5c66; --p-teal-700:#0b464e; --p-teal-900:#06272c;

 --p-oat-50:#fbf9f6; --p-oat-100:#f4f0e9; --p-oat-200:#e7e0d4;
 --p-oat-300:#d5cab6; --p-oat-400:#a89b85; --p-oat-600:#5c5344;
 --p-oat-800:#2f2a21; --p-oat-900:#1d1a14;

 --p-plum-100:#f7edf4; --p-plum-500:#8a3d6e; --p-plum-600:#6f2f59; --p-plum-700:#572446;
 --p-honey-100:#fff6e3;--p-honey-300:#f7d288;--p-honey-500:#f2b441;--p-honey-700:#8a6410;
 --p-moss-100:#e8f3ec; --p-moss-500:#2e7d4f; --p-moss-600:#22633d;
 --p-rust-50:#fdf3f2; --p-rust-400:#e0685c; --p-rust-600:#b3261e; --p-rust-700:#8a1b15;
 --p-sky-100:#e9f4fb; --p-sky-300:#7cc0e8; --p-sky-600:#1e6fa8;
 --p-white:#fff;

  /* semantic ------------------------------------------------------------ */
 --c-brand:var(--p-teal-600);
 --c-action:var(--p-teal-600); --c-action-hov:var(--p-teal-700);
 --c-pay:var(--p-plum-600); --c-pay-hov:var(--p-plum-700);
 --c-pay-wash:var(--p-plum-100);
 --c-highlight:var(--p-honey-500); --c-highlight-wash:var(--p-honey-100);

 --c-ink:var(--p-oat-900);
 --c-ink-2:var(--p-oat-600);
 --c-ink-3:var(--p-oat-400);
 --c-ink-inv:var(--p-white);

 --c-bg:var(--p-oat-50);
 --c-surface:var(--p-white);
 --c-surface-2:var(--p-oat-100);
 --c-sunken:var(--p-oat-200);
 --c-brand-surface:var(--p-teal-700);

 --c-line:var(--p-oat-300);
 --c-line-2:var(--p-oat-200);
 --c-focus:var(--p-teal-500);
  --c-ok:var(--p-moss-500);   --c-ok-wash:var(--p-moss-100);  --c-ok-fg:var(--p-moss-600);
  --c-err:var(--p-rust-600);  --c-err-wash:var(--p-rust-50);  --c-err-fg:var(--p-rust-700);
  --c-warn:var(--p-honey-700);                                --c-warn-fg:var(--p-honey-700);
  --c-info:var(--p-sky-600);  --c-info-wash:var(--p-sky-100); --c-info-fg:#12547d;
  /* Text sitting ON a tinted wash needs its own token: the wash and the text
     must move together between modes, or every badge fails contrast in dark. */
  --c-pay-fg:var(--p-plum-600);

  /* type ---------------------------------------------------------------- */
 --f-display:Bricolage,'Helvetica Neue',system-ui,sans-serif;
 --f-content:Figtree,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* layout -------------------------------------------------------------- */
 --w-compact:620px; --w-normal:920px; --w-wide:1240px;
 --header-h:72px;
 --r-xs:.125rem; --r-sm:.25rem; --r-md:.375rem; --r-lg:.5rem;
 --r-xl:.75rem; --r-2xl:1rem; --r-full:999px;
 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
 --s-6:32px; --s-8:48px; --s-10:64px; --s-12:96px;
 --shadow-1:0 1px 2px rgba(29,26,20,.06),0 1px 3px rgba(29,26,20,.05);
 --shadow-2:0 4px 6px -1px rgba(29,26,20,.07),0 2px 4px -2px rgba(29,26,20,.05);
 --shadow-3:0 10px 24px -6px rgba(29,26,20,.14);
}

/* Dark mode redefines only the semantic layer. Guarded so an explicit light
   choice wins over the system preference, and the toggle wins in both
   directions. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
 --c-ink:#f3efe7; --c-ink-2:#c3bbaa; --c-ink-3:#8d8474; --c-ink-inv:#12100c;
 --c-bg:#14120e; --c-surface:#1c1a15; --c-surface-2:#232019; --c-sunken:#2b2720;
 --c-brand-surface:#0b3237;
 --c-line:#3a352b; --c-line-2:#2b2720;
    /* Links use the light teal; button FILLS keep a dark teal, because
       teal-400 behind white label text is ~2.9:1 and fails WCAG AA. */
 --c-link:var(--p-teal-300);
 --c-action:#12656f; --c-action-hov:#17747f;
 --c-pay:#7e3767; --c-pay-hov:#95457a; --c-pay-wash:#2c1a26;
 --c-highlight-wash:#332a17;
  --c-ok-wash:#16281d; --c-err-wash:#2a1614; --c-info-wash:#122631;
  --c-ok-fg:#7fd3a2; --c-err-fg:#f0958c; --c-warn-fg:#f0c469; --c-info-fg:#8ecbf0;
    --c-pay-fg:#dc9dc4;
  }
}
:root[data-theme="dark"]{
 --c-ink:#f3efe7; --c-ink-2:#c3bbaa; --c-ink-3:#8d8474; --c-ink-inv:#12100c;
 --c-bg:#14120e; --c-surface:#1c1a15; --c-surface-2:#232019; --c-sunken:#2b2720;
 --c-brand-surface:#0b3237;
 --c-line:#3a352b; --c-line-2:#2b2720;
 --c-link:var(--p-teal-300);
 --c-action:#12656f; --c-action-hov:#17747f;
 --c-pay:#7e3767; --c-pay-hov:#95457a; --c-pay-wash:#2c1a26;
 --c-highlight-wash:#332a17;
  --c-ok-wash:#16281d; --c-err-wash:#2a1614; --c-info-wash:#122631;
  --c-ok-fg:#7fd3a2; --c-err-fg:#f0958c; --c-warn-fg:#f0c469; --c-info-fg:#8ecbf0;
  --c-pay-fg:#dc9dc4;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font:400 16px/1.55 var(--f-content);
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--c-link); text-underline-offset:2px}
a:hover{color:var(--c-action-hov)}
:focus-visible{outline:2px solid var(--c-focus); outline-offset:2px; border-radius:var(--r-sm)}
h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s-4)}
h4,h5,h6{font-family:var(--f-content); font-weight:600; margin:0 0 var(--s-3)}
h1{font-size:32px; line-height:38px}
h2{font-size:26px; line-height:32px}
h3{font-size:21px; line-height:27px}
h4{font-size:18px; line-height:24px}
h5{font-size:17px; line-height:24px}
p{margin:0 0 var(--s-4)}
small,.small{font-size:14px; line-height:20px}
.caption{font-size:12px; line-height:16px; color:var(--c-ink-2)}
hr{border:0; border-top:1px solid var(--c-line-2); margin:var(--s-6) 0}
ul,ol{margin:0 0 var(--s-4); padding-left:1.25em}
li{margin-bottom:var(--s-1)}
table{border-collapse:collapse; width:100%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em}

@media (min-width:1024px){
  h1{font-size:48px; line-height:56px}
  h2{font-size:34px; line-height:41px}
  h3{font-size:24px; line-height:30px}
  h4{font-size:20px; line-height:26px}
}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--w-wide); margin:0 auto; padding:0 var(--s-4)}
.wrap-n{max-width:var(--w-normal)}
.wrap-c{max-width:var(--w-compact)}
.stack>*+*{margin-top:var(--s-4)}
.stack-lg>*+*{margin-top:var(--s-6)}
.row{display:flex; gap:var(--s-3); align-items:center}
.row-wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1 1 auto; min-width:0}
.section{padding:var(--s-8) 0}
.section-tight{padding:var(--s-6) 0}
.grid{display:grid; gap:var(--s-4)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1024px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .section{padding:var(--s-10) 0}
}
.hide-palm{display:none}
.hide-desk{display:block}
@media (min-width:1024px){.hide-palm{display:block}.hide-desk{display:none}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-surface);padding:var(--s-3);z-index:100}
.skip:focus{left:var(--s-3);top:var(--s-3)}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:40; background:var(--c-surface);
  border-bottom:1px solid var(--c-line-2); min-height:56px;
}
@media (min-width:1024px){.hdr{min-height:var(--header-h)}}
.hdr-in{display:flex; align-items:center; gap:var(--s-4); min-height:56px}
@media (min-width:1024px){.hdr-in{min-height:var(--header-h)}}
.brand{display:flex; align-items:center; gap:var(--s-2); font-family:var(--f-display);
  font-weight:600; font-size:20px; color:var(--c-ink); text-decoration:none; flex:0 0 auto}
.brand svg{display:block}
.hdr-nav{display:none; gap:var(--s-5); margin-left:var(--s-5)}
@media (min-width:1024px){.hdr-nav{display:flex}}
.hdr-nav a{color:var(--c-ink-2); text-decoration:none; font-weight:500; font-size:15px}
.hdr-nav a:hover{color:var(--c-ink)}
.hdr-actions{margin-left:auto; display:flex; gap:var(--s-2); align-items:center}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font:600 15px/1 var(--f-content); padding:11px 18px; border-radius:var(--r-full);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  background:var(--c-action); color:#fff; transition:background .15s;
}
.btn:hover{background:var(--c-action-hov); color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--c-ink); border-color:var(--c-line)}
.btn-ghost:hover{background:var(--c-surface-2); color:var(--c-ink)}
.btn-quiet{background:transparent; color:var(--c-link); padding:8px 10px}
.btn-quiet:hover{background:var(--c-surface-2); color:var(--c-action-hov)}
/* Money never wears the brand colour. docs/research/05 section 2. */
.btn-pay{background:var(--c-pay)}
.btn-pay:hover{background:var(--c-pay-hov)}
.btn-danger{background:var(--c-err)}
.btn-sm{padding:7px 13px; font-size:14px}
.btn-lg{padding:14px 24px; font-size:16px}
.btn-block{width:100%}

/* ----------------------------------------------------------------- cards */
.card{background:var(--c-surface); border:1px solid var(--c-line-2);
  border-radius:var(--r-xl); overflow:hidden}
.card-pad{padding:var(--s-5)}
.card-hover{transition:box-shadow .15s,transform .15s}
.card-hover:hover{box-shadow:var(--shadow-2)}
.panel{background:var(--c-surface-2); border-radius:var(--r-xl); padding:var(--s-5)}

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-flex; align-items:center; gap:4px; font:600 12px/1 var(--f-content);
  padding:5px 9px; border-radius:var(--r-full); background:var(--c-surface-2);
  color:var(--c-ink-2); white-space:nowrap;
}
.badge svg{width:12px;height:12px;flex:0 0 auto}
.badge-verified{background:var(--c-ok-wash); color:var(--c-ok-fg)}
.badge-licensed{background:var(--c-info-wash); color:var(--c-info-fg)}
.badge-rescue{background:var(--c-pay-wash); color:var(--c-pay-fg)}
.badge-kc{background:var(--p-teal-100); color:var(--p-teal-700)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .badge-kc{background:#0e3238;color:#9fd8de}}
:root[data-theme=dark] .badge-kc{background:#0e3238;color:#9fd8de}
.badge-boost{background:var(--c-highlight-wash); color:var(--c-warn-fg)}
.badge-pkg{background:var(--c-sunken); color:var(--c-ink-2); letter-spacing:.04em}
.badge-warn{background:var(--c-err-wash); color:var(--c-err-fg)}

/* ---------------------------------------------------------------- forms */
label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],
input[type=date],input[type=password],select,textarea{
  width:100%; font:400 16px/1.4 var(--f-content); color:var(--c-ink);
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:10px 12px;
}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5344' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:34px}
textarea{min-height:140px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c-focus); outline-offset:0; border-color:var(--c-focus)}
.field+.field{margin-top:var(--s-4)}
.hint{font-size:13px; color:var(--c-ink-2); margin-top:4px}
.err{font-size:13px; color:var(--c-err); margin-top:4px; font-weight:600}
fieldset{border:0; padding:0; margin:0}
legend{font-weight:600; font-size:14px; margin-bottom:6px; padding:0}
.check{display:flex; gap:var(--s-2); align-items:flex-start; font-weight:400; font-size:15px; margin-bottom:8px}
.check input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto; accent-color:var(--c-action)}

/* ------------------------------------------------------------- messaging */
.note{border:1px solid var(--c-line); border-left-width:4px; border-radius:var(--r-lg);
  padding:var(--s-4); background:var(--c-surface)}
.note-ok{border-left-color:var(--c-ok); background:var(--c-ok-wash)}
.note-err{border-left-color:var(--c-err); background:var(--c-err-wash)}
.note-info{border-left-color:var(--c-info); background:var(--c-info-wash)}
.note-pay{border-left-color:var(--c-pay); background:var(--c-pay-wash)}
/* ------------------------------------------------------------------ calls
   The remote video is the subject -- the seller holding a puppy -- so it gets
   the whole stage and the local preview is a corner inset, the arrangement
   every video app converged on because it is the one that works. */
.call{margin:20px 0}
.call-incoming{margin-top:12px}
.call-panel{margin-top:12px}
.call-stage{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--p-ink-900, #101418); aspect-ratio:4/3; max-height:70vh}
.call-remote{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.call-local{position:absolute; right:10px; bottom:10px; width:28%; max-width:160px;
  aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-md);
  border:2px solid rgba(255,255,255,.7); background:#000;
  /* Mirrored, because an unmirrored self-view reads as someone else. */
  transform:scaleX(-1)}
.call-state{margin:8px 0 10px; min-height:1.4em}
/* A call is a record in the thread, not speech: it should not look like a
   message bubble from either side. */
.call-line{display:flex; align-items:center; gap:6px; justify-content:center;
  color:var(--c-muted); padding:var(--s-2) 0}
@media (max-width:600px){
  .call-stage{aspect-ratio:3/4}
  .call-local{width:34%}
}

/* A highlighted advert. Deliberately quieter than a boost -- it is five pounds
   and a week, not a promoted slot -- but visible enough to be worth buying,
   and always accompanied by the word "Highlighted" so a buyer knows what they
   are looking at rather than inferring quality from a colour. */
.lcard-highlight{border-color:var(--c-pay); box-shadow:0 0 0 1px var(--c-pay)}
.lcard-highlight .lcard-media::after{content:''; position:absolute; inset:0;
  border-top:3px solid var(--c-pay); pointer-events:none}

/* Upload feedback. Sits inside the uploader form, above the submit button.
   Uses the -fg tokens rather than the fill colours: this is text on a wash. */
.upload-status{border:1px solid var(--c-line); border-left-width:4px; border-radius:var(--r-md);
  padding:var(--s-3); margin-block:var(--s-3); font-size:var(--t-sm)}
.upload-status.err{border-left-color:var(--c-err); background:var(--c-err-wash); color:var(--c-err-fg)}
.upload-status.ok{border-left-color:var(--c-ok); background:var(--c-ok-wash); color:var(--c-ok-fg)}
.upload-status ul{margin:var(--s-2) 0 var(--s-2) var(--s-4)}
.upload-status strong{color:inherit}

/* Uploaded media, shown back to the seller so they can see what actually
   landed and remove what did not belong. */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--s-3); margin-block:var(--s-4)}
.media-grid>*{min-width:0}
.media-tile{position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--c-line); background:var(--c-surface-2); aspect-ratio:4/3}
.media-tile img{width:100%; height:100%; object-fit:cover; display:block}
.media-tile .media-del{position:absolute; top:6px; right:6px; border:0; cursor:pointer;
  background:rgba(16,20,24,.78); color:#fff; border-radius:var(--r-sm);
  padding:4px 8px; font-size:var(--t-xs); line-height:1.4}
.media-tile .media-del:hover{background:var(--c-err)}
.media-tile .media-role{position:absolute; left:6px; bottom:6px; background:rgba(16,20,24,.78);
  color:#fff; border-radius:var(--r-sm); padding:2px 6px; font-size:var(--t-xs)}

.note h4{margin-bottom:var(--s-2)}
.note p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--c-brand-surface); color:#fff; position:relative; overflow:hidden}
.hero h1{color:#fff; max-width:16ch}
.hero-sub{color:var(--p-teal-200); font-size:18px; max-width:34ch; margin-bottom:var(--s-6)}
.hero-in{display:grid; gap:var(--s-6); padding-block:var(--s-8) var(--s-10);
  position:relative; z-index:2}
@media (min-width:1024px){
  .hero-in{grid-template-columns:1fr 1fr; align-items:center;
    padding-block:var(--s-10) var(--s-12)}
}
.hero-photo{border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:4/3;
  background:var(--p-teal-900); box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-blob{position:absolute; border-radius:50%; opacity:.16; pointer-events:none}
.hero-blob-1{width:520px;height:520px;background:var(--p-honey-500);right:-220px;top:-260px;
  opacity:.10}
.hero-blob-2{width:380px;height:380px;background:var(--p-teal-300);left:-180px;bottom:-200px;
  opacity:.12}

/* search card floating over the hero */
.searchcard{background:var(--c-surface); border-radius:var(--r-2xl); padding:var(--s-4);
  box-shadow:var(--shadow-3); color:var(--c-ink); max-width:460px}
.tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); margin-bottom:var(--s-3)}
.tab{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px;
  border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-surface);
  font:600 13px/1 var(--f-content); color:var(--c-ink-2); cursor:pointer; text-decoration:none}
.tab svg{width:26px;height:26px}
.tab[aria-selected=true]{border-color:var(--c-focus); color:var(--c-link); background:var(--p-teal-50)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tab[aria-selected=true]{background:var(--c-surface-2)}}

/* -------------------------------------------------------- listing cards */
.lcard{display:flex; flex-direction:column; background:var(--c-surface);
  border:1px solid var(--c-line-2); border-radius:var(--r-xl); overflow:hidden; height:100%}
.lcard-boost{border-color:var(--c-highlight); background:linear-gradient(var(--c-highlight-wash),var(--c-surface) 70px)}
.lcard-media{position:relative; aspect-ratio:4/3; background:var(--c-sunken); overflow:hidden}
.lcard-media img{width:100%;height:100%;object-fit:cover}
.lcard-flags{position:absolute; top:8px; left:8px; display:flex; gap:6px; flex-wrap:wrap}
.lcard-count{position:absolute; bottom:8px; right:8px; display:flex; gap:6px}
.pill-dark{background:rgba(29,26,20,.82); color:#fff; font:600 11px/1 var(--f-content);
  padding:5px 8px; border-radius:var(--r-full); display:inline-flex; gap:4px; align-items:center}
.lcard-body{padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); flex:1}
.lcard-title{font:600 16px/1.3 var(--f-content); margin:0; color:var(--c-ink)}
.lcard-title a{color:inherit; text-decoration:none}
.lcard-title a:hover{text-decoration:underline}
.lcard-breed{font-size:13px; color:var(--c-ink-2)}
.lcard-stats{display:flex; gap:var(--s-4); font-size:13px; color:var(--c-ink-2); flex-wrap:wrap}
.lcard-stats b{display:block; font:600 15px/1.2 var(--f-content); color:var(--c-ink)}
.lcard-price{font-family:var(--f-display); font-weight:600; font-size:20px; color:var(--c-ink)}
.lcard-fee{font-size:12px; color:var(--c-pay-fg); font-weight:600}
.lcard-excerpt{font-size:13px; color:var(--c-ink-2); display:-webkit-box; -webkit-line-clamp:3;
 -webkit-box-orient:vertical; overflow:hidden}
.lcard-foot{margin-top:auto; padding-top:var(--s-2); display:flex; gap:var(--s-2);
  align-items:center; flex-wrap:wrap; font-size:12px; color:var(--c-ink-2)}

/* ---------------------------------------------------------------- search */
.search-layout{display:grid; gap:var(--s-5)}
.search-layout>*{min-width:0}
@media (min-width:1024px){.search-layout{grid-template-columns:280px 1fr; align-items:start}}
.filters{background:var(--c-surface); border:1px solid var(--c-line-2);
  border-radius:var(--r-xl); padding:var(--s-4)}
@media (min-width:1024px){.filters{position:sticky; top:calc(var(--header-h) + 12px); max-height:calc(100vh - 100px); overflow-y:auto}}
.fgroup{padding:var(--s-3) 0; border-bottom:1px solid var(--c-line-2)}
.fgroup:last-of-type{border-bottom:0}
.fgroup>legend,.fgroup>.flabel{font:600 13px/1 var(--f-content); color:var(--c-ink);
  margin-bottom:var(--s-2); text-transform:none}
.result-head{display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4)}
.result-count{color:var(--c-ink-2); font-size:15px}
.boost-band{background:var(--c-highlight-wash); border-radius:var(--r-xl);
  padding:var(--s-4); margin-bottom:var(--s-5)}
.boost-band>h2{font:700 12px/1 var(--f-content); letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-warn-fg); margin-bottom:var(--s-3)}

/* ------------------------------------------------------------- pagination */
.pager{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:var(--s-8)}
.pager a,.pager span{min-width:40px; height:40px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--c-line); border-radius:var(--r-lg);
  text-decoration:none; font-weight:600; font-size:14px; color:var(--c-ink); padding:0 10px}
.pager .on{background:var(--c-action); border-color:var(--c-action); color:#fff}

/* ------------------------------------------------------------- breadcrumb */
.crumbs{font-size:13px; color:var(--c-ink-2); padding:var(--s-4) 0; display:flex;
  gap:6px; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--c-ink-2); text-decoration:none}
.crumbs a:hover{color:var(--c-ink); text-decoration:underline}

/* -------------------------------------------------------- listing detail */
.gallery{border-radius:var(--r-xl); overflow:hidden; background:var(--c-sunken)}
.gallery-main{aspect-ratio:4/3; position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex; gap:6px; padding:6px; overflow-x:auto; background:var(--c-surface)}
.gallery-thumbs img{width:72px;height:56px;object-fit:cover;border-radius:var(--r-md);cursor:pointer;
  border:2px solid transparent}
.gallery-thumbs img[aria-current=true]{border-color:var(--c-link)}
.statstrip{display:flex; gap:var(--s-5); flex-wrap:wrap; padding:var(--s-4) 0}
.statstrip .st b{display:block; font:600 22px/1.2 var(--f-display); color:var(--c-ink)}
.statstrip .st span{font-size:13px; color:var(--c-ink-2)}
.detail-layout{display:grid; gap:var(--s-6)}
.detail-layout>*{min-width:0}
.gallery,.gallery-main{min-width:0; max-width:100%}
@media (min-width:1024px){.detail-layout{grid-template-columns:1fr 340px; align-items:start}}
.sticky-side{position:sticky; top:calc(var(--header-h) + 12px)}
.deftable{width:100%; font-size:15px}
.deftable th{text-align:left; font-weight:400; color:var(--c-ink-2); padding:8px 0; width:40%;
  vertical-align:top}
.deftable td{padding:8px 0; font-weight:600}
.ticklist{list-style:none; padding:0; margin:0}
.ticklist li{display:flex; gap:var(--s-2); align-items:flex-start; padding:6px 0; font-size:15px}
.ticklist svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--c-ok)}
.ticklist .no{color:var(--c-ink-2)}
.ticklist .no svg{color:var(--c-ink-3)}

/* the four-step buyer journey */
.journey{display:grid; gap:var(--s-4); counter-reset:step}
@media (min-width:1024px){.journey{grid-template-columns:repeat(4,1fr)}}
.jstep{position:relative; padding-top:var(--s-6)}
.jstep::before{counter-increment:step; content:counter(step); position:absolute; top:0; left:0;
  width:28px;height:28px;border-radius:50%; background:var(--c-pay); color:#fff;
  display:flex;align-items:center;justify-content:center; font:700 14px/1 var(--f-content)}
.jstep h4{margin-bottom:4px}
.jstep p{font-size:14px; color:var(--c-ink-2); margin:0}

/* long-tail internal link cloud */
.linkcloud{display:flex; flex-wrap:wrap; gap:8px}
.linkcloud a{font-size:13px; color:var(--c-ink-2); text-decoration:none;
  background:var(--c-surface-2); padding:6px 11px; border-radius:var(--r-full)}
.linkcloud a:hover{background:var(--c-sunken); color:var(--c-ink)}

/* --------------------------------------------------------- breed page */
.keystats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3)}
@media (min-width:1024px){.keystats{grid-template-columns:repeat(4,1fr)}}
.keystat{background:var(--c-surface-2); border-radius:var(--r-lg); padding:var(--s-3)}
.keystat span{display:block; font-size:12px; color:var(--c-ink-2); margin-bottom:2px}
.keystat b{font:600 16px/1.3 var(--f-content)}
.proscons{display:grid; gap:var(--s-4)}
@media (min-width:1024px){.proscons{grid-template-columns:1fr 1fr}}
.ratings{display:grid; gap:var(--s-3)}
@media (min-width:1024px){.ratings{grid-template-columns:1fr 1fr; column-gap:var(--s-6)}}
.rating{display:grid; grid-template-columns:1fr auto; gap:4px var(--s-3); align-items:center}
.rating .rlabel{font-size:14px; font-weight:600}
.rating .rval{font-size:13px; color:var(--c-ink-2); font-variant-numeric:tabular-nums}
.rbar{grid-column:1/-1; height:8px; border-radius:var(--r-full); background:var(--c-sunken);
  overflow:hidden}
.rbar i{display:block; height:100%; background:var(--c-link); border-radius:var(--r-full)}
.toc{background:var(--c-surface-2); border-radius:var(--r-xl); padding:var(--s-4)}
.toc ol{margin:0; padding-left:1.2em; columns:1}
@media (min-width:1024px){.toc ol{columns:2}}
.toc a{font-size:14px}
.prose{max-width:70ch}
.prose h2{margin-top:var(--s-8); scroll-margin-top:calc(var(--header-h) + 16px)}
.prose h3{margin-top:var(--s-6)}
.prose ul{margin-bottom:var(--s-4)}
.prose>*:first-child{margin-top:0}

/* --------------------------------------------------------------- article */
.artmeta{display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap;
  font-size:14px; color:var(--c-ink-2); margin-bottom:var(--s-5)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font:600 11px/1 var(--f-content); letter-spacing:.03em; text-transform:uppercase;
  background:var(--c-surface-2); color:var(--c-ink-2); padding:5px 8px; border-radius:var(--r-sm);
  text-decoration:none}
.chip:hover{background:var(--c-sunken); color:var(--c-ink)}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--c-surface-2); border-top:1px solid var(--c-line-2);
  margin-top:var(--s-12); padding:var(--s-8) 0 var(--s-6)}
.ftr h3{font:600 13px/1 var(--f-content); letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-ink-2); margin-bottom:var(--s-3)}
.ftr ul{list-style:none; padding:0; margin:0}
.ftr li{margin-bottom:6px}
.ftr a{font-size:14px; color:var(--c-ink-2); text-decoration:none}
.ftr a:hover{color:var(--c-ink); text-decoration:underline}
.ftr-legal{margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--c-line-2);
  font-size:12px; color:var(--c-ink-2); line-height:1.6}

/* ------------------------------------------------------------ empty/misc */
.empty{text-align:center; padding:var(--s-10) var(--s-4)}
.empty img,.empty svg{max-width:220px; margin:0 auto var(--s-5)}
.tick-ok{color:var(--c-ok)} .tick-no{color:var(--c-ink-3)}
.stars{display:inline-flex; gap:1px; color:var(--c-highlight)}
.stars svg{width:14px;height:14px}
.muted{color:var(--c-ink-2)}
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr);
  gap:var(--s-4); overflow-x:auto; padding-bottom:var(--s-2)}
@media (min-width:1024px){.rail{grid-auto-columns:minmax(0,1fr)}}

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

/* Utilities last, and !important, so they beat component display rules.
   Without this, .btn's display:inline-flex outranks .hide-desk at desktop. */
.hide-palm{display:none!important}
.hide-desk{display:block!important}
@media (min-width:1024px){
  .hide-palm{display:revert!important}
  .hide-desk{display:none!important}
}
/* The hidden attribute beats the visibility utilities. Without this the mobile
   menu renders open on every page load, because .hide-desk is !important. */
[hidden]{display:none!important}

/* ------------------------------------------------------------------ quiz */
.quiz-chapters{display:grid; gap:var(--s-3); margin:var(--s-6) 0}
@media (min-width:1024px){.quiz-chapters{grid-template-columns:repeat(2,1fr)}}
.quiz-chapter{display:flex; gap:var(--s-3); align-items:center;
  background:var(--c-surface-2); border-radius:var(--r-xl); padding:var(--s-4)}
.quiz-chapter-n{flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--c-action); color:#fff; display:flex; align-items:center;
  justify-content:center; font:700 15px/1 var(--f-content)}
.quiz-q{margin-bottom:var(--s-6)}
.quiz-q>legend{font-family:var(--f-display); font-size:21px; font-weight:600;
  letter-spacing:-.01em; margin-bottom:var(--s-3); line-height:1.25}
.quiz-options{display:grid; gap:var(--s-2)}
@media (min-width:1024px){.quiz-options{grid-template-columns:1fr 1fr}}
.quiz-option{display:flex; gap:var(--s-3); align-items:center; cursor:pointer;
  border:1px solid var(--c-line); border-radius:var(--r-lg); padding:13px 15px;
  font-weight:500; font-size:15px; background:var(--c-surface);
  transition:border-color .15s, background .15s}
.quiz-option:hover{border-color:var(--c-focus)}
.quiz-option input{width:19px;height:19px;margin:0;flex:0 0 auto;accent-color:var(--c-action)}
.quiz-option:has(input:checked){border-color:var(--c-link); background:var(--p-teal-50);
  box-shadow:inset 0 0 0 1px var(--c-link)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .quiz-option:has(input:checked){background:var(--c-surface-2)}
}
.quiz-match{display:flex; gap:var(--s-5); align-items:flex-start;
  border-top:1px solid var(--c-line-2); padding-top:var(--s-5)}
.quiz-match:first-child{border-top:0; padding-top:0}
.quiz-match-rank{flex:0 0 auto; width:84px; text-align:center}
.quiz-pct{display:block; font:600 34px/1 var(--f-display); color:var(--c-link);
  letter-spacing:-.02em}
.quiz-watch{background:var(--c-highlight-wash); border-radius:var(--r-lg);
  padding:12px 14px; font-size:14px; margin:12px 0 0}

/* --------------------------------------------------------- home rhythm */
/* Section tints stay inside the light theme: an inverted section mid-page
   reads as a different website. docs/research/05. */
.band{background:var(--c-surface-2)}
.band-soft{background:var(--p-oat-100)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .band-soft{background:var(--c-surface-2)}
}
.lead{display:grid; gap:var(--s-5); align-items:center}
.lead>*{min-width:0}
@media (min-width:1024px){
  .lead{grid-template-columns:1.15fr .85fr; gap:var(--s-10)}
  .lead-flip{grid-template-columns:.85fr 1.15fr}
  .lead-flip>*:first-child{order:2}
}
.lead-media{border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:5/4;
  background:var(--c-sunken)}
.lead-media img{width:100%;height:100%;object-fit:cover}
.trust-rows{display:grid; gap:var(--s-3)}
.trust-row{display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-4) 0;
  border-top:1px solid var(--c-line-2)}
.trust-row:first-child{border-top:0; padding-top:0}
.trust-row-icon{flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-surface-2); color:var(--c-link)}
.trust-row-icon.pay{color:var(--c-pay); background:var(--c-pay-wash)}
.trust-row h3{font-size:17px; font-family:var(--f-content); margin-bottom:2px}
.trust-row p{margin:0; font-size:15px; color:var(--c-ink-2)}

/* Editorial pull-out used once on the home page and on the safety page. */
.pullout{border-left:3px solid var(--c-link); padding-left:var(--s-5);
  font-family:var(--f-display); font-size:22px; line-height:1.35; font-weight:500;
  letter-spacing:-.01em; max-width:24ch}
@media (min-width:1024px){.pullout{font-size:28px}}

/* --------------------------------------------------------------- motion */
/* MOTION_INTENSITY 4: fluid CSS only. People here are about to spend a
   thousand pounds on a living animal; a page that bounces undermines that. */
@media (prefers-reduced-motion:no-preference){
  .card-hover{transition:box-shadow .22s cubic-bezier(.16,1,.3,1),
                        transform .22s cubic-bezier(.16,1,.3,1),
                        border-color .22s}
  .card-hover:hover{transform:translateY(-2px); border-color:var(--c-line)}
  .btn{transition:background .15s, transform .12s}
  .btn:active{transform:translateY(1px)}
  .lcard-media img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .lcard:hover .lcard-media img{transform:scale(1.03)}
  .rise{animation:rise .5s cubic-bezier(.16,1,.3,1) both;
        animation-delay:calc(var(--i, 0) * 45ms)}
  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}

/* ------------------------------------------------------------- sparkline */
.spark{display:flex; align-items:flex-end; gap:3px; height:110px;
  background:var(--c-surface-2); border-radius:var(--r-lg); padding:10px}
.spark-bar{flex:1; min-width:3px; background:var(--c-link); border-radius:2px 2px 0 0;
  opacity:.85}
.spark-bar:hover{opacity:1}

/* --------------------------------------------------- litter (per animal) */
.litter{display:grid; gap:var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.litter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pet-card{border:1px solid var(--c-line-2); border-radius:var(--r-xl); overflow:hidden;
  background:var(--c-surface); display:flex; flex-direction:column}
.pet-gone{opacity:.55}
.pet-photo{position:relative; aspect-ratio:1; background:var(--c-sunken)}
.pet-photo img{width:100%;height:100%;object-fit:cover}
.pet-flag{position:absolute; inset:auto 0 0 0; background:rgba(29,26,20,.86); color:#fff;
  font:600 11px/1 var(--f-content); padding:6px; text-align:center; letter-spacing:.04em}
.pet-body{padding:10px 12px; display:flex; flex-direction:column; gap:3px; flex:1}
.pet-note{font-size:13px; color:var(--c-ink-2); margin:4px 0 0}
.pet-price{margin-top:auto; padding-top:6px; font-family:var(--f-display); font-weight:600;
  font-size:17px}

/* ------------------------------------------------------- species strip */
.species-strip{display:flex; gap:var(--s-2); overflow-x:auto; padding:var(--s-5) var(--s-4);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.species-strip::-webkit-scrollbar{display:none}
.species-pill{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border:1px solid var(--c-line-2); border-radius:var(--r-full); padding:9px 16px;
  text-decoration:none; color:var(--c-ink); font:600 14px/1 var(--f-content);
  background:var(--c-surface); flex:0 0 auto}
.species-pill svg{color:var(--c-link)}
.species-pill:hover{border-color:var(--c-link); color:var(--c-ink)}

/* --------------------------------------------------------- breed bento */
/* Exactly as many cells as there are breeds, with one lead tile so the grid
   has rhythm rather than six identical squares. */
.breed-bento{display:grid; gap:var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){
  .breed-bento{grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:172px}
  .breed-tile-lead{grid-column:span 2; grid-row:span 2}
}
.breed-tile{position:relative; display:block; border-radius:var(--r-xl); overflow:hidden;
  text-decoration:none; background:var(--c-sunken); aspect-ratio:4/3}
@media (min-width:1024px){.breed-tile{aspect-ratio:auto; height:100%}}
.breed-tile img{width:100%; height:100%; object-fit:cover; display:block}
.breed-tile-label{position:absolute; inset:auto 0 0 0; padding:16px 14px 14px;
  background:linear-gradient(to bottom, rgba(6,39,44,0) 0%, rgba(6,39,44,.62) 38%,
             rgba(6,39,44,.93) 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:3px}
.breed-tile-label strong{font-family:var(--f-display); font-size:17px; letter-spacing:-.01em}
.breed-tile-label em{font-style:normal; font-size:13px; opacity:.86; line-height:1.4}
@media (prefers-reduced-motion:no-preference){
  .breed-tile img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .breed-tile:hover img{transform:scale(1.04)}
}

/* -------------------------------------------------------- advice split */
.advice-split{display:grid; gap:var(--s-5)}
@media (min-width:1024px){.advice-split{grid-template-columns:1.35fr 1fr; gap:var(--s-8)}}
.advice-lead{display:block; text-decoration:none; color:inherit}
.advice-lead img{border-radius:var(--r-xl); aspect-ratio:16/9; object-fit:cover; width:100%}
.advice-lead h3{font-size:22px; margin:16px 0 6px}
.advice-lead:hover h3{text-decoration:underline}
.advice-list{list-style:none; padding:0; margin:0}
.advice-list li{border-top:1px solid var(--c-line-2)}
.advice-list li:first-child{border-top:0}
.advice-list a{display:block; padding:16px 0; text-decoration:none; color:inherit}
.advice-list strong{display:block; margin-bottom:3px}
.advice-list a:hover strong{text-decoration:underline}

.breed-hero{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r-2xl);
  margin:var(--s-5) 0 var(--s-6); background:var(--c-sunken)}

.boost-why{float:right; font:400 11px/1 var(--f-content); text-transform:none;
  letter-spacing:0; color:var(--c-link)}