/* ============================================================
   VANCENCO V2 — DESIGN SYSTEM
   The single source of truth for all visual tokens.
   Inspired by Exo Ape's viewport-scaled, contrast-driven architecture.
   ============================================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* === COLOUR ZONES === */

  /* Zone: Dark (Hero, Thesis, Lab, CTA) */
  --color-dark:          #0A0A0F;
  --color-bg-dark:       var(--color-dark);
  --color-dark-02:       rgba(10, 10, 15, 0.2);
  --color-dark-04:       rgba(10, 10, 15, 0.4);
  --color-dark-06:       rgba(10, 10, 15, 0.6);
  --color-dark-08:       rgba(10, 10, 15, 0.8);

  /* Zone: Light (Products, Metrics, Contact) */
  --color-light:         #F5F3F0;
  --color-off-white:     #EDEAE6;
  --color-light-02:      rgba(245, 243, 240, 0.2);
  --color-light-06:      rgba(248, 248, 248, 0.6);

  /* Zone: Story (Founder, Footer) */
  --color-story:         #070707;
  --color-sand:          #E0CCBB;
  --color-sand-06:       hsla(28, 37%, 81%, 0.6);
  --color-sand-08:       hsla(28, 37%, 81%, 0.8);

  /* Neutrals */
  --color-white:         #FFFFFF;
  --color-white-02:      hsla(0, 0%, 100%, 0.2);
  --color-white-04:      hsla(0, 0%, 100%, 0.4);
  --color-white-06:      hsla(0, 0%, 100%, 0.6);
  --color-white-08:      hsla(0, 0%, 100%, 0.8);

  /* Accents */
  --accent-cyan:         #00E5FF;
  --accent-pink:         #FF4D6D;
  --accent-warm:         #F59E0B;

  /* Semantic Colours (default = dark zone) */
  --bg-primary:          var(--color-dark);
  --bg-surface:          #141418;
  --bg-surface-hover:    #1C1C22;
  --bg-elevated:         #24242A;

  --text-primary:        var(--color-white);
  --text-secondary:      var(--color-white-06);
  --text-muted:          var(--color-white-04);
  --text-inverse:        var(--color-dark);

  --border-subtle:       rgba(255, 255, 255, 0.06);
  --border-medium:       rgba(255, 255, 255, 0.12);

  /* === TYPOGRAPHY === */

  /* Font Families */
  --font-display:        'Montserrat', sans-serif;
  --font-body:           'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;
  --font-subhead:        'Spectral', Georgia, serif;

  /* Viewport-Scaled Type (Mobile-first, overridden at 601px+) */
  --fs-h0:               11vw;       /* Massive hero display */
  --lh-h0:               11vw;
  --ls-h0:               0.15em;

  --fs-h1:               10vw;       /* Section headers */
  --lh-h1:               10vw;
  --ls-h1:               0.05em;

  --fs-h2:               7.73vw;     /* Sub-section headers */
  --lh-h2:               9.07vw;
  --ls-h2:               0.05em;

  --fs-h3:               6.4vw;      /* Card/panel titles */
  --lh-h3:               8vw;
  --ls-h3:               0.05em;

  --fs-h4:               4.8vw;      /* Body intro / large body */
  --lh-h4:               6.4vw;
  --ls-h4:               0;

  --fs-body:             3.73vw;     /* Body text */
  --lh-body:             5.6vw;
  --ls-body:             0.027vw;

  --fs-small:            3.73vw;     /* Small text */
  --lh-small:            5.6vw;

  --fs-subtitle:         3.2vw;      /* Eyebrow / subtitle */
  --lh-subtitle:         4.27vw;
  --ls-subtitle:         0.027vw;

  --fs-cta:              4.27vw;     /* CTA links */
  --lh-cta:              4.27vw;

  --fs-label:            3.73vw;     /* Labels / metadata */
  --lh-label:            3.73vw;

  /* Letter Spacing (non-viewport) */
  --ls-display:          -0.04em;
  --ls-heading:          -0.02em;
  --ls-nav:              0.15em;

  /* === SPACING === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-48:  12rem;
  --space-64:  16rem;

  /* Viewport-based padding (Exo Ape uses 8vw mobile, 8.33vw desktop) */
  --gutter:              8vw;
  --section-pad:         21.33vw;

  /* === LAYOUT === */
  --max-width:           100%;       /* No max-width cap — full viewport like Exo Ape */

  /* === TRANSITIONS === */
  --ease-out-expo:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy:         cubic-bezier(1, 0, 0, 1);
  --duration-fast:       200ms;
  --duration-normal:     400ms;
  --duration-slow:       800ms;
  --duration-glacial:    1200ms;

  /* === Z-INDEX === */
  --z-base:              1;
  --z-sticky:            100;
  --z-nav:               500;
  --z-drawer:            600;
  --z-overlay:           700;
  --z-chatbot:           800;
  --z-modal:             900;
  --z-cursor:            950;
  --z-preloader:         999;
}

