/* ============================================================================
   AmbioPharm — brand layer
   Loaded AFTER public/css/ambiopharm.css, which generate-identity.js REGENERATES.
   Nothing here may be moved into that file: it would be erased the next time the
   theme, accent or font pack is touched.

   Design language: this company's mark reads "API" — active pharmaceutical
   ingredient — so the page is built around the document an API house is judged
   on. Hairlines instead of borders, mono tabular numerals for anything measured,
   labels in small letterspaced caps, and a release record as the hero object.
   Palette is the logo's own: deep navy #011689 with the orbit green #60A511.
   ========================================================================== */

.ap {
    --ap-navy: #011689;
    --ap-green: #60A511;      /* the logo green — fills, dots, rules */
    /* ...and its TEXT-safe twin. The logo green is 3.05:1 on white, so it is
       fine as a fill but fails as type. Scaled toward black until it clears
       4.66:1 while staying recognisably the same green. */
    --ap-green-ink: #4C820D;
    --ap-ink: #0b1030;
    --ap-line: rgba(1, 22, 137, .16);
    --ap-hair: 1px solid var(--ap-line);
    position: relative;
    padding: 0 0 calc(var(--u, 4px) * 6);
    overflow: hidden;
}

.ap-ground {
    position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(180deg, #fff 0%, #f7f8fc 62%, #f2f4fb 100%),
        repeating-linear-gradient(0deg, rgba(1,22,137,.028) 0 1px, transparent 1px 46px);
}
.ap > .container, .ap-rail, .ap-marquee { position: relative; z-index: 1; }

/* ---- credential rail ----------------------------------------------------- */
.ap-rail {
    border-bottom: var(--ap-hair);
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(1.1) blur(3px);
}
.ap-rail-in {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: calc(var(--u, 4px) * 5);
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.ap-rail-in b { color: var(--ap-navy); font-weight: 700; }
.ap-rail-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.ap-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ap-green);
    box-shadow: 0 0 0 0 rgba(96,165,17,.55);
}
@media (prefers-reduced-motion: no-preference) {
    .ap-dot { animation: ap-pulse 2.4s ease-out infinite; }
    @keyframes ap-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(96,165,17,.55); }
        70%  { box-shadow: 0 0 0 7px rgba(96,165,17,0); }
        100% { box-shadow: 0 0 0 0 rgba(96,165,17,0); }
    }
}

/* ---- layout -------------------------------------------------------------- */
.ap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: calc(var(--u, 4px) * 11);
    align-items: start;
    padding: calc(var(--u, 4px) * 11) 0 calc(var(--u, 4px) * 8);
}

/* ---- lead ---------------------------------------------------------------- */
.ap-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 calc(var(--u, 4px) * 4);
    padding: 7px 14px;
    border: var(--ap-hair);
    border-radius: 100px;
    background: #fff;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-700);
}
.ap-eyebrow i { color: var(--ap-navy); }

.ap-title {
    margin: 0 0 calc(var(--u, 4px) * 4);
    font-size: clamp(2.1rem, 4.4vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    color: var(--ap-ink);
}
/* the three letters of the mark, set as the mark sets them */
.ap-title em {
    font-style: normal;
    font-weight: 800;
    color: var(--ap-navy);
}
.ap-title em:last-of-type { color: var(--ap-green-ink); }
.ap-title-sub {
    display: block;
    margin-top: 6px;
    font-size: .5em;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--gray-600);
}

.ap-lede {
    margin: 0 0 calc(var(--u, 4px) * 6);
    max-width: 54ch;
    font-size: 1.03rem;
    line-height: 1.62;
    color: var(--gray-700);
}

.ap-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: calc(var(--u, 4px) * 5); }
.ap-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ap-btn-primary {
    background: var(--ap-navy); color: #fff;
    box-shadow: 0 10px 26px -16px rgba(1,22,137,.9);
}
.ap-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -16px rgba(1,22,137,1); }
.ap-btn-ghost { background: #fff; color: var(--gray-800); border: var(--ap-hair); }
.ap-btn-ghost:hover { border-color: var(--ap-navy); transform: translateY(-1px); }

.ap-trust {
    display: flex; flex-wrap: wrap; gap: calc(var(--u, 4px) * 5);
    margin: 0; padding: 0; list-style: none;
    font-size: .82rem; color: var(--gray-600);
}
.ap-trust li { display: inline-flex; align-items: center; gap: 7px; }
.ap-trust i { color: var(--ap-green-ink); }
.ap-trust a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(1,22,137,.4); }
.ap-trust a:hover { color: var(--ap-navy); }

