/* MagpieFeed design tokens: the ONE source (docs/specs/redesign-v3.md, "Tokens").

   Used by:
     - Django templates: linked from web/public_base.html, web/base.html and the
       standalone public pages through web/_head_assets.html.
     - Tailwind 4: resources/css/app.css @imports this file and maps every token
       into @theme, so the SPA gets bg-paper, text-ink, text-blue, border-line ...

   Light is the default; dark overrides the same names under
   prefers-color-scheme (public pages, no data-theme) or html[data-theme="dark"] (the signed-in
   app, which defaults to data-theme="light"), so nothing downstream needs a second stylesheet.
   `screen and` keeps printed legal pages black on white.

   Contrast (WCAG AA 4.5:1 for text), measured on --paper and --canvas:
     light  --ink #12151b 18.4:1 · --text #3a3e46 11.0:1 · --muted #5b5f68 6.5:1
            (--muted on --bg-sunk 5.6:1) · --blue #2d56a0 7.0:1 · white on --fill-blue 7.0:1
     dark   --ink #eef0f3 16.2:1 · --text #c9cdd4 11.4:1 · --muted #9ca1ab 6.9:1
            --blue #7fa2e0 6.9:1 · --on-fill-blue on --fill-blue 7.4:1
   --faint is for placeholders (and status dots) only, never body copy. Placeholders are
   text too, so it clears AA on the field fill: light #70747c 4.7:1 on --field,
   dark #7f848e 4.9:1 on --field (4.7:1 on --paper). */

