/*
Theme Name: BRAVE
Description: Custom classic theme for BRAVE — built from Figma VvOlzjCjohvRZLWsjaA3BV,
             BUILD page 19210:1744. Geometry is generated, never hand-written.
Version: 1788084200
Text Domain: brave
*/

/* ── FONTS ─────────────────────────────────────────────────────────
   Self-hosted. Licensed commercial family, carried over from the
   previous build. No CDN, no expiring URLs.                        */
@font-face{font-family:'Polin';font-style:normal;font-weight:400;font-display:swap;
  ascent-override:100%;descent-override:20%;line-gap-override:0%;
  src:url('assets/fonts/Polin-Regular.woff2') format('woff2')}
@font-face{font-family:'Polin';font-style:normal;font-weight:500;font-display:swap;
  ascent-override:100%;descent-override:20%;line-gap-override:0%;
  src:url('assets/fonts/Polin-Medium.woff2') format('woff2')}
@font-face{font-family:'Polin';font-style:normal;font-weight:700;font-display:swap;
  ascent-override:100%;descent-override:20%;line-gap-override:0%;
  src:url('assets/fonts/Polin-Bold.woff2') format('woff2')}

/* WHY THE METRIC OVERRIDES
   Polin ships with USE_TYPO_METRICS set, so browsers lay text out on the
   typo metrics (ascent 0.8em / descent 0.2em). Figma uses the hhea metrics
   (ascent 1.0em / descent 0.2em). The baseline therefore sits 0.1em higher
   in the browser than in the design — 12.4px on a 124px headline.
   These overrides restore Figma's metrics. Measured, not guessed:
   ink was 13px high at 124px and 7px high at 70px, i.e. 0.1em in both. */

/* ── TOKENS ────────────────────────────────────────────────────────
   Read from the design, not invented.                              */
:root{
  --brave-dark:#140702;
  --brave-accent:#FB4B19;
  --brave-light:#FDFDFD;
  --brave-white:#FFFFFF;
  --brave-grey:#F3F3F3;
  --brave-nav-item:#1C1C1C;
  --brave-desktop-base:1920;
  --brave-mobile-base:390;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--brave-dark);-webkit-text-size-adjust:100%}
body{position:relative;min-height:100vh;margin:0;background:var(--brave-dark);color:var(--brave-light);
  font-family:'Polin',system-ui,sans-serif;line-height:1.4}

/* The complete site, excluding the footer, is one opaque upper layer. Its
   black surface and grid move away as a unit and reveal the lower footer. */
.brave-site-shell{
  position:relative;z-index:2;isolation:isolate;
  width:100%;background:var(--brave-dark)}

/* GLOBAL SITE BACKGROUND.
   The black surface and square grid belong to the site shell. Individual
   pages own only their red flare/ellipse layers. The grid sources are the
   exact desktop and mobile Figma assets (19247:3001 / 19247:4729). */
.brave-site-background{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:transparent;
  background-image:url('assets/svg/imgMaskGroup-f68f7daf.svg');
  background-repeat:repeat-y;
  background-position:top center;
  background-size:100vw 51.927083vw}

/* Only the page-sized black canvases become transparent. Component surfaces
   (cards, controls and nav) keep their own dark fills. This lets the global
   black + grid layer remain physically below all page content and flares. */
.brave-home,.brave-catalog,.brave-category,.brave-blog,.brave-blog-archive,
.brave-article,.brave-about,.brave-faq,.brave-contact,.brave-product,
.brave-catalog .brave-section--cat-hero,
.brave-catalog [data-node-id="19247:3392"],
.brave-catalog [data-node-id="19247:5110"],
.brave-category [data-node-id="19247:4260"],
.brave-category [data-node-id="19247:4261"],
.brave-category [data-node-id="19247:5276"],
.brave-blog-archive [data-node-id="19247:3695"],
.brave-blog-archive [data-node-id="19247:3696"],
.brave-blog-archive [data-node-id="19247:5672"],
.brave-article [data-node-id="19247:4099"],
.brave-article [data-node-id="19247:5826"],
.brave-about [data-node-id="19247:4907"],
.brave-about [data-node-id="19247:5046"],
.brave-faq [data-node-id="19247:3982"],
.brave-faq [data-node-id="19247:5404"],
.brave-contact [data-node-id="19247:3848"],
.brave-contact [data-node-id="19247:3849"],
.brave-contact [data-node-id="19247:5528"],
.brave-product [data-node-id="19247:4534"],
.brave-product [data-node-id="19247:5952"],
.brave-home [data-node-id="19247:4692"],
.brave-home [data-node-id="19247:4720"],
.brave-home [data-node-id="19247:4806"]{
  background-color:transparent!important}

