/* ==========================================================================
   Pagelove — Foundations / Style Guide
   Grid · Breakpoints · Color · Buttons · Borders · Typography

   Source: Figma "Website" file (node 3077:5840) + typography.css (attached)
   Built:  2026-08-10

   Notes / assumptions flagged inline with "ASSUMPTION:" — please confirm
   these against the live Figma file before shipping.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BREAKPOINTS (reference values — CSS can't consume custom properties
      inside @media conditions, so the literal px values below are also
      hard-coded into each @media rule. Keep both in sync if these change.)
   -------------------------------------------------------------------------- */

:root {
  --bp-mobile-min: 300px;   /* 300–699px  */
  --bp-tablet-min: 700px;   /* 700–900px  */
  --bp-desktop-min: 901px;  /* 901px+     */
}

/* --------------------------------------------------------------------------
   2. GRID

   Mobile  (300–699px):  4 columns  / 24px margin / 16px gutter
   Tablet  (700–900px):  8 columns  / 48px margin / 16px gutter
   Desktop (901px+):     12 columns / 64px margin / 24px gutter

   Within a band, column width is fluid (fills the space between the fixed
   margin/gutter). At the desktop breakpoint, column widths lock at exactly
   what they measure at 901px — the content zone is a fixed 901px block,
   centered with auto margins — so any extra viewport width beyond 901px
   grows only the outer margins, never the columns or gutters ("columns
   should not be adaptive").
   -------------------------------------------------------------------------- */

:root {
  /* Mobile default */
  --grid-columns: 4;
  --grid-margin: 24px;
  --grid-gutter: 16px;
}

@media (min-width: 700px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 48px;
    --grid-gutter: 16px;
  }
}

@media (min-width: 901px) {
  :root {
    --grid-columns: 12;
    --grid-margin: 64px;
    --grid-gutter: 24px;
    /* CORRECTED 2026-08-10: originally assumed the content zone locked at
       exactly 901px (the desktop breakpoint minimum). Measuring nav.bar
       (3077:6311 / 3324:8796) and hero.section (3077:5888) directly in
       Figma shows both align to a 1150px-wide content zone at the 1512px
       reference frame (181px side margin = (1512 − 1150) / 2), not 901px.
       So columns stay fluid from 901px up to 1150px + 2×margin = 1278px
       viewport width, then lock there — margin absorbs everything beyond. */
    --content-max-width: 1150px;
    /* A second, wider reference used by sections whose content spans the
       full outer bound with no extra inner padding of its own (e.g.
       intro.section's card row: 1278px measured at the 1512px reference
       frame = --content-max-width + 2×margin, i.e. .content-bound's own
       total box). See .content-bound--wide below. */
    --content-max-width-wide: calc(var(--content-max-width) + (2 * var(--grid-margin)));
    /* CORRECTED 2026-08-10: the 1150px content zone isn't 12 columns wide —
       it's the true 12-column/64px-margin/24px-gutter frame grid with its
       outermost column dropped on each side (confirmed by measuring
       quote.section's paragraph, which "Hug"-sizes to exactly 9 of these
       columns: 1032px = 9×col + 8×gutter). So the per-column width has to
       be derived from 10 columns filling 1150px, not 12 — the previous
       12-column formula gave a column ~20px too narrow, which .container
       (below) hadn't shipped anywhere yet, so nothing visible broke, but
       it would have as soon as a grid-column-span layout used it. */
    --grid-desktop-col: calc((var(--content-max-width) - (9 * var(--grid-gutter))) / 10);
  }
}

.container {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

@media (min-width: 901px) {
  .container {
    /* Full 12-column frame width, edge to edge: 12 columns + 11 gutters +
       margin on both sides — reduces to exactly the 1512px reference
       frame once --grid-desktop-col is the true (10-column-derived)
       column width. NOT content-max-width + 2×margin — that's the
       narrower 10-column content-bound zone (see --grid-desktop-col
       above), a different, smaller box than the full grid this class
       renders. */
    max-width: calc(
      (var(--grid-columns) * var(--grid-desktop-col)) +
      ((var(--grid-columns) - 1) * var(--grid-gutter)) +
      (2 * var(--grid-margin))
    );
    margin-inline: auto;
    padding-inline: var(--grid-margin);
    grid-template-columns: repeat(var(--grid-columns), var(--grid-desktop-col));
  }
}

/* Non-grid sections (nav, hero, …) that need the same horizontal bound as
   .container without CSS Grid display. Fluid at the grid margin (24/48/64)
   until the capped content width would be exceeded, then locks and the
   margin absorbs the rest — reproduces the measured 181px nav/hero margin
   at the 1512px reference frame exactly. */
.content-bound {
  --bound-width: var(--content-max-width);
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--grid-margin);
}