/* ---- the release record -------------------------------------------------- */
.ap-panel {
    border: var(--ap-hair);
    border-radius: var(--radius-lg, 12px);
    background: #fff;
    box-shadow: 0 26px 60px -40px rgba(1,22,137,.55);
    overflow: hidden;
}
.ap-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--ap-hair);
    background: linear-gradient(180deg, #fbfcff, #f4f6fd);
}
.ap-panel-kicker, .ap-panel-id {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ap-panel-kicker { color: var(--gray-600); }
.ap-panel-id { color: var(--ap-navy); font-weight: 700; }

.ap-qc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.ap-qc > div { padding: 13px 16px; border-bottom: var(--ap-hair); }
.ap-qc > div:nth-child(odd) { border-right: var(--ap-hair); }
.ap-qc dt {
    margin: 0 0 3px;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.ap-qc dd {
    margin: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ap-ink);
}
.ap-qc .ap-pass { color: var(--ap-green-ink); }

.ap-method { padding: 12px 16px; border-bottom: var(--ap-hair); background: #fcfdff; }
.ap-method-label {
    display: block; margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-600);
}
.ap-method-line {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--gray-700);
}

.ap-chain {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; margin: 0; padding: 0; list-style: none;
    border-bottom: var(--ap-hair);
}
.ap-chain li { padding: 11px 8px; text-align: center; border-right: var(--ap-hair); }
.ap-chain li:last-child { border-right: 0; }
.ap-chain-n {
    display: block;
    font-family: var(--font-mono);
    font-size: .62rem; font-weight: 700; letter-spacing: .12em;
    color: var(--ap-navy); opacity: .5;
}
.ap-chain-s { display: block; margin-top: 3px; font-size: .68rem; color: var(--gray-600); }
.ap-chain .is-done .ap-chain-n { opacity: .85; }
.ap-chain .is-now  { background: rgba(96,165,17,.07); }
.ap-chain .is-now .ap-chain-n { color: var(--ap-green-ink); opacity: 1; }
.ap-chain .is-now .ap-chain-s { color: var(--gray-800); font-weight: 600; }

.ap-sign {
    margin: 0; padding: 11px 16px;
    border-bottom: var(--ap-hair);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--gray-600);
}
.ap-sign b { color: var(--ap-ink); }
.ap-sign-date { float: right; }

