/* ============================================================
   PixelBin.io Design Tokens
   Source: Fynd Novus variables.json (exact values, no guessing)
   Collections: Core_Dimensions · Mode (Light) · Themes (Falcon)
                Typography · Effects
   ============================================================ */

.ds-root {

  /* ─────────────────────────────────────────────────────────
     DIMENSIONS — Core_Dimensions (px → rem)
     Values: 0,1,2,4,6,8,12,16,20,24,32,40,48,64,80,250
  ───────────────────────────────────────────────────────── */

  --pb-dim-0:    0;
  --pb-dim-1:    0.0625rem;   /*  1px */
  --pb-dim-2:    0.125rem;    /*  2px */
  --pb-dim-4:    0.25rem;     /*  4px */
  --pb-dim-6:    0.375rem;    /*  6px */
  --pb-dim-8:    0.5rem;      /*  8px */
  --pb-dim-12:   0.75rem;     /* 12px */
  --pb-dim-16:   1rem;        /* 16px */
  --pb-dim-20:   1.25rem;     /* 20px */
  --pb-dim-24:   1.5rem;      /* 24px */
  --pb-dim-32:   2rem;        /* 32px */
  --pb-dim-40:   2.5rem;      /* 40px */
  --pb-dim-48:   3rem;        /* 48px */
  --pb-dim-64:   4rem;        /* 64px */
  --pb-dim-80:   5rem;        /* 80px */
  --pb-dim-full: 999px;       /* Novus aligned 2026-04-19 — was 250px */

  /* ─────────────────────────────────────────────────────────
     SPACING — Themes/Spacing + Padding (aliases → dims)
  ───────────────────────────────────────────────────────── */

  --pb-space-0:  var(--pb-dim-0);
  --pb-space-1:  var(--pb-dim-1);
  --pb-space-2:  var(--pb-dim-2);
  --pb-space-4:  var(--pb-dim-4);
  --pb-space-8:  var(--pb-dim-8);
  --pb-space-12: var(--pb-dim-12);
  --pb-space-16: var(--pb-dim-16);
  --pb-space-20: var(--pb-dim-20);
  --pb-space-24: var(--pb-dim-24);
  --pb-space-32: var(--pb-dim-32);
  --pb-space-40: var(--pb-dim-40);
  --pb-space-48: var(--pb-dim-48);
  --pb-space-64: var(--pb-dim-64);
  --pb-space-80: var(--pb-dim-80);

  /* ─────────────────────────────────────────────────────────
     BORDER RADIUS — Core scale + Component-specific
  ───────────────────────────────────────────────────────── */

  --pb-radius-0:    var(--pb-dim-0);
  --pb-radius-4:    var(--pb-dim-4);    /* Checkbox, Badge, Nav menu */
  --pb-radius-6:    var(--pb-dim-6);
  --pb-radius-8:    var(--pb-dim-8);    /* Input S, Tooltip, Search trigger S */
  --pb-radius-12:   var(--pb-dim-12);   /* Input L, Card inner, Notification-1 */
  --pb-radius-16:   var(--pb-dim-16);   /* Modal, Pagination */
  --pb-radius-24:   var(--pb-dim-24);   /* Card, Bottom sheet, Bulk import */
  --pb-radius-32:   var(--pb-dim-32);   /* Modal (old) */
  --pb-radius-full: var(--pb-dim-full); /* Button, Tag, Selector, Scrollbar, Stepper */

  /* Semantic aliases */
  --pb-radius-sm:     var(--pb-radius-4);
  --pb-radius-md:     var(--pb-radius-8);
  --pb-radius-lg:     var(--pb-radius-12);
  --pb-radius-xl:     var(--pb-radius-16);
  --pb-radius-2xl:    var(--pb-radius-24);
  --pb-radius-card:   var(--pb-radius-24);   /* Novus: BorderRadius/Component/Card */
  --pb-radius-button: var(--pb-radius-full); /* Novus: BorderRadius/Component/Button */
  --pb-radius-badge:  var(--pb-radius-4);    /* Novus: BorderRadius/Component/Badge = 4px (NOT pill) */
  --pb-radius-tag:    var(--pb-radius-full); /* Novus: BorderRadius/Component/Tag = full */
  --pb-radius-input:  var(--pb-radius-8);    /* Novus: Input field S */
  --pb-radius-modal:  var(--pb-radius-16);   /* Novus: Modal Desktop/Mobile */

  /* ─────────────────────────────────────────────────────────
     COLORS — Mode collection, Light mode
  ───────────────────────────────────────────────────────── */

  /* Neutrals */
  --pb-color-white:        #FFFFFF;
  --pb-color-black:        #0D0D0D;   /* Novus aligned 2026-04-19 — was #141414 */
  --pb-color-grey-0:       #FFFFFF;   /* Surface-0 alias */
  --pb-color-grey-10:      #FAFAFA;
  --pb-color-grey-20:      #F5F5F5;
  --pb-color-grey-30:      #F0F0F0;
  --pb-color-grey-40:      #E0E0E0;
  --pb-color-grey-60:      #B8B8B8;   /* Novus aligned 2026-04-19 — was #B5B5B5 */
  --pb-color-grey-80:      rgba(0, 0, 0, 0.65);
  --pb-color-grey-100:     #0D0D0D;   /* Novus aligned 2026-04-19 — was #141414 */
  --pb-color-grey-70-inv:  #5C5C5C;   /* Novus aligned 2026-04-19 — was #5A5A5A */
  --pb-color-grey-80-inv:  #262626;   /* Novus aligned 2026-04-19 — was #2B2B2B */
  --pb-color-grey-90-inv:  #1A1A1A;   /* Novus aligned 2026-04-19 — was #1F1F1F */
  --pb-color-blur-bg:      rgba(0, 0, 0, 0.65);
  --pb-color-opacity-20:   rgba(255, 255, 255, 0.2);
  --pb-color-opacity-10:   rgba(255, 255, 255, 0.1);

  /* Navi (primary brand blue) */
  --pb-navi-10: #F4F4FC;
  --pb-navi-20: #E8E8FC;
  --pb-navi-30: #9999FF;
  --pb-navi-40: #6464FF;
  --pb-navi-50: #3535F3;
  --pb-navi-60: #000093;
  --pb-navi-70: #00004C;
  --pb-navi-80: #010029;

  /* Purple */
  --pb-purple-10: #FAF5FF;   /* Novus aligned 2026-04-19 — was #F7F5FC */
  --pb-purple-20: #F3E8FF;   /* Novus aligned 2026-04-19 — was #EEE8FC */
  --pb-purple-30: #DFC8FF;   /* Novus aligned 2026-04-19 — was #C3ADFF */
  --pb-purple-40: #B888FF;   /* Novus aligned 2026-04-19 — was #9770FF */
  --pb-purple-50: #6933FA;
  --pb-purple-60: #5A24E0;   /* Novus aligned 2026-04-19 — was #370B8F */
  --pb-purple-70: #1B0052;
  --pb-purple-80: #0E0029;

  /* Mint (tertiary) */
  --pb-mint-10: #F7FCFC;
  --pb-mint-20: #E6FAF7;
  --pb-mint-30: #A6F5E9;
  --pb-mint-40: #31CCB5;
  --pb-mint-50: #278476;
  --pb-mint-60: #175249;
  --pb-mint-70: #0F332E;
  --pb-mint-80: #081A17;

  /* Marigold (secondary) */
  --pb-marigold-10: #FCF9F2;
  --pb-marigold-20: #FEF7E9;
  --pb-marigold-30: #FFE3AE;
  --pb-marigold-40: #FFD947;
  --pb-marigold-50: #F7AB20;
  --pb-marigold-60: #AC660C;
  --pb-marigold-70: #7F4B10;
  --pb-marigold-80: #401D0C;

  /* Green */
  --pb-green-10: #F2FCF7;
  --pb-green-20: #E5F7EE;
  --pb-green-30: #94F6C5;
  --pb-green-40: #10D974;
  --pb-green-50: #00B259;
  --pb-green-60: #03753C;
  --pb-green-70: #005028;
  --pb-green-80: #002D16;

  /* Lime — PixelBin-specific (from Figma pricing cards) */
  --pb-lime-accent: rgba(153, 183, 72, 1);   /* #99B748 — badge bg, check color */
  --pb-lime-surface: rgba(246, 250, 229, 1);  /* #F6FAE5 — features box bg */

  /* Red */
  --pb-red-10: #FCF4F5;
  --pb-red-20: #FCE6E7;
  --pb-red-30: #FF9DA3;
  --pb-red-40: #FC6770;
  --pb-red-50: #E30513;
  --pb-red-60: #A80000;
  --pb-red-70: #660209;
  --pb-red-80: #390105;

  /* Crimson */
  --pb-crimson-10: #FCF5F7;
  --pb-crimson-20: #F7E5E9;
  --pb-crimson-30: #F98BA1;
  --pb-crimson-40: #ED617F;
  --pb-crimson-50: #AA0023;
  --pb-crimson-60: #700017;
  --pb-crimson-70: #4D0010;
  --pb-crimson-80: #2A0009;

  /* Orange */
  --pb-orange-10: #FCF7F2;
  --pb-orange-20: #FEF2E9;
  --pb-orange-30: #FFD2AD;
  --pb-orange-40: #FFAA66;
  --pb-orange-50: #FA7D19;
  --pb-orange-60: #CD3D00;
  --pb-orange-70: #7B1604;
  --pb-orange-80: #46070B;

  /* Sky */
  --pb-sky-10: #F2F9FC;
  --pb-sky-20: #E5F1F7;
  --pb-sky-30: #89DCFF;
  --pb-sky-40: #67C3EF;
  --pb-sky-50: #0078AD;
  --pb-sky-60: #0C5273;
  --pb-sky-70: #00364E;
  --pb-sky-80: #001E2B;

  /* Pink */
  --pb-pink-10: #FCF5FA;
  --pb-pink-20: #FBE5F4;
  --pb-pink-30: #FF99DB;
  --pb-pink-40: #FF6DCC;
  --pb-pink-50: #D9008D;
  --pb-pink-60: #8F005D;
  --pb-pink-70: #62003F;
  --pb-pink-80: #360023;

  /* Violet */
  --pb-violet-10: #FCF5FC;
  --pb-violet-20: #F9EBF9;
  --pb-violet-30: #F7A8FA;
  --pb-violet-40: #F680F9;
  --pb-violet-50: #C135C5;
  --pb-violet-60: #79007F;
  --pb-violet-70: #571859;
  --pb-violet-80: #300D31;

  /* Feedbacks */
  --pb-feedback-success-80: #135610;
  --pb-feedback-success-50: #25AB21;
  --pb-feedback-success-20: #E9F7E9;
  --pb-feedback-warning-80: #7D2F08;
  --pb-feedback-warning-50: #F06D0F;
  --pb-feedback-warning-20: #FEF0E7;
  --pb-feedback-error-80:   #660014;
  --pb-feedback-error-50:   #F50031;
  --pb-feedback-error-20:   #FEE6EA;

  /* ─────────────────────────────────────────────────────────
     SEMANTIC COLORS — Themes/Falcon
     (Falcon theme = Primary→Navi, Secondary→Marigold, Tertiary→Mint)
  ───────────────────────────────────────────────────────── */

  /* Backgrounds / Surfaces */
  --pb-surface-0:  var(--pb-color-grey-0);    /* #FFFFFF */
  --pb-surface-10: var(--pb-color-grey-10);   /* #FAFAFA */
  --pb-surface-20: var(--pb-color-grey-20);   /* #F5F5F5 */
  --pb-surface-30: var(--pb-color-grey-30);   /* #F0F0F0 */

  /* Text */
  --pb-text-default:     var(--pb-color-grey-100);  /* #0D0D0D (Novus aligned 2026-04-19) */
  --pb-text-subdued-1:   var(--pb-color-grey-80);   /* rgba(0,0,0,0.65) */
  --pb-text-subdued-2:   var(--pb-color-grey-60);   /* #B8B8B8 (Novus aligned 2026-04-19) */
  --pb-text-inv:         var(--pb-color-white);      /* #FFFFFF */
  --pb-text-subdued-inv: var(--pb-color-grey-20);   /* #F5F5F5 */
  --pb-text-error:       var(--pb-feedback-error-50);
  --pb-text-warning:     var(--pb-feedback-warning-50);
  --pb-text-success:     var(--pb-feedback-success-50);

  /* PixelBin-specific web text colors (only two custom values outside Novus) */
  --pb-text-heading:     #34324A;   /* Dark purple-tinted gray — all h1/h2/h3 */
  --pb-text-body-web:    #6E6D74;   /* Warm mid-gray — body copy, subheadlines */

  /* Primary (Phoenix = Purple) — PixelBin uses Phoenix theme */
  --pb-color-primary-10: var(--pb-purple-10);  /* #FAF5FF (Novus aligned 2026-04-19) */
  --pb-color-primary-20: var(--pb-purple-20);  /* #F3E8FF (Novus aligned 2026-04-19) */
  --pb-color-primary-30: var(--pb-purple-30);  /* #DFC8FF (Novus aligned 2026-04-19) */
  --pb-color-primary-40: var(--pb-purple-40);  /* #B888FF (Novus aligned 2026-04-19) */
  --pb-color-primary:    var(--pb-purple-50);  /* #6933FA — main interactive */
  --pb-color-primary-60: var(--pb-purple-60);  /* #5A24E0 — pressed/hover (Novus aligned 2026-04-19) */
  --pb-color-primary-70: var(--pb-purple-70);  /* #1B0052 */
  --pb-color-primary-80: var(--pb-purple-80);  /* #0E0029 */
  --pb-color-primary-inv: var(--pb-color-white);

  /* Secondary (Falcon = Marigold) */
  --pb-color-secondary:    var(--pb-marigold-50);
  --pb-color-secondary-10: var(--pb-marigold-10);
  --pb-color-secondary-20: var(--pb-marigold-20);

  /* Tertiary (Falcon = Mint) */
  --pb-color-tertiary:    var(--pb-mint-50);
  --pb-color-tertiary-10: var(--pb-mint-10);
  --pb-color-tertiary-20: var(--pb-mint-20);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY — exact values from variables.json
  ───────────────────────────────────────────────────────── */

  /* Font families */
  --pb-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pb-font-display: 'Inter Display', 'Inter', -apple-system, sans-serif;
  --pb-font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --pb-font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Font sizes (Novus: xs=11, s=12, m=14, l=16, xl=18, 2xl=24, 3xl=32, 4xl=40, 5xl=48, 6xl=56, 7xl=64, 8xl=88) */
  --pb-font-size-xs:  0.6875rem;  /* 11px */
  --pb-font-size-s:   0.75rem;    /* 12px */
  --pb-font-size-m:   0.875rem;   /* 14px */
  --pb-font-size-l:   1rem;       /* 16px */
  --pb-font-size-xl:  1.125rem;   /* 18px */
  --pb-font-size-2xl: 1.5rem;     /* 24px */
  --pb-font-size-3xl: 2rem;       /* 32px */
  --pb-font-size-4xl: 2.5rem;     /* 40px */
  --pb-font-size-5xl: 3rem;       /* 48px */
  --pb-font-size-6xl: 3.5rem;     /* 56px */
  --pb-font-size-7xl: 4rem;       /* 64px */
  --pb-font-size-8xl: 5.5rem;     /* 88px */

  /* Font weights */
  --pb-weight-regular:  400;
  --pb-weight-medium:   500;
  --pb-weight-semibold: 600;

  /* Line heights (Novus exact px → rem) */
  --pb-lh-xs:  0.875rem;  /* 14px */
  --pb-lh-s:   1rem;      /* 16px */
  --pb-lh-m:   1.25rem;   /* 20px */
  --pb-lh-l:   1.5rem;    /* 24px */
  --pb-lh-xl:  2rem;      /* 32px */
  --pb-lh-2xl: 2.25rem;   /* 36px */
  --pb-lh-3xl: 2.625rem;  /* 42px */
  --pb-lh-4xl: 3rem;      /* 48px */
  --pb-lh-5xl: 3.625rem;  /* 58px */
  --pb-lh-6xl: 3.875rem;  /* 62px */
  --pb-lh-7xl: 4rem;      /* 64px */
  --pb-lh-8xl: 5.25rem;   /* 84px */

  /* Letter spacing (Novus: baggy=0, loose=-0.2, comfy=-0.4, fitted=-0.6, snug=-1, tight=-2) */
  --pb-tracking-baggy:  0;
  --pb-tracking-loose:  -0.2px;
  --pb-tracking-comfy:  -0.4px;
  --pb-tracking-fitted: -0.6px;
  --pb-tracking-snug:   -1px;
  --pb-tracking-tight:  -2px;

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY COMPOSITES — en/Desktop styles
  ───────────────────────────────────────────────────────── */

  /* Display (Inter Display, weight 500/Medium) */
  /* Display/2xs: 24px, lh 32px, tracking -0.2px */
  --pb-display-2xs-size:    var(--pb-font-size-2xl);
  --pb-display-2xs-lh:      var(--pb-lh-xl);
  --pb-display-2xs-tracking: var(--pb-tracking-loose);

  /* Display/xs: 32px, lh 42px, tracking -0.4px */
  --pb-display-xs-size:     var(--pb-font-size-3xl);
  --pb-display-xs-lh:       var(--pb-lh-3xl);
  --pb-display-xs-tracking: var(--pb-tracking-comfy);

  /* Display/s: 40px, lh 48px, tracking -0.6px */
  --pb-display-s-size:      var(--pb-font-size-4xl);
  --pb-display-s-lh:        var(--pb-lh-4xl);
  --pb-display-s-tracking:  var(--pb-tracking-fitted);

  /* Display/m: 48px, lh 58px, tracking -1px */
  --pb-display-m-size:      var(--pb-font-size-5xl);
  --pb-display-m-lh:        var(--pb-lh-5xl);
  --pb-display-m-tracking:  var(--pb-tracking-snug);

  /* Display/l: 56px, lh 62px, tracking -2px */
  --pb-display-l-size:      var(--pb-font-size-6xl);
  --pb-display-l-lh:        var(--pb-lh-6xl);
  /* display-l (56px) uses normal tracking on live pixelbin.io —
     audit on /pricing 2026-05-07 confirmed letter-spacing: normal.
     Pulled from tracking-tight (-2px) → tracking-baggy (0) so the
     hero headlines on PricingPage / LegalPage / EnterprisePage /
     SolutionPage match Webflow. Larger displays (xl 64px, 2xl 84px)
     keep the -2px tightening. */
  --pb-display-l-tracking:  var(--pb-tracking-baggy);

  /* Display/xl: 64px, lh 64px, tracking -2px */
  --pb-display-xl-size:     var(--pb-font-size-7xl);
  --pb-display-xl-lh:       var(--pb-lh-7xl);
  --pb-display-xl-tracking: var(--pb-tracking-tight);

  /* Display/2xl: 88px, lh 84px, tracking -2px */
  --pb-display-2xl-size:    var(--pb-font-size-8xl);
  --pb-display-2xl-lh:      var(--pb-lh-8xl);
  --pb-display-2xl-tracking: var(--pb-tracking-tight);

  /* Heading (Inter, weight 600/Semi Bold, tracking 0) */
  /* Heading/m:  14px, lh 20px */
  /* Heading/l:  16px, lh 24px */
  /* Heading/xl: 18px, lh 24px */
  /* Heading/2xl: 24px, lh 32px */

  /* Body (Inter, tracking 0) */
  /* Body/xs:  11px, lh 14px, w400/500 */
  /* Body/s:   12px, lh 16px, w400/500 */
  /* Body/m:   14px, lh 20px, w400/500 */
  /* Body/l:   16px, lh 24px, w400/500 */
  /* Body/xl:  18px, lh 24px, w400/500 */
  /* Body/2xl: 24px, lh 32px, w400/500 */

  /* Semantic aliases for components */
  --pb-text-display:   var(--pb-font-size-3xl);  /* 32px default — override with display composites */
  --pb-text-h1:        var(--pb-font-size-3xl);  /* 32px */
  --pb-text-h2:        var(--pb-font-size-2xl);  /* 24px — Heading/2xl */
  --pb-text-h3:        var(--pb-font-size-xl);   /* 18px — Heading/xl */
  --pb-text-h4:        var(--pb-font-size-l);    /* 16px — Heading/l */
  --pb-text-body-lg:   var(--pb-font-size-xl);   /* 18px — Body/xl */
  --pb-text-body:      var(--pb-font-size-l);    /* 16px — Body/l */
  --pb-text-body-sm:   var(--pb-font-size-m);    /* 14px — Body/m */
  --pb-text-caption:   var(--pb-font-size-s);    /* 12px — Body/s */
  --pb-text-overline:  var(--pb-font-size-xs);   /* 11px — Body/xs */

  /* Short aliases — component convenience */
  --pb-text-xs:  var(--pb-font-size-xs);
  --pb-text-s:   var(--pb-font-size-s);
  --pb-text-m:   var(--pb-font-size-m);
  --pb-text-l:   var(--pb-font-size-l);
  --pb-text-xl:  var(--pb-font-size-xl);
  --pb-text-2xl: var(--pb-font-size-2xl);
  --pb-text-3xl: var(--pb-font-size-3xl);
  --pb-text-4xl: var(--pb-font-size-4xl);

  --pb-leading-xs:  var(--pb-lh-xs);
  --pb-leading-s:   var(--pb-lh-s);
  --pb-leading-m:   var(--pb-lh-m);
  --pb-leading-l:   var(--pb-lh-l);
  --pb-leading-xl:  var(--pb-lh-xl);
  --pb-leading-2xl: var(--pb-lh-2xl);
  --pb-leading-3xl: var(--pb-lh-3xl);

  /* ─────────────────────────────────────────────────────────
     EFFECTS — Shadows & Blur (exact values from Effects.json)
  ───────────────────────────────────────────────────────── */

  --pb-shadow-s:    0 4px 16px 0 rgba(0, 0, 0, 0.08);   /* Shadow/S */
  --pb-shadow-m:    0 4px 16px 0 rgba(0, 0, 0, 0.16);   /* Shadow/M */
  --pb-shadow-l:    0 4px 16px 0 rgba(0, 0, 0, 0.24);   /* Shadow/L */
  --pb-shadow-scroll: 0 -4px 16px 0 rgba(0, 0, 0, 0.08); /* Scroll indicator */

  --pb-blur-soft:   blur(24px);   /* Blur/Soft — use with backdrop-filter */
  --pb-blur-heavy:  blur(64px);   /* Blur/Heavy */

  /* PixelBin web card shadow — purple-tinted layered (from Pricing page designs) */
  --pb-shadow-card:
    0 0 0 1px rgba(60, 42, 152, 0.024),
    0 1px 1px -0.5px rgba(60, 42, 152, 0.02),
    0 3px 3px -1.5px rgba(60, 42, 152, 0.04),
    0 6px 6px -3px rgba(60, 42, 152, 0.04),
    0 12px 12px -6px rgba(60, 42, 152, 0.04),
    0 24px 32px -12px rgba(60, 42, 152, 0.04);

  /* Semantic shadow aliases */
  --pb-shadow-sm:   var(--pb-shadow-s);
  --pb-shadow-md:   var(--pb-shadow-m);
  --pb-shadow-lg:   var(--pb-shadow-l);

  /* ─────────────────────────────────────────────────────────
     TRANSITIONS (not in Novus — project utility)
  ───────────────────────────────────────────────────────── */

  --pb-transition-fast:   150ms ease;
  --pb-transition-base:   250ms ease;
  --pb-transition-slow:   400ms ease;
  --pb-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────────────────── */

  /* Container: 1160px max content, 24px mobile padding, 40px tablet padding */
  --pb-max-width:       1160px;
  --pb-content-padding: var(--pb-space-24);  /* Mobile: 24px → 342px content on 390px screen */

  /* ─────────────────────────────────────────────────────────
     PAGE CONTAINER SPEC — ds-v2 pages only (not mitsuki legacy)

     Content ceiling 1160px with 20px horizontal padding on desktop
     (14px on mobile). max-width = 1200 = 1160 content + 2×20 padding,
     since DSProvider sets box-sizing: border-box.

     Use via:  <PageContainer> in layout/, or reference these tokens
     directly (e.g. .footer__container reads them for alignment).
  ───────────────────────────────────────────────────────── */
  --pb-container-max-width: 1200px;   /* 1160 content + 40 padding total */
  --pb-container-content-width: 1160px;
  --pb-container-padding-x: 20px;     /* Desktop: 20px each side */

  /* ═════════════════════════════════════════════════════════════════════
     AUDIT ADDITIONS — 2026-04-18
     Novus-gap tokens surfaced by the atom QA sweep (32 atoms audited).
     Every value below fills a concrete gap observed in at least one
     atom. All additive — no existing token values changed.
     See WORKFLOW.md + each atom QA.md for the origin per token.
  ═════════════════════════════════════════════════════════════════════ */

  /* --- Dimension ladder infill --------------------------------------- */
  --pb-dim-10:   0.625rem;    /* 10px — Accordion gap, TrendingCard gap */
  --pb-dim-14:   0.875rem;    /* 14px — check icon (PricingCard, PayAsYouGoCard) */
  --pb-dim-22:   1.375rem;    /* 22px — logo image height (Logo, AppDownload) */
  --pb-dim-56:   3.5rem;      /* 56px — NavToolItem / NavDevItem icon box */

  /* --- Space aliases --------------------------------------------------- */
  --pb-space-6:  var(--pb-dim-6);   /* 6px — RadioMenu padding, Pricing micro-gap */
  --pb-space-10: var(--pb-dim-10);  /* 10px — Accordion, TrendingCard */

  /* --- Grey fill infill ------------------------------------------------ */
  --pb-color-grey-35:          #EBEBEB;   /* EditorCard arrow chip, SuiteCard arrow bg */
  --pb-color-grey-50:          #737373;   /* True middle grey — closest to Figma "#888" */
  --pb-color-grey-placeholder: #ECECEC;   /* Image placeholder (FeatureCard, TrendingCard) */

  /* --- Alpha overlay scales ------------------------------------------- */
  /* White — glass/frost surfaces on dark or image backdrops */
  --pb-color-alpha-white-25: rgba(255, 255, 255, 0.24);  /* Novus aligned 2026-04-19 — was 0.25 */
  --pb-color-alpha-white-35: rgba(255, 255, 255, 0.35);  /* SuiteCard CTA pill */
  --pb-color-alpha-white-50: rgba(255, 255, 255, 0.48);  /* Novus aligned 2026-04-19 — was 0.50 */

  /* Black — shadows, scrims, dropdown dim backgrounds */
  --pb-color-alpha-black-8:  rgba(0, 0, 0, 0.08);  /* Navbar dropdown shadow */
  --pb-color-alpha-black-40: rgba(0, 0, 0, 0.40);  /* ImageCarousel slide-tag scrim (#00000066) */
  --pb-color-alpha-black-60: rgba(0, 0, 0, 0.60);  /* TrendingCard scrim mid */
  --pb-color-alpha-black-70: rgba(0, 0, 0, 0.70);  /* Standard modal scrim */
  --pb-color-alpha-black-80: rgba(0, 0, 0, 0.80);  /* Deep bottom scrim */

  /* --- Opacity decorator values --------------------------------------- */
  --pb-opacity-50: 0.5;   /* Disabled / subtle states */
  --pb-opacity-60: 0.6;
  --pb-opacity-80: 0.8;

  /* --- Scrim presets --------------------------------------------------- */
  /* Bottom-fade scrim used on media cards (CreationsCard, FeatureCard, */
  /* SuiteCard, TrendingCard, nav promo cards). Keep as single gradient */
  /* token so mid/end stops are centrally tunable. */
  --pb-scrim-bottom: linear-gradient(
    180deg,
    transparent 0%,
    var(--pb-color-alpha-black-60) 61%,
    var(--pb-color-alpha-black-80) 100%
  );

  /* --- Brand fidelity -------------------------------------------------- */
  /* Logo SVG + AppDownload Google Play/App Store marks use a fixed */
  /* trademark purple that does NOT follow theme remapping. Keep as */
  /* brand-literal, not semantic. */
  --pb-brand-logo-purple: #8154FC;

  /* --- Typography infill ----------------------------------------------- */
  --pb-font-size-3-5xl: 2.25rem;    /* 36px — PricingCard price display */
  --pb-text-3-5xl:      var(--pb-font-size-3-5xl);   /* Convenience alias */
  --pb-text-price-display: var(--pb-font-size-3-5xl); /* Semantic alias for price */

  /* Middle-grey semantic text — for captions under "subdued-2" polarity */
  --pb-text-subdued-3: var(--pb-color-grey-50);  /* #737373 — "Figma #888" replacement */

  /* --- Blur ladder infill --------------------------------------------- */
  --pb-blur-xs:    blur(5px);    /* Tabs frost backdrop (pixelbin.io/pricing) */
  --pb-blur-sm:    blur(12px);   /* SuiteCard CTA backdrop */
  --pb-blur-md:    blur(30px);   /* SuiteCard / ImageCarousel dialog backdrop */

  /* --- Motion ---------------------------------------------------------- */
  --pb-transition-medium: 300ms ease;   /* Between base (250ms) and slow (400ms) */

  /* --- Brand gradients ------------------------------------------------- */
  /* Brand-hover 5-stop gradient — SuiteCard border glow.
     Mid stops (#9C73FF, #A1ADFC, #4CCDFC) are Novus-gap brand literals;
     isolating them inside one token keeps the gap in a single place. */
  --pb-gradient-suite-border: linear-gradient(
      90deg,
      var(--pb-purple-50) 0%,
      #9C73FF 25%,
      #A1ADFC 50%,
      #4CCDFC 75%,
      var(--pb-purple-30) 100%
  );

  /* --- Shadows (component-specific additions) -------------------------- */
  /* Prompt-input dual-layer purple-tinted shadow — legacy production CSS
     (pre-Novus) on pixelbin.io. Depth and offset exceed --pb-shadow-l;
     tint is a dark purple (rgba(21,0,31,…)) instead of neutral black.
     Isolated here so the literal lives in one place. QA.md #13. */
  --pb-shadow-prompt:
    2px 26px 57px 0 rgba(21, 0, 31, 0.19),
    8px 104px 60px 0 rgba(21, 0, 31, 0.14);

  /* ═════════════════════════════════════════════════════════════════════
     END AUDIT ADDITIONS
  ═════════════════════════════════════════════════════════════════════ */

  /* ═════════════════════════════════════════════════════════════════════
     NOVUS-REFERENCE AUDIT ADDITIONS — 2026-04-19
     Tokens the Figma Novus reference defines that we didn't have.
     All use --pb-* naming per project convention. Phoenix theme.
     Source: tokens/novus-reference.css — passive additions, no atoms
     touched. DRIFT items (existing tokens with different values) are NOT
     auto-fixed; see NOVUS-AUDIT-2026-04-19.md for the review list.
  ═════════════════════════════════════════════════════════════════════ */

  /* --- Grey scale infill (Novus has 16 shades; we had 8 stepped) ------- */
  /* Shades with no existing --pb-* counterpart. Names mirror our
     10-step convention so new shades slot between existing steps. */
  --pb-color-grey-45:  #D4D4D4;   /* Novus grey-6  — between our -40 and -60 */
  --pb-color-grey-65:  #A3A3A3;   /* Novus grey-8  — between our -60 and -50 */
  --pb-color-grey-55:  #8A8A8A;   /* Novus grey-9  — between our -50 and -60 */
  --pb-color-grey-75:  #454545;   /* Novus grey-12 — between our -70-inv and -80-inv */
  --pb-color-grey-85:  #333333;   /* Novus grey-13 — between our -80-inv and -90-inv */
  --pb-color-grey-110: #0D0D0D;   /* Novus grey-16 — darker than our -100 (#141414) */

  /* --- Alpha white full ladder (Novus has 16 steps; we had 3) ---------- */
  --pb-color-alpha-white-2:  rgba(255, 255, 255, 0.02);  /* Novus alpha-white-1 */
  --pb-color-alpha-white-4:  rgba(255, 255, 255, 0.04);  /* Novus alpha-white-2 */
  --pb-color-alpha-white-6:  rgba(255, 255, 255, 0.06);  /* Novus alpha-white-3 */
  --pb-color-alpha-white-8:  rgba(255, 255, 255, 0.08);  /* Novus alpha-white-4 */
  --pb-color-alpha-white-12: rgba(255, 255, 255, 0.12);  /* Novus alpha-white-5 */
  --pb-color-alpha-white-16: rgba(255, 255, 255, 0.16);  /* Novus alpha-white-6 */
  --pb-color-alpha-white-24: rgba(255, 255, 255, 0.24);  /* Novus alpha-white-7 */
  --pb-color-alpha-white-32: rgba(255, 255, 255, 0.32);  /* Novus alpha-white-8 */
  --pb-color-alpha-white-40: rgba(255, 255, 255, 0.40);  /* Novus alpha-white-9 */
  --pb-color-alpha-white-48: rgba(255, 255, 255, 0.48);  /* Novus alpha-white-10 */
  --pb-color-alpha-white-56: rgba(255, 255, 255, 0.56);  /* Novus alpha-white-11 */
  --pb-color-alpha-white-64: rgba(255, 255, 255, 0.64);  /* Novus alpha-white-12 */
  --pb-color-alpha-white-72: rgba(255, 255, 255, 0.72);  /* Novus alpha-white-13 */
  --pb-color-alpha-white-80: rgba(255, 255, 255, 0.80);  /* Novus alpha-white-14 */
  --pb-color-alpha-white-88: rgba(255, 255, 255, 0.88);  /* Novus alpha-white-15 */
  --pb-color-alpha-white-96: rgba(255, 255, 255, 0.96);  /* Novus alpha-white-16 */

  /* --- Alpha black full ladder (Novus has 16 steps; we had 5) ---------- */
  --pb-color-alpha-black-2:  rgba(0, 0, 0, 0.02);  /* Novus alpha-black-1 */
  --pb-color-alpha-black-4:  rgba(0, 0, 0, 0.04);  /* Novus alpha-black-2 */
  --pb-color-alpha-black-6:  rgba(0, 0, 0, 0.06);  /* Novus alpha-black-3 */
  --pb-color-alpha-black-12: rgba(0, 0, 0, 0.12);  /* Novus alpha-black-5 */
  --pb-color-alpha-black-16: rgba(0, 0, 0, 0.16);  /* Novus alpha-black-6 */
  --pb-color-alpha-black-24: rgba(0, 0, 0, 0.24);  /* Novus alpha-black-7 */
  --pb-color-alpha-black-32: rgba(0, 0, 0, 0.32);  /* Novus alpha-black-8 */
  --pb-color-alpha-black-48: rgba(0, 0, 0, 0.48);  /* Novus alpha-black-10 */
  --pb-color-alpha-black-56: rgba(0, 0, 0, 0.56);  /* Novus alpha-black-11 */
  --pb-color-alpha-black-64: rgba(0, 0, 0, 0.64);  /* Novus alpha-black-12 */
  --pb-color-alpha-black-72: rgba(0, 0, 0, 0.72);  /* Novus alpha-black-13 */
  --pb-color-alpha-black-88: rgba(0, 0, 0, 0.88);  /* Novus alpha-black-15 */
  --pb-color-alpha-black-96: rgba(0, 0, 0, 0.96);  /* Novus alpha-black-16 */

  /* --- Dimension ladder infill (Novus unit scale has sub-px + 999px) --- */
  --pb-dim-0-5: 0.03125rem;  /* 0.5px — Novus unit-1 (hairline rule) */
  --pb-dim-1-5: 0.09375rem;  /* 1.5px — Novus unit-3 (mid hairline) */
  --pb-dim-999: 999px;       /* Novus unit-17 — pill alt (our dim-full = 250px) */

  /* ═════════════════════════════════════════════════════════════════════
     END NOVUS-REFERENCE AUDIT ADDITIONS
  ═════════════════════════════════════════════════════════════════════ */
}

