/*
Theme Name:   BeActive
Theme URI:    https://beactive.befree.com.au/
Description:  Marketing site theme for BeActive — employee activity tracking and workforce productivity SaaS. Child theme of Hello Elementor. Built to the BeActive website sitemap & SEO plan: every page in the plan has a template, a single target keyword, and its own meta and schema output. Global colours and fonts are declared once as CSS custom properties in :root so branding can be changed from one place.
Author:       BeFree
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  beactive
Tags:         business, saas, elementor
*/

/* ==========================================================================
   BeActive design system — dark
   --------------------------------------------------------------------------
   The site runs on a dark navy ground with the BeActive orange as its accent.
   The accent is taken FROM the logo, not applied TO it: #f15a24 is the mark's
   own colour, lifted straight out of the product logo, and the whole scale
   below is built around it. The logo files are never recoloured.

   Everything below references these tokens. Never hardcode a hex value in a
   page or an Elementor widget — change it here (the same values are pushed
   into Elementor's Global Colors by inc/setup.php) and it propagates sitewide.

   NOTE ON NAMES: these are --bx-accent-* rather than --bx-orange-* so the
   name stays true if the accent is ever re-keyed to a different brand colour.
   ========================================================================== */

:root {
  /* --- Accent: the logo orange -----------------------------------------
     #f15a24 is --bx-accent-500 and is exactly the hex in the logo SVG. The
     scale runs light-to-dark, but on a dark ground the *light* steps do the
     work text normally gives to the dark ones, so --bx-accent-strong is
     lighter than --bx-accent, not darker. Light bands flip it back.
     -------------------------------------------------------------------- */
  --bx-accent-100:    #fff1eb;
  --bx-accent-200:    #ffd6c6;
  --bx-accent-300:    #ffb193;
  --bx-accent-400:    #ff8a5c;
  --bx-accent-500:    #f15a24;   /* the logo mark */
  --bx-accent-600:    #d1400c;   /* gradient start */
  --bx-accent-700:    #a33108;
  --bx-accent-hot:    #ff9f45;   /* gradient end   */

  --bx-accent:        var(--bx-accent-500);
  --bx-accent-strong: var(--bx-accent-300);  /* text/links on dark */
  --bx-accent-soft:   rgba(241, 90, 36, .16);
  --bx-accent-line:   rgba(241, 90, 36, .36);
  --bx-accent-rgb:    241, 90, 36;

  /* The signature gradient, keeping the reference's 94.33deg two-stop shape
     but travelling within the logo's own family: deep orange to warm amber. */
  --bx-grad:          linear-gradient(94.33deg, var(--bx-accent-600) 0%, var(--bx-accent-hot) 100%);
  --bx-grad-soft:     linear-gradient(94.33deg, rgba(209, 64, 12, .20) 0%, rgba(255, 159, 69, .20) 100%);

  /* --- Navy ground ------------------------------------------------------ */
  --bx-navy-950:      #020224;   /* page ground        */
  --bx-navy-900:      #040428;
  --bx-navy-850:      #060633;   /* alternate band     */
  --bx-navy-800:      #0d0d38;
  --bx-navy-700:      #20203d;   /* card surface       */
  --bx-navy-600:      #2b2b4d;   /* raised / hairline  */

  /* --- Ink / neutrals ---------------------------------------------------
     --bx-ink stays the *dark surface* colour (it is used as a background in
     panels, buttons and code blocks). Heading text has its own token, since
     on a dark ground those two stopped being the same thing.
     -------------------------------------------------------------------- */
  --bx-ink:           var(--bx-navy-800);
  --bx-ink-2:         var(--bx-navy-900);
  --bx-ink-rgb:       2, 2, 36;
  --bx-heading:       #ffffff;
  --bx-body:          rgba(255, 255, 255, .70);
  --bx-muted:         rgba(255, 255, 255, .50);
  --bx-line:          rgba(255, 255, 255, .12);
  --bx-line-soft:     rgba(255, 255, 255, .07);
  --bx-surface:       var(--bx-navy-950);
  --bx-surface-2:     var(--bx-navy-850);
  --bx-surface-3:     var(--bx-navy-700);

  /* Card surfaces. Components reference these rather than the navy scale, so
     a light band can repaint every card by redefining two properties. */
  --bx-card:          var(--bx-navy-700);
  --bx-card-2:        var(--bx-navy-800);
  /* Channels of the current band's ground, for fades and masks. */
  --bx-surface-rgb:   2, 2, 36;

  /* --- Support --------------------------------------------------------- */
  --bx-star:          #ffb648;   /* rating stars — convention, not brand */

  /* Motion. One easing curve for the whole site, taken from the reference
     design (its --sk-cube-1). */
  --bx-ease-anim:     cubic-bezier(.18, .82, .41, 1);
  --bx-green:         #3ddc97;
  --bx-green-soft:    rgba(61, 220, 151, .14);
  --bx-blue:          #4f8bff;

  /* --- Type ------------------------------------------------------------ */
  --bx-font-head: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bx-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Layout ---------------------------------------------------------- */
  --bx-shell:       1180px;
  --bx-shell-wide:  1320px;
  --bx-shell-text:  760px;
  --bx-gutter:      clamp(1.15rem, 4vw, 2.5rem);
  --bx-radius:      16px;
  --bx-radius-lg:   26px;
  --bx-radius-pill: 999px;

  /* --- Vertical rhythm --------------------------------------------------
     One scale for the whole page. Section padding used to be 100px a side,
     which put 200px of empty space between every band and pushed the home
     page past 13 screens; these are the tightened values. Change the rhythm
     of the site from here rather than per-section.
     -------------------------------------------------------------------- */
  --bx-sp-section:       clamp(2.35rem, 4.3vw, 4.25rem);/* band padding      */
  --bx-sp-section-tight: clamp(1.85rem, 3.2vw, 2.85rem);/* tight band        */
  --bx-sp-head:          clamp(1.4rem, 2.3vw, 2.15rem); /* head -> content   */
  --bx-sp-block:         clamp(2rem, 3.6vw, 3.25rem);   /* stacked blocks    */
  --bx-sp-col:           clamp(2rem, 4vw, 3.75rem);     /* wide column gaps  */

  /* --- Elevation ------------------------------------------------------- */
  /* On a dark ground a drop shadow barely registers, so each step pairs a
     1px inner highlight (which reads as a lit edge) with a deep, wide,
     very dark shadow. */
  --bx-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .05),
                  0 2px 8px -4px rgba(0, 0, 0, .55);
  --bx-shadow:    inset 0 1px 0 rgba(255, 255, 255, .06),
                  0 12px 30px -12px rgba(0, 0, 0, .7);
  --bx-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .07),
                  0 34px 70px -28px rgba(0, 0, 0, .8),
                  0 0 60px -30px rgba(var(--bx-accent-rgb), .5);
  --bx-ring:      0 0 0 3px rgba(var(--bx-accent-rgb), .28);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bx-reveal, .bx-char { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* Ambient loops off: decorative, and the scan-line in particular is the
     kind of repeating movement this setting exists to stop. */
  .bx-eyebrow::before,
  .bx-grid > .bx-card::after,
  .bx-flow__node::before,
  .bx-flow__glyph::after,
  .bx-hero::after,
  .bx-cta > .bx-artpat { animation: none !important; }
  .bx-eyebrow::before,
  .bx-grid > .bx-card::after { display: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .bx-strip__track { animation: none !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--bx-surface);
  background-image:
    radial-gradient(58rem 34rem at 78% -8%, rgba(241, 90, 36, .20), transparent 62%),
    radial-gradient(44rem 30rem at 6% 4%, rgba(255, 159, 69, .09), transparent 66%);
  background-attachment: fixed;
  color: var(--bx-body);
  font-family: var(--bx-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.006em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--bx-font-head);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--bx-heading);
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.0625rem; letter-spacing: -.012em; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--bx-accent-strong); text-decoration: none; }
a:hover { color: var(--bx-accent-200); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; color: var(--bx-heading); }

hr { border: 0; border-top: 1px solid var(--bx-line); margin: 2.5rem 0; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: 3px; border-radius: 4px; }

.bx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bx-ink); color: #fff;
  padding: .8rem 1.1rem; border-radius: 0 0 var(--bx-radius) 0; font-weight: 600;
}
.bx-skip:focus { left: 0; text-decoration: none; }

.bx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.bx-shell {
  width: 100%;
  max-width: var(--bx-shell);
  margin-inline: auto;
  padding-inline: var(--bx-gutter);
}
.bx-shell--wide { max-width: var(--bx-shell-wide); }
.bx-shell--text { max-width: var(--bx-shell-text); }

.bx-section { padding-block: var(--bx-sp-section); }
.bx-section--tight { padding-block: var(--bx-sp-section-tight); }
.bx-section--alt  {
  background:
    radial-gradient(42rem 26rem at 100% 0, rgba(var(--bx-accent-rgb), .08), transparent 70%),
    #ffffff;
}

/* ==========================================================================
   Inset dark panel
   --------------------------------------------------------------------------
   The reference never runs a mid-page dark section edge to edge: each sits as
   a rounded navy block inset from the viewport, with light showing down both
   sides and above and below. Every dark section between the hero and the CTA
   gets that treatment, sitewide.

   It is applied by selector rather than by hand-tagging thirty templates:
   any .bx-section under #bx-main that is not a light band is a panel. The
   things that must stay full-bleed are not .bx-section at all — .bx-hero,
   .bx-trust, .bx-crumbs and .bx-cta are their own elements — so the top and
   bottom of every page are excluded for free. The one .bx-section that has
   to opt out is the FAQ page's sticky filter bar.

   The section paints the light surround; a pseudo-element paints the rounded
   dark block behind the content. Tokens are left alone, so everything inside
   keeps the dark-band colours it already had.
   ========================================================================== */

#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav),
.bx-section.bx-section--panel {
  --bx-panel-gap-y: clamp(1.25rem, 2.4vw, 2.25rem);
  --bx-panel-gap-x: clamp(1rem, 2.4vw, 2.25rem);
  position: relative;
  z-index: 0;
  /* The light surround is padding, not margin: a margin would let the dark
     page ground show through above and below the block. */
  padding: var(--bx-panel-gap-y) var(--bx-panel-gap-x);
  background: #ffffff;
}
/* Breathing room lives inside the dark block. */
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) > .bx-shell,
.bx-section--panel > .bx-shell { padding-block: clamp(2.5rem, 4.4vw, 4rem); }
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::before,
.bx-section--panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--bx-panel-gap-y) var(--bx-panel-gap-x);
  border-radius: clamp(18px, 2.2vw, 32px);
  background:
    radial-gradient(38rem 26rem at 88% 6%, rgba(var(--bx-accent-rgb), .16), transparent 66%),
    radial-gradient(30rem 22rem at 6% 96%, rgba(255, 159, 69, .08), transparent 70%),
    linear-gradient(135deg, #0e1118 0%, var(--bx-navy-800) 100%);
}
/* The dotted mesh the reference lays over the block. */
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::after,
.bx-section--panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--bx-panel-gap-y) var(--bx-panel-gap-x);
  border-radius: clamp(18px, 2.2vw, 32px);
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) > .bx-shell,
.bx-section--panel > .bx-shell { position: relative; z-index: 1; }

/* It butts against the light bands either side, so those lose the gap that
   would otherwise double up with this section's own margin. */
.bx-section--panel + .bx-section--light,
.bx-section--panel + .bx-section--alt { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); }

