/* ============================================================================
   GENSCRIPT — brand layer. SEPARATE from genscript.css on purpose: that file
   is REGENERATED by generate-identity.js and any edit to it is lost on the
   next run (which is exactly what happened once). Loaded after it.
   ============================================================================ */

/* ============================================================================
   GENSCRIPT — supplied-logo wiring
   The operator's `big logo.png` is a full horizontal lockup (green droplet +
   "GenScript" + "Make Research Easy", aspect 3.24), so it carries the brand
   name itself and replaces the template's square-icon + "GSP 金" text pair.
   `small logo.png` is a real standalone icon, so it drops straight into
   /logo.jpg and the favicon set with no derived crop.
   ========================================================================== */
.logo--wordmark {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}

.logo-wordmark-img {
    display: block;
    height: 42px;              /* the lockup is 3.24:1, so ~136px wide */
    width: auto;
    max-width: 200px;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    flex: none;
}

@media (max-width: 900px)  { .logo-wordmark-img { height: 36px; max-width: 168px; } }
@media (max-width: 380px)  { .logo-wordmark-img { height: 30px; max-width: 140px; } }

.footer-logo--wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-wordmark-img {
    height: 38px;
    width: auto;
    max-width: 190px;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    opacity: .95;
}

.footer-logo--wordmark small {
    font-size: .68rem;
    letter-spacing: .08em;
    line-height: 1.5;
    opacity: .72;
}

.footer-logo--wordmark small em { font-style: normal; letter-spacing: .16em; }

/* ============================================================================
   GENSCRIPT — design layer
   DIRECTION: "the synthesis record".
   GenScript is a peptide-SYNTHESIS house, not a reseller, so the interface is
   built around the thing it actually does: take a sequence and turn it into a
   released vial. The register is editorial-scientific — Fraunces for display
   (already in the humanist pack), generous measure, numbered stages, warm paper
   under cool navy — deliberately unlike the cold instrument aesthetic used for
   Hybio. Navy carries structure, the logo's green is reserved for one meaning
   only: VERIFIED / released / pass. Nothing else is green.
   ========================================================================== */
:root {
    --u: 4px;
    --rule: 1px solid var(--hairline, rgba(18, 26, 33, .12));
    --rule-navy: 1px solid rgba(0, 70, 140, .26);
    --green: #0D8B3F;
    --green-dim: #0a6f32;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t-fast: 140ms var(--ease);
    --t: 240ms var(--ease);
}

/* ---- 1. Type ------------------------------------------------------------ */
.gx-title, .section-heading, .products-page-title, h1, h2 {
    font-family: var(--font-display);
    text-wrap: balance;
}

/* Data a buyer verifies is monospaced and tabular so digits align. */
.product-code, .product-pricing, .trust-stat-value, .deal-tier-value,
.product-count, .gx-qc dd, .gx-seq-chain, .gx-promo-timer b, .price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- 2. Focus ----------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- 3. Hero shell ------------------------------------------------------ */
.gx {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--porcelain) 64%, #fff 100%);
    border-bottom: var(--rule);
}

/* Paper ground: a fine rule grid (lab notebook) plus two soft washes — navy
   behind the headline, the logo green behind the record panel. */
.gx-ground {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(52% 58% at 6% 4%, rgba(0, 70, 140, .10) 0%, transparent 70%),
        radial-gradient(44% 52% at 98% 92%, rgba(13, 139, 63, .09) 0%, transparent 72%),
        repeating-linear-gradient(to bottom, rgba(18, 26, 33, .045) 0 1px, transparent 1px 30px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

/* ---- 4. Credential rail ------------------------------------------------- */
.gx-rail { border-bottom: var(--rule); background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }

.gx-rail-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 3) calc(var(--u) * 7);
    padding: calc(var(--u) * 2.5) 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.gx-rail-in b { color: var(--primary-darker); font-weight: 600; }
.gx-rail-live { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); }

.gx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .gx-dot { animation: gx-pulse 2.4s var(--ease) infinite; } }
@keyframes gx-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 139, 63, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(13, 139, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 139, 63, 0); }
}

