/* Upfront Peptides. The primecoredynamics.com storefront design system, consolidated.
   Rules are copied verbatim from ../prime-core-dynamics/public/assets/css/storefront.css
   (the light theme, data-theme="light", which is what the live site renders) and
   carry the storefront's own class names so a diff against that file is possible.
   Anything written for this site alone is marked "Upfront". No @import. */

/* ---- Tokens (storefront :root, the subset this site reads) --------------- */
:root {
    --black:        #0a0a0a;
    --surface-dark: #1c1c1c;
    --border-dark:  #3a3a3a;
    --accent-blue:  #2E5BE0;
    --pcd-orange:   #f7890f;
    --ruo-bg:       #1c1c1c;
    --blue-soft:    #eef2ff;
    --chip-edge:    #d9e2ff;
    --off-white:    #fafafa;
    --white:        #ffffff;
    --border:       #e4e4e4;
    --border-2:     #d4d4d4;
    --muted-3:      #b8b8b8;
    --ink:          #141414;

    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --gutter: 60px;
    --content-max: 1440px;

    --surface:       #ffffff;
    --surface-4:     #f1f1f3;
    --line:          #e4e4e4;
    --line-soft:     #ececec;
    --text:          #141414;
    --text-1:        #111418;
    --text-2:        #111111;
    --text-body:     #3a3a3a;
    --text-link:     #0a0a0a;
    --shadow:        0 3px 10px rgba(0, 0, 0, 0.10);
    --pill-ink:      #ffffff;
    --pill-green:    #1fa863;
    --pill-amber:    #f5c518;
    --pill-ink-amber-a: #3d3000;
    --pill-red:      #d83b3b;
    --pill-grey:     #54545a;
    --btn-ink:       #ffffff;
    --edge-10:       #999;
    --edge-16:       #dcdcdc;
    --edge-18:       #e4e8ec;
    --chrome-link:   #2e5be0;
    --chrome-muted:  #6d717c;
    --chrome-muted-2:#6b7280;
    --ink-01:        #a9b0bc;
    --muted-ash:     #5a6470;

    /* Light theme (storefront :root[data-theme="light"]) */
    --lt-page:   #ffffff;
    --lt-pool-a: rgba(46, 91, 224, 0.200);
    --lt-pool-b: rgba(46, 91, 224, 0.105);
    --lt-pool-0: rgba(46, 91, 224, 0);
    --lt-matte:  #1c1c1c;
    --lt-muted:  #5b6068;
    --muted:     #5e5e5e;
    --muted-2:   #606060;
    --link:      #264fc4;
    --link-hover:#1d3f9e;

    /* Footer palette (storefront .site-footer) */
    --ft-ink:  #101623;
    --ft-mute: #4b5871;
    --ft-line: rgba(29, 78, 216, 0.14);
    --ft-blue: #1d4ed8;

    /* Upfront: the RUO pill (navy) and the placeholder pill (amber) */
    --navy:       #0b1a3a;
    --amber-bg:   #fef3c7;
    --amber-line: #d97706;
    --amber-ink:  #78350f;
}
@media (max-width: 900px) { :root { --gutter: 32px; } }
@media (max-width: 640px) { :root { --gutter: 18px; } }
@media (max-width: 400px) { :root { --gutter: 12px; } }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > main { flex: 1 0 auto; }
@media (max-width: 640px) { body { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
p { margin: 0 0 14px; overflow-wrap: anywhere; }
img, svg { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
/* Anchors land by scroll-margin-top on the target, not by a blanket
   scroll-padding-top on the document. The two STACK: with the measured margin
   added to the jump targets, the 145px and 150px that used to sit here put
   every heading about 145px further down the page than asked for. The offset
   now lives in one place, --jump-offset, and is applied to the things that are
   actually jumped to. There are two on this site: the in-article chip targets
   and #main, which the skip link goes to. */
html { scroll-padding-top: 0; }

/* The page: white, with the two blue pools (storefront light theme, verbatim). */
:root[data-theme="light"] body { background: var(--lt-page); color: var(--ink); position: relative; }
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    will-change: opacity, transform;
}
:root[data-theme="light"] body::before {
    top: -10vh;
    left: -30vw;
    width: 160vw;
    height: 68vh;
    background: radial-gradient(ellipse 60% 82% at 58% 33%,
        var(--lt-pool-a) 0%, rgba(46, 91, 224, 0.115) 34%, rgba(46, 91, 224, 0.045) 60%, var(--lt-pool-0) 82%);
    opacity: 0.85;
    animation: lt-pool-a 23s ease-in-out infinite;
}
:root[data-theme="light"] body::after {
    bottom: -18vh;
    left: -18vw;
    width: 96vw;
    height: 62vh;
    background: radial-gradient(ellipse 62% 74% at 38% 58%,
        var(--lt-pool-b) 0%, rgba(46, 91, 224, 0.05) 42%, var(--lt-pool-0) 78%);
    opacity: 0.8;
    animation: lt-pool-b 29s ease-in-out infinite;
}
@keyframes lt-pool-a {
    0%, 100% { opacity: 0.55; transform: translate3d(-3%, -2%, 0) scale(1); }
    50%      { opacity: 1;    transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes lt-pool-b {
    0%, 100% { opacity: 1;    transform: translate3d(3%, 2%, 0) scale(1.1); }
    50%      { opacity: 0.5;  transform: translate3d(-4%, -3%, 0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-theme="light"] body::before,
    :root[data-theme="light"] body::after { animation: none; }
}
body.mnav-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.skip-link { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--black); color: #fff; padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip-link:focus { width: auto; height: auto; clip-path: none; }

/* Upfront: the page container, the storefront's grid alignment contract
   (max-width --content-max + 2 * --gutter, centred, --gutter each side). */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- Announcement bar (storefront .announce, static; the RUO bar) ---------- */
.announce {
    width: 100%;
    height: 38px;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* The RUO statement is the one line that must be legible on every page, so
       it is carried on its own near-black rather than on the brand orange.
       White on #1c1c1c measures 17.1:1, well past AA's 4.5:1 and AAA's 7:1. */
    background: var(--ruo-bg);
    color: var(--white);
}
.announce-still { width: 100%; text-align: center; padding: 0 16px; }
.announce-msg { font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; padding: 0 28px; }
.announce.is-static .announce-still { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce.is-static .announce-msg { display: inline; padding: 0 10px; }
@media (max-width: 640px) {
    .announce { height: 34px; }
    .announce-msg { font-size: 12px; padding: 0 18px; }
    .announce.is-static .announce-still { display: flex; justify-content: center; align-items: center; }
    .announce.is-static .announce-msg { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.announce:not(.ann-preview) { position: sticky; top: 0; z-index: 51; }
.announce:not(.ann-preview) + .topbar { top: 38px; }
@media (max-width: 640px) { .announce:not(.ann-preview) + .topbar { top: 34px; } }
/* Upfront: the RUO statement is never cut short. Under 640 the line is longer
   than the bar, so the bar takes the storefront's reduced-motion shape (auto
   height, 6px padding, wrapped text) and scrolls with the page there; the bar
   under it then sticks at the top on its own. */
@media (max-width: 640px) {
    .announce.is-static { height: auto; min-height: 34px; padding: 6px 0; position: static; }
    /* Under 640 the top bar sits on its own dark background, so the RUO bar and
       the header read as one block once both are near-black. A hairline is
       enough to separate them without introducing a second colour. */
    .announce { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .announce.is-static .announce-still { white-space: normal; }
    .announce.is-static .announce-msg { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
    .announce.is-static + .topbar { top: 0; }
}

/* ---- Top bar: the floating bar and the mobile drawer (storefront, verbatim) - */
.topbar { position: sticky; top: 0; z-index: 50; background: transparent; color: var(--white); }
.topbar-inner { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 14px var(--gutter); }
.navbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 69px;
    padding: 0 30px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.topbar.is-scrolled .navbar {
    background-color: rgba(16, 18, 22, 0.72);
    border-color: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
}
.nav-brand { display: flex; align-items: center; flex: 0 0 auto; color: #fff; }
.nav-brand:hover { text-decoration: none; }
.nav-logo { height: 45px; width: auto; display: block; }
/* The links sit at the right of the bar, the logo at the left.
   The dead space was an empty element, not a missing rule. .nav-actions is the
   storefront's cart and account group; this site has neither, so the div is
   always empty, and it carried the margin-left:auto that should push the links
   over. The free space was being split between its auto margin and anything
   else that asked for one, which parked the links in the middle. Hiding it when
   it is empty takes it out of the layout, gap and all, and the links take the
   auto margin instead.
   The last link's right padding is dropped so the INK lines up with the bar's
   inset rather than its box: .nav-item carries 13px of its own, which left the
   last label sitting 13px further in than the logo. */
.nav-links { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; align-self: stretch; margin-left: auto; }
/* padding-right 0 puts the last link's BOX on the inset; the negative margin
   takes back the trailing letter-space, which .nav-item's 0.1em tracking adds
   after the final character and which is not ink. Without it the label sat
   1.1px inside the logo's edge. */
.nav-links .nav-item:last-child { padding-right: 0; margin-right: -0.1em; }
.nav-actions:empty { display: none; }
.nav-item, .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.18s ease;
}
.nav-item {
    padding: 0 13px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    gap: 7px;
}
.nav-item-ico { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.8; color: currentColor; }
.nav-item.is-active .nav-item-ico { color: #ffffff; }
@media (max-width: 1459px) { .nav-links .nav-item-ico { display: none; } }
.nav-item:hover, .nav-item:focus-visible, .nav-icon-btn:hover, .nav-icon-btn:focus-visible {
    color: #ffffff;
    background: rgba(46, 91, 224, 0.14);
    border-color: rgba(46, 91, 224, 0.35);
    box-shadow: 0 0 12px rgba(46, 91, 224, 0.28);
    text-decoration: none;
}
.nav-item.is-active, .nav-item.is-active:hover { color: #ffffff; background: rgba(46, 91, 224, 0.2); border-color: rgba(46, 91, 224, 0.5); }
.nav-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; margin-left: auto; }
.topbar :focus-visible { outline-color: var(--white); }
@media (max-width: 1040px) {
    .navbar { gap: 14px; }
    .nav-item { padding: 0 10px; letter-spacing: 0.06em; }
}
.topbar-mobile { display: none; }
.mnav, .mnav-noscript { display: none; }
@media (max-width: 1199px), (pointer: coarse), (pointer: none) {
    .topbar-inner { display: none; }
    .topbar-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 76px;
        padding: 0 var(--gutter);
        background-color: var(--surface-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }
    .topbar.is-scrolled .topbar-mobile {
        background-color: rgba(16, 18, 22, 0.72);
        border-bottom-color: rgba(255, 255, 255, 0.12);
        -webkit-backdrop-filter: blur(16px) saturate(1.3);
        backdrop-filter: blur(16px) saturate(1.3);
    }
}
@media (min-width: 1200px) and (pointer: fine) { .mnav, .mnav-noscript { display: none !important; } }
.tm-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tm-brand:hover { text-decoration: none; }
.tm-logo { height: 40px; width: auto; display: block; }
.tm-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tm-burger { width: 44px; height: 44px; padding: 0; border: none; background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tm-burger svg { width: 27px; height: 27px; }
.mnav {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    overflow: hidden;
    opacity: 0;
    background: #0b0e17;
    transition: opacity .18s ease, display .18s allow-discrete;
    font-family: 'Inter', system-ui, sans-serif;
}
.mnav.is-open { display: flex; opacity: 1; }
.mnav-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; }
.mnav-head { flex: 0 0 auto; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.mnav-close { width: 44px; height: 44px; padding: 0; border: none; background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mnav-close svg { width: 27px; height: 27px; }
.mnav-links { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 12px; }
.mnav-link { display: flex; align-items: center; gap: 14px; min-height: 52px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #fff; font-size: 17px; text-decoration: none; }
.mnav-link:first-child { border-top: none; }
.mnav-link:hover { text-decoration: none; }
.mnav-ico { width: 21px; height: 21px; flex: 0 0 auto; color: var(--chrome-link); }
.mnav-link .nav-item-ico { width: 17px; height: 17px; color: currentColor; }
.mnav-sep { display: block; height: 14px; }
.mnav-sep + .mnav-link { border-top-color: rgba(255, 255, 255, 0.14); }
.mnav-group { display: block; padding: 12px 4px 4px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--chrome-muted); }
.mnav-link-cat { padding-left: 12px; justify-content: space-between; gap: 12px; }
.mnav-link-cat .mnav-label { font-size: 15px; color: #c9ccd3; }
.mnav-foot { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 18px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mnav-foot a { font-size: 12px; color: var(--ink-01); /* Upfront: was --chrome-muted-2, 3.99:1 on the drawer; this is the storefront hover colour, 9:1 */ text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.mnav-foot a:hover { color: var(--ink-01); }
.mnav-noscript { background: #1c1c1c; padding: 6px 18px 16px; border-bottom: 1px solid var(--border-dark); }
.mnav-noscript a { display: block; padding: 12px 0; color: #fff; font-size: 16px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mnav-noscript-legal { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; }
.mnav-noscript-legal a { display: inline; padding: 0; border: none; font-size: 12px; color: var(--chrome-muted-2); }
.nav-item, .nav-icon-btn { height: 44px; min-width: 44px; }
.nav-brand, .tm-brand, .tm-burger { min-height: 44px; min-width: 44px; }
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .topbar.is-scrolled .navbar {
    background-color: var(--lt-matte);
    border-color: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-theme="light"] .topbar.is-scrolled .topbar-mobile {
    background-color: var(--lt-matte);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-theme="light"] .navbar { box-shadow: 0 10px 30px rgba(20, 30, 60, 0.10); }

/* ---- Buttons: the storefront's two ----------------------------------------
   Primary is .pd-add (Add to cart): PCD orange, near-black label, blue on hover.
   Secondary is .pd-coa-btn (View COA): white, hairline, blue on hover. */
.pd-add, .btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 35px;
    background: var(--btn-orange, var(--pcd-orange));
    color: var(--btn-ink);
    border: none;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
    cursor: pointer;
    transition: background-color .16s ease;
    text-decoration: none;
}
.pd-add:hover, .btn-primary:hover { background: var(--accent-blue); color: #ffffff; text-decoration: none; }
.pd-add-full { display: flex; width: 100%; max-width: 620px; min-height: 40px; padding: 0 19px; font-size: 13px; }
/* Upfront: the label ink on the orange. --btn-ink is white in the storefront's
   tokens; the brief asks for the near-black label, which is what the storefront's
   base (dark) rendering of this button carries. 8.05:1 on #f7890f. */
.pd-add, .btn-primary { --btn-ink: #0a0a0a; }
.pd-coa-btn, .btn-secondary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 0 17.5px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    text-decoration: none;
}
.pd-coa-btn svg, .btn-secondary svg { width: 15px; height: 15px; color: var(--link); flex: 0 0 auto; }
.pd-coa-btn:hover, .btn-secondary:hover { border-color: var(--accent-blue); color: var(--link); text-decoration: none; }
@media (max-width: 640px) { .pd-coa-btn, .btn-secondary { flex: 1 1 100%; } }
/* Upfront: the long Buy label under 640 takes the full row at the storefront's
   full-width padding, the same shape .pd-add-full has, instead of 44px sides. */
@media (max-width: 640px) { .pd-add, .btn-primary { width: 100%; max-width: none; padding: 0 16px; font-size: 13px; text-align: center; } }
.pd-buyrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Upfront: a compact size of the same two buttons for cards and inline rows. */
.btn-sm.pd-add, .btn-sm.btn-primary { min-height: 40px; padding: 0 17.5px; font-size: 11.5px; width: 100%; }
.btn-sm.pd-coa-btn, .btn-sm.btn-secondary { min-height: 40px; padding: 0 14.5px; font-size: 11px; }

/* ---- Pills (storefront .pd-badge, solid; the five storefront colours) ------- */
.pd-badges { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pd-badge, .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    color: #fff;
}
.pd-badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pd-badge-ruo { background: var(--accent-blue); }
.pill-blue  { background: var(--accent-blue); color: var(--pill-ink); }
.pill-green { background: var(--pill-green); color: var(--pill-ink); }
.pill-amber { background: var(--pill-amber); color: var(--pill-ink-amber-a); }
.pill-red   { background: var(--pill-red);   color: var(--pill-ink); }
.pill-grey  { background: var(--pill-grey);  color: var(--pill-ink); }
.pill-ruo   { background: var(--navy);       color: #fff; }
.pill-sm { padding: 5px 11px; font-size: 11.5px; }
/* Upfront: the placeholder pill, kept so an unfilled content item stays visible. */
.placeholder-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-ink); border: 1.5px solid var(--amber-line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.placeholder-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-line); }
.placeholder-block { border: 1.5px dashed var(--amber-line); background: #fffbeb; border-radius: 16px; padding: 16px 18px; margin: 0 0 1em; }
.placeholder-block > p { margin: 10px 0 0; color: var(--amber-ink); }

/* ---- The shop card (storefront .pcard, the product grid) ------------------ */
.pgrid { max-width: var(--content-max); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1160px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 400px) { .pgrid { gap: 10px; } }
/* Upfront: this site's five cards run 3 across at 1024 and up, 2 at 768, 1 under 640. */
.pgrid-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pgrid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pgrid-catalog { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.pcard {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden;
    min-width: 0;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover { transform: translateY(-5px); border-color: var(--edge-16); box-shadow: 0 16px 34px rgba(10, 10, 10, 0.09); }
@media (prefers-reduced-motion: reduce) { .pcard:hover { transform: none; box-shadow: none; } }
.pcard-form { display: flex; flex-direction: column; height: 100%; }
.pcard-media { position: relative; height: 210px; background: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard-media img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.pgrid .pcard-media { height: 234px; }
.pgrid .pcard-nobox .pcard-media-link img { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
/* Upfront: the storefront's under-600 framing of a no-box card (118%, inset -9%)
   at every width. Only a card with NO spec panel takes this; a card with one
   gets the storefront's own vial-to-the-right rule further down. */
.pgrid .pcard-nobox .pcard-media-link img { top: -9%; right: -9%; bottom: -9%; left: -9%; width: 118%; height: 118%; max-width: none; max-height: none; }
:root[data-theme="light"] .pcard-media { background: var(--lt-matte); }

/* =========================================================================
   THE SPEC PANEL, from the storefront
   -------------------------------------------------------------------------
   Copied from prime-core-dynamics/public/assets/css/storefront.css, the
   .catalog-dark .pgrid .pcard-specbox* block, and re-scoped to .pgrid-catalog
   because that is this site's equivalent grid. Same classes, same numbers, so
   the panel is the storefront's panel rather than something that resembles it.
   Values checked against the live card's computed styles on 2026-09-22: box
   168x196 at scale(0.93), radius 15, shadow 0 10px 26px rgba(16,24,40,.12),
   padding 14px 14px 12px 15px, ink #14181f, media #1c1c1c.

   The media plate is the one thing the storefront gets from its dark catalog
   body rather than from a rule: on /shop the card is white and the media is
   #1c1c1c behind the panel. This site is the storefront's LIGHT theme, so the
   plate is stated here instead of inherited.
   ========================================================================= */
.pgrid-catalog .pcard-media {
    background: #1c1c1c;
    --sb: 0.93;
    --sb-w: calc(244px * 0.93);
    --sb-sq: calc(0.9 * 234px);
}
:root[data-theme="light"] .pgrid-catalog .pcard-media { background: #1c1c1c; }
.pcard-specbox { display: none; }
.pgrid-catalog .pcard-specbox {
    display: block;
    position: absolute;
    top: 26px;
    left: calc(50% - var(--sb-w) / 2);
    z-index: 0;
    box-sizing: border-box;
    width: 168px;
    height: 196px;
    margin: 0;
    padding: 14px 14px 12px 15px;
    transform: scale(var(--sb));
    transform-origin: 0 0;
    background: #fff;
    border: 0;
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(16, 24, 40, 0.12);
    color: #14181f;
    text-align: left;
    overflow: hidden;
    pointer-events: none;
}
/* Every line is one line. A long name or value is cut with an ellipsis (the
   value's title carries the whole) rather than wrapping into the row below,
   which is what keeps a fixed-height box from spilling. */
.pgrid-catalog .pcard-specbox-name,
.pgrid-catalog .pcard-specbox-rows dt,
.pgrid-catalog .pcard-specbox-rows dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pgrid-catalog .pcard-specbox-name {
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    color: #14181f;
}
.pgrid-catalog .pcard-specbox-rows { margin: 0; }
.pgrid-catalog .pcard-specbox-rows dt {
    margin-top: 6px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b616b;
}
.pgrid-catalog .pcard-specbox-rows dd {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: #14181f;
}
/* The counts, set as subscripts. Shifted with position rather than
   vertical-align: a true subscript box hangs below the line, and a line that
   overflows its row is what a nowrap box with overflow hidden clips. */
.pgrid-catalog .pcard-specbox-rows dd sub {
    position: relative;
    top: 0.18em;
    vertical-align: baseline;
    font-size: 0.68em;
    line-height: 0;
}
/* A blend's box. Two components: the name as a dt in its own case at 10px, the
   CAS as the dd with the share after it in the label grey. Three or more: one
   dd a component, the name giving way with an ellipsis and the CAS kept whole
   at the right, at 11px. */
.pgrid-catalog dt.pcard-specbox-comp {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    color: #14181f;
}
.pgrid-catalog dd.pcard-specbox-comp {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pgrid-catalog dd.pcard-specbox-comp-line {
    justify-content: space-between;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 1px;
}
.pgrid-catalog .pcard-specbox-comp-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pgrid-catalog .pcard-specbox-comp-cas { flex: none; }
.pgrid-catalog .pcard-specbox-comp-mg {
    flex: none;
    font-weight: 700;
    color: #5b616b;
}
.pgrid-catalog .pcard-specbox-foot {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 11px;
    padding-top: 7px;
    border-top: 2px solid var(--pcd-orange);
}
.pgrid-catalog .pcard-specbox-purity {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.25;
    color: #2456d6;
}
.pgrid-catalog .pcard-specbox-ruo {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    color: #5b616b;
}
/* The vial, to the right of the composition: 90% of the media's height, pinned
   so the glass stands where the storefront's does. */
.pgrid-catalog .pcard-media-link img {
    top: auto;
    bottom: -14px;
    left: auto;
    right: calc(50% - var(--sb-w) / 2 - 0.349 * var(--sb-sq));
    width: auto;
    height: 90%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}
.pcard-media-link { display: block; position: absolute; inset: 0; }
.pcard-body { padding: 14px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.pgrid .pcard-body { padding-bottom: 19px; }
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard-name { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text-2); letter-spacing: -0.015em; line-height: 1.3; overflow-wrap: break-word; }
.pcard-price { margin: 0; flex: 0 0 auto; text-align: right; white-space: nowrap; }
.pcard-amount { display: block; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text-2); line-height: 1.35; }
/* The buy block no longer pins itself: .pcard-foot does, for the chips and
   the button together. Left as margin-top:auto it pushed the button away
   from the chips instead of the pair away from the description. */
.pcard-buy { padding-top: 13px; }
.pcard-add { margin-top: 9px; }
.pgrid .pcard-add { margin-top: 13px; }
@media (max-width: 640px) {
    .pcard-media { height: 150px; }
    .pgrid .pcard-media { height: 170px; }
    .pcard-body { padding: 11px 11px 12px; }
    .pgrid .pcard-body { padding-bottom: 15px; }
    .pcard-head { gap: 8px; }
    .pcard-name { font-size: 13px; line-height: 1.28; }
    .pcard-amount { font-size: 13px; }
    .pcard-buy { padding-top: 10px; }
    .pgrid .pcard-add { margin-top: 12px; }
}
/* Upfront: the card's own rows: the one-line descriptor, the class pill, the
   size chips (the product page's .pd-chip at card scale) and the text link. */
.pcard-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* THE CARDS IN A ROW LINE UP.
   The grid stretches its items, the card is a column, and everything from the
   size chips down is one block pushed to the bottom with margin-top:auto. So a
   two-line description and a one-line description put their buy buttons on the
   same line, which is what a row of cards is for. The pill sits directly under
   the description, inside the part that grows; the chip row keeps the height of
   one row of chips so a product with a single size does not pull its button up
   past a neighbour with two. */
.pgrid { align-items: stretch; }
.pcard { display: flex; height: 100%; }
.pcard-form { flex: 1; min-width: 0; }
.pcard-pill { margin-top: 10px; }
.pcard-foot { margin-top: auto; }
.pcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 29px; }
/* THE FOURTH CHIP MUST NOT SIT ALONE.
   Wrapping by natural width put the four sizes 3 + 1 on a phone: three chips
   filled the line and the fourth started a row of its own, which reads as an
   odd one out rather than as a set. A two-column grid makes the break even, and
   equal columns mean the pair on each row are the same width whatever their
   labels say. A product with one size gets one half-width chip, which is the
   same grid and still reads as deliberate. */
@media (max-width: 767px) {
    .pcard-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The chip fills its cell, so its content has to distribute rather than sit
       at the start: size to the left, price to the right, padding trimmed from
       the pill's own generous 21px so the two never collide in a narrow cell. */
    .pcard-chips .pd-chip { justify-content: space-between; padding-left: 12px; padding-right: 12px; }
}
/* 768 and up: one row, equal widths. grid-auto-flow:column lays every chip on
   a single line and grid-auto-columns makes those columns equal, which is the
   same even treatment the phone grid gives, just in one row instead of two.
   Scoped with :has to cards that have a third chip, because a product with one
   size would otherwise get a single chip stretched across the whole card. */
@media (min-width: 768px) {
    .pcard-chips:has(.pd-chip:nth-child(3)) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
    .pcard-chips:has(.pd-chip:nth-child(3)) .pd-chip {
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* 1024 to 1199 is the one band where one row does not fit. The catalog grid
   goes three up at 1024, which makes the card NARROWER than it is at 768 where
   it is two up: the chip row has 255px there against 310px at 768. Measured,
   four chips forced into one row at 1024 give each 57px of cell for 61 to 66px
   of label, and all four clip. They take the phone's two-column grid instead,
   which is even, legible and still never leaves one chip alone. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .pcard-chips:has(.pd-chip:nth-child(3)) {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.pcard-chips .pd-chip { padding: 5.5px 9.5px; gap: 6px; }
.pcard-chips .pd-chip-size { font-size: 10.5px; }
.pcard-chips .pd-chip-price { font-size: 8.5px; }
.pcard-view { display: inline-block; margin-top: 11px; font-size: 13.5px; font-weight: 600; color: var(--link); }
.pcard-view:hover { color: var(--link-hover); }
/* THE PHONE CATALOG CARD.
   The media box used to be a flat 210px with the panel pinned 26px from the
   top, which left 1.7px under it: the panel and the vial sat on the bottom
   edge. Every number below is derived from the panel instead of chosen.

   The storefront's own phone card is the proportion being matched. Measured on
   primecoredynamics.com/shop at 390: media 170, panel 129.4 tall at scale 0.66,
   20.0px above it and 20.6 below. That is the panel plus a 20px band top and
   bottom, and nothing else. Its body padding there is 10px 9px 14px.

   --band is that 20px. --panel-h is the panel's own declared height times its
   own scale, so the media cannot drift out of step with it: change --sb and
   both follow. --vial-h scales the render so its ARTWORK fills the same band:
   the export is 1000x1000 with the vial occupying y 118 to 878, so the artwork
   is 76% of the file's height and its centre sits at 49.8% of it. Those two
   figures are measured from the PNGs, not assumed.

   One card a row here where the storefront has two, so the panel takes a
   smaller share of a wider media. What matches is the band and the way the
   height comes from the panel. */
@media (max-width: 640px) {
    .pgrid-catalog .pcard-media {
        --band: 20px;
        --panel-h: calc(196px * var(--sb));
        --vial-h: calc(var(--panel-h) / 0.76);
        height: auto;
        min-height: calc(var(--panel-h) + var(--band) * 2);
    }
    /* Centred from the panel's own height, so the insets stay equal whatever
       the media ends up being. */
    .pgrid-catalog .pcard-specbox {
        top: calc((100% - var(--panel-h)) / 2);
        left: var(--band);
    }
    /* The artwork centred in the same band and inset --band from the right.
       The image box overflows top, bottom and right; what overflows is the
       render's transparent margin, and the media clips it. The vial itself
       has --band clear on all three sides. */
    .pgrid-catalog .pcard-media-link img {
        width: auto;
        height: var(--vial-h);
        max-width: none;
        max-height: none;
        top: calc(50% - var(--vial-h) * 0.498);
        bottom: auto;
        left: auto;
        right: calc(var(--band) - var(--vial-h) * 0.348);
    }
    /* A 16px page gutter each side, whatever --gutter is doing for the rest of
       the page (18 under 640, 12 under 400). Corrected on the grid alone so no
       other section moves. */
    .pgrid-catalog { margin-left: calc(16px - var(--gutter)); margin-right: calc(16px - var(--gutter)); }
    /* The storefront's phone card body padding, verbatim. */
    .pgrid-catalog .pcard-body { padding: 10px 9px 14px; }
    .pgrid-catalog .pcard-name { font-size: 15.5px; }
    .pgrid-catalog .pcard-amount { font-size: 15px; }
}

/* ---- Catalog filter (storefront .shop-seg) --------------------------------- */
.glass-ctl {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.shop-seg { display: inline-flex; align-items: center; padding: 4px; }
.shop-seg-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14.5px;
    border-radius: 999px;
    text-decoration: none;
    color: #d7d9de;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    transition: color .15s ease, background .15s ease;
    border: 0;
    background: none;
    font-family: inherit;
}
.shop-seg-item:hover, .shop-seg-item:focus-visible { color: #fff; text-decoration: none; }
.shop-seg-item.is-on { background: #fff; color: #111; }
.shop-seg-item.is-on:hover { color: #111; }
@media (max-width: 899px) {
    .shop-bar { flex-direction: column; align-items: stretch; }
    .shop-seg { display: flex; }
    .shop-seg-item { flex: 1 1 0; padding: 0 6.5px; }
}
:root[data-theme="light"] .glass-ctl { background: var(--surface); border-color: var(--line); box-shadow: 0 2px 8px rgba(20, 30, 60, 0.05); }
:root[data-theme="light"] .shop-seg-item { color: var(--lt-muted); }
:root[data-theme="light"] .shop-seg-item:hover, :root[data-theme="light"] .shop-seg-item:focus-visible { color: var(--text-2); }
:root[data-theme="light"] .shop-seg-item.is-on { background: var(--text-2); color: var(--surface); }
.pcard.is-hidden { display: none; }

/* ---- Interior page head (storefront .pclass) ------------------------------- */
.pclass { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin-left: auto; margin-right: auto; padding: 26px var(--gutter) 60px; }
@media (max-width: 900px) { .pclass { padding: 22px var(--gutter) 48px; } }
.pclass-crumb { display: flex; flex-wrap: wrap; gap: 7px; font-size: 13px; }
.pclass-crumb a { color: inherit; text-decoration: none; }
.pclass-crumb a:hover { text-decoration: underline; }
.pclass-crumb, .pclass-crumb ol { list-style: none; margin: 0; padding: 0; }
.pclass-head { margin-top: 14px; }
.pclass-h1 { margin: 0; font-size: clamp(26px, 4.4vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.pclass-intro { margin-top: 10px; max-width: 78ch; }
.pclass-intro p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
:root[data-theme="light"] .pclass-crumb { color: var(--lt-muted); }
:root[data-theme="light"] .pclass-crumb a:hover { color: var(--text-2); }
:root[data-theme="light"] .pclass-crumb-current { color: var(--text-2); }
:root[data-theme="light"] .pclass-h1 { color: var(--text-2); }
:root[data-theme="light"] .pclass-intro p { color: var(--text-body); }
:root[data-theme="light"] .pclass-intro a { color: var(--link); }
:root[data-theme="light"] .pclass-intro a:hover { color: var(--text-2); }

/* ---- Home hero (storefront .hero, light) ----------------------------------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding-bottom: clamp(20px, 2.2vw, 40px); }
:root[data-theme="light"] .hero { background: transparent; }
.hero-inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.hero-col { position: relative; z-index: 2; padding: clamp(20px, 1.95vw + 12px, 40px) 0 16px; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(46, 91, 224, 0.12); border: 1px solid rgba(46, 91, 224, 0.30); border-radius: 999px; padding: 9px 20px; font-size: 15px; font-weight: 500; color: #7EA0F5; }
:root[data-theme="light"] .hero-badge { background: #eef3ff; border-color: #c9d6f5; color: #2a4bb8; }
.hero-h1 { margin: 30px 0 0; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; max-width: 560px; color: #fff; }
:root[data-theme="light"] .hero-h1 { color: var(--text-2); }
.hero-subhead { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); max-width: 560px; }
:root[data-theme="light"] .hero-subhead { color: var(--lt-muted); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 1050px) { .hero-h1 { font-size: 30px; } }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-col { padding-bottom: 8px; } .hero-h1 { font-size: 26px; } }
@media (max-width: 640px) { .hero-col { padding-bottom: 4px; } .hero-subhead { font-size: 17px; } }
/* Upfront: the three vials, sitting on the page's own light gradient.
   No panel behind them. The renders are transparent PNGs (corners and border
   ring at alpha 0, verified per file), so the depth comes from a drop-shadow
   on the shape rather than a box-shadow on a rectangle. */
.hero-plate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 0;
    /* Bottom room is for the labels, which are positioned rather than in flow
       so nothing reflows when one appears and nothing moves when a vial lifts. */
    padding: 28px 18px 34px;
}

/* One grid cell per vial, and the cell IS the hit area. The image overflows
   its cell to keep the overlap the design has always had, but takes no pointer
   events, so the three targets sit side by side without covering each other
   and only the vial actually under the cursor responds. */
.hero-vial {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.hero-vial-art {
    display: block;
    /* Composed rather than overwritten: --vial-scale is the vial's resting size
       and --vial-hover-scale the hover multiplier, so the middle vial stays
       larger while still growing by the same 1.04 as the other two. */
    --vial-scale: 1;
    --vial-hover-scale: 1;
    --vial-rise: 0%;
    --vial-lift: 0px;
    transform: translateY(calc(var(--vial-rise) - var(--vial-lift)))
               scale(calc(var(--vial-scale) * var(--vial-hover-scale)));
    filter: drop-shadow(0 12px 18px rgba(16, 22, 35, 0.20));
    transition: transform 220ms ease-out, filter 220ms ease-out;
    will-change: transform;
}
.hero-vial img { display: block; width: 118%; max-width: none; height: auto; margin: -9% 0 -9% -9%; pointer-events: none; }
/* The middle vial: larger and in front, as before. */
.hero-vial:nth-child(2) { z-index: 2; }
.hero-vial:nth-child(2) .hero-vial-art { --vial-scale: 1.12; --vial-rise: -4%; }

.hero-vial-label {
    position: absolute;
    left: 0;
    right: 0;
    /* Below the cell, not inside it. The renders carry 12.2% transparent
       padding under the vial, so the artwork's visible bottom sits a little
       inside the cell; a label measured up from the cell's bottom edge landed
       on the vial itself, and worst at narrow widths where the cell is
       smallest. Starting at the cell's bottom edge and pushing down clears the
       vial at every width without depending on the render's framing. */
    top: 100%;
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--lt-muted);
    opacity: 0;
    transition: opacity 220ms ease-out;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .hero-vial:hover { z-index: 3; }
    .hero-vial:hover .hero-vial-art,
    .hero-vial:focus-visible .hero-vial-art {
        --vial-hover-scale: 1.04;
        --vial-lift: 8px;
        filter: drop-shadow(0 22px 30px rgba(16, 22, 35, 0.32));
    }
    .hero-vial:hover .hero-vial-label,
    .hero-vial:focus-visible .hero-vial-label { opacity: 1; }
}

/* Touch: there is no hover to wait for, so the labels are simply always on and
   nothing lifts. */
@media (hover: none), (pointer: coarse) {
    .hero-vial-label { opacity: 1; }
}

/* Reduced motion: the label still does its job, the movement does not happen.
   The shadow is left to deepen because a shadow is not motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-vial-art { transition: filter 220ms ease-out; }
    .hero-vial-label { transition: none; opacity: 1; }
    .hero-vial:hover .hero-vial-art,
    .hero-vial:focus-visible .hero-vial-art { --vial-hover-scale: 1; --vial-lift: 0px; }
}

.hero-vial:focus-visible { outline: 2px solid #2a4bb8; outline-offset: 6px; border-radius: 10px; }
@media (max-width: 900px) { .hero-plate { max-width: 520px; } }

/* ---- Sections and cards (storefront .homeabout) ---------------------------- */
.homeabout { max-width: 1440px; margin: 44px auto 0; }
.homeabout-kicker { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); }
.homeabout-h { margin: 0 0 18px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-2); }
.homeabout-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.homeabout-card {
    min-width: 0;
    padding: 30px 32px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(30, 50, 100, 0.12);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 22, 35, 0.05), 0 12px 32px rgba(16, 22, 35, 0.07);
    transition: transform .18s ease, box-shadow .18s ease;
}
.homeabout-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(16, 22, 35, 0.06), 0 20px 44px rgba(16, 22, 35, 0.11); }
.homeabout-cardhead { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.homeabout-chip {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #ffa63a 0%, #f7890f 55%, #e5780a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 14px rgba(247, 137, 15, 0.32);
    color: #ffffff;
    font-weight: 800;
    font-size: 17px;
}
.homeabout-chip svg { width: 23px; height: 23px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.homeabout-h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #101623; }
.homeabout-p { margin: 0; font-size: 15.5px; line-height: 1.68; color: #3f4a63; }
.homeabout-p + .homeabout-p { margin-top: 12px; }
.homeabout-card-dark { background: linear-gradient(160deg, #141a28 0%, #0d1220 100%); border-color: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(16, 22, 35, 0.2), 0 16px 40px rgba(16, 22, 35, 0.28); }
.homeabout-card-dark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(16, 22, 35, 0.22), 0 24px 52px rgba(16, 22, 35, 0.34); }
.homeabout-card-dark .homeabout-h3 { color: #ffffff; }
.homeabout-card-dark .homeabout-p { color: #c7d0e4; }
.homeabout-card-dark .homeabout-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 8px 18px rgba(247, 137, 15, 0.4); }
.homeabout-card-dark a { color: #fff; text-decoration: underline; }
.homeabout-card-dark .pd-coa-btn { color: var(--ink); text-decoration: none; }
.homeabout-card-dark .pd-add { color: #0a0a0a; text-decoration: none; }
.homeabout-card-dark .pd-add:hover { color: #ffffff; }
.homeabout-card-dark .pd-coa-btn:hover { color: var(--link); }
@media (max-width: 767px) {
    .homeabout-cards { grid-template-columns: minmax(0, 1fr); }
    .homeabout-card { padding: 26px 24px 28px; }
}
/* Upfront: three- and four-across variants of the same grid. */
.homeabout-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.homeabout-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .homeabout-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .homeabout-cards-3, .homeabout-cards-4 { grid-template-columns: minmax(0, 1fr); } }
/* Prose lists inside a card. The chip row is a component, not prose, and this
   rule was reaching into it: padding-left 20px pushed the first chip 20px past
   the paragraphs below, and margin: 0 dropped the row's bottom margin. Excluded
   by name rather than out-specified, so .chip-row stays the one place the chip
   row's box is described. */
.homeabout-card ul:not(.chip-row), .homeabout-card ol { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.68; color: #3f4a63; }
/* Spacing between prose list items. Excluded from the chip row for the same
   reason as the rule above: the row spaces itself with gap, and an 8px
   margin-top on every item but the first made the first chip 8px taller than
   its neighbours once the flex line stretched to fit them. */
.homeabout-card :not(.chip-row) > li + li { margin-top: 8px; }
.homeabout-card-dark ul, .homeabout-card-dark ol { color: #c7d0e4; }
.homeabout-card .pd-buyrow { margin-top: 20px; }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { text-decoration: none; }
.card-link .homeabout-h3 { color: var(--link); }
.section-foot { margin-top: 22px; }
.section-foot-center { text-align: center; }

/* ---- Trust cards (storefront .pd-trustcard) --------------------------------- */
.pd-trustrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pd-trustrow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-trustcard { display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 15px 17px; }
.pd-trustcard > svg { width: 20px; height: 20px; color: var(--link); flex: 0 0 auto; }
.pd-trustcard-t { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.pd-trustcard-s { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 960px) { .pd-trustrow, .pd-trustrow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pd-trustrow, .pd-trustrow-4 { grid-template-columns: 1fr; } }

/* ---- The blue notice band (storefront .pd-disclaimer) ---------------------- */
.pd-disclaimer { background: var(--accent-blue); color: #fff; border-radius: 16px; padding: 22px 26px; font-size: 15.5px; line-height: 1.6; margin: 32px 0; }
.pd-disclaimer a { color: #fff; text-decoration: underline; }
.pd-disclaimer p { margin: 0; }

/* ---- Stat bar (storefront .hero-stats) ------------------------------------- */
.hero-stats { margin-top: 64px; display: flex; background: #141518; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; overflow: hidden; max-width: 560px; }
.hero-stat { flex: 1; position: relative; padding: 15px 18px; text-align: center; }
.hero-stat + .hero-stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgba(255, 255, 255, 0.09); }
.hero-stat-value { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 24px; font-weight: 600; color: #ffffff; letter-spacing: -0.02em; line-height: 1; }
.hero-stat-label { margin-top: 4px; font-size: 11.5px; color: #9ba0a8; }
@media (max-width: 640px) {
    .hero-stats { margin-top: 28px; max-width: none; }
    .hero-stat { min-width: 0; padding: 11px 4px; margin: 0; text-align: center; }
    .hero-stat + .hero-stat::before { top: 9px; bottom: 9px; }
    .hero-stat-value { font-size: 18px; letter-spacing: -0.01em; }
    .hero-stat-label { margin-top: 3px; font-size: 8px; line-height: 1.3; }
}
/* Upfront: the analytical bar sits inside a module, full width, four tiles. */
.hero-stats.analytical-stats { margin: 0 0 16px; max-width: none; }
.analytical-stats .hero-stat-value { font-size: 18px; overflow-wrap: anywhere; }
.analytical-stats .hero-stat { padding: 15px 12px; }
@media (max-width: 640px) {
    .hero-stats.analytical-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
    .analytical-stats .hero-stat + .hero-stat::before { display: none; }
    .analytical-stats .hero-stat-value { font-size: 15px; }
    .analytical-stats .hero-stat-label { font-size: 10.5px; }
}

/* ---- Product page (storefront .pd) ----------------------------------------- */
.pd { max-width: 1360px; margin: 0 auto; padding: 36px 40px 60px; }
.pd-crumb { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.pd-crumb a { color: var(--muted); }
.pd-crumb a:hover { color: var(--text-2); }
.pd-crumb span { color: var(--muted-3); margin: 0 2px; }
.pd-crumb-current { color: var(--text-2); }
:root[data-theme="light"] .pd-crumb span { color: var(--lt-muted); }
:root[data-theme="light"] .pd-crumb-current { color: var(--text-2); }
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 18px; }
.pd-gallery { min-width: 0; --charcoal: radial-gradient(circle at 50% 42%, #24272d 6%, #0b0d10 78%); }
.pd-main { height: auto; aspect-ratio: 1 / 1; background: var(--charcoal); border: 1px solid var(--line-soft); border-radius: 15px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 0; }
.pd-main img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-title { font-size: 41px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0; color: var(--text-2); }
.pd-subtitle { font-size: 17px; color: var(--muted); margin: 8px 0 0; }
.pd-class { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.pd-class a { color: var(--link); text-decoration: underline; }
.pd-meta { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.pd-meta strong { color: var(--text-2); font-weight: 600; }
.pd-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.pd-size { margin: 4px 0 20px; }
.pd-size-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pd-size-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.pd-size-selected { font-size: 13.5px; color: var(--muted); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9.5px 21px; border: 1px solid var(--edge-16); border-radius: 999px; background: var(--surface); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.pd-chip:hover { border-color: var(--edge-10); }
.pd-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-chip-size { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pd-chip-price { font-size: 9px; color: var(--muted); }
.pd-chip:has(input:checked), .pd-chip.is-on { background: #111; border-color: var(--text-2); }
.pd-chip:has(input:checked) .pd-chip-size, .pd-chip.is-on .pd-chip-size { color: #fff; }
.pd-chip:has(input:checked) .pd-chip-price, .pd-chip.is-on .pd-chip-price { color: rgba(255,255,255,.7); }
.pd-chip:has(input:focus-visible) { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
/* Upfront: the shared button scale is 0.8 of the storefront's. Where 0.8 would
   put an interactive control under the 40px tap minimum, the control is held at
   40px on touch instead: the radio chips here, .pd-add-full and the .btn-sm pair. */
@media (max-width: 640px), (pointer: coarse) { .pd-chips .pd-chip { min-height: 40px; } }
.pd-form { margin-top: 22px; }
.pd-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) {
    .pd { padding: 24px 18px 48px; }
    .pd-top { grid-template-columns: 1fr; gap: 20px; }
    .pd-title { font-size: 32px; }
}
/* Upfront: the modules, each a storefront .pd-tabs-panel card. */
.pd-modules { display: grid; gap: 16px; margin-top: 8px; }
.pd-tabs-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; }
.pd-tab-body { padding: 24px 26px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.pd-tab-body p { margin: 0 0 14px; }
.pd-tab-body p:last-child { margin-bottom: 0; }
.pd-tab-body ul, .pd-tab-body ol { margin: 0 0 14px; padding-left: 22px; }
.pd-tab-body ul:last-child, .pd-tab-body ol:last-child { margin-bottom: 0; }
.pd-module-h { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-2); margin: 0 0 14px; }
.pd-module-kicker { display: block; margin: 0 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); }
.pd-specs { margin: 0; }
.pd-spec-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--border-2); }
.pd-spec-row:last-child { border-bottom: 0; }
.pd-spec-row dt { color: var(--muted); font-size: 14px; white-space: nowrap; }
.pd-spec-row dd { margin: 0; font-size: 14px; color: var(--text-2); text-align: right; flex: 1; overflow-wrap: anywhere; }
.pd-spec-row dd.mono { font-size: 13px; }
@media (max-width: 560px) { .pd-spec-row { flex-direction: column; gap: 2px; } .pd-spec-row dd { text-align: left; } }
.pd-fda-notice { border-top: 1px solid var(--edge-18); margin: 20px 0 0; padding-top: 14px; font-size: 12px; color: var(--muted-ash); line-height: 1.55; }
.pd-small { font-size: 13px; color: var(--muted); }
.pd-cites { margin: 0; padding-left: 22px; }
.pd-cites li + li { margin-top: 10px; }
.pd-cites a { color: var(--link); text-decoration: underline; font-family: var(--font-mono); font-size: 13px; }
.pd-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pd-doclist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--text-2); background: var(--surface); transition: border-color .15s ease; }
.pd-doclist a:hover { border-color: var(--accent-blue); color: var(--link); }
.pd-doclist a span:last-child { color: var(--link); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.pd-related { margin-top: 56px; }
.pd-related-h { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-2); margin: 0 0 30px; }
@media (max-width: 960px) { .pd-related-h { font-size: 27px; } }

/* ---- Interior content pages (Upfront, on the storefront card and type) ------ */
.page-sections { display: grid; gap: 22px; margin-top: 26px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* ---- Chip row: the in-article section jump-links -----------------------------
   One rule set, on .chip-row / .chip, so every article on the research library
   and any other page that grows a chip row gets the same thing. The height is
   fixed rather than left to padding and line-height, so a chip whose label
   wraps to two words at a narrow width is still exactly as tall as its
   neighbours. */
.chip-row {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip-row li { display: flex; }
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    background: var(--blue-soft);
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--chip-edge);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip:hover,
.chip:focus-visible,
/* The section currently in view, set by the observer in assets/js/main.js. It
   is the same solid state as hover on purpose: one visual answer to "this one",
   whether the pointer or the scroll position is saying it. */
.chip[aria-current="true"] {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #ffffff;
    text-decoration: none;
}
.chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Where a jump lands. --jump-offset is the sticky furniture above the content
   plus 16px, measured in the browser rather than guessed:

     up to 640   the RUO bar is static and scrolls away, so it is the nav only,
                 76 + 16
     641 to 1199 RUO bar 38 pinned + nav 76, + 16
     1200 and up on a fine pointer the desktop navbar replaces the mobile one,
                 38 + 97, + 16

   The 1200 rule carries `and (pointer: fine)` to match the rule that swaps the
   navbar, so a wide touch device keeps the mobile nav's offset. */
:root { --jump-offset: 92px; }
@media (min-width: 641px) { :root { --jump-offset: 130px; } }
@media (min-width: 1200px) and (pointer: fine) { :root { --jump-offset: 151px; } }
.jump-target, #main { scroll-margin-top: var(--jump-offset); }
.jump-target > p:last-child { margin-bottom: 14px; }
.pd-tab-body .jump-target:last-child > p:last-child { margin-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.contact-card .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ft-mute); font-weight: 600; margin-bottom: 6px; }
.contact-card .v { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; color: var(--text-2); }
.contact-card a.v { color: var(--link); }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }
.source-note { font-size: 13px; color: var(--muted); }
.notfound { padding: 80px var(--gutter); text-align: center; }
.notfound .pd-buyrow { justify-content: center; margin-top: 24px; }
.notfound .pclass-h1 { margin-bottom: 10px; }

/* ---- Footer (storefront .site-footer, verbatim) ----------------------------- */
.site-footer {
    position: relative;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%, #eef3fc 34%, #dbe6fa 72%, #c9d9f6 100%);
    border-top: 1px solid var(--ft-ink);
    border-bottom: 0;
    color: var(--ft-ink);
    margin-top: 56px;
}
.site-footer-inner { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; }
.footer-accent { height: 3px; background: linear-gradient(90deg, var(--ft-blue), #3b82f6, var(--pcd-orange)); }
.footer-glass {
    background: linear-gradient(160deg, rgba(28, 34, 52, 0.94), rgba(13, 18, 32, 0.88));
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 34px rgba(16, 24, 48, 0.22);
}
.footer-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 40px var(--gutter) 4px; }
.footer-trust-cell { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px 22px; }
.footer-trust-ring { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1.5px solid #6d9bff; border-radius: 999px; color: #8fb2ff; }
.footer-trust-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.footer-trust-text { display: flex; flex-direction: column; min-width: 0; }
.footer-trust-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.footer-trust-sub { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: rgba(214, 224, 244, 0.78); }
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding: 44px var(--gutter) 30px; }
.footer-col { min-width: 0; }
.footer-heading { margin: 3px 0 18px; font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ft-mute); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 13px; }
.footer-links a { display: block; font-size: 14.5px; line-height: 1.4; color: var(--ft-ink); text-decoration: none; transition: color .12s ease; overflow-wrap: anywhere; width: fit-content; }
.footer-links a:hover { color: var(--ft-blue); }
.footer-col-brand { min-width: 0; }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-brand:hover { text-decoration: none; }
.footer-logo { height: 40px; width: auto; display: block; }
.footer-blurb { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ft-mute); max-width: 33ch; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ft-ink); min-width: 0; }
.footer-contact a { color: var(--ft-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-contact a:hover { color: var(--ft-blue); }
.footer-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ft-blue); }
.footer-addr-row { align-items: flex-start; }
.footer-addr-row .footer-ico { margin-top: 2px; }
.footer-addr { font-style: normal; line-height: 1.45; color: var(--ft-ink); }
.footer-tel { color: var(--ft-ink); }
.footer-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; border-top: 1px solid var(--ft-line); padding: 26px var(--gutter) 28px; }
.footer-notice { min-width: 0; }
.footer-notice .footer-heading { margin-bottom: 8px; }
.footer-notice-text { margin: 0; max-width: 78ch; font-size: 13.5px; line-height: 1.7; color: var(--ft-mute); }
.footer-bottom { border-top: 1px solid var(--ft-line); padding: 18px var(--gutter) 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-copy { margin: 0; font-size: 13.5px; color: var(--ft-mute); }
.footer-powered { margin: 0; font-size: 13.5px; color: var(--ft-mute); }
@media (max-width: 980px) {
    .footer-trust { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 24px 26px; }
    .footer-band { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}
@media (max-width: 640px) {
    .footer-trust { grid-template-columns: 1fr; gap: 14px; }
    .footer-main { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}