/*
 * GeneOps brand — distributable stylesheet (built from src/).
 *
 * DO NOT EDIT THIS FILE DIRECTLY. Edit the files under
 * app/assets/stylesheets/geneops/brand/src/ and run scripts/build-css.sh
 * to regenerate.
 *
 * Source of truth: Figma file tOzBDGYo4PbpYMSKFoXwk5.
 * Extraction snapshot: docs/figma-extraction/ at the project root.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=DM+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap");

/* === tokens-primitive.css === */
/*
 * Primitive tokens — Layer 1.
 *
 * Raw values exactly as they appear in Figma. Naming follows Figma's
 * variable paths (e.g. `Color/Pink/600` → `--color-pink-600`).
 *
 * Nothing here is invented. Every value comes from
 * `mcp__figma__get_variable_defs` against either the dark frame (23:892)
 * or the light frame (83:1753). See docs/figma-extraction/variables/.
 */

:root {
  /* ---------- Brand colors (dark/light frames) ---------- */
  --color-orange-600: #ff5005;

  --color-pink-500: #ff2d8b;
  --color-pink-600: #ff0f6f;
  --color-pink-800: #8f0239;

  /* ---------- Greyscale ramp ---------- */
  --color-grey-50:  #fafafa;
  --color-grey-200: #e1e1e5;
  --color-grey-400: #9a9aa2;
  --color-grey-500: #6a6a71;
  --color-grey-700: #3f3f46;
  --color-grey-800: #26262b;
  --color-grey-950: #17171c;

  --color-white-solid: #ffffff;
  --color-black-solid: #000000;

  /* ---------- Gene-attribute palette (light frame only) ---------- */
  /* Five hue families. Their semantic role (which family ↔ which gene
     attribute) is not encoded in Figma — see NOTES.md, open question 3. */
  --color-spring-green-30:    #009966;
  --color-spring-green-37:    #00bc7d;
  --color-spring-green-42:    #00d492;
  --color-spring-green-15-40: #004f3b66;
  --color-spring-green-15-60: #004f3b99;

  --color-cyan-24:    #00786f;
  --color-cyan-29:    #009689;
  --color-cyan-42:    #00d5be;
  --color-cyan-9-40:  #002c2266;
  --color-cyan-10-40: #022f2e66;
  --color-cyan-18-30: #0b4f4a4d;
  --color-cyan-37-20: #00bba733;

  --color-azure-66:    #51a2ff;
  --color-azure-33-40: #1c398e66;

  /* NOTE: Figma has both `Color/Orange/600` (brand, #ff5005) and
     `color/orange/...` (gene attribute, lowercase prefix). They flatten
     to the same `--color-orange-*` namespace because their numeric suffixes
     don't collide. See NOTES.md, open question 4. */
  --color-orange-50:    #ffba00;
  --color-orange-25-40: #7b330666;

  --color-violet-76:    #a684ff;
  --color-violet-35-40: #4d179a66;

  /* ---------- Type families ---------- */
  --font-family-display: "DM Sans", system-ui, sans-serif;
  --font-family-body:    "Source Sans 3", system-ui, sans-serif;
  --font-family-mono:    "DM Mono", ui-monospace, monospace;

  /* ---------- Type weights ---------- */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* ---------- Letter spacing ---------- */
  /* Mikael stores tracking as unitless numbers; the Figma MCP server
     reports them with `px` suffix (e.g. `-0.5px`). We use px. */
  --font-letter-spacing-tight:  -0.5px;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide:   0.5px;
  --font-letter-spacing-wider:  2px;

  /* ---------- Type sizes ---------- */
  --font-size-12:  12px;
  --font-size-14:  14px;
  --font-size-16:  16px;
  --font-size-18:  18px;
  --font-size-20:  20px;
  --font-size-24:  24px;
  --font-size-32:  32px;
  --font-size-60:  60px;
  --font-size-100: 100px;

  /* ---------- Spacing scale ---------- */
  --spacing-2:  2px;
  --spacing-4:  4px;
  --spacing-8:  8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-80: 80px;

  /* ---------- Corner radius ---------- */
  --corner-radius-sm:   4px;
  /* Diverges from Figma (32px) — see NOTES.md #23. Confirm with Mikael. */
  --corner-radius-lg:   8px;
  --corner-radius-full: 9999px;

  /* ---------- Stroke weight ---------- */
  --stroke-weight-0-5:  0.5px;
  --stroke-weight-1:    1px;
  --stroke-weight-1-33: 1.3333333730697632px;
  --stroke-weight-1-67: 1.6666666269302368px;
  --stroke-weight-2:    2px;

  /* ---------- Layout widths ---------- */
  --width-320:  320px;
  --width-584:  584px;  /* derived: half a grid-2-32 card inside a 1296 container — (1296 - 2*48 - 32) / 2 */
  --width-672:  672px;
  --width-740:  740px;
  --width-896:  896px;
  --width-1296: 1296px;
}

/* === tokens-semantic.css === */
/*
 * Semantic tokens — Layer 2.
 *
 * Maps role-based names (Background/Surface 1, Text/Primary, etc.) onto
 * primitives. Two themes — dark (default) and light — handle the
 * mode switch Mikael called for.
 *
 * Theme selection:
 *   <html>            -> dark theme (default, GeneOps primary brand)
 *   <html class="theme-light"> -> light theme
 *   <html class="theme-dark">  -> explicit dark
 *
 * Some surface values are LITERAL — they don't reference a primitive in
 * Mikael's variable set (e.g. dark `Background/Surface 1: #1f1f23`,
 * light `Background/Surface 1: #f4f4f6`). Those are inlined here.
 * See NOTES.md, open question 5.
 */

:root,
.theme-dark {
  /* Dark frame `23:892` */
  --background-base:        var(--color-grey-950);    /* #17171c */
  --background-surface-1:   #1f1f23;                  /* literal */
  --background-surface-2:   var(--color-grey-800);    /* #26262b */
  --background-hover:       var(--color-grey-700);    /* #3f3f46, from components */
  --background-button-base: #17171c80;                /* literal alpha */

  --border-subtle: var(--color-grey-800);             /* #26262b */

  --text-primary:   var(--color-grey-50);             /* #fafafa */
  --text-secondary: var(--color-grey-400);            /* #9a9aa2 */
  --text-tertiary:  var(--color-grey-500);            /* #6a6a71 */
  --text-light:     var(--color-grey-50);
  --text-risk-factor: var(--color-orange-600);

  /* `Text/Accent` is defined in the LIGHT frame as #00d492 but is NOT
     defined in the dark frame. We do not invent a dark-mode value. */

  --symbol-default: var(--color-grey-400);            /* #9a9aa2 */
  --symbol-hover:   var(--color-grey-200);            /* #e1e1e5, from components */
  --symbol-light:   var(--color-grey-50);
  --symbol-strong:  var(--color-grey-50);
}

.theme-light {
  /* Light frame `83:1753` */
  --background-base:        var(--color-grey-50);     /* #fafafa */
  --background-surface-1:   #f4f4f6;                  /* literal */
  --background-surface-2:   var(--color-grey-200);    /* #e1e1e5 */
  --background-button-base: #fafafa80;                /* literal alpha */
  /* `Background/Hover` is NOT defined in the light frame variable set.
     We do not invent it. Components that hover (Action Button, Gene
     Chip, Grey Button) will use whatever the dark fallback is unless
     Mikael ships a light-mode hover token. See NOTES.md, open question 6. */

  --border-subtle: var(--color-grey-200);             /* #e1e1e5 */

  --text-primary:   var(--color-grey-950);            /* #17171c */
  --text-secondary: var(--color-grey-500);            /* #6a6a71 */
  --text-tertiary:  var(--color-grey-400);            /* #9a9aa2 */
  --text-light:     var(--color-grey-50);
  --text-accent:      var(--color-spring-green-42);   /* #00d492 */
  --text-risk-factor: var(--color-orange-600);        /* #ff5005 */

  --symbol-default: var(--color-grey-500);            /* #6a6a71 */

  /* Mikael's Figma light-frame variable set DOES NOT include these —
     placeholders derived by inverting the dark-mode mapping against
     the light surface palette (NOTES.md #6). Replace with the
     official values when the light-mode token set ships. */
  --background-hover: var(--color-grey-400);          /* one step darker than surface-2 → #9a9aa2 */
  --symbol-hover:     var(--color-grey-700);          /* darker than symbol-default → #3f3f46 */
  --symbol-light:     var(--color-grey-950);          /* "light" = highest contrast against surface — on light bg that's near-black */
  --symbol-strong:    var(--color-grey-950);          /* strongest emphasis on light bg */
}

/* === typography.css === */
/*
 * Typography composites — Layer 3.
 *
 * One class per Figma typography composite (Headline/xxl, Body/md, etc.).
 * Class names mirror the Figma name verbatim, lowercased and with `/`
 * converted to `-`.
 *
 * Line-heights are kept at the exact decimal Figma reports
 * (e.g. 1.149999976158142). Rounding to 1.15 would visually match but
 * would deviate from the source — so we don't.
 *
 * Body sets a sensible default page color/font that consuming apps can
 * still override per-element with these classes.
 */

/* Universal border-box — without this, padding on full-width elements
 * (like .site-footer) overflows the viewport. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--background-base);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer: paired with `.site-footer { margin-top: auto }` so
     the footer sits at the viewport bottom on short pages and just
     under the last section on long ones. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
 * Margin reset for typographic elements.
 *
 * The design system controls vertical rhythm via .stack-* / .section /
 * surface-card padding tokens — not via UA default margins. Browsers
 * give <h1> ~0.67em, <p> 1em, etc. of top+bottom margin by default,
 * which silently inflates every flex/grid gap. Reset those to 0 so
 * spacing is fully token-driven.
 *
 * Lists also get their default padding-left removed since most usage
 * in this design system is `list-style: none` flex/stack groupings.
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding-left: 0;
}

.headline-xxl {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: var(--font-size-100);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-tight);
}

.headline-xl {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-60);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-tight);
}

.headline-lg {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-32);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-tight);
}

.headline-md {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-24);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-tight);
}

.headline-sm {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-20);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-tight);
}

.headline-xs {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-normal);
}

.subtitle-lg {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-24);
  line-height: 1.3300000429153442;
  letter-spacing: 0;
}

.subtitle-md {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-20);
  line-height: 1.3300000429153442;
  letter-spacing: 0;
}

.body-lg {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-18);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
}

.body-lg-bold {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-18);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
}

.body-md {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
}

.body-md-bold {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
}

.body-sm {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  line-height: 1;
  letter-spacing: 0;
}

.label-md {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wider);
}

.label-sm {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wider);
}

.label-xs {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wide);
}

/*
 * Data/sm — DM Mono.
 * Figma's composite says style: Medium AND weight: 600. These conflict:
 * "Medium" is conventionally weight 500, and DM Mono on Google Fonts
 * ships only 300/400/500. We follow the style label (500), not the
 * numeric weight token, so the type renders as designed without
 * synthetic-bold fallback. See NOTES.md, open question 7.
 */
.data-sm {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-normal);
}

/* === utilities.css === */
/*
 * Utilities — Layer 4.
 *
 * Structural primitives that expose the design tokens as classes so
 * apps can build pages without inline styles. Every value here is a
 * design-system token; nothing is invented.
 *
 * Naming follows the same Figma-mirroring rule: where a class
 * corresponds to a token, the token's number/name is the suffix.
 */

/* ---------- Container ---------- */
/* The Figma frame uses a centered 1296px container with 48px side
   padding (frame width 1920, container x=312, container width 1296,
   inner x=48 → 1200px content row inside the container). */
.container {
  width: 100%;
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-48);
  box-sizing: border-box;
}

/* ---------- Section spacing ---------- */
.section { padding-block: var(--spacing-80); }
.section--tight { padding-block: var(--spacing-48); }

/* ---------- Surface card ---------- */
/* The default Figma "Background+Border" treatment: surface-1 fill, 32px
   padding, 32px radius. Used by ~12 sections of the landing page. */
.surface-card {
  background-color: var(--background-surface-1);
  padding: var(--spacing-32);
  border-radius: var(--corner-radius-lg);
}

/* ---------- Vertical stacks ---------- */
.stack { display: flex; flex-direction: column; align-items: flex-start; }
.stack-2  { display: flex; flex-direction: column; gap: var(--spacing-2); }
.stack-4  { display: flex; flex-direction: column; gap: var(--spacing-4); }
.stack-8  { display: flex; flex-direction: column; gap: var(--spacing-8); }
.stack-12 { display: flex; flex-direction: column; gap: var(--spacing-12); }
.stack-16 { display: flex; flex-direction: column; gap: var(--spacing-16); }
.stack-24 { display: flex; flex-direction: column; gap: var(--spacing-24); }
.stack-32 { display: flex; flex-direction: column; gap: var(--spacing-32); }
.stack-48 { display: flex; flex-direction: column; gap: var(--spacing-48); }
.stack-80 { display: flex; flex-direction: column; gap: var(--spacing-80); }

.stack-center { align-items: center; }

/* ---------- Horizontal clusters (wrap) ---------- */
.cluster-4  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); }
.cluster-8  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); }
.cluster-12 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); }
.cluster-16 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16); }
.cluster-24 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24); }
.cluster-32 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-32); }

/* ---------- Horizontal rows (no wrap) ---------- */
.row-8  { display: flex; align-items: center; gap: var(--spacing-8); }
.row-12 { display: flex; align-items: center; gap: var(--spacing-12); }
.row-16 { display: flex; align-items: center; gap: var(--spacing-16); }
.row-24 { display: flex; align-items: center; gap: var(--spacing-24); }
.row-32 { display: flex; align-items: center; gap: var(--spacing-32); }
.row-48 { display: flex; align-items: center; gap: var(--spacing-48); }
.row-between { justify-content: space-between; }
.row-end     { justify-content: flex-end; }
.row-grow > * { flex: 1 1 0; min-width: 0; }

/* ---------- Grids ---------- */
.grid-2-32 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32); }
.grid-3-32 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-32); }
.grid-4-32 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-32); }
.grid-2-16 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }

/* Asymmetric flex-wrap: row-gap × column-gap.
   Figma's stats row uses 24px between rows and 48px between columns. */
.flex-wrap-24-48 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: var(--spacing-24);
  column-gap: var(--spacing-48);
}

/* ---------- Width constraints (Figma's named widths) ---------- */
.measure-320  { max-width: var(--width-320);  width: 100%; }
.measure-584  { max-width: var(--width-584);  width: 100%; }
.measure-672  { max-width: var(--width-672);  width: 100%; }
.measure-740  { max-width: var(--width-740);  width: 100%; }
.measure-896  { max-width: var(--width-896);  width: 100%; }
.measure-1296 { max-width: var(--width-1296); width: 100%; }

/* ---------- Text alignment + transform ---------- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.uppercase    { text-transform: uppercase; }
.normal-case  { text-transform: none; }
.no-underline { text-decoration: none; }

/* ---------- Color helpers (semantic tokens as classes) ---------- */
.text-primary      { color: var(--text-primary); }
.text-secondary    { color: var(--text-secondary); }
.text-tertiary     { color: var(--text-tertiary); }
.text-light        { color: var(--text-light); }
.text-symbol-light { color: var(--symbol-light); }
.text-pink-600     { color: var(--color-pink-600); }

/* ---------- Flex item alignment ---------- */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.self-start     { align-self: flex-start; }
.self-center    { align-self: center; }
.grow           { flex: 1 0 0; min-width: 0; }

/* ---------- Position ---------- */
.relative { position: relative; }

/* ---------- Reset ---------- */
.list-reset { list-style: none; padding-left: 0; }
.mx-auto    { margin-inline: auto; }

/* ---------- Padding shorthands (token-named) ---------- */
.pt-8   { padding-top:    var(--spacing-8); }
.pt-12  { padding-top:    var(--spacing-12); }
.pb-32  { padding-bottom: var(--spacing-32); }
.pl-32  { padding-left:   var(--spacing-32); }
.padded-16   { padding: var(--spacing-16); }
.padded-24   { padding: var(--spacing-24); }
.padded-48   { padding: var(--spacing-48); }

/* Single-line text truncation. min-width: 0 so it can shrink inside flex. */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- Margin shorthands ---------- */
.mt-2   { margin-top: var(--spacing-2); }

/* ---------- Border helpers ---------- */
.bordered-left { border-left: var(--stroke-weight-1) solid var(--border-subtle); }

/* ---------- Brand-gradient text ---------- */
/* Pink/600 → Orange/600 painted onto text via background-clip.
   `width: max-content` forces the element box to be content-sized.
   Without it, the element stretches to its parent (especially as a
   flex child where `align-items: stretch` is the default) and the
   gradient spans the parent width — the text then samples only the
   leftmost slice and looks solid pink. `max-width: 100%` keeps it
   from overflowing on narrow viewports. */