/* ---- 5. Layout ---------------------------------------------------------- */
.gx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: calc(var(--u) * 14);
    align-items: start;
    padding: clamp(30px, 3.6vw, 56px) 0 clamp(38px, 4.6vw, 66px);
}

/* ---- 6. Lead ------------------------------------------------------------ */
.gx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    margin: 0 0 calc(var(--u) * 6);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 3.5);
    border: var(--rule-navy);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.gx-title {
    margin: 0 0 calc(var(--u) * 5);
    font-size: clamp(2.4rem, 5.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.022em;
    color: var(--primary-darker);
}

/* The claim is the second line; Fraunces italic carries it, with the green
   underline that means "verified" everywhere else on the site. */
.gx-title em {
    font-style: italic;
    position: relative;
    color: var(--primary);
    white-space: nowrap;
}

.gx-title em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: .04em;
    height: .075em;
    background: var(--green);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
    .gx-title em::after { animation: gx-underline 720ms var(--ease) 460ms forwards; }
}
@media (prefers-reduced-motion: reduce) { .gx-title em::after { transform: scaleX(1); } }
@keyframes gx-underline { to { transform: scaleX(1); } }

.gx-lede {
    margin: 0 0 calc(var(--u) * 8);
    max-width: 50ch;
    font-size: 1.06rem;
    line-height: 1.68;
    color: var(--gray-600);
}

.gx-cta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 8); }

.gx-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 3.5) calc(var(--u) * 6);
    border-radius: var(--radius-md, 9px);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.gx-btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 40, 80, .3), 0 2px 8px rgba(0, 40, 80, .18);
}

.gx-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0, 40, 80, .32), 0 12px 26px rgba(0, 70, 140, .26);
}

.gx-btn-ghost { background: rgba(255, 255, 255, .85); border-color: rgba(0, 70, 140, .28); color: var(--primary-darker); }
.gx-btn-ghost:hover { border-color: var(--primary); background: #fff; transform: translateY(-1px); }
.gx-btn:active { transform: translateY(0); }

.gx-trust {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 3) calc(var(--u) * 6);
    margin: 0;
    padding: calc(var(--u) * 4) 0 0;
    list-style: none;
    border-top: var(--rule);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--gray-600);
}

.gx-trust li { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); }
.gx-trust i { color: var(--green); }
.gx-trust a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(0, 70, 140, .45); }
.gx-trust a:hover { color: var(--primary-darker); border-bottom-color: var(--primary); }

/* ---- 7. Synthesis record panel ------------------------------------------ */
.gx-panel {
    position: relative;
    background: #fff;
    border: var(--rule);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 26px 64px -32px rgba(0, 40, 80, .45), 0 2px 8px rgba(0, 40, 80, .06);
    overflow: hidden;
}

.gx-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--u) * 3.5) calc(var(--u) * 5);
    border-bottom: var(--rule);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.gx-panel-kicker { color: var(--gray-600); }
.gx-panel-id { color: var(--primary); font-weight: 600; }

/* sequence strip — the residues as discrete tiles */
.gx-seq { padding: calc(var(--u) * 4) calc(var(--u) * 5); border-bottom: var(--rule); background: linear-gradient(180deg, #fff, var(--primary-50)); }

.gx-seq-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: calc(var(--u) * 2.5);
}

.gx-seq-chain { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }

.gx-seq-chain b {
    display: grid;
    place-items: center;
    width: 25px; height: 28px;
    border: var(--rule-navy);
    border-radius: 4px;
    background: #fff;
    font-size: .74rem;
    font-weight: 600;
    color: var(--primary-darker);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.gx-seq-chain b:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

.gx-seq-more {
    display: grid;
    place-items: center;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--gray-600);
}

/* six-stage pipeline */
.gx-pipe { list-style: none; margin: 0; padding: calc(var(--u) * 3) calc(var(--u) * 5); border-bottom: var(--rule); counter-reset: none; }

.gx-pipe li {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 1.75) 0 calc(var(--u) * 1.75) calc(var(--u) * 7);
    font-size: .84rem;
    color: var(--gray-600);
}

