/*!
 * AwareIM Design System skin — awareim.com
 * AwareSoft Pty Ltd
 *
 * Applies the AwareIM Design System over the Blocs / Bootstrap 5 export in
 * all.css. Loaded *after* all.css so it wins on equal specificity.
 *
 * Why a skin and not an edit of all.css: all.css is a Blocs build artefact,
 * overwritten every time the site is re-exported. Everything here survives
 * that; only the one <link> per page has to be re-added.
 *
 * ---------------------------------------------------------------------------
 * How this file is organised
 *
 * 1-2  Tokens, then the Blocs swatch remap. The export routes every generated
 *      colour class through a numbered swatch (--swatch-var-NNNN), so pointing
 *      those at the brand ramp does most of the colour work in one place.
 *
 * 3    Context variables. The site alternates light editorial sections with
 *      navy "product" sections, and the same utility class (.text-primary,
 *      .mini-wire-button, an icon fill) appears on both. Rather than write a
 *      scoped duplicate of every rule, each surface declares what its context
 *      *is* — --ctx-fg, --ctx-body, --ctx-accent and friends — and every
 *      component below reads those. Inheritance does the rest, including for
 *      surfaces nested inside other surfaces, which is where hand-scoped rules
 *      go wrong.
 *
 * 4+   Base, type, layout, then components, all written against --ctx-*.
 *
 * ---------------------------------------------------------------------------
 * On !important: the export's own custom block uses it 250+ times — including
 * `.btn { border-radius: 0 !important }` and a rule that paints every heading,
 * paragraph, label and link the same blue. Overriding those needs equal weight.
 * It is used here only where the declaration being replaced already had it.
 *
 * No gradients, no texture, no emoji. Small radii, soft cool shadows,
 * restrained motion. See the design system readme for the rules this encodes.
 */

/* ==========================================================================
   1. Tokens — copied verbatim from the design system's tokens/*.css
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --aim-blue: #1F6495;
  --aim-blue-light: #66BCE9;
  --aim-navy: #020E1E;

  /* ---- Full-colour accents (ConfigTool set) ---- */
  --aim-green: #B0CB20;
  --aim-orange: #F29512;
  --aim-yellow: #FFCB01;
  --aim-violet: #A69ECB;

  /* ---- Blue ramp ---- */
  --aim-blue-700: #16496F;
  --aim-blue-600: #195378;
  --aim-blue-500: #1F6495;
  --aim-blue-300: #66BCE9;
  --aim-blue-200: #8FD0F0;
  --aim-blue-100: #D6ECF8;
  --aim-blue-50: #EEF6FC;

  /* ---- Neutrals: light editorial surfaces ---- */
  --aim-white: #ffffff;
  --aim-gray-50: #f9fafb;
  --aim-gray-100: #f3f4f6;
  --aim-gray-200: #e5e7eb;
  --aim-gray-300: #d1d5db;
  --aim-gray-500: #6b7280;
  --aim-gray-700: #374151;
  --aim-gray-900: #111827;

  /* ---- Dark product-panel neutrals ---- */
  --aim-navy-2: #101c2e;
  --aim-navy-3: #0a1626;
  --aim-navy-border: #2d3d52;
  --aim-navy-fg: #f8fafc;
  --aim-navy-fg-2: #e2e8f0;
  --aim-navy-fg-3: #94a3b8;

  /* ---- Type ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-h4: 17px;
  --fs-body-lg: 19px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 11px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-label: 0.1em;

  /* ---- Radii, shadows, motion ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(2, 14, 30, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(2, 14, 30, 0.10);
  --shadow-lg: 0 12px 32px -8px rgba(2, 14, 30, 0.16);
  --shadow-panel: 0 24px 60px -24px rgba(2, 14, 30, 0.45);
  --ring: 0 0 0 3px rgba(102, 188, 233, 0.45);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.3s;
  --dur-slow: 0.7s;

  /* ---- Layout ---- */
  --container-max: 1080px;
  --container-pad: 24px;
  --section-y: 96px;

  /* ---- Semantic aliases: light editorial ---- */
  --surface-page: var(--aim-gray-50);
  --surface-card: var(--aim-white);
  --surface-sunken: var(--aim-gray-100);
  --fg-strong: var(--aim-gray-900);
  --fg-body: var(--aim-gray-700);
  --fg-muted: var(--aim-gray-500);
  --border-default: var(--aim-gray-300);
  --border-soft: var(--aim-gray-200);
  --accent: var(--aim-blue);
  --accent-hover: var(--aim-blue-600);
  --accent-soft-bg: var(--aim-blue-50);
  --accent-soft-fg: var(--aim-blue-700);

  /* ---- Semantic aliases: navy product panels ---- */
  --panel: var(--aim-navy);
  --panel-2: var(--aim-navy-2);
  --panel-3: var(--aim-navy-3);
  --panel-border: var(--aim-navy-border);
  --panel-fg: var(--aim-navy-fg);
  --panel-fg-2: var(--aim-navy-fg-2);
  --panel-fg-3: var(--aim-navy-fg-3);

  /* ---- Status ---- */
  --success: #6a9c14;
  --warning: #C77A0A;
  --info: var(--aim-blue);
  --danger: #C0392B;

  /* ---- Navbar ---- */
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-bg-solid: #ffffff;
  --nav-border: var(--aim-gray-200);
  --nav-fg: var(--aim-gray-700);
  --nav-hover-bg: var(--aim-gray-100);
}