/* --- Merging runs of panels ----------------------------------------------
   Consecutive dark sections would otherwise read as a stack of separate
   cards. Where one panel follows another the seam between them is closed and
   the touching corners squared, so a run renders as a single tall block.
   Browsers without :has() simply keep the seam — the layout still holds. */
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) + .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) { padding-top: 0; }
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) + .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::before,
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) + .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::after {
  top: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav):has(+ .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)) { padding-bottom: 0; }
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav):has(+ .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav))::before,
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav):has(+ .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav))::after {
  bottom: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
/* A following section in a run has the previous one's padding above it. */
#bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) + .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) > .bx-shell { padding-top: 0; }

@media (max-width: 619px) {
  #bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav),
  .bx-section.bx-section--panel {
    --bx-panel-gap-y: .85rem;
    --bx-panel-gap-x: .75rem;
    padding: var(--bx-panel-gap-y) var(--bx-panel-gap-x);
  }
  #bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::before,
  #bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav)::after,
  .bx-section--panel::before,
  .bx-section--panel::after { border-radius: 16px; }
  #bx-main > .bx-section:not(.bx-section--light):not(.bx-section--alt):not(.bx-faq-page__nav) > .bx-shell,
  .bx-section--panel > .bx-shell { padding-block: 2.25rem; }
}

/* ==========================================================================
   Light band
   --------------------------------------------------------------------------
   The reference alternates dark navy sections with white ones; this is the
   white one. Because every component reads its colour from tokens, a band
   only has to redefine the tokens — nothing below needs a per-component
   light override.

   Two things deliberately do NOT invert:
     - product mockups (.bx-panel/.bx-app/.bx-mini) keep --bx-ink, so a dark
       UI still sits inside a light band, as it does in the reference;
     - the accent hue is unchanged, but --bx-accent-strong flips to a dark
       step because light violet is unreadable on white.
   ========================================================================== */

.bx-section--alt,
.bx-section--light {
  --bx-heading:       #020224;
  --bx-body:          #4f4640;
  --bx-muted:         #7a6f68;
  --bx-line:          rgba(2, 2, 36, .10);
  --bx-line-soft:     rgba(2, 2, 36, .06);
  --bx-surface:       #ffffff;
  --bx-surface-2:     #fdf8f5;
  --bx-surface-3:     #faeee7;
  --bx-card:          #fff6f1;
  --bx-card-2:        #ffffff;
  --bx-surface-rgb:   255, 255, 255;
  --bx-accent-strong: var(--bx-accent-700);
  --bx-accent-soft:   rgba(241, 90, 36, .10);
  --bx-accent-line:   rgba(241, 90, 36, .26);

  /* Depth on white comes back to ordinary drop shadows. */
  --bx-shadow-sm: 0 1px 2px rgba(2, 2, 36, .04), 0 4px 12px -6px rgba(2, 2, 36, .10);
  --bx-shadow:    0 2px 6px rgba(2, 2, 36, .05), 0 16px 34px -16px rgba(2, 2, 36, .16);
  --bx-shadow-lg: 0 30px 64px -26px rgba(2, 2, 36, .26);

  position: relative;
  background:
    radial-gradient(42rem 26rem at 100% 0, rgba(var(--bx-accent-rgb), .08), transparent 70%),
    #ffffff;
  color: var(--bx-body);
}
.bx-section--alt > .bx-shell,
.bx-section--light > .bx-shell { position: relative; z-index: 1; }

/* Illustrations: back to their light palette inside a light band. */
.bx-section--alt .bx-art,
.bx-section--light .bx-art {
  --bxa-fill:        #fdf3ee;
  --bxa-fill-2:      #fbe9e0;
  --bxa-side-2:      #f7ddd0;
  --bxa-accent-fill: rgba(var(--bx-accent-rgb), .16);
  --bxa-accent-side: rgba(var(--bx-accent-rgb), .28);
  --bxa-ink-fill:    #e3d8d1;
  --bxa-mark-cut:    #ffffff;
  --bxa-line:        rgba(2, 2, 36, .14);
  --bxa-line-strong: rgba(2, 2, 36, .26);
  --bxa-hub:         #ffffff;
  --bxa-globe:       #f4f1ff;
  --bxa-marker-ring: #ffffff;
  --bxa-track:       #f7ddd0;
  --bxa-page:        #ffffff;
  --bxa-text:        #020224;
  --bxa-dim:         #7a6f68;
}

/* Chrome that hardcoded white-on-dark has to flip inside a light band. */
.bx-section--alt .bx-btn--ink,
.bx-section--light .bx-btn--ink {
  background: #020224; color: #fff; border-color: transparent;
}
.bx-section--alt .bx-btn--ink,
.bx-section--alt .bx-btn--ink:hover,
.bx-section--light .bx-btn--ink:hover { background: #14143d; color: #fff; }
.bx-section--alt .bx-btn--ghost,
.bx-section--light .bx-btn--ghost { color: var(--bx-heading); border-color: var(--bx-line); }
.bx-section--alt .bx-btn--ghost,
.bx-section--alt .bx-btn--ghost:hover,
.bx-section--light .bx-btn--ghost:hover { background: var(--bx-surface-2); border-color: var(--bx-accent-line); }
.bx-section--alt .bx-eyebrow,
.bx-section--light .bx-eyebrow { color: var(--bx-accent-700); }
.bx-section--alt .bx-table thead th,
.bx-section--light .bx-table thead th { background: var(--bx-surface-2); }
.bx-section--alt .bx-table tbody tr:hover,
.bx-section--light .bx-table tbody tr:hover { background: var(--bx-surface-2); }
.bx-section--alt .bx-table td.is-no,
.bx-section--light .bx-table td.is-no { color: rgba(2, 2, 36, .3); }
.bx-section--light .bx-input,
.bx-section--alt .bx-select,
.bx-section--light .bx-select,
.bx-section--light .bx-textarea { background: #fff; }
.bx-section--alt .bx-logo__mark,
.bx-section--light .bx-logo__mark,
.bx-section--alt .bx-chip span,
.bx-section--light .bx-chip span { background: var(--bx-surface-3); }
.bx-section--alt .bx-toggle,
.bx-section--light .bx-toggle { background: var(--bx-surface-3); }
.bx-section--alt .bx-case__tag,
.bx-section--light .bx-case__tag { background: var(--bx-surface-3); }
.bx-section--alt .bx-quote__avatar,
.bx-section--light .bx-quote__avatar { color: var(--bx-accent-700); }
.bx-section--alt .bx-prose code,
.bx-section--light .bx-prose code { background: var(--bx-surface-3); }
.bx-section--alt .bx-pager .page-numbers,
.bx-section--light .bx-pager .page-numbers { background: #fff; }

/* Tick marks are data-URI SVGs and cannot read a variable, so the light
   band gets its own darker tick. */
.bx-section--alt .bx-checks li::before,
.bx-section--light .bx-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1400c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.bx-section--alt .bx-plan__list li::before,
.bx-section--light .bx-plan__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1400c' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.bx-section--alt .bx-select,
.bx-section--light .bx-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6f68' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.bx-section--line { border-top: 1px solid var(--bx-line); }

.bx-section--ink { background: var(--bx-ink); color: rgba(255, 255, 255, .74); }
.bx-section--ink h1, .bx-section--ink h2, .bx-section--ink h3, .bx-section--ink h4 { color: #fff; }
.bx-section--ink strong { color: #fff; }
.bx-section--ink a { color: #fff; }

/* Section head. Centred, with the eyebrow as an outlined pill above a large
   heading and a narrower lede — the reference's section grammar. */
.bx-head { max-width: 46rem; margin-bottom: var(--bx-sp-head); }
.bx-head--center { max-width: 54rem; margin-inline: auto; text-align: center; }
.bx-head--center .bx-lede { max-width: 42rem; margin-inline: auto; }
.bx-head h2 { line-height: 1.07; letter-spacing: -.028em; }
/* A highlighted phrase inside a heading picks up the accent gradient. */
.bx-head h2 em,
.bx-hero h1 em {
  font-style: normal;
  background: var(--bx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bx-head > :last-child { margin-bottom: 0; }

.bx-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--bx-font-head);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bx-accent-strong);
}
.bx-section--ink .bx-eyebrow { color: var(--bx-accent-200); }

.bx-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--bx-body); }
.bx-section--ink .bx-lede { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.bx-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .82rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--bx-radius-pill);
  font-family: var(--bx-font-head);
  font-size: .97rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bx-btn:hover { text-decoration: none; transform: translateY(-1px); }
.bx-btn:active { transform: translateY(0); }

.bx-btn--primary {
  background: var(--bx-grad);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(var(--bx-accent-rgb), .75);
}
.bx-btn--primary:hover {
  color: #fff;
  filter: brightness(1.12);
  box-shadow: 0 14px 36px -10px rgba(var(--bx-accent-rgb), .9);
}

.bx-btn--ghost { background: transparent; color: var(--bx-heading); border-color: var(--bx-line); }
.bx-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--bx-accent-line); color: var(--bx-heading); }

.bx-btn--ink { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--bx-line); }
.bx-btn--ink:hover { background: rgba(255, 255, 255, .13); color: #fff; border-color: var(--bx-accent-line); }

.bx-btn--light { background: #fff; color: var(--bx-ink); }
.bx-btn--light:hover { background: rgba(255, 255, 255, .88); color: var(--bx-ink); }

.bx-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.bx-btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.bx-btn--lg { padding: 1rem 1.7rem; font-size: 1.03rem; }
.bx-btn--sm { padding: .58rem 1rem; font-size: .88rem; }
.bx-btn--block { width: 100%; justify-content: center; }

.bx-btn .bx-arrow { transition: transform .16s ease; }
.bx-btn:hover .bx-arrow { transform: translateX(3px); }

.bx-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.bx-actions--center { justify-content: center; }

.bx-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--bx-font-head); font-weight: 700; font-size: .94rem;
  color: var(--bx-accent-strong);
}
.bx-link:hover { text-decoration: none; }
.bx-link .bx-arrow { transition: transform .16s ease; }
.bx-link:hover .bx-arrow { transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */

.bx-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(2, 2, 36, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.bx-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.bx-header.is-scrolled { box-shadow: 0 12px 34px -24px rgba(16, 19, 26, .55); }

.bx-brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.bx-brand:hover { text-decoration: none; }
.bx-brand__logo { height: 30px; width: auto; }
.bx-brand__by {
  padding-left: .65rem;
  border-left: 1px solid var(--bx-line);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bx-muted);
  white-space: nowrap;
}
@media (max-width: 420px) { .bx-brand__by { display: none; } }

/* Primary nav — the plan caps this at 6 items.
   The markup order is brand → burger → CTA → nav so that the mobile panel can
   drop below the bar; on desktop these orders put the nav back in the middle
   and the CTAs on the right. */
.bx-nav { display: flex; align-items: center; order: 1; }
.bx-header__cta { order: 2; }
.bx-nav ul { list-style: none; display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; }
.bx-nav li { margin: 0; position: relative; }

.bx-nav a {
  display: flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border-radius: 9px;
  font-family: var(--bx-font-head); font-size: .95rem; font-weight: 600;
  color: var(--bx-heading);
}
.bx-nav a:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.bx-nav .current-menu-item > a,
.bx-nav .current-menu-ancestor > a,
.bx-nav .current-page-ancestor > a { color: var(--bx-accent-strong); }

/* Dropdowns (Features / Solutions / Resources) */
.bx-nav .menu-item-has-children > a::after {
  content: ""; width: 6px; height: 6px; margin-left: .1rem;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
}
.bx-nav .sub-menu {
  position: absolute; top: calc(100% + .4rem); left: 0;
  display: block; min-width: 264px; padding: .5rem;
  background: var(--bx-card-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.bx-nav li:hover > .sub-menu,
.bx-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bx-nav .sub-menu li { width: 100%; }
.bx-nav .sub-menu a { padding: .6rem .7rem; font-weight: 600; font-size: .92rem; border-radius: 9px; }
.bx-nav .sub-menu a:hover { background: var(--bx-accent-soft); color: var(--bx-accent-200); }

.bx-header__cta { display: flex; align-items: center; gap: .55rem; }

.bx-burger {
  display: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--bx-line);
  border-radius: 10px; cursor: pointer;
}
.bx-burger span,
.bx-burger span::before,
.bx-burger span::after {
  display: block; position: relative;
  width: 17px; height: 1.9px; margin-inline: auto;
  background: #fff; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.bx-burger span::before, .bx-burger span::after { content: ""; position: absolute; left: 0; }
.bx-burger span::before { top: -5.5px; }
.bx-burger span::after  { top:  5.5px; }
.bx-burger[aria-expanded="true"] span { background: transparent; }
.bx-burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.bx-burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .bx-burger { display: block; order: 3; }
  .bx-header__cta { order: 2; }
  .bx-header__cta .bx-btn--ghost { display: none; }

  .bx-nav {
    order: 4; flex: 0 0 100%;
    display: none;
    padding: .5rem 0 1.2rem;
    border-top: 1px solid var(--bx-line);
  }
  .bx-nav.is-open { display: block; }
  .bx-nav ul { display: block; }
  .bx-nav a { padding: .7rem .2rem; font-size: 1.02rem; }
  .bx-nav .menu-item-has-children > a::after { margin-left: auto; }
  .bx-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; margin: 0 0 .4rem .2rem; padding: 0 0 0 .8rem;
    border: 0; border-left: 2px solid var(--bx-line-soft);
    border-radius: 0; box-shadow: none;
  }
  .bx-nav .menu-item-has-children.is-expanded > .sub-menu { display: block; }
  .bx-nav .menu-item-has-children.is-expanded > a::after { transform: rotate(225deg) translate(-1px, -1px); }
  .bx-nav .sub-menu a { font-size: .95rem; padding: .5rem .2rem; }
  .bx-nav .sub-menu a:hover { background: transparent; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.bx-hero {
  position: relative;
  padding-block: clamp(2.5rem, 4.8vw, 4.5rem);
  background:
    radial-gradient(52rem 30rem at 83% 2%, rgba(241, 90, 36, .32) 0%, transparent 65%),
    radial-gradient(34rem 22rem at -8% 86%, rgba(255, 159, 69, .12) 0%, transparent 70%),
    linear-gradient(180deg, var(--bx-navy-900) 0%, var(--bx-navy-950) 100%);
  border-bottom: 1px solid var(--bx-line-soft);
}
.bx-hero__grid {
  display: grid; gap: clamp(2rem, 3.8vw, 3.25rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 980px) {
  .bx-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.bx-hero h1 { margin-bottom: 1.1rem; }
.bx-hero h1 em { font-style: normal; color: var(--bx-accent); }
.bx-hero .bx-lede { max-width: 34rem; font-size: clamp(1.08rem, 1.6vw, 1.25rem); }
.bx-hero .bx-actions { margin-top: 1.6rem; }
.bx-hero__note { margin-top: 1.25rem; font-size: .92rem; color: var(--bx-muted); }

.bx-hero--page { padding-block: clamp(2rem, 3.6vw, 3.25rem); }
.bx-hero--page .bx-hero__grid { align-items: start; }

/* A subpage title should not shout at the same volume as the home page's.
   Dropping it a step is what lets a long feature H1 sit in three lines
   instead of five, which is most of what unbalanced these heroes. */
.bx-hero--page h1 { font-size: clamp(2rem, 3.9vw, 3rem); }

/* --- Page hero with a side panel ------------------------------------------
   Any page hero that carries an aside. Left-aligning both columns to the top
   stranded the panel at the top of a half-empty column (413px of dead space
   on /features/time-tracking/). The two columns are now near-equal and
   vertically centred against each other. */
.bx-hero--split .bx-hero__grid { align-items: center; }
.bx-hero--split h1 { max-width: 19ch; }
@media (min-width: 980px) {
  .bx-hero--split .bx-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

/* --- Contact hero panel ---------------------------------------------------
   The direct routes, beside the headline rather than four cards down. */
.bx-direct { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.bx-direct li {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .2rem 1rem;
  align-items: baseline;
  margin: 0;
  padding: .8rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.bx-direct li:first-child { border-top: 0; padding-top: .2rem; }
.bx-direct li:last-child { padding-bottom: .2rem; }
.bx-direct__label {
  font-family: var(--bx-font-head);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.bx-direct__value {
  font-family: var(--bx-font-head); font-weight: 600; font-size: .96rem;
  color: #fff;
}
a.bx-direct__value { color: var(--bx-accent-strong); }
a.bx-direct__value:hover { color: var(--bx-accent-200); }
.bx-direct__note {
  grid-column: 2;
  font-size: .8rem; color: rgba(255, 255, 255, .5);
}
@media (max-width: 419px) {
  .bx-direct li { grid-template-columns: 1fr; }
  .bx-direct__note { grid-column: 1; }
}

/* --- Blog topic panel -----------------------------------------------------
   Fills the blog hero's second column with navigation rather than ornament:
   the topics people actually browse by, with how much is under each. */
.bx-topics__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bx-topics__list li { margin: 0; }

/* Past six topics the list scrolls inside the panel rather than stretching
   it: an unbounded list grew the hero by 434px at twelve topics and left the
   right column nearly twice the height of the left. Only applied when there
   is actually an overflow, so a short list shows no scrollbar. */
.bx-topics__list:has(> li:nth-child(7)) {
  /* Sized so the seventh row is half-visible: a peeking row signals "there
     is more" better than a scrollbar on its own. */
  max-height: 21rem;
  overflow-y: auto;
  padding-right: .3rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .24) transparent;
}
.bx-topics__list::-webkit-scrollbar { width: 6px; }
.bx-topics__list::-webkit-scrollbar-track { background: transparent; }
.bx-topics__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .24);
  border-radius: 3px;
}
.bx-topics__list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }
.bx-topics__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, .82);
  font-family: var(--bx-font-head); font-weight: 600; font-size: .95rem;
  transition: background-color var(--bx-dur-1, .14s) ease, border-color var(--bx-dur-1, .14s) ease, color var(--bx-dur-1, .14s) ease;
}
.bx-topics__item:hover,
.bx-topics__item.is-on {
  background: rgba(var(--bx-accent-rgb), .14);
  border-color: var(--bx-accent-line);
  color: #fff;
  text-decoration: none;
}
.bx-topics__count {
  flex: 0 0 auto;
  min-width: 1.9rem;
  padding: .1rem .45rem;
  border-radius: var(--bx-radius-pill);
  background: rgba(255, 255, 255, .08);
  font-size: .78rem; font-weight: 700; text-align: center;
  color: rgba(255, 255, 255, .7);
}
.bx-topics__item:hover .bx-topics__count,
.bx-topics__item.is-on .bx-topics__count { background: var(--bx-grad); color: #fff; }
.bx-topics__foot {
  margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem; color: rgba(255, 255, 255, .55);
}

/* Trust bar */
.bx-trust {
  padding-block: 1.6rem;
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--bx-line-soft);
}
.bx-trust__label {
  margin: 0 0 .85rem; text-align: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bx-muted);
}
.bx-trust__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.25rem);
}
.bx-trust__item {
  font-family: var(--bx-font-head); font-weight: 700; font-size: 1.02rem;
  color: rgba(255, 255, 255, .55); letter-spacing: -.01em;
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.bx-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .bx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 620px)  { .bx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px)  { .bx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px)  { .bx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The homepage capability grid carries six cards. Two-up left it three rows
   deep with each card far wider than its content needed; three-up at desktop
   makes it two rows and reads as a product grid rather than a list. */
@media (min-width: 1060px) { .bx-grid--cap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bx-card {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 1.9vw, 1.6rem);
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.bx-card h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.bx-card p { font-size: .99rem; margin-bottom: 0; }
.bx-card .bx-link { margin-top: .9rem; }
.bx-card--centred { justify-content: center; }

/* Homepage feature cards: pastel depth with an animated spectrum edge. */
@property --bx-card-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.bx-premium-cards { padding-bottom: clamp(1.5rem, 2.4vw, 2.25rem); }
.bx-premium-cards + .bx-section:not(.bx-section--panel) { padding-top: clamp(1.5rem, 2.2vw, 2rem); }
.bx-premium-cards .bx-shell { max-width: var(--bx-shell-wide); }
.bx-premium-cards .bx-grid { gap: clamp(1rem, 1.8vw, 1.35rem); }
.bx-premium-cards .bx-card {
  position: relative;
  isolation: isolate;
  min-height: 292px;
  overflow: hidden;
  padding: clamp(1.35rem, 1.8vw, 1.6rem);
  border-color: transparent;
  box-shadow: 0 22px 48px -30px rgba(0, 0, 0, .6);
  background: #fff1e9;
}
.bx-premium-cards .bx-card:nth-child(2) { background: #fdf3e3; }
.bx-premium-cards .bx-card:nth-child(3) { background: #ffeae4; }
.bx-premium-cards .bx-card:hover,
.bx-premium-cards .bx-card:focus-within {
  border-color: transparent;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, .75);
}

/* These three keep the reference's pastel treatment, so they are the one
   place on the site with a light surface. Type has to be re-darkened: the
   sitewide heading colour is white and would vanish here. */
.bx-premium-cards .bx-card { color: #4f4640; }
.bx-premium-cards .bx-card h3 { color: #24160f; }
.bx-premium-cards .bx-card p { color: #4f4640; }
.bx-premium-cards .bx-card strong { color: #24160f; }
.bx-premium-cards .bx-card .bx-link { color: var(--bx-accent-700); }

.bx-premium-cards .bx-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--bx-card-angle),
    #d1400c,
    #f15a24,
    #ff8a5c,
    #ff9f45,
    #ffc27a,
    #ff8a5c,
    #f15a24,
    #d1400c
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.bx-premium-cards .bx-card:hover::before,
.bx-premium-cards .bx-card:focus-within::before {
  opacity: 1;
  animation: bx-card-spectrum 2.4s linear infinite;
}
@keyframes bx-card-spectrum { to { --bx-card-angle: 360deg; } }

.bx-premium-cards .bx-card h3 {
  max-width: 19ch;
  margin-top: auto;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
}
.bx-premium-cards .bx-card p { font-size: 1rem; line-height: 1.65; }
.bx-premium-cards .bx-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(var(--bx-accent-rgb), .30);
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8a5c, #d1400c);
  color: #fff;
  box-shadow: 0 0 0 7px rgba(var(--bx-accent-rgb), .07), 0 14px 28px -12px rgba(209, 64, 12, .62);
}
.bx-premium-cards .bx-card:nth-child(2) .bx-icon {
  border-color: rgba(232, 137, 15, .30);
  background: linear-gradient(145deg, #ffb04a, #e0790d);
  box-shadow: 0 0 0 7px rgba(232, 137, 15, .07), 0 14px 28px -12px rgba(224, 121, 13, .62);
}
.bx-premium-cards .bx-card:nth-child(3) .bx-icon {
  border-color: rgba(var(--bx-accent-rgb), .45);
  background: linear-gradient(145deg, #ff7a45, #c2380a);
  box-shadow: 0 0 0 7px rgba(var(--bx-accent-rgb), .07), 0 14px 28px -12px rgba(209, 64, 12, .62);
}
.bx-premium-cards .bx-icon svg { width: 25px; height: 25px; }

@media (prefers-reduced-motion: reduce) {
  .bx-premium-cards .bx-card:hover::before,
  .bx-premium-cards .bx-card:focus-within::before { animation: none; }
}

@media (max-width: 619px) {
  .bx-premium-cards .bx-card { min-height: 268px; }
}

/* A card that is itself a link must not tint its body copy with the link
   colour — only the heading and the "Learn more" affordance are coloured. */
a.bx-card { color: var(--bx-body); }
a.bx-card:hover { border-color: var(--bx-accent-line); box-shadow: var(--bx-shadow); transform: translateY(-4px); text-decoration: none; }
a.bx-card:hover h3 { color: var(--bx-accent-strong); }

.bx-section--ink .bx-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  color: rgba(255, 255, 255, .74);
}
.bx-section--ink a.bx-card:hover { border-color: rgba(var(--bx-accent-rgb), .55); background: rgba(255, 255, 255, .08); }

.bx-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: .9rem;
  background: var(--bx-grad);
  border-radius: 13px;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px -12px rgba(var(--bx-accent-rgb), .85);
}
.bx-icon svg { width: 23px; height: 23px; }
.bx-icon svg { width: 22px; height: 22px; }
.bx-section--ink .bx-icon { background: var(--bx-grad); color: #fff; }

.bx-step__num {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 1.1rem;
  background: var(--bx-ink); color: #fff;
  border-radius: 50%;
  font-family: var(--bx-font-head); font-weight: 800; font-size: .95rem;
}
.bx-section--ink .bx-step__num { background: var(--bx-accent-strong); }

.bx-stat__value {
  font-family: var(--bx-font-head); font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1;
  letter-spacing: -.03em; color: var(--bx-heading);
}
.bx-stat__label { margin-top: .55rem; font-size: .95rem; color: var(--bx-muted); }
.bx-section--ink .bx-stat__value { color: #fff; }
.bx-section--ink .bx-stat__label { color: rgba(255, 255, 255, .62); }

/* Checklist */
.bx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bx-checks li { position: relative; margin: 0; padding-left: 2rem; font-size: 1rem; }
.bx-checks li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 1.15rem; height: 1.15rem;
  background: var(--bx-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb193' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
  border-radius: 50%;
}
.bx-section--ink .bx-checks li::before { background-color: rgba(var(--bx-accent-rgb), .2); }
.bx-checks--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .bx-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bx-pain { border-left: 3px solid var(--bx-accent); }
.bx-pain h3 { font-size: 1.08rem; }

/* ==========================================================================
   Split feature rows
   ========================================================================== */

.bx-split { display: grid; gap: var(--bx-sp-col); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .bx-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-split--flip > :first-child { order: 2; }
}
.bx-split + .bx-split { margin-top: var(--bx-sp-block); }
.bx-split--spaced { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.bx-detail-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.bx-art-wrap--shield { max-width: 14rem; margin: 0 auto 2.25rem; }

/* ==========================================================================
   Product mockup panels (CSS-only — no screenshots needed at launch)
   ========================================================================== */

.bx-panel {
  padding: 1.1rem;
  background: var(--bx-ink);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-lg);
}
.bx-panel__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 .25rem .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 1.1rem;
}
.bx-panel__dots { display: flex; gap: .3rem; }
.bx-panel__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.bx-panel__title {
  font-family: var(--bx-font-head); font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

/* Day timeline — the product's signature view */
.bx-daystrip { display: grid; gap: .55rem; }
.bx-daystrip__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .7rem; align-items: center; }
.bx-daystrip__who {
  font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .68);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bx-daystrip__bar { display: flex; height: 20px; overflow: hidden; background: rgba(255, 255, 255, .07); border-radius: 5px; }
.bx-daystrip__bar i { height: 100%; }
.bx-seg-active { background: var(--bx-accent); }
.bx-seg-idle   { background: rgba(255, 255, 255, .17); }
.bx-seg-away   { background: repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 4px, rgba(255,255,255,.05) 4px 8px); }
.bx-seg-meet   { background: var(--bx-blue); }

.bx-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bx-legend span { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: rgba(255, 255, 255, .6); }
.bx-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* Metric tiles */
.bx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.bx-tile {
  padding: .85rem .9rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
}
.bx-tile__v { font-family: var(--bx-font-head); font-weight: 800; font-size: 1.35rem; color: #fff; line-height: 1.1; }
.bx-tile__l { margin-top: .2rem; font-size: .72rem; color: rgba(255, 255, 255, .55); }
.bx-tile__v span { font-size: .8rem; color: var(--bx-accent-300); }

/* Trend strip under the tiles — turns a three-number card into a panel with
   enough presence to hold its side of a hero. */
.bx-panel__chart {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bx-panel__chart .bx-chart svg { height: 6rem; }

/* Horizontal bar list (app usage) */
.bx-bars { display: grid; gap: .8rem; }
.bx-bars__row { display: grid; gap: .3rem; }
.bx-bars__top { display: flex; justify-content: space-between; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.bx-bars__top b { color: #fff; font-weight: 600; }
.bx-bars__track { height: 7px; background: rgba(255, 255, 255, .09); border-radius: 4px; overflow: hidden; }
.bx-bars__fill { height: 100%; background: var(--bx-accent); border-radius: 4px; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.bx-plans { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 720px)  { .bx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .bx-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bx-plan {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  padding: 1.4rem;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bx-plan:hover { border-color: var(--bx-accent-line); box-shadow: var(--bx-shadow); transform: translateY(-4px); }
.bx-plan--featured { border-color: var(--bx-accent); box-shadow: 0 20px 50px -20px rgba(var(--bx-accent-rgb), .35); }
.bx-plan--featured::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--bx-grad);
}
.bx-plan__flag {
  display: inline-block; align-self: flex-start;
  margin-bottom: .8rem; padding: .28rem .7rem;
  background: var(--bx-grad); color: #fff;
  border-radius: var(--bx-radius-pill);
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.bx-plan__name { font-size: 1.2rem; margin-bottom: .35rem; }
.bx-plan__for { font-size: .92rem; color: var(--bx-muted); min-height: 3.6em; }
.bx-plan__price {
  display: flex; align-items: baseline; gap: .3rem;
  margin: 1.1rem 0 .2rem;
  font-family: var(--bx-font-head); font-weight: 800;
  font-size: 2.35rem; line-height: 1; letter-spacing: -.03em; color: var(--bx-heading);
}
.bx-plan__price small { font-size: .85rem; font-weight: 600; color: var(--bx-muted); letter-spacing: 0; }
.bx-plan__cycle { font-size: .84rem; color: var(--bx-muted); margin-bottom: 1.05rem; min-height: 2.6em; }
.bx-plan__min { margin-top: -.8rem; }
.bx-plan .bx-btn { margin-bottom: 1.15rem; }
.bx-plan__list { list-style: none; margin: 0; padding: 1.05rem 0 0; border-top: 1px solid var(--bx-line-soft); display: grid; gap: .6rem; }
.bx-plan__list li { margin: 0; padding-left: 1.6rem; position: relative; font-size: .93rem; }
.bx-plan__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .95rem; height: .95rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb193' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Billing toggle */
.bx-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-inline: auto; padding: .4rem;
  background: var(--bx-surface-3); border-radius: var(--bx-radius-pill);
}
.bx-toggle button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border: 0; border-radius: var(--bx-radius-pill);
  background: transparent; cursor: pointer;
  font-family: var(--bx-font-head); font-size: .9rem; font-weight: 700; color: var(--bx-body);
}
.bx-toggle button.is-active { background: var(--bx-grad); color: #fff; box-shadow: var(--bx-shadow-sm); }
.bx-toggle .bx-save { font-size: .74rem; color: var(--bx-green); font-weight: 700; }

/* ==========================================================================
   Comparison table
   ========================================================================== */

.bx-table-wrap { overflow-x: auto; border: 1px solid var(--bx-line); border-radius: var(--bx-radius-lg); background: var(--bx-card); }
.bx-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.bx-table th, .bx-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--bx-line-soft); }
.bx-table thead th {
  background: rgba(255, 255, 255, .04);
  font-family: var(--bx-font-head); font-size: .82rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted);
  white-space: nowrap;
}
.bx-table tbody th { font-weight: 600; color: var(--bx-heading); }
.bx-table tbody tr:last-child th, .bx-table tbody tr:last-child td { border-bottom: 0; }
.bx-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
.bx-table td.is-yes, .bx-table td.is-no { text-align: center; font-weight: 700; }
.bx-table td.is-yes { color: var(--bx-green); }
.bx-table td.is-no  { color: rgba(255, 255, 255, .28); }
.bx-table__center { text-align: center !important; }

/* ==========================================================================
   FAQ / accordion  (native <details> — works without JS)
   ========================================================================== */

.bx-faq { display: grid; gap: .75rem; max-width: 52rem; }
.bx-faq details {
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.bx-faq details[open] { border-color: var(--bx-accent-line); box-shadow: var(--bx-shadow-sm); }
.bx-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer; list-style: none;
  font-family: var(--bx-font-head); font-size: 1.02rem; font-weight: 700; color: var(--bx-heading);
}
.bx-faq summary::-webkit-details-marker { display: none; }
.bx-faq summary::after {
  content: ""; flex: 0 0 auto; margin-top: .35em;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--bx-accent); border-bottom: 2px solid var(--bx-accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.bx-faq details[open] summary::after { transform: rotate(225deg); }
.bx-faq__a { padding: 0 1.25rem 1.25rem; }
.bx-faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Testimonials & case studies
   ========================================================================== */

.bx-quote {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bx-card); border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg); box-shadow: var(--bx-shadow-sm);
}
.bx-quote blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--bx-font-head); font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  font-weight: 600; line-height: 1.45; letter-spacing: -.015em; color: var(--bx-heading);
}
.bx-quote blockquote::before { content: "\201C"; color: var(--bx-accent); }
.bx-quote blockquote::after  { content: "\201D"; color: var(--bx-accent); }
.bx-quote__who { display: flex; align-items: center; gap: .8rem; }
.bx-quote__avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bx-accent-soft); color: var(--bx-accent-strong);
  font-family: var(--bx-font-head); font-weight: 800; font-size: .95rem;
}
.bx-quote__name { font-weight: 700; color: var(--bx-heading); font-size: .96rem; }
.bx-quote__role { font-size: .87rem; color: var(--bx-muted); }

.bx-case { display: flex; flex-direction: column; }
.bx-case__tag {
  display: inline-block; align-self: flex-start; margin-bottom: 1rem;
  padding: .25rem .65rem;
  background: rgba(255, 255, 255, .07); border-radius: var(--bx-radius-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  /* --bx-muted on the light band's tinted pill lands at 4.29:1, just under
     AA for this size. The body step clears it in both bands. */
  text-transform: uppercase; color: var(--bx-body);
}
.bx-case__metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 1rem; margin: 1.1rem 0;
  padding: 1rem 0; border-block: 1px solid var(--bx-line-soft);
}
.bx-case__metric b {
  display: block;
  font-family: var(--bx-font-head); font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--bx-accent-strong); line-height: 1.1;
}
.bx-case__metric span { font-size: .82rem; color: var(--bx-muted); }
.bx-case--detail { margin-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.bx-case__title { max-width: 34ch; font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.bx-case__body { align-items: start; gap: clamp(1.35rem, 2.4vw, 2.25rem); }
.bx-case__subhead { font-size: 1.05rem; }
.bx-case__quote {
  margin: 1.5rem 0 0; padding: .5rem 0 .5rem 1.4rem;
  border-left: 3px solid var(--bx-accent);
  font-family: var(--bx-font-head); font-weight: 600; font-size: 1.08rem;
  line-height: 1.55; color: var(--bx-heading);
}

/* ==========================================================================
   Integrations
   ========================================================================== */

.bx-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; }
.bx-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.1rem .8rem; min-height: 7.25rem;
  background: var(--bx-card); border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius);
  text-align: center;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bx-logo:hover { border-color: var(--bx-accent-line); transform: translateY(-2px); box-shadow: var(--bx-shadow-sm); }
.bx-logo__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  font-family: var(--bx-font-head); font-weight: 800; font-size: .9rem; color: var(--bx-heading);
}
.bx-logo__name { font-size: .88rem; font-weight: 700; color: var(--bx-heading); }
.bx-logo__cat { font-size: .76rem; color: var(--bx-muted); line-height: 1.4; }
.bx-integration-group + .bx-integration-group { margin-top: var(--bx-sp-block); }
.bx-integration-group__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.bx-integration-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.bx-integration-card__head h3 { margin: 0; font-size: 1.05rem; }

/* ==========================================================================
   Forms
   ========================================================================== */

.bx-form { display: grid; gap: 1.1rem; }
.bx-form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .bx-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bx-field { display: grid; gap: .4rem; }
.bx-field label { font-family: var(--bx-font-head); font-size: .88rem; font-weight: 700; color: var(--bx-heading); }
.bx-field label .bx-req { color: var(--bx-accent); }
.bx-hint { font-size: .82rem; color: var(--bx-muted); }
.bx-field label .bx-hint { font-weight: 500; }

.bx-input, .bx-select, .bx-textarea {
  width: 100%;
  padding: .78rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--bx-line);
  border-radius: 10px;
  font-family: inherit; font-size: 1rem; color: var(--bx-heading);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.bx-input:focus, .bx-select:focus, .bx-textarea:focus { outline: 0; border-color: var(--bx-accent); box-shadow: var(--bx-ring); }
.bx-textarea { min-height: 7.5rem; resize: vertical; }

/* --- Native control surfaces ----------------------------------------------
   The select inherits white text from the rule above, but the dropdown popup
   is drawn by the OS on its own default white background — so the options
   were white on white and effectively invisible.

   color-scheme is what fixes it properly: it tells the browser to draw the
   native popup (and the scrollbar and caret) dark, so the inherited white
   text is legible. The explicit option colours are the fallback for engines
   that ignore it. Both have to flip in a light band or the same bug reappears
   the other way round — dark text on a dark popup. */
.bx-select { color-scheme: dark; }
.bx-select option {
  background-color: var(--bx-navy-800);
  color: #fff;
}
.bx-section--light .bx-select,
.bx-section--alt .bx-select { color-scheme: light; }
.bx-section--light .bx-select option,
.bx-section--alt .bx-select option {
  background-color: #fff;
  color: #020224;
}

/* Chrome forces its own pale-yellow/blue fill on autofilled fields, which
   cannot be overridden with background-color. The inset shadow is the only
   way to paint over it, and -webkit-text-fill-color the only way to recolour
   the text inside it. */
.bx-input:-webkit-autofill,
.bx-select:-webkit-autofill,
.bx-textarea:-webkit-autofill,
.bx-input:-webkit-autofill:hover,
.bx-input:-webkit-autofill:focus,
.bx-textarea:-webkit-autofill:focus,
.bx-select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bx-heading);
  -webkit-box-shadow: 0 0 0 1000px var(--bx-autofill, #14172b) inset;
          box-shadow: 0 0 0 1000px var(--bx-autofill, #14172b) inset;
  caret-color: var(--bx-heading);
  /* The fill is applied on a transition Chrome cannot be told to skip, so it
     is pushed far enough out that it never lands. */
  transition: background-color 100000s ease-in-out 0s;
}
.bx-section--light .bx-input,
.bx-section--alt .bx-input,
.bx-section--light .bx-textarea,
.bx-section--alt .bx-textarea,
.bx-section--light .bx-select,
.bx-section--alt .bx-select { --bx-autofill: #ffffff; }
.bx-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bdb5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
  padding-right: 2.4rem;
}

.bx-notice { padding: .95rem 1.1rem; border-radius: 10px; font-size: .95rem; border: 1px solid transparent; }
.bx-notice--ok  { background: var(--bx-green-soft); border-color: rgba(61, 220, 151, .34); color: var(--bx-green); }
.bx-notice--err { background: rgba(255, 92, 122, .12); border-color: rgba(255, 92, 122, .34); color: #ff9aab; }
.bx-notice--legal { margin-inline: 0; margin-bottom: 2rem; }

.bx-form-layout { display: grid; gap: var(--bx-sp-col); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .bx-form-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); } }
.bx-form-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.45rem, 2.6vw, 2rem);
  background: var(--bx-card); border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg); box-shadow: var(--bx-shadow);
}
.bx-toggle-wrap { display: flex; justify-content: center; }
.bx-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--bx-accent-600), var(--bx-accent-hot) 56%, transparent);
}
.bx-form-card__title { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.bx-form-card__intro { margin-bottom: 1.5rem; }
.bx-prose--wide { max-width: none; }
.bx-card--legal-contact { margin-inline: 0; }

.bx-solution-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bx-solution-row__body { flex: 1 1 18rem; }
.bx-icon--flush { margin-bottom: 0; }

/* ==========================================================================
   Blog
   ========================================================================== */

.bx-posts { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .bx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bx-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bx-post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.bx-post__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bx-card-2); }
.bx-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bx-post__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem; }
.bx-post__meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: .7rem; font-size: .8rem; color: var(--bx-muted);
}
.bx-post__cat { color: var(--bx-accent-strong); font-weight: 700; }
.bx-post h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.bx-post h3 a { color: inherit; }
.bx-post h3 a:hover { color: var(--bx-accent-strong); text-decoration: none; }
.bx-post p { font-size: .95rem; }
.bx-post .bx-link { margin-top: auto; padding-top: 1rem; }

