/* ============================================================================
   Peptide Portal — site styles
   Consumes tokens.css. All values trace to the 2026-08-25 recon.
   ============================================================================ */

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Visually hidden, still announced.
   `.dp-sr` is the theme's own class, used by the header search, the shop archive, the COA page
   and the cart's coupon form — but it was DEFINED ONLY IN coa.css, which loads on exactly one
   page. Everywhere else those labels rendered as visible copy: a stray "Search products" over
   the /products search field, and "Search products" plus the whole "Results update as you
   type…" hint sprawled across the header search panel the moment it opened.
   `.screen-reader-text` is WooCommerce's — its stylesheet is dequeued here, so without this a
   price range prints "Price range: $69.00 through $619.00" after the price.
   One definition, in the stylesheet that loads on every page. */
.dp-sr,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html { -webkit-text-size-adjust: 100%; }
/* Smooth scrolling for in-page anchors (FAQ jumps, skip link, back-to-top). Gated on the
   OS setting: forcing smooth scroll on someone who asked for reduced motion is a
   vestibular-accessibility problem, not a nicety. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--dp-font);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-regular);
  line-height: 1.45;
  color: var(--dp-ink);
  background: var(--dp-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }

.dp-skip {
  position: absolute; top: 0; left: 0; z-index: 999;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  padding: var(--dp-s-4) var(--dp-s-7); background: var(--dp-blue); color: var(--dpx-fg-fff, #fff);
  border-radius: 0 0 var(--dp-r-3xs) 0;
}
.dp-skip:focus {
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
}

/* --- Layout -------------------------------------------------------------
   DP centres a fixed max width and insets its panels from the viewport edge. */
.dp-wrap {
  width: 100%;
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
}

.dp-main { display: block; }

/* --- Pill CTA -----------------------------------------------------------
   THE signature DP component: a fully-rounded blue pill with a lighter circular
   badge holding an arrow on the LEFT. Reproduce exactly — it appears in every
   band and is the fastest way to tell a faithful clone from an approximation. */
.dp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-s-3);
  padding: 8px 14px 8px 8px;   /* measured on DP */
  border: 0;
  border-radius: var(--dp-r-pill);
  background: var(--dp-blue);
  color: var(--dp-on-dark);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-semi);
  cursor: pointer;
  transition: background-color var(--dp-t-cta) var(--dp-ease-cta),
              color            var(--dp-t-cta) var(--dp-ease-cta);
}
/* DP tracks every label in: -0.28px on the page pills, -0.4px on the card pill. The
   theme had none at all, which is most of what reads as "the spacing is off". */
/* nowrap is load-bearing, not tidiness: "Learn More" needs 66.8px and the grid pill
   leaves exactly 67px of room (125 - 8 pad - 28 icon - 8 gap - 14 pad). DP holds it on
   one line with white-space:pre; letting it wrap turned that pill into a two-line block
   and made every card on /products the wrong shape. */
.dp-btn__lbl { display: inline-block; white-space: nowrap; line-height: 20px; letter-spacing: -.28px; transition: transform var(--dp-t-cta) var(--dp-ease-cta); }
/* HOVER — measured on DP, not invented. The pill fully INVERTS and the arrow badge
   swaps sides while the arrow rotates -45deg and grows ~1.42x:
     bg    #DC4920 -> #FFFFFF          label  #FFFFFF -> #DC4920
     badge x128 -> x227.5 (slides)     badge bg rgba(255,255,255,.2) -> #FDEFEB
     arrow 20px white -> 28.3px blue, rotate(-45deg)
   The slide distances depend on the label width, so ui.js measures each button once
   and writes --dp-swap-badge / --dp-swap-label. Without JS the colours still animate. */
.dp-btn:hover { background: var(--dp-surface); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-btn:hover .dp-btn__ico { background: var(--dpx-bg-e9f3ff, #FDEFEB); transform: translateX(var(--dp-swap-badge, 0px)); }
.dp-btn:hover .dp-btn__lbl { transform: translateX(var(--dp-swap-label, 0px)); }
.dp-btn:hover .dp-btn__ico svg { transform: rotate(-45deg); }
.dp-btn:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }

.dp-btn__ico {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--dpx-bg-a255255255p22, rgba(255, 255, 255, .22));
  transition: background-color var(--dp-t-cta) var(--dp-ease-cta),
              transform        var(--dp-t-cta) var(--dp-ease-cta);
  will-change: transform;
}
.dp-btn__ico svg {
  width: 14px; height: 14px;
  transition: transform var(--dp-t-cta) var(--dp-ease-cta);
}

/* Trailing-chevron variant used on product rail cards. */
.dp-btn--trail { padding: var(--dp-s-3) var(--dp-s-4) var(--dp-s-3) var(--dp-s-7); }
.dp-btn--trail .dp-btn__ico { order: 2; width: 22px; height: 22px; flex-basis: 22px; }

/* DP pins BOTH the announcement strip and the masthead to the viewport
   (measured: position:fixed, strip y0 h37, nav y37 h37). The page is offset by
   their combined height so the hero still begins at y=74. */
.dp-strip, .dp-head { position: fixed; left: 0; right: 0; z-index: 90; }
.dp-strip { top: 0; }
.dp-head  { top: var(--dp-strip-h); }
body.dp   { padding-top: calc(var(--dp-strip-h) + var(--dp-header-h)); }

/* --- Announcement strip -------------------------------------------------
   Measured 37px at 1440. Together with the 37px header this puts the hero at
   y=74, which is what makes DP's four-band fold possible. Do not pad. */
.dp-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-s-2);
  height: var(--dp-strip-h);          /* exactly 37 — measured */
  padding: 0 var(--dp-s-7);
  background: var(--dp-surface-alt);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-medium);
  line-height: 16.8px;
  letter-spacing: -.4px;
  text-align: center;
}
.dp-strip__tel { color: var(--dpx-fg-blue, var(--dp-blue)); font-weight: var(--dp-fw-medium); white-space: nowrap; }
.dp-strip__txt--narrow { display: none; }