.text-gradient-brand {
  display: inline-block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  background-image: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Inline brand link ---------- */
/* The Hero/CTA include underlined "or start free" links. Body/md
   regular, text-secondary, underlined. */
.brand-link {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
.brand-link:hover { color: var(--text-primary); }

/* Nav link — Headline/xs (DM Sans SemiBold 14px) per Figma. */
.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
}

/* ---------- Site nav ---------- */
/* Sticky so it stays at the top while scrolling but still occupies its
   80px in normal flow — pages below it don't have to compensate.
   Note: in Figma's frame, Nav (23:1699) and Hero (23:1656) both sit at
   y=0 (overlap), with Hero pt: 144 absorbing the 80px nav + 64px gap.
   We don't replicate that overlap here because (a) 144px isn't in the
   spacing scale and (b) the nav-in-flow + hero pt:--spacing-80 model
   gives a symmetric 80/80 hero and only token-derived values. */
.site-nav {
  /* `fixed` (not `sticky`) so the nav is OVERLAID on the hero from
     scroll-top onwards. With sticky, the nav occupied 80px of normal
     flow, the hero began below it, and the helix video behind the
     nav was just the body background — no blur effect was visible
     until scrolling pulled the hero up under the nav.
     Pages without a hero must add their own top padding to clear
     the nav. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  isolation: isolate;
}
/* Figma node 23:1699 uses a PROGRESSIVE background blur effect (read via
   the Figma REST API on the node's `effects` array — the MCP server's
   Tailwind output drops this and shows `backdrop-blur-[0px]`):
     type: BACKGROUND_BLUR
     blurType: PROGRESSIVE
     startRadius: 12, startOffset: {x:0.5, y:0.0}   (top, full strength)
     radius:      0,  endOffset:   {x:0.5, y:1.0}   (bottom, none)

   CSS has no native progressive blur. Closest faithful rendering:
   apply backdrop-filter: blur(12px) on the pseudo-element, then mask
   the result with a vertical gradient (opaque top → transparent
   bottom). Where the mask is opaque the blur is fully visible; where
   transparent, the blur clips away — visually approximates the
   progressive 12→0 falloff. The vendored gradient PNG provides the
   matching dark tint, also masked the same way. */
.site-nav::before {
  content: "";
  position: absolute;
  /* Extend the blur layer 32px past the nav bottom so the progressive
     falloff continues into the page area, then fades out fully. The
     gradient PNG stays anchored to the top 80px of the layer so the
     visible tint band still sits within the nav. */
  inset: 0;
  bottom: calc(-1 * var(--spacing-32));
  background-image: url("data:image/png;base64,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");
  background-size: 100% 80px;
  background-position: top;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* nav overlays the first 80px of the page (nav-height) + we want
     `--spacing-80` of visual gap before the eyebrow → 80 + 80 = 160. */
  padding-top: calc(var(--spacing-80) * 2);
  padding-bottom: var(--spacing-80);
  width: 100%;
  overflow: clip;
  isolation: isolate;
}

/* Hero background media (DNA helix loop). Figma node 23:1656 spec:
   opacity 15%, blendMode LUMINOSITY, scaleMode FILL.
   Source video is a Pexels asset that ships in colour (blue helix);
   we transcode it to grayscale (`ffmpeg -vf format=gray,format=yuv420p`)
   so the asset itself is already neutral. With a grayscale source the
   LUMINOSITY blend mode is redundant — straight opacity does the job
   and behaves predictably in both themes. For light mode we invert
   the video so the dark helix shapes become visible against the light
   surface. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.theme-light .hero__media {
  filter: invert(1);
}

/* Bottom-fade to base — matches the Figma hero's gradient overlay
   (`bg-gradient-to-b from-rgba(23,23,28,0) to-#17171c` in the
   design context). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent, var(--background-base));
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* ---------- Logo ---------- */
.logo { display: inline-block; line-height: 0; }
.logo--lockup-32 { height: 32px; }   /* Nav default — 138×32 in Figma */
.logo--lockup-48 { height: 48px; }
.logo--lockup-80 { height: 80px; }
.logo--symbol-32 { height: 32px; width: 32px; }
.logo--symbol-48 { height: 48px; width: 48px; }
.logo--symbol-80 { height: 80px; width: 80px; }
.logo > img, .logo > svg { height: 100%; width: auto; }

/* Theme-aware logo: place both variants inside the .logo, the wrong
   one for the active theme is hidden.
   The selector includes `.logo` so its specificity (0,2,0) beats the
   generic `.logo > img` (0,1,1) and the display flips actually apply. */
.logo .logo__on-dark  { display: block; }
.logo .logo__on-light { display: none; }
.theme-light .logo .logo__on-dark  { display: none; }
.theme-light .logo .logo__on-light { display: block; }

/* ---------- Footer ---------- */
.site-footer {
  width: 100%;
  background-color: var(--background-surface-1);
  padding: var(--spacing-48);
  /* Sticky-footer pair (see body in typography.css): on short pages
     this consumes the leftover vertical space and pins the footer to
     the viewport bottom; on tall pages it's a no-op. */
  margin-top: auto;
}

/* Main wrapper for short pages (login, MFA prompt, etc.) — fills the
   space between fixed nav and footer and centers its single child
   both axes. Pairs with the sticky-footer body layout. */
.page-center {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clear the 80px fixed `.site-nav` so centered content isn't
     visually pulled upward beneath it. */
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
}

/* ---------- Icons (CSS mask, single-color, follows currentColor) ---------- */
/* Use:  <span class="icon icon-task icon--24"></span>
 * The SVG is loaded as a mask, then the element's `background-color`
 * (set to currentColor) shows through — so the icon follows the
 * parent's color, including hover/theme flips. Single-color icons only.
 */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--spacing-24);
  height: var(--spacing-24);
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.icon--12 { width: var(--spacing-12); height: var(--spacing-12); }
.icon--16 { width: var(--spacing-16); height: var(--spacing-16); }
.icon--20 { width: 20px;              height: 20px; }
.icon--24 { width: var(--spacing-24); height: var(--spacing-24); }
.icon--28 { width: 28px;              height: 28px; }

.icon-task               { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQ5NjEgMlYxVjFWMlpNOS40OTYwOSAyVjFWMVYyWk05LjQ5NjA5IDVWNlY2VjVaTTE0LjQ5NjEgNVY2VjZWNVpNMTkuMTE3MSA0LjM2MkwxOC40MDk0IDUuMDY4NTZMMTguNDEwOCA1LjA2OTkxTDE5LjExNzEgNC4zNjJaTTE5LjExNzEgMjEuMTIxTDE4LjQxMDQgMjAuNDEzNUwxOC40MDk2IDIwLjQxNDNMMTkuMTE3MSAyMS4xMjFaTTQuODc1MDkgNC4zNjJMNS41ODE4IDUuMDY5NTFMNS41ODI3NSA1LjA2ODU2TDQuODc1MDkgNC4zNjJaTTguNDk2MDkgMTJMNy43ODgwNyAxMi43MDYyQzcuOTg2NTQgMTIuOTA1MiA4LjI1OTYgMTMuMDExNSA4LjU0MDM3IDEyLjk5OUM4LjgyMTE1IDEyLjk4NjYgOS4wODM3MyAxMi44NTY1IDkuMjYzODIgMTIuNjQwOEw4LjQ5NjA5IDEyWk04LjYyNTA5IDE4QzkuMTc3MzggMTggOS42MjUwOSAxNy41NTIzIDkuNjI1MDkgMTdDOS42MjUwOSAxNi40NDc3IDkuMTc3MzggMTYgOC42MjUwOSAxNlYxN1YxOFpNOC41MDAwOSAxNkM3Ljk0NzgxIDE2IDcuNTAwMDkgMTYuNDQ3NyA3LjUwMDA5IDE3QzcuNTAwMDkgMTcuNTUyMyA3Ljk0NzgxIDE4IDguNTAwMDkgMThWMTdWMTZaTTE0LjQ5NjEgMlYxSDkuNDk2MDlWMlYzSDE0LjQ5NjFWMlpNOS40OTYwOSAyVjFDOC44MzMwNSAxIDguMTk3MTcgMS4yNjMzOSA3LjcyODMzIDEuNzMyMjNMOC40MzU0MyAyLjQzOTM0TDkuMTQyNTQgMy4xNDY0NUM5LjIzNjMxIDMuMDUyNjggOS4zNjM0OSAzIDkuNDk2MDkgM1YyWk04LjQzNTQzIDIuNDM5MzRMNy43MjgzMyAxLjczMjIzQzcuMjU5NDkgMi4yMDEwNyA2Ljk5NjA5IDIuODM2OTYgNi45OTYwOSAzLjVINy45OTYwOUg4Ljk5NjA5QzguOTk2MDkgMy4zNjczOSA5LjA0ODc3IDMuMjQwMjIgOS4xNDI1NCAzLjE0NjQ1TDguNDM1NDMgMi40MzkzNFpNNy45OTYwOSAzLjVINi45OTYwOUM2Ljk5NjA5IDQuMTYzMDQgNy4yNTk0OSA0Ljc5ODkzIDcuNzI4MzMgNS4yNjc3N0w4LjQzNTQzIDQuNTYwNjZMOS4xNDI1NCAzLjg1MzU1QzkuMDQ4NzcgMy43NTk3OCA4Ljk5NjA5IDMuNjMyNjEgOC45OTYwOSAzLjVINy45OTYwOVpNOC40MzU0MyA0LjU2MDY2TDcuNzI4MzMgNS4yNjc3N0M4LjE5NzE3IDUuNzM2NjEgOC44MzMwNSA2IDkuNDk2MDkgNlY1VjRDOS4zNjM0OSA0IDkuMjM2MzEgMy45NDczMiA5LjE0MjU0IDMuODUzNTVMOC40MzU0MyA0LjU2MDY2Wk05LjQ5NjA5IDVWNkgxNC40OTYxVjVWNEg5LjQ5NjA5VjVaTTE0LjQ5NjEgNVY2QzE1LjE1OTEgNiAxNS43OTUgNS43MzY2MSAxNi4yNjM5IDUuMjY3NzdMMTUuNTU2OCA0LjU2MDY2TDE0Ljg0OTYgMy44NTM1NUMxNC43NTU5IDMuOTQ3MzIgMTQuNjI4NyA0IDE0LjQ5NjEgNFY1Wk0xNS41NTY4IDQuNTYwNjZMMTYuMjYzOSA1LjI2Nzc3QzE2LjczMjcgNC43OTg5MyAxNi45OTYxIDQuMTYzMDQgMTYuOTk2MSAzLjVIMTUuOTk2MUgxNC45OTYxQzE0Ljk5NjEgMy42MzI2MSAxNC45NDM0IDMuNzU5NzggMTQuODQ5NiAzLjg1MzU1TDE1LjU1NjggNC41NjA2NlpNMTUuOTk2MSAzLjVIMTYuOTk2MUMxNi45OTYxIDIuODM2OTYgMTYuNzMyNyAyLjIwMTA3IDE2LjI2MzkgMS43MzIyM0wxNS41NTY4IDIuNDM5MzRMMTQuODQ5NiAzLjE0NjQ1QzE0Ljk0MzQgMy4yNDAyMiAxNC45OTYxIDMuMzY3MzkgMTQuOTk2MSAzLjVIMTUuOTk2MVpNMTUuNTU2OCAyLjQzOTM0TDE2LjI2MzkgMS43MzIyM0MxNS43OTUgMS4yNjMzOSAxNS4xNTkxIDEgMTQuNDk2MSAxVjJWM0MxNC42Mjg3IDMgMTQuNzU1OSAzLjA1MjY4IDE0Ljg0OTYgMy4xNDY0NUwxNS41NTY4IDIuNDM5MzRaTTE1Ljk5NjEgMy41TDE1Ljk2NTkgNC40OTk1NEMxNy41MzUyIDQuNTQ3MDEgMTguMDc2MiA0LjczNDgxIDE4LjQwOTQgNS4wNjg1NkwxOS4xMTcxIDQuMzYyTDE5LjgyNDggMy42NTU0NEMxOC44NzYgMi43MDUxOSAxNy41NjUgMi41NDY5OSAxNi4wMjYzIDIuNTAwNDZMMTUuOTk2MSAzLjVaTTE5LjExNzEgNC4zNjJMMTguNDEwOCA1LjA2OTkxQzE4LjYzMzUgNS4yOTIxNCAxOC44MDEgNS42MTg2NSAxOC44OTYgNi4zMjQyMkMxOC45OTUgNy4wNTg3MSAxOC45OTcxIDguMDM5NjggMTguOTk3MSA5LjQ4MkgxOS45OTcxSDIwLjk5NzFDMjAuOTk3MSA4LjA5NjMyIDIwLjk5OTIgNi45NTYyOSAyMC44NzgxIDYuMDU3MjhDMjAuNzUzMiA1LjEyOTM1IDIwLjQ4MDcgNC4zMDk4NiAxOS44MjM0IDMuNjU0MDlMMTkuMTE3MSA0LjM2MlpNMTkuOTk3MSA5LjQ4MkgxOC45OTcxVjE2SDE5Ljk5NzFIMjAuOTk3MVY5LjQ4MkgxOS45OTcxWk0xOS45OTcxIDE2SDE4Ljk5NzFDMTguOTk3MSAxNy40NDIzIDE4Ljk5NSAxOC40MjMzIDE4Ljg5NiAxOS4xNTc5QzE4LjgwMSAxOS44NjM2IDE4LjYzMzUgMjAuMTkwNiAxOC40MTA0IDIwLjQxMzVMMTkuMTE3MSAyMS4xMjFMMTkuODIzOCAyMS44Mjg1QzIwLjQ4MDcgMjEuMTcyNCAyMC43NTMyIDIwLjM1MjkgMjAuODc4MSAxOS40MjQ4QzIwLjk5OTIgMTguNTI1NyAyMC45OTcxIDE3LjM4NTcgMjAuOTk3MSAxNkgxOS45OTcxWk0xOS4xMTcxIDIxLjEyMUwxOC40MDk2IDIwLjQxNDNDMTguMTg3NSAyMC42MzY3IDE3Ljg2MDcgMjAuODA0MSAxNy4xNTQ3IDIwLjg5OUMxNi40MTk5IDIwLjk5NzkgMTUuNDM4OSAyMSAxMy45OTcxIDIxVjIyVjIzQzE1LjM4MjMgMjMgMTYuNTIyMiAyMy4wMDIxIDE3LjQyMTMgMjIuODgxMkMxOC4zNDkgMjIuNzU2NCAxOS4xNjg3IDIyLjQ4NDMgMTkuODI0NiAyMS44Mjc3TDE5LjExNzEgMjEuMTIxWk0xMy45OTcxIDIyVjIxSDkuOTk3MDlWMjJWMjNIMTMuOTk3MVYyMlpNOS45OTcwOSAyMlYyMUM4LjU1MzggMjEgNy41NzIyMyAyMC45OTc5IDYuODM3MzggMjAuODk5QzYuMTMxMzMgMjAuODA0MSA1LjgwNDc2IDIwLjYzNjcgNS41ODI2IDIwLjQxNDNMNC44NzUwOSAyMS4xMjFMNC4xNjc1OCAyMS44Mjc3QzQuODIzNDIgMjIuNDg0MyA1LjY0Mjg2IDIyLjc1NjQgNi41NzA4MSAyMi44ODEyQzcuNDY5OTYgMjMuMDAyMSA4LjYxMDM5IDIzIDkuOTk3MDkgMjNWMjJaTTQuODc1MDkgMjEuMTIxTDUuNTgyNiAyMC40MTQzQzUuMzU5OTIgMjAuMTkxNCA1LjE5MjQ3IDE5Ljg2MzkgNS4wOTc0IDE5LjE1NzlDNC45OTg0NyAxOC40MjMyIDQuOTk2MDkgMTcuNDQyMSA0Ljk5NjA5IDE2SDMuOTk2MDlIMi45OTYwOUMyLjk5NjA5IDE3LjM4NTkgMi45OTQyMiAxOC41MjU4IDMuMTE1MjkgMTkuNDI0OEMzLjI0MDIyIDIwLjM1MjYgMy41MTIyNyAyMS4xNzE2IDQuMTY3NTggMjEuODI3N0w0Ljg3NTA5IDIxLjEyMVpNMy45OTYwOSAxNkg0Ljk5NjA5VjkuNDgzSDMuOTk2MDlIMi45OTYwOVYxNkgzLjk5NjA5Wk0zLjk5NjA5IDkuNDgzSDQuOTk2MDlDNC45OTYwOSA4LjA0MDczIDQuOTk4MjIgNy4wNTkzOSA1LjA5NzA1IDYuMzI0NTRDNS4xOTIwMiA1LjYxODM2IDUuMzU5NDQgNS4yOTE2MSA1LjU4MTggNS4wNjk1MUw0Ljg3NTA5IDQuMzYyTDQuMTY4MzkgMy42NTQ0OUMzLjUxMTc0IDQuMzEwMzkgMy4yMzk2NyA1LjEzMDE0IDMuMTE0ODkgNi4wNTc5NkMyLjk5Mzk3IDYuOTU3MTEgMi45OTYwOSA4LjA5NzI3IDIuOTk2MDkgOS40ODNIMy45OTYwOVpNNC44NzUwOSA0LjM2Mkw1LjU4Mjc1IDUuMDY4NTZDNS45MTU5NCA0LjczNDg1IDYuNDU3ODQgNC41NDcwMSA4LjAyNjM0IDQuNDk5NTRMNy45OTYwOSAzLjVMNy45NjU4NCAyLjUwMDQ2QzYuNDI4MzQgMi41NDY5OSA1LjExNjI1IDIuNzA1MTUgNC4xNjc0NCAzLjY1NTQ0TDQuODc1MDkgNC4zNjJaTTcgMTAuNUw2LjI5MTk3IDExLjIwNjJMNy43ODgwNyAxMi43MDYyTDguNDk2MDkgMTJMOS4yMDQxMiAxMS4yOTM4TDcuNzA4MDMgOS43OTM4Mkw3IDEwLjVaTTguNDk2MDkgMTJMOS4yNjM4MiAxMi42NDA4TDExLjc2NzcgOS42NDA3N0wxMSA5TDEwLjIzMjMgOC4zNTkyM0w3LjcyODM2IDExLjM1OTJMOC40OTYwOSAxMlpNMTMgMTdWMThIMTdWMTdWMTZIMTNWMTdaTTEzIDExVjEySDE3VjExVjEwSDEzVjExWk04LjYyNTA5IDE3VjE2SDguNTAwMDlWMTdWMThIOC42MjUwOVYxN1pNOC43NTAwOSAxN0g3Ljc1MDA5QzcuNzUwMDkgMTYuODAxMSA3LjgyOTExIDE2LjYxMDMgNy45Njk3NiAxNi40Njk3TDguNjc2ODcgMTcuMTc2OEw5LjM4Mzk4IDE3Ljg4MzlDOS42MTg0IDE3LjY0OTUgOS43NTAwOSAxNy4zMzE1IDkuNzUwMDkgMTdIOC43NTAwOVpNOC42NzY4NyAxNy4xNzY4TDcuOTY5NzYgMTYuNDY5N0M4LjExMDQyIDE2LjMyOSA4LjMwMTE4IDE2LjI1IDguNTAwMDkgMTYuMjVWMTcuMjVWMTguMjVDOC44MzE2MSAxOC4yNSA5LjE0OTU2IDE4LjExODMgOS4zODM5OCAxNy44ODM5TDguNjc2ODcgMTcuMTc2OFpNOC41MDAwOSAxNy4yNVYxNi4yNUM4LjY5OSAxNi4yNSA4Ljg4OTc3IDE2LjMyOSA5LjAzMDQyIDE2LjQ2OTdMOC4zMjMzMiAxNy4xNzY4TDcuNjE2MjEgMTcuODgzOUM3Ljg1MDYzIDE4LjExODMgOC4xNjg1OCAxOC4yNSA4LjUwMDA5IDE4LjI1VjE3LjI1Wk04LjMyMzMyIDE3LjE3NjhMOS4wMzA0MiAxNi40Njk3QzkuMTcxMDggMTYuNjEwMyA5LjI1MDA5IDE2LjgwMTEgOS4yNTAwOSAxN0g4LjI1MDA5SDcuMjUwMDlDNy4yNTAwOSAxNy4zMzE1IDcuMzgxNzkgMTcuNjQ5NSA3LjYxNjIxIDE3Ljg4MzlMOC4zMjMzMiAxNy4xNzY4Wk04LjI1MDA5IDE3SDkuMjUwMDlDOS4yNTAwOSAxNy4xOTg5IDkuMTcxMDggMTcuMzg5NyA5LjAzMDQyIDE3LjUzMDNMOC4zMjMzMiAxNi44MjMyTDcuNjE2MjEgMTYuMTE2MUM3LjM4MTc5IDE2LjM1MDUgNy4yNTAwOSAxNi42Njg1IDcuMjUwMDkgMTdIOC4yNTAwOVpNOC4zMjMzMiAxNi44MjMyTDkuMDMwNDIgMTcuNTMwM0M4Ljg4OTc3IDE3LjY3MSA4LjY5OSAxNy43NSA4LjUwMDA5IDE3Ljc1VjE2Ljc1VjE1Ljc1QzguMTY4NTggMTUuNzUgNy44NTA2MyAxNS44ODE3IDcuNjE2MjEgMTYuMTE2MUw4LjMyMzMyIDE2LjgyMzJaTTguNTAwMDkgMTYuNzVWMTcuNzVDOC4zMDExOCAxNy43NSA4LjExMDQyIDE3LjY3MSA3Ljk2OTc2IDE3LjUzMDNMOC42NzY4NyAxNi44MjMyTDkuMzgzOTggMTYuMTE2MUM5LjE0OTU2IDE1Ljg4MTcgOC44MzE2MSAxNS43NSA4LjUwMDA5IDE1Ljc1VjE2Ljc1Wk04LjY3Njg3IDE2LjgyMzJMNy45Njk3NiAxNy41MzAzQzcuODI5MTEgMTcuMzg5NyA3Ljc1MDA5IDE3LjE5ODkgNy43NTAwOSAxN0g4Ljc1MDA5SDkuNzUwMDlDOS43NTAwOSAxNi42Njg1IDkuNjE4NCAxNi4zNTA1IDkuMzgzOTggMTYuMTE2MUw4LjY3Njg3IDE2LjgyMzJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==");               mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQ5NjEgMlYxVjFWMlpNOS40OTYwOSAyVjFWMVYyWk05LjQ5NjA5IDVWNlY2VjVaTTE0LjQ5NjEgNVY2VjZWNVpNMTkuMTE3MSA0LjM2MkwxOC40MDk0IDUuMDY4NTZMMTguNDEwOCA1LjA2OTkxTDE5LjExNzEgNC4zNjJaTTE5LjExNzEgMjEuMTIxTDE4LjQxMDQgMjAuNDEzNUwxOC40MDk2IDIwLjQxNDNMMTkuMTE3MSAyMS4xMjFaTTQuODc1MDkgNC4zNjJMNS41ODE4IDUuMDY5NTFMNS41ODI3NSA1LjA2ODU2TDQuODc1MDkgNC4zNjJaTTguNDk2MDkgMTJMNy43ODgwNyAxMi43MDYyQzcuOTg2NTQgMTIuOTA1MiA4LjI1OTYgMTMuMDExNSA4LjU0MDM3IDEyLjk5OUM4LjgyMTE1IDEyLjk4NjYgOS4wODM3MyAxMi44NTY1IDkuMjYzODIgMTIuNjQwOEw4LjQ5NjA5IDEyWk04LjYyNTA5IDE4QzkuMTc3MzggMTggOS42MjUwOSAxNy41NTIzIDkuNjI1MDkgMTdDOS42MjUwOSAxNi40NDc3IDkuMTc3MzggMTYgOC42MjUwOSAxNlYxN1YxOFpNOC41MDAwOSAxNkM3Ljk0NzgxIDE2IDcuNTAwMDkgMTYuNDQ3NyA3LjUwMDA5IDE3QzcuNTAwMDkgMTcuNTUyMyA3Ljk0NzgxIDE4IDguNTAwMDkgMThWMTdWMTZaTTE0LjQ5NjEgMlYxSDkuNDk2MDlWMlYzSDE0LjQ5NjFWMlpNOS40OTYwOSAyVjFDOC44MzMwNSAxIDguMTk3MTcgMS4yNjMzOSA3LjcyODMzIDEuNzMyMjNMOC40MzU0MyAyLjQzOTM0TDkuMTQyNTQgMy4xNDY0NUM5LjIzNjMxIDMuMDUyNjggOS4zNjM0OSAzIDkuNDk2MDkgM1YyWk04LjQzNTQzIDIuNDM5MzRMNy43MjgzMyAxLjczMjIzQzcuMjU5NDkgMi4yMDEwNyA2Ljk5NjA5IDIuODM2OTYgNi45OTYwOSAzLjVINy45OTYwOUg4Ljk5NjA5QzguOTk2MDkgMy4zNjczOSA5LjA0ODc3IDMuMjQwMjIgOS4xNDI1NCAzLjE0NjQ1TDguNDM1NDMgMi40MzkzNFpNNy45OTYwOSAzLjVINi45OTYwOUM2Ljk5NjA5IDQuMTYzMDQgNy4yNTk0OSA0Ljc5ODkzIDcuNzI4MzMgNS4yNjc3N0w4LjQzNTQzIDQuNTYwNjZMOS4xNDI1NCAzLjg1MzU1QzkuMDQ4NzcgMy43NTk3OCA4Ljk5NjA5IDMuNjMyNjEgOC45OTYwOSAzLjVINy45OTYwOVpNOC40MzU0MyA0LjU2MDY2TDcuNzI4MzMgNS4yNjc3N0M4LjE5NzE3IDUuNzM2NjEgOC44MzMwNSA2IDkuNDk2MDkgNlY1VjRDOS4zNjM0OSA0IDkuMjM2MzEgMy45NDczMiA5LjE0MjU0IDMuODUzNTVMOC40MzU0MyA0LjU2MDY2Wk05LjQ5NjA5IDVWNkgxNC40OTYxVjVWNEg5LjQ5NjA5VjVaTTE0LjQ5NjEgNVY2QzE1LjE1OTEgNiAxNS43OTUgNS43MzY2MSAxNi4yNjM5IDUuMjY3NzdMMTUuNTU2OCA0LjU2MDY2TDE0Ljg0OTYgMy44NTM1NUMxNC43NTU5IDMuOTQ3MzIgMTQuNjI4NyA0IDE0LjQ5NjEgNFY1Wk0xNS41NTY4IDQuNTYwNjZMMTYuMjYzOSA1LjI2Nzc3QzE2LjczMjcgNC43OTg5MyAxNi45OTYxIDQuMTYzMDQgMTYuOTk2MSAzLjVIMTUuOTk2MUgxNC45OTYxQzE0Ljk5NjEgMy42MzI2MSAxNC45NDM0IDMuNzU5NzggMTQuODQ5NiAzLjg1MzU1TDE1LjU1NjggNC41NjA2NlpNMTUuOTk2MSAzLjVIMTYuOTk2MUMxNi45OTYxIDIuODM2OTYgMTYuNzMyNyAyLjIwMTA3IDE2LjI2MzkgMS43MzIyM0wxNS41NTY4IDIuNDM5MzRMMTQuODQ5NiAzLjE0NjQ1QzE0Ljk0MzQgMy4yNDAyMiAxNC45OTYxIDMuMzY3MzkgMTQuOTk2MSAzLjVIMTUuOTk2MVpNMTUuNTU2OCAyLjQzOTM0TDE2LjI2MzkgMS43MzIyM0MxNS43OTUgMS4yNjMzOSAxNS4xNTkxIDEgMTQuNDk2MSAxVjJWM0MxNC42Mjg3IDMgMTQuNzU1OSAzLjA1MjY4IDE0Ljg0OTYgMy4xNDY0NUwxNS41NTY4IDIuNDM5MzRaTTE1Ljk5NjEgMy41TDE1Ljk2NTkgNC40OTk1NEMxNy41MzUyIDQuNTQ3MDEgMTguMDc2MiA0LjczNDgxIDE4LjQwOTQgNS4wNjg1NkwxOS4xMTcxIDQuMzYyTDE5LjgyNDggMy42NTU0NEMxOC44NzYgMi43MDUxOSAxNy41NjUgMi41NDY5OSAxNi4wMjYzIDIuNTAwNDZMMTUuOTk2MSAzLjVaTTE5LjExNzEgNC4zNjJMMTguNDEwOCA1LjA2OTkxQzE4LjYzMzUgNS4yOTIxNCAxOC44MDEgNS42MTg2NSAxOC44OTYgNi4zMjQyMkMxOC45OTUgNy4wNTg3MSAxOC45OTcxIDguMDM5NjggMTguOTk3MSA5LjQ4MkgxOS45OTcxSDIwLjk5NzFDMjAuOTk3MSA4LjA5NjMyIDIwLjk5OTIgNi45NTYyOSAyMC44NzgxIDYuMDU3MjhDMjAuNzUzMiA1LjEyOTM1IDIwLjQ4MDcgNC4zMDk4NiAxOS44MjM0IDMuNjU0MDlMMTkuMTE3MSA0LjM2MlpNMTkuOTk3MSA5LjQ4MkgxOC45OTcxVjE2SDE5Ljk5NzFIMjAuOTk3MVY5LjQ4MkgxOS45OTcxWk0xOS45OTcxIDE2SDE4Ljk5NzFDMTguOTk3MSAxNy40NDIzIDE4Ljk5NSAxOC40MjMzIDE4Ljg5NiAxOS4xNTc5QzE4LjgwMSAxOS44NjM2IDE4LjYzMzUgMjAuMTkwNiAxOC40MTA0IDIwLjQxMzVMMTkuMTE3MSAyMS4xMjFMMTkuODIzOCAyMS44Mjg1QzIwLjQ4MDcgMjEuMTcyNCAyMC43NTMyIDIwLjM1MjkgMjAuODc4MSAxOS40MjQ4QzIwLjk5OTIgMTguNTI1NyAyMC45OTcxIDE3LjM4NTcgMjAuOTk3MSAxNkgxOS45OTcxWk0xOS4xMTcxIDIxLjEyMUwxOC40MDk2IDIwLjQxNDNDMTguMTg3NSAyMC42MzY3IDE3Ljg2MDcgMjAuODA0MSAxNy4xNTQ3IDIwLjg5OUMxNi40MTk5IDIwLjk5NzkgMTUuNDM4OSAyMSAxMy45OTcxIDIxVjIyVjIzQzE1LjM4MjMgMjMgMTYuNTIyMiAyMy4wMDIxIDE3LjQyMTMgMjIuODgxMkMxOC4zNDkgMjIuNzU2NCAxOS4xNjg3IDIyLjQ4NDMgMTkuODI0NiAyMS44Mjc3TDE5LjExNzEgMjEuMTIxWk0xMy45OTcxIDIyVjIxSDkuOTk3MDlWMjJWMjNIMTMuOTk3MVYyMlpNOS45OTcwOSAyMlYyMUM4LjU1MzggMjEgNy41NzIyMyAyMC45OTc5IDYuODM3MzggMjAuODk5QzYuMTMxMzMgMjAuODA0MSA1LjgwNDc2IDIwLjYzNjcgNS41ODI2IDIwLjQxNDNMNC44NzUwOSAyMS4xMjFMNC4xNjc1OCAyMS44Mjc3QzQuODIzNDIgMjIuNDg0MyA1LjY0Mjg2IDIyLjc1NjQgNi41NzA4MSAyMi44ODEyQzcuNDY5OTYgMjMuMDAyMSA4LjYxMDM5IDIzIDkuOTk3MDkgMjNWMjJaTTQuODc1MDkgMjEuMTIxTDUuNTgyNiAyMC40MTQzQzUuMzU5OTIgMjAuMTkxNCA1LjE5MjQ3IDE5Ljg2MzkgNS4wOTc0IDE5LjE1NzlDNC45OTg0NyAxOC40MjMyIDQuOTk2MDkgMTcuNDQyMSA0Ljk5NjA5IDE2SDMuOTk2MDlIMi45OTYwOUMyLjk5NjA5IDE3LjM4NTkgMi45OTQyMiAxOC41MjU4IDMuMTE1MjkgMTkuNDI0OEMzLjI0MDIyIDIwLjM1MjYgMy41MTIyNyAyMS4xNzE2IDQuMTY3NTggMjEuODI3N0w0Ljg3NTA5IDIxLjEyMVpNMy45OTYwOSAxNkg0Ljk5NjA5VjkuNDgzSDMuOTk2MDlIMi45OTYwOVYxNkgzLjk5NjA5Wk0zLjk5NjA5IDkuNDgzSDQuOTk2MDlDNC45OTYwOSA4LjA0MDczIDQuOTk4MjIgNy4wNTkzOSA1LjA5NzA1IDYuMzI0NTRDNS4xOTIwMiA1LjYxODM2IDUuMzU5NDQgNS4yOTE2MSA1LjU4MTggNS4wNjk1MUw0Ljg3NTA5IDQuMzYyTDQuMTY4MzkgMy42NTQ0OUMzLjUxMTc0IDQuMzEwMzkgMy4yMzk2NyA1LjEzMDE0IDMuMTE0ODkgNi4wNTc5NkMyLjk5Mzk3IDYuOTU3MTEgMi45OTYwOSA4LjA5NzI3IDIuOTk2MDkgOS40ODNIMy45OTYwOVpNNC44NzUwOSA0LjM2Mkw1LjU4Mjc1IDUuMDY4NTZDNS45MTU5NCA0LjczNDg1IDYuNDU3ODQgNC41NDcwMSA4LjAyNjM0IDQuNDk5NTRMNy45OTYwOSAzLjVMNy45NjU4NCAyLjUwMDQ2QzYuNDI4MzQgMi41NDY5OSA1LjExNjI1IDIuNzA1MTUgNC4xNjc0NCAzLjY1NTQ0TDQuODc1MDkgNC4zNjJaTTcgMTAuNUw2LjI5MTk3IDExLjIwNjJMNy43ODgwNyAxMi43MDYyTDguNDk2MDkgMTJMOS4yMDQxMiAxMS4yOTM4TDcuNzA4MDMgOS43OTM4Mkw3IDEwLjVaTTguNDk2MDkgMTJMOS4yNjM4MiAxMi42NDA4TDExLjc2NzcgOS42NDA3N0wxMSA5TDEwLjIzMjMgOC4zNTkyM0w3LjcyODM2IDExLjM1OTJMOC40OTYwOSAxMlpNMTMgMTdWMThIMTdWMTdWMTZIMTNWMTdaTTEzIDExVjEySDE3VjExVjEwSDEzVjExWk04LjYyNTA5IDE3VjE2SDguNTAwMDlWMTdWMThIOC42MjUwOVYxN1pNOC43NTAwOSAxN0g3Ljc1MDA5QzcuNzUwMDkgMTYuODAxMSA3LjgyOTExIDE2LjYxMDMgNy45Njk3NiAxNi40Njk3TDguNjc2ODcgMTcuMTc2OEw5LjM4Mzk4IDE3Ljg4MzlDOS42MTg0IDE3LjY0OTUgOS43NTAwOSAxNy4zMzE1IDkuNzUwMDkgMTdIOC43NTAwOVpNOC42NzY4NyAxNy4xNzY4TDcuOTY5NzYgMTYuNDY5N0M4LjExMDQyIDE2LjMyOSA4LjMwMTE4IDE2LjI1IDguNTAwMDkgMTYuMjVWMTcuMjVWMTguMjVDOC44MzE2MSAxOC4yNSA5LjE0OTU2IDE4LjExODMgOS4zODM5OCAxNy44ODM5TDguNjc2ODcgMTcuMTc2OFpNOC41MDAwOSAxNy4yNVYxNi4yNUM4LjY5OSAxNi4yNSA4Ljg4OTc3IDE2LjMyOSA5LjAzMDQyIDE2LjQ2OTdMOC4zMjMzMiAxNy4xNzY4TDcuNjE2MjEgMTcuODgzOUM3Ljg1MDYzIDE4LjExODMgOC4xNjg1OCAxOC4yNSA4LjUwMDA5IDE4LjI1VjE3LjI1Wk04LjMyMzMyIDE3LjE3NjhMOS4wMzA0MiAxNi40Njk3QzkuMTcxMDggMTYuNjEwMyA5LjI1MDA5IDE2LjgwMTEgOS4yNTAwOSAxN0g4LjI1MDA5SDcuMjUwMDlDNy4yNTAwOSAxNy4zMzE1IDcuMzgxNzkgMTcuNjQ5NSA3LjYxNjIxIDE3Ljg4MzlMOC4zMjMzMiAxNy4xNzY4Wk04LjI1MDA5IDE3SDkuMjUwMDlDOS4yNTAwOSAxNy4xOTg5IDkuMTcxMDggMTcuMzg5NyA5LjAzMDQyIDE3LjUzMDNMOC4zMjMzMiAxNi44MjMyTDcuNjE2MjEgMTYuMTE2MUM3LjM4MTc5IDE2LjM1MDUgNy4yNTAwOSAxNi42Njg1IDcuMjUwMDkgMTdIOC4yNTAwOVpNOC4zMjMzMiAxNi44MjMyTDkuMDMwNDIgMTcuNTMwM0M4Ljg4OTc3IDE3LjY3MSA4LjY5OSAxNy43NSA4LjUwMDA5IDE3Ljc1VjE2Ljc1VjE1Ljc1QzguMTY4NTggMTUuNzUgNy44NTA2MyAxNS44ODE3IDcuNjE2MjEgMTYuMTE2MUw4LjMyMzMyIDE2LjgyMzJaTTguNTAwMDkgMTYuNzVWMTcuNzVDOC4zMDExOCAxNy43NSA4LjExMDQyIDE3LjY3MSA3Ljk2OTc2IDE3LjUzMDNMOC42NzY4NyAxNi44MjMyTDkuMzgzOTggMTYuMTE2MUM5LjE0OTU2IDE1Ljg4MTcgOC44MzE2MSAxNS43NSA4LjUwMDA5IDE1Ljc1VjE2Ljc1Wk04LjY3Njg3IDE2LjgyMzJMNy45Njk3NiAxNy41MzAzQzcuODI5MTEgMTcuMzg5NyA3Ljc1MDA5IDE3LjE5ODkgNy43NTAwOSAxN0g4Ljc1MDA5SDkuNzUwMDlDOS43NTAwOSAxNi42Njg1IDkuNjE4NCAxNi4zNTA1IDkuMzgzOTggMTYuMTE2MUw4LjY3Njg3IDE2LjgyMzJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg=="); }
.icon-ai                 { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDZMMTIuODg4MyA1LjU0MDcxQzEyLjcxNjYgNS4yMDg1OCAxMi4zNzM5IDUgMTIgNUMxMS42MjYxIDUgMTEuMjgzNCA1LjIwODU4IDExLjExMTcgNS41NDA3MUwxMiA2Wk0xMy4wMjI1IDcuOTc3NTJMMTIuMTM0MiA4LjQzNjgxQzEyLjIyOTMgOC42MjA3OSAxMi4zNzkyIDguNzcwNjkgMTIuNTYzMiA4Ljg2NTgxTDEzLjAyMjUgNy45Nzc1MlpNMTUgOUwxNS40NTkzIDkuODg4MjlDMTUuNzkxNCA5LjcxNjU2IDE2IDkuMzczOSAxNiA5QzE2IDguNjI2MSAxNS43OTE0IDguMjgzNDQgMTUuNDU5MyA4LjExMTcxTDE1IDlaTTEzLjAyMjUgMTAuMDIyNUwxMi41NjMyIDkuMTM0MTlDMTIuMzc5MiA5LjIyOTMxIDEyLjIyOTMgOS4zNzkyMSAxMi4xMzQyIDkuNTYzMTlMMTMuMDIyNSAxMC4wMjI1Wk0xMiAxMkwxMS4xMTE3IDEyLjQ1OTNDMTEuMjgzNCAxMi43OTE0IDExLjYyNjEgMTMgMTIgMTNDMTIuMzczOSAxMyAxMi43MTY2IDEyLjc5MTQgMTIuODg4MyAxMi40NTkzTDEyIDEyWk0xMC45Nzc1IDEwLjAyMjVMMTEuODY1OCA5LjU2MzE5QzExLjc3MDcgOS4zNzkyMSAxMS42MjA4IDkuMjI5MzEgMTEuNDM2OCA5LjEzNDE5TDEwLjk3NzUgMTAuMDIyNVpNOSA5TDguNTQwNzEgOC4xMTE3MUM4LjIwODU4IDguMjgzNDQgOCA4LjYyNjEgOCA5QzggOS4zNzM5IDguMjA4NTggOS43MTY1NiA4LjU0MDcxIDkuODg4MjlMOSA5Wk0xMC45Nzc1IDcuOTc3NTJMMTEuNDM2OCA4Ljg2NTgxQzExLjYyMDggOC43NzA2OSAxMS43NzA3IDguNjIwNzkgMTEuODY1OCA4LjQzNjgxTDEwLjk3NzUgNy45Nzc1MlpNMjEgMTJIMjBDMjAgMTYuNDE4MyAxNi40MTgzIDIwIDEyIDIwVjIxVjIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkgyMVpNMTIgMjFWMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkgzSDJDMiAxNy41MjI4IDYuNDc3MTUgMjIgMTIgMjJWMjFaTTMgMTJINEM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRWM1YyQzYuNDc3MTUgMiAyIDYuNDc3MTUgMiAxMkgzWk0xMiAzVjRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJIMjFIMjJDMjIgNi40NzcxNSAxNy41MjI4IDIgMTIgMlYzWk0xMiAxNVYxNkMxNC4yOTA1IDE2IDE2LjIyNzQgMTcuMDY2OSAxNy4yMzQ2IDE4LjU1OTRMMTguMDYzNSAxOEwxOC44OTI0IDE3LjQ0MDZDMTcuNDc5IDE1LjM0NjMgMTQuODkxNCAxNCAxMiAxNFYxNVpNNS45MzY0OCAxOEw2Ljc2NTM3IDE4LjU1OTRDNy43NzI2MiAxNy4wNjY5IDkuNzA5NDYgMTYgMTIgMTZWMTVWMTRDOS4xMDg1NiAxNCA2LjUyMDk5IDE1LjM0NjMgNS4xMDc1OCAxNy40NDA2TDUuOTM2NDggMThaTTEyIDZMMTEuMTExNyA2LjQ1OTI5TDEyLjEzNDIgOC40MzY4MUwxMy4wMjI1IDcuOTc3NTJMMTMuOTEwOCA3LjUxODI0TDEyLjg4ODMgNS41NDA3MUwxMiA2Wk0xMy4wMjI1IDcuOTc3NTJMMTIuNTYzMiA4Ljg2NTgxTDE0LjU0MDcgOS44ODgyOUwxNSA5TDE1LjQ1OTMgOC4xMTE3MUwxMy40ODE4IDcuMDg5MjRMMTMuMDIyNSA3Ljk3NzUyWk0xNSA5TDE0LjU0MDcgOC4xMTE3MUwxMi41NjMyIDkuMTM0MTlMMTMuMDIyNSAxMC4wMjI1TDEzLjQ4MTggMTAuOTEwOEwxNS40NTkzIDkuODg4MjlMMTUgOVpNMTMuMDIyNSAxMC4wMjI1TDEyLjEzNDIgOS41NjMxOUwxMS4xMTE3IDExLjU0MDdMMTIgMTJMMTIuODg4MyAxMi40NTkzTDEzLjkxMDggMTAuNDgxOEwxMy4wMjI1IDEwLjAyMjVaTTEyIDEyTDEyLjg4ODMgMTEuNTQwN0wxMS44NjU4IDkuNTYzMTlMMTAuOTc3NSAxMC4wMjI1TDEwLjA4OTIgMTAuNDgxOEwxMS4xMTE3IDEyLjQ1OTNMMTIgMTJaTTEwLjk3NzUgMTAuMDIyNUwxMS40MzY4IDkuMTM0MTlMOS40NTkyOSA4LjExMTcxTDkgOUw4LjU0MDcxIDkuODg4MjlMMTAuNTE4MiAxMC45MTA4TDEwLjk3NzUgMTAuMDIyNVpNOSA5TDkuNDU5MjkgOS44ODgyOUwxMS40MzY4IDguODY1ODFMMTAuOTc3NSA3Ljk3NzUyTDEwLjUxODIgNy4wODkyNEw4LjU0MDcxIDguMTExNzFMOSA5Wk0xMC45Nzc1IDcuOTc3NTJMMTEuODY1OCA4LjQzNjgxTDEyLjg4ODMgNi40NTkyOUwxMiA2TDExLjExMTcgNS41NDA3MUwxMC4wODkyIDcuNTE4MjRMMTAuOTc3NSA3Ljk3NzUyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=");                 mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDZMMTIuODg4MyA1LjU0MDcxQzEyLjcxNjYgNS4yMDg1OCAxMi4zNzM5IDUgMTIgNUMxMS42MjYxIDUgMTEuMjgzNCA1LjIwODU4IDExLjExMTcgNS41NDA3MUwxMiA2Wk0xMy4wMjI1IDcuOTc3NTJMMTIuMTM0MiA4LjQzNjgxQzEyLjIyOTMgOC42MjA3OSAxMi4zNzkyIDguNzcwNjkgMTIuNTYzMiA4Ljg2NTgxTDEzLjAyMjUgNy45Nzc1MlpNMTUgOUwxNS40NTkzIDkuODg4MjlDMTUuNzkxNCA5LjcxNjU2IDE2IDkuMzczOSAxNiA5QzE2IDguNjI2MSAxNS43OTE0IDguMjgzNDQgMTUuNDU5MyA4LjExMTcxTDE1IDlaTTEzLjAyMjUgMTAuMDIyNUwxMi41NjMyIDkuMTM0MTlDMTIuMzc5MiA5LjIyOTMxIDEyLjIyOTMgOS4zNzkyMSAxMi4xMzQyIDkuNTYzMTlMMTMuMDIyNSAxMC4wMjI1Wk0xMiAxMkwxMS4xMTE3IDEyLjQ1OTNDMTEuMjgzNCAxMi43OTE0IDExLjYyNjEgMTMgMTIgMTNDMTIuMzczOSAxMyAxMi43MTY2IDEyLjc5MTQgMTIuODg4MyAxMi40NTkzTDEyIDEyWk0xMC45Nzc1IDEwLjAyMjVMMTEuODY1OCA5LjU2MzE5QzExLjc3MDcgOS4zNzkyMSAxMS42MjA4IDkuMjI5MzEgMTEuNDM2OCA5LjEzNDE5TDEwLjk3NzUgMTAuMDIyNVpNOSA5TDguNTQwNzEgOC4xMTE3MUM4LjIwODU4IDguMjgzNDQgOCA4LjYyNjEgOCA5QzggOS4zNzM5IDguMjA4NTggOS43MTY1NiA4LjU0MDcxIDkuODg4MjlMOSA5Wk0xMC45Nzc1IDcuOTc3NTJMMTEuNDM2OCA4Ljg2NTgxQzExLjYyMDggOC43NzA2OSAxMS43NzA3IDguNjIwNzkgMTEuODY1OCA4LjQzNjgxTDEwLjk3NzUgNy45Nzc1MlpNMjEgMTJIMjBDMjAgMTYuNDE4MyAxNi40MTgzIDIwIDEyIDIwVjIxVjIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkgyMVpNMTIgMjFWMjBDNy41ODE3MiAyMCA0IDE2LjQxODMgNCAxMkgzSDJDMiAxNy41MjI4IDYuNDc3MTUgMjIgMTIgMjJWMjFaTTMgMTJINEM0IDcuNTgxNzIgNy41ODE3MiA0IDEyIDRWM1YyQzYuNDc3MTUgMiAyIDYuNDc3MTUgMiAxMkgzWk0xMiAzVjRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJIMjFIMjJDMjIgNi40NzcxNSAxNy41MjI4IDIgMTIgMlYzWk0xMiAxNVYxNkMxNC4yOTA1IDE2IDE2LjIyNzQgMTcuMDY2OSAxNy4yMzQ2IDE4LjU1OTRMMTguMDYzNSAxOEwxOC44OTI0IDE3LjQ0MDZDMTcuNDc5IDE1LjM0NjMgMTQuODkxNCAxNCAxMiAxNFYxNVpNNS45MzY0OCAxOEw2Ljc2NTM3IDE4LjU1OTRDNy43NzI2MiAxNy4wNjY5IDkuNzA5NDYgMTYgMTIgMTZWMTVWMTRDOS4xMDg1NiAxNCA2LjUyMDk5IDE1LjM0NjMgNS4xMDc1OCAxNy40NDA2TDUuOTM2NDggMThaTTEyIDZMMTEuMTExNyA2LjQ1OTI5TDEyLjEzNDIgOC40MzY4MUwxMy4wMjI1IDcuOTc3NTJMMTMuOTEwOCA3LjUxODI0TDEyLjg4ODMgNS41NDA3MUwxMiA2Wk0xMy4wMjI1IDcuOTc3NTJMMTIuNTYzMiA4Ljg2NTgxTDE0LjU0MDcgOS44ODgyOUwxNSA5TDE1LjQ1OTMgOC4xMTE3MUwxMy40ODE4IDcuMDg5MjRMMTMuMDIyNSA3Ljk3NzUyWk0xNSA5TDE0LjU0MDcgOC4xMTE3MUwxMi41NjMyIDkuMTM0MTlMMTMuMDIyNSAxMC4wMjI1TDEzLjQ4MTggMTAuOTEwOEwxNS40NTkzIDkuODg4MjlMMTUgOVpNMTMuMDIyNSAxMC4wMjI1TDEyLjEzNDIgOS41NjMxOUwxMS4xMTE3IDExLjU0MDdMMTIgMTJMMTIuODg4MyAxMi40NTkzTDEzLjkxMDggMTAuNDgxOEwxMy4wMjI1IDEwLjAyMjVaTTEyIDEyTDEyLjg4ODMgMTEuNTQwN0wxMS44NjU4IDkuNTYzMTlMMTAuOTc3NSAxMC4wMjI1TDEwLjA4OTIgMTAuNDgxOEwxMS4xMTE3IDEyLjQ1OTNMMTIgMTJaTTEwLjk3NzUgMTAuMDIyNUwxMS40MzY4IDkuMTM0MTlMOS40NTkyOSA4LjExMTcxTDkgOUw4LjU0MDcxIDkuODg4MjlMMTAuNTE4MiAxMC45MTA4TDEwLjk3NzUgMTAuMDIyNVpNOSA5TDkuNDU5MjkgOS44ODgyOUwxMS40MzY4IDguODY1ODFMMTAuOTc3NSA3Ljk3NzUyTDEwLjUxODIgNy4wODkyNEw4LjU0MDcxIDguMTExNzFMOSA5Wk0xMC45Nzc1IDcuOTc3NTJMMTEuODY1OCA4LjQzNjgxTDEyLjg4ODMgNi40NTkyOUwxMiA2TDExLjExMTcgNS41NDA3MUwxMC4wODkyIDcuNTE4MjRMMTAuOTc3NSA3Ljk3NzUyWiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo="); }
.icon-check              { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTNMOSAxN0wxOSA3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");              mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTNMOSAxN0wxOSA3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); }
.icon-chevron-right      { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNUwxNiAxMkw5IDE5IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");      mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNUwxNiAxMkw5IDE5IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); }
.icon-change             { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuOTMzNTkgMy42MjQ5M1Y4LjYyNDkzSDQuNTE1NTlNNC41MTU1OSA4LjYyNDkzQzUuMTc5NDQgNi45ODMwNiA2LjM2OTI4IDUuNjA3ODQgNy44OTg2MiA0LjcxNDc5QzkuNDI3OTcgMy44MjE3NCAxMS4yMTA0IDMuNDYxMzQgMTIuOTY2NiAzLjY5MDA3QzE0LjcyMjcgMy45MTg3OSAxNi4zNTM0IDQuNzIzNzIgMTcuNjAzIDUuOTc4N0MxOC44NTI1IDcuMjMzNjkgMTkuNjUwNCA4Ljg2Nzc5IDE5Ljg3MTYgMTAuNjI0OU00LjUxNTU5IDguNjI0OTNIOC45MzM1OU0xOS45MzM2IDE5LjYyNDlWMTQuNjI0OUgxOS4zNTI2TTE5LjM1MjYgMTQuNjI0OUMxOC42ODc4IDE2LjI2NTggMTcuNDk3NiAxNy42NCAxNS45Njg0IDE4LjUzMjJDMTQuNDM5MiAxOS40MjQ1IDEyLjY1NzMgMTkuNzg0NCAxMC45MDE3IDE5LjU1NThDOS4xNDYwNSAxOS4zMjcyIDcuNTE1NzkgMTguNTIyOCA2LjI2NjEzIDE3LjI2ODdDNS4wMTY0NiAxNi4wMTQ1IDQuMjE3OTUgMTQuMzgxNCAzLjk5NTU5IDEyLjYyNDlNMTkuMzUyNiAxNC42MjQ5SDE0LjkzMzYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");             mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuOTMzNTkgMy42MjQ5M1Y4LjYyNDkzSDQuNTE1NTlNNC41MTU1OSA4LjYyNDkzQzUuMTc5NDQgNi45ODMwNiA2LjM2OTI4IDUuNjA3ODQgNy44OTg2MiA0LjcxNDc5QzkuNDI3OTcgMy44MjE3NCAxMS4yMTA0IDMuNDYxMzQgMTIuOTY2NiAzLjY5MDA3QzE0LjcyMjcgMy45MTg3OSAxNi4zNTM0IDQuNzIzNzIgMTcuNjAzIDUuOTc4N0MxOC44NTI1IDcuMjMzNjkgMTkuNjUwNCA4Ljg2Nzc5IDE5Ljg3MTYgMTAuNjI0OU00LjUxNTU5IDguNjI0OTNIOC45MzM1OU0xOS45MzM2IDE5LjYyNDlWMTQuNjI0OUgxOS4zNTI2TTE5LjM1MjYgMTQuNjI0OUMxOC42ODc4IDE2LjI2NTggMTcuNDk3NiAxNy42NCAxNS45Njg0IDE4LjUzMjJDMTQuNDM5MiAxOS40MjQ1IDEyLjY1NzMgMTkuNzg0NCAxMC45MDE3IDE5LjU1NThDOS4xNDYwNSAxOS4zMjcyIDcuNTE1NzkgMTguNTIyOCA2LjI2NjEzIDE3LjI2ODdDNS4wMTY0NiAxNi4wMTQ1IDQuMjE3OTUgMTQuMzgxNCAzLjk5NTU5IDEyLjYyNDlNMTkuMzUyNiAxNC42MjQ5SDE0LjkzMzYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); }
.icon-chain              { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI4IDI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2LjEzMjcgMTEuODY3M0MxNS4yNTc1IDEwLjk5MjUgMTQuMDcwOCAxMC41MDEgMTIuODMzMyAxMC41MDFDMTEuNTk1OSAxMC41MDEgMTAuNDA5MSAxMC45OTI1IDkuNTM0IDExLjg2NzNMNC44NjczMyAxNi41MzRDNC40MjE2MiAxNi45NjQ1IDQuMDY2MSAxNy40Nzk0IDMuODIxNTMgMTguMDQ4OEMzLjU3Njk1IDE4LjYxODEgMy40NDgyMiAxOS4yMzA1IDMuNDQyODMgMTkuODUwMUMzLjQzNzQ1IDIwLjQ2OTggMy41NTU1MiAyMS4wODQzIDMuNzkwMTcgMjEuNjU3OEM0LjAyNDgxIDIyLjIzMTMgNC4zNzEzMiAyMi43NTIzIDQuODA5NDkgMjMuMTkwNUM1LjI0NzY2IDIzLjYyODcgNS43Njg3IDIzLjk3NTIgNi4zNDIyMSAyNC4yMDk4QzYuOTE1NzMgMjQuNDQ0NSA3LjUzMDI0IDI0LjU2MjYgOC4xNDk4NyAyNC41NTcyQzguNzY5NTEgMjQuNTUxOCA5LjM4MTg3IDI0LjQyMyA5Ljk1MTIyIDI0LjE3ODVDMTAuNTIwNiAyMy45MzM5IDExLjAzNTUgMjMuNTc4NCAxMS40NjYgMjMuMTMyN0wxMi43NTE3IDIxLjg0ODJNMTEuODY3MyAxNi4xMzI3QzEyLjc0MjUgMTcuMDA3NSAxMy45MjkyIDE3LjQ5OSAxNS4xNjY3IDE3LjQ5OUMxNi40MDQxIDE3LjQ5OSAxNy41OTA5IDE3LjAwNzUgMTguNDY2IDE2LjEzMjdMMjMuMTMyNyAxMS40NjZDMjMuOTgyNyAxMC41ODU5IDI0LjQ1MzEgOS40MDcwNSAyNC40NDI1IDguMTgzNDZDMjQuNDMxOCA2Ljk1OTg4IDIzLjk0MTEgNS43ODk0MiAyMy4wNzU4IDQuOTI0MThDMjIuMjEwNiA0LjA1ODk0IDIxLjA0MDEgMy41NjgxNSAxOS44MTY1IDMuNTU3NTJDMTguNTkzIDMuNTQ2ODkgMTcuNDE0MSA0LjAxNzI2IDE2LjUzNCA0Ljg2NzMzTDE1LjI1MDcgNi4xNTA2NyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg==");              mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI4IDI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2LjEzMjcgMTEuODY3M0MxNS4yNTc1IDEwLjk5MjUgMTQuMDcwOCAxMC41MDEgMTIuODMzMyAxMC41MDFDMTEuNTk1OSAxMC41MDEgMTAuNDA5MSAxMC45OTI1IDkuNTM0IDExLjg2NzNMNC44NjczMyAxNi41MzRDNC40MjE2MiAxNi45NjQ1IDQuMDY2MSAxNy40Nzk0IDMuODIxNTMgMTguMDQ4OEMzLjU3Njk1IDE4LjYxODEgMy40NDgyMiAxOS4yMzA1IDMuNDQyODMgMTkuODUwMUMzLjQzNzQ1IDIwLjQ2OTggMy41NTU1MiAyMS4wODQzIDMuNzkwMTcgMjEuNjU3OEM0LjAyNDgxIDIyLjIzMTMgNC4zNzEzMiAyMi43NTIzIDQuODA5NDkgMjMuMTkwNUM1LjI0NzY2IDIzLjYyODcgNS43Njg3IDIzLjk3NTIgNi4zNDIyMSAyNC4yMDk4QzYuOTE1NzMgMjQuNDQ0NSA3LjUzMDI0IDI0LjU2MjYgOC4xNDk4NyAyNC41NTcyQzguNzY5NTEgMjQuNTUxOCA5LjM4MTg3IDI0LjQyMyA5Ljk1MTIyIDI0LjE3ODVDMTAuNTIwNiAyMy45MzM5IDExLjAzNTUgMjMuNTc4NCAxMS40NjYgMjMuMTMyN0wxMi43NTE3IDIxLjg0ODJNMTEuODY3MyAxNi4xMzI3QzEyLjc0MjUgMTcuMDA3NSAxMy45MjkyIDE3LjQ5OSAxNS4xNjY3IDE3LjQ5OUMxNi40MDQxIDE3LjQ5OSAxNy41OTA5IDE3LjAwNzUgMTguNDY2IDE2LjEzMjdMMjMuMTMyNyAxMS40NjZDMjMuOTgyNyAxMC41ODU5IDI0LjQ1MzEgOS40MDcwNSAyNC40NDI1IDguMTgzNDZDMjQuNDMxOCA2Ljk1OTg4IDIzLjk0MTEgNS43ODk0MiAyMy4wNzU4IDQuOTI0MThDMjIuMjEwNiA0LjA1ODk0IDIxLjA0MDEgMy41NjgxNSAxOS44MTY1IDMuNTU3NTJDMTguNTkzIDMuNTQ2ODkgMTcuNDE0MSA0LjAxNzI2IDE2LjUzNCA0Ljg2NzMzTDE1LjI1MDcgNi4xNTA2NyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg=="); }
.icon-bullet             { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuMzMzMzMgOC42NjY2N0w2IDExLjMzMzNMMTIuNjY2NyA0LjY2NjY3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");             mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMuMzMzMzMgOC42NjY2N0w2IDExLjMzMzNMMTIuNjY2NyA0LjY2NjY3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-arrow-after-link   { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYgMy4zMzMzM0wxMC42NjY3IDhMNiAxMi42NjY3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzBfNCIgeDE9IjYiIHkxPSI4IiB4Mj0iMTAuNjY2NyIgeTI9IjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGMEY2RiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjUwMDUiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");   mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYgMy4zMzMzM0wxMC42NjY3IDhMNiAxMi42NjY3IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzBfNCIgeDE9IjYiIHkxPSI4IiB4Mj0iMTAuNjY2NyIgeTI9IjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGMEY2RiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjUwMDUiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K"); }
.icon-mcp                { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTExLjUyMzMgOC40NzY2N0MxMC44OTgyIDcuODUxNzYgMTAuMDUwNSA3LjUwMDcxIDkuMTY2NjcgNy41MDA3MUM4LjI4Mjc5IDcuNTAwNzEgNy40MzUwOSA3Ljg1MTc2IDYuODEgOC40NzY2N0wzLjQ3NjY3IDExLjgxQzMuMTU4MyAxMi4xMTc1IDIuOTA0MzYgMTIuNDg1MyAyLjcyOTY2IDEyLjg5MkMyLjU1NDk3IDEzLjI5ODcgMi40NjMwMSAxMy43MzYxIDIuNDU5MTcgMTQuMTc4N0MyLjQ1NTMyIDE0LjYyMTMgMi41Mzk2NiAxNS4wNjAyIDIuNzA3MjYgMTUuNDY5OEMyLjg3NDg2IDE1Ljg3OTUgMy4xMjIzNyAxNi4yNTE3IDMuNDM1MzUgMTYuNTY0N0MzLjc0ODMzIDE2Ljg3NzYgNC4xMjA1IDE3LjEyNTEgNC41MzAxNSAxNy4yOTI3QzQuOTM5ODEgMTcuNDYwMyA1LjM3ODc0IDE3LjU0NDcgNS44MjEzNCAxNy41NDA4QzYuMjYzOTQgMTcuNTM3IDYuNzAxMzQgMTcuNDQ1IDcuMTA4MDIgMTcuMjcwM0M3LjUxNDcgMTcuMDk1NiA3Ljg4MjUxIDE2Ljg0MTcgOC4xOSAxNi41MjMzTDkuMTA4MzMgMTUuNjA1OE04LjQ3NjY3IDExLjUyMzNDOS4xMDE3NiAxMi4xNDgyIDkuOTQ5NDUgMTIuNDk5MyAxMC44MzMzIDEyLjQ5OTNDMTEuNzE3MiAxMi40OTkzIDEyLjU2NDkgMTIuMTQ4MiAxMy4xOSAxMS41MjMzTDE2LjUyMzMgOC4xOUMxNy4xMzA1IDcuNTYxMzMgMTcuNDY2NSA2LjcxOTMyIDE3LjQ1ODkgNS44NDUzM0MxNy40NTEzIDQuOTcxMzQgMTcuMTAwOCA0LjEzNTMgMTYuNDgyNyAzLjUxNzI3QzE1Ljg2NDcgMi44OTkyNCAxNS4wMjg3IDIuNTQ4NjggMTQuMTU0NyAyLjU0MTA5QzEzLjI4MDcgMi41MzM0OSAxMi40Mzg3IDIuODY5NDcgMTEuODEgMy40NzY2N0wxMC44OTMzIDQuMzkzMzMiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");                mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTExLjUyMzMgOC40NzY2N0MxMC44OTgyIDcuODUxNzYgMTAuMDUwNSA3LjUwMDcxIDkuMTY2NjcgNy41MDA3MUM4LjI4Mjc5IDcuNTAwNzEgNy40MzUwOSA3Ljg1MTc2IDYuODEgOC40NzY2N0wzLjQ3NjY3IDExLjgxQzMuMTU4MyAxMi4xMTc1IDIuOTA0MzYgMTIuNDg1MyAyLjcyOTY2IDEyLjg5MkMyLjU1NDk3IDEzLjI5ODcgMi40NjMwMSAxMy43MzYxIDIuNDU5MTcgMTQuMTc4N0MyLjQ1NTMyIDE0LjYyMTMgMi41Mzk2NiAxNS4wNjAyIDIuNzA3MjYgMTUuNDY5OEMyLjg3NDg2IDE1Ljg3OTUgMy4xMjIzNyAxNi4yNTE3IDMuNDM1MzUgMTYuNTY0N0MzLjc0ODMzIDE2Ljg3NzYgNC4xMjA1IDE3LjEyNTEgNC41MzAxNSAxNy4yOTI3QzQuOTM5ODEgMTcuNDYwMyA1LjM3ODc0IDE3LjU0NDcgNS44MjEzNCAxNy41NDA4QzYuMjYzOTQgMTcuNTM3IDYuNzAxMzQgMTcuNDQ1IDcuMTA4MDIgMTcuMjcwM0M3LjUxNDcgMTcuMDk1NiA3Ljg4MjUxIDE2Ljg0MTcgOC4xOSAxNi41MjMzTDkuMTA4MzMgMTUuNjA1OE04LjQ3NjY3IDExLjUyMzNDOS4xMDE3NiAxMi4xNDgyIDkuOTQ5NDUgMTIuNDk5MyAxMC44MzMzIDEyLjQ5OTNDMTEuNzE3MiAxMi40OTkzIDEyLjU2NDkgMTIuMTQ4MiAxMy4xOSAxMS41MjMzTDE2LjUyMzMgOC4xOUMxNy4xMzA1IDcuNTYxMzMgMTcuNDY2NSA2LjcxOTMyIDE3LjQ1ODkgNS44NDUzM0MxNy40NTEzIDQuOTcxMzQgMTcuMTAwOCA0LjEzNTMgMTYuNDgyNyAzLjUxNzI3QzE1Ljg2NDcgMi44OTkyNCAxNS4wMjg3IDIuNTQ4NjggMTQuMTU0NyAyLjU0MTA5QzEzLjI4MDcgMi41MzM0OSAxMi40Mzg3IDIuODY5NDcgMTEuODEgMy40NzY2N0wxMC44OTMzIDQuMzkzMzMiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo="); }
.icon-ai-large           { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuNjY2NjcgOC4zMzMzM0g2LjY3NU0xMCA4LjMzMzMzSDEwLjAwODNNMTMuMzMzMyA4LjMzMzMzSDEzLjM0MTdNNy41IDEzLjMzMzNINC4xNjY2N0MzLjcyNDY0IDEzLjMzMzMgMy4zMDA3MiAxMy4xNTc3IDIuOTg4MTYgMTIuODQ1MkMyLjY3NTU5IDEyLjUzMjYgMi41IDEyLjEwODcgMi41IDExLjY2NjdWNUMyLjUgNC41NTc5NyAyLjY3NTU5IDQuMTM0MDUgMi45ODgxNiAzLjgyMTQ5QzMuMzAwNzIgMy41MDg5MyAzLjcyNDY0IDMuMzMzMzMgNC4xNjY2NyAzLjMzMzMzSDE1LjgzMzNDMTYuMjc1NCAzLjMzMzMzIDE2LjY5OTMgMy41MDg5MyAxNy4wMTE4IDMuODIxNDlDMTcuMzI0NCA0LjEzNDA1IDE3LjUgNC41NTc5NyAxNy41IDVWMTEuNjY2N0MxNy41IDEyLjEwODcgMTcuMzI0NCAxMi41MzI2IDE3LjAxMTggMTIuODQ1MkMxNi42OTkzIDEzLjE1NzcgMTYuMjc1NCAxMy4zMzMzIDE1LjgzMzMgMTMuMzMzM0gxMS42NjY3TDcuNSAxNy41VjEzLjMzMzNaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");           mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuNjY2NjcgOC4zMzMzM0g2LjY3NU0xMCA4LjMzMzMzSDEwLjAwODNNMTMuMzMzMyA4LjMzMzMzSDEzLjM0MTdNNy41IDEzLjMzMzNINC4xNjY2N0MzLjcyNDY0IDEzLjMzMzMgMy4zMDA3MiAxMy4xNTc3IDIuOTg4MTYgMTIuODQ1MkMyLjY3NTU5IDEyLjUzMjYgMi41IDEyLjEwODcgMi41IDExLjY2NjdWNUMyLjUgNC41NTc5NyAyLjY3NTU5IDQuMTM0MDUgMi45ODgxNiAzLjgyMTQ5QzMuMzAwNzIgMy41MDg5MyAzLjcyNDY0IDMuMzMzMzMgNC4xNjY2NyAzLjMzMzMzSDE1LjgzMzNDMTYuMjc1NCAzLjMzMzMzIDE2LjY5OTMgMy41MDg5MyAxNy4wMTE4IDMuODIxNDlDMTcuMzI0NCA0LjEzNDA1IDE3LjUgNC41NTc5NyAxNy41IDVWMTEuNjY2N0MxNy41IDEyLjEwODcgMTcuMzI0NCAxMi41MzI2IDE3LjAxMTggMTIuODQ1MkMxNi42OTkzIDEzLjE1NzcgMTYuMjc1NCAxMy4zMzMzIDE1LjgzMzMgMTMuMzMzM0gxMS42NjY3TDcuNSAxNy41VjEzLjMzMzNaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-data-personal      { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTkuMzMzMzMgNC4wODMzM0M5LjMzMzMzIDQuNzAyMTcgOS4wODc1IDUuMjk1NjYgOC42NDk5MiA1LjczMzI1QzguMjEyMzMgNi4xNzA4MyA3LjYxODg0IDYuNDE2NjcgNyA2LjQxNjY3QzYuMzgxMTYgNi40MTY2NyA1Ljc4NzY3IDYuMTcwODMgNS4zNTAwOCA1LjczMzI1QzQuOTEyNSA1LjI5NTY2IDQuNjY2NjcgNC43MDIxNyA0LjY2NjY3IDQuMDgzMzNDNC42NjY2NyAzLjQ2NDUgNC45MTI1IDIuODcxIDUuMzUwMDggMi40MzM0MkM1Ljc4NzY3IDEuOTk1ODMgNi4zODExNiAxLjc1IDcgMS43NUM3LjYxODg0IDEuNzUgOC4yMTIzMyAxLjk5NTgzIDguNjQ5OTIgMi40MzM0MkM5LjA4NzUgMi44NzEgOS4zMzMzMyAzLjQ2NDUgOS4zMzMzMyA0LjA4MzMzWk03IDguMTY2NjdDNS45MTcwMyA4LjE2NjY3IDQuODc4NDIgOC41OTY4NyA0LjExMjY1IDkuMzYyNjVDMy4zNDY4NyAxMC4xMjg0IDIuOTE2NjcgMTEuMTY3IDIuOTE2NjcgMTIuMjVIMTEuMDgzM0MxMS4wODMzIDExLjE2NyAxMC42NTMxIDEwLjEyODQgOS44ODczNSA5LjM2MjY1QzkuMTIxNTggOC41OTY4NyA4LjA4Mjk3IDguMTY2NjcgNyA4LjE2NjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");      mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTkuMzMzMzMgNC4wODMzM0M5LjMzMzMzIDQuNzAyMTcgOS4wODc1IDUuMjk1NjYgOC42NDk5MiA1LjczMzI1QzguMjEyMzMgNi4xNzA4MyA3LjYxODg0IDYuNDE2NjcgNyA2LjQxNjY3QzYuMzgxMTYgNi40MTY2NyA1Ljc4NzY3IDYuMTcwODMgNS4zNTAwOCA1LjczMzI1QzQuOTEyNSA1LjI5NTY2IDQuNjY2NjcgNC43MDIxNyA0LjY2NjY3IDQuMDgzMzNDNC42NjY2NyAzLjQ2NDUgNC45MTI1IDIuODcxIDUuMzUwMDggMi40MzM0MkM1Ljc4NzY3IDEuOTk1ODMgNi4zODExNiAxLjc1IDcgMS43NUM3LjYxODg0IDEuNzUgOC4yMTIzMyAxLjk5NTgzIDguNjQ5OTIgMi40MzM0MkM5LjA4NzUgMi44NzEgOS4zMzMzMyAzLjQ2NDUgOS4zMzMzMyA0LjA4MzMzWk03IDguMTY2NjdDNS45MTcwMyA4LjE2NjY3IDQuODc4NDIgOC41OTY4NyA0LjExMjY1IDkuMzYyNjVDMy4zNDY4NyAxMC4xMjg0IDIuOTE2NjcgMTEuMTY3IDIuOTE2NjcgMTIuMjVIMTEuMDgzM0MxMS4wODMzIDExLjE2NyAxMC42NTMxIDEwLjEyODQgOS44ODczNSA5LjM2MjY1QzkuMTIxNTggOC41OTY4NyA4LjA4Mjk3IDguMTY2NjcgNyA4LjE2NjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo="); }
.icon-data-knowledge     { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTcgMy42NDc1OFYxMS4yMzA5TTcgMTEuMjMwOUM3LjY4MTMzIDEwLjc3ODIgOC42MDY1IDEwLjUgOS42MjUgMTAuNUMxMC42NDQxIDEwLjUgMTEuNTY4NyAxMC43NzgyIDEyLjI1IDExLjIzMDlWMy42NDc1OEMxMS41Njg3IDMuMTk0OTIgMTAuNjQ0MSAyLjkxNjY3IDkuNjI1IDIuOTE2NjdDOC42MDY1IDIuOTE2NjcgNy42ODEzMyAzLjE5NDkyIDcgMy42NDc1OEM2LjMxODY3IDMuMTk0OTIgNS4zOTM1IDIuOTE2NjcgNC4zNzUgMi45MTY2N0MzLjM1NjUgMi45MTY2NyAyLjQzMTMzIDMuMTk0OTIgMS43NSAzLjY0NzU4VjExLjIzMDlDMi40MzEzMyAxMC43NzgyIDMuMzU2NSAxMC41IDQuMzc1IDEwLjVDNS4zOTM1IDEwLjUgNi4zMTg2NyAxMC43NzgyIDcgMTEuMjMwOVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");     mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTcgMy42NDc1OFYxMS4yMzA5TTcgMTEuMjMwOUM3LjY4MTMzIDEwLjc3ODIgOC42MDY1IDEwLjUgOS42MjUgMTAuNUMxMC42NDQxIDEwLjUgMTEuNTY4NyAxMC43NzgyIDEyLjI1IDExLjIzMDlWMy42NDc1OEMxMS41Njg3IDMuMTk0OTIgMTAuNjQ0MSAyLjkxNjY3IDkuNjI1IDIuOTE2NjdDOC42MDY1IDIuOTE2NjcgNy42ODEzMyAzLjE5NDkyIDcgMy42NDc1OEM2LjMxODY3IDMuMTk0OTIgNS4zOTM1IDIuOTE2NjcgNC4zNzUgMi45MTY2N0MzLjM1NjUgMi45MTY2NyAyLjQzMTMzIDMuMTk0OTIgMS43NSAzLjY0NzU4VjExLjIzMDlDMi40MzEzMyAxMC43NzgyIDMuMzU2NSAxMC41IDQuMzc1IDEwLjVDNS4zOTM1IDEwLjUgNi4zMTg2NyAxMC43NzgyIDcgMTEuMjMwOVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-delete-after-scan  { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5IDdMMTguMTMzIDE5LjE0MkMxOC4wOTcxIDE5LjY0NjYgMTcuODcxMyAyMC4xMTg4IDE3LjUwMTEgMjAuNDYzNkMxNy4xMzA5IDIwLjgwODMgMTYuNjQzOSAyMSAxNi4xMzggMjFINy44NjJDNy4zNTYxNCAyMSA2Ljg2OTA3IDIwLjgwODMgNi40OTg4OSAyMC40NjM2QzYuMTI4NyAyMC4xMTg4IDUuOTAyOTIgMTkuNjQ2NiA1Ljg2NyAxOS4xNDJMNSA3TTEwIDExVjE3TTE0IDExVjE3TTE1IDdWNEMxNSAzLjczNDc4IDE0Ljg5NDYgMy40ODA0MyAxNC43MDcxIDMuMjkyODlDMTQuNTE5NiAzLjEwNTM2IDE0LjI2NTIgMyAxNCAzSDEwQzkuNzM0NzggMyA5LjQ4MDQzIDMuMTA1MzYgOS4yOTI4OSAzLjI5Mjg5QzkuMTA1MzYgMy40ODA0MyA5IDMuNzM0NzggOSA0VjdNNCA3SDIwIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5IDdMMTguMTMzIDE5LjE0MkMxOC4wOTcxIDE5LjY0NjYgMTcuODcxMyAyMC4xMTg4IDE3LjUwMTEgMjAuNDYzNkMxNy4xMzA5IDIwLjgwODMgMTYuNjQzOSAyMSAxNi4xMzggMjFINy44NjJDNy4zNTYxNCAyMSA2Ljg2OTA3IDIwLjgwODMgNi40OTg4OSAyMC40NjM2QzYuMTI4NyAyMC4xMTg4IDUuOTAyOTIgMTkuNjQ2NiA1Ljg2NyAxOS4xNDJMNSA3TTEwIDExVjE3TTE0IDExVjE3TTE1IDdWNEMxNSAzLjczNDc4IDE0Ljg5NDYgMy40ODA0MyAxNC43MDcxIDMuMjkyODlDMTQuNTE5NiAzLjEwNTM2IDE0LjI2NTIgMyAxNCAzSDEwQzkuNzM0NzggMyA5LjQ4MDQzIDMuMTA1MzYgOS4yOTI4OSAzLjI5Mjg5QzkuMTA1MzYgMy40ODA0MyA5IDMuNzM0NzggOSA0VjdNNCA3SDIwIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-store-encrypted    { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEyIDE1VjE3TTYgMjFIMThDMTguNTMwNCAyMSAxOS4wMzkxIDIwLjc4OTMgMTkuNDE0MiAyMC40MTQyQzE5Ljc4OTMgMjAuMDM5MSAyMCAxOS41MzA0IDIwIDE5VjEzQzIwIDEyLjQ2OTYgMTkuNzg5MyAxMS45NjA5IDE5LjQxNDIgMTEuNTg1OEMxOS4wMzkxIDExLjIxMDcgMTguNTMwNCAxMSAxOCAxMUg2QzUuNDY5NTcgMTEgNC45NjA4NiAxMS4yMTA3IDQuNTg1NzkgMTEuNTg1OEM0LjIxMDcxIDExLjk2MDkgNCAxMi40Njk2IDQgMTNWMTlDNCAxOS41MzA0IDQuMjEwNzEgMjAuMDM5MSA0LjU4NTc5IDIwLjQxNDJDNC45NjA4NiAyMC43ODkzIDUuNDY5NTcgMjEgNiAyMVpNMTYgMTFWN0MxNiA1LjkzOTEzIDE1LjU3ODYgNC45MjE3MiAxNC44Mjg0IDQuMTcxNTdDMTQuMDc4MyAzLjQyMTQzIDEzLjA2MDkgMyAxMiAzQzEwLjkzOTEgMyA5LjkyMTcyIDMuNDIxNDMgOS4xNzE1NyA0LjE3MTU3QzguNDIxNDMgNC45MjE3MiA4IDUuOTM5MTMgOCA3VjExSDE2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg==");    mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEyIDE1VjE3TTYgMjFIMThDMTguNTMwNCAyMSAxOS4wMzkxIDIwLjc4OTMgMTkuNDE0MiAyMC40MTQyQzE5Ljc4OTMgMjAuMDM5MSAyMCAxOS41MzA0IDIwIDE5VjEzQzIwIDEyLjQ2OTYgMTkuNzg5MyAxMS45NjA5IDE5LjQxNDIgMTEuNTg1OEMxOS4wMzkxIDExLjIxMDcgMTguNTMwNCAxMSAxOCAxMUg2QzUuNDY5NTcgMTEgNC45NjA4NiAxMS4yMTA3IDQuNTg1NzkgMTEuNTg1OEM0LjIxMDcxIDExLjk2MDkgNCAxMi40Njk2IDQgMTNWMTlDNCAxOS41MzA0IDQuMjEwNzEgMjAuMDM5MSA0LjU4NTc5IDIwLjQxNDJDNC45NjA4NiAyMC43ODkzIDUuNDY5NTcgMjEgNiAyMVpNMTYgMTFWN0MxNiA1LjkzOTEzIDE1LjU3ODYgNC45MjE3MiAxNC44Mjg0IDQuMTcxNTdDMTQuMDc4MyAzLjQyMTQzIDEzLjA2MDkgMyAxMiAzQzEwLjkzOTEgMyA5LjkyMTcyIDMuNDIxNDMgOS4xNzE1NyA0LjE3MTU3QzguNDIxNDMgNC45MjE3MiA4IDUuOTM5MTMgOCA3VjExSDE2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg=="); }
.icon-deep-research      { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIxIDIxTDE1IDE1TTE3IDEwQzE3IDEwLjkxOTMgMTYuODE4OSAxMS44Mjk1IDE2LjQ2NzIgMTIuNjc4OEMxNi4xMTU0IDEzLjUyODEgMTUuNTk5OCAxNC4yOTk3IDE0Ljk0OTcgMTQuOTQ5N0MxNC4yOTk3IDE1LjU5OTggMTMuNTI4MSAxNi4xMTU0IDEyLjY3ODggMTYuNDY3MkMxMS44Mjk1IDE2LjgxODkgMTAuOTE5MyAxNyAxMCAxN0M5LjA4MDc1IDE3IDguMTcwNSAxNi44MTg5IDcuMzIxMjIgMTYuNDY3MkM2LjQ3MTk0IDE2LjExNTQgNS43MDAyNiAxNS41OTk4IDUuMDUwMjUgMTQuOTQ5N0M0LjQwMDI0IDE0LjI5OTcgMy44ODQ2MyAxMy41MjgxIDMuNTMyODQgMTIuNjc4OEMzLjE4MTA2IDExLjgyOTUgMyAxMC45MTkzIDMgMTBDMyA4LjE0MzQ4IDMuNzM3NSA2LjM2MzAxIDUuMDUwMjUgNS4wNTAyNUM2LjM2MzAxIDMuNzM3NSA4LjE0MzQ4IDMgMTAgM0MxMS44NTY1IDMgMTMuNjM3IDMuNzM3NSAxNC45NDk3IDUuMDUwMjVDMTYuMjYyNSA2LjM2MzAxIDE3IDguMTQzNDggMTcgMTBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");      mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIxIDIxTDE1IDE1TTE3IDEwQzE3IDEwLjkxOTMgMTYuODE4OSAxMS44Mjk1IDE2LjQ2NzIgMTIuNjc4OEMxNi4xMTU0IDEzLjUyODEgMTUuNTk5OCAxNC4yOTk3IDE0Ljk0OTcgMTQuOTQ5N0MxNC4yOTk3IDE1LjU5OTggMTMuNTI4MSAxNi4xMTU0IDEyLjY3ODggMTYuNDY3MkMxMS44Mjk1IDE2LjgxODkgMTAuOTE5MyAxNyAxMCAxN0M5LjA4MDc1IDE3IDguMTcwNSAxNi44MTg5IDcuMzIxMjIgMTYuNDY3MkM2LjQ3MTk0IDE2LjExNTQgNS43MDAyNiAxNS41OTk4IDUuMDUwMjUgMTQuOTQ5N0M0LjQwMDI0IDE0LjI5OTcgMy44ODQ2MyAxMy41MjgxIDMuNTMyODQgMTIuNjc4OEMzLjE4MTA2IDExLjgyOTUgMyAxMC45MTkzIDMgMTBDMyA4LjE0MzQ4IDMuNzM3NSA2LjM2MzAxIDUuMDUwMjUgNS4wNTAyNUM2LjM2MzAxIDMuNzM3NSA4LjE0MzQ4IDMgMTAgM0MxMS44NTY1IDMgMTMuNjM3IDMuNzM3NSAxNC45NDk3IDUuMDUwMjVDMTYuMjYyNSA2LjM2MzAxIDE3IDguMTQzNDggMTcgMTBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-alleles-verified   { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTkgMTJMMTEgMTRMMTUgMTBNMjEgMTJDMjEgMTMuMTgxOSAyMC43NjcyIDE0LjM1MjIgMjAuMzE0OSAxNS40NDQyQzE5Ljg2MjYgMTYuNTM2MSAxOS4xOTk3IDE3LjUyODIgMTguMzY0IDE4LjM2NEMxNy41MjgyIDE5LjE5OTcgMTYuNTM2MSAxOS44NjI2IDE1LjQ0NDIgMjAuMzE0OUMxNC4zNTIyIDIwLjc2NzIgMTMuMTgxOSAyMSAxMiAyMUMxMC44MTgxIDIxIDkuNjQ3NzggMjAuNzY3MiA4LjU1NTg1IDIwLjMxNDlDNy40NjM5MiAxOS44NjI2IDYuNDcxNzcgMTkuMTk5NyA1LjYzNjA0IDE4LjM2NEM0LjgwMDMxIDE3LjUyODIgNC4xMzczOCAxNi41MzYxIDMuNjg1MDggMTUuNDQ0MkMzLjIzMjc5IDE0LjM1MjIgMyAxMy4xODE5IDMgMTJDMyA5LjYxMzA1IDMuOTQ4MjEgNy4zMjM4NyA1LjYzNjA0IDUuNjM2MDRDNy4zMjM4NyAzLjk0ODIxIDkuNjEzMDUgMyAxMiAzQzE0LjM4NjkgMyAxNi42NzYxIDMuOTQ4MjEgMTguMzY0IDUuNjM2MDRDMjAuMDUxOCA3LjMyMzg3IDIxIDkuNjEzMDUgMjEgMTJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");   mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTkgMTJMMTEgMTRMMTUgMTBNMjEgMTJDMjEgMTMuMTgxOSAyMC43NjcyIDE0LjM1MjIgMjAuMzE0OSAxNS40NDQyQzE5Ljg2MjYgMTYuNTM2MSAxOS4xOTk3IDE3LjUyODIgMTguMzY0IDE4LjM2NEMxNy41MjgyIDE5LjE5OTcgMTYuNTM2MSAxOS44NjI2IDE1LjQ0NDIgMjAuMzE0OUMxNC4zNTIyIDIwLjc2NzIgMTMuMTgxOSAyMSAxMiAyMUMxMC44MTgxIDIxIDkuNjQ3NzggMjAuNzY3MiA4LjU1NTg1IDIwLjMxNDlDNy40NjM5MiAxOS44NjI2IDYuNDcxNzcgMTkuMTk5NyA1LjYzNjA0IDE4LjM2NEM0LjgwMDMxIDE3LjUyODIgNC4xMzczOCAxNi41MzYxIDMuNjg1MDggMTUuNDQ0MkMzLjIzMjc5IDE0LjM1MjIgMyAxMy4xODE5IDMgMTJDMyA5LjYxMzA1IDMuOTQ4MjEgNy4zMjM4NyA1LjYzNjA0IDUuNjM2MDRDNy4zMjM4NyAzLjk0ODIxIDkuNjEzMDUgMyAxMiAzQzE0LjM4NjkgMyAxNi42NzYxIDMuOTQ4MjEgMTguMzY0IDUuNjM2MDRDMjAuMDUxOCA3LjMyMzg3IDIxIDkuNjEzMDUgMjEgMTJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-structured         { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTggOUwxMSAxMkw4IDE1TTEzIDE1SDE2TTUgMjBIMTlDMTkuNTMwNCAyMCAyMC4wMzkxIDE5Ljc4OTMgMjAuNDE0MiAxOS40MTQyQzIwLjc4OTMgMTkuMDM5MSAyMSAxOC41MzA0IDIxIDE4VjZDMjEgNS40Njk1NyAyMC43ODkzIDQuOTYwODYgMjAuNDE0MiA0LjU4NTc5QzIwLjAzOTEgNC4yMTA3MSAxOS41MzA0IDQgMTkgNEg1QzQuNDY5NTcgNCAzLjk2MDg2IDQuMjEwNzEgMy41ODU3OSA0LjU4NTc5QzMuMjEwNzEgNC45NjA4NiAzIDUuNDY5NTcgMyA2VjE4QzMgMTguNTMwNCAzLjIxMDcxIDE5LjAzOTEgMy41ODU3OSAxOS40MTQyQzMuOTYwODYgMTkuNzg5MyA0LjQ2OTU3IDIwIDUgMjBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");         mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTggOUwxMSAxMkw4IDE1TTEzIDE1SDE2TTUgMjBIMTlDMTkuNTMwNCAyMCAyMC4wMzkxIDE5Ljc4OTMgMjAuNDE0MiAxOS40MTQyQzIwLjc4OTMgMTkuMDM5MSAyMSAxOC41MzA0IDIxIDE4VjZDMjEgNS40Njk1NyAyMC43ODkzIDQuOTYwODYgMjAuNDE0MiA0LjU4NTc5QzIwLjAzOTEgNC4yMTA3MSAxOS41MzA0IDQgMTkgNEg1QzQuNDY5NTcgNCAzLjk2MDg2IDQuMjEwNzEgMy41ODU3OSA0LjU4NTc5QzMuMjEwNzEgNC45NjA4NiAzIDUuNDY5NTcgMyA2VjE4QzMgMTguNTMwNCAzLjIxMDcxIDE5LjAzOTEgMy41ODU3OSAxOS40MTQyQzMuOTYwODYgMTkuNzg5MyA0LjQ2OTU3IDIwIDUgMjBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }
.icon-expanding          { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQgNFY5SDQuNTgyTTQuNTgyIDlDNS4yNDU4NSA3LjM1ODEzIDYuNDM1NjggNS45ODI5MSA3Ljk2NTAzIDUuMDg5ODZDOS40OTQzOCA0LjE5NjgxIDExLjI3NjggMy44MzY0MSAxMy4wMzMgNC4wNjUxNEMxNC43ODkxIDQuMjkzODcgMTYuNDE5OCA1LjA5ODggMTcuNjY5NCA2LjM1Mzc4QzE4LjkxOSA3LjYwODc2IDE5LjcxNjggOS4yNDI4NiAxOS45MzggMTFNNC41ODIgOUg5TTIwIDIwVjE1SDE5LjQxOU0xOS40MTkgMTVDMTguNzU0MiAxNi42NDA5IDE3LjU2NCAxOC4wMTUgMTYuMDM0OCAxOC45MDczQzE0LjUwNTYgMTkuNzk5NSAxMi43MjM3IDIwLjE1OTUgMTAuOTY4MSAxOS45MzA5QzkuMjEyNDYgMTkuNzAyMiA3LjU4MjIgMTguODk3OSA2LjMzMjUzIDE3LjY0MzdDNS4wODI4NyAxNi4zODk2IDQuMjg0MzUgMTQuNzU2NCA0LjA2MiAxM00xOS40MTkgMTVIMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");          mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQgNFY5SDQuNTgyTTQuNTgyIDlDNS4yNDU4NSA3LjM1ODEzIDYuNDM1NjggNS45ODI5MSA3Ljk2NTAzIDUuMDg5ODZDOS40OTQzOCA0LjE5NjgxIDExLjI3NjggMy44MzY0MSAxMy4wMzMgNC4wNjUxNEMxNC43ODkxIDQuMjkzODcgMTYuNDE5OCA1LjA5ODggMTcuNjY5NCA2LjM1Mzc4QzE4LjkxOSA3LjYwODc2IDE5LjcxNjggOS4yNDI4NiAxOS45MzggMTFNNC41ODIgOUg5TTIwIDIwVjE1SDE5LjQxOU0xOS40MTkgMTVDMTguNzU0MiAxNi42NDA5IDE3LjU2NCAxOC4wMTUgMTYuMDM0OCAxOC45MDczQzE0LjUwNTYgMTkuNzk5NSAxMi43MjM3IDIwLjE1OTUgMTAuOTY4MSAxOS45MzA5QzkuMjEyNDYgMTkuNzAyMiA3LjU4MjIgMTguODk3OSA2LjMzMjUzIDE3LjY0MzdDNS4wODI4NyAxNi4zODk2IDQuMjg0MzUgMTQuNzU2NCA0LjA2MiAxM00xOS40MTkgMTVIMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo="); }
.icon-theme              { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEwIDIuNVYzLjMzMzMzTTEwIDE2LjY2NjdWMTcuNU0xNy41IDEwSDE2LjY2NjdNMy4zMzMzMyAxMEgyLjVNMTUuMzAzMyAxNS4zMDMzTDE0LjcxNDIgMTQuNzE0Mk01LjI4NTgzIDUuMjg1ODNMNC42OTY2NyA0LjY5NjY3TTE1LjMwMzMgNC42OTY2N0wxNC43MTQyIDUuMjg1ODNNNS4yODU4MyAxNC43MTQyTDQuNjk2NjcgMTUuMzAzM00xMy4zMzMzIDEwQzEzLjMzMzMgMTAuODg0MSAxMi45ODIxIDExLjczMTkgMTIuMzU3IDEyLjM1N0MxMS43MzE5IDEyLjk4MjEgMTAuODg0MSAxMy4zMzMzIDEwIDEzLjMzMzNDOS4xMTU5NSAxMy4zMzMzIDguMjY4MSAxMi45ODIxIDcuNjQyOTggMTIuMzU3QzcuMDE3ODYgMTEuNzMxOSA2LjY2NjY3IDEwLjg4NDEgNi42NjY2NyAxMEM2LjY2NjY3IDkuMTE1OTUgNy4wMTc4NiA4LjI2ODEgNy42NDI5OCA3LjY0Mjk4QzguMjY4MSA3LjAxNzg2IDkuMTE1OTUgNi42NjY2NyAxMCA2LjY2NjY3QzEwLjg4NDEgNi42NjY2NyAxMS43MzE5IDcuMDE3ODYgMTIuMzU3IDcuNjQyOThDMTIuOTgyMSA4LjI2ODEgMTMuMzMzMyA5LjExNTk1IDEzLjMzMzMgMTBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K");              mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iU1ZHIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEwIDIuNVYzLjMzMzMzTTEwIDE2LjY2NjdWMTcuNU0xNy41IDEwSDE2LjY2NjdNMy4zMzMzMyAxMEgyLjVNMTUuMzAzMyAxNS4zMDMzTDE0LjcxNDIgMTQuNzE0Mk01LjI4NTgzIDUuMjg1ODNMNC42OTY2NyA0LjY5NjY3TTE1LjMwMzMgNC42OTY2N0wxNC43MTQyIDUuMjg1ODNNNS4yODU4MyAxNC43MTQyTDQuNjk2NjcgMTUuMzAzM00xMy4zMzMzIDEwQzEzLjMzMzMgMTAuODg0MSAxMi45ODIxIDExLjczMTkgMTIuMzU3IDEyLjM1N0MxMS43MzE5IDEyLjk4MjEgMTAuODg0MSAxMy4zMzMzIDEwIDEzLjMzMzNDOS4xMTU5NSAxMy4zMzMzIDguMjY4MSAxMi45ODIxIDcuNjQyOTggMTIuMzU3QzcuMDE3ODYgMTEuNzMxOSA2LjY2NjY3IDEwLjg4NDEgNi42NjY2NyAxMEM2LjY2NjY3IDkuMTE1OTUgNy4wMTc4NiA4LjI2ODEgNy42NDI5OCA3LjY0Mjk4QzguMjY4MSA3LjAxNzg2IDkuMTE1OTUgNi42NjY2NyAxMCA2LjY2NjY3QzEwLjg4NDEgNi42NjY2NyAxMS43MzE5IDcuMDE3ODYgMTIuMzU3IDcuNjQyOThDMTIuOTgyMSA4LjI2ODEgMTMuMzMzMyA5LjExNTk1IDEzLjMzMzMgMTBaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K"); }

