/* peptide4pups: one utility sheet. Each class does one job. */

/* Type: a variable sans already installed on the reader's device, named through local() so no file
   is fetched. Weight carries the hierarchy (400 body, 700-800 names and titles). */
@font-face {
  font-family: "Pup Kit Sans";
  src: local("Segoe UI Variable Display"), local("SegoeUIVariable"), local("Roboto Flex"),
       local("RobotoFlex"), local("Noto Sans"), local("NotoSans");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #1f2430;
  --muted: #4f5566;
  --orange: #fc8019;
  --orange-deep: #a84a00;
  --green: #48c479;
  --green-dark: #1d6b3f;
  --amber: #db7c38;
  --amber-dark: #8a4510;
  --mist: #f4f4f5;
  --peach: #fff3e9;
  --line: #d9dbe1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p, li, label { overflow-wrap: anywhere; }
a { color: var(--orange-deep); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }


/* font */
.ff-body { font-family: "Pup Kit Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* display */
.d-block { display: block; }
.d-iblock { display: inline-block; }
.d-flex { display: flex; }
.d-iflex { display: inline-flex; }
.d-grid { display: grid; }

/* flex */
.fd-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.fl-1 { flex: 1 1 auto; }
.ai-center { align-items: center; }
.ai-start { align-items: start; }
.as-start { align-self: flex-start; }
.jc-between { justify-content: space-between; }
.nowrap { white-space: nowrap; }
.order-1 { order: 1; }
.order-2 { order: 2; }

/* gap */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-32 { gap: 32px; }

/* spacing */
.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 2px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.p-0 { padding: 0; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.pt-12 { padding-top: 12px; }
.pt-32 { padding-top: 32px; }
.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-32 { padding-bottom: 32px; }
.pl-12 { padding-left: 12px; }
.pl-16 { padding-left: 16px; }

/* size */
.mw-wide { max-width: 1180px; }
.mw-prose { max-width: 40rem; }
.w-100 { width: 100%; }
.h-auto { height: auto; }
.w-28 { width: 28px; }
.h-28 { height: 28px; }
.minh-32 { min-height: 32px; }
.minh-44 { min-height: 44px; }
.minh-48 { min-height: 48px; }

/* type */
.fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 30px; }
.fs-40 { font-size: 36px; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.lh-11 { line-height: 1.1; }
.lh-12 { line-height: 1.2; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.ls-tight { letter-spacing: -0.02em; }
.u-nounder { text-decoration: none; }
.u-underline { text-decoration: underline; text-underline-offset: 3px; }

/* colour */
.c-ink { color: var(--ink); }
.c-muted { color: var(--muted); }
.c-link { color: var(--orange-deep); }
.c-green-dark { color: var(--green-dark); }
.c-amber-dark { color: var(--amber-dark); }
.bg-white { background: #fff; }
.bg-mist { background: var(--mist); }
.bg-peach { background: var(--peach); }
.bg-orange { background: var(--orange); }
.bg-green { background: var(--green); }
.bg-amber { background: var(--amber); }

/* borders and shapes */
.b-0 { border: 0; }
.b-grey { border: 1.5px solid var(--line); }
.bl-orange { border-left: 4px solid var(--orange); }
.bl-green { border-left: 4px solid var(--green); }
.bl-amber { border-left: 4px solid var(--amber); }
.bt-amber-6 { border-top: 6px solid var(--amber); }
.bt-dash-orange { border-top: 2px dashed var(--orange); }
.rounded-8 { border-radius: 8px; }
.rounded-16 { border-radius: 16px; }
.rounded-20 { border-radius: 20px; }
.rounded-24 { border-radius: 24px; }
.rounded-32 { border-radius: 32px; }
.rounded-pill { border-radius: 999px; }
.shadow-soft { box-shadow: 0 2px 14px rgba(31, 36, 48, 0.08); }

/* overflow, position, behaviour */
.ov-x-auto { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.list-none { list-style: none; }
.cur-pointer { cursor: pointer; }

/* hover states (one job each) */
.hov-orange:hover { background: var(--peach); color: var(--orange-deep); }
.hov-dark:hover { filter: brightness(0.94); }
[aria-current="page"] { background: var(--orange); }

/* the tick box */
.box { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px; height: 44px; margin-top: 0;
  border: 2.5px solid var(--orange); border-radius: 14px; background: #fff; cursor: pointer; display: grid; place-content: center; }
.box::after { content: ""; width: 18px; height: 10px; border-left: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.box:checked { background: var(--green); border-color: var(--green); }
.box:checked::after { opacity: 1; }
.box:checked + label { color: var(--muted); }

/* comparison toggle states (set by compare.js) */
[data-compare].only-approved [data-side="online"] { display: none; }
[data-compare].only-online [data-side="approved"] { display: none; }
[data-compare] button[aria-pressed="true"] { background: var(--orange); }

/* breakpoints */
@media (min-width: 720px) {
  .fd-row-md { flex-direction: row; }
  .ai-center-md { align-items: center; }
  .gap-16-md { gap: 16px; }
  .grid-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3-md { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pos-sticky-md { position: sticky; }
  .w-auto-md { width: auto; }
}
@media (min-width: 1024px) {
  .fd-row-lg { flex-direction: row; }
  .ai-center-lg { align-items: center; }
  .gap-24-lg { gap: 24px; }
  .grid-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-q-lg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .p-40-lg { padding: 40px; }
  .fs-52-lg { font-size: 52px; }
  .fs-32 { font-size: 32px; }
  .order-1-lg { order: 1; }
  .order-2-lg { order: 2; }
  .pos-sticky-lg { position: sticky; }
  .top-96 { top: 96px; }
}