/*!
 * ALLOut Security — Button System v2
 * aos-btn-v2.css — the shipping stylesheet.
 *
 * Enqueue AFTER BeTheme's stylesheet and after Theme Options inline CSS.
 * Contains no @import, no url(), no remote reference of any kind — safe
 * under a CSP with font-src 'self'. Fonts are referenced by family name
 * only (Mulish), which is already self-hosted by the theme.
 *
 * The .is-hover / .is-active / .is-focus / .is-tip-open classes are state
 * MIRRORS used by the admin preview screen to pin a state open. They are
 * harmless in production (nothing emits them on the front end) and MUST be
 * kept if you want the plugin's live preview to work.
 */

/* ============================================================================
   ALLOut Security — BUTTON SYSTEM v2   (the CSS to ship)
   Namespace: .aos-btn-v2 + modifiers, layered ON TOP of the frozen BeTheme
   class string ("button button-allout-portal inline-flex button_right
   button_size_2 button_theme"). Nothing renamed, no markup added or removed.

   VARIANT SLOT -> SEMANTIC (1:1, no data migration)
     accent     -> --primary     red solid    (the plugin default CTA)
     default    -> --outline     surface-aware outline
     action     -> --secondary   navy solid
     highlight  -> --subtle      quiet grey fill
     plain link -> --link        text link (the only surviving blue)

   SIZE is driven by the legacy button_size_1..4 classes already in the
   string, so the plugin emits nothing new. Real sizes; transform:scale()
   is explicitly killed.

   SURFACE: wrap navy bands in .aos-surface-navy. Every variant re-tokenises.

   !important POLICY: all values live in custom properties, which never
   compete with Theme Options CSS. Only the declarations BeTheme itself
   writes for .button are forced — each marked [!I] with the reason.
   ========================================================================== */

/* --- 1. Palette. Drop this block if the DS token sheet already loads. ---- */
.aos-btn-v2, .aos-surface-navy, .aos-align {
  --red-500:#E8323F; --red-600:#D11F2C; --red-700:#AE1822;
  --navy-200:#A9B7D6; --navy-700:#14224A; --navy-800:#0E1C40; --navy-900:#081634;
  --blue-400:#3D63D8; --blue-500:#2B4FC9; --blue-600:#1F3CA6;
  --gray-50:#F7F8FB; --gray-100:#EFF1F6; --gray-200:#E3E7EF; --gray-300:#D2D8E4;
  --gray-400:#AAB2C4; --gray-500:#7B8499; --gray-600:#5A6379; --gray-700:#3E4658;
}

/* --- 2. Base: shape, rhythm, and the depth recipe carried over from the
       2026 page-header button (inset top highlight + short navy drop). --- */