/* ==========================================================================
   2. Blocs swatch remap
   Every generated class (.tc-NNNN, .bgc-NNNN, .ltc-NNNN and the mini-*
   components) resolves its colour through one of these, so the whole export
   moves onto the brand ramp before a single component rule is written.

   3131 was the site's one do-everything blue — section fills, button fills,
   borders and all body text at once. Here it keeps only the *foreground* role,
   brand blue for fills, borders and icons; the section fills it used to carry
   become navy in section 6, which is where the light <-> navy rhythm comes from.
   ========================================================================== */

:root {
  --swatch-var-7747: #ffffff;               /* white — text on navy, light fills */
  --swatch-var-3131: var(--aim-blue);       /* was #023E8A — primary brand blue */
  --swatch-var-5803: var(--aim-blue-light); /* was #0078B7 — secondary accent */
  --swatch-var-4497: var(--aim-blue-100);   /* was #CAF1F8 — pale blue wash */
  --swatch-var-426:  rgba(255, 255, 255, 0.6);
  --swatch-var-458:  var(--aim-gray-900);   /* was pure black */
  --swatch-var-7096: var(--aim-blue);
  --swatch-var-4580: var(--aim-blue-light);
  --swatch-var-3202: rgba(2, 14, 30, 0.04);
  --swatch-var-502:  rgba(2, 14, 30, 0.5);
  --swatch-var-3134: rgba(255, 255, 255, 0.8);
  --swatch-var-6410: var(--danger);         /* was #AE1E2C */
  --swatch-var-4593: rgba(255, 255, 255, 0.5);
  --swatch-var-4622: var(--aim-gray-200);   /* was #EAEAEA */
  --swatch-var-6663: var(--aim-gray-900);   /* was #101010 */
  --swatch-var-7479: var(--aim-gray-500);   /* was #555555 */
  --swatch-var-5276: var(--aim-blue-light); /* was #569EF9 */
  --swatch-var-2752: var(--aim-navy-2);     /* was #183A56 */
  --swatch-var-4448: var(--aim-navy-fg-3);  /* was #577592 */
}

/* ==========================================================================
   3. Surface context
   The default context is the light editorial surface. Any element that paints
   itself navy re-declares the context, and everything inside it — headings,
   body copy, borders, buttons, icons — follows without a scoped rule.
   ========================================================================== */

:root {
  --ctx-fg: var(--fg-strong);
  --ctx-body: var(--fg-body);
  --ctx-muted: var(--fg-muted);
  --ctx-border: var(--border-soft);
  --ctx-border-strong: var(--border-default);
  --ctx-accent: var(--accent);
  --ctx-accent-hover: var(--accent-hover);
  --ctx-accent-fg: #ffffff;
  --ctx-card: var(--surface-card);
  --ctx-sunken: var(--surface-sunken);
  --ctx-shadow: var(--shadow-sm);
}

/* Navy sections and panels. On navy the accent flips to the light blue — brand
   blue is 1.9:1 there, the light blue is 7.4:1 — and accent fills take navy
   text rather than white. */