/* Single post typography */
.bx-prose { max-width: var(--bx-shell-text); font-size: 1.09rem; }
.bx-prose > * + * { margin-top: 1.25rem; }
.bx-prose h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.bx-prose h3 { margin-top: 2rem; }
.bx-prose ul, .bx-prose ol { padding-left: 1.4rem; }
.bx-prose li { margin-bottom: .5rem; }
.bx-prose img, .bx-prose figure { border-radius: var(--bx-radius); }
.bx-prose figcaption { margin-top: .6rem; font-size: .88rem; color: var(--bx-muted); text-align: center; }
.bx-prose blockquote {
  margin: 2rem 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--bx-accent);
  font-size: 1.15rem; font-style: italic; color: var(--bx-heading);
}
.bx-prose code { padding: .15em .4em; background: rgba(255, 255, 255, .09); border-radius: 5px; font-size: .9em; }
.bx-prose pre {
  padding: 1.1rem; overflow-x: auto;
  background: #000; color: #e9edf3;
  border-radius: var(--bx-radius); font-size: .92rem;
}
.bx-prose pre code { background: transparent; padding: 0; }
.bx-prose table { width: 100%; border-collapse: collapse; font-size: .96rem; display: block; overflow-x: auto; }
.bx-prose th, .bx-prose td { padding: .7rem .9rem; border: 1px solid var(--bx-line); text-align: left; }
.bx-prose th { background: rgba(255, 255, 255, .05); }
.bx-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Pagination */
.bx-pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.25rem; }
.bx-pager .page-numbers {
  display: grid; place-items: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: .6rem;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--bx-line); border-radius: 9px;
  font-family: var(--bx-font-head); font-weight: 700; font-size: .92rem; color: var(--bx-heading);
}
.bx-pager .page-numbers:hover { border-color: var(--bx-accent-line); text-decoration: none; }
.bx-pager .page-numbers.current { background: var(--bx-accent); border-color: var(--bx-accent); color: #fff; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.bx-crumbs { padding-block: 1rem; border-bottom: 1px solid var(--bx-line-soft); font-size: .86rem; }
.bx-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.bx-crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; color: var(--bx-muted); }
.bx-crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .28); }
.bx-crumbs a { color: var(--bx-muted); }
.bx-crumbs a:hover { color: var(--bx-accent-strong); }
.bx-crumbs [aria-current="page"] { color: var(--bx-heading); font-weight: 600; }

