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

/* ---- docked promotion ---------------------------------------------------- */
.ap-promo { padding: 14px 16px 16px; background: linear-gradient(180deg, #f7f9ff, #eef2fc); }
.ap-promo-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.ap-promo-name { font-weight: 700; font-size: .88rem; color: var(--ap-ink); }
.ap-promo-timer {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--gray-600);
}
.ap-promo-timer b { color: var(--ap-navy); font-variant-numeric: tabular-nums; }
.ap-tiers { margin: 0 0 9px; padding: 0; list-style: none; }
.ap-tiers li {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(1,22,137,.13);
    font-size: .8rem;
    color: var(--gray-700);
}
.ap-tiers li:last-child { border-bottom: 0; }
.ap-tiers b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ap-navy); }
.ap-promo-note { margin: 0; font-size: .74rem; line-height: 1.55; color: var(--gray-600); }
.ap-promo-note a { color: var(--ap-navy); text-decoration: none; font-weight: 600; }

/* ---- 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); }
}
@media (max-width: 767px) {
    .ap-grid { padding: calc(var(--u, 4px) * 7) 0 calc(var(--u, 4px) * 5); }
    .ap-rail-in { gap: calc(var(--u, 4px) * 4); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ap-rail-in::-webkit-scrollbar { display: none; }
    .ap-rail-in span { flex: none; white-space: nowrap; }
    .ap-rail-live { margin-left: 0; }
    .ap-qc { grid-template-columns: 1fr; }
    .ap-qc > div:nth-child(odd) { border-right: 0; }
    .ap-chain { grid-template-columns: repeat(2, 1fr); }
    .ap-chain li:nth-child(2n) { border-right: 0; }
    .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-promo-timer, .ap-marquee-track, .ap-chain-s, .ap-qc dd {
        font-size: .72rem !important;
        line-height: 1.5;
    }
    .ap-trust li, .ap-trust li > a { min-height: 44px; display: inline-flex; align-items: center; }
}