@media (min-width: 901px) {
  .content-bound {
    max-width: calc(var(--bound-width) + (2 * var(--grid-margin)));
    margin-inline: auto;
  }
}

/* Modifier for sections whose card/grid content spans a wider zone than
   nav/hero (1278px vs 1150px) — e.g. intro.section's 3-up card row, which
   measures 117px margin at the 1512px reference frame rather than nav/
   hero's 181px. Padding-inline is unchanged (still the fluid grid margin
   baseline); only the cap width widens, so the extra room goes to margin
   instead of padding once the cap engages. */
.content-bound--wide {
  --bound-width: var(--content-max-width-wide);
}

/* Modifier for sections whose content column is narrower than nav/hero's
   1150px — e.g. cta.banner's centered heading+description+button stack,
   which measures a fixed 680px column at the 1512px reference frame
   (416px side margin = (1512 − 680) / 2, well past where the 64px grid
   margin alone would land). Same fluid-then-capped mechanics as
   .content-bound--wide, just capping at a narrower width. */
.content-bound--narrow {
  --bound-width: 680px;
}

/* --------------------------------------------------------------------------
   3. COLOR
   -------------------------------------------------------------------------- */

:root {
  /* Text */
  --color-text-primary: #45556C;
  --color-text-secondary: #90A1B9;
  --color-text-warm: #65644A;
  /* Confirmed via Figma inspection (quote.section, "Live Demo Text" caption) */
  --color-text-muted: #6F7E94;
  /* Confirmed via Figma inspection (node 3172:3313 text fill) */
  --gradient-main: linear-gradient(95.1deg, #7B6BB5 0%, #646444 100%);

  /* Background */
  --color-background-white: #FFFFFF;
  /* background.mask: white surface at 70% opacity, meant to sit over
     content with a backdrop blur (see .bg-mask utility below) */
  --color-background-mask: rgba(255, 255, 255, 0.7);
  --blur-background-mask: 24px;

  /* Borders */
  --color-divider: #E2E8F0;
  /* border.neutral */
  --color-border-neutral: #E2E8F0;
  --gradient-divider: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0)   0%,
    rgba(226, 232, 240, 1)  15%,
    rgba(226, 232, 240, 1)  50%,
    rgba(226, 232, 240, 1)  85%,
    rgba(226, 232, 240, 0)  95%
  );

  /* Buttons — shared hover glow (fx layer). Used by BOTH Primary (node
     3023:3308) and Secondary (node 3172:3306) — confirmed identical
     gradient/blur/opacity on both (Secondary's angle reads 156.90deg vs
     Primary's 157.71deg, close enough to be the same token with export
     rounding) — one shared set of tokens rather than two near-duplicates. */
  --gradient-btn-hover-fx: linear-gradient(157.71deg, #6D66CB 2.31%, #9F6467 97.12%);
  --blur-btn-hover-fx: 11.5px;
  --opacity-btn-hover-fx: 0.6;

  /* Buttons — Primary */
  --color-btn-primary-bg: #1D293D;
  --color-btn-primary-bg-hover: #45556C; /* unused since the 2026-08-12 fix keeping bg constant on hover; left defined in case a future spec wants it back */
  --color-btn-primary-text: #FFFFFF;

  /* Buttons — Secondary */
  --color-btn-secondary-bg: #FFFFFF;
  --color-btn-secondary-bg-hover: #F8FAFC; /* unused — per explicit request, Secondary's background also stays constant on hover, same as Primary; left defined in case a future spec wants it back */
  /* CORRECTED 2026-08-10: originally assumed a 3-stop gradient border
     (unconfirmed). quote.section's Secondary "Watch demo" button was
     inspected at all three breakpoints (desktop 3136:308, tablet
     3324:8406, mobile 3284:1531) and consistently shows a flat solid
     1px #9FABDD border, not a gradient — corrected here. */
  --color-btn-secondary-border: #9FABDD;

  /* Buttons — Ghost text gradient (unrelated to the border above) */
  --gradient-btn-ghost-text: linear-gradient(90deg, #9FABDD 0%, #BBB3BB 35%, #C2AAA6 65%);
  --color-btn-ghost-text-hover: #1D293D;

  /* Nav link */
  --color-nav-link: #45556C;
  --color-nav-link-hover: #2D3A4E;
}

/* --------------------------------------------------------------------------
   4. BUTTONS

   Markup pattern expected by these classes:

     <button class="btn btn-primary">Get started</button>

     <button class="btn btn-secondary">
       <span class="btn-label">Watch demo</span>
       <span class="btn-icon"><img src="play.svg" alt=""></span>
     </button>

     <button class="btn btn-ghost has-icon">
       <span class="btn-label">Agents</span>
       <span class="btn-icon"><img src="icon.svg" alt=""></span>
     </button>

     <a class="nav-link" href="#">Pricing</a>

   (Text needs its own <span class="btn-label"> so gradient/background-clip
   text effects don't get applied to the icon as well.)
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color 0.2s ease, color 0.2s ease, background-image 0.2s ease;
}

.btn-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.btn-icon img,
.btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Primary --------------------------------------------------------- */

/* CORRECTED 2026-08-12 (node 3023:3308): a plain background-color on
   .btn-primary itself can never sit BELOW a child pseudo-element, even
   one at z-index:-1 — per the CSS stacking spec, an element's own
   background/border is always the bottom-most paint layer of its
   stacking context, painted before any of its children (negative
   z-index included). That's why the glow used to visibly overlap/tint
   the button's face on hover instead of sitting behind it. Fixed by
   moving the solid face itself onto ::after — two sibling pseudo-
   elements stack by DOM order when neither sets an explicit z-index
   that reorders them, so ::after (declared/generated after ::before)
   naturally paints on top of it, with .btn-label/.btn-icon above both
   via their own explicit z-index. .btn-primary itself now has no
   background of its own — just layout, padding, and text color. */
.btn-primary {
  color: var(--color-btn-primary-text);
}

/* Glow (fx layer). Sized with inset:0 — i.e. exactly the button's own
   width/height, never bigger — per explicit request; the blur filter
   still visually spreads it into a soft halo beyond that box (a
   rendering effect, not a layout size), which is what actually reads as
   "glow" without the box itself ever exceeding the button's bounds the
   way the old -20% inset did. */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--gradient-btn-hover-fx);
  filter: blur(var(--blur-btn-hover-fx));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Solid face — same box as the glow (inset:0) but painted after it, so
   it fully covers/hides the glow's center and only the blurred edges
   read as a halo around it. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-color: var(--color-btn-primary-bg);
  transition: background-color 0.2s ease;
}

