/* BNT Electronics - software */

/* NAV */
    .anim{--section-y:clamp(48px,5.4vw,88px);--section-y-tight:clamp(30px,3.2vw,50px);--section-y-loose:clamp(60px,6.6vw,104px);--sub-h:55px;--stick-h:133px}

/* LINKS / ARROWS */
    .page-fx{display:flex;}
@media(max-width:1080px){
      .bnt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
      .bnt-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
@media(max-width:680px){
      .bnt-grid--3,.bnt-grid--4{grid-template-columns:1fr}
    }
/* SECTION HEADS + HERO */
    
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-width:920px}

/* SPLIT (text + image) */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-10)}}
.chip{display:inline-flex;align-items:center;padding:9px 17px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-body);font-size:var(--text-md);font-weight:500}
/* IMAGE + LOGO PLACEHOLDERS - swap for real assets in the final pass */
    .img-ph{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;border:1px dashed var(--border-default);color:var(--text-subtle);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;min-height:300px}

.img-ph--ui{background:transparent;border:none;padding:0}
.card-thumb{min-height:0;aspect-ratio:16/9;border-radius:var(--radius-well)}
/* SUB-NAV */
    .sub-nav{position:sticky;top:var(--nav-h);z-index:40;}
[data-theme="dark"] .sub-nav{background:var(--surface-page)}
.sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px;-ms-overflow-style:none}

.subtab{padding:7px 15px;font-size:var(--text-md);font-weight:500;color:var(--text-muted);cursor:pointer;transition:var(--transition-colors);text-decoration:none}
.subtab:hover{color:var(--text-strong);background:var(--surface-hover)}
.subtab--active,.subtab--active:hover{background:#17539c;color:#fff}

/* SCROLL REVEALS */
    /* SCROLL REVEALS - opacity + individual translate/scale (composes with hover transform, exactly like Home); positive is-visible + reveal-all safety */
    
.img-ph.logo-ph,.logo-ph{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(20,40,80,.10);border-radius:var(--radius-plate);padding:14px 20px;overflow:hidden}
.stats-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0}
@media(max-width:760px){.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) 0}}
/* PINNED HOW-IT-WORKS STORY (matches Home's five-domains) */
    .story{position:relative}
.story-vp{position:sticky;top:var(--stick-h);min-height:calc(100vh - var(--stick-h));box-sizing:border-box;padding-top:var(--space-6);padding-bottom:var(--space-6);display:flex;align-items:center}
.story-item::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent,var(--blue-500,#1868e6));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.story-item h3{font-size:var(--text-2xl);color:var(--text-muted);letter-spacing:var(--tracking-tight)}
.story-item p{margin-top:0;color:var(--text-muted);line-height:var(--leading-normal);max-width:460px;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .5s var(--ease-out),margin .55s var(--ease-out)}
.story-item.is-active p{margin-top:var(--space-3);max-height:170px;opacity:1}
.story-dot.is-on{width:30px;background:var(--accent,var(--blue-500,#1868e6))}
.story-visuals{position:relative;height:min(64vh,540px);border-radius:var(--radius-story);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card)}
@media(max-height:820px) and (min-width:901px){.story-vp{padding-top:var(--space-5);padding-bottom:var(--space-5)}.story-item{padding-top:var(--space-2);padding-bottom:var(--space-2)}.story-item h3{font-size:var(--text-lg)}.story-item.is-active p{max-height:0;opacity:0;margin-top:0}.story-visuals{height:min(52vh,380px)}}
@media(max-width:900px){.story-vp{position:relative;top:auto;height:auto;padding:var(--section-y) 0}.story-item h3{color:var(--text-strong)}.story-item p{max-height:240px;opacity:1;margin-top:var(--space-3)}.story-item::before{transform:scaleY(1)}}
.anim main .mx-plain::after{display:none !important}
@media(prefers-reduced-motion:reduce){.anim main [data-mx]::after{display:none !important}}
/* 1.4.67: the Software hero's caption ("Illustrative screens") sits just under the drawn panels, not on them: inside the frame it covered the payroll panel's text. (0,3,2) over the caption rule's (0,2,2), so it does not depend on order.
   1.4.68: its room is reserved, not borrowed from the section's padding. Measured 320-1600px (tools/caption-room.html): 1.4.67 left 1px at 760px and narrower and was CLIPPED by 5px at 770-900px. At 960px and narrower (stacked hero) the frame now keeps 48px under it, so the caption box (27px, one line: it never wraps, a longer caption is cut short with an ellipsis instead) has at least its own height spare at every width. */
.anim main .hero-ui-art[data-cap]::before{top:calc(100% + 10px);bottom:auto;left:0}
@media(max-width:960px){.anim main .hero-ui-art[data-cap]{margin-bottom:48px}}

/* ==========================================================================
   ORDER-INDEPENDENCE (2A)
   Every declaration below already applies on this page. It applied because
   this file loads after style.css and won a tie on POSITION - and position is
   not something a stylesheet should depend on, because a CSS optimiser is
   entitled to move blocks. Each is restated here with an html prefix: one
   extra type selector, so it wins on SPECIFICITY instead. The values are
   unchanged - they are what the browser was already computing. Verified by
   rendering this page against the previous version and comparing every
   instance of every selector whose declarations were touched.
   Do not delete as redundant: without it these depend on file order again.
   ========================================================================== */
html .img-ph{display:flex}
html .sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px}
html .subtab{flex:none;padding:7px 15px}

/* ==========================================================================
   2A - `.img-ph` border pinned on specificity (1.4.10)

   style.css and this file both declare `border` on a bare `.img-ph`, both at
   specificity 10, so which one won was decided by load order alone. The pin
   below settles it on specificity instead.

   Why `:not(:has(img))` rather than a plain `html .img-ph`:
   style.css carries `.img-ph:has(img){border-color:transparent}`, and it is
   NOT html-prefixed. `:has()` takes the specificity of its argument, so that
   selector is (0,1,1) = 11 - a TIE with `html .img-ph`, which this later-
   loading sheet would then win, putting a dashed border around every
   photograph on the site. Measured in the browser, not calculated: the
   winner between those two flips when their order is swapped, which is what
   a tie looks like. (The 1.4.9 audit recorded that rule as specificity 20.
   It is not. A specificity taken on trust is how 1.4.7 happened.)

   Excluding frames that hold an image leaves `:has(img)` to own them by
   itself, and confines this pin to the empty placeholder frames whose value
   it actually is. At 12 it stays below `.img-ph.logo-ph` (20), so the logo
   plates keep their own border - also verified by swapping the order.

   The specificity-10 declaration above is deliberately LEFT IN PLACE, not
   moved here. A frame holding a photograph is excluded from this pin, so
   deleting the original made those frames fall through to style.css's
   `1px solid` and their border-style changed from dashed to solid - behind a
   transparent border-color, so invisible, but measured on 10 frames across
   9 pages, and 2A's contract is that nothing changes at all. It is not an
   intra-file duplicate to be cleaned up: the two declarations cover
   different element sets.

   Residual, recorded rather than fixed: on frames that DO hold a photograph
   the 10-versus-10 contest with style.css remains order-dependent, for
   border-width and border-style only, both of them behind a transparent
   colour. Nothing observable turns on it. ======================== */
html .img-ph:not(:has(img)){border:1px dashed var(--border-default)}