@media (min-width: 768px) {
  .ds-root {
    --pb-content-padding: var(--pb-space-40); /* Tablet: 40px → 664px content on 744px screen */
  }
}

@media (max-width: 640px) {
  .ds-root {
    --pb-container-padding-x: 14px; /* Mobile: 14px each side for ds-v2 pages */
  }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE TYPOGRAPHY — display scale on mobile
───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ds-root {
    --pb-text-display: var(--pb-font-size-2xl);  /* 24px on mobile */
    --pb-text-h1:      var(--pb-font-size-2xl);
    --pb-text-h2:      var(--pb-font-size-xl);   /* 18px */
  }
}

/* DSProvider styles. Rendered on the wrapper <div>.

   .ds-root is a HARD ISOLATION BOUNDARY: mitsuki's GlobalStyle applies
   element-level rules (body bg, button/a/img resets, etc.) that cascade
   into children. Since CSS Modules only scope class names (not element
   selectors), we re-assert safe defaults inside .ds-root so atom CSS can
   work from known ground.

   Rules below override:
     - mitsuki body background / color / font-family
     - mitsuki button { outline: 0; border: none; cursor: pointer }
     - mitsuki a { display: inline-flex; color: inherit; text-decoration: none }
     - mitsuki img { object-fit: contain }
     - mitsuki input { border: 1px solid transparent; outline: none }
   Atom .module.css files then override these further where needed via
   class-level specificity. */