/* --- Header -------------------------------------------------------------- */
.dp-head { background: var(--dp-surface); }

.dp-head__in {
  display: flex;
  align-items: center;
  /* Positioned at every width, not just desktop: it is the containing block the search
     panel anchors to, and on a phone that panel still has to line up with the gutter. */
  position: relative;
  gap: var(--dp-s-9);
  height: var(--dp-header-h);         /* exactly 37 — strip + header = 74 = hero y */
  max-width: none;
  margin-inline: auto;
  padding: 0 var(--dp-gutter);
}

.dp-logo { flex: 0 0 auto; }
.dp-logo__img { width: 141px; height: 20px; }

/* The nav lives behind the hamburger at EVERY width (the Origin Science pattern):
   no inline links on desktop — the burger opens the same stacked dropdown the
   phone gets. The rules below are the former mobile drawer, promoted to base. */

/* The search trigger and the cart are ONE right-hand group, so the auto margin belongs on the
   FIRST of them. With it on the cart, search stayed pinned beside the logo at x281 — and the
   panel is anchored right:0 to that 24px icon, so a 420px panel opened at x-115 and hung off
   the left edge of the screen entirely. Outside the breakpoint deliberately: the icon sat
   beside the logo on a phone too. The 20px gap comes from .dp-head__in's own flex gap, so the
   cart's base margin is cleared rather than added to it.
   Both are two classes deep because the base .dp-cart / .dp-search rules sit LATER in this
   file at the same specificity, where file order would otherwise decide. */
.dp-head__in .dp-search { margin-left: auto; }
.dp-head__in .dp-cart { margin-left: 0; }
/* The menu is a drawer from the RIGHT at every width, not a drop from the
   header: a full-screen scrim (the nav element itself, closed on tap by
   ui.js) with a surface panel beside the thumb. ui.js moves the element to
   <body> — the header's backdrop-filter is a containing block for fixed
   descendants, so the drawer could never cover the viewport from inside it.
   It sits UNDER the glass header (z 85 vs 90), which keeps the logo and the
   burger-turned-X visible and clickable above the scrim. */
.dp-nav {
  position: fixed; inset: 0;
  z-index: 85;
  display: block;
  pointer-events: none;
  visibility: hidden;
  transition: visibility .28s;
}
.dp-nav::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--dpx-bg-a333764p36, rgba(26, 18, 14, .42));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
}
.dp-nav__list {
  position: absolute; top: 0; right: 0; bottom: 0;
  z-index: 1;
  width: min(320px, 84vw);
  display: grid; gap: 0; align-content: start;
  padding: calc(74px + var(--dp-s-7)) var(--dp-s-9) var(--dp-s-9);
  background: var(--dp-surface);
  border-left: 1px solid var(--dp-hairline);
  box-shadow: -24px 0 60px -30px var(--dpx-shadow-a462820p35, rgba(26, 18, 14, .5));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.dp-nav.is-open { pointer-events: auto; visibility: visible; }
/* The pinned cart bar (and the shop page's cart bar) sit above the drawer's
   scrim by z-index; while the menu is open they step aside entirely. */
html.dp-menu-open .dpc-bar,
html.dp-menu-open .dp-shopbar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility .18s;
}
.dp-nav.is-open::before { opacity: 1; }
.dp-nav.is-open .dp-nav__list { transform: none; }
.dp-nav__list li { border-top: 1px solid var(--dp-hairline); }
.dp-nav__list li:first-child { border-top: 0; }
.dp-nav__list a {
  display: block; padding: var(--dp-s-6) 0;
  font-size: var(--dp-fs-lg);
  font-weight: var(--dp-fw-medium);
  letter-spacing: -.01em;              /* measured -0.14px at 14px */
  color: var(--dp-ink);
}
.dp-nav__list a:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-nav__list .is-current > a,
.dp-nav__list .current-menu-item > a { color: var(--dpx-fg-blue, var(--dp-blue)); }

.dp-burger {
  display: grid; place-content: center; gap: 4px;
  order: 3;
  width: 32px; height: 32px; margin-left: var(--dp-s-5);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.dp-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--dp-ink); transition: transform .18s ease, opacity .18s ease; }
.dp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.dp-head__in .dp-cart { order: 2; }
html:not(.has-js) .dp-nav { position: static; visibility: visible; pointer-events: auto; }
html:not(.has-js) .dp-nav::before { display: none; }
html:not(.has-js) .dp-nav__list {
  position: static; width: auto; transform: none;
  padding: var(--dp-s-3) var(--dp-gutter) var(--dp-s-7);
  border-left: 0; box-shadow: none;
}
html:not(.has-js) .dp-burger { display: none; }

/* grid + place-items, NOT the default inline. As an inline <a> the link inherited a line
   box taller than its 20px icon — 36px on a phone — so the bag sat at the TOP of that box and
   rode ~8px above every other control in the header, which all centre at the same y. The
   badge is positioned against this element, so it follows the icon back down too. */
.dp-cart {
  position: relative; display: grid; place-items: center;
  margin-left: var(--dp-s-9); color: var(--dp-ink);
}
.dp-cart__n {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--dp-r-pill);
  background: var(--dp-blue); color: var(--dpx-fg-fff, #fff);
  font-size: 10px; font-weight: var(--dp-fw-semi);
}
.dp-cart__n:empty, .dp-cart__n[data-dp-cart-count="0"] { display: none; }