/* ---- Status pill icons (Iconify: tabler / material-symbols / glyphs / ic) ---- */
.icon-status-benign      { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyIDNjMi43NzkgMCA1LjM0OSAxLjU1NiA3LjI0MyA0LjA4MkMyMC45NzEgOS4zODggMjIgMTIuMzQxIDIyIDE1LjA5OGMwIDEuNDctLjI5MyAyLjcxOC0uOTAzIDMuNzQ1Yy0uNjAzIDEuMDE0LTEuNDc5IDEuNzU4LTIuNTgyIDIuMjU3Yy0xLjU5My43MTgtMy4zMzUuOS02LjUxNS45Yy0zLjE3NSAwLTQuOTItLjE4My02LjUxNC0uOWMtMS4wMTItLjQ1Ny0xLjgzMy0xLjEyLTIuNDI2LTIuMDFsLS4xNTctLjI0N0MyLjI5MyAxNy44MTUgMiAxNi41NjkgMiAxNS4wOThjMC0yLjc1NyAxLjAzLTUuNzEgMi43NTctOC4wMTZDNi42NSA0LjU1NiA5LjIyIDMgMTIgMyIvPjwvc3ZnPg==");      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyIDNjMi43NzkgMCA1LjM0OSAxLjU1NiA3LjI0MyA0LjA4MkMyMC45NzEgOS4zODggMjIgMTIuMzQxIDIyIDE1LjA5OGMwIDEuNDctLjI5MyAyLjcxOC0uOTAzIDMuNzQ1Yy0uNjAzIDEuMDE0LTEuNDc5IDEuNzU4LTIuNTgyIDIuMjU3Yy0xLjU5My43MTgtMy4zMzUuOS02LjUxNS45Yy0zLjE3NSAwLTQuOTItLjE4My02LjUxNC0uOWMtMS4wMTItLjQ1Ny0xLjgzMy0xLjEyLTIuNDI2LTIuMDFsLS4xNTctLjI0N0MyLjI5MyAxNy44MTUgMiAxNi41NjkgMiAxNS4wOThjMC0yLjc1NyAxLjAzLTUuNzEgMi43NTctOC4wMTZDNi42NSA0LjU1NiA5LjIyIDMgMTIgMyIvPjwvc3ZnPg=="); }
.icon-status-protective  { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyIDIycS0zLjQ3NS0uODc1LTUuNzM4LTMuOTg4VDQgMTEuMVY1bDgtM2w4IDN2Ni4xcTAgMy44LTIuMjYyIDYuOTEzVDEyIDIyIi8+PC9zdmc+");  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyIDIycS0zLjQ3NS0uODc1LTUuNzM4LTMuOTg4VDQgMTEuMVY1bDgtM2w4IDN2Ni4xcTAgMy44LTIuMjYyIDYuOTEzVDEyIDIyIi8+PC9zdmc+"); }
.icon-status-pathogenic  { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgODAgODAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjIuNzU4IDI4Ljk0YTEwLjUgMTAuNSAwIDAgMC01LjU2IDE3LjExbC42My43MjVhMTAuOCAxMC44IDAgMCAxIDIuNjAzIDguMDEzYTEwLjggMTAuOCAwIDAgMCA0LjU2NSA5Ljc4bC4zOTguMjc5YTEwLjc5IDEwLjc5IDAgMCAwIDEwLjM5NyAxLjA5NmExMC44IDEwLjggMCAwIDEgOC40MTggMGwxLjIwMy41MWExMC4yOTMgMTAuMjkzIDAgMCAwIDE0LjI3LTEwLjM2N2wtLjA2MS0uNjk4YTEyLjIyIDEyLjIyIDAgMCAxIDIuOTQ2LTkuMDY4bDUuMTM1LTUuOTE1YTYgNiAwIDAgMC0zLjE3OC05Ljc4bC00LjIwMi0uOTcyYTIwLjUzIDIwLjUzIDAgMCAxLTEyLjk1Ny05LjQxNGwtMS40OTYtMi40ODdhNi44NSA2Ljg1IDAgMCAwLTExLjczOCAwbC0zLjM5MyA1LjYzOWExMS44NSAxMS44NSAwIDAgMS03LjQ3NyA1LjQzMnptNy4yNDQgNy40NDNhNCA0IDAgMSAwIDAgOGE0IDQgMCAwIDAgMC04bTggMTZhNiA2IDAgMSAxIDEyIDBhNiA2IDAgMCAxLTEyIDBtNi0yMmEzIDMgMCAxIDAgMCA2YTMgMyAwIDAgMCAwLTYiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgODAgODAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjIuNzU4IDI4Ljk0YTEwLjUgMTAuNSAwIDAgMC01LjU2IDE3LjExbC42My43MjVhMTAuOCAxMC44IDAgMCAxIDIuNjAzIDguMDEzYTEwLjggMTAuOCAwIDAgMCA0LjU2NSA5Ljc4bC4zOTguMjc5YTEwLjc5IDEwLjc5IDAgMCAwIDEwLjM5NyAxLjA5NmExMC44IDEwLjggMCAwIDEgOC40MTggMGwxLjIwMy41MWExMC4yOTMgMTAuMjkzIDAgMCAwIDE0LjI3LTEwLjM2N2wtLjA2MS0uNjk4YTEyLjIyIDEyLjIyIDAgMCAxIDIuOTQ2LTkuMDY4bDUuMTM1LTUuOTE1YTYgNiAwIDAgMC0zLjE3OC05Ljc4bC00LjIwMi0uOTcyYTIwLjUzIDIwLjUzIDAgMCAxLTEyLjk1Ny05LjQxNGwtMS40OTYtMi40ODdhNi44NSA2Ljg1IDAgMCAwLTExLjczOCAwbC0zLjM5MyA1LjYzOWExMS44NSAxMS44NSAwIDAgMS03LjQ3NyA1LjQzMnptNy4yNDQgNy40NDNhNCA0IDAgMSAwIDAgOGE0IDQgMCAwIDAgMC04bTggMTZhNiA2IDAgMSAxIDEyIDBhNiA2IDAgMCAxLTEyIDBtNi0yMmEzIDMgMCAxIDAgMCA2YTMgMyAwIDAgMCAwLTYiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); }
.icon-status-risk-factor { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEgMjFoMjJMMTIgMnptMTItM2gtMnYtMmgyem0wLTRoLTJ2LTRoMnoiLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEgMjFoMjJMMTIgMnptMTItM2gtMnYtMmgyem0wLTRoLTJ2LTRoMnoiLz48L3N2Zz4="); }
.icon-genetics           { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUgMjN2LTFxMC0zLjQ3NSAxLjQ1LTUuNjM3dDQtNC4zNjNxLTIuNTUtMi4yLTQtNC4zNjJUNSAyVjFoMnYxcTAgLjI3NS4wMTMuNTEzVDcuMDUgM2g5LjlxLjAyNS0uMjUuMDM4LS40ODhUMTcgMlYxaDJ2MXEwIDMuNDc1LTEuNDUgNS42Mzh0LTQgNC4zNjJxMi41NSAyLjIgNCA0LjM2M1QxOSAyMnYxaC0ydi0xcTAtLjI3NS0uMDEyLS41MTNUMTYuOTUgMjFoLTkuOXEtLjAyNS4yNS0uMDM3LjQ4OFQ3IDIydjF6TTguNDUgN2g3LjFxLjMyNS0uNDc1LjU2My0uOTVUMTYuNTUgNWgtOS4xcS4yLjU1LjQzNyAxLjAzOFQ4LjQ1IDdNMTIgMTAuN3EuNS0uNDI1Ljk3NS0uODV0LjktLjg1aC0zLjc1cS40MjUuNDI1LjkuODV0Ljk3NS44NU0xMC4xMjUgMTVoMy43NXEtLjQyNS0uNDI1LS45LS44NVQxMiAxMy4zcS0uNS40MjUtLjk3NS44NXQtLjkuODVNNy40NSAxOWg5LjFxLS4yLS41NS0uNDM3LTEuMDM3VDE1LjU1IDE3aC03LjFxLS4zMjUuNDc1LS41NjIuOTVUNy40NSAxOSIvPjwvc3ZnPg==");           mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUgMjN2LTFxMC0zLjQ3NSAxLjQ1LTUuNjM3dDQtNC4zNjNxLTIuNTUtMi4yLTQtNC4zNjJUNSAyVjFoMnYxcTAgLjI3NS4wMTMuNTEzVDcuMDUgM2g5LjlxLjAyNS0uMjUuMDM4LS40ODhUMTcgMlYxaDJ2MXEwIDMuNDc1LTEuNDUgNS42Mzh0LTQgNC4zNjJxMi41NSAyLjIgNCA0LjM2M1QxOSAyMnYxaC0ydi0xcTAtLjI3NS0uMDEyLS41MTNUMTYuOTUgMjFoLTkuOXEtLjAyNS4yNS0uMDM3LjQ4OFQ3IDIydjF6TTguNDUgN2g3LjFxLjMyNS0uNDc1LjU2My0uOTVUMTYuNTUgNWgtOS4xcS4yLjU1LjQzNyAxLjAzOFQ4LjQ1IDdNMTIgMTAuN3EuNS0uNDI1Ljk3NS0uODV0LjktLjg1aC0zLjc1cS40MjUuNDI1LjkuODV0Ljk3NS44NU0xMC4xMjUgMTVoMy43NXEtLjQyNS0uNDI1LS45LS44NVQxMiAxMy4zcS0uNS40MjUtLjk3NS44NXQtLjkuODVNNy40NSAxOWg5LjFxLS4yLS41NS0uNDM3LTEuMDM3VDE1LjU1IDE3aC03LjFxLS4zMjUuNDc1LS41NjIuOTVUNy40NSAxOSIvPjwvc3ZnPg=="); }

