/* ─────────────────────────────────────────────────────────────
   Pets & Paws Co. — shared styles for standalone content pages
   Tokens, header, footer copied verbatim from index.html so the
   content pages are pixel-identical to the storefront chrome.
   ───────────────────────────────────────────────────────────── */
:root{
  --bone:#FAF7F1;
  --paper:#FFFFFF;
  --ink:#191C22;
  --ink-2:#5D6472;
  --ink-3:#8B92A0;
  --clay:#C0603C;
  --clay-dk:#A34E2E;
  --sage:#6F7F6A;
  --brass:#B08D57;
  --line:#E7E1D6;
  --line-2:#F1ECE3;

  --shell:min(1320px, 100% - 3rem);
  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(25,28,34,.04), 0 12px 32px -12px rgba(25,28,34,.14);
  --shadow-lg:0 24px 70px -20px rgba(25,28,34,.28);

  --serif:"Fraunces", ui-serif, Georgia, serif;
  --sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.02em; line-height:1.06;
  font-variation-settings:"SOFT" 30,"WONK" 1}
p{margin:0}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:4px}

.shell{width:var(--shell); margin-inline:auto}
.eyebrow{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:999px; font-weight:600; font-size:.875rem;
  letter-spacing:.01em; transition:.35s var(--ease); white-space:nowrap}
.btn-ink{background:var(--ink); color:var(--bone)}
.btn-ink:hover{background:#000; transform:translateY(-1px)}
.btn-out{border:1px solid var(--ink); color:var(--ink)}
.btn-out:hover{background:var(--ink); color:var(--bone)}

/* ── announce ── */
.announce{background:var(--ink); color:#EFE9DE; font-size:.75rem; letter-spacing:.05em;
  text-align:center; padding:.6rem 1rem}
.announce b{color:#fff; font-weight:600}

/* ── header ── */
.hdr{position:sticky; top:0; z-index:60; background:rgba(250,247,241,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:1.25rem; height:74px}
.mark{display:flex; align-items:baseline; gap:.45rem; font-family:var(--serif); font-weight:600;
  font-size:1.2rem; letter-spacing:-.015em; margin-right:auto}
.mark svg{width:26px; height:26px; align-self:center}
.mark .amp{color:var(--clay)}
.mark .co{font-family:var(--sans); font-size:.6rem; letter-spacing:.18em; font-weight:600;
  color:var(--ink-3); text-transform:uppercase; transform:translateY(-2px)}
.nav{display:flex; gap:1.9rem; font-size:.8125rem; font-weight:500; letter-spacing:.02em}
.nav a{position:relative; padding:.3rem 0; color:var(--ink-2); transition:color .25s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--clay); transition:right .35s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.nav a[aria-current]{color:var(--ink)} .nav a[aria-current]::after{right:0}
.hdr-act{display:flex; align-items:center; gap:.35rem; margin-left:1.4rem}
.icon-btn{width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  position:relative; transition:background .25s}
.icon-btn:hover{background:rgba(25,28,34,.06)}
.icon-btn svg{width:19px; height:19px; stroke:var(--ink); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

/* ── document page ── */
.doc-hd{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line)}
.doc-hd .eyebrow{margin-bottom:1.1rem}
.doc-hd h1{font-size:clamp(2.4rem,5.4vw,3.9rem); font-weight:400; letter-spacing:-.03em; max-width:18ch}
.doc-hd .lede{margin-top:1.4rem; font-size:1.0625rem; color:var(--ink-2); max-width:60ch}
.doc-hd .updated{margin-top:1.6rem; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3)}

.doc-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2.5rem,6vw,5rem);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem); align-items:start}
.doc-main{max-width:70ch}
.doc-main section + section{margin-top:clamp(2.2rem,4vw,3rem)}
.doc-main h2{font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:500; letter-spacing:-.02em;
  margin-bottom:.9rem}