:root {
  color-scheme: light dark;   /* html[data-theme="light"|"dark"] below pins one of them */

  /* ---- colour: text */
  --ink: #12151b;          /* headings, primary (ink) button fill, dark band */
  --text: #3a3e46;         /* body copy */
  --muted: #5b5f68;        /* secondary copy */
  --faint: #70747c;        /* placeholders only (AA on --field) */

  /* ---- colour: brand */
  --blue: #2d56a0;         /* accent, links, blue CTA */
  --blue-press: #234684;   /* hover/pressed fill for blue buttons */
  --blue-soft: #eaf0fa;    /* chips, active chapter, selected rows */
  --blue-line: #c9d7ef;    /* border of a blue-soft surface */

  /* ---- colour: logo bars (web/_logo.html, Logo.vue). The ink bar turns light in dark. */
  --logo-a: #12151b;
  --logo-b: #2d56a0;
  --logo-on-dark-a: #eef0f3;  /* surfaces that are dark in BOTH schemes (.mf-logo[data-on-dark]) */
  --logo-on-dark-b: #5b86d4;
  --logo-bar-h: 18px;
  --logo-gap: .6em;
  --logo-word-size: 1.125rem;
  --logo-word-weight: 700;    /* "Magpie" */
  --logo-feed-weight: 500;    /* "Feed" */
  --logo-tracking: -.025em;

  /* ---- colour: surfaces */
  --canvas: #ffffff;      /* page background */
  --paper: #ffffff;        /* cards, popovers, fields */
  --bg-warm: #f7f5f0;      /* alternating band */
  --bg-sunk: #f1eee8;      /* segmented-control track, secondary button */
  --line: #ebe7de;         /* card borders */
  --line-soft: #eeebe4;    /* section rules */
  --field-line: #d6d2c8;   /* input borders */
  --field: #ffffff;        /* input fill */
  --header: rgba(255, 255, 255, .9);  /* sticky header (backdrop-blurred) */

  /* ---- colour: filled buttons (fill + the text that sits on it) */
  --fill-ink: #12151b;     --on-fill-ink: #ffffff;
  --fill-blue: #2d56a0;    --on-fill-blue: #ffffff;
  --fill-ink-press: #2a2f39;

  /* ---- colour: the dark band (final CTA, video bezel), dark in BOTH schemes */
  --band: #12151b;
  --on-band: #ffffff;
  --on-band-soft: #b5bac3;
  --on-band-line: #3a3f4a;

  /* ---- colour: status. Red is ONLY for errors. */
  --danger: #b42318;       --danger-soft: #fef3f2;  --danger-line: #fecdca;
  --ok: #067647;           --ok-soft: #ecfdf3;      --ok-line: #abefc6;
  --warn: #93370d;         --warn-soft: #fffaeb;    --warn-line: #fedf89;

  /* ---- type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* --serif is the DISPLAY stack (headings, big numbers). The brand dropped its
     serif for Geist Sans; the name stays so every var(--serif) / font-serif keeps
     working. Display type is Geist 600 with negative tracking, not a light serif. */
  --serif: var(--sans);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-1: clamp(36px, 4.6vw, 54px); /* h1, 600, line-height 1.06, tracking -.025em */
  --display-2: clamp(28px, 3.3vw, 38px); /* h2, 600, line-height 1.1, tracking -.02em */

  /* ---- shape */
  --r-sm: 8px;     /* buttons, small controls */
  --r-md: 10px;    /* fields, hero buttons, segmented control */
  --r-lg: 14px;    /* cards, video, plan cards */
  --shadow: 0 1px 2px rgba(18, 21, 27, .06);
  --shadow-lg: 0 24px 60px -24px rgba(18, 21, 27, .25), 0 1px 0 rgba(0, 0, 0, .04);
  --shadow-head: 0 8px 20px -12px rgba(18, 21, 27, .22);  /* sticky header once the page scrolls */
  --ring: 0 0 0 3px rgba(45, 86, 160, .25);   /* focus halo on fields */

  /* ---- spacing (unchanged scale from landing-v2) */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 6.5rem;
  --gutter: clamp(20px, 4vw, 48px);
  --head-h: 3.75rem;

  /* ---- touch: the smallest tap target on a phone or any coarse pointer (WCAG 2.5.5,
     Apple HIG 44pt). 0 on a desktop with a mouse, so `min-height: max(36px, var(--tap-min))`
     keeps desktop sizes exactly as they were. */
  --tap-min: 0px;

  /* ---- v3 public site (remote-style restyle, 2026-10): additive tokens. Nothing above changed.
     accent  coral for badges, "new", stat numbers. --accent is a FILL / large-type colour
             (white on it is only 3.9:1: use it on 18px+ bold or as a background behind ink);
             --accent-text is the AA text version (5.7:1 on white, 5.0:1 on --cool).
     grad    blue -> violet for hero blobs, the CTA band and the footer. White text on
             either end clears AA (7.0:1 and 6.2:1); --on-grad-soft is for secondary lines.
     cool    cool-grey bands. Pages on the public shell (html.v3) get them as --bg-warm /
             --bg-sunk / --line below, so existing .section-warm / .card pages follow. */
  --accent: #e5484d;       --accent-text: #c4292f;  --accent-soft: #fff0f0;  --accent-line: #f6c4c6;
  --violet: #5a3ff0;
  --grad-a: #2d56a0;       --grad-b: #4a78d0;
  --grad: linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 100%);
  --on-grad: #ffffff;      --on-grad-soft: rgba(255, 255, 255, .88);  --on-grad-line: rgba(255, 255, 255, .24);
  --blob-a: rgba(90, 63, 240, .30);  --blob-b: rgba(45, 86, 160, .32);  --blob-c: rgba(229, 72, 77, .18);
  --cool: #eef2f6;         --cool-sunk: #e3e8ef;    --cool-line: #dbe1e9;   --cool-line-soft: #e6eaf0;
  --cool-field-line: #aeb8c7;
  --display-weight: 800;   --display-track: -.04em;
}

/* ---- signed-in app shell + dashboard look (docs/specs/app-dashboard-ui.md, 2026-10).
   Additive: nothing above changed. Every token here has a dark value below.
   shell     cool-grey page backdrop the floating panels sit on
   panel     the white inset panels (sidebar, topbar pill, content); panel-sunk is the
             grey band inside one (table header, track); hairline is the 1px border
   st-*      pastel status chips (.mf-chip--scheduled|published|approval|failed|draft)
   net-*     per-network icon tint (.mf-net--facebook ...): bg is the tile, fg the glyph
   hatch     the "scheduled / not yet out" diagonal stripe (.mf-hatch)
   Contrast: every st-* fg is >= 4.5:1 on its own bg (light and dark); net-* fg is a
   glyph colour (>= 3:1). */