/* ---------- Icon tile (icon-on-surface container) ---------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-48);
  height: var(--spacing-48);
  background-color: var(--background-surface-2);
  color: var(--symbol-default);
  border-radius: var(--corner-radius-full);
}
.icon-tile--40           { width: 40px; height: 40px; }
.icon-tile--56           { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile--surface-1    { background-color: var(--background-surface-1); }
/* Smaller-radius variants for tiles. The 8/12/16 px values aren't on
   the radius scale (only 4/32/9999 are) — see NOTES.md #19. */
.icon-tile--rounded-sm   { border-radius: 8px; }
.icon-tile--rounded-md   { border-radius: 12px; }
.icon-tile--sm           { width: 24px; height: 24px; border-radius: var(--corner-radius-sm); }

/* ---------- Genome-service logo (and other 3rd-party brand marks) ---------- */
/* The 23andMe / Ancestry / MyHeritage / etc. logos arrive in their full
   brand colors. In Figma they render as muted monochrome on dark
   surfaces. We force them to a dim white silhouette so they sit on the
   dark hero/section background without competing with our own brand
   colors. */
.brand-mark {
  display: inline-block;
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.brand-mark--16 { height: 16px; }
.brand-mark--20 { height: 20px; }
.brand-mark--24 { height: 24px; }
.brand-mark--28 { height: 28px; }
.brand-mark--32 { height: 32px; }
.theme-light .brand-mark { filter: brightness(0); opacity: 0.6; }

/* ---------- Pills ----------
   Generic pill primitive. Use base `.pill` for surface-2 background
   + sm radius + label-xs caps; modifiers for full radius, gradient
   bg, larger text, status-color text. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-2) var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  background-color: var(--background-surface-2);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wide);
  color: var(--text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--full     { padding: var(--spacing-4) var(--spacing-12); border-radius: var(--corner-radius-full); }
.pill--label-sm { padding: var(--spacing-4) var(--spacing-12); font-size: var(--font-size-14); letter-spacing: var(--font-letter-spacing-wider); color: var(--text-primary); }
.pill--gradient { background-color: transparent; background-image: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600)); color: var(--text-primary); }
/* Larger pill for the card-edge "Example" anchor — 28px tall total
   (12px font + 8px padding × 2) so the half-overhang anchor can
   perfectly straddle the card border. */
.pill--lg       { padding: var(--spacing-8) var(--spacing-12); }

/* ---------- Card-edge anchors ----------
   For pills/buttons that overhang or sit on a card's edges. The
   parent must be `position: relative`. The half-overhang offsets
   (-11/-12/-16px) are calibrated to specific element heights and
   aren't tokenizable (NOTES.md #19). */
.card-anchor                       { position: absolute; z-index: 1; white-space: nowrap; }
.card-anchor--top-left-edge        { top: -14px; left: calc(var(--spacing-32) * 2 + 40px - var(--spacing-12)); } /* "Example" pill (28px tall .pill--lg, half-overhang centered on border; left positioned so the pill's TEXT — not its background — aligns with the rec card content title. Title starts at inner-padding + rail-width + gap = 104px; subtract the pill's horizontal padding (--spacing-12) so its inner text begins at 104px. */
.card-anchor--top-center-edge      { top: -11px; left: 50%; transform: translateX(-50%); }  /* "Full Access" pill on the Lifetime card (22px tall) */
.card-anchor--top-right-inset      { top: var(--spacing-32); right: var(--spacing-32); }    /* "Early bird pricing" inside the Lifetime card */
.card-anchor--bottom-center-edge   { bottom: -16px; left: 50%; transform: translateX(-50%); } /* "Show Another" button under the rec card (32px tall) */

/* ---------- Surface-card variants ---------- */
.surface-card--unpadded { padding: 0; overflow: hidden; }
.surface-card--padded-48 { padding: var(--spacing-48); }
/* Surface-2 fill — for outer containers that hold filled cards inside, so
   the inner cards (surface-1) read as recessed against a lighter outer.
   Same component, alternate token. */
.surface-card--surface-2 { background-color: var(--background-surface-2); }

/* ---------- Dropdown (overlay menu, no JS) ----------
   Wrap a <details> in `.dropdown` and place its menu (sibling of <summary>)
   inside `.dropdown-menu`. The menu absolutely positions itself under the
   trigger when open, so surrounding content never shifts. */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--spacing-4));
  left: 0;
  z-index: 50;
  min-width: 100%;
  white-space: nowrap;
  background-color: var(--background-surface-2);
  border-radius: var(--corner-radius-lg);
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
/* Each option row inside a dropdown-menu is a <label>. Auto-style for compact
   tap targets with hover affordance — no per-row class needed in markup. */