.bgc-3131,
.background-primary-variant,
.mini-dark-gradient,
.mini-feature-event-div,
.mini-pricing-row-section,
#footer {
  --ctx-fg: var(--panel-fg);
  --ctx-body: var(--panel-fg-2);
  --ctx-muted: var(--panel-fg-3);
  --ctx-border: var(--panel-border);
  --ctx-border-strong: var(--panel-border);
  --ctx-accent: var(--aim-blue-light);
  --ctx-accent-hover: var(--aim-blue-200);
  --ctx-accent-fg: var(--aim-navy);
  --ctx-card: var(--panel-2);
  --ctx-sunken: var(--panel-3);
  --ctx-shadow: none;
}

/* ...and back again. A light-filled element inside a navy section — the
   testimonial cards, the platform tiles — has to reset the context, or it
   keeps inheriting near-white text onto its own pale surface. Pairing every
   fill with the context it implies is what makes nesting safe in either
   direction. */
.bgc-7747,
.background-primary,
.bgc-4497,
.background-secondary,
.background-secondary-variant,
.mini-pricing-row .bgc-3131 {
  --ctx-fg: var(--fg-strong);
  --ctx-body: var(--fg-body);
  --ctx-muted: var(--fg-muted);
  --ctx-border: var(--border-soft);
  --ctx-border-strong: var(--border-default);
  --ctx-accent: var(--accent);
  --ctx-accent-hover: var(--accent-hover);
  --ctx-accent-fg: #ffffff;
  --ctx-card: var(--surface-card);
  --ctx-sunken: var(--surface-sunken);
  --ctx-shadow: var(--shadow-sm);
}

/* A white card on a white section has only its border to separate it from the
   page. Where the section is explicitly white, cards drop to the page tint so
   they still read as cards. */
.bgc-7747,
.background-primary {
  --ctx-card: var(--surface-page);
}

/* Vestigial dark mode. The export adds body.dark-theme when the operating
   system prefers dark, but the only rule that ever responded to it painted
   .light-mode sections #696969 — a mid grey that leaves the body copy at
   1.9:1 — and the switch it was built for does not exist in the markup. The
   marketing surface is light editorial with navy panels, on every OS, so this
   holds those two pages to the same surface as the other thirty-three. */
.dark-theme .light-mode {
  background-color: var(--surface-card);
  color: var(--ctx-body) !important;
}

/* ==========================================================================
   4. Base
   ========================================================================== */

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

body {
  background: var(--surface-page);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(102, 188, 233, 0.30);
}

code, kbd, pre, samp, .font-monospace {
  font-family: var(--font-mono);
}

/* The export transitions `background` on every a and button for 0.3s, and
   `all 0.5s` on .btn — so colour changes are untransitioned and background
   changes crawl. Name the properties that actually move, at 0.15s. */
a, button, .btn, .a-btn, .bloc-link {
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              fill var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* The export sets `outline:none!important` on every a and button, so this ring
   is the only focus affordance left on the site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--ring) !important;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--ctx-border);
  opacity: 1;
}

/* ==========================================================================
   5. Typography

   The export ships one rule that paints *everything* brand blue:

     h1,h2,h3,h4,h5,h6,p,label,.btn,a {
       line-height:1.5em; font-family:"Roboto"; color:var(--swatch-var-3131)!important;
     }

   A page whose headings, body copy, labels, links and buttons are all the same
   blue has no hierarchy left to read. This replaces it with the system's
   three-step scale — near-black headings, muted-grey body, brand-blue links —
   at the same specificity, so it wins by loading later. The !important is
   inherited from the rule being replaced, not a choice.
   ========================================================================== */

h1, h2, h3, h4, h5, h6, p, label, .btn, a {
  font-family: var(--font-sans);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ctx-fg) !important;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

p, label {
  color: var(--ctx-body) !important;
}

a {
  color: var(--ctx-accent) !important;
}

a:hover, a:focus {
  color: var(--ctx-accent-hover) !important;
}

h1 {
  font-size: clamp(34px, 4.6vw, var(--fs-h1));
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-display);
}

/* The hero headline is the one display-scale moment on the site. */
.bloc-fill-screen h1,
#start h1 {
  font-size: clamp(40px, 6vw, 60px);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

h2 {
  font-size: clamp(26px, 3.4vw, var(--fs-h2));
  font-weight: var(--fw-bold);
}

h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-sm);  font-weight: var(--fw-semibold); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