/* --- Desktop Overrides (601px+, matching Exo Ape breakpoint) --- */
@media (min-width: 601px) {
  :root {
    --fs-h0:             9vw;
    --lh-h0:             9vw;
    --ls-h0:             0.2em;

    --fs-h1:             10vw;
    --lh-h1:             10vw;
    --ls-h1:             0.05em;

    --fs-h2:             clamp(2rem, 1.43rem + 2.85vw, 4rem);
    --lh-h2:             clamp(2.5rem, 1.79rem + 3.57vw, 5rem);
    --ls-h2:             0.05em;

    --fs-h3:             clamp(1.5rem, 1.21rem + 1.43vw, 2.5rem);
    --lh-h3:             clamp(2rem, 1.64rem + 1.79vw, 3.25rem);
    --ls-h3:             0.05em;

    --fs-h4:             clamp(1.125rem, 0.98rem + 0.71vw, 1.75rem);
    --lh-h4:             clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);
    --ls-h4:             0;

    --fs-body:           clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
    --lh-body:           clamp(1.5rem, 1.36rem + 0.71vw, 2rem);
    --ls-body:           0.005em;

    --fs-small:          clamp(0.875rem, 0.82rem + 0.27vw, 1.0625rem);
    --lh-small:          clamp(1.25rem, 1.14rem + 0.54vw, 1.625rem);

    --fs-subtitle:       clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
    --lh-subtitle:       clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
    --ls-subtitle:       0.05em;

    --fs-cta:            clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
    --lh-cta:            clamp(1.25rem, 1.14rem + 0.54vw, 1.625rem);

    --fs-label:          clamp(0.6875rem, 0.65rem + 0.18vw, 0.8125rem);
    --lh-label:          clamp(0.875rem, 0.82rem + 0.27vw, 1.0625rem);

    --gutter:            8.33vw;
    --section-pad:       10.42vw;
  }
}


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

* {
  -webkit-tap-highlight-color: transparent;
}

ol, ul {
  list-style: none;
  padding: 0;
}

blockquote, body, dd, dl, figcaption, figure,
h1, h2, h3, h4, input, li, ol, p, ul {
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  overflow-x: hidden;
  min-height: 100vh;
}

body::-webkit-scrollbar {
  height: 0;
  width: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: inherit;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

button, input, select, textarea {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
}

footer, section {
  position: relative;
}

/* Make sections overlap slightly (prevents 1px gap like Exo Ape) */
section {
  margin-top: -1px;
}

::selection {
  background-color: var(--accent-cyan);
  color: var(--color-dark);
}


/* --- Lenis Smooth Scroll --- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}


/* --- Typography Classes --- */

/* H0: Massive viewport-filling display text */
.t-h0 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h0);
  line-height: var(--lh-h0);
  letter-spacing: var(--ls-h0);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Display: Hero text (uppercase, spaced) */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* H2 */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* H3 */
.t-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* H4: Large body / intro paragraphs */
.t-h4 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--text-primary);
}

/* Body */
.t-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Label / Metadata */
.t-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-subtitle);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pre-header / Eyebrow */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-subtitle);
  text-transform: uppercase;
  color: var(--accent-cyan);
}

/* Section subhead */
.t-subhead {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* CTA link text */
.t-cta {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  letter-spacing: var(--ls-subtitle);
}

/* Small / caption text */
.t-small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}


/* --- Colour Zone Classes --- */

/* Default zone: Dark */
.zone-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.zone-dark .t-eyebrow { color: var(--accent-cyan); }
.zone-dark .t-label   { color: var(--color-white-04); }
.zone-dark a           { color: var(--color-white); }