.ap-panel-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--ap-hair);
    font-size: .82rem; text-decoration: none; color: var(--ap-navy);
}
.ap-panel-link b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ap-panel-link:hover { background: #f7f9ff; }

/* ---- proof strip (rating + coverage, directly under the title) ----------- */
.ap-proof {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 calc(var(--u, 4px) * 4);
}
.ap-proof-score { display: inline-flex; align-items: center; gap: 8px; }
.ap-proof-score > b {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--ap-ink);
}
.ap-stars { display: inline-flex; gap: 2px; font-size: .82rem; color: #E8A317; }
.ap-proof-sub, .ap-proof-labs { font-size: .8rem; color: var(--gray-700); }
.ap-proof-labs b { color: var(--ap-ink); font-weight: 700; }
.ap-proof-sep {
    width: 1px; height: 18px;
    background: rgba(1, 22, 137, .16);
}

/* ---- chromatogram -------------------------------------------------------- */
/* The trace is the assay figure made visible. `preserveAspectRatio: none` lets
   it stretch to the panel width; the stroke is vector so it stays crisp. */
.ap-trace {
    margin: 0;
    padding: 12px 16px 10px;
    border-bottom: var(--ap-hair);
    background:
        linear-gradient(90deg, rgba(1, 22, 137, .05) 1px, transparent 1px) 0 0 / 32px 100%,
        linear-gradient(180deg, rgba(1, 22, 137, .05) 1px, transparent 1px) 0 0 / 100% 24px,
        #fcfdff;
}
.ap-trace svg { display: block; width: 100%; height: 74px; }
.ap-trace-base { stroke: rgba(1, 22, 137, .22); stroke-width: 1; fill: none; }
.ap-trace-fill { fill: rgba(1, 22, 137, .10); stroke: none; }
.ap-trace-line {
    fill: none;
    stroke: var(--ap-navy);
    stroke-width: 1.6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.ap-trace-cap {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.ap-trace-rt { color: var(--ap-green-ink); }

/* ---- running promotion — full-width band under the grid ------------------ */
/* Was docked inside .ap-panel, which made the record ~830px tall: ragged
   against the lead column on desktop, and it pushed the record itself 839px
   down the page on mobile. As its own band the record stays a record. */
.ap-offer {
    margin: 0 0 calc(var(--u, 4px) * 9);
    border: var(--ap-hair);
    border-radius: 14px;
    background: linear-gradient(180deg, #f7f9ff, #eef2fc);
    overflow: hidden;
}
.ap-offer-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 12px 18px;
    border-bottom: var(--ap-hair);
    background: #fff;
}
.ap-offer-name { font-weight: 700; font-size: .92rem; color: var(--ap-ink); }
.ap-offer-timer { font-family: var(--font-mono); font-size: .7rem; color: var(--gray-600); }
.ap-offer-timer b { color: var(--ap-navy); font-variant-numeric: tabular-nums; }

.ap-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0; padding: 0; list-style: none;
}
.ap-tiers li {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 18px;
    border-right: var(--ap-hair);
}
.ap-tiers li:last-child { border-right: 0; }
.ap-tiers .deal-tier-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gray-600);
}
.ap-tier-val {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ap-navy);
}
.ap-tier-note { font-size: .74rem; color: var(--gray-700); }
/* the headline tier carries the weight rather than sitting in the same rank */
.ap-tiers li.is-top { background: rgba(96, 165, 17, .09); }
.ap-tiers li.is-top .ap-tier-val { color: var(--ap-green-ink); font-size: 1.6rem; }
/* NOT green: --ap-green-ink is 4.16:1 on the band's #eef2fc ground, under the
   4.5 floor for text this size. The big 50% keeps the green (large bold text,
   3:1 threshold); the small note goes to ink. The floor is keyed on the
   GROUND, not the hex — the same colour passes on white. */
.ap-tiers li.is-top .ap-tier-note { color: var(--ap-ink); font-weight: 600; }

.ap-offer-note {
    margin: 0;
    padding: 11px 18px 13px;
    border-top: var(--ap-hair);
    font-size: .76rem; line-height: 1.55;
    color: var(--gray-700);
    background: #fff;
}
.ap-offer-note a { color: var(--ap-navy); text-decoration: none; font-weight: 600; }
.ap-offer-note a:hover { text-decoration: underline; }

/* ---- marquee ------------------------------------------------------------- */
.ap-marquee {
    border-top: var(--ap-hair);
    border-bottom: var(--ap-hair);
    background: #fff;
    overflow: hidden;
}
.ap-marquee-track {
    display: flex; gap: calc(var(--u, 4px) * 9);
    width: max-content;
    padding: 11px 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gray-600);
    white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
    .ap-marquee-track { animation: ap-marquee 52s linear infinite; }
    @keyframes ap-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* ---- the header mark ------------------------------------------------------
   The real logo is a square orbit-and-API device, so it takes the square slot
   beside the wordmark. No filter tricks: the footer gets its own white knockout
   PNG, because brightness(0) invert(1) turns white glyphs BLACK. */
.logo-img { width: 36px; height: 36px; object-fit: contain; }
.footer-logo-img { width: 30px; height: 30px; object-fit: contain; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
    .ap-grid { grid-template-columns: 1fr; gap: calc(var(--u, 4px) * 8); }
    .ap-panel { max-width: 640px; }
}