.DSProvider-module__root___hOkzs {
    /* Surface + text — DS tokens only */
    background: var(--pb-surface-0);
    color: var(--pb-text-default);

    /* Typography baseline */
    font-family: var(--pb-font-sans);
    font-size: 1rem;
    line-height: 1.5;

    /* Layout baseline */
    box-sizing: border-box;
    display: block;
}

/* Box-sizing inheritance for every descendant */
.DSProvider-module__root___hOkzs *,
.DSProvider-module__root___hOkzs *::before,
.DSProvider-module__root___hOkzs *::after {
    box-sizing: inherit;
}

/* Reset mitsuki's global font-family override on form controls so atom
   typography tokens apply. UA default is "system-ui" which ignores
   our --pb-font-sans setting unless we force inheritance.

   Do NOT inherit color here — `.root button` has specificity (0,1,1)
   which would beat atom class rules like `.btn--primary` (0,1,0) and
   force every button to inherit `.root`'s text color regardless of the
   variant's intended color. Color is always declared explicitly per atom.
   (Removed `color: inherit` 2026-04-19 — was causing primary buttons to
   render with dark text instead of white.) */
.DSProvider-module__root___hOkzs button,
.DSProvider-module__root___hOkzs input,
.DSProvider-module__root___hOkzs textarea,
.DSProvider-module__root___hOkzs select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* mitsuki a { display: inline-flex; color: inherit; text-decoration: none }
   cascades in. Reset only color + text-decoration — do NOT reset display,
   because `.root a` (0,1,1) would beat atom class selectors like
   `.nav-tool-item` (0,1,0) and break flex layouts inside atoms.
   Mitsuki's `a { display: inline-flex }` has specificity (0,0,1) which
   atom class rules easily override. */