/* ==========================================================================
   CTA banner
   ========================================================================== */

.bx-cta {
  position: relative; overflow: hidden;
  padding-block: clamp(2.25rem, 3.8vw, 3.5rem);
  background:
    radial-gradient(38rem 22rem at 88% 12%, rgba(var(--bx-accent-rgb), .3) 0%, transparent 68%),
    var(--bx-ink);
  color: rgba(255, 255, 255, .78);
}
.bx-cta__inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) { .bx-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } }
.bx-cta h2 { color: #fff; margin-bottom: .7rem; }
.bx-cta p { color: rgba(255, 255, 255, .74); max-width: 40rem; margin-bottom: 0; }
.bx-cta__note { margin-top: 1rem; font-size: .88rem; color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   Footer
   ========================================================================== */

.bx-footer { background: var(--bx-ink-2); color: rgba(255, 255, 255, .62); font-size: .94rem; }
.bx-footer__top { display: grid; gap: 1.85rem; padding-block: clamp(2rem, 3.4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .bx-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bx-footer__top { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } }

.bx-footer__about p { max-width: 24rem; font-size: .93rem; margin-bottom: 1.1rem; }
.bx-footer__logo { height: 26px; width: auto; margin-bottom: 1.1rem; }

.bx-footer h4 {
  margin-bottom: 1rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.bx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bx-footer li { margin: 0; }
.bx-footer a { color: rgba(255, 255, 255, .68); }
.bx-footer a:hover { color: #fff; text-decoration: none; }

.bx-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .86rem; color: rgba(255, 255, 255, .45);
}
.bx-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.bx-center { text-align: center; }
.bx-mt-1 { margin-top: .75rem; }
.bx-mt-2 { margin-top: 1.5rem; }
.bx-mt-3 { margin-top: 1.75rem; }
.bx-mt-4 { margin-top: 2.25rem; }
.bx-mb-0 { margin-bottom: 0; }
.bx-narrow { max-width: var(--bx-shell-text); margin-inline: auto; }

.bx-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem;
  background: var(--bx-accent-soft); border: 1px solid var(--bx-accent-line);
  border-radius: var(--bx-radius-pill);
  font-size: .8rem; font-weight: 700; color: var(--bx-accent-strong);
}
.bx-section--ink .bx-pill { background: rgba(var(--bx-accent-rgb), .16); border-color: rgba(var(--bx-accent-rgb), .35); color: var(--bx-accent); }

/* ==========================================================================
   Original SVG/CSS product mockups  (inc/mockups.php)
   --------------------------------------------------------------------------
   No screenshots and no third-party imagery anywhere on the site. Everything
   below is drawn from brand tokens, so it restyles with the palette.
   ========================================================================== */

/* --- App window ---------------------------------------------------------- */

.bx-app {
  background: var(--bx-ink);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-lg);
  overflow: hidden;
}

.bx-app__chrome {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bx-app__dots { display: flex; gap: .3rem; flex: 0 0 auto; }
.bx-app__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.bx-app__url {
  flex: 1; min-width: 0;
  padding: .2rem .6rem;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--bx-radius-pill);
  font-size: .72rem; color: rgba(255, 255, 255, .42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bx-app__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bx-app__body { grid-template-columns: 8.5rem 1fr; } }

.bx-app__side {
  display: none;
  padding: 1rem .7rem;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 560px) { .bx-app__side { display: block; } }
.bx-app__logo { display: block; width: 22px; margin: 0 .4rem 1.1rem; }
.bx-app__nav { display: grid; gap: .15rem; }
.bx-app__nav-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .5rem; border-radius: 8px;
  color: rgba(255, 255, 255, .48);
}
.bx-app__nav-item svg { width: 15px; height: 15px; flex: 0 0 auto; }
.bx-app__nav-item em { font-style: normal; font-size: .78rem; font-weight: 500; }
.bx-app__nav-item.is-on { background: rgba(var(--bx-accent-rgb), .16); color: var(--bx-accent-300); }

.bx-app__main { padding: 1rem; min-width: 0; }

.bx-app__topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.bx-app__h {
  font-family: var(--bx-font-head); font-weight: 800; font-size: .95rem;
  color: #fff; letter-spacing: -.01em;
}
.bx-app__pills { display: flex; gap: .2rem; padding: .18rem; background: rgba(255, 255, 255, .06); border-radius: var(--bx-radius-pill); }
.bx-app__pills i {
  padding: .2rem .6rem; border-radius: var(--bx-radius-pill);
  font-size: .68rem; font-style: normal; color: rgba(255, 255, 255, .5);
}
.bx-app__pills i.is-on { background: rgba(255, 255, 255, .12); color: #fff; }

/* KPI row */
.bx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
@media (min-width: 720px) { .bx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bx-kpi {
  padding: .7rem .75rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
}
/* Value and delta share a baseline row. They were previously absolutely
   positioned, which collided on narrow tiles. */
.bx-kpi__top { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.bx-kpi__v {
  font-family: var(--bx-font-head); font-weight: 800; font-size: 1.15rem;
  color: #fff; line-height: 1.15; letter-spacing: -.02em;
}
.bx-kpi__l { display: block; margin-top: .15rem; font-size: .68rem; color: rgba(255, 255, 255, .5); }
.bx-kpi__d { font-size: .66rem; font-weight: 700; white-space: nowrap; }
.bx-kpi__d.is-up   { color: #4ecf9b; }
.bx-kpi__d.is-down { color: var(--bx-accent-300); }

.bx-app__split { display: grid; gap: .55rem; margin-top: .55rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .bx-app__split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.bx-app__card {
  display: flex; flex-direction: column;
  padding: .8rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  min-width: 0;
}
/* The chart keeps a fixed, comfortable height. Stretching it to fill the row
   exaggerates the gradient and reads as a fake spike, so it is capped and any
   leftover height in the row is simply empty — as a real dashboard would be. */
.bx-app__card .bx-chart svg { height: 7.5rem; }
.bx-app__ct {
  display: block; margin-bottom: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
}

/* --- Chart --------------------------------------------------------------- */

.bx-chart svg { width: 100%; height: 5.5rem; display: block; overflow: visible; }
.bx-chart__x {
  display: flex; justify-content: space-between;
  margin-top: .4rem; font-size: .66rem; color: rgba(255, 255, 255, .38);
}

/* --- Donut --------------------------------------------------------------- */

.bx-donut { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.bx-donut svg { width: 6.5rem; height: 6.5rem; flex: 0 0 auto; }
.bx-donut__legend { display: grid; gap: .35rem; min-width: 8rem; }
.bx-donut__legend span {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: rgba(255, 255, 255, .62);
}
.bx-donut__legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.bx-donut__legend b { margin-left: auto; color: #fff; font-weight: 700; }

/* --- Heatmap ------------------------------------------------------------- */

.bx-heat__grid {
  display: grid;
  grid-template-columns: 2rem repeat(12, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.bx-heat__corner { display: block; }
.bx-heat__h { font-size: .6rem; text-align: center; color: rgba(255, 255, 255, .34); }
.bx-heat__d { font-size: .66rem; color: rgba(255, 255, 255, .5); }
.bx-heat__c { display: block; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.bx-heat__c[data-l="1"], .bx-heat__key i[data-l="1"] { background: rgba(var(--bx-accent-rgb), .22); }
.bx-heat__c[data-l="2"], .bx-heat__key i[data-l="2"] { background: rgba(var(--bx-accent-rgb), .45); }
.bx-heat__c[data-l="3"], .bx-heat__key i[data-l="3"] { background: rgba(var(--bx-accent-rgb), .7); }
.bx-heat__c[data-l="4"], .bx-heat__key i[data-l="4"] { background: var(--bx-accent); }
.bx-heat__key {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .7rem; font-size: .64rem; color: rgba(255, 255, 255, .38);
}
.bx-heat__key i { width: 10px; height: 10px; border-radius: 3px; }
.bx-heat__key span:last-child { margin-left: .1rem; }

/* --- Alert feed ---------------------------------------------------------- */

.bx-alerts { display: grid; gap: .4rem; }
.bx-alert {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .55rem .6rem;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  border-left: 2px solid rgba(255, 255, 255, .18);
}
.bx-alert[data-tone="warn"] { border-left-color: var(--bx-accent); }
.bx-alert[data-tone="ok"]   { border-left-color: #4ecf9b; }
.bx-alert[data-tone="info"] { border-left-color: var(--bx-blue); }
.bx-alert__dot { width: 6px; height: 6px; margin-top: .38rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; opacity: .55; }
.bx-alert__body { display: grid; gap: .1rem; min-width: 0; }
.bx-alert__body b { font-size: .76rem; font-weight: 600; color: #fff; line-height: 1.3; }
.bx-alert__body em { font-style: normal; font-size: .68rem; color: rgba(255, 255, 255, .45); }

/* --- Mini mockups (capability grid) ------------------------------------- */

.bx-mini {
  padding: .8rem;
  background: var(--bx-ink);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--bx-radius);
  margin-bottom: .9rem;
}
.bx-mini__rows { display: grid; gap: .42rem; }
.bx-mini__row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .5rem; align-items: center; }
.bx-mini__row em { font-style: normal; font-size: .7rem; color: rgba(255, 255, 255, .55); }
.bx-mini__row i { display: block; height: 6px; background: rgba(255, 255, 255, .09); border-radius: 3px; overflow: hidden; }
.bx-mini__row i b { display: block; height: 100%; background: var(--bx-accent); border-radius: 3px; }
.bx-mini__row u { text-decoration: none; font-size: .66rem; color: rgba(255, 255, 255, .42); white-space: nowrap; }
.bx-mini__row[data-cat="neutral"]  i b { background: var(--bx-blue); }
.bx-mini__row[data-cat="non-work"] i b { background: rgba(255, 255, 255, .3); }

.bx-mini__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .7rem; }
.bx-mini__kpis span { display: grid; }
.bx-mini__kpis b { font-family: var(--bx-font-head); font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.1; }
.bx-mini__kpis em { font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, .45); }

/* A card that hosts a mockup needs no inner padding fighting it */
.bx-card--visual { overflow: hidden; }
/* In an equal-height grid the affordance should sit on a common baseline
   across the row rather than floating under copy of varying length. */
.bx-card--visual .bx-link { margin-top: auto; padding-top: .9rem; }
.bx-card--visual .bx-mini { margin-bottom: .9rem; }

/* ==========================================================================
   Horizontal scroller (testimonials)
   ========================================================================== */

.bx-testimonials {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(var(--bx-accent-rgb), .12), transparent 28rem),
    var(--bx-surface);
}
.bx-testimonials .bx-section-head { max-width: 52rem; margin-inline: auto; }
.bx-testimonials .bx-scrollhint { display: none; }
.bx-testimonials__stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-block: .4rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bx-testimonials__stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(var(--bx-surface-rgb), .98) 0%,
    rgba(var(--bx-surface-rgb), .9) 13%,
    rgba(2, 2, 36, 0) 31%,
    rgba(2, 2, 36, 0) 69%,
    rgba(var(--bx-surface-rgb), .9) 87%,
    rgba(var(--bx-surface-rgb), .98) 100%
  );
}
.bx-testimonials__row { overflow: hidden; padding-block: .55rem; }
.bx-testimonials__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: bx-testimonials-left 50s linear infinite;
  animation-direction: reverse;
}
.bx-testimonials__row--reverse .bx-testimonials__track {
  animation-direction: normal;
  animation-duration: 54s;
}
.bx-testimonials__group {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  padding-right: 1rem;
}
.bx-testimonials__stage:hover .bx-testimonials__track,
.bx-testimonials__stage:focus-within .bx-testimonials__track { animation-play-state: paused; }
.bx-testimonials .bx-quote {
  display: flex;
  flex: 0 0 clamp(20rem, 28vw, 25rem);
  flex-direction: column;
  min-height: 14.25rem;
  padding: 1.35rem 1.45rem;
  border-color: var(--bx-line);
  border-radius: 1.15rem;
  box-shadow: var(--bx-shadow-sm);
}
.bx-testimonials .bx-quote::before {
  width: 3px;
  background: var(--bx-grad);
}
.bx-testimonials .bx-quote blockquote {
  position: relative;
  margin-bottom: 1.15rem;
  padding-top: 1.6rem;
  font-size: 1.04rem;
  line-height: 1.5;
}
.bx-testimonials .bx-quote blockquote::before {
  content: "★★★★★";
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--bx-star);
  font-family: Arial, sans-serif;
  font-size: .88rem;
  letter-spacing: .14em;
}
.bx-testimonials .bx-quote blockquote::after { content: none; }
.bx-testimonials .bx-quote__who { margin-top: auto; }
.bx-testimonials .bx-quote__avatar {
  background: var(--bx-grad-soft);
  color: var(--bx-accent-200);
  box-shadow: inset 0 0 0 1px var(--bx-accent-line);
}
@keyframes bx-testimonials-left {
  to { transform: translateX(-50%); }
}

.bx-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 22rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  /* Bleed to the viewport edge so cards run off-screen rather than stopping short */
  margin-inline: calc(var(--bx-gutter) * -1);
  padding-inline: var(--bx-gutter);
  scrollbar-width: thin;
}
.bx-scroller > * { scroll-snap-align: start; }
.bx-scroller::-webkit-scrollbar { height: 6px; }
.bx-scroller::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }
.bx-scroller::-webkit-scrollbar-track { background: transparent; }

.bx-scrollhint { margin-top: .5rem; font-size: .82rem; color: var(--bx-muted); }

/* ==========================================================================
   Integration strip
   ========================================================================== */

.bx-strip {
  position: relative;
  overflow: hidden;
  margin-inline: calc(var(--bx-gutter) * -.5);
  padding: .6rem calc(var(--bx-gutter) * .5);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bx-strip__track {
  display: flex; width: max-content; gap: .55rem;
  animation: bx-marquee 36s linear infinite;
  will-change: transform;
}
.bx-strip__group { display: flex; flex: 0 0 auto; gap: .55rem; }
.bx-strip:hover .bx-strip__track,
.bx-strip:focus-within .bx-strip__track { animation-play-state: paused; }
@keyframes bx-marquee { to { transform: translateX(calc(-50% - .275rem)); } }
.bx-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem .5rem .55rem;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-pill);
  font-size: .88rem; font-weight: 600; color: var(--bx-heading);
  flex: 0 0 auto;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bx-chip:hover { border-color: var(--bx-accent-line); transform: translateY(-1px); text-decoration: none; }
.bx-chip span {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  font-family: var(--bx-font-head); font-size: .64rem; font-weight: 800;
}

/* ==========================================================================
   Featured case-study card
   ========================================================================== */

.bx-feature-case {
  display: grid; gap: clamp(1.35rem, 2.4vw, 2.1rem);
  padding: clamp(1.35rem, 2.4vw, 2.1rem);
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow);
  align-items: center;
}
@media (min-width: 900px) { .bx-feature-case { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.bx-feature-case h3 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); }

/* ==========================================================================
   Original illustrations (inc/illustrations.php)
   --------------------------------------------------------------------------
   The second visual family: conceptual artwork rather than product UI. Every
   piece is drawn from geometry in PHP — nothing here is a sourced image, so
   there is no licence, attribution or stock-photo exposure anywhere on the
   site. Colours come from the tokens above via the --bxa-* layer below, which
   is redefined for dark sections so one drawing works on both.
   ========================================================================== */

.bx-art {
  --bxa-accent:       var(--bx-accent);
  --bxa-accent-2:     var(--bx-blue);
  --bxa-fill:        rgba(255, 255, 255, .05);
  --bxa-fill-2:      rgba(255, 255, 255, .06);
  --bxa-side-2:      rgba(255, 255, 255, .03);
  --bxa-accent-fill: rgba(var(--bx-accent-rgb), .18);
  --bxa-accent-side: rgba(var(--bx-accent-rgb), .1);
  --bxa-ink-fill:    rgba(255, 255, 255, .2);
  --bxa-mark-cut:    var(--bx-navy-950);
  --bxa-line:        rgba(255, 255, 255, .14);
  --bxa-line-strong: rgba(255, 255, 255, .22);
  --bxa-hub:         rgba(255, 255, 255, .07);
  --bxa-globe:       rgba(255, 255, 255, .03);
  --bxa-marker-ring: var(--bx-navy-950);
  --bxa-track:       rgba(255, 255, 255, .1);
  --bxa-page:        rgba(255, 255, 255, .08);
  --bxa-text:        #fff;
  --bxa-dim:         rgba(255, 255, 255, .6);

  display: block;
  width: 100%;
}

/* Kept as a hook: the drawings already default to the dark values now, but
   these contexts stay listed so a future light band can re-light them. */
.bx-section--ink .bx-art,
.bx-panel .bx-art,
.bx-cta .bx-art {
  --bxa-text:        #fff;
  --bxa-dim:         rgba(255, 255, 255, .6);
}

.bx-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* SVG text is kept to numbers and short labels so it stays legible when the
   drawing scales down on a phone. */
.bx-art__num {
  font-family: var(--bx-font-head); font-size: 30px; font-weight: 800;
  letter-spacing: -.02em; fill: var(--bxa-text);
}
.bx-art__cap  { font-family: var(--bx-font-body); font-size: 12px; font-weight: 600; fill: var(--bxa-dim); }
.bx-art__tick { font-family: var(--bx-font-body); font-size: 11px; font-weight: 600; fill: var(--bxa-dim); }

/* --- Figure + caption ---------------------------------------------------- */

.bx-figure { margin: 0; }
/* A filled image slot (see beactive_image_slot) renders here instead of a
   drawing. It gets the same frame the panels use so layout does not shift. */
.bx-figure--image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow);
}
.bx-figure figcaption {
  margin-top: 1rem;
  font-size: .84rem; line-height: 1.5; color: var(--bx-muted);
  text-align: center; text-wrap: pretty;
}
.bx-section--ink .bx-figure figcaption { color: rgba(255, 255, 255, .55); }