:root {
  --shell-bg: #eef1f5;
  --panel: #fff;
  --panel-sunk: #f3f5f8;
  --hairline: #e3e7ee;

  /* v2 (docs/specs/app-ui-v2.md): the content panel is TINTED, the cards on it are WHITE,
     borderless, soft-shadowed. */
  --content-bg: #f1f4f8;   /* the tinted content panel */
  --card-bg: #ffffff;         /* cards sitting on the content panel */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -14px rgba(16, 24, 40, .14);
  --shadow-pop: 0 18px 44px -16px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
  --scrim: rgba(12, 16, 24, .45);

  --r-card: 24px;   /* cards */
  --r-panel: 28px;  /* sidebar, topbar and content panels */
  --r-pill: 999px;  /* buttons, chips, filter pills */

  --st-scheduled-bg: #e4ecfb;  --st-scheduled-fg: #1e4a9a;
  --st-published-bg: #e3f6ec;  --st-published-fg: #0a6b43;
  --st-approval-bg:  #fdf0cf;  --st-approval-fg:  #854d0e;
  --st-failed-bg:    #fde8e6;  --st-failed-fg:    #b42318;
  --st-draft-bg:     #e8ebf0;  --st-draft-fg:     #454a54;
  --st-overdue-bg:   #ffe6e0;  --st-overdue-fg:   #a8331a;

  /* hero stat card gradient (white text on both ends >= 4.5:1) */
  --hero-a: #2d56a0;  --hero-b: #4170c4;
  /* sidebar promo card + dark CTA cards: dark in BOTH themes */
  --promo-a: #12151b;  --promo-b: #1f3f7d;  --promo-line: rgba(255, 255, 255, .14);
  /* notification dot / count (white text on it 4.8:1) */
  --alert-fill: #d92d33;
  --donut-track: #e6eaf1;

  --net-facebook-bg:  #e3eefd;  --net-facebook-fg:  #1456b8;
  --net-instagram-bg: #fde6f0;  --net-instagram-fg: #b0235f;
  --net-youtube-bg:   #fde7e5;  --net-youtube-fg:   #c4301c;
  --net-x-bg:         #e8ebf0;  --net-x-fg:         #12151b;
  --net-linkedin-bg:  #e0eef9;  --net-linkedin-fg:  #0a5aa8;
  --net-pinterest-bg: #fde6e8;  --net-pinterest-fg: #b5121b;
  --net-tiktok-bg:    #e1f5f5;  --net-tiktok-fg:    #0b6b70;
  --net-threads-bg:   #ece8f8;  --net-threads-fg:   #3d2a8c;
  --net-bluesky-bg:   #e0eeff;  --net-bluesky-fg:   #0a5fc4;
  --net-mastodon-bg:  #e9e7fb;  --net-mastodon-fg:  #4a3fc0;
  --net-other-bg:     #e8ebf0;  --net-other-fg:     #454a54;

  --hatch-line: #a9bde3;
}

@media (max-width: 40rem), (pointer: coarse) {
  :root { --tap-min: 44px; }
}