.doc-main h3{font-family:var(--sans); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin:1.8rem 0 .7rem}
.doc-main p{color:var(--ink-2); margin-bottom:1rem}
.doc-main p:last-child{margin-bottom:0}
.doc-main b,.doc-main strong{color:var(--ink); font-weight:600}
.doc-main a{color:var(--clay); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(192,96,60,.35); transition:.25s}
.doc-main a:hover{text-decoration-color:var(--clay)}
.doc-main ul,.doc-main ol{margin:0 0 1rem; padding-left:1.15rem; color:var(--ink-2); display:grid; gap:.5rem}
.doc-main li::marker{color:var(--ink-3)}

.rate-table{width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.9375rem}
.rate-table th,.rate-table td{text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line)}
.rate-table th{font-family:var(--sans); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); border-bottom-color:var(--ink-3)}
.rate-table td{color:var(--ink-2)}
.rate-table td:first-child{color:var(--ink); font-weight:600}
.rate-table tr:last-child td{border-bottom:0}
.rate-table td,.rate-table th{overflow-wrap:anywhere}

.note{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.35rem 1.5rem; margin:1.4rem 0}
.note h3{margin-top:0}
.note p:last-child{margin-bottom:0}

/* ── aside card ── */
.doc-aside{position:sticky; top:100px; display:grid; gap:1rem}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem 1.7rem; box-shadow:var(--shadow)}
.card h3{font-family:var(--sans); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin:0 0 1rem}
.card p{font-size:.9375rem; color:var(--ink-2); margin-bottom:.85rem}
.card p:last-child{margin-bottom:0}
.card a{color:var(--clay)}
.card .big{font-family:var(--serif); font-size:1.4rem; color:var(--ink); letter-spacing:-.02em;
  display:block; margin-bottom:.2rem}
.card ul{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.card ul a{font-size:.9375rem; color:var(--ink-2); text-decoration:none}
.card ul a:hover{color:var(--ink)}

/* ── contact grid ── */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;
  margin:0 0 1.6rem}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.5rem}
.contact-card h3{margin:0 0 .6rem}
.contact-card .val{font-size:1rem; color:var(--ink); font-weight:600; word-break:break-word}
.contact-card .val a{color:var(--clay); text-decoration:none}
.contact-card .val a:hover{text-decoration:underline}
.contact-card .sub{font-size:.8125rem; color:var(--ink-3); margin-top:.35rem}

/* ── footer ── */
.ftr{border-top:1px solid var(--line); margin-top:clamp(3.5rem,7vw,6rem); padding:3.5rem 0 2rem}
.ftr-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.5rem; margin-bottom:3rem}
.ftr-brand p{font-size:.875rem; color:var(--ink-2); max-width:34ch; margin-top:1rem}
.ftr h4{font-family:var(--sans); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin-bottom:1.1rem}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.ftr li a, .ftr li button{font-size:.875rem; color:var(--ink-2); transition:color .25s; text-align:left}
.ftr li a:hover, .ftr li button:hover{color:var(--ink)}
.ftr-btm{border-top:1px solid var(--line); padding-top:1.6rem; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:var(--ink-3)}
.ftr-btm a{color:inherit}
.ftr-btm a:hover{color:var(--ink-2)}
.pay-row{display:flex; gap:.4rem; align-items:center}
.pay-row span{border:1px solid var(--line); border-radius:5px; padding:.22rem .5rem; font-size:.625rem;
  font-weight:700; letter-spacing:.06em; color:var(--ink-2); background:var(--paper)}

/* ── responsive ── */
@media(max-width:1080px){
  .doc-body{grid-template-columns:1fr}
  .doc-aside{position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:2rem}
}
@media(max-width:860px){
  :root{--shell:min(1320px, 100% - 2rem)}
  .nav{display:none}
}
@media(max-width:600px){
  .ftr-grid{grid-template-columns:1fr}
  .hdr-in{height:64px}
  /* tables scroll inside themselves rather than pushing the page wide */
  .rate-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .rate-table thead,.rate-table tbody,.rate-table tr{display:table; width:100%; table-layout:fixed}
  .contact-grid{grid-template-columns:1fr}
  .doc-main .val,.contact-card .val{font-size:.9375rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}