/* the connecting spine */
.gx-pipe li::before {
    content: '';
    position: absolute;
    left: 9px; top: 0; bottom: 0;
    width: 2px;
    background: var(--primary-100);
}

.gx-pipe li:first-child::before { top: 50%; }
.gx-pipe li:last-child::before { bottom: 50%; }

/* the node */
.gx-pipe li::after {
    content: '';
    position: absolute;
    left: 4px; top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-100);
}

.gx-pipe li.is-done::after { background: var(--green); border-color: var(--green); }
.gx-pipe li.is-done { color: var(--primary-darker); }

.gx-pipe li.is-now::after { background: #fff; border-color: var(--primary); }
.gx-pipe li.is-now { color: var(--primary); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
    .gx-pipe li.is-now::after { animation: gx-node 1.8s var(--ease) infinite; }
}
@keyframes gx-node {
    0%   { box-shadow: 0 0 0 0 rgba(0, 70, 140, .45); }
    70%  { box-shadow: 0 0 0 6px rgba(0, 70, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 70, 140, 0); }
}

.gx-pipe-n { font-family: var(--font-mono); font-size: .66rem; color: var(--gray-500); letter-spacing: .06em; }
.gx-pipe-s { flex: 1; }

/* QC release row */
.gx-qc { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: var(--rule); }
.gx-qc > div { padding: calc(var(--u) * 3) calc(var(--u) * 5); border-bottom: var(--rule); }
.gx-qc > div:nth-child(odd) { border-right: var(--rule); }
.gx-qc > div:nth-last-child(-n+2) { border-bottom: 0; }

.gx-qc dt {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 3px;
}

.gx-qc dd { margin: 0; font-size: .87rem; font-weight: 600; color: var(--primary-darker); }
.gx-qc .gx-pass { color: var(--green-dim); }

.gx-panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--u) * 3.5) calc(var(--u) * 5);
    border-bottom: var(--rule);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    transition: background var(--t-fast), padding-left var(--t-fast);
}

.gx-panel-link:hover { background: var(--primary-50); padding-left: calc(var(--u) * 6); }

/* promo docked under the record */
.gx-promo { padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 5); background: var(--porcelain); }
.gx-promo-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); }
.gx-promo-name { font-weight: 700; font-size: .95rem; color: var(--primary-darker); }
.gx-promo-timer { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-600); }
.gx-promo-timer b { color: var(--error-red, #b3382c); }

.gx-tiers { list-style: none; margin: 0 0 calc(var(--u) * 3); padding: 0; }
.gx-tiers li {
    display: flex; align-items: center; justify-content: space-between;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 1.75) 0;
    border-bottom: 1px dashed rgba(18, 26, 33, .12);
    font-size: .82rem;
}
.gx-tiers li:last-child { border-bottom: 0; }
.gx-tiers .deal-tier-label { color: var(--gray-600); text-transform: none; letter-spacing: .02em; font-size: .78rem; }
.gx-tiers b { font-family: var(--font-mono); color: var(--primary); }

.gx-promo-note { margin: 0; font-size: .76rem; line-height: 1.6; color: var(--gray-600); }
.gx-promo-note b { color: var(--primary-darker); }
.gx-promo-note a { color: var(--primary); text-decoration: none; }
.gx-promo-note a:hover { text-decoration: underline; }

/* ---- 8. Marquee --------------------------------------------------------- */
.gx-marquee {
    border-top: var(--rule);
    background: #fff;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.gx-marquee-track {
    display: flex;
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 3) 0;
    width: max-content;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) { .gx-marquee-track { animation: gx-marquee 48s linear infinite; } }
@keyframes gx-marquee { to { transform: translateX(-50%); } }