strong, b, .bold {
  font-weight: var(--fw-bold);
}

/* Blocs' paragraph sizes, re-pitched onto the system's scale. */
.mini-large-p { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.mini-small-p { font-size: var(--fs-sm); }

/* Eyebrow label: 13px uppercase, +0.1em tracking, brand blue. */
.mini-subtitle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: var(--ctx-accent) !important;
}

/* The export underlines these at rest; the system uses colour until hover. */
.mini-small-link,
.mini-solid-link {
  text-decoration: none !important;
}

.mini-small-link:hover,
.mini-solid-link:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   6. Surfaces and text roles

   The generated text utilities are named for the old palette rather than for
   what they do, and the same one is used on light and on navy. Mapping each to
   a --ctx-* role makes them correct in both places without touching markup:

     .text-primary / .tc-7747          strongest text on this surface
     .text-primary-variant / .tc-3131  heading-strength text
     .text-secondary                   body text
     .text-secondary-variant / .tc-4497  muted / supporting text
     .tc-5803                          accent text
   ========================================================================== */

.l-bloc { color: var(--fg-body); }
.d-bloc { color: var(--ctx-body); }

.text-primary,
.tc-7747,
.text-primary-variant,
.tc-3131,
.tc-458,
.tc-6663 {
  color: var(--ctx-fg) !important;
}

.text-secondary {
  color: var(--ctx-body) !important;
}

.text-secondary-variant,
.tc-4497,
.tc-7479 {
  color: var(--ctx-muted) !important;
}

.tc-5803,
.tc-7096,
.tc-4580 {
  color: var(--ctx-accent) !important;
}

/* .white-on-blue was named for the fill it used to sit on. The comparison
   tables' featured column is no longer a navy slab, so this has to follow the
   surface rather than stay literally white. */
.white-on-blue { color: var(--ctx-fg) !important; }

.divider-h,
.mini-divider-style,
.mini-footer-divider,
.divider-h.bgc-4497 {
  background-color: var(--ctx-border);
  min-height: 1px;
}

/* ==========================================================================
   7. Layout — 1080px measure, 96px section rhythm, 24px gutters
   ========================================================================== */