.dropdown-menu label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
}
.dropdown-menu label:hover {
  background-color: var(--background-hover);
}

/* ---------- Brand-gradient background (for the Lifetime "Full access" pill) ---------- */
.bg-gradient-brand {
  background-image: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600));
}

/* ---------- Brand-gradient border ---------- */
/* Two-layer background: surface-1 fills the padding-box, brand gradient
 * fills the border-box. The transparent border lets the gradient show
 * through as a 2px ring around the card. Used by the Lifetime pricing
 * card. The element keeps its own `background-color` semantics for any
 * inner content. */
.bordered-gradient-brand {
  border: var(--stroke-weight-2) solid transparent;
  background-image:
    linear-gradient(var(--background-surface-1), var(--background-surface-1)),
    linear-gradient(to right, var(--color-pink-600), var(--color-orange-600));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* ---------- Accordion (<details>/<summary>) helpers ----------
   Two state classes for content inside a collapsible:
   `.show-when-collapsed` is visible only while the details is closed,
   `.show-when-open`     is visible only while it's open.
   Plus `.summary-no-marker` strips the default disclosure triangle so the
   summary can carry its own chevron / "show"/"hide" indicator. */
details[open]  .show-when-collapsed { display: none; }
details:not([open]) .show-when-open { display: none; }
.summary-no-marker { list-style: none; cursor: pointer; }
.summary-no-marker::-webkit-details-marker { display: none; }

/* === components/button.css === */
/*
 * Button — component set 23:1936.
 *
 * 3 sizes (lg/md/sm) × 3 styles (filled/outline/grey) × hover.
 *
 * Markup:
 *   <button class="button button--lg button--filled">
 *     <span class="button__label">Get started for free</span>
 *   </button>
 * Optional icons are siblings of `.button__label`:
 *   <span class="button__icon">…svg…</span>
 *
 * The label is wrapped in a span so the Outline variant can apply a
 * background-clip:text gradient to the text without affecting the
 * button background.
 *
 * No transitions — Figma's variant matrix only defines two states
 * (Default, Hover). Smooth transitions, if wanted, must be specified
 * by Mikael. See NOTES.md, open question 8.
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--corner-radius-sm);
  cursor: pointer;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--font-letter-spacing-tight);
  text-decoration: none;
  white-space: nowrap;
  background: none;
}

.button:disabled,
.button[aria-disabled="true"] {
  /* Disabled state is NOT defined in Figma. Not invented. */
}

