/* =========================
   TRUE WAGS – VETS PAGE
   Mobile-first, desktop second
   ========================= */

/* --- Resets & media elements --- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, video, canvas { max-width: 100%; height: auto; display: block; margin-inline: auto; }
svg { height: auto; display: block; margin-inline: auto; }

/* --- Design tokens --- */
:root{
  --bg-soft:#ffffff;
  --card-bg:#ffffff;
  --ring:rgba(0,0,0,.08);
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --primary-color:#6c5ce7;
  --primary:#2c3e50;
  --accent:#6c5ce7;
  --highlight:#F7B733;
  --light:#ecf0f1;
  --dark:#34495e;
  --border:#E5E7EB;
  --muted:#F8FAFC;
  --muted-2:#F1F5F9;
  --text-base:#1f2937;
  --text-secondary:#6b7280;

  --maxw:1200px;
  --gap:clamp(12px, 2.5vw, 28px);
  --radius-lg:20px;

  /* header height for offsetting anchor jumps */
  --header-h:80px;
}

/* --- Base typography/layout --- */
html, body{
  background:var(--bg-soft);
  color:var(--text-base);
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  line-height:1.55;
}
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.container--narrow{ max-width:920px; margin-inline:auto; }
.container--fluid{ max-width:none; width:100%; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding:28px 18px; }
.wrap--narrow{ padding-inline:0; max-width:900px; }

.prose > * + *{ margin-top:1rem; }
.lead{ max-width:72ch; line-height:1.75; font-size:1.05rem; color:var(--text-base); }

.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:var(--primary-color); }
.hd-2{ font-size:1.75rem; margin:0 0 .6rem; line-height:1.2; }
.hd-3{ font-size:1.1rem; margin:1.25rem 0 .5rem; }
.hd-4{ font-size:1rem; letter-spacing:.01em; color:var(--primary-color); margin:0 0 .5rem; }

.kicker{ letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); font-size:12px; margin:0 0 4px; }
h1{ font-size:clamp(28px,6vw,42px); font-weight:600; color:var(--primary); margin:0 0 10px; }
.h2{ font-size:clamp(20px,5vw,26px); margin:0; color:var(--primary); }
.lede{ color:var(--text-secondary); font-size:clamp(16px,4vw,18px); max-width:68ch; margin:0; }
.lede--tight{ margin-top:6px; }

.grid{ display:grid; gap:var(--gap); margin-top:22px; }
.stack{ display:grid; gap:var(--gap); }

.rule{ border:0; border-top:1px solid var(--border); margin:30px 0 16px; }

/* --- Sticky header safety (no overlap) --- */
.site-header,
header[role="banner"],
nav[role="navigation"]{
  position: sticky; /* change to fixed if your global header uses it */
  top: 0;
  z-index: 10000;
  isolation: isolate;
  background:#fff;
}
main.wrap{ padding-top: var(--header-h); }
html, body{ scroll-padding-top: calc(var(--header-h) + 8px); }

/* --- Buttons (mobile: comfortable taps) --- */
.btn,
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 18px;
  border-radius:999px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid transparent;
  background:var(--accent); color:#fff; white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover,