.DSProvider-module__root___hOkzs a {
    color: inherit;
    text-decoration: none;
}

/* mitsuki img { object-fit: contain } is aggressive. Atoms that show
   bitmap content want object-fit to be set per-atom; reset to default. */
.DSProvider-module__root___hOkzs img {
    object-fit: initial;
    max-width: 100%;
    height: auto;
}

/* mitsuki input has a transparent-border pattern that shows through in
   our atoms. Remove so atom input CSS starts clean. */
.DSProvider-module__root___hOkzs input[type="radio"] {
    /* mitsuki forces radio dimensions + accent-color globally. Unset so
       atom radio controls paint as designed. */
    width: auto;
    height: auto;
    accent-color: initial;
}

/* Reset default heading margins so atom section headings don't inherit
   browser defaults that atom CSS doesn't account for. Atom CSS that
   wants margins sets them explicitly. */
.DSProvider-module__root___hOkzs h1,
.DSProvider-module__root___hOkzs h2,
.DSProvider-module__root___hOkzs h3,
.DSProvider-module__root___hOkzs h4,
.DSProvider-module__root___hOkzs h5,
.DSProvider-module__root___hOkzs h6,
.DSProvider-module__root___hOkzs p,
.DSProvider-module__root___hOkzs ul,
.DSProvider-module__root___hOkzs ol,
.DSProvider-module__root___hOkzs li,
.DSProvider-module__root___hOkzs figure,
.DSProvider-module__root___hOkzs blockquote {
    margin: 0;
    padding: 0;
}

.DSProvider-module__root___hOkzs ul,
.DSProvider-module__root___hOkzs ol {
    list-style: none;
}

.Logo-module__logo___ECfef {
    display: flex;
    align-items: center;
    gap: var(--pb-space-8); /* Figma: 8px */
    /* Live `.nav_logo-link` renders the motif at 32×32 + wordmark at
       138×24, container height ~32px. Was 24px — too small vs live. */
    height: var(--pb-dim-32); /* 32px */
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.Logo-module__logo___ECfef:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* Motif — 24×24 viewBox rendered at 32×32 to match live `.nav_logo-motif`. */
.Logo-module__logo__icon___yB2xs {
    width: var(--pb-dim-32);  /* 32px */
    height: var(--pb-dim-32);
    flex-shrink: 0;
}

/* Wordmark — 150×26 viewBox rendered at 138×24 to match live
   `.nav_logo-text` (which displays the SVG narrower than its
   intrinsic width). 138px = 8.625rem; closest tokens jump to 144 or
   128, so a literal here keeps the bar layout pixel-aligned. */
.Logo-module__logo__wordmark___UajfW {
    width: 8.625rem;  /* 138px */
    height: 1.5rem;   /* 24px */
    flex-shrink: 0;
}

/* NavLink — top-level navbar links (Products / Resources / Pricing …).
   Aligned to live pixelbin.io `.nav_menu-link` + `.nav_dropdown-toggle`
   on desktop:
     - 16px (body/l-prominent), weight 500 medium
     - Dark text (inherits the bar's on-light palette)
     - Horizontal padding 8px (vertical handled by bar height)
     - Gap 4px between label and chevron */
.NavLink-module__nav-link___Li2c8 {
    display: inline-flex;
    align-items: center;
    gap: var(--pb-space-4);
    padding: var(--pb-space-8);
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);          /* 16px — was 14 (Figma desktop) */
    font-weight: var(--pb-weight-medium); /* 500 — was 400 */
    line-height: var(--pb-lh-l);          /* 24px */
    letter-spacing: var(--pb-tracking-baggy);
    color: var(--pb-text-default);        /* black — was subdued-1 */
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--pb-radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition:
        color var(--pb-transition-fast),
        background var(--pb-transition-fast);
}

/* With chevron: pr shrinks to 4px */
.NavLink-module__nav-link--dropdown___Z1UxR {
    padding-right: var(--pb-space-4);     /* Figma: pr 4px */
}

/* Hover */
.NavLink-module__nav-link___Li2c8:hover {
    color: var(--pb-text-default);
    background: var(--pb-surface-20);
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.NavLink-module__nav-link___Li2c8:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 1px;
}

/* Active / open state */
.NavLink-module__nav-link--active___eur_m,
.NavLink-module__nav-link___Li2c8[aria-expanded="true"] {
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
}

/* Chevron rotation when open */
/* Figma: 12px icon inside 20px container, p 4px, rounded-full */
.NavLink-module__nav-link__chevron___N556V {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;                       /* Figma: 20px */
    height: 1.25rem;
    padding: var(--pb-space-4);           /* Figma: 4px */
    border-radius: var(--pb-radius-full); /* Figma: 250px */
    transition: transform var(--pb-transition-fast);
}

.NavLink-module__nav-link___Li2c8[aria-expanded="true"] .NavLink-module__nav-link__chevron___N556V {
    transform: rotate(180deg);
}

.NavTab-module__nav-tab___rU4p6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Figma: tab stretches full sidebar width. width: 100% = "fill parent", not a fixed value. */
    width: 100%;
    padding: var(--pb-space-16);          /* Figma: 16px */
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);          /* Figma: 14px */
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    line-height: var(--pb-lh-m);          /* Figma: 20px */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
    background: none;
    border: none;
    border-radius: var(--pb-radius-lg) 0 0 var(--pb-radius-lg); /* Figma: 12px 0 0 12px */
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    /* 300ms to match live pixelbin.io dropdown hover motion (transition: all .3s). */
    transition: background var(--pb-transition-medium);
}

.NavTab-module__nav-tab___rU4p6:hover {
    background: rgba(255, 255, 255, 0.5); /* Figma: hover state */
}

.NavTab-module__nav-tab--active___QnkoS {
    background: var(--pb-surface-0);      /* Figma: selected = white */
}