.btn-primary .btn-label,
.btn-primary .btn-icon {
  position: relative;
  z-index: 2;
}

/* FIX 2026-08-12: per explicit request, the face's background color no
   longer changes on hover — only the glow (::before) appears. Stays
   var(--color-btn-primary-bg) at every state; --color-btn-primary-bg-hover
   is unused now but left defined in case a future spec wants it back. */

/* Per spec (node 3023:3304 "fx"): opacity 60%, not a full 0→1 fade. */
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  opacity: var(--opacity-btn-hover-fx);
}

/* --- Secondary --------------------------------------------------------- */

/* Same construction as Primary (see its comments above): background AND
   border move off the element itself and onto ::after, since a box's own
   background/border always paints below all of its children (including a
   negative/low z-index one) — putting the border on .btn-secondary
   directly would let the hover glow bleed over/tint it. ::after carries
   both together so the border rides along above the glow, unchanged in
   appearance from before.

   Explicit height:44px (node 3172:3282/3306 spec) rather than leaving it
   to padding+content math, so it holds exactly regardless of content —
   with align-items:center (from .btn) the label/icon stay vertically
   centered inside it. Padding (16px left / 10px right) and gap (16px)
   are the same for default AND hover per explicit request — nothing here
   is conditioned on :hover. */