/* ---- dark values. Declared TWICE, byte-for-byte the same (resources/js/lib/tokens.test.js
   fails if they drift):
     1. html[data-theme="dark"]: the signed-in app after the customer (or the default) chose dark.
     2. the OS preference, for html with NO data-theme (the public site) and data-theme="system".
   The app defaults to data-theme="light" (inline script in web/base.html), so it ignores the OS
   until someone picks "System" or "Dark" in Account > Appearance. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef0f3;
  --text: #c9cdd4;
  --muted: #9ca1ab;
  --faint: #7f848e;

  --blue: #7fa2e0;
  --blue-press: #9bb8ea;
  --blue-soft: #1c2940;
  --blue-line: #2e4166;

  --logo-a: #eef0f3;
  --logo-b: #5b86d4;

  --canvas: #0f1217;
  --paper: #171a21;
  --bg-warm: #13161c;
  --bg-sunk: #242832;
  --line: #2a2f38;
  --line-soft: #22262e;
  --field-line: #3d434e;
  --field: #13161c;
  --header: rgba(15, 18, 23, .9);

  /* filled buttons invert: a light fill carries dark text */
  --fill-ink: #eef0f3;     --on-fill-ink: #12151b;
  --fill-blue: #7fa2e0;    --on-fill-blue: #0f1217;
  --fill-ink-press: #d3d7de;

  --band: #1a1e26;
  --on-band: #eef0f3;
  --on-band-soft: #a9afb9;
  --on-band-line: #3a404c;

  --danger: #fda29b;       --danger-soft: #2d1311;  --danger-line: #6e2a24;
  --ok: #75e0a7;           --ok-soft: #0e2a1d;      --ok-line: #1f5a3d;
  --warn: #fec84b;         --warn-soft: #2b2110;    --warn-line: #6b4e12;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .03);
  --shadow-head: 0 8px 20px -10px rgba(0, 0, 0, .75);
  --ring: 0 0 0 3px rgba(127, 162, 224, .35);

  --accent: #ff6b70;       --accent-text: #ff8d91;  --accent-soft: #2e1618;  --accent-line: #6e2a2e;
  --violet: #8b78ff;
  --grad-a: #1f3d78;       --grad-b: #3a63b8;
  --on-grad: #ffffff;      --on-grad-soft: rgba(255, 255, 255, .86);
  --blob-a: rgba(110, 85, 255, .26);  --blob-b: rgba(60, 110, 200, .26);  --blob-c: rgba(255, 107, 112, .12);
  --cool: #13161c;         --cool-sunk: #242832;    --cool-line: #2a2f38;   --cool-line-soft: #22262e;
  --cool-field-line: #3d434e;

  /* signed-in app shell (see the light block above) */
  --shell-bg: #0b0e12;
  --panel: #13161c;
  --panel-sunk: #1a1e26;
  --hairline: #272c35;
  --content-bg: #0f1217;
  --card-bg: #171a21;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -14px rgba(0, 0, 0, .6);
  --shadow-pop: 0 18px 44px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .62);
  --hero-a: #2a4a86;  --hero-b: #3d68b8;
  --promo-a: #171c26;  --promo-b: #1f3566;  --promo-line: rgba(255, 255, 255, .12);
  --alert-fill: #d92d33;
  --donut-track: #272c35;
  --st-overdue-bg:   #3b1c15;  --st-overdue-fg:   #ffb5a3;

  --st-scheduled-bg: #1d2c47;  --st-scheduled-fg: #a9c3f2;
  --st-published-bg: #0f2c20;  --st-published-fg: #7fe3ae;
  --st-approval-bg:  #33270f;  --st-approval-fg:  #fbcf6a;
  --st-failed-bg:    #36171a;  --st-failed-fg:    #fdaaa3;
  --st-draft-bg:     #262a33;  --st-draft-fg:     #b4b9c3;

  --net-facebook-bg:  #182a47;  --net-facebook-fg:  #8db6f5;
  --net-instagram-bg: #3a1828;  --net-instagram-fg: #f59cc3;
  --net-youtube-bg:   #3a1a17;  --net-youtube-fg:   #fa9b8f;
  --net-x-bg:         #262a33;  --net-x-fg:         #eef0f3;
  --net-linkedin-bg:  #14283d;  --net-linkedin-fg:  #84bdf0;
  --net-pinterest-bg: #3a171a;  --net-pinterest-fg: #f79aa0;
  --net-tiktok-bg:    #0f2f31;  --net-tiktok-fg:    #6ed6da;
  --net-threads-bg:   #261f42;  --net-threads-fg:   #b8a8f5;
  --net-bluesky-bg:   #142a47;  --net-bluesky-fg:   #82b6f7;
  --net-mastodon-bg:  #251f45;  --net-mastodon-fg:  #b3acf7;
  --net-other-bg:     #262a33;  --net-other-fg:     #b4b9c3;

  --hatch-line: #3b5384;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink: #eef0f3;
    --text: #c9cdd4;
    --muted: #9ca1ab;
    --faint: #7f848e;

    --blue: #7fa2e0;
    --blue-press: #9bb8ea;
    --blue-soft: #1c2940;
    --blue-line: #2e4166;

    --logo-a: #eef0f3;
    --logo-b: #5b86d4;

    --canvas: #0f1217;
    --paper: #171a21;
    --bg-warm: #13161c;
    --bg-sunk: #242832;
    --line: #2a2f38;
    --line-soft: #22262e;
    --field-line: #3d434e;
    --field: #13161c;
    --header: rgba(15, 18, 23, .9);

    /* filled buttons invert: a light fill carries dark text */
    --fill-ink: #eef0f3;     --on-fill-ink: #12151b;
    --fill-blue: #7fa2e0;    --on-fill-blue: #0f1217;
    --fill-ink-press: #d3d7de;

    --band: #1a1e26;
    --on-band: #eef0f3;
    --on-band-soft: #a9afb9;
    --on-band-line: #3a404c;

    --danger: #fda29b;       --danger-soft: #2d1311;  --danger-line: #6e2a24;
    --ok: #75e0a7;           --ok-soft: #0e2a1d;      --ok-line: #1f5a3d;
    --warn: #fec84b;         --warn-soft: #2b2110;    --warn-line: #6b4e12;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .03);
    --shadow-head: 0 8px 20px -10px rgba(0, 0, 0, .75);
    --ring: 0 0 0 3px rgba(127, 162, 224, .35);

    --accent: #ff6b70;       --accent-text: #ff8d91;  --accent-soft: #2e1618;  --accent-line: #6e2a2e;
    --violet: #8b78ff;
    --grad-a: #1f3d78;       --grad-b: #3a63b8;
    --on-grad: #ffffff;      --on-grad-soft: rgba(255, 255, 255, .86);
    --blob-a: rgba(110, 85, 255, .26);  --blob-b: rgba(60, 110, 200, .26);  --blob-c: rgba(255, 107, 112, .12);
    --cool: #13161c;         --cool-sunk: #242832;    --cool-line: #2a2f38;   --cool-line-soft: #22262e;
    --cool-field-line: #3d434e;

    /* signed-in app shell (see the light block above) */
    --shell-bg: #0b0e12;
    --panel: #13161c;
    --panel-sunk: #1a1e26;
    --hairline: #272c35;
    --content-bg: #0f1217;
    --card-bg: #171a21;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -14px rgba(0, 0, 0, .6);
    --shadow-pop: 0 18px 44px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
    --scrim: rgba(0, 0, 0, .62);
    --hero-a: #2a4a86;  --hero-b: #3d68b8;
    --promo-a: #171c26;  --promo-b: #1f3566;  --promo-line: rgba(255, 255, 255, .12);
    --alert-fill: #d92d33;
    --donut-track: #272c35;
    --st-overdue-bg:   #3b1c15;  --st-overdue-fg:   #ffb5a3;

    --st-scheduled-bg: #1d2c47;  --st-scheduled-fg: #a9c3f2;
    --st-published-bg: #0f2c20;  --st-published-fg: #7fe3ae;
    --st-approval-bg:  #33270f;  --st-approval-fg:  #fbcf6a;
    --st-failed-bg:    #36171a;  --st-failed-fg:    #fdaaa3;
    --st-draft-bg:     #262a33;  --st-draft-fg:     #b4b9c3;

    --net-facebook-bg:  #182a47;  --net-facebook-fg:  #8db6f5;
    --net-instagram-bg: #3a1828;  --net-instagram-fg: #f59cc3;
    --net-youtube-bg:   #3a1a17;  --net-youtube-fg:   #fa9b8f;
    --net-x-bg:         #262a33;  --net-x-fg:         #eef0f3;
    --net-linkedin-bg:  #14283d;  --net-linkedin-fg:  #84bdf0;
    --net-pinterest-bg: #3a171a;  --net-pinterest-fg: #f79aa0;
    --net-tiktok-bg:    #0f2f31;  --net-tiktok-fg:    #6ed6da;
    --net-threads-bg:   #261f42;  --net-threads-fg:   #b8a8f5;
    --net-bluesky-bg:   #142a47;  --net-bluesky-fg:   #82b6f7;
    --net-mastodon-bg:  #251f45;  --net-mastodon-fg:  #b3acf7;
    --net-other-bg:     #262a33;  --net-other-fg:     #b4b9c3;

    --hatch-line: #3b5384;
  }
}

