/* Benito and Benito F heroes (A/B tested; js/carbon.benito.js picks one per visitor), the fixed nav they
   sit under, the icon tooltips and the cookie note. Loaded after the carbon.* stylesheets, so its nav rules win. */

  /* =====================================================================
     NAV (fixed; transparent over the hero, dark text once scrolled past it)
     ===================================================================== */
  .nav{
    position:fixed; z-index:2147483647; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:clamp(1rem,2vw,1.625rem) var(--gutter);
    transition:padding .25s var(--ease);
  }
  .logo{display:flex; flex-direction:column; align-items:flex-end; gap:.125rem}
  .logoMark{line-height:1}
  .logoSub{padding-right:10px; font-size:.625rem; font-style:italic; font-weight:500; line-height:1; letter-spacing:.06em; color:rgba(255,255,255,.72)}
  .logoMark{font-size:1.125rem; font-weight:600; color:#fff; letter-spacing:.02em}
  .logoMark span{color:var(--teal)}
  .nav-toggle{display:grid; place-items:center; padding:.5rem; border-radius:var(--radius-pill); color:var(--on-dark-2); cursor:pointer; transition:color .25s var(--ease), background .25s var(--ease)}
  .nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:#fff; background:var(--glass)}
  .nav-toggle > span{display:grid; gap:4px}
  .nav-toggle > span > span{display:block; width:18px; height:1.5px; border-radius:2px; background:currentColor}
  .navLinks{
    display:none; position:absolute; z-index:3; top:calc(100% + .75rem); right:var(--gutter); min-width:11rem;
    padding:.5rem; border:1px solid var(--glass-line); border-radius:var(--radius-md);
    background:rgba(8,14,16,.82); box-shadow:0 1.25rem 2.5rem -1rem rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .navLinks[data-open]{display:block}
  .navLinks a{display:block; padding:.625rem .875rem; border-radius:var(--radius-sm); font-size:1rem; color:var(--on-dark-2); transition:color .25s var(--ease), background .25s var(--ease)}
  .navLinks a:hover{color:#fff; background:var(--glass)}

  .nav.is-solid{padding-top:.75rem; padding-bottom:.75rem}
  .nav.is-solid .logoMark{color:var(--ink)}
  .nav.is-solid .logoSub{color:var(--ink-2)}
  .nav.is-solid .nav-toggle{color:var(--ink-2)}
  .nav.is-solid .nav-toggle:hover,.nav.is-solid .nav-toggle[aria-expanded="true"]{color:var(--ink); background:var(--s-soft)}
  .nav.is-solid .navLinks{background:#fff; border-color:var(--s-line); box-shadow:0 12px 28px -12px rgba(16,24,40,.25); -webkit-backdrop-filter:none; backdrop-filter:none}
  .nav.is-solid .navLinks a{color:var(--ink-2)}
  .nav.is-solid .navLinks a:hover{color:var(--ink); background:var(--s-soft)}

  @media (min-width:47.5625rem){
    .logoMark{font-size:1.625rem}
    .logoSub{font-size:.6875rem}
    .nav-toggle{display:none}
    .navLinks,.navLinks[data-open]{
      display:flex; position:static; align-items:center; gap:clamp(1.25rem,2.6vw,2.25rem); min-width:0;
      padding:0; border:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .navLinks a{padding:.25rem 0; border-radius:0; background:none; font-size:1.0625rem}
    .navLinks a:hover{background:none}
    /* Contact as an outlined secondary button */
    .navLinks a.navCta{padding:.5rem 1.125rem; border-radius:var(--radius-pill); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); transition:background .2s, color .2s, box-shadow .2s}
    .navLinks a.navCta:hover{background:rgba(255,255,255,.12); color:#fff}
    .nav.is-solid .navLinks{background:none; border:0; box-shadow:none}
    .nav.is-solid .navLinks a:hover{background:none}
    .nav.is-solid .navLinks a.navCta{color:var(--ink); box-shadow:inset 0 0 0 1px var(--s-line-strong)}
    .nav.is-solid .navLinks a.navCta:hover{background:var(--s-soft); color:var(--ink)}
  }
  @media (min-width:90.0625rem){ .logoMark{font-size:1.75rem} }

  [data-variant][hidden]{display:none}

/* top right of the nav (tablet and up): copy-email and chat icons in round outlines; white over a dark hero, ink once
   solid, brand blue on hover. Tooltips sit below; after copying, the email one turns green and says "Copied" */
.navActions{display:none; align-items:center; gap:.5rem}
@media (min-width:47.5625rem){ .navActions{display:flex} }
.navCopy,.navChat{position:relative; display:grid; place-items:center; width:2.5rem; height:2.5rem; padding:0; border-radius:50%; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); cursor:pointer; transition:color .2s, box-shadow .2s, opacity .25s, visibility 0s}
.navCopy svg,.navChat svg{width:1.25rem; height:1.25rem}
@media (min-width:90.0625rem){   /* large screens, with the bigger logo */
  .navCopy,.navChat{width:3rem; height:3rem}
  .navCopy svg,.navChat svg{width:1.5rem; height:1.5rem}
}
.nav.is-solid .navCopy,.nav.is-solid .navChat{color:var(--ink); box-shadow:inset 0 0 0 1px var(--s-line-strong)}   /* round outline */
.navCopy:hover,.navChat:hover,.nav.is-solid .navCopy:hover,.nav.is-solid .navChat:hover{color:var(--teal); box-shadow:inset 0 0 0 1px rgba(6,69,216,.35)}   /* brand blue, as the "Applications" label in box 2 */
.navCopy[data-tip]::after,.navChat[data-tip]::after{left:auto; right:0; bottom:auto; top:calc(100% + .25rem)}
.navCopy.done[data-tip]::after{opacity:1; transform:none; background:#0F9460; border-color:#0F9460; color:#fff}   /* "Copied": green, as the contact section's tick */
.navCopy.is-away{opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s}   /* over the contact section, which shows the address */
.navCopySaid{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* =====================================================================
   CHAT WIDGET: the docked agent window (js/carbon.demo.js) unfolds under the nav's chat button, and the
   button becomes a tab on the window: white, rounded on top, flowing into the title bar through a concave
   corner, like a folder tab. A bento-style panel (soft radius, hairline edge, soft shadow) with an
   Apple-style red close button on the left.
   The window opens without the top layer, so it uses the heroes' z-index (it comes after them in the page);
   the nav keeps the one above, so the tab (the button) is drawn over the panel's top edge.
   ===================================================================== */
.demoDock{z-index:2147483646; --dock-r:clamp(1rem,1.6vw,1.5rem); --chat-bg:#fff}   /* --chat-bg: the agent page's background (white) */
/* the title bar sits inside the window, over the chat itself, with no background of its own: the red close
   button fills the top-left corner (a circle as wide as the corner's curve, so it follows it exactly), and
   "Coffeesoft Agent" sits on the right */
.demoDock .demoBar{position:absolute; z-index:1; top:0; left:0; right:0; gap:.625rem; height:auto; padding:0 .875rem 0 0; background:none; border:0; pointer-events:none}
.demoDock .demoBar > *{pointer-events:auto}
.demoDock .demoClose{order:-1; display:grid; place-items:center; flex:none; width:calc(var(--dock-r) * 1.5); height:calc(var(--dock-r) * 1.5); margin:calc(var(--dock-r) * .25); padding:0; border-radius:50%;   /* 75% of the corner, centred on the corner's curve */
  background:#ff5f57; color:rgba(77,0,0,.8); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.demoDock .demoClose:hover{background:#ff6a62; color:rgba(77,0,0,.95)}
.demoDock .demoClose svg{display:block; width:62%; height:62%; margin:0}
.demoDock .demoTitle{margin:0 0 0 auto; font-size:.875rem; font-weight:300; text-align:right; color:var(--ink)}
.demoDock .demoFrame{background:var(--chat-bg); border-radius:var(--dock-r)}
@media (min-width:38.8125rem){
  /* --dock-top / --dock-right: the bottom edge and right edge of the chat button, measured when the window opens */
  .demoDock{
    inset:var(--dock-top,calc(var(--nav-space) + .25rem)) var(--dock-right,var(--gutter)) auto auto;
    height:min(clamp(24rem,62vh,36rem), calc(100dvh - var(--dock-top,6rem) - 1rem));
    border:0; border-radius:var(--dock-r) 0 var(--dock-r) var(--dock-r); background:var(--chat-bg); box-shadow:none; overflow:hidden;
    /* a hairline edge, a close contact shadow and a deep soft one: it floats a layer above the page */
    filter:drop-shadow(0 0 .5px rgba(8,21,68,.35)) drop-shadow(0 4px 8px rgba(8,21,68,.12)) drop-shadow(0 30px 44px rgba(8,21,68,.3));
    /* the motion: the window pours out of the chat button. Closed, it is clipped to a sliver as wide as the
       button, right under it; opening, the clip widens to the left and runs down to the full panel (springy ease
       out), while the content settles up a few px. Closing reverses it, quicker, back into the button.
       --tab-w: the button's width, measured with its position. The open clip reaches well past the edges, so the
       shadows show in full. */
    transform-origin:100% 0; transform:translateY(-6px); opacity:0;
    clip-path:inset(0 0 calc(100% - 2px) calc(100% - var(--tab-w,2.5rem)) round 0 0 calc(var(--tab-w,2.5rem) / 2) calc(var(--tab-w,2.5rem) / 2));
    transition:clip-path .3s cubic-bezier(.5,0,.75,0), transform .3s cubic-bezier(.5,0,.75,0), opacity .12s .18s linear,
               display .3s allow-discrete, overlay .3s allow-discrete;
  }
  .demoDock[open]{
    transform:none; opacity:1;
    clip-path:inset(-10rem -10rem -10rem -10rem round 0);   /* well past the deep shadow (30px down + 44px blur), so none of it is cut */
    transition:clip-path .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), opacity .08s linear,
               display .55s allow-discrete, overlay .55s allow-discrete;
  }
  @starting-style{ .demoDock[open]{opacity:0; transform:translateY(-6px);
    clip-path:inset(0 0 calc(100% - 2px) calc(100% - var(--tab-w,2.5rem)) round 0 0 calc(var(--tab-w,2.5rem) / 2) calc(var(--tab-w,2.5rem) / 2))} }
  .demoDock .demoFrame{border-radius:var(--dock-r) 0 var(--dock-r) var(--dock-r)}
}
/* the full-size demo window (opened from the sections): a slim white title bar. The red close light and the blue
   "open in a new tab" light fill its top corners (circles as wide as the window's corner curve), the title sits in the centre */
.demo:not(.demoDock){border:0; box-shadow:0 0 0 1px rgba(8,21,68,.13), 0 2.5rem 5rem -1.5rem rgba(8,21,68,.45)}   /* the edge drawn outside the box, so the corner lights sit right in the corners */
.demo:not(.demoDock) .demoBar{gap:0; padding:0; background:#fff; border-bottom:1px solid var(--s-line)}
.demo:not(.demoDock) .demoTitle{margin:0 auto; font-size:.875rem; font-weight:400; color:var(--ink)}   /* centred: the two corner lights are the same size */
.demo:not(.demoDock) .demoClose,.demo:not(.demoDock) .demoOut{position:relative; display:grid; place-items:center; flex:none; width:calc(var(--radius-panel) * 2); height:calc(var(--radius-panel) * 2); padding:0; border-radius:50%;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14); transition:filter .15s}
.demo:not(.demoDock) .demoClose{order:-1; background:#ff5f57; color:rgba(77,0,0,.85)}
.demo:not(.demoDock) .demoOut{background:#5eb4ff; color:rgba(0,38,96,.85)}
.demo:not(.demoDock) .demoClose:hover,.demo:not(.demoDock) .demoOut:hover{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14))}
.demo:not(.demoDock) .demoClose svg{width:1.25rem; height:1.25rem; stroke-width:3}   /* a bold x */
.demo:not(.demoDock) .demoOut svg{width:1.125rem; height:1.125rem; stroke-width:2.4}
.demo:not(.demoDock) .demoOut span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* "Open in a new tab" stays for screen readers */

/* both demo windows: a soft grey curve under the title (a background image, since the script sets the title's text) */
.demo .demoTitle{position:relative}
.demo .demoTitle::after{content:""; position:absolute; left:-4%; right:-4%; top:calc(100% + .05em); height:.45em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 2 Q 50 8 98 2' fill='none' stroke='%23c3c9d4' stroke-width='1.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat}

/* while it's open: the chat button is the window's tab, in the window's white (the email button stays above) */
body.chat-open .navChat,body.chat-open .nav.is-solid .navChat,body.chat-open .nav.is-solid .navChat:hover{
  border-radius:50% 50% 0 0; background:#fff; color:var(--teal); box-shadow:none;
  /* the same lift as the window; clipped at the tab's foot so it doesn't fall across the seam with the window */
  filter:drop-shadow(0 0 .5px rgba(8,21,68,.35)) drop-shadow(0 -4px 10px rgba(8,21,68,.14));
  clip-path:inset(-3rem -3rem 0 -3rem)}
/* the concave corner where the tab meets the window's top edge */
.navChat::before{content:""; position:absolute; left:-.75rem; bottom:0; width:.75rem; height:.75rem; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 0 0, transparent .75rem, #fff calc(.75rem + .5px)); transition:opacity .2s}
body.chat-open .navChat::before{opacity:1}
/* the button eases into the tab shape and back */
.navCopy,.navChat{transition:color .2s, background-color .25s, border-radius .3s cubic-bezier(.22,1,.36,1), box-shadow .2s, opacity .25s, visibility 0s}
@media (prefers-reduced-motion:reduce){ .demoDock,.demoDock[open]{transition:none} }
body.chat-open .navChat[data-tip]::after{display:none}
body.chat-open .navCopy,body.chat-open .nav.is-solid .navCopy{box-shadow:none}   /* just the email glyph next to the tab */

  /* =====================================================================
     SHARED: room under the nav, tooltips
     ===================================================================== */
  :root{--nav-space:calc(clamp(1rem,2vw,1.625rem) * 2 + 2.5rem)}   /* room under the nav for panel labels/text */
  @media (max-width:47.5rem){ :root{--nav-space:4.25rem} }
  [data-tip]::after{
    content:attr(data-tip); position:absolute; z-index:3; bottom:calc(100% + .5rem); left:0;
    padding:.375rem .625rem; border:1px solid var(--glass-line); border-radius:var(--radius-sm);
    background:rgba(8,14,16,.88); color:#fff; font-size:.8125rem; line-height:1.3; white-space:nowrap; pointer-events:none;
    opacity:0; transform:translateY(.25rem); transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  @media (hover:hover){ [data-tip]:hover::after{opacity:1; transform:none} }
  [data-tip]:focus-visible::after{opacity:1; transform:none}

  /* =====================================================================
     VARIANT: benito — a full-viewport bento grid (after a restaurant-software
     reference): the title and feature icons on top, six cards below and the
     CTA bottom left. Light grey page, navy ink, brand blue accent.
     ===================================================================== */
  :has(> .bn:not([hidden])) > .intro{display:none}
  .bn{
    --bn-bg:#fff; --bn-card:#f4f5f8; --bn-soft:#e9ecf2; --bn-dark:#0d1636; --bn-acc:#0645d8; --bn-r:clamp(1rem,1.6vw,1.5rem); --bn-gap:clamp(.625rem,1.2vw,1.125rem);
    position:relative; z-index:2147483646; isolation:isolate;
    display:flex; flex-direction:column; gap:clamp(1rem,2.4vh,1.75rem);
    height:100svh; min-height:40rem;
    padding:calc(var(--nav-space) + clamp(.25rem,1vh,.75rem)) var(--gutter) var(--gutter);
    background:var(--bn-bg); color:var(--ink);
  }
  .bn h2,.bn p,.bn figure,.bn ul,.bn dl,.bn dd{margin:0}
  .bn ul{padding:0; list-style:none}

  /* top: title + features */
  .bnTop{display:flex; align-items:flex-start; justify-content:space-between; gap:2rem}
  .bnTitle{margin:0; font-size:clamp(2.25rem,4.6vw,4.75rem); font-weight:400; line-height:1.04; letter-spacing:-.035em; color:var(--ink)}
  .bnMark{position:relative; display:inline-block}
  .bnMark svg{position:absolute; left:-12%; top:-30%; width:124%; height:160%; overflow:visible; pointer-events:none}
  .bnMark path{fill:none; stroke:var(--bn-acc); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.75;
    stroke-dasharray:1200; stroke-dashoffset:1200}
  .bn:not([hidden]) .bnMark path{animation:bn-draw 1.4s .35s var(--ease) forwards}
  @keyframes bn-draw{to{stroke-dashoffset:0}}
  .bnFeat{flex:none; width:min(21rem,30%); padding-top:20px}
  .bn .bnIcons{display:flex; gap:.5rem; margin-bottom:0; padding-bottom:20px}   /* .bn ul resets padding, so this needs the extra class */
  .bnIcons li{position:relative}
  .bnIcon{position:relative; display:grid; place-items:center; width:2.75rem; height:2.75rem; border:0; border-radius:50%; background:var(--bn-card); color:var(--ink); cursor:help; transition:background .2s, color .2s}
  .bnIcon:hover,.bnIcon:focus-visible{background:var(--ink); color:#fff}
  .bnIcon svg{width:1.25rem; height:1.25rem}
  .bnIcon[data-tip]::after{left:50%; transform:translate(-50%,.25rem)}   /* above the icon, centred */
  @media (hover:hover){ .bnIcon[data-tip]:hover::after{transform:translate(-50%,0)} }
  .bnIcon[data-tip]:focus-visible::after{transform:translate(-50%,0)}
  .bnIcons li:last-child .bnIcon[data-tip]::after{left:auto; right:0; transform:translateY(.25rem)}
  @media (hover:hover){ .bnIcons li:last-child .bnIcon[data-tip]:hover::after{transform:none} }
  .bnLede{font-size:clamp(.9375rem,1.1vw,1.0625rem); line-height:1.5; color:var(--ink)}

  /* grid */
  .bnGrid{flex:1; min-height:0; display:grid; gap:var(--bn-gap); grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr))}
  .bnCard{position:relative; overflow:hidden; min-height:0; border-radius:var(--bn-r); background:var(--bn-card)}
  .bnCard--dark{background:var(--bn-dark); color:#fff}
  .bnCard h2{font-size:clamp(1.125rem,1.5vw,1.5rem); font-weight:500; letter-spacing:-.02em; line-height:1.15}
  .bnTag{position:absolute; z-index:2; top:1rem; left:1rem; padding:.3125rem .625rem; border-radius:50px; background:#fff; font-size:.75rem; font-weight:500; color:var(--ink-2)}

  /* 1: hardware */
  .bnHw{background:radial-gradient(120% 90% at 50% 100%,#e9ecf3,var(--bn-card) 62%)}
  .bnHwStage{position:absolute; inset:14% 8% 8%}
  /* one machine at a time: the old one collapses into itself (fast), the next pops out */
  .bnHwImg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom;
    filter:drop-shadow(0 16px 20px rgba(8,21,68,.26));
    opacity:0; transform:scale(.15) rotate(-14deg); clip-path:circle(8% at 50% 60%);
    transition:transform .32s cubic-bezier(.55,0,.8,.3), opacity .2s .12s, clip-path .32s cubic-bezier(.55,0,.8,.3);
  }
  .bnHwImg.is-on{
    opacity:1; transform:none; clip-path:circle(80% at 50% 60%);
    transition:transform .42s .18s cubic-bezier(.3,1.6,.55,1), opacity .12s .18s, clip-path .42s .18s cubic-bezier(.3,1.2,.55,1);
  }
  .bnHwImg--rack{inset:12% 0 20%; object-position:center}   /* the rack sits a little higher than the tower */

  /* 2: applications, with the two bites out of the top and bottom edges */
  .bnApps{
    grid-column:span 2; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:0; padding:clamp(1rem,2vw,2rem);
    -webkit-mask:radial-gradient(circle 1.4rem at 50% -.35rem,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 1.4rem at 50% calc(100% + .35rem),#0000 98%,#000) bottom/100% 51% no-repeat;
            mask:radial-gradient(circle 1.4rem at 50% -.35rem,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 1.4rem at 50% calc(100% + .35rem),#0000 98%,#000) bottom/100% 51% no-repeat;
  }
  .bnSlides{position:relative; display:flex; flex-direction:column; gap:.625rem; height:100%; min-height:0; justify-content:center; padding-right:64px}
  .bnSlideLabel{align-self:flex-start; padding:.25rem .625rem; border-radius:50px; background:#fff; font-size:.75rem; font-weight:500; color:var(--ink-2)}
  .bnSlideStage{position:relative; flex:0 1 13rem; min-height:8rem}
  .bnSlide{position:absolute; inset:0; opacity:0; transform:translateY(.5rem); transition:opacity .5s var(--ease), transform .5s var(--ease)}
  .bnSlide.is-on{opacity:1; transform:none}
  .bnWin{height:100%; overflow:hidden; border:1px solid var(--s-line); border-radius:.75rem; background:#fff; box-shadow:0 10px 24px -14px rgba(8,21,68,.3); font-size:.75rem}
  .bnWinBar{display:flex; align-items:center; gap:.3rem; padding:.5rem .625rem; border-bottom:1px solid var(--s-line); background:var(--s-soft)}
  .bnWinBar i{width:.4375rem; height:.4375rem; border-radius:50%; background:var(--s-line-strong)}
  .bnWinBar span{margin-left:.375rem; font-size:.6875rem; color:var(--ink-2)}
  .bnChat{display:flex; flex-direction:column; gap:.4rem; padding:.625rem}
  .bnChat p{max-width:85%; padding:.4rem .6rem; border-radius:.625rem; line-height:1.35}
  .bnChat .me{align-self:flex-end; background:var(--ink); color:#fff}
  .bnChat .ai{background:var(--bn-soft); color:var(--ink)}
  .bnCode{margin:0; padding:.625rem .75rem; font:500 .6875rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink-2); white-space:pre}
  .bnCode b{color:var(--bn-acc); font-weight:600}
  .bnAgent{display:flex; align-items:center; gap:.4rem; margin:0 .75rem; padding:.375rem .5rem; border-radius:.5rem; background:#e9f7ef; color:#16794a; font-weight:500}
  .bnAgent span{width:.4375rem; height:.4375rem; border-radius:50%; background:#1faa63}
  .bnTickets li{display:flex; align-items:center; gap:.5rem; padding:.45rem .625rem; border-bottom:1px solid var(--s-line)}
  .bnTickets i{display:grid; place-items:center; flex:none; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--bn-soft); font-style:normal; font-size:.5625rem; font-weight:600; color:var(--ink-2)}
  .bnTickets span{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink)}
  .bnTickets em{padding:.125rem .4rem; border-radius:50px; background:#fff4de; font-style:normal; font-size:.625rem; color:#a2640b}
  .bnTickets em.ok{background:#e9f7ef; color:#16794a}
  /* voice agent call */
  .bnLive{margin-left:auto; padding:.0625rem .375rem; border-radius:50px; background:#fde8e8; font-size:.5625rem; font-weight:700; letter-spacing:.06em; color:#d0342c}
  .bnCall{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.5rem .625rem; padding:.625rem .75rem}
  .bnCallAvatar{position:relative; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:linear-gradient(145deg,#6f95ff,#0645d8)}
  .bnCallAvatar svg{width:70%; height:70%; fill:rgba(255,255,255,.92)}
  .bnCallAvatar::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(6,69,216,.35); animation:bn-ring 1.6s ease-out infinite}
  @keyframes bn-ring{from{transform:scale(.9); opacity:1} to{transform:scale(1.25); opacity:0}}
  .bnCallName{font-weight:600; color:var(--ink)}
  .bnCallName span{margin-left:.3rem; font-weight:500; color:var(--muted)}
  .bnWave{display:flex; align-items:center; gap:2px; height:1rem; margin-top:.25rem}
  .bnWave i{width:3px; height:100%; border-radius:2px; background:var(--bn-acc); transform-origin:center; animation:bn-wave .9s ease-in-out infinite alternate}
  .bnWave i:nth-child(3n){animation-duration:.7s} .bnWave i:nth-child(3n+1){animation-duration:1.1s; animation-delay:-.3s} .bnWave i:nth-child(4n){animation-delay:-.5s}
  @keyframes bn-wave{from{transform:scaleY(.2)} to{transform:scaleY(1)}}
  .bnCallLine{grid-column:1 / -1; padding:.4rem .6rem; border-radius:.625rem; background:var(--bn-soft); line-height:1.35; color:var(--ink)}
  .bnCallBtns{grid-column:1 / -1; display:flex; align-items:center; gap:.375rem}
  .bnCallBtn{display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--bn-soft); color:var(--ink-2)}
  .bnCallBtn svg{width:55%; height:55%}
  .bnCallBtn--end{background:#e5484d; color:#fff}
  .bnCallBtns em{margin-left:auto; font-style:normal; font-variant-numeric:tabular-nums; color:var(--muted)}
  .bnSearch{margin:.625rem .625rem .375rem; padding:.4rem .6rem; border:1px solid var(--s-line-strong); border-radius:.5rem; color:var(--ink)}
  .bnHits li{display:grid; grid-template-columns:1fr 3.5rem; align-items:center; gap:.5rem; padding:.35rem .625rem; color:var(--ink)}
  .bnHits b{height:.3125rem; border-radius:3px; background:linear-gradient(90deg,var(--bn-acc) var(--w),var(--s-line) var(--w))}
  .bnDots{display:flex; gap:.3rem}
  .bnDots i{width:.375rem; height:.375rem; border-radius:50%; background:var(--s-line-strong); transition:width .3s var(--ease), background .3s}
  .bnDots i.is-on{width:1.125rem; border-radius:3px; background:var(--ink)}
  .bnAppsCopy{position:relative; padding-left:40px}
  .bnKicker{display:inline-block; margin-bottom:.75rem; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bn-acc)}
  .bnAppsCopy h2{margin-bottom:.75rem; font-size:clamp(1.625rem,2.6vw,2.75rem); line-height:1; letter-spacing:-.035em}
  .bnAppsCopy p{max-width:28ch; margin-bottom:1rem; font-size:clamp(.8125rem,.95vw,.9375rem); line-height:1.5; color:var(--ink-2)}
  .bnAppTiles{display:flex; gap:.375rem}
  .bnAppTiles li{
    display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.625rem; background:#fff; color:var(--ink-2);
    box-shadow:0 1px 2px rgba(16,24,40,.06); transition:background .3s, color .3s, transform .3s var(--ease);
  }
  .bnAppTiles li.is-on{background:var(--ink); color:#fff; transform:translateY(-3px)}
  .bnAppTiles svg{width:1.125rem; height:1.125rem}
  .bnAppTiles .bnMore{background:none; box-shadow:inset 0 0 0 1px var(--s-line-strong); color:var(--ink-2)}
  .bnDoodle{position:absolute; left:-2.35rem; top:.2rem; width:3.5rem; height:auto; overflow:visible}   /* level with the "Applications" label, across the card's centre line */
  .bnDoodle path{fill:none; stroke:var(--bn-acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.7}

  /* 3: fully owned */
  .bnOwn{padding:clamp(1rem,1.6vw,1.5rem)}
  .bnOwn > p{margin-top:.375rem; font-size:.875rem; color:rgba(255,255,255,.66)}
  .bnPrinter{
    position:absolute; left:50%; top:clamp(5.25rem,32%,7.5rem); width:min(80%,16rem); padding-top:10px; transform:translateX(-50%);
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.35));
  }
  .bnPrinter::before{content:""; position:absolute; z-index:1; left:-12px; right:-12px; top:0; height:12px; border-radius:8px; background:#050a1f; box-shadow:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08)}
  .bnPaper{
    position:relative; margin:0 5px; padding:1rem .875rem 1.25rem; background:#fff; color:#1b2733;
    font:500 .625rem/1.75 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  /* feed out of the slot: the paper slides down inside a fixed window (only transform animates, so it can't
     drift out of step with a crop on a busy page) */
  .bnFeed{overflow:hidden}
  .bn:not([hidden]) .bnPaper{animation:bn-feed 1s .3s steps(28) both}
  @keyframes bn-feed{from{transform:translateY(-100%)} to{transform:none}}
  .bnPaper .c{text-align:center}
  .bnPaper .co{font-weight:700; font-size:.6875rem; letter-spacing:.02em}
  .bnPaper .sub{color:#5b6875}
  .bnPaper hr{margin:.5rem 0; border:0; border-top:1px dashed #a9b2bc}
  .bnPaper .row{display:flex; align-items:baseline; gap:.375rem}
  .bnPaper .row span:nth-child(2){flex:1; border-bottom:1px dotted #b7c0c9; transform:translateY(-3px)}
  .bnPaper .row span:last-child{white-space:nowrap}
  .bnPaper .zero span:last-child{font-weight:700}
  .bnPaper .total{padding:.125rem 0; font-size:.6875rem; font-weight:700; text-align:center}
  .bnPaper .bar{height:1.75rem; margin:.625rem .5rem 0; background:repeating-linear-gradient(90deg,#1b2733 0 2px,transparent 2px 4px,#1b2733 4px 5px,transparent 5px 8px,#1b2733 8px 11px,transparent 11px 12px,#1b2733 12px 13px,transparent 13px 16px)}
  @media (prefers-reduced-motion:reduce){ .bn .bnPaper{animation:none} }

  /* CTA */
  .bnCta{display:flex; flex-direction:column; justify-content:center; gap:clamp(1rem,3vh,2.25rem); padding:0 0 .25rem}
  .bnShapes{width:min(14rem,95%); height:auto}
  .bnShapes .ink{fill:var(--ink)} .bnShapes .paper{fill:var(--bn-soft)}
  /* free-floating shapes: the database, shield and profit arrow each drift on a small loose loop
     (units are the graphic's viewBox, about 1.4px each), at their own speeds so they never sync.
     The same classes sit on the Benito F shadow, clip and glass copies, so those move as one */
  .bnDrift1,.bnDrift2,.bnDrift3{animation:bn-drift1 9s linear infinite}
  .bnDrift2{animation-name:bn-drift2; animation-duration:11s; animation-delay:-4s}
  .bnDrift3{animation-name:bn-drift3; animation-duration:8s; animation-delay:-2s}
  @keyframes bn-drift1{0%{translate:1.60px 0.00px} 8.33%{translate:1.73px 0.60px} 16.67%{translate:1.15px 1.04px} 25%{translate:0.00px 1.20px} 33.33%{translate:-1.15px 1.04px} 41.67%{translate:-1.73px 0.60px} 50%{translate:-1.60px 0.00px} 58.33%{translate:-1.04px -0.60px} 66.67%{translate:-0.45px -1.04px} 75%{translate:-0.00px -1.20px} 83.33%{translate:0.45px -1.04px} 91.67%{translate:1.04px -0.60px} 100%{translate:1.60px -0.00px}}
  @keyframes bn-drift2{0%{translate:1.20px 0.00px} 8.33%{translate:0.69px 0.85px} 16.67%{translate:0.25px 1.47px} 25%{translate:0.00px 1.70px} 33.33%{translate:-0.25px 1.47px} 41.67%{translate:-0.69px 0.85px} 50%{translate:-1.20px 0.00px} 58.33%{translate:-1.39px -0.85px} 66.67%{translate:-0.95px -1.47px} 75%{translate:-0.00px -1.70px} 83.33%{translate:0.95px -1.47px} 91.67%{translate:1.39px -0.85px} 100%{translate:1.20px -0.00px}}
  @keyframes bn-drift3{0%{translate:1.50px 0.00px} 8.33%{translate:1.56px 0.70px} 16.67%{translate:1.01px 1.21px} 25%{translate:0.00px 1.40px} 33.33%{translate:-1.01px 1.21px} 41.67%{translate:-1.56px 0.70px} 50%{translate:-1.50px 0.00px} 58.33%{translate:-1.04px -0.70px} 66.67%{translate:-0.49px -1.21px} 75%{translate:-0.00px -1.40px} 83.33%{translate:0.49px -1.21px} 91.67%{translate:1.04px -0.70px} 100%{translate:1.50px -0.00px}}
  @media (prefers-reduced-motion:reduce){ .bnDrift1,.bnDrift2,.bnDrift3{animation:none} }
  .bnCtaLink{display:flex; align-self:center; align-items:flex-end; gap:8px; color:var(--ink)}   /* centred in its column; the shapes stay left */
  .bnPills{display:flex; flex-direction:column; align-items:flex-start}
  .bnPills span{padding:.75rem 1.5rem; border-radius:50px; background:var(--bn-card); font-size:clamp(1.25rem,1.6vw,1.625rem); line-height:1.25}
  .bnPills span + span{margin-top:6px; align-self:flex-end}   /* a small gap: the pills close it when they bump */
  .bnGo{display:grid; place-items:center; flex:none; width:3.75rem; height:3.75rem; border-radius:50%; background:var(--bn-acc); color:#fff; transition:transform .3s var(--ease)}
  .bnGo svg{width:1.625rem; height:1.625rem}
  .bnCtaLink:hover .bnGo{transform:translateX(4px)}
  /* a slight vertical bob on the CTA pills, the chat button and the card chips. It uses `translate`, so the
     button's hover nudge (transform) still works; the phases are staggered so nothing moves in lockstep */
  .bnGo, .bnTag{animation:bn-bob 3.6s ease-in-out infinite alternate}
  /* the two CTA pills: 1s after load they drift together and bump, each rebound smaller,
     until they settle touching at about 10s. Offsets: 3px each way closes the 6px gap */
  .bnPills span{animation:bn-bump-a 9s 1s both; transform-origin:50% 100%}
  .bnPills span + span{animation-name:bn-bump-b; transform-origin:50% 0}
  @keyframes bn-bump-a{
    0%{translate:0 0px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    16%{translate:0 3px; scale:1 0.96; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    34%{translate:0 0.8px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    48%{translate:0 3px; scale:1 0.975; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    62%{translate:0 1.5px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    72%{translate:0 3px; scale:1 0.99; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    81%{translate:0 2.1px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    88%{translate:0 3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    93%{translate:0 2.55px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    97%{translate:0 3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    100%{translate:0 3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
  }
  @keyframes bn-bump-b{
    0%{translate:0 0px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    16%{translate:0 -3px; scale:1 0.96; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    34%{translate:0 -0.8px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    48%{translate:0 -3px; scale:1 0.975; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    62%{translate:0 -1.5px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    72%{translate:0 -3px; scale:1 0.99; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    81%{translate:0 -2.1px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    88%{translate:0 -3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    93%{translate:0 -2.55px; scale:1 1; animation-timing-function:cubic-bezier(.55,0,.9,.5)}
    97%{translate:0 -3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
    100%{translate:0 -3px; scale:1 1; animation-timing-function:cubic-bezier(.1,.6,.35,1)}
  }
  .bnGo{animation-delay:-2.4s}
  .bnCard:nth-child(2n) .bnTag{animation-delay:-1.8s}
  .bnCard:nth-child(3n) .bnTag{animation-delay:-.9s}
  @keyframes bn-bob{from{translate:0 -2px} to{translate:0 2px}}
  @media (prefers-reduced-motion:reduce){ .bnPills span, .bnPills span + span, .bnGo, .bnTag{animation:none} .bnPills span + span{margin-top:0} }   /* no motion: start where the bump settles */

  /* 4: data */
  .bnDb{display:grid; place-items:end center; padding:3.25rem clamp(.875rem,1.6vw,1.5rem) clamp(.875rem,1.6vw,1.5rem)}
  .bnCard--dark .bnTag{background:rgba(255,255,255,.1); color:rgba(255,255,255,.85)}
  .bnPanel{width:100%; max-height:100%; overflow:hidden; padding:.75rem; border-radius:.75rem; background:#fff; color:var(--ink); font-size:.6875rem}
  .bnPanelTitle{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; padding-bottom:6px; font-size:.8125rem; font-weight:600}
  .bnPanelTitle span{display:flex; align-items:center; gap:.3rem; font-size:.625rem; font-weight:500; color:#16794a}
  .bnPanelTitle span::before{content:""; width:.375rem; height:.375rem; border-radius:50%; background:#1faa63; animation:bn-pulse 1.6s infinite}
  @keyframes bn-pulse{50%{opacity:.3}}
  /* training progress: fills as the model learns the procedures below, then starts the next run */
  .bnTrain{margin-bottom:.5rem; padding:.4rem .5rem .45rem; border-radius:.4rem; background:var(--bn-soft)}
  .bnTrain p{display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.3rem; font-size:.625rem; color:var(--ink-2); white-space:nowrap}
  .bnTrain p span{overflow:hidden; text-overflow:ellipsis}
  .bnTrain b{font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
  .bnTrain.is-done b{color:#16794a}
  .bnTrain i{position:relative; display:block; height:5px; overflow:hidden; border-radius:3px; background:#fff}
  .bnTrain em{position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:inherit; transition:width .7s var(--ease);
    background:linear-gradient(90deg,#6f95ff,var(--bn-acc)); overflow:hidden}
  .bnTrain em::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); animation:bn-shine 1.4s linear infinite}
  .bnTrain.is-done em{background:#1faa63}
  .bnTrain.is-done em::after{animation:none}
  @keyframes bn-shine{to{transform:translateX(100%)}}
  .bnTable{width:100%; border-collapse:collapse; table-layout:fixed}
  .bnTable th{padding:.25rem .3rem; border-bottom:1px solid var(--s-line); font-weight:500; text-align:left; color:var(--muted)}
  .bnTable th:last-child,.bnTable td:last-child{text-align:right}
  .bnTable td{padding:.3rem; border-bottom:1px solid var(--s-line); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .bnTable tr.is-new td{animation:bn-row .6s var(--ease)}
  @keyframes bn-row{from{background:#e8efff}}
  .bnTable em{padding:.0625rem .35rem; border-radius:50px; font-style:normal; font-size:.5625rem; background:#e9f7ef; color:#16794a}
  .bnTable em.qa{background:#fff4de; color:#a2640b}
  .bnTable em.run{background:#e8efff; color:var(--bn-acc)}

  /* 5: off grid */
  .bnOff{display:flex; flex-direction:column; justify-content:flex-end; gap:.75rem; padding:3rem clamp(1rem,1.6vw,1.5rem) clamp(1rem,1.6vw,1.5rem)}
  .bnNet{width:calc(100% + 1.5rem); margin:0 -.75rem; flex:1 1 auto; min-height:0; overflow:visible}
  .bnNet .site{fill:#f8faff; stroke:#cddaf0; stroke-width:.85}
  .bnNet .netInset{fill:none; stroke:#e5ecf8; stroke-width:.6}
  .bnNet .lbl{font:600 6px var(--font-sans); letter-spacing:.13em; fill:#7284a6}
  .bnNet .netStatus{font:600 5.5px var(--font-sans); letter-spacing:.08em; fill:#29816b}
  .bnNet .link{fill:none; stroke:#d5dfef; stroke-width:1; stroke-linecap:round}
  .bnNet .netFlow{fill:none; stroke:#4c83ed; stroke-width:1.7; stroke-linecap:round; stroke-dasharray:13 100; stroke-dashoffset:13; opacity:0; animation:bn-net-flow 6s linear infinite; animation-delay:var(--phase,0s)}
  .bnNet .netGlow{fill:#e4edff; opacity:.65; transform-box:fill-box; transform-origin:center; animation:bn-net-breathe 6s ease-in-out infinite}
  .bnNet .node{stroke:#5174b6; stroke-width:.6; filter:drop-shadow(0 3px 4px rgba(20,48,100,.15))}
  .bnNet .nodeIcon{fill:none; stroke:#e5eeff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
  .bnNet .ok{fill:#68d2af}
  .bnNet .netDevice{fill:#fff; stroke:#b9c9e2; stroke-width:.8; filter:drop-shadow(0 2px 2px rgba(20,48,100,.05))}
  .bnNet .netDeviceIcon{fill:none; stroke:#7188ad; stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
  .bnNet .netScreen{fill:#eaf0fc; stroke:none}
  .bnNet .cloud{fill:none; stroke:#a9b5c9; stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
  .bnNet .cloudX{fill:none; stroke:#d9534f; stroke-width:1.4; stroke-linecap:round}
  .bnNet .netOutside{fill:none; stroke:#dce2ec; stroke-width:.85; stroke-dasharray:2 4}
  .bnNet .netAttempt{fill:none; stroke:#9eacc4; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:10 100; opacity:0; animation:bn-net-attempt 6s linear infinite}
  .bnNet .netShieldHalo{fill:#dce9ff; opacity:.25; transform-box:fill-box; transform-origin:center; animation:bn-net-shield 6s var(--ease) infinite}
  .bnNet .netShieldFace{fill:#fff; stroke:#b9cdeb; stroke-width:.85; filter:drop-shadow(0 2px 3px rgba(20,48,100,.1))}
  .bnNet .netShieldIcon{fill:#edf4ff; stroke:#426db2; stroke-width:1; stroke-linejoin:round}
  .bnNet .netCheck{fill:none; stroke:#2a927a; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
  .bnNet :is(.netFlow,.netGlow,.netAttempt,.netShieldHalo){animation-play-state:paused}
  .bnNet[data-running] :is(.netFlow,.netGlow,.netAttempt,.netShieldHalo){animation-play-state:running}
  @keyframes bn-net-flow{
    0%{stroke-dashoffset:13; opacity:0}
    8%{opacity:.8}
    46%{opacity:.8}
    56%,100%{stroke-dashoffset:-100; opacity:0}
  }
  @keyframes bn-net-breathe{0%,100%{transform:scale(.96); opacity:.45} 50%{transform:scale(1.05); opacity:.8}}
  @keyframes bn-net-attempt{
    0%,12%{stroke-dashoffset:10; opacity:0}
    20%{opacity:.65}
    45%{stroke-dashoffset:-90; opacity:.65}
    50%,100%{stroke-dashoffset:-100; opacity:0}
  }
  @keyframes bn-net-shield{0%,43%,76%,100%{transform:scale(1); opacity:.25} 54%{transform:scale(1.18); opacity:.65}}
  @media (prefers-reduced-motion:reduce){
    .bnNet :is(.netFlow,.netGlow,.netAttempt,.netShieldHalo){animation:none !important}
    .bnNet :is(.netFlow,.netAttempt){opacity:0}
  }
  .bnOffList{display:flex; justify-content:space-between; gap:clamp(.625rem,1.2vw,1.25rem)}   /* two points side by side, pushed to the edges, each on one line */
  .bnOffList li{display:flex; flex:0 1 auto; min-width:0; align-items:center; gap:.375rem; white-space:nowrap; font-size:clamp(.625rem,.78vw,.875rem); line-height:1.25; color:var(--ink)}   /* each point on one line; sized to fit side by side */
  .bnOffList span{display:grid; place-items:center; flex:none; width:1.5rem; height:1.5rem; border-radius:.375rem; background:#e8efff; color:var(--bn-acc)}
  .bnOffList svg{width:.9375rem; height:.9375rem}

  /* 6: admin panel: a device peeking in from the bottom right */
  .bnDevice{
    position:absolute; left:10%; top:calc(14% + 10px); width:125%; height:110%; display:flex; overflow:hidden;
    border:6px solid #1b1d24; border-radius:1rem; background:#fff; box-shadow:0 20px 40px -20px rgba(8,21,68,.5); font-size:.625rem;
  }
  .bnDevice aside{flex:none; width:32%; padding:.75rem .5rem; background:#12162a; color:rgba(255,255,255,.6)}
  .bnDevice aside p{padding:.3rem .4rem; border-radius:.375rem}
  .bnDevice aside p.is-on{background:rgba(255,255,255,.1); color:#fff}
  .bnDevice aside .bnDevLogo{margin-bottom:.5rem; font-size:.75rem; font-weight:600; color:#fff}
  .bnDevice aside .bnDevLogo span{color:var(--bn-acc)}
  .bnDevMain{flex:1; padding:.75rem; background:#fff}
  .bnDevTitle{margin-bottom:.5rem; font-size:.875rem; font-weight:600}
  /* audit log: entries stream in on top; each has a time, who, what and a type tag */
  .bnLogHead{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem}
  .bnLogHead .bnDevTitle{margin:0}
  .bnLogExport{padding:.15rem .5rem; border-radius:50px; background:var(--bn-card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--s-line)}
  .bnLogFilters{display:flex; gap:.25rem; margin-bottom:.4rem}
  .bnLogFilters span{padding:.1rem .45rem; border-radius:50px; color:var(--muted)}
  .bnLogFilters .is-on{background:var(--ink); color:#fff}
  .bnLog li{display:grid; grid-template-columns:auto auto auto 1fr; align-items:center; gap:.4rem; padding:.3rem 0; border-bottom:1px solid var(--s-line); white-space:nowrap}
  .bnLog li.is-new{animation:bn-row .9s var(--ease)}
  .bnLog time{font-variant-numeric:tabular-nums; color:var(--muted)}
  .bnLog i{display:grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--bn-soft); font-style:normal; font-size:.5rem; font-weight:700; color:var(--ink-2)}
  .bnLog i.ai{background:linear-gradient(145deg,#6f95ff,#0645d8); color:#fff}
  .bnLog em{padding:.05rem .35rem; border-radius:50px; font-style:normal; font-size:.5625rem; font-weight:600; background:var(--bn-soft); color:var(--ink-2)}
  .bnLog em.sign{background:#e9f7ef; color:#16794a}
  .bnLog em.ai{background:#e8efff; color:var(--bn-acc)}
  .bnLog em.change{background:#fff4de; color:#a2640b}
  .bnLog em.sec{background:#fde8e8; color:#d0342c}
  .bnLog span{overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
  .bnLogFoot{display:flex; align-items:center; gap:.3rem; margin-top:.45rem; color:#16794a; font-weight:600}
  .bnLogFoot svg{width:.75rem; height:.75rem}

  /* laptops (wide but short): everything still fits one screen, so sizes follow the viewport height too */
  @media (min-width:64.0625rem) and (max-height:56rem){
    .bn{gap:clamp(.625rem,2vh,1.25rem); padding-bottom:clamp(1rem,2.4vh,1.75rem)}
    .bnTitle{font-size:clamp(2rem,min(4.4vw,7.6vh),4.25rem)}
    .bnFeat{padding-top:clamp(.5rem,1.6vh,20px)}
    .bnIcon{width:clamp(2.25rem,5vh,2.75rem); height:clamp(2.25rem,5vh,2.75rem)}
    .bn .bnIcons{padding-bottom:clamp(.75rem,2vh,20px)}
    .bnLede{font-size:clamp(.8125rem,1.9vh,1rem); line-height:1.45}
    .bnTag,.bnSlideLabel{top:.75rem; left:.75rem; font-size:.6875rem}
    .bnApps{padding:clamp(.75rem,2vh,1.5rem)}
    .bnSlideStage{flex-basis:min(13rem,24vh); min-height:6.5rem}
    .bnWin{font-size:clamp(.625rem,1.45vh,.75rem)}
    .bnChat{gap:.3rem; padding:.5rem}
    .bnKicker{margin-bottom:.4rem; font-size:.6875rem}
    .bnAppsCopy h2{margin-bottom:.5rem; font-size:clamp(1.375rem,min(2.6vw,4.6vh),2.75rem)}
    .bnAppsCopy p{margin-bottom:.625rem; font-size:clamp(.75rem,1.7vh,.9375rem)}
    .bnAppTiles li{width:clamp(1.75rem,4vh,2.25rem); height:clamp(1.75rem,4vh,2.25rem)}
    .bnAppTiles svg{width:55%; height:55%}
    .bnOwn > p{font-size:clamp(.75rem,1.7vh,.875rem)}
    .bnPrinter{top:clamp(4.5rem,30%,7.5rem)}
    .bnPaper{font-size:clamp(.5rem,1.25vh,.625rem)}
    .bnCta{gap:clamp(.5rem,2vh,2.25rem)}
    .bnShapes{width:min(14rem,95%,24vh)}
    .bnPills span{padding:clamp(.5rem,1.2vh,.75rem) clamp(1rem,2.2vh,1.5rem); font-size:clamp(1rem,min(1.6vw,2.9vh),1.625rem)}
    .bnGo{width:clamp(2.75rem,6.4vh,3.75rem); height:clamp(2.75rem,6.4vh,3.75rem)}
    .bnGo svg{width:45%; height:45%}
    .bnDb{padding-top:2.75rem}
    .bnPanel{padding:.5rem .625rem; font-size:clamp(.5625rem,1.3vh,.6875rem)}
    .bnPanelTitle{margin-bottom:.3rem; font-size:clamp(.6875rem,1.5vh,.8125rem)}
    .bnTrain{margin-bottom:.3rem; padding:.3rem .45rem .35rem}
    .bnTable td{padding:.2rem .3rem}
    .bnOff{gap:.5rem; padding-top:2.5rem}
    .bnOffList{gap:.5rem}
    .bnOffList li{font-size:clamp(.625rem,min(.82vw,1.5vh),.875rem)}
    .bnOffList span{width:1.25rem; height:1.25rem}
    .bnDevice{font-size:clamp(.5rem,1.2vh,.625rem)}
  }
  /* narrower laptops: a little less padding inside the applications card */
  @media (min-width:64.0625rem) and (max-width:80rem){
    .bnSlides{padding-right:40px}
    .bnAppsCopy{padding-left:28px}
    .bnDoodle{display:none}
  }

  /* smaller screens: the page scrolls; two columns, then one */
  @media (max-width:64rem){
    .bn{height:auto; min-height:100svh}
    .bnGrid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(15rem,auto)}
    .bnCta{grid-column:1 / -1; order:10; flex-direction:row; align-items:flex-end; justify-content:space-between}
  }
  @media (max-width:40rem){
    .bnTop{flex-direction:column; gap:1.25rem}
    .bnFeat{width:auto}
    .bnGrid{grid-template-columns:1fr}
    .bnApps{grid-column:auto; grid-template-columns:1fr}
    .bnSlideStage{flex-basis:12rem}
    .bnShapes{display:none}
  }

  /* =====================================================================
     VARIANT: benitoF — Benito with frosted glass: soft brand-blue glows drift
     behind the grid, and the cards, pills, icons and buttons are translucent,
     blurred panes over them.
     ===================================================================== */
  .bnBlobs{position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none;
    /* the glows fade out towards the bottom, so the hero melts into the white section below */
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .bnBlobs i{position:absolute; border-radius:50%; filter:blur(140px); opacity:.18; animation:bn-drift 26s ease-in-out infinite alternate}
  .bnBlobs i:nth-child(1){width:42vw; height:42vw; left:-8vw; top:18%; background:#7ea2ff}
  .bnBlobs i:nth-child(2){width:36vw; height:36vw; right:-6vw; top:-10%; background:#a9c1ff; animation-duration:31s; animation-delay:-8s}
  .bnBlobs i:nth-child(3){width:30vw; height:30vw; left:38%; bottom:-14%; background:#0645d8; opacity:.06; animation-duration:23s; animation-delay:-4s}
  .bnBlobs i:nth-child(4){width:24vw; height:24vw; right:18%; bottom:10%; background:#9fd6ff; opacity:.15; animation-duration:35s; animation-delay:-14s}
  @keyframes bn-drift{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(6vw,-4vh) scale(1.12)}
    100%{transform:translate(-4vw,5vh) scale(.94)}
  }
  @media (prefers-reduced-motion:reduce){ .bnBlobs i{animation:none} }

  .bn--frost{--glass-bg:rgba(255,255,255,.42); --glass-edge:rgba(255,255,255,.7); --glass-blur:blur(18px) saturate(160%)}
  .bn--frost .bnCard,
  .bn--frost .bnIcon,
  .bn--frost .bnPills span,
  .bn--frost .bnTag,
  .bn--frost .bnSlideLabel,
  .bn--frost .bnAppTiles li{
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -18px rgba(8,21,68,.35);
  }
  .bn--frost .bnHw{background:var(--glass-bg)}
  /* the applications card: a stronger pane with a visible edge, so it stands off the backdrop
     (its mask clips outer shadows, so the definition comes from the fill and the inner edges) */
  .bn--frost .bnApps{
    background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.64));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  }
  /* the shadow sits on a wrapper: a drop-shadow there follows the masked shape, bites included */
  .bnAppsWrap{grid-column:span 2; display:grid; min-height:0;
    filter:drop-shadow(0 1px 1px rgba(8,21,68,.06)) drop-shadow(0 6px 12px rgba(8,21,68,.07)) drop-shadow(0 22px 38px rgba(8,21,68,.1))}
  .bnAppsWrap .bnApps{grid-column:auto}
  @media (max-width:40rem){ .bnAppsWrap{grid-column:auto} }
  /* dark frosted glass: translucent navy with a sheen, the glows still showing through */
  .bn--frost .bnCard--dark{
    /* heavier frost: fine grain + a stronger, colourless blur over see-through graphite */
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(150deg,rgba(120,156,255,.14),rgba(6,69,216,.24)); color:var(--ink);   /* clear glass, faint blue tinge, dark text */
    -webkit-backdrop-filter:blur(34px) saturate(0%); backdrop-filter:blur(34px) saturate(0%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.22), 0 14px 34px -18px rgba(0,0,0,.45);
  }
  .bn--frost .bnCard--dark > p{color:var(--ink-2)}
  .bn--frost .bnCard--dark .bnTag{background:rgba(255,255,255,.55); color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
  .bn--frost .bnIcon:hover,.bn--frost .bnIcon:focus-visible{background:rgba(8,21,68,.82); color:#fff}
  .bn--frost .bnAppTiles li.is-on{background:rgba(8,21,68,.85); color:#fff}
  .bn--frost .bnAppTiles .bnMore{background:rgba(255,255,255,.25)}
  .bn--frost .bnGo{background:rgba(6,69,216,.82); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px rgba(6,69,216,.6)}
  .bn--frost .bnShapes .paper{fill:rgba(255,255,255,.6)}
  /* glass shapes: the blur on the whole graphic is clipped to the shapes' outlines */
  .bnShapes--glass{-webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); -webkit-clip-path:url(#bnFShapesClip); clip-path:url(#bnFShapesClip)}
  .bn--frost .bnShapes--glass .paper{fill:url(#bnFGlassFill); stroke:rgba(255,255,255,.95); stroke-width:1.2}
  .bn--frost .bnShapes--glass .ink{fill:rgba(6,45,160,.62); stroke:rgba(255,255,255,.4); stroke-width:1.2}
  .bnShapesBox{position:relative; box-sizing:content-box; width:min(14rem,95%); padding-left:8px}
  .bnShapesBox .bnShapes{display:block; width:100%}
  /* a slight blue shadow: the same shapes, softly blurred, on a layer behind the glass */
  /* layered shadow under the database, shield and profit shapes: a wide soft ambient, a key shadow and a tight contact line */
  .bnShapesShadow{position:absolute; top:0; left:8px; width:calc(100% - 8px); height:auto; overflow:visible; pointer-events:none}
  .bnShadow--ambient{transform:translate(1px,9px) scale(1.02); filter:blur(12px)}
  .bnShadow--ambient *{fill:rgba(6,69,216,.08)}
  .bnShadow--key{transform:translate(.5px,4px); filter:blur(5px)}
  .bnShadow--key *{fill:rgba(6,69,216,.13)}
  .bnShadow--contact{transform:translateY(1.2px); filter:blur(1.3px)}
  .bnShadow--contact *{fill:rgba(6,69,216,.17)}
  /* the dark star casts a neutral grey shadow */
  .bnShadow--ambient .star{fill:rgba(30,32,38,.1)}
  .bnShadow--key .star{fill:rgba(30,32,38,.16)}
  .bnShadow--contact .star{fill:rgba(30,32,38,.2)}
  @media (min-width:64.0625rem) and (max-height:56rem){ .bnShapesBox{width:min(14rem,95%,24vh)} }
  @media (max-width:40rem){ .bnShapesBox{display:none} }
  .bn--frost .bnNet .site{fill:rgba(255,255,255,.5)}

  /* =====================================================================
     COOKIE NOTE: a small frosted notification drops in from the top 5s after load.
     "harmed" gets struck through in the same hand-drawn blue as the Benito arrow and
     circled word, then "used" appears. It leaves by itself or on the close button.
     ===================================================================== */
  .cookieNote{position:fixed; z-index:2147483647; top:14px; left:0; right:0; width:max-content; margin-inline:auto; display:flex; align-items:center; gap:.7rem;
    max-width:calc(100% - 32px); padding:15px .6rem 15px .75rem;   /* even top and bottom so the text centres on the icon; the top leaves room for the handwritten "used" */ border-radius:18px;
    background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:0 10px 30px rgba(13,22,54,.14), 0 1px 3px rgba(13,22,54,.08), inset 0 0 0 1px rgba(255,255,255,.6);
    color:#1b2033; font-size:.875rem; line-height:1.3; letter-spacing:-.005em;
    transform:translateY(calc(-100% - 20px)); opacity:0; visibility:hidden;   /* centred with auto margins, not translate(-50%), so it lands on whole pixels */
    transition:transform .6s cubic-bezier(.2,.9,.25,1.05), opacity .4s ease, visibility 0s .6s}
  .cookieNote.is-in{transform:none; opacity:1; visibility:visible; transition:transform .6s cubic-bezier(.2,.9,.25,1.05), opacity .4s ease, visibility 0s}
  .cookieNote > svg{flex:none; width:1.75rem; height:1.75rem}
  .cookieNote p{margin:0}
  .cookieNote del{position:relative; text-decoration:none}
  .cookieNote del svg{position:absolute; left:-8%; top:0; width:116%; height:100%; overflow:visible; pointer-events:none}
  .cookieNote del path{fill:none; stroke:#0645d8; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.75;
    stroke-dasharray:200; stroke-dashoffset:200}
  .cookieFix{position:relative; display:inline-block}
  /* the correction, written in above the struck word like a proofreader's note */
  .cookieNote ins{position:absolute; left:50%; bottom:78%; text-decoration:none; white-space:nowrap; color:#0645d8;
    font-family:"Segoe Print","Bradley Hand","Noteworthy","Comic Sans MS",cursive; font-size:.95em; line-height:1;
    opacity:0; transform:translate(-45%,3px) rotate(-6deg)}
  .cookieNote.is-struck del path{transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); stroke-dashoffset:0}
  .cookieNote.is-struck ins{transition:opacity .45s .45s ease, transform .45s .45s ease; opacity:1; transform:translate(-45%,0) rotate(-6deg)}
  .cookieNote button{flex:none; display:grid; place-items:center; width:1.5rem; height:1.5rem; margin-left:.15rem; padding:0; border:0; border-radius:50%;
    background:rgba(13,22,54,.06); color:#5b6275; cursor:pointer}
  .cookieNote button svg{display:block; width:12px; height:12px}   /* 1:1 with its 12-unit viewBox: whole pixels, so the x sits dead centre */
  @media (prefers-reduced-motion:reduce){
    .cookieNote, .cookieNote.is-in{transform:none; transition:opacity .3s ease, visibility 0s}
    .cookieNote.is-struck del path, .cookieNote.is-struck ins{transition:none}
  }

/* =====================================================================
   REQUEST A DEMO: a bento modal. Two tiles in a white card: a dark intro tile
   (title, what to expect, email) and a soft grey form tile with the contact
   section's fields. Desktop: centred, with min and max sizes. Phones: the full
   screen (100svh), the intro trimmed to its title and the form scrolling.
   ===================================================================== */
.rq{
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#86868b;            /* the section tokens the form styles expect */
  --rq-r:clamp(1rem,1.6vw,1.5rem); --rq-gap:.625rem;
  width:min(58rem, calc(100vw - 2rem)); max-width:none; max-height:none; padding:0; border:0; overflow:visible;
  background:none; color:var(--ink);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .25s ease, transform .3s cubic-bezier(.4,0,1,1), display .3s allow-discrete, overlay .3s allow-discrete;
}
.rq[open]{opacity:1; transform:none; transition:opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1), display .5s allow-discrete, overlay .5s allow-discrete}
@starting-style{ .rq[open]{opacity:0; transform:translateY(14px) scale(.985)} }
.rq::backdrop{background:rgba(8,21,68,.3); -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
  opacity:0; transition:opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete}
.rq[open]::backdrop{opacity:1}
@starting-style{ .rq[open]::backdrop{opacity:0} }
html:has(.rq[open]){overflow:hidden}                            /* the page holds still behind it */

.rq-card{
  position:relative; display:grid; grid-template-columns:minmax(15rem,.78fr) minmax(0,1.22fr); gap:var(--rq-gap); padding:var(--rq-gap);
  height:min(40rem, calc(100svh - 2rem)); min-height:min(33rem, calc(100svh - 2rem));
  border-radius:calc(var(--rq-r) + var(--rq-gap)); background:#fff;
  box-shadow:0 0 0 1px rgba(8,21,68,.06), 0 2px 6px rgba(8,21,68,.06), 0 40px 80px -24px rgba(8,21,68,.45);
}

/* intro tile: Benito's dark card, with a soft brand-blue glow in its top corner */
.rq-intro{
  position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden;
  padding:clamp(1.25rem,2.4vw,2rem);
  border-radius:var(--rq-r); color:#fff;
  background:radial-gradient(120% 70% at 100% 0, rgba(47,107,234,.45), transparent 62%), radial-gradient(90% 60% at 0 100%, rgba(47,107,234,.16), transparent 70%), #0d1636;
}
/* close: a red traffic light in the card's top right, centred on the form tile's corner curve (as on the chat window) */
.rq-close{
  position:absolute; z-index:1; top:calc(var(--rq-gap) + var(--rq-r) * .25); right:calc(var(--rq-gap) + var(--rq-r) * .25); display:grid; place-items:center;
  width:calc(var(--rq-r) * 1.5); height:calc(var(--rq-r) * 1.5); padding:0; border-radius:50%; cursor:pointer;
  background:#ff5f57; color:rgba(77,0,0,.8); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15); transition:background .15s;
}
.rq-close:hover{background:#ff6a62}
.rq-close svg{width:62%; height:62%}
.rq-kicker{font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8fb2ff}
.rq-title{margin:.75rem 0 0; font-size:clamp(1.75rem,2.7vw,2.5rem); font-weight:400; line-height:1.08; letter-spacing:-.035em; color:#fff}
.rq-title em{font-style:normal; color:#8fb2ff}
.rq-points{display:grid; gap:.75rem; margin:auto 0 0; padding:1.5rem 0 0}
.rq-points li{display:flex; align-items:center; gap:.75rem; font-size:.9375rem; line-height:1.35; color:rgba(255,255,255,.86)}
.rq-points span{display:grid; place-items:center; flex:none; width:1.625rem; height:1.625rem; border-radius:50%; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); color:#8fb2ff}
.rq-points svg{width:.875rem; height:.875rem}
.rq-alt{margin:1.25rem 0 0; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.1); font-size:.8125rem; color:rgba(255,255,255,.6)}
.rq-alt a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:.2em}
.rq-alt a:hover{text-decoration-color:#8fb2ff}

/* form tile: the bento grey card; white fields stand on it */
.rq-form{min-height:0; overflow:auto; padding:clamp(1.25rem,2.4vw,2rem); border-radius:var(--rq-r); background:#f4f5f8}
.rq .ct-form h3{margin:0 0 clamp(12px,2svh,20px); padding-right:calc(var(--rq-r) * 1.5); color:var(--ink)}   /* clear of the close button */
.rq .ct-field input,.rq .ct-field textarea{background:#fff}
.rq .ct-grid{grid-template-rows:auto auto minmax(6rem,1fr)}

/* tablet: the intro tile narrows */
@media (max-width:64rem){ .rq-card{grid-template-columns:minmax(13rem,.7fr) minmax(0,1.3fr)} .rq-points li{font-size:.875rem} }

/* phones: full screen; the intro shrinks to its title, the form fills and scrolls */
@media (max-width:47.5rem){
  .rq{width:100vw; height:100svh; max-height:100svh; margin:0; transform:translateY(24px)}
  .rq[open]{transform:none}
  @starting-style{ .rq[open]{transform:translateY(24px)} }
  .rq-card{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:100svh; min-height:0; border-radius:0; box-shadow:none}
  .rq-intro{padding:1rem calc(1.75rem + 1.75rem) 1.125rem 1.25rem}   /* room on the right for the close button */
  .rq-close{top:calc(var(--rq-gap) + 1rem); right:calc(var(--rq-gap) + 1rem); width:1.75rem; height:1.75rem}
  .rq-kicker{font-size:.6875rem}
  .rq-title{margin-top:.375rem; font-size:1.375rem}
  .rq-points,.rq-alt{display:none}
  .rq-form{padding:1.25rem 1.125rem}
  .rq .ct-grid{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto minmax(7rem,1fr)}
}

/* Benito F: the same card in frosted glass */
body[data-hero="benitoF"] .rq-card{background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%)}
body[data-hero="benitoF"] .rq-form{background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
body[data-hero="benitoF"] .rq-intro{background:radial-gradient(120% 70% at 100% 0, rgba(47,107,234,.5), transparent 62%), rgba(13,22,54,.9)}

@media (prefers-reduced-motion:reduce){ .rq,.rq[open],.rq::backdrop{transition:none} }