/* PetMedsDirect Design System v4 — Care Label */
/* A calm pharmacy-tool identity: coral actions, sage guidance, label-like data. */

:root{
  --surface:#FFFFFF;--surface-hover:#EEF6F1;
  --teal:#D65F51;--teal-hover:#B9473D;--teal-light:#FFF1EF;--teal-ghost:rgba(214,95,81,.09);
  --green:#527B66;--amber:#A96A21;--red:#B83C35;
  --line:#D4E2DB;--line-strong:#B8CCC2;
  --paper:#F3F8F5;--paper-elevated:#FFFFFF;--paper-dark:#E6F0EA;
  --ink:#173B33;--ink-soft:#435F57;--ink-muted:#71877F;
  --label:#E6F0EA;--label-ink:#2E5C4B;
}

html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(82,123,102,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(82,123,102,.035) 1px,transparent 1px);
  background-size:26px 26px;
}
a,button,input,select,summary{outline-offset:4px}
:where(a,button,input,select,summary):focus-visible{outline:3px solid #F0A89F!important}
.skip-link{position:fixed;top:-64px;left:16px;z-index:1000;padding:10px 14px;background:var(--teal);color:#fff;font-weight:800;text-decoration:none}
.skip-link:focus{top:16px}

/* ── Serif override ── */
.serif{font-family:'Crimson Text','Georgia',serif!important}

/* ── Card hover ── */
.card{border-color:var(--line)!important;box-shadow:0 1px 0 rgba(23,59,51,.03)}
.card:hover{box-shadow:0 16px 36px rgba(23,59,51,.09),0 2px 8px rgba(23,59,51,.04)!important;border-color:var(--line-strong)!important}
.btn-primary{background:var(--teal)!important;box-shadow:0 7px 18px rgba(214,95,81,.22)!important}
.btn-primary:hover{background:var(--teal-hover)!important}
.btn-outline{color:var(--ink)!important;border-color:var(--line-strong)!important;background:rgba(255,255,255,.72)!important}
.btn-outline:hover{border-color:var(--green)!important;background:var(--surface)!important}

/* Homepage signature: an information label, not a sales banner. */
.hero-bg{border-radius:26px!important;border-color:var(--line-strong)!important;box-shadow:0 24px 60px rgba(23,59,51,.12)}
.hero-copy{position:relative;padding-left:22px;border-left:5px solid var(--teal)}
.rx-strip{display:flex;flex-wrap:wrap;gap:0;margin:0 0 22px;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.9);width:max-content;max-width:100%}
.rx-strip span{padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--label-ink);border-right:1px solid var(--line)}
.rx-strip span:last-child{border-right:0}
.decision-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.decision-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.decision-item strong{display:block;color:var(--ink);margin-bottom:5px;font-size:14px}
.decision-item span{font-size:12px;line-height:1.55;color:var(--ink-muted)}
#pixel-pup,#corner-pup{display:none!important}

/* ── Responsive headings ── */
h1{font-size:clamp(1.8rem,4vw,2.8rem)}
h2{font-size:clamp(1.3rem,2.5vw,1.6rem)}
h3{font-size:clamp(1rem,1.5vw,1.2rem)}

/* ===== MOBILE ===== */
@media(max-width:768px){
  body{font-size:14px!important}
  nav{height:auto!important}
  h1{font-size:clamp(1.5rem,4vw,2rem)!important;line-height:1.2!important}
  h2{font-size:clamp(1.2rem,3vw,1.5rem)!important}
  .card{padding:16px!important}
  main,section{padding-left:12px!important;padding-right:12px!important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  table{font-size:13px!important}
  thead th{padding:8px 10px!important;font-size:10px!important}
  tbody td{padding:8px 10px!important}
  .btn{padding:10px 18px!important;font-size:.85rem!important}
  footer{text-align:center!important;padding:24px 12px!important}
  .hero-copy{padding-left:0;border-left:0}
  .rx-strip{margin-left:auto;margin-right:auto;justify-content:center}
  .rx-strip span{flex:1 1 auto;text-align:center}
  .decision-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:460px){.decision-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}