/* Public shell (html.v3, web/public_base.html): cool-grey surfaces instead of the warm
   cream ones. Light only (public pages never carry data-theme, so the OS decides); dark already uses cool greys. The Vue app and the other
   standalone pages do not carry .v3, so they keep the values above. */
@media screen and (not (prefers-color-scheme: dark)) {
  html.v3:not([data-theme="dark"]) {
    --bg-warm: var(--cool);
    --bg-sunk: var(--cool-sunk);
    --line: var(--cool-line);
    --line-soft: var(--cool-line-soft);
    --field-line: var(--cool-field-line);
    --blue-soft: #e8eefa;
    --shadow-lg: 0 28px 70px -30px rgba(33, 44, 84, .35), 0 1px 0 rgba(0, 0, 0, .03);
  }
}
html.v3[data-theme="light"] {
  --bg-warm: var(--cool);
  --bg-sunk: var(--cool-sunk);
  --line: var(--cool-line);
  --line-soft: var(--cool-line-soft);
  --field-line: var(--cool-field-line);
  --blue-soft: #e8eefa;
  --shadow-lg: 0 28px 70px -30px rgba(33, 44, 84, .35), 0 1px 0 rgba(0, 0, 0, .03);
}
html.v3 {
  --display-1: clamp(38px, 5.2vw, 64px);   /* h1, 800, tracking -.04em */
  --display-2: clamp(30px, 3.9vw, 48px);   /* h2, 800 */
}