.btn-primary:hover{ background:var(--primary-color); box-shadow:var(--shadow); }
.btn:active,
.btn-primary:active{ transform:translateY(1px); }
.btn:focus-visible,
.btn-primary:focus-visible{ outline:3px solid #a5b4fc; outline-offset:2px; }

.btn--ghost{
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.btn--ghost:hover,
.btn--ghost:focus{ background:var(--accent); color:#fff; }

.btn--sm{ padding:9px 14px; font-size:.95rem; line-height:1; }

.cta-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- Icons --- */
.icon{ width:34px; height:34px; color:var(--accent); flex:0 0 34px; }

/* --- Hero (mobile-first) --- */
:root{
  --hero-gap: clamp(16px, 2.4vw, 28px);
  --hero-inner-gap: clamp(10px, 1.8vw, 18px);
  --hero-maxch: 62ch;
  --hero-maxh: 18ch;
}
.hero.small-hero{ padding:clamp(28px, 6vw, 56px) 0; background:var(--highlight); color:#1b1b1b; }
.hero.small-hero h1,
.hero.small-hero p,
.hero.small-hero .eyebrow{ text-shadow:none !important; }

.hero.small-hero .container{
  display:grid; grid-template-columns:1fr; gap:var(--hero-gap);
  align-items:center; justify-items:center;
}
.hero-content{
  display:grid; gap:var(--hero-inner-gap);
  text-align:center; max-width:720px;
}
.hero.small-hero .eyebrow{
  letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  font-size:.8rem; color:var(--primary-color); margin:0;
}
.hero.small-hero h1{
  margin:0; max-width:var(--hero-maxh);
  font-size:clamp(1.9rem, 1.1rem + 2.6vw, 2.8rem);
  line-height:1.12; color:var(--primary); font-weight:650;
}
.hero.small-hero .measure{
  margin:0; max-width:var(--hero-maxch);
  font-size:clamp(1.0625rem, .9rem + .6vw, 1.25rem);
  line-height:1.6; color:#2b2b2b; opacity:.98;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:4px; }

.hero-media{ display:block; }
.hero-media img{
  width:100%; max-width:680px; aspect-ratio:3 / 2; object-fit:cover;
  border-radius:16px; box-shadow:var(--shadow);
}

/* --- Cards & notes (mobile base) --- */
.note{
  background:linear-gradient(0deg,#fff,var(--bg-soft));
  border:1px solid var(--border);
  border-left:4px solid var(--primary-color);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
  color:var(--text-secondary);
}
.note strong{ color:var(--primary); }

.note.note--tight{
  padding:14px 14px 12px;
  border-radius:14px;
  border-left-color:var(--primary-color);
  background:linear-gradient(0deg,#fff,var(--bg-soft));
  box-shadow:var(--shadow);
}
.note__hdr{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:.5rem 1rem; margin:0 0 .35rem;
}
.note__hdr strong{ font-size:1rem; line-height:1.3; color:var(--primary); }
.note__link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; text-decoration:none; color:var(--primary-color);
  border-bottom:1px solid transparent; white-space:nowrap;
}
.note__link:hover{ border-bottom-color: currentColor; }
.note__link svg{ width:16px; height:16px; }
.note.note--tight p{ margin:.35rem 0 0; color:var(--text-base); line-height:1.6; }
.note__check{ margin:.5rem 0 .25rem; padding-left:1.1rem; list-style:disc; }
.note__check li{ margin:.25rem 0; line-height:1.55; color:var(--text-secondary); }
.note__check li::marker{ color:var(--primary-color); }
.note__actions{ margin-top:.4rem; gap:.5rem; }

.option{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.1rem 1.1rem 1.25rem;
  box-shadow:var(--shadow);
  display:grid; gap:.75rem;
}
.option header{ display:flex; align-items:center; gap:.75rem; }
.option .icon{ width:26px; height:26px; color:var(--primary-color); flex:0 0 26px; }
.option .kicker{ margin:0; letter-spacing:.1em; font-size:.7rem; color:var(--text-secondary); }
.option .h2{ margin:.1rem 0 0; }
.option .copy{ line-height:1.65; color:var(--text-secondary); max-width:70ch; }

/* --- Breadcrumbs --- */
.breadcrumbs{
  background:var(--muted); border-block:1px solid var(--border); font-size:.95rem;
}
.breadcrumbs ol{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:0; padding:10px 16px; list-style:none;
}
.breadcrumbs a{ color:var(--dark); text-decoration:none; border-bottom:1px solid transparent; }
.breadcrumbs a:hover{ border-bottom-color: currentColor; }
.breadcrumbs a:focus-visible{ outline:2px solid #a5b4fc; outline-offset:2px; }
.breadcrumbs li[aria-current="page"]{ font-weight:700; color:var(--primary); }

/* --- APBC strip (informational) --- */
.apbc-strip{
  display:grid; grid-template-columns:1fr auto;
  gap:.75rem 1rem; align-items:center;
  background:#fff; border:1px solid var(--ring);
  border-left:4px solid var(--primary-color);
  border-radius:12px; padding:.8rem 1rem; box-shadow:var(--shadow);
  margin:1rem 0 1.25rem;
}
.apbc-strip__text{ color:var(--text-base); }
.apbc-strip__link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--primary-color); text-decoration:none; font-weight:700;
  border-bottom:1px solid transparent;
}
.apbc-strip__link:hover{ border-bottom-color: currentColor; }
.apbc-strip__link svg{ width:16px; height:16px; }

/* --- Unboxed “How it works” variant (if you removed the card) --- */
.refer-info{
  background:transparent; border:0; box-shadow:none;
  padding:0; margin:0 0 1rem; color:var(--text-base, #1f2937);
}
.refer-info__hdr{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.25rem;
}
.refer-info__hdr > strong{
  font-size:clamp(.95rem, 1vw + .6rem, 1.1rem);
  letter-spacing:.02em; text-transform:uppercase;
}
.refer-info__link{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:underline; color:inherit; }
.refer-info__icon{ width:18px; height:18px; opacity:.9; }
.refer-info p{ margin:.5rem 0 .75rem; line-height:1.65; }
.refer-info__list{ margin:.25rem 0 1rem 1.2rem; padding:0; list-style:disc; }
.refer-info__actions .btn{ margin-right:.5rem; }
.grid .refer-info{ margin-top:.25rem; }
#refer .refer-info{ scroll-margin-top:96px; }

/* --- Motion prefs --- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto; animation:none; transition:none; }
}

/* =====================
   Progressive Enhancements
   ===================== */

/* ≥600px */
@media (min-width:600px){
  .container{ padding:0 1.5rem; }
  .wrap{ padding:32px 24px; }
  .hd-2{ font-size:clamp(1.9rem, 1.3rem + 1.2vw, 2.4rem); }
  .hd-3{ font-size:clamp(1.15rem, 1rem + .4vw, 1.35rem); }
}

/* ≥700px: buttons stop stretching if you had them full-width somewhere */
@media (min-width:700px){
  .btn{ width:auto; max-width:none; padding:.9rem 1.2rem; }
}

/* ≥800–860px: utility grids if used */
@media (min-width:800px){ .facts{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:820px){ .lists-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:860px){ .issue-grid.two-columns{ grid-template-columns:1fr 1fr; } }

/* ≥900px: major layout shifts */
@media (min-width:900px){
  .hero.small-hero .container{
    grid-template-columns:1.1fr .9fr;
    justify-items:stretch; text-align:left;
    gap:clamp(24px, 3vw, 40px);
  }
  .hero-content{ text-align:left; justify-self:start; max-width:640px; }
  .hero-cta{ justify-content:start; }

  .grid{ grid-template-columns:1.05fr 1fr; gap:28px; }
  .option{ padding:1.25rem 1.25rem 1.4rem; }

  .process .steps{ grid-template-columns:repeat(3, 1fr); }
  .pricing-grid{ grid-template-columns:repeat(3, 1fr); }

  .note.note--tight{ padding:16px 16px 14px; }
}

/* ≥1280px: widen readable line-lengths */
@media (min-width:1280px){
  .about-intro--wide .lead{ max-width:1100px; }
}

/* Safety: force hero heading to behave if something global tries to stick it */
.hero-title{ position:static !important; top:auto !important; }

/* Demote cards so they can’t overpaint the header even with shadows */
.option, .note, .note.note--tight{ position:relative; z-index:0; }
/* Safety: avoid accidental new stacking contexts on containers */
.grid, .stack, .option, .note{ transform:none; filter:none; will-change:auto; }