/* ==========================================================================
   BNTouch 2026 — global shell
   Tokens and component rules taken from the 2026-09 homepage comp.
   Page-specific styles belong in their own files, not here.
   ========================================================================== */

/* --- Fonts: self-hosted, no external requests --------------------------- */
/* Variable font covering weights 300-800 in one file. NOTE: the woff2 files embedded in the
   homepage comp were NON-LATIN subsets (179 glyphs, no a/e/o/P/C), so self-hosting those made
   all Latin text silently fall back to Arial. These are the real latin files. */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url(../fonts/open-sans-latin.woff2) format('woff2-variations'),
      url(../fonts/open-sans-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Open Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/open-sans-latin-italic.woff2) format('woff2');
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --navy:#032d60;
  --orange:#f7941e;
  --orange-d:#dd8210;
  --ink:#222;
  --mut:#656464;
  --line:#e4e7ee;
  --bg:#f6f7f9;
  --green:#1d7a3a;

  --container:1120px;
  --container-wide:1180px;
  --gutter:28px;
  --radius:14px;
  --radius-btn:10px;
}

/* --- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;height:auto}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.01em}
/* The OM design colours headings from their section (white on the dark hero and CTA), so
   headings there must inherit rather than take the global navy -- otherwise navy lands on
   navy and the text disappears. */
.om-page h1,.om-page h2,.om-page h3,.om-page h4{color:inherit}
/* 500, not the comp's 800, and 1.25 rather than 1.22. This is the base every page that is
   not .om-page falls through to -- the homepage, in practice -- and design-om.css has
   always set section headings at 32px/40px/500. Left at 800 the homepage was the only place
   on the site with heavy headings, and only in some of its sections: the one block built
   from the OM comp already carried 500, so the homepage disagreed with itself.

   Arial for the same reason. .om-page is pinned to Arial to match the live Opportunity Mining
   page, which loads no webfont, so every product page heading is Arial while the homepage's were
   Open Sans -- same size and weight, different typeface. Yuri picked the product-page heading as
   the reference, so the base follows it. Legacy bodies are unaffected: legacy-content.css sets
   its own h2 family and loads after this file. */
h2{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:32px;line-height:1.25;margin:0 0 12px;font-weight:500}

.in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:64px 0}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);margin-bottom:10px}
.sub{color:var(--mut);font-size:16.5px;max-width:740px;margin:0 0 30px}
.micro{font-size:13px;color:var(--mut);margin-top:12px}

/* --- Buttons ------------------------------------------------------------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:var(--radius-btn);padding:15px 30px;font-size:15.5px;transition:.15s}
.btn-primary{background:linear-gradient(180deg,#ffa63a,var(--orange));color:#fff;box-shadow:0 10px 24px -10px rgba(247,148,30,.65)}
.btn-ghost{border:2px solid var(--orange);color:var(--orange-d);background:#fff}

/* --- Accessibility ------------------------------------------------------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;padding:12px 18px;background:#fff;color:var(--navy);font-weight:700;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.2)}
:where(a,button):focus-visible{outline:3px solid var(--orange-d);outline-offset:2px}

/* Header and footer styles intentionally absent: the shell comes from the
   Opportunity Mining design, in shell-om.css. */

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width:880px){
  /* TODO: the comp simply hides the nav here and defines no mobile menu.
     Needs a disclosure-button pattern before launch. */
}
@media screen and (max-width:560px){
  h2{font-size:26px}
}

/* --- The orange button, one definition for every page --------------------
   Two things made the same button look different from page to page.

   First, the fill. design-om.css draws `.om-btn` as `background: var(--orange)` and declares
   `--orange: #f9b233` on `.om-page` -- so on any page whose body is not wrapped in one (the
   front page), the button fell through to this file's `--orange: #f7941e`, a deeper and redder
   orange. Setting the variable on the button itself fixes every such page at once: a value
   declared on the element always beats one inherited from an ancestor, whatever the ancestor's
   specificity, so this wins on the front page and changes nothing on the product pages, which
   already resolve to the same value.

   Second, the pricing page's own solid button, which is a different size on purpose -- 56px of
   .om-btn does not fit a plan-card footer, let alone a table head -- but was also a different
   colour, a different label colour and a different corner. Size stays; the fill is shared from
   here and the label and corner are brought into line in page-pricing.css, next to the geometry
   they belong with, so the small one reads as the same button drawn smaller.

   Set the variable, do not restate `background`: a background declaration here would have to
   out-score design-om.css and would then also overwrite .om-btn--white and .om-btn--outline,
   which are the same component deliberately drawn in other colours. */
.om-btn,
.pr-btn--solid { --orange: #f9b233; }
/* Labels are not bold. design-om.css sets font-weight:700 on .om-btn at one class, and this
   file loads before it, so the selector has to carry the element as well to out-score it --
   every .om-btn on the site is an <a> or a <button>. The pricing button's own weight is in
   page-pricing.css, next to its geometry. */
a.om-btn,
button.om-btn { font-weight: 400; }

/* --- Link hover, site-wide -----------------------------------------------
   Every link shifts a little toward the brand orange on hover, whatever colour it starts from.

   color-mix rather than a fixed colour: links on this site sit on white, on the navy hero, on
   the orange CTA band and inside tinted cards, and one hover colour cannot serve all of them.
   Mixing 20% of --orange-d into the link's OWN colour keeps the shift proportional and legible
   on every field.

   Specificity is deliberately low -- a:hover is (0,1,1) -- so anywhere a component already
   declares its own hover (the prose links in a post, the mega-menu cards, the pricing table)
   that rule still wins. This only fills in the links that had no hover at all, which was most
   of them.

   .om-btn and the shell's nav links declare their colour with !important, so they are not
   affected by the rule below; the ones that should respond are listed after it. Buttons are left
   alone on purpose: they already lift and brighten. */
a { transition: color .15s ease; }
/* a:hover:hover, not a:hover. The single-pseudo form scores (0,1,1), which loses to any
   component rule that sets a link colour at equal or greater weight and later in the cascade --
   `.bnt-card__title a`, `.om-faq p a`, and a dozen others. Doubling the pseudo-class is the
   cheapest way to buy a point of specificity without !important, which would then beat the
   deliberate hovers those same components declare. */
a:hover:hover { color: color-mix(in srgb, currentColor 80%, var(--orange-d, #dd8210)); }

.om-site-nav a:hover,
.om-site-actions a:not(.om-site-demo):hover,
.om-footer-column a:hover,
.om-footer-bottom a:hover,
.om-mobile-main > a:hover,
.om-mobile-secondary a:hover,
.om-mobile-product-links a:hover {
    color: var(--orange-d) !important;
}