/* ============================================================================
   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;
    }
}