/* ======================================================================= logo
   The ONE definition of the MagpieFeed logo type + bars. Used by
   templates/web/_logo.html (Django) and resources/js/components/ui/Logo.vue (SPA),
   which emit identical markup:
     <span class="mf-logo" [data-compact] [data-on-dark]><svg class="mf-logo-mark">..</svg>
       <span class="mf-logo-word"><b>Magpie</b><i>Feed</i></span></span>
   Two-tone wordmark: "Magpie" in the ink bar colour, "Feed" in the blue bar colour.
   Hide rule: [data-compact] drops the word on phones (the link keeps its aria-label);
   the svg is never hidden. */
.mf-logo {
  display: inline-flex; align-items: center; gap: var(--logo-gap);
  font-family: var(--sans); font-weight: var(--logo-word-weight); font-size: var(--logo-word-size);
  letter-spacing: var(--logo-tracking); line-height: 1; text-decoration: none; color: var(--logo-a);
}
.mf-logo-mark { flex: none; display: block; }
.mf-logo-mark .mf-logo-a { fill: var(--logo-a); }
.mf-logo-mark .mf-logo-b { fill: var(--logo-b); }
.mf-logo-mark .mf-logo-spot { fill: #fff; }
.mf-logo-word b { font-weight: inherit; color: var(--logo-a); }
.mf-logo-word i { font-style: normal; font-weight: var(--logo-feed-weight); color: var(--logo-b); }
.mf-logo[data-on-dark] { --logo-a: var(--logo-on-dark-a); --logo-b: var(--logo-on-dark-b); }
@media (max-width: 23.4rem) { .mf-logo[data-compact] .mf-logo-word { display: none; } }
@media (max-width: 39.99rem) { .mf-topbar .mf-logo[data-compact] .mf-logo-word { display: none; } }