.btn-secondary {
  height: 44px;
  padding: 10px 10px 10px 16px;
  gap: 16px;
}

.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--gradient-btn-hover-fx);
  filter: blur(var(--blur-btn-hover-fx));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.btn-secondary::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-color: var(--color-btn-secondary-bg);
  border: 1px solid var(--color-btn-secondary-border);
}

.btn-secondary .btn-label,
.btn-secondary .btn-icon {
  position: relative;
  z-index: 2;
}

.btn-secondary .btn-label {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-secondary .btn-icon {
  width: 24px;
  height: 24px;
}

/* Per explicit request: background and border stay identical on hover —
   only the glow (::before) appears, same rule as Primary. */
.btn-secondary:hover::before,
.btn-secondary:focus-visible::before {
  opacity: var(--opacity-btn-hover-fx);
}

/* --- Ghost --------------------------------------------------------- */

.btn-ghost {
  padding: 10px 8px;
  background: none;
  border: none;
}

.btn-ghost .btn-label {
  background: var(--gradient-btn-ghost-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: color 0.2s ease;
}

.btn-ghost .btn-icon {
  width: 20px;
  height: 20px;
  margin-left: -4px; /* offsets the .btn gap so icon sits 4px from label per spec */
  display: none;
}

.btn-ghost.has-icon .btn-icon {
  display: inline-flex;
}

.btn-ghost:hover .btn-label,
.btn-ghost:focus-visible .btn-label {
  background: none;
  -webkit-text-fill-color: var(--color-btn-ghost-text-hover);
  color: var(--color-btn-ghost-text-hover);
}

/* --- Nav link --------------------------------------------------------- */

.nav-link {
  display: inline-flex;
  color: var(--color-nav-link);
  background: none;
  border: none;
  text-decoration: none;
  font-family: var(--font-sans);
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-nav-link-hover);
}

/* --------------------------------------------------------------------------
   5. BORDERS / DIVIDERS / SURFACES
   -------------------------------------------------------------------------- */

.divider {
  height: 1px;
  width: 100%;
  border: none;
  background: var(--gradient-divider);
}

/* border.neutral — flat 1px neutral stroke, e.g. card/input outlines */
.border-neutral {
  border: 1px solid var(--color-border-neutral);
}

/* background.mask — translucent white surface with backdrop blur, e.g.
   overlays, sticky headers, or panels sitting above other content */
.bg-mask {
  background-color: var(--color-background-mask);
  backdrop-filter: blur(var(--blur-background-mask));
  -webkit-backdrop-filter: blur(var(--blur-background-mask));
}

/* --------------------------------------------------------------------------
   6. TYPOGRAPHY
   Adapted from the attached typography.css. One change: the tablet
   breakpoint moved from 376px to 700px to match the grid breakpoint
   system above (section 1/2) — everything else is unchanged.
   -------------------------------------------------------------------------- */

/* CORRECTED 2026-08-11: was "Source Serif Pro", which was never actually
   loaded anywhere (no @font-face / no font-service link in index.html), so
   every headline had silently been rendering in the Georgia fallback the
   whole time. Source Serif 4 is the real intended typeface (confirmed
   against page.love, which uses it too). Self-hosted as a local variable
   font (weights 200-900, covering both weights the type scale below uses —
   400 default, 600 for .h4-card-title) rather than pulled from Google
   Fonts' CDN: this project embeds every other asset locally already, and a
   CDN request is exactly the kind of thing that silently fails in a
   sandboxed preview context. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/SourceSerif4-Variable.woff") format("woff");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", "SFMono-Regular", Consolas, monospace;
}

/* Mobile — default (300px → 699px) */

.h1 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -2.5px;
  line-height: 46px;
}

.h2-intro {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -2.5px;
  line-height: 36px;
}

.h3-section {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -2.5px;
  line-height: 36px;
}

.h4-card-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.6px;
  line-height: 30px;
}

.body-large-tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 24px;
}

.button-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.6px;
  line-height: 24px;
}

.body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.6px;
  line-height: 24px;
}

.body-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 26px;
}

.body-small-feature {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.4px;
  line-height: 22px;
}

.caption-footer {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.2px;
  line-height: 20px;
}

.code-inline {
  font-family: var(--font-mono);
  font-weight: 450;
  font-size: 14px;
  letter-spacing: -6%;
  line-height: 22px;
}