.button__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button__icon > svg { width: 100%; height: 100%; display: block; }

.button__label {
  display: inline-block;
  line-height: 1;
}

/* ---------- Sizes ---------- */
.button--lg {
  height: 64px;
  padding: 0 var(--spacing-48);
  gap: var(--spacing-16);
  font-size: var(--font-size-20);
}
.button--lg .button__icon { width: 24px; height: 24px; }

.button--md {
  height: 48px;
  padding: 0 var(--spacing-32);
  gap: var(--spacing-12);
  font-size: var(--font-size-16);
}
.button--md .button__icon { width: 20px; height: 20px; }

.button--sm {
  height: 32px;
  padding: 0 var(--spacing-16);
  gap: var(--spacing-8);
  font-size: var(--font-size-14);
}
.button--sm .button__icon { width: 16px; height: 16px; }

/* ---------- Filled ---------- */
/* Set color on the button itself so .button__icon (which uses
   currentColor via mask-image) matches the label text color. */
.button--filled {
  background-image: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600));
  color: var(--text-light);
}
.button--filled .button__label { color: inherit; }

.button--filled:hover {
  background-image: linear-gradient(to right, var(--color-orange-600), var(--color-pink-500));
}
.button--filled.button--lg:hover { filter: drop-shadow(0 0 18px var(--color-pink-800)); }
.button--filled.button--md:hover { filter: drop-shadow(0 0 14px var(--color-pink-800)); }
.button--filled.button--sm:hover { filter: drop-shadow(0 0 10px var(--color-pink-800)); }

