/* ═══════════════════════════════════════════════════════════════════
   Nonlinear Platform — static page compatibility layer (v2.0.0)
   Loaded after the page's own stylesheet and chrome.css.
   Fixes cross-page inconsistencies found in the audit and hardens the
   pages for phones (Chrome / Edge / Safari).  Nothing here restyles a
   page's design — it only fills gaps and removes known defects.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Base ──────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.nlp-static { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body.nlp-static img, body.nlp-static video { max-width: 100%; }
body.nlp-static img { height: auto; }
body.nlp-static [hidden] { display: none !important; }

/* No-JS safety: content that fades in via script must remain readable */
html:not(.nlp-js) .reveal { opacity: 1 !important; transform: none !important; }

/* ── 2. Standard platform-page family: undefined variables ─────────────
   The shared platform stylesheet referenced --font-serif / --font-sans /
   --gold / --ink / --text-on-dark that were never declared, so headings
   fell back to Playfair Display / Inter (not loaded) and a second gold
   (#c9a961).  Map them onto the real brand tokens.                      */
body.nlp-css-b1fb1f13, body.nlp-css-39926499 {
    --font-serif: var(--font-display);
    --font-sans: var(--font-body);
    --gold: #c9a84c;
    --ink: #070a12;
    --text-on-dark: var(--text-primary);
}
body.nlp-css-bd9fc8af { --pc: var(--accent-gold); --sc: var(--accent-blue); --sc2: var(--accent-blue-lt); --ac: var(--accent-gold); }
body.nlp-page-mladf { --accent-color: var(--accent-gold, #c9a84c); }
body.nlp-css-2aa2ede0 { --serif: var(--font-display, 'Cormorant Garamond', Georgia, serif); --sans: var(--font-body, 'DM Sans', sans-serif); }

/* ── 2b. Stat counters (standard platform-page family) ─────────────────
   Markup is .stat-item > span.stat-number + span.stat-label.  Both spans were
   inline, so the label ran on beside the numeral and the whole row hugged the
   left edge on phones.  Stack them and centre them, as the layout intends.   */
body.nlp-css-b1fb1f13 .stat-item, body.nlp-css-39926499 .stat-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
body.nlp-css-b1fb1f13 .stat-number, body.nlp-css-39926499 .stat-number,
body.nlp-css-b1fb1f13 .stat-label,  body.nlp-css-39926499 .stat-label { display: block; }

/* ── 2c. Next Gen Slot Games: option cards wider than the page at 769–1280px ──
   The three "Enquire About …" buttons are nowrap, which stretched the 1fr tracks
   past the container (a sideways scrollbar on laptops).  Let the tracks shrink and
   the button labels wrap inside their card.                                   */
body.nlp-css-2aa2ede0 .options-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.nlp-css-2aa2ede0 .option-card .btn { white-space: normal; max-width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }

/* ── 3. "How it works" flow (legacy pages) ─────────────────────────────
   Markup is .process-flow > .process-step > .step-num + h3 + p, but only
   .process-grid was ever styled — steps stacked unstyled and the number
   appeared twice (counter + .step-num).  Treat both containers alike.   */
.process-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 48px; counter-reset: step; }
.process-flow .step-num { display: none; }
.process-flow .process-step { text-align: center; padding: 32px 24px; position: relative; counter-increment: step; min-width: 0; }
@media (max-width: 768px) { .process-flow, .process-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .process-flow, .process-grid { grid-template-columns: 1fr; } .process-flow .process-step, .process-grid .process-step { padding: 24px 16px; } }

/* ── 4. Scope-of-evidence callout (new platform pages) ────────────────── */
.nlp-scope {
    margin-top: 40px; padding: 22px 26px; background: var(--bg-card, #0e1530);
    border: 1px solid var(--border-card, rgba(201,168,76,.08)); border-left: 3px solid var(--accent-gold, #c9a84c);
    border-radius: var(--radius, 4px);
}
.nlp-scope p { margin: 0; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: .95rem; font-weight: 300; line-height: 1.75; color: var(--text-secondary, #8c8699); }

/* ── 5. First screen fits the *visible* viewport on phones ───────────── */
@supports (min-height: 100svh) {
    body.nlp-static .hero, body.nlp-static .hero-section, body.nlp-static #hero { min-height: 100svh; }
}

/* Anchor offset: chrome.css sets html{scroll-padding-top:90px} for the fixed header, so the
   Privacy Policy's own scroll-margin (nav + 28px) would be applied on top of it and push every
   heading ~190px down the screen (and make the contents list highlight the wrong entry).
   Keep the original total of ~100px.                                                          */
body.nlp-css-7a77260d .policy-section { scroll-margin-top: 12px; }
body.nlp-page-terms section[id] { scroll-margin-top: 10px !important; }   /* was an inline 160px */

/* ── 6. Page-specific fixes carried over from the live site ──────────── */
body.r14-pva .container {
    max-width: var(--max-width, 1240px); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px;
    box-sizing: border-box; width: 100%;
}

/* ── 7. Phone layout: horizontal safe padding (live-site "Round 13") ───
   Earlier pages ship `.section, section { padding: 48px 0 !important }`
   at ≤768px, which pins text to the screen edge.  Restore safe gutters.  */
@media (max-width: 768px) {
    body.nlp-static .section, body.nlp-static section.section, body.nlp-static section,
    body.nlp-static .hero, body.nlp-static section.hero, body.nlp-static .hero-section, body.nlp-static section.hero-section {
        padding-left: 20px !important; padding-right: 20px !important;
    }
    body.nlp-static .container, body.nlp-static .hero-inner, body.nlp-static .hero-content, body.nlp-static .section-inner {
        padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important;
    }
    body.nlp-static main, body.nlp-static main > * { max-width: 100% !important; box-sizing: border-box !important; }
    body.r14-pva .container { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 480px) {
    body.nlp-static .section, body.nlp-static section.section, body.nlp-static section,
    body.nlp-static .hero, body.nlp-static section.hero, body.nlp-static .hero-section {
        padding-left: 16px !important; padding-right: 16px !important;
    }
}

/* ── 8. Never allow a sideways scroll on phones ──────────────────────── */
@media (max-width: 1024px) {
    html, body.nlp-static { overflow-x: hidden; }
    @supports (overflow-x: clip) { html, body.nlp-static { overflow-x: clip; } }
}
/* Wide tables / code blocks scroll inside their own box */
body.nlp-static main table { max-width: 100%; }
body.nlp-static main pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 8b. Narrow phones (iPhone SE / 320–360px): nothing may be wider than its box ──
   Grid items default to min-width:auto, so a track grew to the widest unbreakable
   content (padding + nowrap button) and the card was clipped on the right.  Let
   those items shrink to their track; on the very narrowest screens also give the
   big cards phone-sized padding.  Wider phones keep the original design exactly. */
@media (max-width: 480px) {
    body.nlp-static .contact-inner > *,
    body.nlp-static .solution-features > *,
    body.nlp-static .market-content > *,
    body.nlp-static .platform-content > *,
    body.nlp-static .pricing-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
    /* the cards carry an inline min-width:320px (and padding) in the original markup */
    body.nlp-static .pricing-card { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
    body.nlp-static .contact-inner,
    body.nlp-static .solution-features,
    body.nlp-static .market-content,
    body.nlp-static .platform-content,
    body.nlp-static .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    body.nlp-static .wrap { min-width: 0; }
    body.nlp-static .contact-email-display,
    body.nlp-static .contact-note { overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
    body.nlp-static .contact-email-block,
    body.nlp-static .price-card,
    body.nlp-static .chart-container { padding-left: 22px; padding-right: 22px; }
    body.nlp-static .pricing-card { padding-left: 22px !important; padding-right: 22px !important; }
    body.nlp-static .solution-feature { padding-left: 18px; padding-right: 18px; }
    body.nlp-static .demo-request-btn { white-space: normal; text-align: center; justify-content: center; padding-left: 22px; padding-right: 22px; }
}

/* ── 9. Motion preferences ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body.nlp-static *, body.nlp-static *::before, body.nlp-static *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}