/* --- Generic document page ---------------------------------------------- */
.dp-doc { padding-block: var(--dp-s-12) 64px; }
.dp-doc__title { font-size: var(--dp-fs-display); font-weight: var(--dp-fw-semi); letter-spacing: -.02em; }
.dp-doc__body { margin-top: var(--dp-s-10); color: var(--dp-ink-60); }
.dp-doc__body p { margin-block: var(--dp-s-5); }

/* --- Two-column CTA band (products + COA) --------------------------------
   MEASURED on DP at 1440: two 588px columns at x120 / x732, 24px apart, 298 tall,
   radius 30. The dark fill is #2E241E and the light is #F3F0EC — both already tokens,
   so no new colours are introduced here.
   Lives in site.css because two different templates use it; scoping it to one page's
   stylesheet is how the homepage Text-us band ended up unstyled on /coa. */
.dp-ctab { background: var(--dp-surface); padding: var(--dp-s-12) 0 0; }
.dp-ctab__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
}
.dp-ctab__panel {
  position: relative;
  min-height: 298px;
  padding: 23px 40px;
  border-radius: var(--dp-r-md);
  overflow: hidden;
}
.dp-ctab__panel--dark {
  background: var(--dpx-bg-ink, var(--dp-ink));
  /* Centered column at every width: heading and sub in the middle, the
     conversation beneath them on its own measure. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 26px; text-align: center;
}
.dp-ctab__panel--light { background: var(--dp-surface-mute); }

/* The copy must clear the phone art, which bleeds off the panel's bottom-right. */
.dp-ctab__txt { position: relative; z-index: 2; }
.dp-ctab__panel--dark .dp-ctab__txt { max-width: 640px; }

.dp-ctab__h {
  margin: 0;
  font-size: var(--dp-fs-h2);
  font-weight: var(--dp-fw-semi);
  line-height: 28px;
  letter-spacing: -.9px;
  color: var(--dp-on-dark);
}
.dp-ctab__h--ink { color: var(--dp-ink); }
.dp-ctab__sub {
  margin: 6px 0 0;
  max-width: 330px;
  font-size: var(--dp-fs-lg);
  font-weight: var(--dp-fw-medium);
  line-height: 20px;
  letter-spacing: -.4px;
  /* Opaque neutral grey: translucent white over the navy panel read light blue. */
  color: var(--dpx-fg-9aa0ab, #9AA0AB);
}
.dp-ctab__sub--ink { color: var(--dp-ink-50); max-width: 74%; }

.dp-ctab__cta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 28px;
}
.dp-ctab__tel {
  display: block;
  width: fit-content;
  font-size: var(--dp-fs-h4);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.6px;
  color: var(--dpx-fg-9aa0ab, #9AA0AB);
}
.dp-ctab__tel:hover { color: var(--dpx-fg-c6cad2, #C6CAD2); }

.dp-ctab__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 105px; height: 38px;
  padding-inline: var(--dp-s-9);
  border-radius: var(--dp-r-2xl);          /* 90px — measured */
  background: var(--dp-blue);
  color: var(--dp-on-dark);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-semi);
  line-height: 14px;
  letter-spacing: -.28px;
  transition: background-color .2s var(--dp-ease-cta);
}
.dp-ctab__btn:hover { background: var(--dpx-bg-0067d1, #bc3915); color: var(--dp-on-dark); }
.dp-ctab__btn:focus-visible { outline: 2px solid var(--dp-on-dark); outline-offset: 2px; }

/* The conversation is real markup, not a bitmap — crisp at every size and width. */
.dp-ctab__convo {
  flex: none; width: min(560px, 100%);
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;   /* bubbles keep their chat alignment inside the centered panel */
}
.dp-ctab__stamp {
  margin: 0 0 2px;
  text-align: center;
  font-size: var(--dp-fs-xs); font-weight: var(--dp-fw-medium);
  letter-spacing: .02em;
  color: var(--dpx-fg-a255255255p35, rgba(255, 255, 255, .35));
}
.dp-ctab__msg {
  margin: 0; width: fit-content; max-width: 88%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: var(--dp-fs-base); line-height: 1.4; letter-spacing: -.2px;
}
.dp-ctab__msg--out {
  align-self: flex-end;
  background: var(--dp-blue); color: var(--dp-on-dark);
  border-bottom-right-radius: 5px;
}
.dp-ctab__msg--in {
  align-self: flex-start;
  background: var(--dpx-bg-e9e9eb, #e9e9eb); color: var(--dpx-fg-1c1c1e, #1c1c1e);
  border-bottom-left-radius: 5px;
}
.dp-ctab__usa {
  position: absolute; left: 40px; right: 40px; bottom: 32px;
  width: auto; height: 103px;
  object-fit: contain; object-position: left bottom;
}

@media (max-width: 1199px) {
  .dp-ctab__txt { max-width: 100%; }
  .dp-ctab__panel--dark { padding-bottom: 28px; }
  .dp-ctab__convo { width: min(480px, 100%); }
}
@media (max-width: 809px) {
  .dp-ctab { padding-top: var(--dp-s-9); }
  .dp-ctab__in { grid-template-columns: 1fr; gap: var(--dp-s-5); }
  .dp-ctab__panel { min-height: 0; padding: var(--dp-s-7); }
  .dp-ctab__h { font-size: var(--dp-fs-lg); line-height: 22px; letter-spacing: -.6px; }
  .dp-ctab__sub { font-size: var(--dp-fs-base); }
  .dp-ctab__sub--ink { max-width: 100%; }
  .dp-ctab__usa { position: static; margin-top: var(--dp-s-7); height: 72px; }
}

/* --- Footer -------------------------------------------------------------
   MEASURED at 1440: band y1942 h608 bg #F3F0EC r8 · panel y1978 x120 w1200 h536
   bg #FFF r30 · mark y2028 x168 25x29 · help 15/400 ink@50% · phone+email 18/600
   blue · bar y2260 h78 (copyright 16/500 ink@50%, links 16/500 ink) · legal y2338
   h111 · payment strip y2467 x168 141x23. */
.dp-foot {
  /* Edge to edge: the footer is a full-bleed band, no inset card. It carries
     the old panel's surface so the content sits straight on it. */
  background: var(--dp-surface);
  border-radius: 0;
  padding: var(--dp-s-9) var(--dp-gutter) 0;
}
.dp-foot__panel {
  max-width: none;   /* .dp-foot already pads by the shared gutter */
  margin-inline: auto;
  padding: var(--dp-s-9) 0 0;
  border-radius: 0;
  background: none;
}

.dp-foot__top { display: flex; justify-content: space-between; gap: var(--dp-s-12); flex-wrap: wrap; }
.dp-foot__brand { display: block; }

/* The rotation lives on this wrapper, not the <img> — DP does the same, which keeps
   the transform off the element that carries layout size. */
.dp-foot__mark {
  /* DELIBERATE DEVIATION, requested: DP renders this mark at 25x29 (re-measured after a
     full scroll and settle — the earlier "50x57 measured" note was wrong). The client
     asked for a bigger footer icon, so it is doubled. Same asset as DP, 2x the box.
     .dp-foot__contact is offset by this height, so change both together. */
  display: block; width: var(--dp-foot-mark-w); height: var(--dp-foot-mark-h);
  transform: rotate(var(--dp-spin, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
}
.dp-foot__mark img { width: 100%; height: 100%; object-fit: contain; }

/* DP puts the tagline 87px below the top of its mark. Ours is 28px taller than DP's by
   request, so the gap absorbs the difference (57+30 = 87) and the footer keeps DP's
   height instead of growing by the extra icon. */
.dp-foot__tag { margin-top: 30px; font-size: var(--dp-fs-h4); font-weight: var(--dp-fw-semi); line-height: 1.35; }

/* MEASURED on DP: "Need help?" and "Verified compounds." share a top edge (both y2115).
   As a plain flex row the contact column starts at the MARK's top instead, riding ~100px
   too high. Drop it by the mark plus the tagline's gap so the two columns line up. */
.dp-foot__contact {
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  margin-top: calc(var(--dp-foot-mark-h) + 30px);   /* = DP 87px, see .dp-foot__tag */
}
.dp-foot__help { max-width: 287px; font-size: var(--dp-fs-md); color: var(--dp-ink-50); line-height: 1.35; }
.dp-foot__tel  { margin-top: 20px; font-size: var(--dp-fs-h4); line-height: 24px; letter-spacing: -.6px; font-weight: var(--dp-fw-semi); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-foot__mail { margin-top: 8px;  font-size: var(--dp-fs-h4); line-height: 24px; letter-spacing: -.6px; font-weight: var(--dp-fw-semi); color: var(--dpx-fg-blue, var(--dp-blue)); }

.dp-foot__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dp-s-9); flex-wrap: wrap;
  /* MEASURED on DP: the copyright row sits 60px under the contact block — 36 of margin
     plus this 24 of padding. 58 pushed it 22px too low. */
  margin-top: 36px;
  padding-block: var(--dp-s-10);
  border-top: 1px solid var(--dp-hairline);
}
.dp-foot__copy { font-size: var(--dp-fs-lg); line-height: 20.8px; font-weight: var(--dp-fw-medium); color: var(--dp-ink-50); }
.dp-foot__list { display: flex; gap: var(--dp-s-8); flex-wrap: wrap; }
.dp-foot__list a { font-size: var(--dp-fs-lg); line-height: 20.8px; letter-spacing: -.32px; font-weight: var(--dp-fw-medium); color: var(--dp-ink); }
.dp-foot__list a:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }

.dp-foot__legal { display: grid; gap: var(--dp-s-5); }
/* DP runs the small print at 11px/14.3 (1.3). At 1.5 each block gained a line of height
   and the whole footer drifted long. */
.dp-foot__legal p { font-size: var(--dp-fs-xs); line-height: 1.3; color: var(--dp-muted); }
/* Two classes deep on purpose: a bare .dp-foot__addr is (0,1,0) and loses the colour to
   .dp-foot__legal p at (0,2,0) regardless of order. */
.dp-foot__legal .dp-foot__addr { margin-top: 20px; font-size: var(--dp-fs-xs); line-height: 1.3; letter-spacing: -.22px; font-weight: var(--dp-fw-medium); color: var(--dp-ink-50); }

/* MEASURED on DP: the card strip sits 18px under the address and the panel closes 24px
   below it (panel ends 2514, doc 2550). 28 + 62 left 48px of extra air at the very
   bottom, which is the whole of the footer band's remaining overshoot. */
.dp-foot__pay { margin-top: 18px; padding-bottom: 24px; }
.dp-foot__pay img { width: 141px; height: 23px; }

/* --- Researcher gate ----------------------------------------------------
   Card measured at y=201 h=498, ~426px wide. Markup always renders; the inline
   head script in inc/gate.php adds .dp-gate-ok to <html> when the cookie exists,
   so a cached page never leaks one visitor's state to another. */
.dp-gate { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--dp-s-9); }

.dp-gate__backdrop {
  position: absolute; inset: 0;
  background: url("../img/gate-bg.png") center / cover no-repeat, var(--dp-surface-card);
}
/* No scrim. An earlier 35% white wash desaturated the backdrop — DP's cartons carry a
   navy logo panel and ours rendered grey. DP paints the image raw. */

.dp-gate__card {
  position: relative;
  width: 100%; max-width: 426px;
  padding: var(--dp-s-11);
  border-radius: var(--dp-r-xs);
  background: var(--dp-surface);
  box-shadow: 0 24px 60px var(--dpx-shadow-a414676p16, rgba(46, 36, 30, .16));
}
.dp-gate__title { font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi); }
.dp-gate__body { margin-top: var(--dp-s-5); font-size: var(--dp-fs-base); line-height: 1.5; color: var(--dp-muted); }

.dp-gate__check {
  display: flex; align-items: center; gap: var(--dp-s-5);
  margin-top: var(--dp-s-10);
  padding: var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  cursor: pointer;
}
.dp-gate__check input { width: 18px; height: 18px; accent-color: var(--dp-blue); }

.dp-gate__label { display: block; margin-top: var(--dp-s-9); font-size: var(--dp-fs-base); font-weight: var(--dp-fw-medium); }
.dp-gate__req { color: var(--dp-alert); }

.dp-input {
  width: 100%; margin-top: var(--dp-s-3);
  padding: var(--dp-s-5) var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  font: inherit; color: var(--dp-ink);
}

.dp-gate__enter {
  width: 100%; margin-top: var(--dp-s-10);
  padding: var(--dp-s-6);
  border: 0; border-radius: var(--dp-r-3xs);
  background: var(--dp-blue); color: var(--dpx-fg-fff, #fff);
  font-weight: var(--dp-fw-semi);
  cursor: pointer;
}
/* Matches DP: the button reads muted until both fields are satisfied. */
.dp-gate__enter[disabled] { opacity: .55; cursor: not-allowed; }

.dp-gate__exit { margin-top: var(--dp-s-6); text-align: center; font-size: var(--dp-fs-base); color: var(--dp-muted); }
.dp-gate__exit a { color: var(--dp-alert); font-weight: var(--dp-fw-medium); }

/* --- Responsive ---------------------------------------------------------
   DP's REAL Framer breakpoints, extracted from the published stylesheet
   (recon 2026-08-25) — not inferred:
     Phone   <= 809px   (81 rules)
     Tablet  810-1199px (72 rules)
     Desktop >= 1200px, with a wide variant at 1440+
   The 743/1024 queries also present in the CSS belong to the embedded Ecwid
   widget, not to DP's own layout — do not design to them. */
@media (max-width: 1199px) {
  :root { --dp-gutter: 40px; }
}

@media (max-width: 809px) {
  :root { --dp-gutter: 16px; }   /* measured on DP at 390: panels x16 w358 */

  .dp-strip { font-size: 10px; line-height: 1.2; height: 33px; min-height: 0; padding: 0 var(--dp-s-3); gap: 4px; white-space: nowrap; }
  .dp-strip__txt--narrow { overflow: hidden; text-overflow: ellipsis; }
  .dp-strip__txt--wide   { display: none; }
  .dp-strip__txt--narrow { display: inline; }
  .dp-head  { top: 0; }             /* no strip above the header any more */
  .dp-head__in { height: 52px; gap: var(--dp-s-5); }
  body.dp { padding-top: 52px; }   /* header only — the text-us strip is gone */
  .dp-logo__img { width: 127px; height: 18px; }

  /* Nav collapses behind a menu button, as DP does. */
  .dp-burger {
    display: grid; place-content: center; gap: 4px;
    order: 3;
    width: 32px; height: 32px; margin-left: var(--dp-s-5);
    padding: 0; border: 0; background: none; cursor: pointer;
  }
  .dp-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--dp-ink); transition: transform .18s ease, opacity .18s ease; }
  .dp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .dp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .dp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The fixed header is 52px here, not 74. */
  .dp-nav__list { padding-top: calc(52px + var(--dp-s-7)); }
  .dp-cart { margin-left: auto; order: 2; }

  .dp-foot { padding: var(--dp-s-5) var(--dp-gutter) 0; }
  .dp-foot__panel { padding: var(--dp-s-7) 0 0; }
  .dp-foot__top { flex-direction: column; gap: var(--dp-s-5); }
  .dp-foot__tag { margin-top: var(--dp-s-5); font-size: var(--dp-fs-lg); }
  /* The desktop offset exists to line the contact column up beside the tagline. Mobile
     STACKS the two, so that same offset is just 87px of dead space under the tagline. */
  .dp-foot__contact { align-items: flex-start; text-align: left; margin-top: 0; }
  /* MEASURED on DP at 390: the footer type steps DOWN on mobile and runs much tighter
     leading than on desktop — help 12/13.2, tel+mail 15/20, copy 12/15.6, legal 9/11.7,
     address 11/14.3. Carrying the desktop ramp down here added ~70px of height across
     the block, which is most of the mobile document's overshoot against DP. */
  .dp-foot__help { max-width: none; font-size: var(--dp-fs-sm); line-height: 13.2px; }
  .dp-foot__tel, .dp-foot__mail { font-size: var(--dp-fs-md); line-height: 20px; margin-top: var(--dp-s-2); }
  .dp-foot__bar { flex-direction: column; align-items: flex-start; gap: var(--dp-s-3); margin-top: var(--dp-s-7); padding-block: var(--dp-s-6); }
  .dp-foot__copy, .dp-foot__list a { font-size: var(--dp-fs-sm); line-height: 15.6px; }
  .dp-foot__legal p { font-size: 9px; line-height: 11.7px; }
  .dp-foot__addr    { font-size: var(--dp-fs-xs); line-height: 14.3px; }
  .dp-foot__legal { gap: var(--dp-s-3); }
  .dp-foot__pay { margin-top: var(--dp-s-6); padding-bottom: var(--dp-s-7); }
}

/* --- Touch behavior --------------------------------------------------------
   Every control opts out of double-tap-to-zoom: rapid taps on a stepper or a
   tier tile were zooming the page on iOS instead of counting. Scrolling and
   pinch-zoom on the page itself are untouched. */
a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }

/* iOS Safari zooms the page toward any focused field whose font is under
   16px. On touch devices every text-entry control meets that floor, so
   tapping into the bulk sheet's quantities, the searches, or the checkout
   form never zooms. */
@media (pointer: coarse) {
  input[type="text"], input[type="number"], input[type="search"],
  input[type="email"], input[type="tel"], select, textarea {
    font-size: max(16px, 1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Content page --------------------------------------------------------
   Measured on /shipping: grey hero band, 44/600 title, "Updated …" subline,
   then the prose panel. */
.dp-page__hero { background: var(--dp-surface-alt); }
.dp-page__heroin {
  max-width: var(--dp-maxw); margin-inline: auto;
  padding: 72px var(--dp-gutter);
}
.dp-page__title { font-size: var(--dp-fs-display); font-weight: var(--dp-fw-semi); letter-spacing: -.02em; }
.dp-page__updated { margin-top: var(--dp-s-4); font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); color: var(--dp-muted); }

.dp-page__body { max-width: var(--dp-maxw); margin-inline: auto; padding: var(--dp-s-11) var(--dp-gutter) 64px; }
.dp-page__panel {
  padding: var(--dp-s-11);
  border-radius: var(--dp-r-sm);
  background: var(--dp-surface-alt);
}
.dp-page__panel h2 { margin-top: var(--dp-s-11); font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); color: var(--dp-ink); }
.dp-page__panel h2:first-child { margin-top: 0; }
.dp-page__panel h3 { margin-top: var(--dp-s-9); font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi); }
.dp-page__panel p  { margin-top: var(--dp-s-5); font-size: var(--dp-fs-base); line-height: 1.6; color: var(--dp-muted); }
.dp-page__panel a  { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-page__panel ul { margin-top: var(--dp-s-5); padding-left: var(--dp-s-9); list-style: disc; }
.dp-page__panel li { margin-top: var(--dp-s-3); font-size: var(--dp-fs-base); color: var(--dp-muted); }

@media (max-width: 809px) {
  .dp-page__heroin { padding-block: var(--dp-s-12); }
  .dp-page__title  { font-size: 30px; }
  .dp-page__panel  { padding: var(--dp-s-9); }
}

/* --- Blog ----------------------------------------------------------------- */
.dp-bloglist { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-s-7); }
.dp-bcard { border-radius: var(--dp-r-sm); background: var(--dp-surface-alt); overflow: hidden; }
/* The featured graphics are 768x960 (4:5); the box matches, so the whole
   graphic scales to fit — the old 16/10 cover cut their tops and bottoms off. */
.dp-bcard__media { display: block; aspect-ratio: 4 / 5; background: var(--dp-surface-mute); }
.dp-bcard__media img { width: 100%; height: 100%; object-fit: contain; }
.dp-bcard__body { padding: var(--dp-s-5); }
.dp-bcard__title { font-size: var(--dp-fs-md); font-weight: var(--dp-fw-semi); line-height: 1.3; }
.dp-bcard__title a:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-bcard__ex {
  margin-top: var(--dp-s-3); font-size: var(--dp-fs-sm); color: var(--dp-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.dp-post__kicker a { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-medium); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-post__hero { margin-bottom: var(--dp-s-9); border-radius: var(--dp-r-sm); overflow: hidden; }
.dp-post__hero img { width: 100%; height: auto; }
.dp-post__body { max-width: 760px; margin-inline: auto; }
.dp-post__body h2 { margin-top: var(--dp-s-11); }

nav.navigation .page-numbers, ul.page-numbers { list-style: none; display: flex; gap: var(--dp-s-3); margin: var(--dp-s-10) 0 0; padding: 0; }
ul.page-numbers a, ul.page-numbers span {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: var(--dp-s-4);
  border-radius: var(--dp-r-pill); background: var(--dp-surface-alt); font-weight: var(--dp-fw-medium);
}
ul.page-numbers .current { background: var(--dp-blue); color: var(--dp-on-dark); }

@media (max-width: 1199px) { .dp-bloglist { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 989px)  { .dp-bloglist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .dp-bloglist { grid-template-columns: 1fr; } }

/* The bundle saving on a cart / drawer / checkout line.
   Deliberately NOT .dp-bundle__tag — that class is the absolutely-positioned "Most popular"
   ribbon on the product page, and reusing it here would have pulled this note out of flow and
   parked it over the thumbnail. Two different things, two different names. */
.dp-bundle-note {
  display: inline-block; margin-top: var(--dp-s-1);
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-semi); line-height: 15.6px;
  color: var(--dpx-fg-blue, var(--dp-blue));
}

/* --- Tap targets ----------------------------------------------------------
   Several header and footer controls are visually tiny — the cart glyph is 20×20, the
   announcement-strip phone number is 79×12 — and a 12px-tall phone link is a genuinely hard
   thing to hit on a phone, which is the one device where somebody actually taps to call.

   HIT AREA, NOT PADDING. The header geometry is measured against DP (strip 33, header row
   52, controls at x262 / x298 / x342) and padding would move all of it. An absolutely
   positioned ::before is outside flow, so it enlarges what a finger can hit and changes no
   layout at all — which is why the boxes below are sized to the MEASURED gaps rather than to
   a round number: the search button and the cart sit 12px apart, so each may grow 6px on a
   side before it would start stealing its neighbour's taps. */
.dp-cart,
.dp-search__btn,
.dp-burger,
.dp-logo,
.dp-strip__tel,
.dp-foot__tel { position: relative; }

.dp-cart::before,
.dp-search__btn::before,
.dp-burger::before,
.dp-logo::before,
.dp-strip__tel::before,
.dp-foot__tel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Width is the control's own width plus the overhang the gap allows; height is capped by
     the row it sits in. Both are set per-control below. */
  width: calc(100% + 12px);
  height: 44px;
}

/* The strip is 33px tall, so 44 would spill over the header beneath it and swallow taps
   meant for the logo. */
.dp-strip__tel::before { height: 32px; width: calc(100% + 16px); }
/* Nothing sits to the logo's right until x262, so it can afford a wider box than the gap
   rule would give the icons. */
.dp-logo::before { width: calc(100% + 16px); }
/* 16px to the viewport edge on its right, 24px to the cart on its left. */
.dp-burger::before { width: calc(100% + 12px); }

/* The overlay must never sit above the thing it belongs to — the cart badge and the burger
   bars have to stay clickable and visible. */
.dp-cart > *,
.dp-search__btn > *,
.dp-burger > *,
.dp-logo > *,
.dp-strip__tel > *,
.dp-foot__tel > * { position: relative; z-index: 1; }

/* Text links that are a page's primary navigation — a product name, an article title, the
   support address — sit at 20-21px tall because that is their line box. They are not inline
   links inside a sentence (WCAG exempts those); they are the way you open the thing, and on a
   phone they are the thing you aim at.

   24px, not 44: that is WCAG 2.5.8's minimum, and it needs only ~2px of overhang, which
   cannot reach the Add To Cart button sitting below a product name. A 44px box there would. */
.dp-rcard__name a,
.dp-bcard__title a,
.dp-post__kicker a,
.dp-foot__mail,
.dp-coa__name { position: relative; display: inline-block; }

.dp-rcard__name a::before,
.dp-bcard__title a::before,
.dp-post__kicker a::before,
.dp-foot__mail::before,
.dp-coa__name::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
}

/* Its own box is tall enough; the outer few pixels were being covered by the row around it. */
.dp-coa__all { position: relative; z-index: 1; }

/* Footer menu links sit at 15px — their line box — and they are the only route to Shipping,
   Refunds and Privacy on a phone. Same 24px minimum, applied to the anchor itself rather
   than the <li>, because padding on a list item leaves the link exactly as small as it was. */
.dp-foot a,
.menu-item a { position: relative; display: inline-block; }
.dp-foot a::before,
.menu-item a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 24px;
}