/* --- Shared key / legend ------------------------------------------------- */

.bx-art__key { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.bx-art__key li { margin: 0; }
.bx-art__key b  { display: block; font-family: var(--bx-font-head); font-size: .92rem; color: var(--bxa-text); }
.bx-art__key em { display: block; font-style: normal; font-size: .85rem; color: var(--bxa-dim); }

.bx-art__key--num { counter-reset: bxa; display: grid; gap: .8rem; }
.bx-art__key--num li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .2rem .7rem; align-items: start;
  counter-increment: bxa;
}
/* The marker takes column 1; both text lines are pinned to column 2, or the
   second one wraps under the marker instead of under the heading. */
.bx-art__key--num li > b,
.bx-art__key--num li > em { grid-column: 2; }
.bx-art__key--num li::before {
  content: counter(bxa);
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--bx-accent); color: #fff;
  font-family: var(--bx-font-head); font-size: .78rem; font-weight: 800;
}

.bx-art__key--inline { display: flex; flex-wrap: wrap; gap: .45rem .9rem; justify-content: center; }
.bx-art__key--inline li { display: flex; align-items: center; gap: .4rem; }
.bx-art__key--inline b { font-size: .82rem; font-weight: 600; color: var(--bxa-dim); }
.bx-art__key--inline i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bx-accent); flex: 0 0 auto;
}