@media (max-width: 767px) {
    /* The chrome above the hero (promo bar + trust bar + header + rail) already
       eats ~420px of a 844px screen, so everything here buys back height. */
    .ap-grid { padding: calc(var(--u, 4px) * 5) 0 calc(var(--u, 4px) * 4); gap: calc(var(--u, 4px) * 6); }

    /* The rail used to be a horizontal scroller that simply looked cut off
       mid-word ("4 INDEPE…"). A two-column grid shows all five facts. */
    .ap-rail-in {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px;
        overflow: visible;
    }
    .ap-rail-live { grid-column: 1 / -1; margin-left: 0; }

    /* Reorder so the headline, the proof and the CTA clear the fold before the
       prose does. DOM order stays desktop/screen-reader correct. */
    .ap-lead { display: flex; flex-direction: column; }
    .ap-eyebrow { order: 1; }
    .ap-title   { order: 2; }
    .ap-proof   { order: 3; }
    .ap-cta     { order: 4; }
    .ap-lede    { order: 5; }
    .ap-trust   { order: 6; }

    .ap-eyebrow {
        margin-bottom: calc(var(--u, 4px) * 3);
        padding: 5px 11px;
        font-size: .62rem;
        letter-spacing: .08em;
    }
    .ap-title { margin-bottom: calc(var(--u, 4px) * 3); font-size: clamp(1.95rem, 8.4vw, 2.4rem); }
    .ap-title-sub { font-size: .82em; }
    .ap-proof { gap: 9px; margin-bottom: calc(var(--u, 4px) * 4); }
    .ap-proof-sep { display: none; }
    .ap-proof-labs { flex-basis: 100%; }

    .ap-lede { margin: calc(var(--u, 4px) * 4) 0 0; font-size: .94rem; line-height: 1.6; }
    /* Six lines of body copy before anything actionable was the single biggest
       block of wasted height. The claim survives in the record panel below. */
    .ap-lede-tail { display: none; }

    .ap-cta { gap: 8px; margin-bottom: 0; }
    .ap-btn { min-height: 48px; }
    .ap-btn-primary { flex: 1 1 100%; justify-content: center; }
    .ap-btn-ghost { flex: 1 1 0; justify-content: center; min-width: 0; }

    .ap-trust {
        margin-top: calc(var(--u, 4px) * 4);
        gap: 4px 16px;
    }

    .ap-trace { padding: 10px 13px 8px; }
    .ap-trace svg { height: 56px; }

    /* 2x2 keeps the record compact — one column doubled the panel height. */
    .ap-qc { grid-template-columns: 1fr 1fr; }
    .ap-qc > div:nth-child(odd) { border-right: var(--ap-hair); }
    .ap-chain { grid-template-columns: repeat(2, 1fr); }
    .ap-chain li:nth-child(2n) { border-right: 0; }

    .ap-offer { margin-bottom: calc(var(--u, 4px) * 6); }
    .ap-offer-head { padding: 11px 14px; }
    .ap-tiers { grid-template-columns: 1fr 1fr; }
    .ap-tiers li { padding: 11px 14px; }
    /* .68rem lands at 10.9px here — under the 11px legibility floor. */
    .ap-tiers .deal-tier-label { font-size: .72rem; }
    .ap-tiers li:nth-child(2n) { border-right: 0; }
    .ap-tiers li:nth-child(-n + 2) { border-bottom: var(--ap-hair); }
    .ap-tier-val { font-size: 1.2rem; }
    .ap-tiers li.is-top .ap-tier-val { font-size: 1.35rem; }
    .ap-offer-note { padding: 10px 14px 12px; }

    .ap-eyebrow, .ap-rail-in, .ap-panel-kicker, .ap-panel-id,
    .ap-qc dt, .ap-method-label, .ap-method-line, .ap-chain-n,
    .ap-sign, .ap-offer-timer, .ap-marquee-track, .ap-chain-s, .ap-qc dd,
    .ap-trace-cap {
        font-size: .72rem;
        line-height: 1.5;
    }
    .ap-qc dd { font-size: .95rem; }
    /* WCAG 2.5.8 — the trust row is links/targets, keep them thumb-sized. */
    .ap-trust li, .ap-trust li > a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 359px) {
    .ap-tiers { grid-template-columns: 1fr; }
    .ap-tiers li { border-right: 0; border-bottom: var(--ap-hair); }
    .ap-tiers li:last-child { border-bottom: 0; }
    .ap-btn-ghost { flex: 1 1 100%; }
}