/* Retired page-owned grid copies. Keeping this suppression in the global
   shell also prevents generated templates from reintroducing duplicates. */
main [data-name="GRID"],
.brave-overlay--grid,
.brave-overlay--cat-grid,
.brave-page-grid{display:none!important}

@media (max-width:767px){
  .brave-site-background{
    background-image:url('assets/svg/imgGrid-941730ba.svg');
    background-position:center -0.769231vw;
    background-size:103.589744vw 2084.615385vw}
  /* Sticky elements form their own compositing context. Repaint the exact
     section slice of the global grid locally so screen-blended diagrams have
     a real backdrop instead of blending against transparent black. */
  .brave-about-anchor-sequence--mobile{
    background-color:var(--brave-dark);
    background-image:url('assets/svg/imgGrid-941730ba.svg');
    background-repeat:repeat-y;
    background-position:center -1725.897436vw;
    background-size:103.589744vw 2084.615385vw}
}
/* TEXT RASTERISATION IS NOT TUNABLE HERE — measured, do not retry.
   Chrome lays down fuller stem edges than Figma on identical font, size,
   weight and colour: on the footer contact block, peak luminance matched
   exactly (241) and peak-pixel counts matched (75 vs 73), but the 180-240
   intensity band held 319 pixels against Figma's 147.
   `-webkit-font-smoothing:antialiased` + `text-rendering:geometricPrecision`
   were tried on the body: the capture came back BYTE-IDENTICAL (5,524,334
   bytes both runs). font-smoothing is a macOS-only property; Windows Chrome
   ignores it. This is a renderer floor, not a defect, and it sets a hard
   lower bound on the pixel diff for text-dense sections. See
   validation/text-floor.md for the measured floor. */
img,svg,video{display:block;max-width:100%}
p,h1,h2,h3,h4,h5,h6{margin:0}
a{color:inherit;text-decoration:none}

/* Global lead-field system, taken from the homepage form. The field set is
   normalized in behavior.js; these tokens keep its typography and controls
   identical on every page while retaining each breakpoint's measured box. */
@media (min-width:768px){
  .brave-live-field>p,
  .brave-live-field>.brave-live-control{
    padding-inline:max(.520833vw,10px);font-family:'Polin',sans-serif!important;
    font-size:.9375vw!important;font-weight:400!important;line-height:1.3!important;
    letter-spacing:.028125vw!important;text-align:right!important}
  select.brave-live-control option{padding-inline:max(.520833vw,10px)}
}
@media (max-width:767px){
  .brave-live-field>p,
  .brave-live-field>.brave-live-control{
    padding-left:2.564103vw;padding-right:2.564103vw;
    font-family:'Polin',sans-serif!important;font-size:4.102564vw!important;
    font-weight:400!important;line-height:1.35!important;
    letter-spacing:.082051vw!important;text-align:right!important}
  select.brave-live-control option{
    padding-left:2.564103vw;padding-right:2.564103vw}
}

/* ── BREAKPOINT LOCK ───────────────────────────────────────────────
   Desktop and mobile are SEPARATE markup, each measured against its
   own Figma frame (1920 / 390). They are never made to share a
   layout — that is what produced RTL drift in the old build.       */
/* A Figma frame clips its contents. The decorative GRID overlay is taller
   than the frame by design; without this it would extend the document. */
.brave-home__desktop,.brave-home__mobile,
.brave-catalog__desktop,.brave-catalog__mobile,
.brave-category__desktop,.brave-category__mobile,
.brave-blog-archive__desktop,.brave-blog-archive__mobile,
.brave-article__desktop,.brave-article__mobile,
.brave-about__desktop,.brave-about__mobile,
.brave-faq__desktop,.brave-faq__mobile,
.brave-contact__desktop,.brave-contact__mobile,
.brave-product__desktop,.brave-product__mobile{overflow:clip}

.brave-home__desktop,.brave-catalog__desktop,.brave-category__desktop,.brave-blog-archive__desktop,.brave-article__desktop,.brave-about__desktop,.brave-faq__desktop,.brave-contact__desktop,.brave-product__desktop{display:block}
.brave-home__mobile,.brave-catalog__mobile,.brave-category__mobile,.brave-blog-archive__mobile,.brave-article__mobile,.brave-about__mobile,.brave-faq__mobile,.brave-contact__mobile,.brave-product__mobile{display:none}
@media (max-width:767px){
  .brave-home__desktop,.brave-catalog__desktop,.brave-category__desktop,.brave-blog-archive__desktop,.brave-article__desktop,.brave-about__desktop,.brave-faq__desktop,.brave-contact__desktop,.brave-product__desktop{display:none}
  .brave-home__mobile,.brave-catalog__mobile,.brave-category__mobile,.brave-blog-archive__mobile,.brave-article__mobile,.brave-about__mobile,.brave-faq__mobile,.brave-contact__mobile,.brave-product__mobile{display:block}
  /* The original homepage mobile frame contains its own 19247:4860 footer.
     Footer chrome is now global, so retaining that generated copy renders the
     same 566px footer twice and grows the page from 6010px to 6576px. */
  .home .brave-home__mobile [data-node-id="19247:4860"]{display:none}
}