/* --- Not found -----------------------------------------------------------
   The theme had no 404.php, so WordPress fell back to index.php and a mistyped URL returned
   a correct 404 status wrapped around the entire blog archive. */
.dp-404 { padding-block: 96px 88px; }
.dp-404__in {
  max-width: var(--dp-maxw); margin-inline: auto; padding-inline: var(--dp-gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.dp-404__code {
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-semi);
  letter-spacing: .16em; color: var(--dpx-fg-blue, var(--dp-blue));
}
.dp-404__title {
  margin-top: var(--dp-s-5);
  font-size: clamp(28px, 3.6vw, var(--dp-fs-display));
  font-weight: var(--dp-fw-semi); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}
.dp-404__lede { margin-top: var(--dp-s-6); max-width: 52ch; font-size: var(--dp-fs-lg); line-height: 1.6; color: var(--dp-ink-60); }

.dp-404__search {
  position: relative; display: flex; align-items: center; gap: var(--dp-s-3);
  width: min(560px, 100%); margin-top: var(--dp-s-11);
}
.dp-404__mag { position: absolute; left: 16px; color: var(--dp-ink-50); pointer-events: none; }
.dp-404__q {
  flex: 1 1 auto; height: 48px; padding: 0 var(--dp-s-6) 0 42px;
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-pill);
  background: var(--dp-surface);
  font-family: inherit; font-size: var(--dp-fs-lg); color: var(--dp-ink);
}
.dp-404__q:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -1px; }
.dp-404__go {
  flex: 0 0 auto; height: 48px; padding-inline: var(--dp-s-9);
  border: 0; border-radius: var(--dp-r-pill);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-family: inherit; font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); cursor: pointer;
}
@media (hover: hover) { .dp-404__go:hover { background: var(--dpx-bg-0067d1, #bc3915); } }

.dp-404__acts { display: flex; flex-wrap: wrap; gap: var(--dp-s-5); justify-content: center; margin-top: var(--dp-s-9); }
.dp-404__acts .dp-btn--ghost {
  background: transparent; color: var(--dp-ink);
  box-shadow: inset 0 0 0 1px var(--dp-hairline);
}
.dp-404__acts .dp-btn--ghost .dp-btn__ico { background: var(--dp-surface-alt); }

.dp-404__suggest { width: 100%; margin-top: 72px; }
.dp-404__subH { font-size: var(--dp-fs-h4); font-weight: var(--dp-fw-semi); letter-spacing: -.01em; }
.dp-404__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 23px; margin-top: var(--dp-s-9); text-align: left;
}

@media (max-width: 1199px) { .dp-404__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .dp-404 { padding-block: 56px 48px; }
  .dp-404__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s-5); }
  .dp-404__search { flex-direction: column; }
  .dp-404__q, .dp-404__go { width: 100%; }
  .dp-404__mag { top: 16px; }
  .dp-404__acts { flex-direction: column; align-items: stretch; width: 100%; }
}