.bloc {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.bloc-xl { padding-top: 128px; padding-bottom: 128px; }
.bloc-lg { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.bloc-md { padding-top: 48px; padding-bottom: 48px; }

.bloc > .container {
  max-width: var(--container-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Full-width blocs opt out of the section padding, not the measure — their
   content still has to line up with every other section. The export pins their
   container to 100% with !important, so this needs the same weight. */
.full-width-bloc {
  padding-left: 0;
  padding-right: 0;
}

.full-width-bloc > .container {
  max-width: var(--container-max) !important;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Carousels and horizontal scrollers are the one composition that wants the
   full viewport. */
.full-width-bloc > .container:has(.carousel),
.full-width-bloc > .container:has(.splide),
.full-width-bloc > .container:has(.blocs-horizontal-scroll-container) {
  max-width: 100% !important;
}


.mini-cta-background {
  padding: 64px var(--container-pad);
  border-radius: var(--radius-xl);
}

.mini-horizontall-row {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  .bloc-xl { padding-top: 72px; padding-bottom: 72px; }
  .bloc-lg { padding-top: 64px; padding-bottom: 64px; }
  .bloc-md { padding-top: 40px; padding-bottom: 40px; }
}

/* ==========================================================================
   8. Navbar — sticky, translucent, light on every page

   Sized to match the documentation wiki's navbar so the two surfaces read as
   one site: a 64px bar with a 28px wordmark. Both numbers are mirrored in the
   DokuWiki template (--nav-height and #dw__logo); change them together.
   ========================================================================== */

/* The comparison tables use position:sticky rows, which create their own
   stacking contexts and painted over the nav dropdowns. The bar only got a
   z-index once scrolling added .sticky; it needs one at rest too. */
.sticky-nav {
  position: relative;
  z-index: 1030;
}

.sticky-nav {
  --nav-height: 64px;
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--nav-border);
  padding-top: 0;
  padding-bottom: 0;
}

/* Browsers without backdrop-filter get the solid surface rather than a
   half-transparent bar with the page showing through. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sticky-nav { background: var(--nav-bg-solid) !important; }
}

.sticky-nav.sticky {
  box-shadow: var(--shadow-sm);
}

.sticky-nav > .container > .row {
  min-height: var(--nav-height);
}

.sticky-nav .navbar {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Bootstrap's navbar container centres a lone brand between its flex edges,
   which floats the wordmark into the middle of its column. The docs navbar
   sits the mark hard against the left gutter; match it. */
.sticky-nav .navbar > .container-fluid {
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
}

/* The brand is an inline <img> inside a block <a>, so it sat on a text
   baseline in a 43px line box and pushed the bar to 68px. Flex takes the line
   box out of it and leaves the mark's own 28px as the only height. */
.navbar-brand,
.navbar-brand picture {
  display: flex;
  align-items: center;
  line-height: 1;
}

.navbar-brand {
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand img {
  height: 28px;
  width: auto;
  max-width: 100%;
}

/* The sign-up button is the tallest thing in the bar; hold it under the 64px
   so the wordmark and the nav row stay on one line. */
.sticky-nav .btn {
  padding: 9px 18px;
}

.site-navigation .nav-link,
.navbar-nav > li > a.nav-link {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* .ltc-3131 is the export's "this link takes swatch 3131" class and lands on
   every nav item. In the navbar these should read as furniture — grey at rest,
   brand blue on hover — not as twenty links competing with the wordmark. */
.sticky-nav .ltc-3131,
.sticky-nav .nav-link,
.sticky-nav .site-navigation .nav-link {
  color: var(--nav-fg) !important;
  fill: var(--nav-fg);
}

.sticky-nav .ltc-3131:hover,
.sticky-nav .nav-link:hover,
.sticky-nav .nav-link:focus,
.sticky-nav .dropdown.show > .nav-link {
  color: var(--accent) !important;
  background: var(--nav-hover-bg);
  fill: var(--accent);
}

.navbar-nav li a.mini-active,
.navbar-nav li a[data-active-page="mini-active"] {
  color: var(--accent) !important;
  background: var(--accent-soft-bg);
  font-weight: var(--fw-semibold);
}

.menu-icon-navigation-1-stroke {
  stroke: var(--nav-fg) !important;
  stroke-width: 2;
}

/* Dropdowns */
.dropdown-menu {
  margin-top: 6px;
  padding: 6px;
  min-width: 220px;
  background: var(--nav-bg-solid);
  border: 1px solid var(--nav-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1040;
}

.dropdown-menu .nav-link,
.dropdown-menu .dropdown-item {
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--nav-fg) !important;
}

.dropdown-menu .nav-link:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .nav-link:focus,
.dropdown-menu .dropdown-item:focus {
  background: var(--nav-hover-bg);
  color: var(--accent) !important;
}

/* ==========================================================================
   9. Buttons

   The export squares every button off with `.btn{border-radius:0!important}`
   and gives .btn-clean a text-shadow plus an inset highlight — the glossy
   idiom the system replaced with flat fills and a 6px radius. Primary darkens
   on hover, ghost darkens border and text, press is a colour shift only.
   ========================================================================== */

.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: var(--radius-md) !important;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

.btn-lg {
  font-size: var(--fs-body);
  padding: 13px 26px;
}

.btn-clean,
.btn-clean:focus,
.btn-clean:hover {
  text-shadow: none;
  box-shadow: none !important;
}

.btn-d,
.btn-d:hover,
.btn-d:focus {
  background: transparent;
}

/* ---- Primary ---- */
.mini-solid-button {
  background-color: var(--ctx-accent);
  border-color: var(--ctx-accent) !important;
  color: var(--ctx-accent-fg) !important;
  fill: var(--ctx-accent-fg);
}

.mini-solid-button:hover,
.mini-solid-button:focus {
  background-color: var(--ctx-accent-hover) !important;
  border-color: var(--ctx-accent-hover) !important;
  color: var(--ctx-accent-fg) !important;
}

.mini-solid-button:active {
  background-color: var(--ctx-accent-hover) !important;
  border-color: var(--ctx-accent-hover) !important;
  color: var(--ctx-accent-fg) !important;
}

/* ---- Ghost ---- */
.mini-wire-button,
.video-button {
  background-color: transparent !important;
  border-color: var(--ctx-border-strong) !important;
  color: var(--ctx-fg) !important;
  fill: var(--ctx-fg);
}

.mini-wire-button:hover,
.mini-wire-button:focus,
.video-button:hover,
.video-button:focus {
  background-color: transparent !important;
  border-color: var(--ctx-accent) !important;
  color: var(--ctx-accent) !important;
  fill: var(--ctx-accent);
}

.mini-wire-button:active,
.video-button:active {
  border-color: var(--ctx-accent-hover) !important;
  color: var(--ctx-accent-hover) !important;
}

.video-button-selected {
  background-color: var(--ctx-accent) !important;
  border-color: var(--ctx-accent) !important;
  color: var(--ctx-accent-fg) !important;
  fill: var(--ctx-accent-fg);
}

/* The red trial CTA. .white-on-blue follows the surface everywhere else, but
   on a filled button the fill *is* the surface, and this one is danger red. */
.btn.white-on-blue,
.btn-c-6410 {
  color: #ffffff !important;
  fill: #ffffff;
}

.btn-c-6410:hover {
  background: #96261C !important;
  color: #ffffff !important;
}

/* Scroll-to-top and the horizontal-scroll arrows */
.scrollToTop {
  background: var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.scrollToTop:hover {
  background: var(--accent-hover);
}

.scroll-to-top-btn-icon {
  stroke: #ffffff;
  stroke-width: 2;
  fill: none;
}

.blocs-round-btn {
  background: rgba(2, 14, 30, 0.55);
  transform: scale(1);
}

.blocs-round-btn:active {
  background: rgba(2, 14, 30, 0.75);
  transform: scale(1) !important;
}

/* ==========================================================================
   10. Cards and surfaces
   White fill, hairline border, 12px radius, resting shadow-sm. On navy the
   context flips the same rule to a navy-2 fill with a navy border and no
   shadow — a shadow does nothing over near-black.
   ========================================================================== */

.card {
  background-color: var(--ctx-card);
  border: 1px solid var(--ctx-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--ctx-shadow);
  color: var(--ctx-body);
}

/* .card-sq squares the corners off and .card-rd rounds them to 30px; the
   system's large containers are 12px either way. */
.card-sq,
.card-sq .card-header,
.card-sq .card-footer,
.card-rd,
.card-rd .card-header,
.card-rd .card-footer {
  border-radius: var(--radius-xl);
}

/* Bootstrap gives card headers a grey cap fill; the system's cards are one
   flat surface. :where() keeps this at zero specificity so a card header that
   asks for its own fill — the navy FAQ headers do — still gets it. */
:where(.card-header, .card-footer) {
  background-color: transparent;
}

.card-header,
.card-footer {
  border-color: var(--ctx-border);
}

/* .global-radius squares images and panels off with !important. */
.global-radius {
  border-radius: var(--radius-xl) !important;
}

/* Pricing cards sit inside the navy pricing section: navy-2 over navy. The
   export painted them with a linear-gradient; the system is flat colour
   fields, so this is the single colour that gradient was fading between. */
.mini-dark-gradient {
  background: var(--panel-2);
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-xl);
}

/* The example-app cards are a deliberate "product moment" on a light section —
   a navy card, which section 3 has already given a navy context, so the ghost
   button and caption inside them come out light without a rule each. */
.mini-feature-event-div {
  background-color: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--ctx-body) !important;
  box-shadow: var(--shadow-md);
}

.mini-feature-event-card-heading {
  color: var(--ctx-fg) !important;
  font-weight: var(--fw-semibold);
}

/* The platform tiles float over the navy "runs anywhere" section. They keep
   their pale fill — and with it a light context, so the OS glyphs come out
   brand blue on pale rather than brand blue on navy, which is 2:1. */
.mini-feature-color-1,
.mini-feature-color-2,
.mini-feature-color-3 {
  border: 1px solid var(--ctx-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-panel);
}

/* Hover lift is a shadow change, not a margin change — the export's version
   moves the card 7px and reflows everything under it. */
.mini-pricing-3-card,
.mini-transition-fast {
  transition: box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.mini-pricing-3-card:hover,
.mini-transition-fast:hover {
  margin-top: 0;
  margin-bottom: 0;
  border-color: var(--ctx-accent) !important;
}

.mini-testimonial-card,
.mini-timeline-box,
.mini-review-box-border-third,
.mini-scrolled-card {
  border-radius: var(--radius-xl);
}

.mini-testimonial-card,
.mini-timeline-box {
  background: var(--ctx-card);
  border: 1px solid var(--ctx-border);
  box-shadow: var(--ctx-shadow);
}

.mini-faq-1-div {
  border-radius: var(--radius-xl);
  border: 1px solid var(--ctx-border);
  box-shadow: var(--ctx-shadow);
}

/* ==========================================================================
   11. Forms
   ========================================================================== */

.form-control,
.form-select {
  min-height: 42px;
  padding: 9px 12px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--fg-strong) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}

.form-control::placeholder {
  color: var(--fg-muted);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-card);
  color: var(--fg-strong) !important;
  border-color: var(--aim-blue-light);
  box-shadow: var(--ring);
}

.form-label {
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ctx-body) !important;
}

.form-group {
  margin-bottom: 16px;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--aim-blue-light);
  box-shadow: var(--ring);
}

.form-check-label {
  font-size: var(--fs-sm);
  color: var(--ctx-body) !important;
}

/* ==========================================================================
   12. Comparison and pricing tables
   ========================================================================== */

.mini-table-16 {
  padding: 12px 16px;
}

/* The sticky header row rides over the grid as the reader scrolls; the blur
   keeps the rows underneath legible without a hard fill. */
.mini-pricing-row {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--border-soft) !important;
}

.mini-pricing-row-section {
  background-color: var(--panel);
  border-color: var(--panel-border) !important;
}

.mini-pricing-13-head,
.mini-pricing-title {
  padding: 16px;
}


.mini-pricing-price {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}

.mini-no-border {
  border-width: 0 !important;
}

/* ==========================================================================
   13. Accordion / FAQ
   ========================================================================== */

.mini-faq-1-question {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  padding: 16px 20px;
  border-width: 0 0 1px 0;
  border-color: var(--ctx-border) !important;
  color: var(--ctx-fg) !important;
}

.mini-faq-1-question:hover,
.mini-faq-1-question:focus {
  background: var(--ctx-sunken);
  color: var(--ctx-accent) !important;
}

.mini-faq-1-body {
  padding: 20px;
  font-size: var(--fs-body);
}

.mini-faq-last-header .mini-faq-1-question {
  border-width: 0 !important;
}

/* ==========================================================================
   14. Icons and media
   The export pins several icon fills with !important, so these need the same
   weight. Each one takes the context accent rather than a fixed blue, so the
   same glyph works on light and on navy.
   ========================================================================== */

.mini-apple-icon,
.mini-windows-icon,
.mini-linux-icon,
.mini-circle-check,
.mini-pricing-small-icon,
.mini-timeline-icon-dot,
.svg-icon-contact-1-style,
.anchor-icon-primary-variant {
  fill: var(--ctx-accent) !important;
}

.mini-circle-check-white,
.svg-icon-bloc-2-style {
  fill: var(--ctx-fg) !important;
}

.mini-social-icon {
  fill: var(--ctx-muted) !important;
  width: 20px !important;
  margin-left: 6px;
  margin-right: 6px;
  transition: fill var(--dur-fast) var(--ease);
}

a:hover .mini-social-icon {
  fill: var(--ctx-accent) !important;
}

.anchor-icon-primary-variant {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
}

img.img-fluid,
.mini-feature-image {
  border-radius: var(--radius-xl);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

#footer {
  background-color: var(--panel);
  color: var(--ctx-body);
}

/* Column headings are labels, not headlines. */
#footer .mini-large-p {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ctx-muted) !important;
}