/* ---- 9. Page-load choreography ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .gx-eyebrow, .gx-title, .gx-lede, .gx-cta, .gx-trust, .gx-panel {
        animation: gx-rise 640ms var(--ease) both;
    }
    .gx-title { animation-delay: 70ms; }
    .gx-lede  { animation-delay: 140ms; }
    .gx-cta   { animation-delay: 210ms; }
    .gx-trust { animation-delay: 280ms; }
    .gx-panel { animation-delay: 170ms; }
}

@keyframes gx-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* ---- 10. Shared components, brought into the system --------------------- */
.section-header .section-heading::after {
    content: '';
    display: block;
    width: 46px; height: 3px;
    margin: calc(var(--u) * 3) auto 0;
    background: var(--green);
    border-radius: 2px;
}

.product-card {
    border: var(--rule);
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t-fast);
}

.product-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 70, 140, .35);
    box-shadow: 0 12px 32px -14px rgba(0, 40, 80, .3);
}

.product-image img { transition: transform 420ms var(--ease); }
.product-card:hover .product-image img { transform: scale(1.035); }

.badge-tested, .badge-popular { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }

.cert-card, .trust-card, .lab-video-card, .deal-card, .faq-item {
    border: var(--rule);
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t);
}

.cert-card:hover, .trust-card:hover, .lab-video-card:hover {
    border-color: rgba(0, 70, 140, .35);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -16px rgba(0, 40, 80, .32);
}

.cert-icon, .trust-card-icon { color: var(--primary); transition: transform var(--t); }
.cert-card:hover .cert-icon, .trust-card:hover .trust-card-icon { transform: scale(1.08) rotate(-3deg); }

/* the stat band as a bordered readout */
.trust-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: var(--rule);
    border-radius: var(--radius-md, 9px);
    overflow: hidden;
    background: #fff;
}

.trust-stat { padding: calc(var(--u) * 6) calc(var(--u) * 4); text-align: center; border-right: var(--rule); position: relative; transition: background var(--t-fast); }
.trust-stat:last-child { border-right: 0; }
.trust-stat:hover { background: var(--primary-50); }
.trust-stat::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; transform: translateX(-50%); background: var(--green); opacity: 0; transition: opacity var(--t-fast); }
.trust-stat:hover::before { opacity: 1; }
.trust-stat-value { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--primary-darker); margin-bottom: calc(var(--u) * 1.5); }

table { border-collapse: collapse; }
th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--primary); }
td { border-bottom: var(--rule); font-variant-numeric: tabular-nums; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--primary-50); }

::selection { background: rgba(13, 139, 63, .18); color: var(--primary-darker); }

/* ---- 11. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
    .gx-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 10); }
    .gx-panel { max-width: 560px; }
}

@media (max-width: 767px) {
    .gx-rail-in {
        flex-wrap: nowrap; overflow-x: auto; gap: calc(var(--u) * 5);
        font-size: .64rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .gx-rail-in::-webkit-scrollbar { display: none; }
    .gx-rail-in > span { flex: none; white-space: nowrap; }
    .gx-rail-live { margin-left: 0; }

    .gx-grid { padding: calc(var(--u) * 6) 0 calc(var(--u) * 8); gap: calc(var(--u) * 8); }
    .gx-title { font-size: clamp(2rem, 8.4vw, 2.7rem); }
    .gx-title em { white-space: normal; }
    .gx-lede { font-size: .97rem; }
    .gx-btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
    .gx-panel { max-width: none; }
    .gx-qc { grid-template-columns: 1fr; }
    .gx-qc > div:nth-child(odd) { border-right: 0; }
    .gx-qc > div:nth-last-child(2) { border-bottom: var(--rule); }
    .gx-seq, .gx-pipe, .gx-panel-head, .gx-panel-link, .gx-promo, .gx-qc > div {
        padding-left: calc(var(--u) * 4); padding-right: calc(var(--u) * 4);
    }
    .gx-seq-chain b { width: 23px; height: 26px; font-size: .7rem; }
    .gx-marquee-track { gap: calc(var(--u) * 6); font-size: .64rem; animation-duration: 64s; }
    .gx-eyebrow { font-size: .6rem; }
    .gx-trust { font-size: .7rem; }
}

@media (max-width: 380px) {
    .gx-title { font-size: clamp(1.8rem, 9vw, 2.3rem); }
    .gx-cta .gx-btn { width: 100%; }
}

/* ---- 12. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---- 13. contrast: the specificity-stubborn remainder ---------------------
   These carry their colour from a more specific per-page rule than the identity
   layer can reach, so they are corrected here, in the layer that loads last.
   Every value below was measured with contrast-audit.js, not guessed. */