.NavTab-module__nav-tab--active___QnkoS:hover {
    background: var(--pb-surface-0);
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.NavTab-module__nav-tab___rU4p6:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

.NavTab-module__nav-tab__arrow___V7O9I {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;                        /* Figma: 24px */
    height: 1.5rem;
    padding: var(--pb-space-4);           /* Figma: 4px */
    border-radius: var(--pb-radius-full); /* Figma: 999px */
}

/* Icon uses inline <svg> sizing via width/height attrs; no styles needed. */
.Icon-module__icon___WG32E {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

  .Button-module__btn___f0NXZ {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pb-space-4);
    font-family: var(--pb-font-sans);
    font-weight: var(--pb-weight-medium);
    border-radius: var(--pb-radius-button);     /* Novus: Button = 250px pill */
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--pb-transition-fast);
    /* Removed `line-height: 1` — DSProvider overrides this on <button>
       elements via `.root button { line-height: inherit }` (specificity
       0,1,1), so <button> rendered at 1.5 (root) while <a> rendered at 1
       — same atom, two different heights. We standardize to ~1.5 (matches
       live's button heights) and keep both anchor and button modes
       consistent. Override per size via `.btn.btn--<size>` if needed. */
  }

  .Button-module__btn___f0NXZ:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
  }

  .Button-module__btn___f0NXZ[disabled],
  .Button-module__btn___f0NXZ[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* --- Sizes (Novus Desktop type scale) ---
     No fixed height — size comes from padding + font-size + line-height.

     CHAINED `.btn.btn--<size>` (specificity 0,2,0) is REQUIRED to beat
     DSProvider's `.root button { font-size: inherit }` (specificity 0,1,1).
     Without this, `<Button>` rendered as `<button>` (no href) inherits the
     root font-size (16px) instead of the size token, so md buttons render
     as 16px instead of 14px on the catalog page. The same Button used as
     `<a>` (with href) on real pages renders correctly because the
     DSProvider override only targets <button>/<input>/<textarea>/<select>.
     Lesson: keep size definitions chained so anchor-mode and button-mode
     match. */
  .Button-module__btn___f0NXZ.Button-module__btn--sm___TKOpu {
    font-size: var(--pb-text-s);             /* Novus: 12px */
    padding: var(--pb-space-4) var(--pb-space-12);
  }
  .Button-module__btn___f0NXZ.Button-module__btn--md___uFBZV {
    font-size: var(--pb-text-m);             /* Novus: 14px */
    /* pixelbin.io parity: 10/24 padding yields 42px target height (was 8/20 → ~32px) */
    padding: var(--pb-space-10) var(--pb-space-24);
  }
  .Button-module__btn___f0NXZ.Button-module__btn--lg___qMg6U {
    font-size: var(--pb-text-l);             /* Novus: 16px */
    padding: var(--pb-space-8) var(--pb-space-24);
  }
  .Button-module__btn___f0NXZ.Button-module__btn--xl___wYoT8 {
    font-size: var(--pb-text-xl);            /* Novus: 18px */
    padding: var(--pb-space-12) var(--pb-space-40);
  }

  /* --- Variants --- */
  /* Anchor-form parity: mitsuki global styles override <a> color, so we pin
     color explicitly and make .btn__text inherit with currentColor. */
  .Button-module__btn--primary___msjpg,
  a.Button-module__btn--primary___msjpg {
    background: var(--pb-color-primary);     /* Novus Primary/50 #3535f3 */
    color: var(--pb-color-white);            /* Explicit to survive global <a> cascade */
    border-color: transparent;
    box-shadow: var(--pb-shadow-sm);
  }
  .Button-module__btn--primary___msjpg:hover,
  a.Button-module__btn--primary___msjpg:hover {
    background: var(--pb-color-primary-60);  /* Novus Primary/60 */
    box-shadow: var(--pb-shadow-md);
    color: var(--pb-color-white);
  }
  .Button-module__btn--primary___msjpg:active {
    background: var(--pb-color-primary-60);
    box-shadow: none;
    color: var(--pb-color-white);
  }
  .Button-module__btn--primary___msjpg .Button-module__btn__text___Pw9Iu {
    color: currentColor;                     /* Defeat global <a> span color leak */
  }

  .Button-module__btn--secondary___jCmQf,
  a.Button-module__btn--secondary___jCmQf {
    /* pixelbin.io "Sign in" ghost look: transparent bg, purple text + border */
    background: transparent;
    color: var(--pb-color-primary);
    border-color: var(--pb-color-primary);
  }
  .Button-module__btn--secondary___jCmQf:hover,
  a.Button-module__btn--secondary___jCmQf:hover {
    background: var(--pb-color-primary-10);  /* Novus Primary/10 — light purple tint */
    color: var(--pb-color-primary);
  }
  .Button-module__btn--secondary___jCmQf .Button-module__btn__text___Pw9Iu {
    color: currentColor;
  }

  .Button-module__btn--ghost___s5QDr {
    background: transparent;
    color: var(--pb-text-default);
    border-color: var(--pb-color-grey-40);
  }
  .Button-module__btn--ghost___s5QDr:hover {
    background: var(--pb-surface-10);
    border-color: var(--pb-color-grey-60);
  }

  .Button-module__btn--link___3MY_C {
    background: transparent;
    color: var(--pb-color-primary);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
  .Button-module__btn--link___3MY_C:hover {
    color: var(--pb-color-primary-60);
    text-decoration: underline;
  }

  /* --- Gradient variant (production: hero CTA) ---
     Gradient bg image, shimmer on hover, lift + shadow.

     Anchor-form parity selector `a.btn--gradient` (specificity 0,1,1) is
     REQUIRED to beat DSProvider's `.root a { color: inherit }` (0,1,1)
     when this Button is rendered as <a> (with href). Without it, the
     gradient pill inherits dark text from root and becomes unreadable.
     Same pattern as `.btn--primary` / `.btn--secondary` above. */
  .Button-module__btn--gradient___caKJ5,
  a.Button-module__btn--gradient___caKJ5 {
    background: url('https://cdn.prod.website-files.com/673193e0642e6ad25696fcd4/68d0e416e6d195deee2c5160_button_gradientbackgroundcolor.png');
    background-size: cover;
    background-position: center;
    color: var(--pb-color-white);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(105, 51, 250, 0.3);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transition:
      background-position 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .Button-module__btn--gradient___caKJ5 .Button-module__btn__text___Pw9Iu,
  a.Button-module__btn--gradient___caKJ5 .Button-module__btn__text___Pw9Iu {
    color: currentColor;                     /* defeat global <a> span color */
  }
  .Button-module__btn--gradient___caKJ5:hover {
    background-position: left 40%;
    box-shadow: 0 8px 24px rgba(105, 51, 250, 0.5);
    transform: translateY(-2px);
  }

  .Button-module__btn__text___Pw9Iu {
    position: relative;
    z-index: 1;
  }

  .Button-module__btn__shimmer___cGwxg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    pointer-events: none;
  }
  .Button-module__btn--gradient___caKJ5:hover .Button-module__btn__shimmer___cGwxg {
    animation: Button-module__btn-shimmer___IpFEv 1.5s ease-in-out infinite;
  }

  @keyframes Button-module__btn-shimmer___IpFEv {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

.AppDownload-module__app-download___t9qEX {
    display: flex;
    align-items: center;
    gap: var(--pb-space-8);               /* Figma: 8px */
    height: 2.5rem;                       /* Figma: 40px */
}

/* Wrapper that owns the hover dropdown — lets the card stay anchored to
   the icon while we keep the existing flex/gap layout intact. */
.AppDownload-module__app-download__item___svdtH {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.AppDownload-module__app-download__link___fYMXP {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;                        /* Figma: 40px */
    height: 100%;
    padding: var(--pb-space-12);          /* Figma: 12px */
    border-radius: var(--pb-radius-md);   /* Figma: 8px */
    transition: background var(--pb-transition-fast);
}

.AppDownload-module__app-download__link___fYMXP:hover {
    background: var(--pb-surface-20);
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.AppDownload-module__app-download__link___fYMXP:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

.AppDownload-module__app-download__link___fYMXP svg {
    width: 1.5rem;                        /* Figma: 24px */
    height: 1.5rem;
    flex-shrink: 0;
}

/* ── Hover dropdown card (QR + Visit link) ─────────────────────────
   Mirrors live pixelbin.io's `.nav_dropdown-list-container.is-app-con`.
   Hidden by default; revealed on hover or focus-within of the wrapper.
   The padding-top gap on the card lets the cursor cross from icon to
   card without flickering through a non-hover region. */
.AppDownload-module__app-download__dropdown___o6Neb {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    /* Live: 276px card. Pinned literal so it doesn't drift with token
       rounding. The QR (244) + 16×2 padding = 276 exactly. */
    width: 17.25rem;                      /* 276px — matches live */
    padding: var(--pb-space-16);          /* 16px — matches live */
    margin-top: var(--pb-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pb-space-4);               /* 4px — matches live inner gap */
    background: var(--pb-surface-0);
    border-radius: var(--pb-radius-16);   /* 16px — matches live */
    box-shadow: var(--pb-shadow-card);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--pb-transition-fast) ease,
        transform var(--pb-transition-fast) ease,
        visibility 0s linear var(--pb-transition-fast);
    z-index: 50;
}

.AppDownload-module__app-download__item___svdtH:hover .AppDownload-module__app-download__dropdown___o6Neb,
.AppDownload-module__app-download__item___svdtH:focus-within .AppDownload-module__app-download__dropdown___o6Neb {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity var(--pb-transition-fast) ease,
        transform var(--pb-transition-fast) ease,
        visibility 0s linear 0s;
}

/* Live: 244px wide, height auto preserves the source image aspect (the
   live QR file isn't perfectly square so a fixed height crops it). */
.AppDownload-module__app-download__qr___VY43o {
    width: 15.25rem;                      /* 244px — matches live */
    height: auto;
    display: block;
    border-radius: var(--pb-radius-8);
    object-fit: contain;
    background: var(--pb-color-white, #fff);
}

/* Live link: padding 16px 22px, 14px / 500, color rgba(0,0,0,0.65),
   gap 12px between label and arrow icon. The link spans the inner
   wrapper width and centres its content. */
.AppDownload-module__app-download__cta___Z1mrf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--pb-space-12);              /* 12px — matches live */
    padding: var(--pb-space-16) 1.375rem; /* 16px 22px — matches live */
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);          /* 14px */
    font-weight: var(--pb-weight-medium); /* 500 */
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.65);           /* matches live */
    text-decoration: none;
    white-space: nowrap;
}

.AppDownload-module__app-download__cta___Z1mrf:hover {
    color: var(--pb-color-primary, #6933fa);
}

/* Live: filled circle 32×32 (white bg, dark arrow). We mimic with a
   small filled square; close enough for the visual without baking a
   second SVG asset. */
.AppDownload-module__app-download__cta___Z1mrf svg {
    width: 1rem;                          /* 16px */
    height: 1rem;
    flex-shrink: 0;
}

/* Mobile: the navbar hides the AppDownload row in the burger menu, but
   if it ever renders on a small viewport we keep the dropdown anchored
   so it doesn't overflow the layout. */
@media (max-width: 767px) {
    .AppDownload-module__app-download__dropdown___o6Neb {
        left: auto;
        right: 0;
        transform: translateY(8px);
    }

    .AppDownload-module__app-download__item___svdtH:hover .AppDownload-module__app-download__dropdown___o6Neb,
    .AppDownload-module__app-download__item___svdtH:focus-within .AppDownload-module__app-download__dropdown___o6Neb {
        transform: translateY(0);
    }
}

.PhoneLink-module__phone-link___RiLAR {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: var(--pb-space-12);   /* Figma: px 12px */
  text-decoration: none;
}

.PhoneLink-module__phone-link__inner___WV65P {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-4);               /* Figma: 4px */
  height: 2.5rem;                       /* Figma: 40px */
  padding-block: var(--pb-space-8);     /* Figma: py 8px */
  border-radius: var(--pb-radius-full); /* Figma: 999px */
  transition: opacity var(--pb-transition-fast);
}

.PhoneLink-module__phone-link___RiLAR:hover .PhoneLink-module__phone-link__inner___WV65P {
  opacity: 0.8;
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.PhoneLink-module__phone-link___RiLAR:focus-visible .PhoneLink-module__phone-link__inner___WV65P {
  box-shadow: 0 0 0 2px var(--pb-color-primary-20);
}

.PhoneLink-module__phone-link__content___DZuau {
  display: flex;
  align-items: center;
  gap: var(--pb-space-4);               /* Figma: 4px */
  color: var(--pb-color-primary);       /* Figma: #6933fa */
}

.PhoneLink-module__phone-link__number___tt6vW {
  font-family: var(--pb-font-sans);
  font-size: var(--pb-text-m);          /* Figma: 14px */
  font-weight: var(--pb-weight-medium); /* Figma: 500 */
  line-height: var(--pb-lh-m);          /* Figma: 20px */
  color: var(--pb-color-primary);       /* Figma: #6933fa */
  white-space: nowrap;
}

.PhoneLink-module__phone-link__chevron___XDXD1 {
  display: flex;
  align-items: center;
  color: var(--pb-color-primary);
}

.NavCtaBanner-module__nav-cta-banner___Ey6DC {
    display: flex;
    align-items: center;
    gap: var(--pb-space-12);              /* Figma: 12px */
    padding: var(--pb-space-16);          /* Figma: 16px */
    background: var(--pb-surface-10);     /* Figma: #fafafa */
    border-radius: var(--pb-radius-lg);   /* Figma: 12px */
    text-decoration: none;
    width: 100%;
    /* 300ms to match live pixelbin.io dropdown items (transition: all .3s). */
    transition: background var(--pb-transition-medium);
}

.NavCtaBanner-module__nav-cta-banner___Ey6DC:hover {
    background: var(--pb-surface-20);
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.NavCtaBanner-module__nav-cta-banner___Ey6DC:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

.NavCtaBanner-module__nav-cta-banner__text___uQLim {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);               /* Figma: 4px */
}

.NavCtaBanner-module__nav-cta-banner__title___afKM1 {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);          /* Figma: 14px */
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    line-height: var(--pb-lh-m);          /* Figma: 20px */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
}

.NavCtaBanner-module__nav-cta-banner__desc___vD147 {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);          /* Figma: 12px */
    font-weight: var(--pb-weight-regular); /* Figma: 400 */
    line-height: var(--pb-lh-s);          /* Figma: 16px */
    color: var(--pb-text-subdued-2);      /* Figma: #888 */
}

