/* ============================================================
   PONSLOGIC brand layer — brushed silver over deep green.
   Loaded after index-lab.css on every page. Overrides only the
   surfaces that carry the brand; layout is untouched.
   ============================================================ */

/* ---- The ground: silver machined plate, not flat grey ---- */
body {
    background: var(--silver-2);
    background-image:
        linear-gradient(rgba(34,43,38,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,43,38,0.045) 1px, transparent 1px),
        radial-gradient(1200px 600px at 50% -10%, rgba(27,107,76,0.10), transparent 70%);
    background-size: 50px 50px, 50px 50px, 100% 100%;
}
.pl-page {
    background: var(--bg1);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 260px);
    box-shadow: -1px 0 0 var(--border), 1px 0 0 var(--border);
}

/* ---- Nav: a brushed strip with a green hairline under it ---- */
.pl-nav {
    background: var(--brushed);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 -1px 0 rgba(27,107,76,0.14), 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
    z-index: 40;
}
.pl-nav-logo img {
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(27,107,76,0.22), 0 1px 3px rgba(10,19,16,0.18);
}
.pl-nav-links a.is-current { background: rgba(27,107,76,0.10); color: var(--accent); }

/* ---- Connect Wallet ---- */
.pl-nav-cta.pl-wallet,
.pl-hero-wallet {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(10,40,28,0.35);
    cursor: pointer;
    font-family: var(--sans);
    color: #f2f6f2;
    background: linear-gradient(180deg, #227a58 0%, #14563d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 1px 2px rgba(10,19,16,0.28);
    transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s var(--ease);
}
.pl-nav-cta.pl-wallet {
    font: 500 12px/1 var(--sans);
    padding: 10px 18px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    min-width: 132px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pl-nav-cta.pl-wallet:hover,
.pl-hero-wallet:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 3px 12px rgba(20,86,61,0.30); }
.pl-nav-cta.pl-wallet:active,
.pl-hero-wallet:active { transform: translateY(1px); }
.pl-nav-cta.pl-wallet:focus-visible,
.pl-hero-wallet:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.pl-nav-cta.pl-wallet[aria-busy="true"],
.pl-hero-wallet[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Connected reads as a status chip, not a call to action. */
html[data-wallet="connected"] .pl-nav-cta.pl-wallet,
html[data-wallet="connected"] .pl-hero-wallet {
    background: linear-gradient(180deg, #eef1ed 0%, #dde3dd 100%);
    color: var(--accent);
    border-color: rgba(27,107,76,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(10,19,16,0.12);
}
html[data-wallet="connected"] .pl-nav-cta.pl-wallet::before,
html[data-wallet="connected"] .pl-hero-wallet::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #2fbf78;
    box-shadow: 0 0 0 2px rgba(47,191,120,0.22);
    vertical-align: middle;
}

/* Hero variant matches the outlined secondary button it replaced. */
.pl-hero-cta { align-items: stretch; }
.pl-hero-wallet {
    font: 500 12px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 13px 24px;
    border-radius: 4px;
}

/* ---- Aluminium sections get the brushed grain ---- */
.pl-section--alu {
    background: var(--brushed);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(27,107,76,0.10);
}

/* ---- Dark sections go deep green, with the lime spark on top ---- */
.pl-section--dark,
.pl-cta {
    background: var(--brushed-dark);
    background-color: var(--ink);
}
.pl-section--dark::before,
.pl-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 14% 0%, rgba(212,252,80,0.10), transparent 58%),
        radial-gradient(700px 380px at 88% 100%, rgba(85,210,154,0.10), transparent 62%);
}
.pl-section--dark, .pl-cta { position: relative; }
.pl-section--dark > *, .pl-cta > * { position: relative; z-index: 1; }
.pl-section--dark .pl-eyebrow { color: var(--spark); }
.pl-section--dark .pl-heading em,
.pl-cta .pl-quote-punch { color: var(--mint); }

/* ---- Cards: glass over silver, green rim ----
   Only .pl-pillar takes the fill. .pl-cta-card carries a photographic
   background from index-lab.css and .pl-metric sits on the dark metrics bar;
   painting either with a light glass fill would erase the photo and strand the
   white bar text on a pale ground. They get the rim and nothing else. */
.pl-pillar {
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--green-rim);
    -webkit-backdrop-filter: saturate(1.15) blur(6px);
    backdrop-filter: saturate(1.15) blur(6px);
}
.pl-pillar:hover {
    box-shadow: var(--glass-shadow), 0 0 0 1px rgba(27,107,76,0.32), 0 12px 34px rgba(20,86,61,0.14);
}
.pl-metrics {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(27,107,76,0.22), 0 12px 30px rgba(10,19,16,0.18);
}
.pl-cta-card { box-shadow: inset 0 0 0 1px rgba(133,220,178,0.22); }
.pl-cta-card:hover { box-shadow: inset 0 0 0 1px rgba(133,220,178,0.40), 0 12px 34px rgba(10,19,16,0.28); }

/* ---- Trusted-by strip ---- */
.pl-trusted { background: var(--brushed); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); }
.pl-trusted-label { color: var(--text-3); }