/* --gray-400 used as text (2.9-3.5:1 on the panels they sit on) */
.trending-card .cn-accent,
.section-header .cn-accent,
span.cn-accent,
.vl-prefix,
.timer-sep,
.trending-spec { color: var(--gray-600) !important; }

/* "Verified on" ran at #9ca3af / 2.43:1 */
.verified-on-label, .vl-prefix, [class*="verified"] > span:first-child { color: var(--gray-600); }

/* The brand-chip contrast fix used to live here. It now ships from
   generate-identity.js so the whole fleet inherits it, with the two bugs
   this copy had: the selectors are anchored to the BACKGROUND declaration
   (a bare [style*="0088cc"] also matches border-color, which is how the
   contact cards are outlined) and carry the i flag (the templates write
   #25D366 in caps, and attribute matching is case-sensitive). */

/* A caption over a photograph: the scrim got it from 1.83 to 4.35:1; deepen it
   the rest of the way rather than shrinking the type. */
.lab-video-label, .about-mfg-video-label {
    background: linear-gradient(to top, rgba(6, 10, 14, .95), rgba(6, 10, 14, .78) 55%, rgba(6, 10, 14, .35));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* The independent-listings heading inherits the footer ink; make it explicit. */
.vfd-verified h4 { color: var(--gray-300); opacity: .9; }

/* The photo caption sits over an image whose luminance we do not control, so a
   gradient scrim alone is not enough (measured 2.35:1 white-on-photo). Give it
   a solid, near-opaque ink band — the caption is chrome, not artwork. */
.lab-video-label, .about-mfg-video-label {
    background: rgba(6, 10, 14, .9) !important;
    backdrop-filter: blur(2px);
}

/* ---- the synthesis-record hero on a phone ---------------------------------
   The record panel is deliberately dense -- kickers, rail items and the
   sequence label all run small so the panel reads as an instrument printout.
   At 390px that lands at 9.6-10.6px, under the 11px legibility floor, so the
   whole set steps up on small screens. The density survives; the squint does
   not. The trust list also becomes a real 44px target row rather than a
   19px-tall line of links. */
@media (max-width: 767px) {
    .gx-eyebrow, .gx-panel-kicker, .gx-seq-label, .gx-rail-in span,
    .gx-rail-live, .gx-promo-name, .gx-promo-timer, .gx-promo-note,
    .gx-seq-more, .gx-pipe-n {
        font-size: .72rem !important;
        line-height: 1.5;
    }

    .gx-trust li > a,
    .gx-trust li {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================================
   THE PAGE BELOW THE HERO
   The gx- hero established a vocabulary: hairlines instead of borders, mono
   tabular numerals for anything measured, a stage pipeline, labels in small
   letterspaced caps. Everything below it was still template-stock, so the page
   changed language halfway down. This section carries that vocabulary through
   the remaining eight sections rather than decorating each one separately.

   Reveal rules are all scoped under .js-motion, which genscript-motion.js adds
   to <html> itself. With JS off, nothing here hides anything.
   ========================================================================== */

/* ---- shared: reveal ------------------------------------------------------ */
.js-motion .will-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.js-motion .will-reveal.is-in { opacity: 1; transform: none; }

/* the reading-progress hairline */
.gx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent, #0D8B3F));
    transform: scaleX(0); transform-origin: 0 50%;
    z-index: 1300; pointer-events: none;
}

/* the header tightens once you are past the hero */
.header { transition: box-shadow .25s ease, backdrop-filter .25s ease; }
.header.is-condensed {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 24px -18px rgba(0, 0, 0, .45);
    backdrop-filter: saturate(1.15) blur(6px);
}

/* ---- section rhythm ------------------------------------------------------
   The template alternates a tinted band with a white one. Replacing the tint
   with a hairline and a corner tick reads as a printed document rather than a
   marketing page, and it stops the eye counting stripes down the screen. */
.order-process-section,
.lab-section,
.trending-section,
.trust-section,
.faq-section {
    position: relative;
    border-top: 1px solid var(--gray-200);
}
.order-process-section::before,
.lab-section::before,
.trending-section::before,
.trust-section::before,
.faq-section::before {
    content: "";
    position: absolute; top: -1px; left: 0;
    width: 56px; height: 2px;
    background: var(--primary);
}

.section-heading { letter-spacing: -.015em; }
.section-header .section-icon,
.section-heading .section-icon { color: var(--primary); opacity: .9; }

/* ---- 1. the settlement row (payment methods) -----------------------------
   Was a row of loose icons. A hairline chip makes them read as a declared list
   of accepted rails rather than decoration. */
.payment-methods-section .pay-badge {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm, 6px);
    padding: 8px 12px;
    background: var(--white);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: border-color .18s ease, transform .18s ease;
}
.payment-methods-section .pay-badge:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ---- 2. the order pipeline ----------------------------------------------
   Deliberately the same shape as the hero's six SPPS stages: a numbered token,
   a hairline rail, a marked step. The customer journey and the synthesis route
   are the two processes this shop runs; showing them in one visual language is
   the point rather than a coincidence. */
.order-process-section .order-step { position: relative; padding-top: 18px; }
.order-process-section .order-step::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--gray-200);
}
.order-process-section .order-step::after {
    content: "";
    position: absolute; top: -2px; left: 0;
    width: 22px; height: 5px;
    background: var(--primary); border-radius: 3px;
}
.order-process-section .order-step-icon {
    border: 1px solid var(--gray-200);
    background: var(--white);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.order-process-section .order-step:hover .order-step-icon {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 70, 140, .07);
}
.order-process-section .order-step-arrow { opacity: .35; }