/* --- Per-drawing sizing -------------------------------------------------- */

.bx-art--iso    svg { max-width: 26rem; margin-inline: auto; }
.bx-art--hub    svg { max-width: 24rem; margin-inline: auto; }
.bx-art--globe  svg { max-width: 23rem; margin-inline: auto; }
.bx-art--emblem svg { max-width: 15rem; margin-inline: auto; }
.bx-art--gauge  svg { max-width: 15rem; margin-inline: auto; }
.bx-art--slope  svg { max-width: 25rem; margin-inline: auto; }
.bx-art--people svg { max-width: 27rem; margin-inline: auto; }
.bx-art--stack  svg { max-width: 26rem; margin-inline: auto; }
.bx-art--lost   svg { max-width: 20rem; margin-inline: auto; }
.bx-art--doc    svg { max-width: 14rem; margin-inline: auto; }

/* --- Decorative pattern bands -------------------------------------------- */

.bx-artpat {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--bx-accent);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
.bx-artpat--grid, .bx-artpat--rings { opacity: .09; }
.bx-section--ink .bx-artpat, .bx-cta .bx-artpat { opacity: .16; }

/* Anything sitting in a patterned band needs to be above the pattern.
   .bx-hero is not given overflow:hidden — the pattern is inset:0 so it cannot
   escape anyway, and clipping the hero would cut the mockup panel's shadow. */
.bx-hero > .bx-shell, .bx-cta > .bx-shell { position: relative; z-index: 1; }

/* Fades the pattern out so it never competes with the copy next to it. */
.bx-artpat--fade {
  -webkit-mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
}

/* --- Process flow -------------------------------------------------------- */

.bx-flow {
  display: grid; gap: 1rem;
  margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bx-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bx-flow__node {
  position: relative;
  margin: 0;
  padding: 1.2rem;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow-sm);
}
.bx-section--alt .bx-flow__node { background: var(--bx-card); }
.bx-section--ink .bx-flow__node { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }

.bx-flow { counter-reset: bx-step; }
.bx-flow__node { counter-increment: bx-step; }
.bx-flow__glyph {
  display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; margin-bottom: .75rem;
  border-radius: 12px;
  background: var(--bx-grad); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(var(--bx-accent-rgb), .85);
}
/* The step number, as an oversized ghost numeral behind the card content —
   the reference numbers each step 1..4. */
.bx-flow__node::before {
  content: counter(bx-step);
  position: absolute;
  right: .85rem;
  top: .35rem;
  font-family: var(--bx-font-head);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--bx-accent-rgb), .16);
  pointer-events: none;
}
.bx-section--ink .bx-flow__glyph { background: var(--bx-grad); color: #fff; }
.bx-flow__glyph svg { width: 20px; height: 20px; }

.bx-flow__node b  { display: block; font-family: var(--bx-font-head); font-size: 1.05rem; color: var(--bx-heading); margin-bottom: .3rem; }
.bx-flow__node em { display: block; font-style: normal; font-size: .93rem; color: var(--bx-body); }
.bx-section--ink .bx-flow__node b  { color: #fff; }
.bx-section--ink .bx-flow__node em { color: rgba(255, 255, 255, .7); }

/* Connector chevrons between the steps — horizontal on wide screens,
   vertical once the row wraps into a column. */
.bx-flow__node::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-top: 2px solid var(--bx-accent);
  border-right: 2px solid var(--bx-accent);
  left: 50%; bottom: -.85rem; transform: translateX(-50%) rotate(135deg);
}
.bx-flow__node:last-child::after { content: none; }
@media (min-width: 1000px) {
  .bx-flow__node::after {
    left: auto; bottom: auto;
    right: -.85rem; top: 50%; transform: translateY(-50%) rotate(45deg);
  }
}

/* --- Roster board -------------------------------------------------------- */

.bx-board__grid {
  display: grid;
  grid-template-columns: 3.4rem repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-items: center;
}
.bx-board__corner { display: block; }
.bx-board__h { font-size: .68rem; font-weight: 600; text-align: center; color: var(--bxa-dim); }
.bx-board__t { font-size: .72rem; font-weight: 600; color: var(--bxa-dim); }
.bx-board__c {
  display: block; height: 1.9rem; border-radius: 7px;
  background: var(--bxa-track);
}
.bx-board__c[data-s="day"]   { background: var(--bx-accent); }
.bx-board__c[data-s="night"] { background: var(--bx-blue); }
.bx-board__c[data-s="split"] {
  background: repeating-linear-gradient(45deg, var(--bx-accent) 0 6px, var(--bx-blue) 6px 12px);
}
.bx-board__c[data-s="off"] {
  background: repeating-linear-gradient(45deg, var(--bxa-track) 0 5px, transparent 5px 10px);
  border: 1px solid var(--bxa-line);
}
.bx-board__key {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin-top: 1rem; font-size: .74rem; color: var(--bxa-dim);
}
.bx-board__key span { display: flex; align-items: center; gap: .4rem; }
.bx-board__key span::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--bxa-track);
}
.bx-board__key span[data-s="day"]::before   { background: var(--bx-accent); }
.bx-board__key span[data-s="night"]::before { background: var(--bx-blue); }
.bx-board__key span[data-s="split"]::before { background: repeating-linear-gradient(45deg, var(--bx-accent) 0 4px, var(--bx-blue) 4px 8px); }
.bx-board__key span[data-s="off"]::before   { border: 1px solid var(--bxa-line); background: transparent; }