/* Zone: Light */
.zone-light {
  background-color: var(--color-light);
  color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

.zone-light .t-h0,
.zone-light .t-display,
.zone-light .t-h1,
.zone-light .t-h2,
.zone-light .t-h3,
.zone-light .t-h4     { color: #000000; font-weight: 500; }
.zone-light .t-body    { color: #000000; font-weight: 400; }
.zone-light .t-subhead { color: #000000; font-weight: 400; }
.zone-light .t-eyebrow { color: #000000; font-weight: 500; }
.zone-light .t-label   { color: #000000; font-weight: 500; }
.zone-light a          { color: #000000; font-weight: 500; }

.zone-light .border-subtle { background: rgba(0, 0, 0, 0.12); }
.zone-light .divider       { background: rgba(0, 0, 0, 0.12); }

/* Light zone: Override semantic border/surface variables */
.zone-light {
  --border-subtle:     rgba(0, 0, 0, 0.12);
  --border-medium:     rgba(0, 0, 0, 0.24);
  --bg-surface:        #EDEAE6;
  --bg-surface-hover:  #E4E0DB;
  --text-primary:      #000000;
  --text-secondary:    #000000;
  --text-muted:        #000000;
}

/* Zone: Story (warm, human — founder/footer) */
.zone-story {
  background-color: var(--color-story);
  color: var(--color-sand);
}

.zone-story .t-h0,
.zone-story .t-display,
.zone-story .t-h2,
.zone-story .t-h3,
.zone-story .t-h4     { color: var(--color-sand); }
.zone-story .t-body    { color: var(--color-sand-08); }
.zone-story .t-subhead { color: var(--color-sand-08); }
.zone-story .t-eyebrow { color: var(--color-sand-06); }
.zone-story .t-label   { color: var(--color-sand-06); }
.zone-story a          { color: var(--color-sand); }

.zone-story .divider { background: var(--color-sand-06); }


/* --- Layout Utilities --- */
.container {
  margin: 0 var(--gutter);
  position: relative;
}

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.section--hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.section--full {
  min-height: 100vh;
  position: relative;
}

/* Grid utility (12-column on desktop) */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

@media (min-width: 601px) {
  .grid-12 {
    grid-column-gap: 2.22vw;
    grid-template-columns: repeat(12, 1fr);
  }
}

/* Grid utility (2-column on desktop) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 601px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
}

/* Grid utility (3-column on desktop) */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 801px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
  }
}

/* Flex utilities */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2   { gap: var(--space-2); }
.gap-4   { gap: var(--space-4); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }
.gap-12  { gap: var(--space-12); }

/* Padding utilities */
.has-padding-top         { padding-top: var(--section-pad); }
.has-padding-bottom      { padding-bottom: var(--section-pad); }
.has-padding-vertical    { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

/* Text utilities */
.text-center { text-align: center; }

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

/* Title mask (for GSAP line reveals) */
.title-mask {
  overflow: hidden;
}

.title-line {
  transform-origin: top left;
}

@media (min-width: 601px) {
  .title-line {
    will-change: transform;
  }
}

/* Text mask (for body text GSAP reveals) */
.text-mask {
  overflow: hidden;
}

.text-line {
  transform-origin: top left;
}

@media (min-width: 601px) {
  .text-line {
    will-change: transform;
  }
}

/* Scroll Snapping Utilities (Removed due to GSAP conflict) */


/* --- Background Image Hero Pattern --- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img,
.hero-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 15, 0.85) 0%,
    rgba(10, 10, 15, 0.6) 50%,
    rgba(10, 10, 15, 0.3) 100%
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
}


/* --- Dividers --- */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-subtle);
  border: none;
}

.divider--accent {
  background: linear-gradient(
    to right,
    var(--accent-cyan),
    transparent
  );
  height: 1px;
}


/* --- Link Underline Effect (Exo Ape style) --- */
.link-underline {
  position: relative;
}

.link-underline::after {
  background: currentColor;
  bottom: -2px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-snappy);
  width: 100%;
  will-change: transform;
}

@media (hover: hover) {
  .link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}


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


/* --- Responsive Breakpoints Reference --- */
/* Mobile-first: base styles are mobile.
   Tablet:   @media (min-width: 601px)   — matches Exo Ape
   Desktop:  @media (min-width: 1024px)
   Wide:     @media (min-width: 1440px)
*/

/* UX Tooltips */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  color: var(--accent-cyan);
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  cursor: help;
  position: relative;
  font-size: 0.65rem;
  font-weight: bold;
  vertical-align: middle;
}
.help-tip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--accent-cyan);
  padding: 0.75rem;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  width: max-content;
  max-width: 250px;
  z-index: 100;
  text-transform: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

/* Multilingual Modal */
.ml-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ml-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.ml-modal-content {
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: var(--space-8);
  width: 90%;
  max-width: 800px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: none; /* Firefox */
}
.ml-modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.ml-modal-overlay.active .ml-modal-content {
  transform: translateY(0);
}
.ml-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ml-modal-close:hover {
  color: var(--accent-cyan);
}
/* Voice Showcase Tabs */
.voice-tab {
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}
.voice-tab:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.voice-tab.active {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Voice Pill Grid */
.voice-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.voice-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.voice-pill:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.voice-pill.active {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-cyan);
  font-weight: 600;
}
.voice-pill__flag {
  font-size: 1.1rem;
  line-height: 1;
}