/* ---- 3. the facility capture --------------------------------------------
   Photographs of a plant are the least verifiable thing on a page like this, so
   frame them as captures rather than as hero imagery: a hairline frame, a corner
   tick, and the caption on its own solid band. */
.lab-section .lab-video-card,
.lab-section .lab-featured {
    position: relative;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--white);
}
.lab-section .lab-video-card::after,
.lab-section .lab-featured::after {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 34px; height: 2px;
    background: var(--primary); z-index: 2;
}
.lab-section .lab-video-card img,
.lab-section .lab-featured img {
    display: block;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.lab-section .lab-video-card:hover img,
.lab-section .lab-featured:hover img { transform: scale(1.02); }
.lab-video-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 8px 12px;
}

/* ---- 4. product cards as spec cards -------------------------------------
   Catalogue number and purity are measurements, so they take mono tabular
   numerals: figures line up column-wise down the grid instead of wandering,
   which is most of why a spec sheet looks like a spec sheet. */
.trending-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 8px);
    background: var(--white);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.trending-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5);
}
.trending-spec,
.trending-bulk {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- 5. the trust figures -----------------------------------------------
   These are the count-up targets. Tabular numerals are not a flourish here:
   without them every tick changes glyph widths and the row jitters for the
   length of the animation. */
.trust-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.trust-stat-label {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.cert-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 8px);
    background: var(--white);
    transition: border-color .2s ease, transform .2s ease;
}
.cert-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.cert-icon { color: var(--primary); }

/* ---- 6. the FAQ as a documentation index --------------------------------
   Hairline rows, a section marker, and a chevron that rotates rather than
   swaps. */