/* --- Generative article covers ------------------------------------------- */

.bx-cover {
  display: block;
  overflow: hidden;
  background: var(--bxc-a);
  --bxc-a: #020224; --bxc-b: #3a1c0c; --bxc-ink: #f15a24; --bxc-mark: #ffffff;
}
.bx-cover--p1 { --bxc-a: #d1400c; --bxc-b: #7a2405; --bxc-ink: #ffdccd; --bxc-mark: #ffffff; }
.bx-cover--p2 { --bxc-a: #0d0d38; --bxc-b: #2c2c66; --bxc-ink: #ff9f45; --bxc-mark: #f15a24; }
.bx-cover--p3 { --bxc-a: #ff9f45; --bxc-b: #b4360a; --bxc-ink: #4a1a05; --bxc-mark: #ffffff; }
.bx-cover svg { width: 100%; height: 100%; display: block; }

/* In a post card the cover fills the same 16:9 slot a featured image would. */
.bx-post__thumb .bx-cover { width: 100%; height: 100%; }
.bx-cover--wide {
  aspect-ratio: 21 / 8;
  border-radius: var(--bx-radius-lg);
}

/* ==========================================================================
   Premium finishing layer
   ========================================================================== */

::selection { background: var(--bx-accent-600); color: #fff; }

#bx-main { overflow: clip; }

/* Fade-up. Matches the reference's fadeInUp2: the blur is the part that
   makes it read as expensive rather than as a generic slide. */
.bx-motion-ready .bx-reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(3px);
}
.bx-motion-ready .bx-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .4s var(--bx-ease-anim),
    transform .4s var(--bx-ease-anim),
    filter .4s var(--bx-ease-anim);
  transition-delay: var(--bx-reveal-delay, 0ms);
}

/* Heading flip. Each character rotates up out of the page inside its own
   perspective context, staggered by index. Words are inline-block so the
   heading still wraps on word boundaries. */
.bx-word {
  display: inline-block;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.bx-char { display: inline-block; }

.bx-motion-ready .bx-lettered .bx-char {
  opacity: 0;
  transform: translate3d(0, 10px, -8px) rotateX(-80deg);
}
.bx-motion-ready .bx-lettered.is-visible .bx-char {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s var(--bx-ease-anim),
    transform .5s var(--bx-ease-anim);
  transition-delay: calc(var(--bx-char-i, 0) * 18ms);
}

@keyframes bx-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bx-scale-in {
  from { opacity: 0; transform: scale(.985) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bx-pattern-drift {
  50% { transform: translate3d(10px, -7px, 0) scale(1.012); }
}
@media (prefers-reduced-motion: no-preference) {
  /* The hero text column is no longer animated as a block: its heading now
     flips in per character and its eyebrow, lede and buttons fade up
     individually, so moving the whole column as well doubled the motion.
     The product panel keeps its own scale-in, as in the reference. */
  .bx-hero > .bx-shell.bx-center { animation: bx-rise-in .58s var(--bx-ease-anim) both; }
  .bx-hero__grid > :last-child { animation: bx-scale-in .7s .08s var(--bx-ease-anim) both; }
  .bx-hero > .bx-artpat { animation: bx-pattern-drift 12s ease-in-out infinite; }
  .bx-cta > .bx-artpat { animation: bx-pattern-drift 16s ease-in-out infinite reverse; }
}

.bx-eyebrow {
  padding: .42rem .82rem;
  border: 1px solid var(--bx-accent-line);
  border-radius: var(--bx-radius-pill);
  background: var(--bx-accent-soft);
  color: var(--bx-accent-200);
  line-height: 1;
}
.bx-section--ink .bx-eyebrow {
  border-color: var(--bx-accent-line);
  background: var(--bx-accent-soft);
  color: var(--bx-accent-200);
}

.bx-btn { min-height: 46px; justify-content: center; }
.bx-btn--sm { min-height: 40px; }
.bx-btn--primary {
  background: var(--bx-grad);
  box-shadow: 0 10px 26px -12px rgba(var(--bx-accent-rgb), .8);
}
.bx-btn--primary:hover {
  background: var(--bx-grad); filter: brightness(1.12);
  box-shadow: 0 14px 30px -14px rgba(209, 64, 12, .86);
}

.bx-nav > ul > li > a { position: relative; }
.bx-nav > ul > li > a::before {
  content: "";
  position: absolute;
  right: .8rem;
  bottom: .25rem;
  left: .8rem;
  height: 2px;
  border-radius: 2px;
  background: var(--bx-accent);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .16s ease, transform .16s ease;
}
.bx-nav > ul > li > a:hover::before,
.bx-nav > ul > .current-menu-item > a::before,
.bx-nav > ul > .current-menu-ancestor > a::before {
  opacity: 1;
  transform: scaleX(1);
}
.bx-nav .menu-item-has-children > a::before { right: 1.15rem; }

.bx-hero h1 { max-width: 13ch; letter-spacing: -.04em; }
.bx-hero--page h1 { max-width: 16ch; }
.bx-hero .bx-center h1 { margin-inline: auto; }
.bx-hero__grid > div:last-child > .bx-figure {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-radius-lg);
  background: rgba(255, 255, 255, .04);
  box-shadow: var(--bx-shadow);
  backdrop-filter: blur(8px);
}
.bx-hero .bx-panel,
.bx-hero .bx-app {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 40px 90px -36px rgba(16, 19, 26, .46), 0 18px 44px -30px rgba(var(--bx-accent-rgb), .45);
}

.bx-card,
.bx-flow__node,
.bx-plan,
.bx-quote,
.bx-form-card {
  box-shadow: var(--bx-shadow-sm);
}
.bx-card:hover,
.bx-flow__node:hover {
  border-color: rgba(var(--bx-accent-rgb), .28);
  box-shadow: var(--bx-shadow);
}
.bx-icon,
.bx-flow__glyph {
  box-shadow: inset 0 0 0 1px rgba(var(--bx-accent-rgb), .08), 0 8px 22px -15px rgba(var(--bx-accent-rgb), .72);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bx-card:hover .bx-icon,
.bx-flow__node:hover .bx-flow__glyph {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(var(--bx-accent-rgb), .12), 0 12px 24px -14px rgba(var(--bx-accent-rgb), .78);
}

.bx-section--ink {
  position: relative;
  background:
    radial-gradient(42rem 28rem at 92% 8%, rgba(var(--bx-accent-rgb), .11), transparent 68%),
    radial-gradient(34rem 24rem at 0 100%, rgba(63, 111, 209, .08), transparent 72%),
    linear-gradient(135deg, #0e1118 0%, var(--bx-ink-2) 100%);
}
.bx-section--ink > .bx-shell { position: relative; z-index: 1; }

.bx-crumbs {
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(10px);
}

.bx-plan { padding-top: 2.8rem; }
.bx-plan__flag { position: absolute; top: 1rem; left: 1.6rem; margin-bottom: 0; }
.bx-toggle {
  border: 1px solid var(--bx-line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.bx-toggle button { transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }

.bx-table-wrap { box-shadow: var(--bx-shadow-sm); scrollbar-color: rgba(255,255,255,.25) transparent; }
.bx-table tbody tr { transition: background-color .14s ease; }
.bx-table td.is-yes { font-size: 1.06rem; }

.bx-faq details { overflow: hidden; }
.bx-faq details[open] {
  background: linear-gradient(135deg, var(--bx-card) 0%, rgba(241, 90, 36, .16) 100%);
  border-color: rgba(var(--bx-accent-rgb), .28);
  box-shadow: var(--bx-shadow);
}
.bx-faq summary { padding-block: 1.15rem; }
.bx-faq__a { color: var(--bx-body); }

/* Homepage FAQ — animated split layout inspired by the reference section. */
.bx-home-faq {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 88%, rgba(var(--bx-accent-rgb), .14), transparent 23rem),
    var(--bx-surface);
}
.bx-home-faq__grid {
  display: grid;
  grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.45fr);
  gap: var(--bx-sp-col);
  align-items: start;
}
.bx-home-faq__intro { position: sticky; top: 8rem; }
.bx-home-faq__intro h2 { max-width: 10ch; font-size: clamp(2.5rem, 4vw, 4.15rem); }
.bx-home-faq__intro .bx-lede { max-width: 32rem; }
.bx-home-faq__support {
  position: relative;
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-left: 1.9rem;
}
.bx-home-faq__support::before,
.bx-home-faq__support::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(241, 90, 36, .10);
  filter: blur(1px);
}
.bx-home-faq__support::before { width: 5.5rem; height: 5.5rem; left: -1.4rem; top: -.8rem; }
.bx-home-faq__support::after { width: 3rem; height: 3rem; left: 1.5rem; top: -2.2rem; }
.bx-home-faq__support > * { position: relative; z-index: 1; }
.bx-home-faq__support h3 { margin-bottom: .65rem; font-size: 1.35rem; }
.bx-home-faq__support p { max-width: 29rem; }
.bx-home-faq__support .bx-actions { margin-top: 1.35rem; }
.bx-home-faq__sparkle {
  display: block;
  margin-bottom: .35rem;
  color: var(--bx-accent-300);
  font-size: 1.65rem;
  animation: bx-faq-sparkle 3s ease-in-out infinite;
}
.bx-faq-page__nav {
  position: relative;
  z-index: 2;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--bx-line-soft);
  background: rgba(2, 2, 36, .8);
  backdrop-filter: blur(14px);
}
.bx-faq-page__nav .bx-actions { justify-content: center; }
.bx-faq-page__nav .bx-btn {
  background: rgba(255, 255, 255, .05);
  border-color: transparent;
  color: var(--bx-body);
}
.bx-faq-page__nav .bx-btn:hover {
  background: var(--bx-accent-soft);
  border-color: var(--bx-accent-line);
  color: var(--bx-accent-200);
}
.bx-faq-page__group { scroll-margin-top: 6rem; }
.bx-faq-page__grid {
  display: grid;
  grid-template-columns: minmax(14rem, .58fr) minmax(0, 1.42fr);
  gap: var(--bx-sp-col);
  align-items: start;
}
.bx-faq-page__intro {
  position: sticky;
  top: 7.5rem;
}
.bx-faq-page__intro .bx-section-head { margin-bottom: 0; }
.bx-faq-page__intro h2 { max-width: 11ch; }
.bx-faq--premium { max-width: 64rem; gap: .55rem; }
.bx-faq--premium details {
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--bx-card);
  box-shadow: none;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.bx-faq--premium details[open] {
  border-color: transparent;
  background:
    linear-gradient(var(--bx-card-2), var(--bx-card-2)) padding-box,
    linear-gradient(110deg, #d1400c, #ff9f45, #ff7a45, #d1400c) border-box;
  background-size: 100% 100%, 260% 100%;
  box-shadow: 0 16px 40px rgba(78, 48, 155, .11);
  animation: bx-faq-border-flow 4s linear infinite;
  transform: none;
}
.bx-faq--premium summary {
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  min-height: 4.4rem;
  padding: 1rem 1.3rem;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 600;
}
.bx-faq--premium details:not([open]) summary {
  min-height: 3.8rem;
  padding: .75rem 1.2rem;
}
.bx-faq--premium summary::before {
  content: "✦";
  flex: 0 0 auto;
  color: var(--bx-accent-strong);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  transition: transform .3s ease, color .3s ease;
}
.bx-faq--premium summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: var(--bx-accent-200);
  box-shadow: 0 3px 12px rgba(48, 32, 94, .08);
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .32s cubic-bezier(.2, .75, .25, 1), color .2s ease, box-shadow .2s ease;
}
.bx-faq--premium details:hover summary { color: var(--bx-accent-strong); }
.bx-faq--premium details:hover summary::before,
.bx-faq--premium details:hover summary::after { color: var(--bx-accent-hot); }
.bx-faq--premium details[open] summary { color: var(--bx-accent-strong); }
.bx-faq--premium details[open] summary::before { color: var(--bx-accent-hot); transform: rotate(90deg) scale(1.15); }
.bx-faq--premium details[open] summary::after {
  color: var(--bx-accent-hot);
  box-shadow: 0 0 0 2px rgba(225, 43, 210, .13), 0 5px 16px rgba(91, 46, 195, .12);
  transform: rotate(45deg);
}
.bx-faq--premium .bx-faq__a {
  padding: 0 4.2rem 1.3rem 3.25rem;
  color: var(--bx-body);
  animation: bx-faq-answer-in .36s cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes bx-faq-answer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bx-faq-border-flow {
  to { background-position: 0 0, 260% 0; }
}
@keyframes bx-faq-sparkle {
  50% { transform: rotate(90deg) scale(1.16); opacity: .65; }
}

@media (max-width: 900px) {
  .bx-home-faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bx-home-faq__intro { position: static; }
  .bx-home-faq__intro h2 { max-width: 13ch; }
  .bx-home-faq__support { margin-top: 2.5rem; }
  .bx-faq-page__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .bx-faq-page__intro { position: static; }
  .bx-faq-page__intro h2 { max-width: none; }
}

@media (max-width: 619px) {
  .bx-home-faq__intro h2 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
  .bx-home-faq__support { padding-left: .5rem; }
  .bx-faq--premium summary { min-height: 4.65rem; padding: 1rem; gap: .65rem; }
  .bx-faq--premium .bx-faq__a { padding: 0 1rem 1.2rem 2.65rem; }
}

.bx-quote { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.bx-quote::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--bx-accent), rgba(var(--bx-accent-rgb), .08));
}
.bx-quote:hover { transform: translateY(-3px); box-shadow: var(--bx-shadow); }

.bx-feature-case { position: relative; overflow: hidden; }
.bx-feature-case::before {
  content: ""; position: absolute; width: 18rem; height: 18rem; right: -9rem; top: -11rem;
  border-radius: 50%; background: rgba(var(--bx-accent-rgb), .06); pointer-events: none;
}

.bx-post { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bx-post__thumb img,
.bx-post__thumb .bx-cover { transition: transform .35s ease; }
.bx-post:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow); }
.bx-post:hover .bx-post__thumb img,
.bx-post:hover .bx-post__thumb .bx-cover { transform: scale(1.025); }

.bx-chip { box-shadow: 0 8px 20px -20px rgba(16, 19, 26, .5); }
.bx-chip:hover { box-shadow: var(--bx-shadow-sm); transform: translateY(-2px); }

.bx-trust__item { display: inline-flex; align-items: center; gap: .65rem; }
.bx-trust__item::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  border-radius: 50%; background: rgba(var(--bx-accent-rgb), .52);
  box-shadow: 0 0 0 4px rgba(var(--bx-accent-rgb), .07);
}

.bx-footer li a { display: inline-block; transition: color .16s ease, transform .16s ease; }
.bx-footer li a:hover { transform: translateX(3px); }

.single-post .bx-prose { margin-inline: auto; }
.single-post .bx-hero--page .bx-shell--text { max-width: 1080px; }
.single-post .bx-hero--page h1 { max-width: 22ch; }
.single-post .bx-hero--page .bx-lede { max-width: 52rem; }
.single-post .bx-prose > p:first-child { font-size: 1.16rem; color: rgba(255, 255, 255, .8); }
.single-post article > .bx-shell > img,
.single-post article > .bx-shell > .bx-cover { width: 100%; box-shadow: var(--bx-shadow); }

.bx-form[role="search"] { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.bx-form[role="search"] .bx-btn { min-width: 8rem; }

.bx-input,
.bx-select,
.bx-textarea {
  min-height: 52px;
  border-color: var(--bx-line);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(16, 19, 26, .025);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.bx-textarea { min-height: 9.5rem; }
.bx-input:hover,
.bx-select:hover,
.bx-textarea:hover { border-color: rgba(255, 255, 255, .22); }
.bx-input:focus,
.bx-select:focus,
.bx-textarea:focus { background: rgba(255, 255, 255, .06); }

.bx-form-layout > div:last-child { display: grid; gap: 1rem; }
.bx-form-layout > div:last-child .bx-card { margin-top: 0; }
.bx-form-layout > div:last-child .bx-card:first-child {
  background:
    radial-gradient(24rem 14rem at 100% 0, rgba(var(--bx-accent-rgb), .16), transparent 72%),
    var(--bx-card);
}

.bx-cta {
  background:
    radial-gradient(42rem 26rem at 92% 0, rgba(var(--bx-accent-rgb), .34) 0%, transparent 66%),
    radial-gradient(30rem 20rem at 4% 110%, rgba(63, 111, 209, .12) 0%, transparent 68%),
    linear-gradient(135deg, #0e1118 0%, #1b202b 100%);
}
.bx-footer {
  background:
    radial-gradient(34rem 18rem at 12% 0, rgba(var(--bx-accent-rgb), .07), transparent 72%),
    #151923;
}

@media (max-width: 1000px) {
  .bx-header__inner { min-height: 68px; flex-wrap: wrap; gap: .75rem; }
  .bx-nav > ul > li > a::before { display: none; }
  .bx-nav {
    margin-inline: calc(var(--bx-gutter) * -1);
    padding: .65rem var(--bx-gutter) 1.15rem;
    background: rgba(2, 2, 36, .97);
    box-shadow: 0 18px 30px -28px rgba(16, 19, 26, .45);
  }
  .bx-nav .sub-menu { margin-left: .35rem; }
}

@media (max-width: 619px) {
  :root { --bx-gutter: 1.1rem; --bx-radius-lg: 22px; }
  body { font-size: 1rem; }
  .bx-section { padding-block: 2.75rem; }
  .bx-section--tight { padding-block: 2rem; }
  .bx-hero { padding-block: 2.25rem 2.75rem; }
  .bx-hero .bx-actions .bx-btn { width: 100%; }
  .bx-cta .bx-actions { width: 100%; }
  .bx-cta .bx-actions .bx-btn { width: 100%; }
  .bx-card { padding: 1.3rem; }
  .bx-form-card { padding: 1.35rem; }
  .bx-header__cta .bx-btn--primary { padding-inline: .9rem; }
  .bx-footer__bottom { align-items: flex-start; flex-direction: column; }
  .bx-trust__row { justify-content: flex-start; padding-left: .25rem; }
  .bx-trust__label { text-align: left; }
  .bx-form[role="search"] { grid-template-columns: 1fr; }
  .bx-form[role="search"] .bx-btn { width: 100%; }
  .bx-scroller { grid-auto-columns: minmax(17rem, calc(100vw - 3.25rem)); }
  .bx-plan:hover, .bx-post:hover, .bx-quote:hover { transform: none; }
  .bx-testimonials__stage::after {
    background: linear-gradient(
      90deg,
      rgba(var(--bx-surface-rgb), .9) 0%,
      rgba(2, 2, 36, 0) 11%,
      rgba(2, 2, 36, 0) 89%,
      rgba(var(--bx-surface-rgb), .9) 100%
    );
  }
  .bx-table th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bx-card);
    box-shadow: 1px 0 0 var(--bx-line-soft);
  }
  .bx-table thead th:first-child { z-index: 2; background: var(--bx-card-2); }
}

/* ==========================================================================
   Back to top
   --------------------------------------------------------------------------
   Sits below the sticky header (z-index 100) and above page content, and
   above the safe-area inset so it clears the home indicator on iOS. The
   [hidden] attribute does the hiding, so it is genuinely out of the
   accessibility tree until it is needed rather than merely invisible.
   ========================================================================== */

.bx-totop {
  position: fixed;
  z-index: 90;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: calc(clamp(1rem, 2.4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--bx-accent-line);
  border-radius: 14px;
  background: rgba(var(--bx-ink-rgb), .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bx-accent-strong);
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .8);
  transition:
    opacity var(--bx-dur-2, .22s) var(--bx-ease, ease),
    transform var(--bx-dur-2, .22s) var(--bx-ease, ease),
    background-color var(--bx-dur-1, .14s) ease,
    border-color var(--bx-dur-1, .14s) ease,
    color var(--bx-dur-1, .14s) ease;
}
.bx-totop svg { width: 20px; height: 20px; }

/* Entrance: JS removes [hidden] first, then adds .is-in on the next frame so
   the transition has a state to run from. */
.bx-totop:not(.is-in) { opacity: 0; transform: translateY(10px) scale(.94); }
.bx-totop.is-in { opacity: 1; transform: none; }

.bx-totop:hover {
  background: var(--bx-grad);
  border-color: transparent;
  color: #fff;
}
.bx-totop:active { transform: translateY(1px); }

@media (max-width: 619px) {
  .bx-totop { width: 42px; height: 42px; border-radius: 12px; }
  .bx-totop svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-totop { transition: none; }
  .bx-totop:not(.is-in) { transform: none; }
}

@media print { .bx-totop { display: none !important; } }

/* ==========================================================================
   Ambient motion
   --------------------------------------------------------------------------
   The reference runs a set of slow, looping background animations underneath
   its scroll reveals — they are most of what makes it feel alive when the
   page is sitting still. Ported here with the same timings:

     shimmer       10s ease-in-out   (its sk-subtitle-1)
     scan-line      5s linear        (sk-choose-5-wrap-line, staggered)
     glow pulse   1.4s linear        (sk-features-1-item-4-glow)
     ring spin     10s linear        (sk-process-5-circle)
     breathing      4s ease-in-out   (sk-cta-1-bg-img)

   All of them animate only transform and opacity, so none of them cost a
   layout or a paint, and every one is switched off under reduced motion at
   the foot of this file.
   ========================================================================== */

@keyframes bx-shimmer   { 0% { left: -20%; } 50% { left: 100%; } 100% { left: -20%; } }
@keyframes bx-scan      { 0% { opacity: 0; top: 4%; } 10%, 90% { opacity: 1; } 95% { opacity: 0; } 100% { top: 83%; opacity: 0; } }
@keyframes bx-glow      { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes bx-ring-spin { to { transform: rotate(360deg); } }
@keyframes bx-breathe   { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }

/* --- Eyebrow shimmer ------------------------------------------------------
   A band of light crosses the pill every ten seconds. */
.bx-eyebrow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bx-eyebrow::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(var(--bx-accent-rgb), .38), transparent);
  animation: bx-shimmer 10s ease-in-out infinite;
  pointer-events: none;
}

/* --- Card scan-line -------------------------------------------------------
   A hairline of light travels down each card. Staggered per column so the
   grid does not pulse in unison. */
.bx-grid > .bx-card {
  position: relative;
  overflow: hidden;
}
.bx-grid > .bx-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--bx-accent-rgb), .55), transparent);
  animation: bx-scan 5s linear infinite;
  pointer-events: none;
}
.bx-grid > .bx-card:nth-child(2)::after { animation-delay: 2s; }
.bx-grid > .bx-card:nth-child(3)::after { animation-delay: 3s; }
.bx-grid > .bx-card:nth-child(4)::after { animation-delay: 1s; }
.bx-grid > .bx-card:nth-child(5)::after { animation-delay: 3.5s; }
.bx-grid > .bx-card:nth-child(6)::after { animation-delay: 1.5s; }