.code-block {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -8%;
  line-height: 18px;
}

/* Tablet (700px → 900px) */

@media (min-width: 700px) {
  .h1 {
    font-size: 72px;
    letter-spacing: -4px;
    line-height: 68px;
  }

  .h2-intro {
    font-size: 40px;
    line-height: 44px;
  }

  .h3-section {
    font-size: 36px;
    line-height: 40px;
  }

  .code-block {
    font-size: 12px;
    letter-spacing: -6%;
    line-height: 20px;
  }

  /* H4, Body Large/Tagline, Button Label, Body, Body Subtitle,
     Body Small/Feature, Caption/Footer, and Code Inline are
     identical between tablet and mobile — no overrides needed. */
}

/* Desktop (901px → ∞) */

@media (min-width: 901px) {
  .h1 {
    font-size: 92px;
    letter-spacing: -4px;
    line-height: 88px;
  }

  .h2-intro {
    font-size: 46px;
    letter-spacing: -2.5px;
    line-height: 50px;
  }

  .h3-section {
    font-size: 40px;
    letter-spacing: -2.5px;
    line-height: 42px;
  }

  .body-large-tagline,
  .button-label {
    font-size: 18px;
    /* CORRECTED 2026-08-10: measured directly on hero.section (3077:5888)
       — the description text and the ghost CTA label both render at
       18px/28px line-height at desktop, not the mobile 24px carried over
       previously. */
    line-height: 28px;
  }

  /* H4, Body, Body Subtitle, Body Small/Feature, Caption/Footer,
     Code Inline, and Code Block are identical between desktop
     and tablet — no overrides needed. */
}

/* --------------------------------------------------------------------------
   7. ICONS

   Self-hosted Google Material Symbols (Outlined), same reasoning as Source
   Serif 4 above: embed locally rather than pull from Google Fonts' CDN, so
   nothing breaks in a sandboxed/offline preview. Of the three styles
   Google ships (Outlined/Rounded/Sharp), only Outlined is included here —
   it's the neutral, most-used default and keeps this addition to one
   family rather than three; add the others in assets/fonts/ the same way
   if a specific icon ever needs a different style.

   Google distributes this as ONE variable font (axes FILL 0-1, GRAD -50-
   200, opsz 20-48, wght 100-700) — but converted to WOFF as-is that's
   ~4.6MB for interpolation data this site will never use (no plans to
   animate an icon's weight/fill). Instead, fontTools instanced it down to
   two fixed, static deliveries at Google's own default axis values
   (GRAD 0, opsz 24, wght 400) — Regular (FILL 0) and Filled (FILL 1) —
   ~0.5MB each, ~1MB total, while still keeping the complete glyph set
   (6,593 icons, every name Google ships). The trade-off: no live
   variable-weight animation between the two states, just two selectable
   ones — not a loss for anything this site currently needs.
   License: assets/fonts/MaterialSymbolsOutlined-LICENSE.txt (Apache 2.0,
   as shipped by Google — carried over unmodified).

   NOTE: this is a generic UI icon set (search, menu, arrows, etc.), not a
   brand-mark library — it does NOT cover the footer's still-missing
   LinkedIn/Bluesky logos (see the TODO on .footer-social in index.html),
   which are trademarked marks and need their own exported assets.

   Usage: <span class="material-symbol">search</span> — the element's text
   content is the icon's name (Google's icon-font ligature convention:
   each name string is substituted for its glyph via the font's own GSUB
   ligature table, not a codepoint you have to look up). Add
   .material-symbol--filled for the filled variant (e.g. an active/selected
   state). Not yet wired to any element on the page — added so the next
   icon need (nav, buttons, etc.) can reach for a class that already
   exists instead of a one-off. */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("../assets/fonts/MaterialSymbolsOutlined-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* icon ligatures shouldn't flash as literal text */
}

@font-face {
  font-family: "Material Symbols Outlined Filled";
  src: url("../assets/fonts/MaterialSymbolsOutlined-Filled.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --font-icon: "Material Symbols Outlined";
  --font-icon-filled: "Material Symbols Outlined Filled";
}

.material-symbol {
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
}

.material-symbol--filled {
  font-family: var(--font-icon-filled);
}