/* ---------- Outline ---------- */
.button--outline {
  background-color: var(--background-button-base);
  border: var(--stroke-weight-1) solid var(--color-pink-600);
}
.button--outline .button__label {
  background-image: linear-gradient(to right, var(--color-pink-600), var(--color-orange-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.button--outline:hover { border-color: var(--color-orange-600); }
.button--outline:hover .button__label {
  background-image: linear-gradient(to right, var(--color-orange-600), var(--color-pink-500));
}
/* Only the Large + Outline + Hover variant has the wide glow. */
.button--outline.button--lg:hover {
  box-shadow: 0 0 36px 0 var(--color-pink-800);
}

/* ---------- Grey ---------- */
.button--grey {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}
.button--grey .button__label { color: inherit; }
.button--grey:hover { background-color: var(--background-hover); }

/* Outline buttons: icon color cannot use background-clip:text trick;
   set it to the rest-state pink so it matches the gradient text closely. */
.button--outline { color: var(--color-pink-600); }
.button--outline:hover { color: var(--color-orange-600); }

/* === components/gene-chip.css === */
/*
 * Gene Chip — component set 70:2462.
 *
 * Markup:
 *   <span class="gene-chip">
 *     <span class="gene-chip__rsid">rs2802292</span>
 *     <span class="gene-chip__groups">
 *       <span class="gene-chip__group">
 *         <span class="gene-chip__icon">…svg…</span>
 *         <span class="gene-chip__text">FOXO3</span>
 *       </span>
 *       <span class="gene-chip__group">
 *         <span class="gene-chip__icon">…svg…</span>
 *         <span class="gene-chip__text">GT</span>
 *       </span>
 *     </span>
 *   </span>
 *
 * The 8px corner radius is a literal value in Figma — it's NOT in the
 * `Corner Radius/*` token scale (which only defines 4 / 32 / 9999).
 * See NOTES.md, open question 9.
 */

.gene-chip {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacing-4);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 8px; /* literal — not tokenized in Figma */
  border: var(--stroke-weight-1) solid var(--border-subtle);
  background: transparent;
}

.gene-chip:hover,
.gene-chip--hover {
  border-color: transparent;
  background-color: var(--background-hover);
}

.gene-chip__rsid {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--text-primary);
}

.gene-chip__groups {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.gene-chip__group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.gene-chip__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gene-chip__icon > svg { width: 100%; height: 100%; display: block; }

.gene-chip__text {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--text-secondary);
  text-align: right;
}

/* === components/action-button.css === */
/*
 * Action Button — component set 70:2777.
 *
 * 40×40 circular icon button with an attached tooltip that appears on
 * hover. Markup:
 *   <button class="action-button" type="button">
 *     <span class="action-button__icon">…svg…</span>
 *     <span class="action-button__tooltip">ASK AGENT</span>
 *   </button>
 */

.action-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  color: var(--symbol-default);
  cursor: pointer;
}