.faq-section .faq-item {
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    background: transparent;
}
.faq-section .faq-item:first-child { border-top: 1px solid var(--gray-200); }
.faq-section .faq-question {
    position: relative;
    padding-left: 26px;
    transition: color .18s ease;
}
.faq-section .faq-question::before {
    content: "\00a7";
    position: absolute; left: 4px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    color: var(--primary);
    opacity: .6;
    font-size: .82em;
}
.faq-section .faq-question:hover { color: var(--primary); }
.faq-section .faq-question .fa-chevron-down { transition: transform .22s ease; }
.faq-section .faq-item.open .faq-question .fa-chevron-down { transform: rotate(180deg); }

/* ---- 7. the closing strip ------------------------------------------------ */
.support-contact-strip {
    border-top: 1px solid var(--gray-200);
    font-family: var(--font-mono);
    font-size: .78rem;
}

/* ---- mobile --------------------------------------------------------------
   The pipeline rail and the hover scale are desktop affordances; at 390px they
   compete with the content for very little room. */
@media (max-width: 767px) {
    .order-process-section .order-step { padding-top: 14px; }
    .order-process-section .order-step-arrow { display: none; }
    .lab-section .lab-video-card:hover img,
    .lab-section .lab-featured:hover img { transform: none; }
    .gx-progress { height: 3px; }
}

/* ---- 2b. the order pipeline, properly ------------------------------------
   The first attempt drew a rail and a tick ABOVE each step, which read as a
   stray line rather than a process: the rail did not touch the icons and the
   steps carried no stage number, so the promised echo of the hero's six SPPS
   stages was not actually there.

   This version does what the hero does. Each step is numbered 01-05 from a CSS
   counter (no markup change needed), the rail runs THROUGH the icon centres,
   and the icons are opaque so they punch a hole in it. The chevrons become
   redundant once a continuous rail exists, so they go.

   --gx-step-ic is the icon box; the rail offset is derived from it rather than
   hardcoded, so changing the icon size keeps the line centred. */
.order-process-section .order-steps {
    counter-reset: gxstep;
    --gx-step-ic: 60px;
    --gx-step-num: 26px;
}

/* the earlier top-rail + tick are replaced wholesale */
.order-process-section .order-step {
    counter-increment: gxstep;
    position: relative;
    padding-top: 0;
    z-index: 0;
}

/* 01 .. 05 */
.order-process-section .order-step::before {
    content: counter(gxstep, decimal-leading-zero);
    display: block;
    height: var(--gx-step-num);
    line-height: var(--gx-step-num);
    position: static;
    width: auto;
    background: none;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--primary);
    opacity: .55;
}

/* the rail, at the icon's vertical centre, behind everything */
.order-process-section .order-step::after {
    content: "";
    position: absolute;
    top: calc(var(--gx-step-num) + (var(--gx-step-ic) / 2));
    left: -50%;
    right: -50%;
    width: auto;
    height: 1px;
    background: var(--gray-200);
    border-radius: 0;
    z-index: -1;
}
/* no rail running off the ends of the row */
.order-process-section .order-step:first-of-type::after { left: 50%; }
.order-process-section .order-step:last-of-type::after { right: 50%; }

.order-process-section .order-step-icon {
    position: relative;
    z-index: 1;
    width: var(--gx-step-ic);
    height: var(--gx-step-ic);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.order-process-section .order-step:hover .order-step-icon {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px rgba(0, 70, 140, .09);
}

/* a continuous rail says "next" better than a chevron does */
.order-process-section .order-step-arrow { display: none; }

@media (max-width: 767px) {
    /* the row stacks on a phone, so a horizontal rail would point at nothing */
    .order-process-section .order-step::after { display: none; }
}

/* the floating row yields while the page scrolls down (genscript-motion.js
   toggles this). Translated rather than hidden so it stays focusable-adjacent
   and the return reads as the same object coming back, not a new one. */
.msgr-fab.gx-fabs-away,
.sa-launch.gx-fabs-away,
.back-to-top.gx-fabs-away {
    transform: translateY(calc(100% + 78px));
    opacity: 0;
    pointer-events: none;
}
.msgr-fab, .sa-launch, .back-to-top {
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}