.brave-home,.brave-catalog,.brave-category,.brave-blog-archive,.brave-article,.brave-about,.brave-faq,.brave-contact,.brave-product{
  position:relative;z-index:auto;width:100%;overflow:clip}

/* GLOBAL CHROME LAYER — no height of its own. It exists so the NAV BAR and
   LOGO overlays have document coordinates to sit at when they are not pinned
   (which is the state the pixel gate captures). Desktop only — header.php's
   own comment says so, but nothing enforced it. Without a mobile gate, this
   layer's vw units keep evaluating at the mobile viewport and creates a
   scaled desktop ghost. Mobile now uses one global logo and navbar; the
   generated page copies are hidden below. Confirmed with `probe.py`:
   19247:3175 (desktop NAV BAR) rendered at top=162 on /catalog/ at 390px
   with .brave-capturing set — exactly the ghost pill seen in the diff. */
.brave-chrome{position:absolute;top:0;left:0;width:100%;height:0;z-index:50}
.brave-chrome .brave-overlay--navbar{width:40.885417vw!important}
.brave-navbar__knowledge{border-style:solid;border-width:0.052083vw;
  background-color:var(--brave-nav-item);border-color:rgba(243,243,243,0.1);
  height:2.34375vw;padding-inline:0.78125vw;border-radius:26.041667vw}
.brave-navbar__knowledge-label{word-break:break-word;font-family:'Polin',sans-serif;
  font-weight:500;height:1.302083vw;line-height:1;font-size:1.041667vw;
  color:var(--brave-white);width:4.375vw;white-space:nowrap}
.brave-mobile-chrome{display:none}
@media (max-width:767px){
  .brave-chrome{display:none}
  .brave-mobile-chrome{display:block}
  /* Retire every page-owned copy of the floating navbar. The global header
     now renders the single source of truth from Figma node 19247:4888. */
  .brave-home__mobile [data-name="NAV BAR"],
  .brave-catalog__mobile [data-name="NAV BAR"],
  .brave-category__mobile [data-name="NAV BAR"],
  .brave-blog-archive__mobile [data-name="NAV BAR"],
  .brave-article__mobile [data-name="NAV BAR"],
  .brave-about__mobile [data-name="NAV BAR"],
  .brave-faq__mobile [data-name="NAV BAR"],
  .brave-contact__mobile [data-name="NAV BAR"],
  .brave-product__mobile [data-name="NAV BAR"]{display:none!important}
  .brave-home__mobile [data-node-id="19247:4782"],
  .brave-catalog__mobile [data-node-id="19247:5174"],
  .brave-category__mobile [data-node-id="19247:5334"],
  .brave-blog-archive__mobile [data-node-id="19247:5755"],
  .brave-article__mobile [data-node-id="19247:5882"],
  .brave-about__mobile [data-node-id="19247:5039"],
  .brave-faq__mobile [data-node-id="19247:5458"],
  .brave-contact__mobile [data-node-id="19247:5633"],
  .brave-product__mobile [data-node-id="19247:6031"]{display:none!important}
}

/* GLOBAL FOOTER CHROME — agreed with Amiel 2026-08-13. The footer belongs on
   every page, taken from the homepage. Same breakpoint-lock pattern as
   .brave-home__desktop/__mobile: two independently-measured markups, only one
   ever visible. */
.brave-footer{
  position:sticky;bottom:0;z-index:1;isolation:isolate;
  width:100%;overflow:clip;background:var(--brave-dark)}
.brave-footer__desktop{display:block}
.brave-footer__mobile{display:none}
@media (max-width:767px){
  .brave-footer__desktop{display:none}
  .brave-footer__mobile{display:block}
  .brave-footer__mobile.has-open-accordion .brave-section--footer,
  .brave-footer__mobile.has-open-accordion [data-node-id="19247:4860"]{
    height:calc(34.615385vw + var(--brave-footer-content-height,0px) + 8vw)!important;
    min-height:145.128205vw}
}

/* The frame: sections stack in Figma's order; overlays position against it. */
.brave-frame{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%}


/* Accessibility: motion is opt-out. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

.screen-reader-text{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}