.NavCtaBanner-module__nav-cta-banner__arrow___GuTVt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;                          /* Figma: 32px */
    height: 2rem;
    flex-shrink: 0;
    background: var(--pb-surface-0);      /* Figma: white */
    border-radius: var(--pb-radius-full); /* Figma: 1000px */
    color: var(--pb-text-default);
    /* Live CTA arrow (.drodown-bottom-card) fills brand purple on hover. */
    transition:
        background var(--pb-transition-medium),
        color var(--pb-transition-medium);
}

/* Hover: arrow circle fills brand purple, glyph turns white — matches live
   pixelbin.io across the Create / Enterprise / Developer dropdown CTAs. */
.NavCtaBanner-module__nav-cta-banner___Ey6DC:hover .NavCtaBanner-module__nav-cta-banner__arrow___GuTVt {
    background: var(--pb-color-primary);
    color: var(--pb-surface-0);
}

/* Figma: outer container gap 12px between icon and text group */
.NavSeeAll-module__nav-see-all___sChFs {
  display: flex;
  align-items: center;
  gap: var(--pb-space-12);              /* Figma: 12px (container level) */
  padding-left: var(--pb-space-8);      /* Figma: pl 8px */
  padding-right: var(--pb-space-12);    /* Figma: pr 12px */
  padding-top: var(--pb-space-8);       /* Figma: py 8px */
  padding-bottom: var(--pb-space-8);
  background: var(--pb-surface-0);      /* Figma: white */
  border-radius: var(--pb-radius-lg);   /* Figma: 12px */
  text-decoration: none;
  width: 100%;
  /* 300ms to match live pixelbin.io dropdown items (transition: all .3s). */
  transition: background var(--pb-transition-medium);
}

.NavSeeAll-module__nav-see-all___sChFs:hover {
  background: var(--pb-surface-10);     /* Figma: hover = fafafa */
}

/* Live pixelbin.io turns the icon box purple on row hover (Webflow IX2). */
.NavSeeAll-module__nav-see-all___sChFs:hover .NavSeeAll-module__nav-see-all__icon___oTHVR {
  background: var(--pb-purple-20);      /* #F3E8FF */
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.NavSeeAll-module__nav-see-all___sChFs:focus-visible {
  outline: 2px solid var(--pb-color-primary-20);
  outline-offset: 2px;
}

.NavSeeAll-module__nav-see-all__icon___oTHVR {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;                        /* Figma: 56px */
  height: 3.5rem;
  flex-shrink: 0;
  background: var(--pb-surface-10);     /* Figma: #fafafa */
  border-radius: var(--pb-radius-md);   /* Figma: 8px */
  color: var(--pb-color-primary);       /* Figma: #6933fa */
  /* Animate the purple fill on row hover (see .nav-see-all:hover rule). */
  transition: background var(--pb-transition-medium);
}

/* Figma: inner text group gap 8px between label + arrow */
.NavSeeAll-module__nav-see-all__text___Iqwwx {
  display: flex;
  align-items: center;
  gap: var(--pb-space-8);               /* Figma: 8px (inner level) */
  flex-shrink: 0;
}

.NavSeeAll-module__nav-see-all__label___viXaZ {
  font-family: var(--pb-font-sans);
  font-size: var(--pb-text-m);          /* Figma: 14px */
  font-weight: var(--pb-weight-medium); /* Figma: 500 */
  line-height: var(--pb-lh-m);          /* Figma: 20px */
  color: var(--pb-color-primary);       /* Figma: #6933fa */
  white-space: nowrap;
}

.NavSeeAll-module__nav-see-all__arrow___K9JVo {
  display: flex;
  color: var(--pb-color-primary);
}

/* Figma: Dev variant — no icon, pl 8px, pr 12px, py 8px, rounded 12px */
.NavDevItem-module__nav-dev-item___r4Q_k {
    display: flex;
    align-items: center;
    gap: var(--pb-space-12);              /* Figma: 12px */
    padding-left: var(--pb-space-8);      /* Figma: pl 8px */
    padding-right: var(--pb-space-12);    /* Figma: pr 12px */
    padding-top: var(--pb-space-8);       /* Figma: py 8px */
    padding-bottom: var(--pb-space-8);
    background: var(--pb-surface-0);      /* Figma: white */
    border-radius: var(--pb-radius-lg);   /* Figma: 12px */
    text-decoration: none;
    /* 300ms to match live pixelbin.io dropdown items (transition: all .3s). */
    transition: background var(--pb-transition-medium);
}

.NavDevItem-module__nav-dev-item___r4Q_k:hover {
    background: var(--pb-surface-10);     /* Figma: hover = fafafa */
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.NavDevItem-module__nav-dev-item___r4Q_k:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

.NavDevItem-module__nav-dev-item__icon___UtwvA {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match live .uui-navbar02_icon-wrapper (56px box, #fafafa) used by the
       homepage developer items — was a 32px boxless glyph. */
    width: 3.5rem;                        /* 56px */
    height: 3.5rem;
    flex-shrink: 0;
    background: var(--pb-surface-10);     /* #fafafa base box */
    border-radius: var(--pb-radius-md);   /* 8px */
    overflow: hidden;
    transition: background var(--pb-transition-medium);
}

.NavDevItem-module__nav-dev-item___r4Q_k:hover .NavDevItem-module__nav-dev-item__icon___UtwvA {
    background: var(--pb-purple-20);
}

.NavDevItem-module__nav-dev-item__icon___UtwvA img {
    width: 1.5rem; /* 24px — icon inside the 56px box (matches NavToolItem) */
    height: 1.5rem;
}

.NavDevItem-module__nav-dev-item__text___JHY9V {
    display: flex;
    flex-direction: column;
    gap: 2px;                             /* Figma: gap 2px */
    flex: 1;
    min-width: 0;
}

.NavDevItem-module__nav-dev-item__title___H5Z8b {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);          /* Figma: 12px */
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    line-height: var(--pb-lh-s);          /* Figma: 16px */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
}

.NavDevItem-module__nav-dev-item__desc___KNRlW {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-xs);    /* Figma: 11px */
    font-weight: var(--pb-weight-regular); /* Figma: 400 */
    line-height: var(--pb-lh-xs);         /* Figma: 14px */
    color: var(--pb-text-subdued-2);      /* Figma: #888 */
}

  .EditorCard-module__editor-card___vFhxp {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;                        /* Figma: 10px — no exact token */
    /* No fixed width/height — card fills parent flex container */
    flex: 1;
    min-width: 0;
    padding: var(--pb-space-8);           /* Figma: 8px */
    border-radius: var(--pb-radius-lg);   /* Figma: 12px */
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(180deg, var(--pb-surface-10) 0%, var(--pb-purple-10) 100%);
    /* Match live pixelbin.io .dropdown-single-card: the hover deepens the
       gradient (it has no transition / box-shadow). Kept on `background` so
       any future solid-color variant still eases. */
    transition: background var(--pb-transition-medium);
  }

  .EditorCard-module__editor-card___vFhxp:hover {
    /* Live .dropdown-single-card:hover deepens the bottom gradient stop
       (#f7f5fc → #f2edff). purple-20 (#F3E8FF) is the ds-v2 equivalent.
       Live shows NO box-shadow on hover, so we deepen the gradient instead. */
    background: linear-gradient(
        180deg,
        var(--pb-surface-10) 0%,
        var(--pb-purple-20) 100%
    );
  }

  /* A11y — keyboard focus indicator (2026-04-18 audit) */
  .EditorCard-module__editor-card___vFhxp:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
  }

  .EditorCard-module__editor-card__header___VCko1 {
    display: flex;
    gap: var(--pb-space-12);              /* Figma: 12px */
    align-items: flex-start;
    padding-right: var(--pb-space-4);     /* Figma: pr 4px */
    padding-top: var(--pb-space-4);       /* Figma: pt 4px */
    flex-shrink: 0;
    width: 100%;
  }

  .EditorCard-module__editor-card__info___fdncn {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);               /* Figma: 4px */
    padding-left: var(--pb-space-4);      /* Figma: px 4px */
    min-width: 0;
  }

  .EditorCard-module__editor-card__title___WjChE {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);          /* Figma: 14px */
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    line-height: var(--pb-lh-m);          /* Figma: 20px */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
    white-space: nowrap;
  }

  .EditorCard-module__editor-card__desc___LBOaE {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);          /* Figma: 12px */
    font-weight: var(--pb-weight-regular); /* Figma: 400 */
    line-height: var(--pb-lh-s);          /* Figma: 16px */
    color: var(--pb-text-body-web);       /* Figma: #6e6d74 */
  }

  .EditorCard-module__editor-card__arrow___zFiuC {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;                        /* Figma: 24px */
    height: 1.5rem;
    flex-shrink: 0;
    background: var(--pb-color-grey-40);  /* Figma: #ebebeb → closest token #E0E0E0 */
    border-radius: var(--pb-radius-full); /* Figma: 750px */
    color: var(--pb-text-default);
    /* Live card arrow (.drodown-bottom-card) fills with brand purple on
       hover via Webflow IX2 — animate the fill + glyph color to match. */
    transition:
        background var(--pb-transition-medium),
        color var(--pb-transition-medium);
  }

  /* Hover: arrow circle fills brand purple, glyph turns white — matches
     live pixelbin.io workspace-card arrow hover. */
  .EditorCard-module__editor-card___vFhxp:hover .EditorCard-module__editor-card__arrow___zFiuC {
    background: var(--pb-color-primary);
    color: var(--pb-surface-0);
  }

  /* Figma: preview area is the image placeholder. In the 266×355 card with ~68px header + 10px gap,
     the image area is ~277px tall. Ratio ≈ 266:277 ≈ 0.96:1.
     Since there's no actual <img> content yet, aspect-ratio holds the space. */
  .EditorCard-module__editor-card__preview___l5Rhi {
    border-radius: var(--pb-radius-lg);   /* Figma: 12px */
    background: var(--pb-surface-20);
    aspect-ratio: 266 / 277;             /* Figma: image area proportions */
    width: 100%;
    overflow: hidden;
  }

  .EditorCard-module__editor-card__preview___l5Rhi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .NavToolItem-module__nav-tool-item___xOcnC {
    display: flex;
    align-items: center;
    gap: var(--pb-space-12);              /* Figma: 12px */
    padding-left: var(--pb-space-8);      /* Figma: pl 8px */
    padding-right: var(--pb-space-12);    /* Figma: pr 12px */
    padding-top: var(--pb-space-8);       /* Figma: py 8px */
    padding-bottom: var(--pb-space-8);
    background: var(--pb-surface-0);      /* Figma: white */
    border-radius: var(--pb-radius-lg);   /* Figma: 12px */
    /* No fixed width — sizes from content + padding. Parent column flex constrains it. */
    text-decoration: none;
    /* Match live pixelbin.io .uui-navbar02_dropdown-link (transition: all .3s).
       Was --pb-transition-fast (150ms) which read as near-instant next to the
       legacy/live navbar used on every other page. */
    transition: background var(--pb-transition-medium);
  }

  .NavToolItem-module__nav-tool-item___xOcnC:hover {
    background: var(--pb-surface-10);     /* Figma: hover = fafafa */
  }

  /* Live pixelbin.io turns the icon box purple on row hover (Webflow IX2
     on .uui-navbar02_icon-wrapper). Match it: the box goes from #fafafa to
     brand light-purple while the row itself highlights. */
  .NavToolItem-module__nav-tool-item___xOcnC:hover .NavToolItem-module__nav-tool-item__icon___bq_UV {
    background: var(--pb-purple-20);      /* #F3E8FF */
  }

  /* A11y — keyboard focus indicator (2026-04-18 audit) */
  .NavToolItem-module__nav-tool-item___xOcnC:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
  }

  .NavToolItem-module__nav-tool-item__icon___bq_UV {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;                        /* Figma: 56px */
    height: 3.5rem;
    flex-shrink: 0;
    background: var(--pb-surface-10);     /* Figma: #fafafa */
    border-radius: var(--pb-radius-md);   /* Figma: 8px */
    color: var(--pb-text-subdued-1);
    overflow: hidden;
    /* Animate the purple fill on row hover (see .nav-tool-item:hover rule). */
    transition: background var(--pb-transition-medium);
  }

  /* SVG tool icon variant — icon centered inside 56px box, same ratio as NavDevItem */
  .NavToolItem-module__nav-tool-item__icon--svg___zyMVv img {
    width: 1.5rem; /* 24px — same visual weight as Dev icons */
    height: 1.5rem;
    display: block;
  }

  /* Photo thumbnail variant — image fills the entire 56px box */
  .NavToolItem-module__nav-tool-item__icon--img___jQxN5 {
    padding: 0;
  }

  .NavToolItem-module__nav-tool-item__icon--img___jQxN5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--pb-radius-md);
  }

  .NavToolItem-module__nav-tool-item__text___ThAqn {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-2);               /* Figma: gap 2px */
    flex: 1;
    min-width: 0;
  }

  .NavToolItem-module__nav-tool-item__title___ak_It {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);          /* Figma: 12px */
    font-weight: var(--pb-weight-medium); /* Figma: 500 */
    line-height: var(--pb-lh-s);          /* Figma: 16px */
    color: var(--pb-text-default);        /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
    white-space: nowrap;
  }

  .NavToolItem-module__nav-tool-item__desc___ADzqw {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-xs);    /* Figma: 11px */
    font-weight: var(--pb-weight-regular); /* Figma: 400 */
    line-height: var(--pb-lh-xs);         /* Figma: 14px */
    color: var(--pb-text-subdued-2);      /* Figma: #888 → closest token */
  }