.aos-btn-v2 {
  /* size tokens — overwritten by the size classes in section 3 */
  --aosb-font: 15px;
  --aosb-pad-y: 12px;
  --aosb-pad-x: 22px;
  --aosb-h: 44px;
  --aosb-gap: 8px;
  --aosb-icon: 16px;
  --aosb-radius: 4px;
  --aosb-drop: 0 3px 6px 0 rgba(0,44,97,.10);
  /* the inset highlight is what stops a flat fill reading as 2018 */
  --aosb-inset: 0 -1px 3px 0 rgba(1,60,136,.20) inset;
  --aosb-depth: var(--aosb-inset), var(--aosb-drop);
  --aosb-depth-hover: var(--aosb-inset), 0 6px 18px 0 rgba(14,28,64,.18);
  /* focus: one crisp offset ring in the surface's own contrast colour.
     No halo, no glow — it sits outside the button so it never touches the
     fill, and it reads at 3:1 on white and on navy. */
  --aosb-ring: var(--navy-700);

  display: inline-flex !important;        /* [!I] .inline-flex utility and the theme both set display */
  align-items: center;
  justify-content: center;
  gap: var(--aosb-gap);
  box-sizing: border-box;
  min-height: var(--aosb-h);
  padding: var(--aosb-pad-y) var(--aosb-pad-x) !important;  /* [!I] Theme Options set .button padding */
  /* fallbacks keep a bare .aos-btn-v2 (no variant class) rendering as outline */
  border: 1.5px solid var(--aosb-bd, var(--gray-300)) !important;  /* [!I] Theme Options set .button border */
  border-radius: var(--aosb-radius) !important;             /* [!I] Theme Options set button rounding */
  background: var(--aosb-fill, #fff) !important;            /* [!I] BeTheme paints the accent fill */
  color: var(--aosb-ink, var(--navy-700)) !important;       /* [!I] BeTheme sets .button colour */
  box-shadow: var(--aosb-depth) !important;                 /* [!I] Theme Options set/clear shadows */
  transform: none !important;                               /* [!I] kills the plugin's scale() sizing */
  font-family: Mulish, system-ui, sans-serif;
  font-size: var(--aosb-font) !important;                   /* [!I] sizing moves here from scale() */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;                         /* [!I] theme underlines .button:hover */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .08s ease, color .16s ease;
  -webkit-font-smoothing: antialiased;   /* real sizes, so no more scaled-text blur */
}
/* no !important below — the theme has no rules for these selectors */
.aos-btn-v2 .button_label { color: inherit; font: inherit; letter-spacing: inherit; }
.aos-btn-v2 .button_icon {
  display: inline-flex; align-items: center; justify-content: center;
  order: 2;                              /* icon right = default */
  font-size: var(--aosb-icon); line-height: 1; flex: 0 0 auto;
}
/* the size is set on the SPAN only — repeating it on the <i> resolves an
   em token twice and compounds it (a .8em icon becomes .64em) */
.aos-btn-v2 .button_icon i { font-size: 1em; line-height: 1; display: block; }
/* icon side is CSS only — the legacy button_left / button_right classes drive it */
.aos-btn-v2:is(.button_left, .aos-btn-v2--icon-left) .button_icon { order: 0; }
.aos-btn-v2:is(.button_noicon, .aos-btn-v2--noicon) .button_icon { display: none; }

/* --- 3. Real sizes: own font-size / padding / height / gap / icon / drop.
       Normal and above clear the 44px hit target. ---------------------- */
.aos-btn-v2:is(.button_size_1, .aos-btn-v2--s)  { --aosb-font:13px; --aosb-pad-y:8px;  --aosb-pad-x:14px; --aosb-h:36px; --aosb-gap:6px;  --aosb-icon:14px; --aosb-drop:0 2px 4px 0 rgba(0,44,97,.10); }
.aos-btn-v2:is(.button_size_2, .aos-btn-v2--m)  { --aosb-font:15px; --aosb-pad-y:12px; --aosb-pad-x:22px; --aosb-h:44px; --aosb-gap:8px;  --aosb-icon:16px; }
.aos-btn-v2:is(.button_size_3, .aos-btn-v2--l)  { --aosb-font:17px; --aosb-pad-y:14px; --aosb-pad-x:28px; --aosb-h:50px; --aosb-gap:10px; --aosb-icon:18px; --aosb-drop:0 4px 8px 0 rgba(0,44,97,.11); }
.aos-btn-v2:is(.button_size_4, .aos-btn-v2--xl) { --aosb-font:19px; --aosb-pad-y:17px; --aosb-pad-x:34px; --aosb-h:58px; --aosb-gap:12px; --aosb-icon:20px; --aosb-drop:0 5px 12px 0 rgba(0,44,97,.12); }
/* XS and XXL have no legacy button_size_* slot — they are opt-in modifiers
   that sit ALONGSIDE an existing size class, so they must outrank it.
   :is(.button_size_1, …) is (0,2,0), so a two-class modifier only ties and
   would be decided by source order. Tripling the class raises it to (0,3,0)
   and makes the win independent of how Theme Options CSS is concatenated. */
.aos-btn-v2.aos-btn-v2--xs.aos-btn-v2--xs   { --aosb-font:12px; --aosb-pad-y:6px;  --aosb-pad-x:10px; --aosb-h:28px; --aosb-gap:5px;  --aosb-icon:12px; --aosb-drop:0 1px 2px 0 rgba(0,44,97,.10); }
.aos-btn-v2.aos-btn-v2--xxl.aos-btn-v2--xxl { --aosb-font:21px; --aosb-pad-y:21px; --aosb-pad-x:42px; --aosb-h:68px; --aosb-gap:14px; --aosb-icon:22px; --aosb-drop:0 8px 20px 0 rgba(0,44,97,.14); }


/* --- 4. Variants on LIGHT surfaces (#fff / --gray-50) ------------------- */

/* accent -> PRIMARY. red-600, not red-500: white on #E8323F is 4.2:1 and
   fails AA below 18.66px bold; #D11F2C is 5.3:1 and reads as the same red. */
.aos-btn-v2--primary   { --aosb-fill: var(--red-600);  --aosb-ink:#fff;             --aosb-fill-hover: var(--red-700);  --aosb-fill-active: var(--red-700);  --aosb-bd: transparent;      --aosb-bd-hover: transparent; }
/* action -> SECONDARY. navy solid — the second solid in a CTA pair. */
.aos-btn-v2--secondary { --aosb-fill: var(--navy-700); --aosb-ink:#fff;             --aosb-fill-hover: var(--navy-900); --aosb-fill-active: var(--navy-900); --aosb-bd: transparent;      --aosb-bd-hover: transparent; }
/* default -> OUTLINE. the everyday partner to a red primary. */
.aos-btn-v2--outline   { --aosb-fill:#fff;             --aosb-ink: var(--navy-700); --aosb-fill-hover: var(--gray-100); --aosb-fill-active: var(--gray-200); --aosb-bd: var(--gray-300);  --aosb-bd-hover: var(--gray-500); --aosb-inset: 0 0 0 0 rgba(0,0,0,0); --aosb-drop: 0 2px 4px 0 rgba(14,28,64,.06); }
/* highlight -> SUBTLE. quiet fill for rows where every item has a button. */
.aos-btn-v2--subtle    { --aosb-fill: var(--gray-100); --aosb-ink: var(--gray-700); --aosb-fill-hover: var(--gray-200); --aosb-fill-active: var(--gray-300); --aosb-bd: transparent;      --aosb-bd-hover: transparent; --aosb-inset: 0 0 0 0 rgba(0,0,0,0); --aosb-drop: 0 0 0 0 rgba(0,0,0,0); }
/* plain link -> LINK. not a button: no fill, border, depth or height floor
   (WCAG 2.5.8 exempts links in a run of text). */
/* A LINK IS NOT A BUTTON. Every single thing the base class does to build
   a solid control — box, fill, border, radius, padding, height floor,
   depth, nowrap, press — is switched OFF here, hard, not re-tokenised.
   What's left is underlined text sitting on the paragraph's baseline.
   Tripled class = (0,3,0), so no navy or Theme Options rule further down
   the file can put a box back around it. */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link {
  --aosb-ink: var(--blue-500);
  --aosb-icon: .95em;
  --aosb-gap: .3em;
  min-height: 0;
  padding: 0 !important;                  /* [!I] Theme Options padding */
  border: 0 !important;                   /* [!I] kills the box for good */
  border-radius: 0 !important;            /* [!I] */
  background: none !important;            /* [!I] BeTheme paints .button */
  box-shadow: none !important;            /* [!I] no depth on text */
  transform: none !important;             /* [!I] text does not press */
  vertical-align: baseline;
  white-space: normal;                    /* wraps with the copy around it */
  text-decoration: none !important;       /* [!I] the anchor rule underlined the icon too */
}
/* the underline is a real text-decoration on the LABEL, so it skips
   descenders the way a link should and never runs under the icon */
.aos-btn-v2--link .button_label {
  text-decoration: underline !important;             /* [!I] theme strips .button underline */
  /* the !important shorthand above resets thickness to auto, so the
     longhand has to be !important too or it never applies */
  text-decoration-thickness: .07em !important;       /* [!I] */
  text-underline-offset: .18em;
  transition: text-decoration-thickness .15s ease;
}
.aos-btn-v2--link .button_icon { transition: transform .18s ease; }
/* tripled to match the link base (0,3,0) — at (0,2,0) these never applied */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:hover, .is-hover) { --aosb-ink: var(--blue-600); }
.aos-btn-v2--link:is(:hover, .is-hover) .button_label { text-decoration-thickness: .12em !important; }
.aos-btn-v2--link:is(:hover, .is-hover) .button_icon  { transform: translateX(3px); }
.aos-btn-v2--link:is(.button_left, .aos-btn-v2--icon-left):is(:hover, .is-hover) .button_icon { transform: translateX(-3px); }

/* --- 4a. LINK SIZES. A link is typography, not a control, so it gets a
       type scale of its own — and everything inside it is derived in em,
       so icon and gap track the font instead of being set per step.
       Tripled class = (0,3,0), which outranks the (0,2,0) size classes
       regardless of source order. -------------------------------------- */
/* the step you want most of the time: match the paragraph you sit in */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t-inherit { --aosb-font: inherit; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t12 { --aosb-font: 12px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t13 { --aosb-font: 13px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t14 { --aosb-font: 14px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t15 { --aosb-font: 15px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t16 { --aosb-font: 16px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t17 { --aosb-font: 17px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t19 { --aosb-font: 19px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t21 { --aosb-font: 21px; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t24 { --aosb-font: 24px; }
/* display steps — hero and section-header links. Fluid: they scale with
   the viewport between a phone-safe floor and the full desktop size, so a
   42px hero link never blows the line on a 360px screen. Above 24px the
   arrow eases back relative to the text or it starts to dominate. */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t28 { --aosb-font: clamp(20px, 1.2rem + 1.1vw, 28px); --aosb-icon:.9em; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t32 { --aosb-font: clamp(22px, 1.3rem + 1.5vw, 32px); --aosb-icon:.88em; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t36 { --aosb-font: clamp(24px, 1.4rem + 2.0vw, 36px); --aosb-icon:.86em; }
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--t42 { --aosb-font: clamp(26px, 1.5rem + 2.6vw, 42px); --aosb-icon:.84em; }
/* the underline thins proportionally at display sizes — .07em of 42px is
   a 3px rule, which reads as a border rather than an underline */
.aos-btn-v2--link:is(.aos-btn-v2--t28,.aos-btn-v2--t32,.aos-btn-v2--t36,.aos-btn-v2--t42) .button_label { text-decoration-thickness: .045em !important; text-underline-offset: .16em; }
.aos-btn-v2--link:is(.aos-btn-v2--t28,.aos-btn-v2--t32,.aos-btn-v2--t36,.aos-btn-v2--t42):is(:hover,.is-hover) .button_label { text-decoration-thickness: .075em !important; }
/* underline weight is set in em on the label above, so it tracks the type
   at every step — never heavy on 12px, never hairline on 24px */

/* --- 4b. LINK STATES. A link is text, so its states are text events:
       colour deepens, the underline changes character, and nothing ever
       moves, lifts, fills or gains a box. Every rule below exists to UNDO
       a button behaviour that has no meaning on a run of text. ---------- */

/* ACTIVE — no press. You can't push text down. The colour deepens past
   hover to navy and the underline goes solid-heavy for the instant it
   is held; that is the whole feedback. */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:active, .is-active) {
  --aosb-ink: var(--navy-800);
  transform: none !important;                    /* [!I] beats the base press */
}
.aos-btn-v2--link:is(:active, .is-active) .button_label { text-decoration-thickness: .15em !important; }
.aos-btn-v2--link:is(:active, .is-active) .button_icon  { transform: translateX(3px); }
.aos-btn-v2--link:is(.button_left, .aos-btn-v2--icon-left):is(:active, .is-active) .button_icon { transform: translateX(-3px); }

/* FOCUS — no ring, no box, no outline of any kind. A link shows focus the
   way a link does: the underline thickens and the colour deepens, exactly
   like hover but held. Nothing is drawn around the text. */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:focus, :focus-visible, .is-focus) {
  outline: 0 !important;                          /* [!I] beats the base button ring */
  border: 0 !important;                           /* [!I] */
  background: none !important;                    /* [!I] */
  box-shadow: none !important;                    /* [!I] */
  --aosb-ink: var(--navy-800);
}
/* the underline IS the focus indicator here — there is no ring — so this
   longhand must be !important like its siblings, and must also beat the
   display-size override below or t28–t42 focus would swallow it */
.aos-btn-v2--link:is(:focus-visible, .is-focus) .button_label { text-decoration-thickness: .15em !important; }
.aos-btn-v2--link:is(.aos-btn-v2--t28,.aos-btn-v2--t32,.aos-btn-v2--t36,.aos-btn-v2--t42):is(:focus-visible,.is-focus) .button_label { text-decoration-thickness: .09em !important; }
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:focus, :focus-visible, .is-focus) { --aosb-ink:#fff; }

/* DISABLED and LOCKED — a greyed-out link. Same treatment for both: no
   fill, no border, no depth, keep the underline so it still reads as a
   link, grey the whole thing out. Locked is identical plus the padlock
   and its tooltip. #7B8499 on white = 4.6:1, so it stays legible. */
.aos-btn-v2.aos-btn-v2--link:is(.aos-btn-v2--disabled, .aos-btn-v2--locked) {
  --aosb-ink: var(--gray-500);
}
.aos-btn-v2--link:is(.aos-btn-v2--disabled, .aos-btn-v2--locked) .button_icon { transform: none !important; }
/* locked responds just enough to show the tooltip is worth waiting for */
.aos-btn-v2.aos-btn-v2--link.aos-btn-v2--locked:is(:hover, .is-hover) { --aosb-ink: var(--gray-600); }
/* the tooltip sits closer — there is no button box to clear */
.aos-btn-v2--link.aos-btn-v2--locked .custom-tooltip-jq__text { bottom: calc(100% + 7px); }

/* --- 5. States. Six, explicit. The .is-* mirrors exist for the specimen
       page and can be deleted from the shipped file. ------------------- */
.aos-btn-v2:is(:hover, .is-hover) {
  background: var(--aosb-fill-hover, var(--gray-100)) !important;   /* [!I] */
  border-color: var(--aosb-bd-hover, var(--gray-500)) !important;   /* [!I] */
  box-shadow: var(--aosb-depth-hover) !important;  /* [!I] */
}
.aos-btn-v2:is(:active, .is-active) {
  background: var(--aosb-fill-active) !important;  /* [!I] */
  box-shadow: var(--aosb-inset) !important;        /* [!I] press = drop removed */
  transform: translateY(1px) !important;           /* [!I] must beat the scale() rule */
}
.aos-btn-v2:is(:focus-visible, .is-focus) {
  outline: 2.5px solid var(--aosb-ring) !important;  /* [!I] theme sets outline:none on :focus */
  outline-offset: 3px;
  /* depth is untouched, so focus doesn't change the button's weight */
}
/* disabled — legible, not faded. #5A6379 on #E3E7EF = 4.8:1 */
.aos-btn-v2--disabled {
  --aosb-fill: var(--gray-200); --aosb-ink: var(--gray-600);
  --aosb-fill-hover: var(--gray-200); --aosb-fill-active: var(--gray-200);
  --aosb-bd: var(--gray-300); --aosb-bd-hover: var(--gray-300);
  --aosb-depth: none; --aosb-depth-hover: none;
  cursor: not-allowed;
}
/* keep pointer-events so the cursor reads; block navigation with
   aria-disabled + one line of JS, not pointer-events:none */
.aos-btn-v2--disabled:is(:hover, :active, .is-hover, .is-active) {
  box-shadow: none !important;                     /* [!I] */
  transform: none !important;                      /* [!I] */
}

/* --- 6. LOCKED: "you can see this, you can't have it yet."
       Full-contrast label (you can read what you're missing), fill drained
       to the page, hairline border kept so the shape still reads as a
       button, icon slot swapped for a CSS padlock. Hover brightens rather
       than dims — it responds, it just doesn't go anywhere. ----------- */
.aos-btn-v2--locked {
  --aosb-fill: var(--gray-50); --aosb-ink: var(--gray-700);
  --aosb-fill-hover:#fff; --aosb-fill-active:#fff;
  --aosb-bd: var(--gray-300); --aosb-bd-hover: var(--gray-500);
  --aosb-depth: none; --aosb-depth-hover: none;
  position: relative;
  cursor: not-allowed;
}
.aos-btn-v2--locked .button_icon { color: var(--gray-500); }
.aos-btn-v2--locked:is(:hover, .is-hover) .button_icon { color: var(--gray-700); }
/* padlock drawn from the <i> box — no SVG, no new glyph in the icon font */
.aos-btn-v2--locked .button_icon i { position: relative; width:.9em; height:.95em; }
.aos-btn-v2--locked .button_icon i::before {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:.58em; border-radius:1.5px; background: currentColor;
}
.aos-btn-v2--locked .button_icon i::after {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:.44em; height:.34em; border:.12em solid currentColor;
  border-bottom:0; border-radius:.3em .3em 0 0;
}
/* the tooltip that ships inside the locked markup */
.aos-btn-v2--locked .custom-tooltip-jq { position: static; }
.aos-btn-v2--locked .custom-tooltip-jq__text {
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform: translate(-50%, 4px);
  z-index: 20; width: max-content; max-width: 250px;
  padding: 9px 12px 10px; border-radius: 6px;
  background: var(--navy-800); color:#fff;
  font: 700 12.5px/1.45 Mulish, system-ui, sans-serif;
  white-space: normal; text-align: center;
  box-shadow: 0 16px 40px rgba(14,28,64,.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.aos-btn-v2--locked .custom-tooltip-jq__text::after {
  content:""; position:absolute; top:100%; left:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  background: var(--navy-800); transform: rotate(45deg); border-radius:1px;
}
.aos-btn-v2--locked:is(:hover, :focus-visible, .is-hover, .is-focus, .is-tip-open) .custom-tooltip-jq__text {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* --- 7. Variants on NAVY (#081634 -> #14224A). Wrap the band in
       .aos-surface-navy; nothing else changes. ------------------------ */
.aos-surface-navy { --aosb-ring:#fff; }
.aos-surface-navy .aos-btn-v2 { --aosb-ring:#fff; }
.aos-surface-navy .aos-btn-v2--primary   { --aosb-fill: var(--red-600); --aosb-ink:#fff; --aosb-fill-hover: var(--red-500); --aosb-fill-active: var(--red-700); }
.aos-surface-navy .aos-btn-v2--secondary { --aosb-fill:#fff; --aosb-ink: var(--navy-900); --aosb-fill-hover: var(--gray-100); --aosb-fill-active: var(--gray-200); }
.aos-surface-navy .aos-btn-v2--outline   { --aosb-fill: rgba(255,255,255,.10); --aosb-ink:#fff; --aosb-fill-hover: rgba(255,255,255,.20); --aosb-fill-active: rgba(255,255,255,.24); --aosb-bd: rgba(255,255,255,.50); --aosb-bd-hover: rgba(255,255,255,.75); --aosb-drop: 0 0 0 0 rgba(0,0,0,0); }
.aos-surface-navy .aos-btn-v2--subtle    { --aosb-fill: rgba(255,255,255,.07); --aosb-ink:#fff; --aosb-fill-hover: rgba(255,255,255,.14); --aosb-fill-active: rgba(255,255,255,.18); }
/* tripled to outrank the link base (0,3,0) — otherwise rest falls back to
   blue-500, which is invisible on navy */
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link { --aosb-ink: var(--navy-200); }   /* 9.0:1 */
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:hover, .is-hover)  { --aosb-ink:#fff; }
/* active must brighten on navy — the light-surface rule deepens to navy-800,
   which on this surface is no contrast at all */
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(:active, .is-active) { --aosb-ink:#fff; }
/* greyed-out link on navy. Solid colour, never alpha — a translucent grey
   over a gradient goes muddy and reads as broken rather than unavailable.
   #8A97B5 is 5.5:1 on navy-900: clearly duller than the live navy-200
   link beside it, still comfortably legible. (0,4,0) so it outranks the
   rest/hover rules above regardless of order. */
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link:is(.aos-btn-v2--disabled, .aos-btn-v2--locked) { --aosb-ink: #8A97B5; }
.aos-surface-navy .aos-btn-v2.aos-btn-v2--link.aos-btn-v2--link.aos-btn-v2--locked:is(:hover, .is-hover) { --aosb-ink: var(--navy-200); }
/* disabled inverts on navy — lighter ink on a darker fill is the only way
   to hold 4.5:1 against a dark band */
.aos-surface-navy .aos-btn-v2--disabled  { --aosb-fill: rgba(255,255,255,.05); --aosb-ink: var(--navy-200); --aosb-bd: rgba(255,255,255,.18); --aosb-fill-hover: rgba(255,255,255,.05); --aosb-fill-active: rgba(255,255,255,.05); --aosb-bd-hover: rgba(255,255,255,.18); }
.aos-surface-navy .aos-btn-v2--locked    { --aosb-fill: rgba(255,255,255,.06); --aosb-ink: var(--navy-200); --aosb-bd: rgba(255,255,255,.28); --aosb-fill-hover: rgba(255,255,255,.11); --aosb-fill-active: rgba(255,255,255,.11); --aosb-bd-hover: rgba(255,255,255,.55); }
.aos-surface-navy .aos-btn-v2--locked:is(:hover, .is-hover) { --aosb-ink:#fff; }
.aos-surface-navy .aos-btn-v2--locked .button_icon,
.aos-surface-navy .aos-btn-v2--locked:is(:hover, .is-hover) .button_icon { color: currentColor; }
.aos-surface-navy .aos-btn-v2--locked .custom-tooltip-jq__text { background:#fff; color: var(--navy-800); }
.aos-surface-navy .aos-btn-v2--locked .custom-tooltip-jq__text::after { background:#fff; }

/* --- 8. Alignment wrapper + full width. The wrapper keeps its legacy
       .button_align / .align_* classes; we only add .aos-align. ------- */
.aos-align { display: flex; flex-wrap: wrap; gap: 12px; }
.aos-align.align_left   { justify-content: flex-start; }
.aos-align.align_center { justify-content: center; }
.aos-align.align_right  { justify-content: flex-end; }
.aos-btn-v2--full { display: flex !important; width: 100%; }  /* [!I] beats .inline-flex */
/* the portal's uppercase step bars are a full-width primary + this opt-in */
.aos-btn-v2--caps { text-transform: uppercase; letter-spacing: .04em; }

/* --- 9. LOADING. The icon slot becomes the spinner — no markup added, no
       layout shift, because the ring is exactly the icon's own box. The
       label stays put and readable so the button doesn't jump width. --- */
@keyframes aos-btn-spin { to { transform: rotate(360deg); } }
.aos-btn-v2--loading { cursor: progress; }
.aos-btn-v2--loading .button_icon { transform: none !important; }
.aos-btn-v2--loading .button_icon i {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .95;
  animation: aos-btn-spin .6s linear infinite;
}
/* suppress whatever the glyph or the locked padlock would have drawn */
.aos-btn-v2--loading .button_icon i::before,
.aos-btn-v2--loading .button_icon i::after { display: none !important; }
/* a loading button is never also disabled-looking — it keeps its colour so
   you can see which button you pressed; it just stops responding */
.aos-btn-v2--loading:is(:hover, :active) { transform: none !important; }  /* [!I] */
.aos-btn-v2--loading .button_label { opacity: .85; }
/* no icon in the markup? show the spinner anyway */
.aos-btn-v2--loading.button_noicon .button_icon { display: inline-flex; }

/* --- 10. RESPONSIVE. The large steps are fluid so a hero CTA never blows
       the line on a phone; below 560px full-width is the default posture
       for primary actions, which is what the wrapper opt-in is for. ---- */
.aos-btn-v2:is(.button_size_3, .aos-btn-v2--l)  { --aosb-font: clamp(15px, .82rem + .35vw, 17px); }
.aos-btn-v2:is(.button_size_4, .aos-btn-v2--xl) { --aosb-font: clamp(16px, .85rem + .55vw, 19px); }
.aos-btn-v2.aos-btn-v2--xxl.aos-btn-v2--xxl {
  --aosb-font: clamp(17px, .9rem + .8vw, 21px);
  --aosb-pad-y: clamp(15px, 1vw + 11px, 21px);
  --aosb-pad-x: clamp(24px, 3vw + 12px, 42px);
  --aosb-h: clamp(52px, 4vw + 38px, 68px);
}
@media (max-width: 560px) {
  /* long labels wrap instead of overflowing the screen */
  .aos-btn-v2 { white-space: normal; }
  /* stacked CTAs go full width — two 44px buttons side by side on a
     360px screen leaves no room for either label */
  .aos-align.aos-align--stack { flex-direction: column; align-items: stretch; }
  .aos-align.aos-align--stack .aos-btn-v2 { display: flex !important; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aos-btn-v2 { transition: none; }
  .aos-btn-v2:is(:active, .is-active) { transform: none !important; }
  .aos-btn-v2--loading .button_icon i { animation-duration: 1.6s; }
}