.action-button:hover {
  background-color: var(--background-hover);
  color: var(--symbol-hover);
}

.action-button__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-button__icon > svg { width: 100%; height: 100%; display: block; }

.action-button__tooltip {
  position: absolute;
  /* Figma: top:10, left:40 default, left:48 hover. 10 isn't in the scale
     (closest --spacing-12); 40 isn't either (closest --spacing-48, which
     happens to also match the hover position so the tooltip no longer
     animates 8px right on hover — see NOTES.md). */
  top: var(--spacing-12);
  left: var(--spacing-48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  background-color: var(--background-surface-2);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wide);
  color: var(--text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.action-button:hover .action-button__tooltip {
  opacity: 1;
  left: var(--spacing-48);
  color: var(--text-primary);
}

/* === components/recommendation-card.css === */
/*
 * Recommendation Card — node 70:2696.
 *
 * Outer width is rendered fluid (100%). The Figma instance is 1134px
 * wide, but that's the demo data, not the card's intrinsic geometry —
 * see NOTES.md, open question 10.
 *
 * Status pill colors for PROTECTIVE (#7c86ff) and PATHOGENIC (#90aa7c)
 * are LITERAL hex values from the Figma node — they don't match any
 * token in the gene-attribute palette (`color/violet/76 = #a684ff`,
 * `color/spring-green/42 = #00d492`, etc.). See NOTES.md, open
 * question 1.
 */

.recommendation-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-lg);
  overflow: clip;
}

.recommendation-card__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-32);
  padding: var(--spacing-32);
  flex: 1 0 0;
  min-width: 0;
}

.recommendation-card__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-16);
  flex-shrink: 0;
}

.recommendation-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
  flex: 1 0 0;
  min-width: 0;
}

.recommendation-card__meta-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  flex-wrap: wrap;
}

.recommendation-card__category {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wider);
  color: var(--color-grey-50);
  text-transform: uppercase;
  flex: 1 0 0;
  min-width: 0;
}

.recommendation-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
}

.recommendation-card__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-20);
  line-height: 1.149999976158142;
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
  margin: 0;
}

.recommendation-card__body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--text-secondary);
  width: 100%;
}
.recommendation-card__body p { margin: 0; }
.recommendation-card__body p + p { margin-top: var(--spacing-8); }

.recommendation-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Figma: 6px. Not in the spacing scale (closest --spacing-8). */
  padding-top: var(--spacing-8);
  width: 100%;
}

.recommendation-card__footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
}

.recommendation-card__effect-caption {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
  text-align: right;
}
.recommendation-card__effect-caption > .from   { color: var(--text-tertiary); display: block; }
.recommendation-card__effect-caption > .target { color: var(--text-secondary); display: block; }

/* ---------- Status pill ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-2) var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wider);
  text-transform: uppercase;
}
.status-pill__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-pill__icon > svg { width: 100%; height: 100%; display: block; }

.status-pill--benign      { color: var(--text-secondary); }
.status-pill--protective  { color: #7c86ff; } /* literal — see NOTES.md #1 */
.status-pill--pathogenic  { color: #90aa7c; } /* literal — see NOTES.md #1 */
.status-pill--risk-factor { color: var(--text-risk-factor); }

/* `.evidence-pill` was a duplicate of the generic `.pill` (see
   utilities.css). Use `.pill` directly instead. */

/* === components/form-field.css === */
/*
 * Form Field — NOT in Figma.
 *
 * Mikael's spec doesn't include text inputs, textareas, selects, or any
 * form-specific styling. Auth, account-settings, and upload pages all
 * need them, so we ship a sensible default built from existing tokens
 * and flag it as an open question (see NOTES.md, open question 10).
 *
 * Markup:
 *   <label class="form-field">
 *     <span class="form-field__label">Email address</span>
 *     <input class="form-field__input" type="email" name="email" required>
 *     <span class="form-field__hint">We'll send you a magic link.</span>
 *   </label>
 *
 * The whole field is one <label> so the click-target spans label + input.
 */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.form-field__label {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-12);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-field__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--spacing-16);
  background: var(--background-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16);
  line-height: 1;
  outline: none;
}

.form-field__input::placeholder {
  color: var(--text-tertiary);
}

.form-field__input:focus {
  /* No focus ring spec in Figma. Default: pink-600 brand accent. */
  border-color: var(--color-pink-600);
  box-shadow: 0 0 0 3px rgba(255, 15, 111, 0.15);
}

.form-field__hint {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
}

/* Submit button stretched to full width — common form layout. */
.button--block { width: 100%; }