/* UserPill — outlined login pill with avatar disc + greeting.
   Live spec on pixelbin.io `.nav_dashboard_btn`:
     height 42px, padding 10/16/10/10, gap 8, border 1px primary,
     transparent bg, primary text, full-pill radius. */
.UserPill-module__pill___qGNNt {
    display: inline-flex;
    align-items: center;
    gap: var(--pb-space-8);
    /* Use padding to size — keeps consistent with `.button is-nav-button`
       sibling that drives its own height the same way. Final rendered
       height ≈ 42px (10 + 20 disc + 10 + 2 borders). */
    padding: var(--pb-space-10) var(--pb-space-16) var(--pb-space-10)
        var(--pb-space-10);
    border: 1px solid var(--pb-color-primary);
    border-radius: var(--pb-radius-full);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--pb-font-sans);
    transition: background var(--pb-transition-fast);
    box-sizing: border-box;
}

.UserPill-module__pill___qGNNt:hover {
    background: var(--pb-color-primary-10);
}

.UserPill-module__pill___qGNNt:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* Avatar disc — sized to leave 4px breathing room top/bottom inside
   the 43px pill (43 - 4*2 = 35; 32 keeps a tiny halo so the avatar
   doesn't touch the border).

   Why literals (and not tokens):
   Live `.user-profile-avatar` on pixelbin.io ships #EEE8FC bg +
   #370B8F initial. These were `--pb-color-primary-20` / `primary-60`
   pre-Novus, but the 2026-04-19 realign shifted the ramp lighter so
   the current tokens (#F3E8FF / #5A24E0) no longer match Webflow.
   Same precedent as `.lastUpdated #9770FF` and `StickyScrollFeatures
   #eee8fc` — pin live's pre-Novus value so the navbar pill matches
   the rest of the public site exactly. */
.UserPill-module__pill__avatar___GI4jF {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pb-dim-20); /* 20px — matches live spec */
    height: var(--pb-dim-20);
    border-radius: var(--pb-radius-full);
    background: #EEE8FC;
    color: #370B8F;
    /* Live disc text is 10.08px / 500. Closest token is --pb-text-xs
       (12px) which would crowd the disc; literal 10px keeps spec parity. */
    font-size: 10px;
    font-weight: var(--pb-weight-medium);
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: 0;
}

/* "Hi, name" — primary purple text, weight medium (matches live's
   `.nav_dashboard_btn` color). */
.UserPill-module__pill__name___bvipj {
    color: var(--pb-color-primary);
    font-size: var(--pb-text-body-sm); /* 14px */
    font-weight: var(--pb-weight-medium);
    line-height: 1;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navbar — full composite with 3 mega-dropdowns.
   Ported from marketing-pages/source/components/navigation/Navbar.astro.
   Token references match ds-v2 tokens.css.

   Scope note: this file styles ONLY the layout frame and the mega-dropdown
   surfaces. Atoms (NavLink, NavTab, NavToolItem, etc.) style themselves. */

/* ══════════════════════════════════════════════════════════
   NAVBAR BAR
   ══════════════════════════════════════════════════════════ */
.Navbar-module__navbar___L0mfw {
    /* Bar height = vertical padding (2×16px) + tallest content row (~42px button).
       Exposed as a CSS variable so the mobile drawer's `top` offset stays in
       lockstep with the bar, and consumers can tweak it without hunting for
       a hardcoded 72px. */
    --navbar-bar-height: 4.5rem;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.Navbar-module__navbar__bar___qqN_K {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--pb-surface-20);
    transition: box-shadow 0.2s ease;
}

/* Scroll shadow — toggled by JS after 20px of vertical scroll. Matches
   pixelbin.io which lifts the bar off the page once content sits behind it. */
.Navbar-module__navbar--scrolled___s3qW8 .Navbar-module__navbar__bar___qqN_K {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
}

.Navbar-module__navbar__bar-inner___QsMFc {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-space-24);
    /* Container width = 1200px (matches live pixelbin.io `.nav_container`
       max-width:1200px). Horizontal padding sits on the container
       (--pb-container-padding-x = 20px desktop / 14px mobile) so the bar
       aligns edge-for-edge with the Footer and page content. */
    padding: var(--pb-space-16) var(--pb-container-padding-x);
    max-width: var(--pb-container-max-width);  /* 1200px token */
    margin-inline: auto;
}

/* Per-trigger wrapper gives hover-intent a stable target. The invisible
   bottom extension bridges the 5px gap to the mega so moving down doesn't
   drop the hover state. */
.Navbar-module__navbar__link-wrap___q6P09 {
    position: relative;
    display: inline-flex;
}

.Navbar-module__navbar__link-wrap___q6P09::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    pointer-events: auto;
}

/* Left group */
.Navbar-module__navbar__left___GT_rp {
    display: flex;
    align-items: center;
    gap: var(--pb-space-24);
    flex-shrink: 0;
    min-width: 0;
}

.Navbar-module__navbar__links___H78ol {
    display: none;
    align-items: center;
    gap: var(--pb-space-8);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .Navbar-module__navbar__links___H78ol {
        display: flex;
    }
}

/* Right group — matches Astro: hidden below 1024px, flex row above. */
.Navbar-module__navbar__right___b4Y0F {
    display: none;
    align-items: center;
    gap: var(--pb-space-12);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .Navbar-module__navbar__right___b4Y0F {
        display: flex;
    }
}

.Navbar-module__navbar__trailing___nQDPw {
    display: flex;
    align-items: center;
    gap: var(--pb-space-8);
    flex-shrink: 0;
}

.Navbar-module__navbar__phone___utVXU {
    display: none;
}

@media (min-width: 1280px) {
    .Navbar-module__navbar__phone___utVXU {
        display: flex;
    }
}

.Navbar-module__navbar__buttons___hKUpO {
    display: flex;
    align-items: center;
    gap: var(--pb-space-8);
    flex-shrink: 0;
}