/* Dark bands only. On a pastel card a 1px violet hairline is close to
   invisible, and the reference likewise runs this on its dark cards. */
.bx-section--light .bx-grid > .bx-card::after,
.bx-section--alt .bx-grid > .bx-card::after { display: none; }

/* Flow nodes keep ::before for their step number, so they get the rotating
   ring around the icon instead of a scan-line. */

/* --- Rotating ring behind the step icons --------------------------------- */
.bx-flow__glyph { position: relative; }
.bx-flow__glyph::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 14px;
  border: 1px dashed rgba(var(--bx-accent-rgb), .38);
  animation: bx-ring-spin 10s linear infinite;
  pointer-events: none;
}

/* --- Glow pulse on the hero wash ----------------------------------------- */
.bx-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6rem;
  top: -8rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bx-accent-rgb), .22), transparent 65%);
  filter: blur(28px);
  animation: bx-glow 1.4s linear infinite;
  pointer-events: none;
}

/* --- CTA breathing -------------------------------------------------------- */
.bx-cta > .bx-artpat { animation: bx-breathe 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bx-strip { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .bx-strip__track { width: auto; }
  .bx-strip__group:first-child { flex-wrap: wrap; justify-content: center; }
  .bx-strip__group[aria-hidden="true"] { display: none; }
  .bx-testimonials__stage {
    width: auto;
    margin-left: 0;
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .bx-testimonials__row { overflow: visible; }
  .bx-testimonials__track { animation: none !important; transform: none !important; }
  .bx-testimonials__group[aria-hidden="true"] { display: none; }
}

/* Anything Elementor drops in still lands inside our shell width */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--bx-shell); }

/* Print */
@media print {
  .bx-header, .bx-footer, .bx-cta, .bx-burger, .bx-skip { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}