/* ---- Footer: the plate's underside ---- */
.pl-footer {
    background: var(--brushed-dark);
    background-color: var(--ink);
    border-top: 1px solid rgba(85,210,154,0.16);
    color: rgba(255,255,255,0.78);
}
.pl-footer a { color: rgba(255,255,255,0.66); }
.pl-footer a:hover { color: var(--mint); }
.pl-footer h5 { color: rgba(212,252,80,0.72); }
.pl-footer-brand-name { color: #f2f6f2; letter-spacing: 0.06em; text-transform: uppercase; }
.pl-footer-brand p { color: rgba(255,255,255,0.5); }
.pl-footer-copy { color: rgba(255,255,255,0.46); font: 500 11px/1.5 var(--mono); letter-spacing: 0.01em; }
.pl-footer-bottom { border-top-color: rgba(255,255,255,0.10); }

/* ---- Selection + focus keep the brand green ---- */
::selection { background: var(--accent-brand); color: #f2f6f2; }
:focus-visible { outline-color: var(--accent-light); }

@media (max-width: 860px) {
    .pl-nav-cta.pl-wallet { min-width: 0; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .pl-nav-cta.pl-wallet, .pl-hero-wallet { transition: none; }
}

/* ============================================================
   Contrast repairs
   ============================================================ */

/* ---- Metrics bar ----
   The bar inherited --inverse, a mid green-grey, and on it the 11px label
   (white at 40%) measured 3.62:1 and the bottom of the value gradient 3.62:1.
   Both are under the AA floor for their size, so browsers with contrast
   enforcement were drawing backing boxes behind the text. Drop the bar to the
   deep ink used by the footer and lift the type onto it. */
.pl-metrics { background: var(--ink-2); }
.pl-metric-val {
    background-image: linear-gradient(to bottom, #7fe0b4, #3fbf85);  /* 11.2:1 -> 7.6:1 */
}
.pl-metric-lbl { color: rgba(255,255,255,0.72); }                    /* 9.6:1 */
.pl-metric-sep { background: rgba(255,255,255,0.14); }

/* ---- CTA cards ----
   White copy sits directly on a photograph, so it cannot depend on how bright
   that photograph happens to be. This scrim gives the text a floor of its own;
   the picture still reads through it. */
.pl-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Weighted to where the copy actually sits — a band at the top for the
       label and headline, a band at the bottom for the button — so the middle
       of the photograph stays visible instead of the whole card going flat.
       At 0.78 the worst-case white-on-photo measures 6.4:1. */
    background: linear-gradient(
        180deg,
        rgba(7,18,17,0.90)  0%,
        rgba(7,18,17,0.78) 34%,
        rgba(7,18,17,0.34) 56%,
        rgba(7,18,17,0.78) 78%,
        rgba(7,18,17,0.92) 100%);
}
.pl-cta-card h3 { color: rgba(255,255,255,0.95); }
.pl-cta-teaser { color: rgba(255,255,255,0.92); }
.pl-cta-card p { color: rgba(255,255,255,0.92); }

/* ============================================================
   Mobile: give every control a thumb-sized hit area
   ------------------------------------------------------------
   The desktop layout packs links at 12-29px tall, which is fine
   for a cursor and poor for a thumb. Below 860px the controls
   keep their type size and grow their padding instead, so
   nothing moves visually but everything is reachable.
   ============================================================ */
@media (max-width: 860px), (pointer: coarse) {
    .pl-nav-logo {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .pl-nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .pl-nav-social a { width: 44px; height: 44px; }

    /* Footer columns: the largest block of small links on the site. */
    .pl-footer-col a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0;
    }
    .pl-footer-legal a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
    }
    .pl-footer-legal { display: flex; align-items: center; gap: 4px; }

    /* Breadcrumbs, back links and inline "read more" affordances. */
    .pl-breadcrumb a,
    .gt-breadcrumb a,
    .pl-back-link,
    .gt-deep-dive,
    .pl-articles-authors a,
    .pl-h-int-tier-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Standalone buttons and card CTAs. */
    .pl-cta-card a,
    .pl-hero-cta a,
    .pl-hero-wallet,
    .pl-tk-btn,
    .pl-nav-cta.pl-wallet {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A mailto in a contact block is a control, not prose. */
    .pl-ab-contact a,
    .pl-cta a[href^="mailto:"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The docs side nav: the densest list of links on the site. */
    .pl-docs-nav a,
    .pl-docs-nav-sub a,
    .pl-docs-nav-section {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ---- Narrow phones ----
   Three stats side by side need ~350px of content width; a 320px screen has
   about 254px once the bar's padding and separators are removed, so the row
   pushed the page sideways. Stack them instead. */
@media (max-width: 420px) {
    .pl-metrics {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 26px 20px;
    }
    .pl-metric { width: 100%; }
    .pl-metric-sep { display: none; }
    .pl-metric-val { font-size: clamp(28px, 9vw, 38px); }
}

/* ---- Trusted-by strip ----
   Below 600px this is a marquee: the row is duplicated and slid inside a
   clipped strip. Above 600px there is no animation, so those duplicates were
   just extra width with nothing clipping it, and the page scrolled sideways on
   a tablet. Hide the duplicates outside marquee mode and let the real row wrap. */
@media (min-width: 601px) {
    .pl-marquee-dup { display: none !important; }
    .pl-trusted { overflow: hidden; }
    .pl-trusted-logos { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .pl-trusted-logos { gap: 28px; row-gap: 18px; }
    .pl-trusted-logos img { height: 30px; }
    .pl-trusted-logos img[alt="NVIDIA Inception"],
    .pl-trusted-logos img[alt="Adaption Labs"] { height: 40px; }
    .pl-trusted-logos img[alt="Google Cloud"],
    .pl-trusted-logos img[alt="0G Labs"] { height: 24px; }
    .pl-trusted-logos img[alt="Ethereum Foundation"] { height: 32px; }
    .pl-trusted-logos img[alt="z.ai"] { height: 28px; }
}