.Navbar-module__navbar__book-demo___d3KM3 {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile-only CTA — "Book a demo" stays visible while the drawer is open.
   Sits next to the hamburger; hidden on desktop where .navbar__right renders
   the same button alongside Sign in + AppDownload. */
.Navbar-module__navbar__mobile-cta___Qnjz4 {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .Navbar-module__navbar__mobile-cta___Qnjz4 {
        display: none;
    }
}

/* Responsive — shrink padding below 1024px to leave more content room. */
@media (max-width: 1024px) {
    .Navbar-module__navbar__bar-inner___QsMFc {
        padding: var(--pb-space-16) var(--pb-space-24);
    }
}

/* Wide viewports — drop horizontal padding so the bar's max-width
   token (1200px) takes full effect, edge-aligning with `.nav_container`
   on live pixelbin.io which is also 1200px max-width. Earlier this
   block clamped to 1160px which made our right cluster sit ~20px
   inboard of live on wide displays. */
@media (min-width: 1280px) {
    .Navbar-module__navbar__bar-inner___QsMFc {
        padding: var(--pb-space-16) 0;
    }
}

/* ══════════════════════════════════════════════════════════
   MEGA DROPDOWN
   ══════════════════════════════════════════════════════════ */
.Navbar-module__mega___wJPVU {
    /* Fixed-width mega dropdown. Absolute positioned, centered under the
       navbar bar. Width caps at 1078px matching the Figma spec; at narrow
       viewports the width shrinks but never exceeds viewport minus 32px. */
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(-0.5rem);
    width: min(1078px, calc(100vw - 32px));
    background: var(--pb-surface-0, #ffffff);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(52, 50, 74, 0.08),
        0 2px 8px rgba(52, 50, 74, 0.04);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.Navbar-module__mega--open___IATOt {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.Navbar-module__mega__inner___isuen {
    display: flex;
}

/* ── Sidebar ──────────────────────────────────────────── */
.Navbar-module__mega__sidebar___NP7nz {
    flex-shrink: 0;
    width: 216px;
    background: var(--pb-purple-10, #FAF5FF);
    padding: var(--pb-space-16);
    padding-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--pb-space-16);
    overflow: hidden;
}

.Navbar-module__mega__sidebar--narrow___PpDf_ {
    width: 212px;
    padding-right: var(--pb-space-16);
}

.Navbar-module__mega__sidebar-text___UQsqe {
    padding: var(--pb-space-8);
}

.Navbar-module__mega__sidebar-desc___mZfqz {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);         /* 14px */
    font-weight: var(--pb-weight-medium); /* 500 */
    line-height: var(--pb-lh-m);         /* 20px */
    color: var(--pb-text-default);       /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
}

.Navbar-module__mega__tabs___HD0us {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Promo card ───────────────────────────────────────── */
.Navbar-module__mega__promo___ee58m {
    padding-right: var(--pb-space-16);
}

.Navbar-module__mega__promo-card___Oss_u {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #007181 0%, #005f6b 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
}

.Navbar-module__mega__promo-img___Br9CG {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.Navbar-module__mega__promo-overlay___Tj5BF {
    position: relative;
    z-index: 1;
    padding: var(--pb-space-8);
    padding-top: var(--pb-space-32, 32px);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 61%,
        rgba(0, 0, 0, 0.8) 100%
    );
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.Navbar-module__mega__promo-title___FrMus {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);          /* 14px */
    font-weight: var(--pb-weight-medium);  /* 500 */
    line-height: var(--pb-lh-m);          /* 20px */
    color: var(--pb-text-inv);            /* white on dark promo bg */
}

.Navbar-module__mega__promo-desc___s8Glb {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-xs);          /* 11px */
    font-weight: var(--pb-weight-regular); /* 400 */
    line-height: var(--pb-lh-xs);          /* 14px */
    color: var(--pb-text-subdued-inv);    /* #F5F5F5 on dark promo bg */
}

/* ── Content panels ───────────────────────────────────── */
/* No max-height / overflow — dropdown grows with its content. Scroll
   inside a mega-menu feels wrong; if content ever outgrows viewport
   height we should redesign the dropdown, not add a scrollbar. */
.Navbar-module__mega__content___Uixqb {
    flex: 1;
    padding: var(--pb-space-16);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Navbar-module__mega__panel___a1BcS {
    display: none;
}

.Navbar-module__mega__panel--active___ZuxjX {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Workspaces panel ─────────────────────────────────── */
.Navbar-module__mega__workspaces___bhc9M {
    display: flex;
    gap: var(--pb-space-16);
}

/* ── Tools panel ──────────────────────────────────────── */
.Navbar-module__mega__tools-grid___lHQFL {
    display: flex;
    gap: 40px;
}

.Navbar-module__mega__solutions-section___cAgUc {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-12);
}

.Navbar-module__mega__solutions-grid___NYkBc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pb-space-8);
}

.Navbar-module__mega__tool-col___JLKzy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

.Navbar-module__mega__tool-category___ecn2f {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);          /* 14px */
    font-weight: var(--pb-weight-medium);  /* 500 */
    line-height: var(--pb-lh-m);          /* 20px */
    color: var(--pb-text-subdued-2);      /* #B5B5B5 — closest to #888 spec */
    text-transform: uppercase;
    padding-inline: var(--pb-space-8);
}

.Navbar-module__mega__tool-list___DJT6R {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-12);
}

.Navbar-module__mega__cta___fwCvk {
    /* No extra styling — NavCtaBanner inside is self-contained. */
}

/* ── Overlay ──────────────────────────────────────────── */
.Navbar-module__navbar__overlay___sAecx {
    position: fixed;
    inset: 0;
    top: 4.5rem;
    background: rgba(0, 0, 0, 0.08);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.Navbar-module__navbar__overlay___sAecx[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile drawer scrim — full-viewport dark backdrop behind the drawer.
   Overrides the default dropdown overlay (which sits below the bar). */
.Navbar-module__navbar__overlay--mobile___EWmEr {
    top: 0;
    background: var(--pb-color-alpha-black-60);
    z-index: 105;
}

/* ══════════════════════════════════════════════════════════
   MOBILE HAMBURGER + DRAWER
   ══════════════════════════════════════════════════════════ */
.Navbar-module__navbar__hamburger___OsmKc {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--pb-space-8);
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: var(--pb-radius-8, 8px);
}

.Navbar-module__navbar__hamburger___OsmKc span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--pb-text-default);
    border-radius: 2px;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.Navbar-module__navbar__hamburger___OsmKc:focus-visible {
    outline: 2px solid var(--pb-focus-ring, var(--pb-text-default));
    outline-offset: 2px;
}

/* Open state — morph bars into an X. */
.Navbar-module__navbar__hamburger___OsmKc[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.Navbar-module__navbar__hamburger___OsmKc[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.Navbar-module__navbar__hamburger___OsmKc[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .Navbar-module__navbar__hamburger___OsmKc {
        display: flex;
    }
}

/* Full-viewport accordion drawer (mobile <1024px). Sits below the sticky
   top bar so "Book a demo" and the hamburger/X stay visible while open. */
.Navbar-module__navbar__drawer___xBVlE {
    position: fixed;
    top: var(--navbar-bar-height, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pb-surface-0);
    z-index: 110;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--pb-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.Navbar-module__navbar__drawer--open___cZpne {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (min-width: 1024px) {
    .Navbar-module__navbar__drawer___xBVlE,
    .Navbar-module__navbar__overlay--mobile___EWmEr {
        display: none;
    }
}

.Navbar-module__navbar__drawer-links___QXRqE {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
    flex: 1;
}

/* ── Mobile stack navigation ──────────────────────────── */
/* Flat top-level links (Pricing, Enterprise) */
.Navbar-module__mobile-nav__item___eflof {
    display: block;
    padding: var(--pb-space-12) var(--pb-space-8);
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);
    color: var(--pb-text-default);
    text-decoration: none;
}

.Navbar-module__mobile-nav___rWCaJ {
    display: flex;
    flex-direction: column;
}

/* Grouping container for "Create" heading + its drill-in rows */
.Navbar-module__mobile-nav__section___DzaS5 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
}

/* "Create" heading — dark label sitting above its drill-in children.
   Matches pixelbin.io reference: dark text, normal case, not uppercase. */
.Navbar-module__mobile-nav__section-heading___caF6h {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);             /* 16px — matches drill rows */
    font-weight: var(--pb-weight-semibold);  /* 600 — distinguishes as heading */
    line-height: var(--pb-lh-l);
    color: var(--pb-text-default);           /* dark, not subdued */
    padding: var(--pb-space-12) var(--pb-space-8) var(--pb-space-4);
}

/* Invisible gap between Create sub-items and top-level siblings.
   Reference shows only whitespace — no visible divider line. */
.Navbar-module__mobile-nav__separator___zZQIN {
    height: var(--pb-space-16);  /* just vertical breathing room */
}

/* Drill-in row (chevron right). Default = top-level (dark text).
   Sub-items under Create override color via --sub modifier. */
.Navbar-module__mobile-nav__drill___O10gs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pb-space-12) var(--pb-space-8);
    background: none;
    border: none;
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);
    font-weight: var(--pb-weight-regular);
    color: var(--pb-text-default);
    cursor: pointer;
    text-align: left;
}

/* Sub-level drill (inside the "Create" section): subdued text + slight
   left indent to show hierarchy. Matches pixelbin.io reference. */
.Navbar-module__mobile-nav__drill--sub___dXb66 {
    color: var(--pb-text-subdued-1);
    padding-left: var(--pb-space-8);
}

.Navbar-module__mobile-nav__drill___O10gs svg {
    color: var(--pb-color-grey-60);  /* light grey chevron — less prominent than text */
}

.Navbar-module__mobile-nav__drill___O10gs:hover {
    color: var(--pb-color-primary);
}

/* Detail view container (after drill-in) */
.Navbar-module__mobile-nav__detail___flw94 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-12);
    animation: Navbar-module__slide-in-right___MIF4U 0.25s ease;
}

@keyframes Navbar-module__slide-in-right___MIF4U {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.Navbar-module__mobile-nav__back___iqwGf {
    display: flex;
    align-items: center;
    gap: var(--pb-space-8);
    padding: var(--pb-space-12) var(--pb-space-8);
    background: none;
    border: none;
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);
    font-weight: var(--pb-weight-semibold);
    color: var(--pb-text-default);
    cursor: pointer;
    text-align: left;
}

/* Left-pointing chevron = rotated chevron-right icon */
.Navbar-module__mobile-nav__back___iqwGf svg {
    transform: rotate(180deg);
}

/* Workspaces detail: card list with thumbnail */
.Navbar-module__mobile-nav__workspaces___F0Uz8 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
}

.Navbar-module__mobile-nav__workspace-card___JnHOD {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-space-12);
    padding: var(--pb-space-16);
    background: var(--pb-purple-10);
    border-radius: var(--pb-radius-lg, 12px);
    text-decoration: none;
    overflow: hidden;
    min-height: 120px;
}

.Navbar-module__mobile-nav__workspace-text___e140o {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
    flex: 1;
    min-width: 0;
}

.Navbar-module__mobile-nav__workspace-title___yISub {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l);
    font-weight: var(--pb-weight-semibold);
    color: var(--pb-text-default);
}

.Navbar-module__mobile-nav__workspace-desc___o9mVm {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-regular);
    color: var(--pb-text-subdued-1);
}

.Navbar-module__mobile-nav__workspace-thumb___al2up {
    width: 40%;
    max-width: 140px;
    height: auto;
    object-fit: cover;
    border-radius: var(--pb-radius-md, 8px);
}

/* Tools/Solutions/Developers detail: subcategory + tool list */
.Navbar-module__mobile-nav__subcategory___lKCSz {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
    margin-bottom: var(--pb-space-12);
}

.Navbar-module__mobile-nav__subcategory-label___DNjHp {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-xs);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-xs);
    color: var(--pb-text-subdued-2);
    text-transform: uppercase;
    padding: var(--pb-space-8) var(--pb-space-8) var(--pb-space-4);
    letter-spacing: 0.05em;
}

.Navbar-module__mobile-nav__tool-item___zsAg4 {
    display: flex;
    align-items: center;
    gap: var(--pb-space-12);
    padding: var(--pb-space-12) var(--pb-space-8);
    text-decoration: none;
}

.Navbar-module__mobile-nav__tool-icon___ZdG6s {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--pb-radius-md, 8px);
    background: var(--pb-surface-10);
    padding: var(--pb-space-8);
    box-sizing: border-box;
}

.Navbar-module__mobile-nav__tool-text___PgyjG {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.Navbar-module__mobile-nav__tool-title___m_uvN {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);
    font-weight: var(--pb-weight-medium);
    color: var(--pb-text-default);
}

.Navbar-module__mobile-nav__tool-desc___khXSa {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-xs);
    color: var(--pb-text-subdued-1);
}

/* Pinned to drawer bottom. Inner Button/UserPill is stretched full-width
   (matches pixelbin.io reference — Sign in renders as a full-width pill). */
.Navbar-module__mobile-nav__auth___a9tkj {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    padding-top: var(--pb-space-16);
    margin-top: auto;
}

.Navbar-module__mobile-nav__auth___a9tkj > a,
.Navbar-module__mobile-nav__auth___a9tkj > button {
    width: 100%;
    justify-content: center;
}