/* --- Scroll reveal (class added by ui.js; absent without JS) --------------- */
.dp-rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--rv-i, 0) * 80ms);
}
.dp-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dp-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* In-page anchors glide rather than jump. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* =====================================================================
   Footer — Northline-format dark panel. Root .dp-foot kept (cart-ui.js /
   shop.js observe it); everything inside is the dpf-* layer, so the old
   dp-foot__* rules above are dead. Dark in both themes by design.
   ===================================================================== */
.dp-foot {
  margin-top: 96px;
  padding: 28px var(--dp-gutter, 16px) 30px;
  border-top: 0;
  background:
    radial-gradient(90% 72% at 88% 0%, rgba(220, 73, 32, .12), rgba(220, 73, 32, 0) 62%),
    #241B15;
  color: #F3EAE3;
}
.dpf { max-width: 1240px; margin: 0 auto; }
.dpf a { text-decoration: none; }
.dpf h5 { margin: 0; }

.dpf-sms {
  margin: 6px 0 46px;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  border: 1px solid rgba(243, 234, 227, .14);
  border-radius: 22px;
}
.dpf-sms__intro h5 { margin: 0 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: #FFFFFF; }
.dpf-sms__intro p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(243, 234, 227, .62); }
.dpf-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.dpf-sms__row { display: flex; gap: 12px; max-width: 580px; margin-top: 20px; }
.dpf-sms__row input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px;
  border: 1px solid rgba(243, 234, 227, .22); border-radius: 100px;
  background: rgba(0, 0, 0, .28); color: #FFFFFF;
  font: inherit; font-size: 16px;
  transition: border-color .18s ease;
}
.dpf-sms__row input::placeholder { color: rgba(243, 234, 227, .42); }
.dpf-sms__row input:focus { outline: 0; border-color: #DC4920; }
.dpf-sms__btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border: 0; border-radius: 100px;
  background: #DC4920; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 650; white-space: nowrap;
  cursor: pointer; transition: background-color .2s ease;
}
.dpf-sms__btn:hover { background: #C6401D; color: #FFFFFF; }
.dpf-sms__btn:disabled { opacity: .55; cursor: default; }
.dpf-sms__consent {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 760px; margin: 14px 0 0;
  font-size: 11.5px; line-height: 1.6; color: rgba(243, 234, 227, .5);
  cursor: pointer;
}
.dpf-sms__consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #DC4920; }
.dpf-sms__consent a { color: rgba(243, 234, 227, .75); text-decoration: underline; }
.dpf-sms__msg { margin: 12px 0 0; font-size: 13.5px; font-weight: 550; color: #9ED3A6; }
.dpf-sms__msg.is-bad { color: #F4A58B; }

.dpf-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: 40px;
  padding: 0 4px 46px;
}
.dpf-logo { display: inline-block; }
.dpf-logo img { display: block; width: 200px; height: 27px; }
.dpf-tagline {
  margin-top: 16px;
  font-family: var(--dp-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(243, 234, 227, .5);
}
.dpf-about { margin: 14px 0 0; max-width: 310px; font-size: 14px; line-height: 1.65; color: rgba(243, 234, 227, .66); }
.dpf-col h5 {
  margin: 6px 0 16px;
  font-family: var(--dp-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(243, 234, 227, .42);
}
.dpf-col a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.4; color: rgba(243, 234, 227, .85); transition: color .15s ease; }
.dpf-col a:hover { color: #F0956B; }

.dpf-disc { padding: 26px 4px 24px; border-top: 1px solid rgba(243, 234, 227, .12); }
.dpf-disc p {
  margin: 0;
  font-family: var(--dp-mono, ui-monospace, monospace);
  font-size: 11.5px; line-height: 1.75;
  color: rgba(243, 234, 227, .42);
}
.dpf-disc p + p { margin-top: 12px; }

.dpf-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 4px 0; border-top: 1px solid rgba(243, 234, 227, .12);
}
.dpf-cp { font-size: 13px; line-height: 1.5; color: rgba(243, 234, 227, .5); }
.dpf-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.dpf-links a { font-size: 13.5px; font-weight: 550; color: rgba(243, 234, 227, .8); }
.dpf-links a:hover { color: #F0956B; }
.dpf-pay { display: inline-flex; padding: 5px 10px; border-radius: 8px; background: #FFFFFF; }
.dpf-pay img { display: block; width: 127px; height: 21px; }

@media (max-width: 900px) {
  .dpf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .dpf-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .dp-foot { margin-top: 64px; }
  .dpf-sms { display: block; margin-bottom: 36px; }
  .dpf-sms__row { display: block; }
  .dpf-sms__row input { width: 100%; }
  .dpf-sms__btn { width: 100%; justify-content: center; margin-top: 10px; }
  .dpf-grid { padding-bottom: 36px; }
  .dpf-bottom { display: block; }
  .dpf-links { margin-top: 14px; gap: 18px; }
}

/* =====================================================================
   Desktop top-bar navigation (wide screens get inline links, the burger
   drawer stays for everything narrower) + Northline-style containment:
   above 1100px the shared gutter grows so no section runs edge to edge.
   ===================================================================== */
.dp-topnav { display: none; }
@media (min-width: 1100px) {
  body.dp { --dp-gutter: max(36px, calc((100vw - 1360px) / 2)); }

  .dp-head__in { position: relative; }

  /* .dp-hero__in already pads by the gutter; the card's own
     calc(100% - 2*gutter) would subtract it AGAIN and collapse the card
     on ultra-wide screens. Inside the padded column, full width is right. */
  .dp-hero--ed .dp-hero__card { max-width: none; }

  .dp-topnav {
    display: flex; align-items: center; gap: 2px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .dp-topnav a {
    padding: 8px 13px;
    border-radius: 100px;
    font-size: 15px; font-weight: 550; letter-spacing: -.01em;
    color: var(--dp-ink); text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
  }
  .dp-topnav a:hover { background: var(--dpx-bg-f5f6fa, #F5EFE9); }
  .dp-topnav a.is-current { color: var(--dpx-fg-blue, var(--dp-blue, #DC4920)); }
  .dp-head__in .dp-burger { display: none; }
}