#footer a {
  color: var(--ctx-body) !important;
  text-decoration: none !important;
}

#footer a:hover {
  color: var(--ctx-accent) !important;
}

#footer iframe {
  max-width: 100%;
  border: 0;
}

.sf-root a,
.sf-root a:hover {
  color: var(--ctx-muted) !important;
}

/* ==========================================================================
   16. Video pages
   The three video indexes are a poster grid plus a filter rail; they inherit
   everything above and only need the poster chrome brought onto the ramp.
   ========================================================================== */

.any-video-poster-container,
.any-video-poster-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.any-video-poster-overlay {
  background: rgba(2, 14, 30, 0.35);
  transition: background var(--dur-fast) var(--ease);
}

.any-video-poster-wrap:hover .any-video-poster-overlay {
  background: rgba(2, 14, 30, 0.5);
}

.any-video-poster-wrap img,
.any-video-poster-image img {
  transition: transform var(--dur-med) var(--ease);
}

.figure-caption,
.any-video-caption {
  font-size: var(--fs-sm);
  color: var(--ctx-muted) !important;
}

.video-button-height {
  border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   17. Motion
   Scroll-reveal is opacity plus a rise over 0.7s; hover work is 0.15s.
   Nothing bounces, springs or parallaxes.
   ========================================================================== */

.fadefx__3,
.fadefx__3:hover {
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.mini-no-transition,
.mini-no-transition:hover {
  transition: none;
}

/* 1.05 is a lurch at poster size. */
.any-video-poster-wrap:hover img.zoomfx__5 {
  transform: scale(1.02);
}

/* ---- Scroll hint ----
   The hero "there is more below" mouse. The Blocs export ships the markup for
   it on the home and G2 heroes, but the rules that draw it never made it into
   all.css — so on both pages it has been rendering as an empty 0x0 div. Shape
   and the 2s loop are the original's, taken from the live site.

   The motion is not: the live version runs the dot on
   cubic-bezier(0.68,-0.65,0.265,1.35) and stretches it to scaleY(3) — a
   back-ease that overshoots at both ends. The design system asks for a gentle
   scroll-hint bob on the standard ease, with no bounce and no spring, so the
   dot here travels and fades instead of springing and squashing.

   Colours come from the context, which gives the .mouse-symbol-light variant
   the original needed for dark heroes for free. */

.mouse-symbol,
.device-symbol {
  width: 29px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  border: 2px solid var(--ctx-border-strong);
  border-radius: var(--radius-pill);
}

.mouse-symbol::after,
.device-symbol::after {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 50%;
  margin-left: -1.5px;
  width: 3px;
  height: 3px;
  background-color: var(--ctx-muted);
  border-radius: var(--radius-pill);
}

.slow-touch-scroll::after {
  animation: aim-scroll-hint 2s var(--ease) infinite;
}

/* Starts visible at the top and fades as it descends, so the first frame — and
   the frame it holds if animation never runs — is a dot sitting in the mouse,
   not an empty outline. The return to the top happens while it is fully
   transparent, so the loop has no visible snap. */
@keyframes aim-scroll-hint {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(22px); opacity: 0; }
  100% { transform: translateY(22px); opacity: 0; }
}

.mouse-symbol {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The blanket rule above would freeze the hint on its final frame, which is
     opacity 0 — an empty outline. Hold it still and visible instead. */
  .slow-touch-scroll::after {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   18. Surface fills — last on purpose

   These are the classes that say "this element is navy" or "this element is
   white", and they have to outrank every component default above: a card
   header, a bloc and a pricing row all set their own background, and whichever
   rule came last would otherwise win by source order rather than by intent.
   Keeping the fills here means an explicit surface class always paints.

   This is what produces the light <-> navy rhythm: marketing sections light,
   product moments navy.
   ========================================================================== */

.bgc-7747,
.background-primary {
  background-color: var(--surface-card);
}

.bgc-3131,
.background-primary-variant {
  background-color: var(--panel);
  color: var(--ctx-body);
}

.bgc-4497,
.background-secondary,
.background-secondary-variant {
  background-color: var(--accent-soft-bg);
}

/* Except where the fill *is* the divider: a 1px rule painted with a background
   colour, which the pale wash would make invisible. */
.divider-h.bgc-4497 {
  background-color: var(--ctx-border);
}

/* Pricing cards are panels over a panel: navy-2 on navy, per the system's
   dark card variant. */
.mini-dark-gradient {
  background-color: var(--panel-2);
}

/* The middle card is the featured tier, but it carries .background-primary-
   variant — the same navy as the section behind it — so the one card meant to
   stand out was the only one with no edges. Give it the accent border and the
   panel lift the design system's featured PriceCard uses. */
.mini-pricing-3-card.background-primary-variant {
  background-color: var(--panel-2);
  border-color: var(--aim-blue-light) !important;
  box-shadow: var(--shadow-panel);
}

/* The comparison tables marked their featured column by painting every cell
   navy — a full-height black slab down the middle of an otherwise editorial
   grid. The pale accent wash marks the same column without shouting, and the
   light context above turns its .white-on-blue text back to near-black. */
.mini-pricing-row .bgc-3131 {
  background-color: var(--accent-soft-bg);
}