/* css/00-layers.css */
/* My420Love · 00-layers.css — the single cascade-layer order statement (SPEC-ARCH §7.3).
   Every other stylesheet puts its rules inside one of these layers, so the order below — not file order or
   selector weight — decides which rule wins. Unlayered CSS is forbidden (it would beat every layer). */
@layer reset, tokens, base, layout, components, modules, utilities, overrides;

/* css/01-reset.css */
/* My420Love · 01-reset.css — a small modern reset (@layer reset). Typography and colour live in 03-base.css. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; hanging-punctuation: first last; }
  body { min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  a { color: inherit; }
  p, h1, h2, h3, h4, h5, h6, li, dd, blockquote, figcaption { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; text-wrap: balance; }
  p { text-wrap: pretty; }
  ul[role="list"], ol[role="list"], menu { list-style: none; padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
  textarea { resize: vertical; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
  summary { cursor: pointer; }
  :target { scroll-margin-block: 5rem; }
}

/* css/02-tokens.css */
/* My420Love · 02-tokens.css — docs/SPEC-DESIGN tokens.css copied VERBATIM inside @layer tokens (BLUEPRINT D-58:
   no transcription). The one deliberate cut: the unused m4l-smoke-drift keyframes (D-60, §2.4). Change values here
   only together with docs/SPEC-DESIGN.md §3 and a green `tools/contrast-check.php`. */
@layer tokens {
/* ==========================================================================
   My420Love design tokens  v1.0
   Source of truth: docs/SPEC-DESIGN.md. Import this file FIRST, before any
   other stylesheet. Hand-written CSS, no build step.

   THEMING MODEL
   - Dark is the brand default: <html data-theme="dark">.
   - Light:                     <html data-theme="light">.
   - Follow the device:         <html data-theme="auto"> (light tokens only when
                                the OS asks for light; otherwise dark).
   - Any element can re-scope the theme: a cream marketing band inside a dark
     page is <section data-theme="light">, a deep emerald band inside a light
     page is <section data-theme="dark">. Every semantic token is re-declared
     on that element, so all children follow automatically.
   - High Time lounge: add data-subtheme="hightime" next to data-theme="dark".
   - Motion: <html data-motion="reduce"> (in-app setting) behaves exactly like
     the OS prefers-reduced-motion setting.

   RULE: components use SEMANTIC tokens (--surface-*, --text-*, --dim-*, ...)
   never the raw ramps (--emerald-600 ...). Ramps exist so the semantic layer
   has one place to change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVES (theme-independent)
   -------------------------------------------------------------------------- */
:root {
  /* Emerald - the cannabis identity. Anchor: 600 */
  --emerald-50:  #EEF8F2;
  --emerald-100: #DDF4E7;
  --emerald-200: #B5E6CB;
  --emerald-300: #7FDDA9;
  --emerald-400: #3FC684;
  --emerald-500: #1E8A58;
  --emerald-550: #1A7A4E;
  --emerald-600: #176B45;
  --emerald-700: #145A3A;
  --emerald-800: #0F3D2B;
  --emerald-850: #0F3526;
  --emerald-900: #0B2E20;
  --emerald-950: #0C2A1E;

  /* Berry - love. Anchor: 600 (icons, hearts, large text). 700 carries small white text. */
  --berry-100: #FDE8EC;
  --berry-200: #F8C9D1;
  --berry-300: #FF8C9D;
  --berry-400: #EE5A74;
  --berry-600: #D63F5B;
  --berry-650: #C8385A;
  --berry-700: #BE3150;
  --berry-800: #8E2138;
  --berry-900: #5E1426;

  /* Lime - the spark. Max ~5% of any screen. Never text on light surfaces. */
  --lime-300: #D4F07A;
  --lime-400: #B7E43C;
  --lime-500: #9CC72A;
  --lime-600: #7A9E1B;

  /* Cream - warmth */
  --cream-50:  #FFFAF0;
  --cream-100: #FFF8EC;
  --cream-200: #FFF3DD;
  --cream-300: #F5E6C8;
  --cream-400: #EFE6D6;
  --cream-500: #E9DFCC;

  /* Ink - warm charcoal with an emerald undertone. Never #000. */
  --ink-975: #0B110E;
  --ink-950: #101613;
  --ink-925: #111814;
  --ink-900: #161F1A;
  --ink-850: #1D2822;
  --ink-800: #24312A;
  --ink-750: #2D3C34;
  --ink-700: #3D4F45;
  --ink-600: #6B7C72;
  --ink-text: #1A221E;
  --ink-text-2: #46514B;
  --ink-text-3: #5E6862;

  /* Sand - warm greys for text on dark */
  --sand-200: #D8CDB9;
  --sand-300: #B0A795;
  --sand-500: #7A7468;

  /* High Time lounge */
  --amber-300: #F2C274;
  --amber-400: #E6AE52;
  --amber-900: #1A1408;

  /* The seven compatibility dimensions: 300 = text on dark, 400 = fill on dark,
     600 = fill on light, 700 = text on light, 100 = tint on light. */
  --love-100: #FDE8EC;          --love-300: #FF8C9D;          --love-400: #EE5A74;          --love-600: #D63F5B;          --love-700: #A8243F;
  --green-100: #DDF4E7;         --green-300: #7FDDA9;         --green-400: #34C27E;         --green-600: #1E8A58;         --green-700: #136440;
  --chemistry-100: #EFE6FD;     --chemistry-300: #C9A8FF;     --chemistry-400: #A673F0;     --chemistry-600: #7E4BD6;     --chemistry-700: #5E2FB3;
  --communication-100: #E3EEFD; --communication-300: #9CC5FF; --communication-400: #4C97F5; --communication-600: #2F6FD6; --communication-700: #1F55AE;
  --fun-100: #FFEBDD;           --fun-300: #FFB27F;           --fun-400: #FF8A3D;           --fun-600: #CC5410;           --fun-700: #A9470B;
  --lifestyle-100: #FBF0D2;     --lifestyle-300: #F2CE72;     --lifestyle-400: #E6B43C;     --lifestyle-600: #A57607;     --lifestyle-700: #7D5A06;
  --romance-100: #FCE4F0;       --romance-300: #FFA6CD;       --romance-400: #F06EAA;       --romance-600: #D6478C;       --romance-700: #A5276A;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid scale: min at 360px viewport, max at ~1280px. */
  --fs-micro: 0.6875rem;                                    /* 11 - uppercase labels only */
  --fs-xs:    0.75rem;                                      /* 12 */
  --fs-sm:    0.875rem;                                     /* 14 */
  --fs-md:    1rem;                                         /* 16 - body, never smaller for paragraphs */
  --fs-lg:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17 -> 19 lead */
  --fs-xl:    clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);     /* 20 -> 24 h4 / card titles */
  --fs-2xl:   clamp(1.5rem, 1.3rem + 0.87vw, 2rem);         /* 24 -> 32 h3 */
  --fs-3xl:   clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);     /* 30 -> 44 h2 */
  --fs-4xl:   clamp(2.25rem, 1.6rem + 2.8vw, 3.875rem);     /* 36 -> 62 h1 */
  --fs-5xl:   clamp(2.625rem, 1.7rem + 4vw, 5rem);          /* 42 -> 80 hero */
  --fs-stat:  clamp(3rem, 2rem + 4.4vw, 5.5rem);            /* 48 -> 88 big percentages */

  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  560;     /* Fraunces headline weight (variable) */
  --fw-display-hero: 620;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body:    -0.006em;
  --tracking-label:   0.09em;   /* uppercase eyebrow labels */
  --tracking-button:  0.01em;

  --fvs-display: "SOFT" 50, "opsz" 144;   /* Fraunces: soft, high-contrast display cut */
  --fvs-display-text: "SOFT" 30, "opsz" 24;
  --numerals: tabular-nums lining-nums;

  /* ---------- Space (4px base) ---------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2 */
  --space-1: 0.25rem;     /* 4 */
  --space-1-5: 0.375rem;  /* 6 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 */
  --space-5: 1.25rem;     /* 20 */
  --space-6: 1.5rem;      /* 24 */
  --space-8: 2rem;        /* 32 */
  --space-10: 2.5rem;     /* 40 */
  --space-12: 3rem;       /* 48 */
  --space-16: 4rem;       /* 64 */
  --space-20: 5rem;       /* 80 */
  --space-24: 6rem;       /* 96 */
  --space-32: 8rem;       /* 128 */

  --gutter:     clamp(1rem, 0.5rem + 2.2vw, 2.5rem);   /* 16 -> 40 page side padding */
  --section-y:  clamp(4rem, 2.8rem + 5.2vw, 8rem);     /* 64 -> 128 marketing section padding */
  --stack-card: var(--space-5);                        /* inner padding of a card */

  /* ---------- Layout ---------- */
  --container-xs: 480px;   /* auth, one-question screens */
  --container-sm: 640px;   /* reading, forms, legal */
  --container-app: 720px;  /* member app content column (desktop: beside the left rail) */
  --container-feed: 480px; /* one profile card / one question at a time */
  --container-md: 880px;
  --container-lg: 1120px;  /* marketing */
  --container-xl: 1280px;
  --topbar-h: 56px;
  --bottomnav-h: 64px;     /* + env(safe-area-inset-bottom) */
  --hit-min: 44px;
  /* Breakpoints (use literally in @media, CSS vars cannot be used there):
     sm 480px | md 768px | lg 1024px | xl 1280px */

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  /* ---------- Borders ---------- */
  --border-w: 1px;
  --border-w-strong: 1.5px;
  --focus-w: 3px;
  --focus-offset: 2px;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 900;
  --z-sheet: 1000;
  --z-toast: 1100;
  --z-celebration: 1200;

  /* ---------- Motion ---------- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-slower: 560ms;
  --dur-epic: 1100ms;      /* match celebration, report spark */
  --dur-fade: 150ms;       /* survives reduced motion */
  --dur-breathe: 3200ms;   /* glowing-heart ring loop */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* exits */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* small overshoot: likes, chips */
  --ease-heart: cubic-bezier(0.3, 1.9, 0.5, 1);     /* the like pulse */
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);   /* sine in-out loops */
  --motion-ok: 1;   /* 0 when reduced motion is on; multiply distances by it */

  /* ---------- Blur ---------- */
  --blur-glass: saturate(140%) blur(18px);
  --blur-scrim: blur(6px);
}

/* --------------------------------------------------------------------------
   2. DARK THEME (default)  -  warm emerald-charcoal, cream type
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --surface-sunken: var(--ink-925);   /* wells, input backgrounds on cards */
  --surface-base:   var(--ink-900);   /* page */
  --surface-1:      var(--ink-850);   /* cards */
  --surface-2:      var(--ink-800);   /* raised: sheets, menus, nav */
  --surface-3:      var(--ink-750);   /* hover, chips, tracks, inputs */
  --surface-inverse: var(--cream-200);
  --surface-brand:  var(--emerald-850);                                   /* deep emerald band */
  --surface-brand-gradient: linear-gradient(180deg, #0F3526 0%, #0C2B1F 100%);
  --surface-ambient:
    radial-gradient(70% 55% at 18% 0%, rgba(31, 158, 98, 0.16) 0%, transparent 70%),
    radial-gradient(55% 45% at 100% 30%, rgba(214, 63, 91, 0.10) 0%, transparent 70%);
  --glass-bg: rgba(29, 40, 34, 0.74);
  --scrim: rgba(8, 12, 10, 0.64);

  /* Text */
  --text-1: var(--cream-200);        /* 15.35:1 on base */
  --text-2: var(--sand-200);         /* 10.72:1 on base */
  --text-3: var(--sand-300);         /*  4.87:1 on surface-3 (worst case) */
  --text-disabled: var(--sand-500);  /*  decorative only, never sole carrier of meaning */
  --text-inverse: var(--ink-text);
  --text-on-brand: #FFFFFF;          /*  on emerald-600: 6.51:1 */
  --text-on-love: #FFFFFF;           /*  on berry-700:   5.61:1 */
  --text-on-accent: #14201A;         /*  on lime-400:   11.33:1 */
  --text-link: var(--emerald-300);   /* 10.30:1 on base */
  --text-love: var(--berry-300);     /*  7.62:1 on base */

  /* Borders */
  --border-subtle: rgba(255, 243, 221, 0.08);
  --border-1:      rgba(255, 243, 221, 0.12);
  --border-2:      rgba(255, 243, 221, 0.20);
  --border-input:  #6B7C72;                      /* 3:1 non-text on surface-1 */
  --border-strong: rgba(255, 243, 221, 0.36);

  /* Brand roles */
  --brand:           var(--emerald-600);
  --brand-hover:     var(--emerald-550);
  --brand-press:     var(--emerald-700);
  --brand-fill:      linear-gradient(180deg, #1A7A4E 0%, #176B45 100%);
  --brand-strong:    var(--emerald-400);   /* emerald used as text/icon on dark */
  --brand-soft:      rgba(63, 198, 132, 0.14);
  --love:            var(--berry-700);
  --love-hover:      var(--berry-650);
  --love-press:      var(--berry-800);
  --love-strong:     var(--berry-400);     /* hearts, icons on dark */
  --love-soft:       rgba(238, 90, 116, 0.14);
  --accent:          var(--lime-400);
  --accent-soft:     rgba(183, 228, 60, 0.14);
  --cream:           var(--cream-200);

  /* The seven dimensions: core (fills, icons, meters), fg (text), bg (chip tint), glow */
  --dim-love: var(--love-400);                   --dim-love-fg: var(--love-300);                   --dim-love-bg: rgba(238, 90, 116, 0.16);          --dim-love-glow: rgba(238, 90, 116, 0.45);
  --dim-green: var(--green-400);                 --dim-green-fg: var(--green-300);                 --dim-green-bg: rgba(52, 194, 126, 0.15);         --dim-green-glow: rgba(52, 194, 126, 0.45);
  --dim-chemistry: var(--chemistry-400);         --dim-chemistry-fg: var(--chemistry-300);         --dim-chemistry-bg: rgba(166, 115, 240, 0.17);    --dim-chemistry-glow: rgba(166, 115, 240, 0.45);
  --dim-communication: var(--communication-400); --dim-communication-fg: var(--communication-300); --dim-communication-bg: rgba(76, 151, 245, 0.16);  --dim-communication-glow: rgba(76, 151, 245, 0.45);
  --dim-fun: var(--fun-400);                     --dim-fun-fg: var(--fun-300);                     --dim-fun-bg: rgba(255, 138, 61, 0.15);           --dim-fun-glow: rgba(255, 138, 61, 0.45);
  --dim-lifestyle: var(--lifestyle-400);         --dim-lifestyle-fg: var(--lifestyle-300);         --dim-lifestyle-bg: rgba(230, 180, 60, 0.15);     --dim-lifestyle-glow: rgba(230, 180, 60, 0.42);
  --dim-romance: var(--romance-400);             --dim-romance-fg: var(--romance-300);             --dim-romance-bg: rgba(240, 110, 170, 0.16);      --dim-romance-glow: rgba(240, 110, 170, 0.45);
  --meter-track: var(--surface-3);

  /* States */
  --success: #4FD08F;  --success-bg: rgba(79, 208, 143, 0.14);
  --warn:    #F2B544;  --warn-bg:    rgba(242, 181, 68, 0.14);
  --danger:  #FF7A6B;  --danger-bg:  rgba(255, 122, 107, 0.14);  --danger-fill: #C0392B;
  --info:    #7DB6FF;  --info-bg:    rgba(125, 182, 255, 0.14);

  /* Focus */
  --focus-color: var(--lime-400);   /* 11.39:1 on base */
  --focus-ring: 0 0 0 var(--focus-offset) var(--surface-base), 0 0 0 calc(var(--focus-offset) + var(--focus-w)) var(--focus-color);

  /* Elevation: soft layered shadows + a 1px top highlight so cards read on charcoal */
  --edge-highlight: inset 0 1px 0 rgba(255, 243, 221, 0.06);
  --shadow-1: 0 1px 1px rgba(5, 9, 7, 0.24), 0 1px 3px rgba(5, 9, 7, 0.30);
  --shadow-2: 0 1px 2px rgba(5, 9, 7, 0.30), 0 6px 16px -4px rgba(5, 9, 7, 0.45), 0 16px 32px -12px rgba(5, 9, 7, 0.40);
  --shadow-3: 0 2px 4px rgba(5, 9, 7, 0.30), 0 12px 28px -6px rgba(5, 9, 7, 0.55), 0 32px 64px -24px rgba(5, 9, 7, 0.55);
  --shadow-4: 0 4px 8px rgba(5, 9, 7, 0.35), 0 24px 48px -12px rgba(5, 9, 7, 0.65), 0 64px 120px -32px rgba(5, 9, 7, 0.70);

  /* Signature glows */
  --glow-emerald: 0 0 0 1px rgba(63, 198, 132, 0.40), 0 0 22px 2px rgba(63, 198, 132, 0.32), 0 0 64px 8px rgba(63, 198, 132, 0.16);
  --glow-berry:   0 0 0 1px rgba(238, 90, 116, 0.40), 0 0 22px 2px rgba(238, 90, 116, 0.30), 0 0 64px 8px rgba(238, 90, 116, 0.14);
  --glow-lime:    0 0 0 1px rgba(183, 228, 60, 0.55), 0 0 18px 2px rgba(183, 228, 60, 0.38);
  --glow-heart-ring: conic-gradient(from 210deg, #EE5A74, #F06EAA, #3FC684, #B7E43C 58%, #3FC684, #EE5A74);
}

/* --------------------------------------------------------------------------
   3. LIGHT THEME  -  warm paper, deep ink, emerald + berry at full strength
   Declared twice (explicit + auto) because CSS has no mixins. Keep in sync.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;
  --surface-sunken: var(--cream-300);
  --surface-base:   var(--cream-100);
  --surface-1:      #FFFFFF;
  --surface-2:      #FFFFFF;
  --surface-3:      #F3E8D4;
  --surface-inverse: var(--ink-900);
  --surface-brand:  var(--emerald-850);
  --surface-brand-gradient: linear-gradient(180deg, #0F3526 0%, #0C2B1F 100%);
  --surface-ambient:
    radial-gradient(70% 55% at 18% 0%, rgba(23, 107, 69, 0.08) 0%, transparent 70%),
    radial-gradient(55% 45% at 100% 30%, rgba(214, 63, 91, 0.06) 0%, transparent 70%);
  --glass-bg: rgba(255, 250, 240, 0.80);
  --scrim: rgba(22, 31, 26, 0.48);

  --text-1: var(--ink-text);        /* 15.40:1 on base */
  --text-2: var(--ink-text-2);      /*  7.83:1 on base */
  --text-3: var(--ink-text-3);      /*  4.76:1 on surface-3 (worst case) */
  --text-disabled: #9A948A;
  --text-inverse: var(--cream-200);
  --text-on-brand: #FFFFFF;
  --text-on-love: #FFFFFF;
  --text-on-accent: #14201A;
  --text-link: var(--emerald-700);  /* 8.22:1 on white */
  --text-love: var(--berry-700);    /* 5.31:1 on base */

  --border-subtle: rgba(26, 34, 30, 0.06);
  --border-1:      rgba(26, 34, 30, 0.10);
  --border-2:      rgba(26, 34, 30, 0.18);
  --border-input:  #8C8474;         /* 3.71:1 on white */
  --border-strong: rgba(26, 34, 30, 0.40);

  --brand:        var(--emerald-600);
  --brand-hover:  var(--emerald-700);
  --brand-press:  var(--emerald-800);
  --brand-fill:   linear-gradient(180deg, #1A7A4E 0%, #176B45 100%);
  --brand-strong: var(--emerald-600);
  --brand-soft:   var(--emerald-100);
  --love:         var(--berry-700);
  --love-hover:   var(--berry-800);
  --love-press:   var(--berry-900);
  --love-strong:  var(--berry-600);
  --love-soft:    var(--berry-100);
  --accent:       var(--lime-400);   /* fill only, always with --text-on-accent */
  --accent-soft:  #F1F9D6;
  --cream:        var(--cream-200);

  --dim-love: var(--love-600);                   --dim-love-fg: var(--love-700);                   --dim-love-bg: var(--love-100);                   --dim-love-glow: rgba(214, 63, 91, 0.28);
  --dim-green: var(--green-600);                 --dim-green-fg: var(--green-700);                 --dim-green-bg: var(--green-100);                 --dim-green-glow: rgba(30, 138, 88, 0.28);
  --dim-chemistry: var(--chemistry-600);         --dim-chemistry-fg: var(--chemistry-700);         --dim-chemistry-bg: var(--chemistry-100);         --dim-chemistry-glow: rgba(126, 75, 214, 0.26);
  --dim-communication: var(--communication-600); --dim-communication-fg: var(--communication-700); --dim-communication-bg: var(--communication-100); --dim-communication-glow: rgba(47, 111, 214, 0.26);
  --dim-fun: var(--fun-600);                     --dim-fun-fg: var(--fun-700);                     --dim-fun-bg: var(--fun-100);                     --dim-fun-glow: rgba(204, 84, 16, 0.26);
  --dim-lifestyle: var(--lifestyle-600);         --dim-lifestyle-fg: var(--lifestyle-700);         --dim-lifestyle-bg: var(--lifestyle-100);         --dim-lifestyle-glow: rgba(165, 118, 7, 0.26);
  --dim-romance: var(--romance-600);             --dim-romance-fg: var(--romance-700);             --dim-romance-bg: var(--romance-100);             --dim-romance-glow: rgba(214, 71, 140, 0.26);
  --meter-track: var(--cream-400);

  --success: #13714A;  --success-bg: #E3F4EA;
  --warn:    #8A5A00;  --warn-bg:    #FBF0D2;
  --danger:  #C0392B;  --danger-bg:  #FBE6E3;  --danger-fill: #C0392B;
  --info:    #1F5FB8;  --info-bg:    #E3EEFD;

  --focus-color: var(--emerald-700);   /* 7.79:1 on base */
  --focus-ring: 0 0 0 var(--focus-offset) var(--surface-base), 0 0 0 calc(var(--focus-offset) + var(--focus-w)) var(--focus-color);

  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-1: 0 1px 1px rgba(58, 42, 20, 0.05), 0 1px 3px rgba(58, 42, 20, 0.08);
  --shadow-2: 0 1px 2px rgba(58, 42, 20, 0.06), 0 6px 16px -4px rgba(58, 42, 20, 0.10), 0 16px 32px -12px rgba(58, 42, 20, 0.10);
  --shadow-3: 0 2px 4px rgba(58, 42, 20, 0.06), 0 12px 28px -6px rgba(58, 42, 20, 0.14), 0 32px 64px -24px rgba(58, 42, 20, 0.16);
  --shadow-4: 0 4px 8px rgba(58, 42, 20, 0.08), 0 24px 48px -12px rgba(58, 42, 20, 0.20), 0 64px 120px -32px rgba(58, 42, 20, 0.24);

  --glow-emerald: 0 0 0 1px rgba(23, 107, 69, 0.30), 0 0 20px 2px rgba(30, 138, 88, 0.22), 0 0 56px 8px rgba(30, 138, 88, 0.10);
  --glow-berry:   0 0 0 1px rgba(214, 63, 91, 0.30), 0 0 20px 2px rgba(214, 63, 91, 0.20), 0 0 56px 8px rgba(214, 63, 91, 0.08);
  --glow-lime:    0 0 0 1px rgba(122, 158, 27, 0.60), 0 0 16px 2px rgba(183, 228, 60, 0.45);
  --glow-heart-ring: conic-gradient(from 210deg, #D63F5B, #D6478C, #1E8A58, #9CC72A 58%, #1E8A58, #D63F5B);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --surface-sunken: var(--cream-300);
    --surface-base:   var(--cream-100);
    --surface-1:      #FFFFFF;
    --surface-2:      #FFFFFF;
    --surface-3:      #F3E8D4;
    --surface-inverse: var(--ink-900);
    --surface-brand:  var(--emerald-850);
    --surface-brand-gradient: linear-gradient(180deg, #0F3526 0%, #0C2B1F 100%);
    --surface-ambient:
      radial-gradient(70% 55% at 18% 0%, rgba(23, 107, 69, 0.08) 0%, transparent 70%),
      radial-gradient(55% 45% at 100% 30%, rgba(214, 63, 91, 0.06) 0%, transparent 70%);
    --glass-bg: rgba(255, 250, 240, 0.80);
    --scrim: rgba(22, 31, 26, 0.48);
    --text-1: var(--ink-text);
    --text-2: var(--ink-text-2);
    --text-3: var(--ink-text-3);
    --text-disabled: #9A948A;
    --text-inverse: var(--cream-200);
    --text-on-brand: #FFFFFF;
    --text-on-love: #FFFFFF;
    --text-on-accent: #14201A;
    --text-link: var(--emerald-700);
    --text-love: var(--berry-700);
    --border-subtle: rgba(26, 34, 30, 0.06);
    --border-1:      rgba(26, 34, 30, 0.10);
    --border-2:      rgba(26, 34, 30, 0.18);
    --border-input:  #8C8474;
    --border-strong: rgba(26, 34, 30, 0.40);
    --brand:        var(--emerald-600);
    --brand-hover:  var(--emerald-700);
    --brand-press:  var(--emerald-800);
    --brand-fill:   linear-gradient(180deg, #1A7A4E 0%, #176B45 100%);
    --brand-strong: var(--emerald-600);
    --brand-soft:   var(--emerald-100);
    --love:         var(--berry-700);
    --love-hover:   var(--berry-800);
    --love-press:   var(--berry-900);
    --love-strong:  var(--berry-600);
    --love-soft:    var(--berry-100);
    --accent:       var(--lime-400);
    --accent-soft:  #F1F9D6;
    --cream:        var(--cream-200);
    --dim-love: var(--love-600);                   --dim-love-fg: var(--love-700);                   --dim-love-bg: var(--love-100);                   --dim-love-glow: rgba(214, 63, 91, 0.28);
    --dim-green: var(--green-600);                 --dim-green-fg: var(--green-700);                 --dim-green-bg: var(--green-100);                 --dim-green-glow: rgba(30, 138, 88, 0.28);
    --dim-chemistry: var(--chemistry-600);         --dim-chemistry-fg: var(--chemistry-700);         --dim-chemistry-bg: var(--chemistry-100);         --dim-chemistry-glow: rgba(126, 75, 214, 0.26);
    --dim-communication: var(--communication-600); --dim-communication-fg: var(--communication-700); --dim-communication-bg: var(--communication-100); --dim-communication-glow: rgba(47, 111, 214, 0.26);
    --dim-fun: var(--fun-600);                     --dim-fun-fg: var(--fun-700);                     --dim-fun-bg: var(--fun-100);                     --dim-fun-glow: rgba(204, 84, 16, 0.26);
    --dim-lifestyle: var(--lifestyle-600);         --dim-lifestyle-fg: var(--lifestyle-700);         --dim-lifestyle-bg: var(--lifestyle-100);         --dim-lifestyle-glow: rgba(165, 118, 7, 0.26);
    --dim-romance: var(--romance-600);             --dim-romance-fg: var(--romance-700);             --dim-romance-bg: var(--romance-100);             --dim-romance-glow: rgba(214, 71, 140, 0.26);
    --meter-track: var(--cream-400);
    --success: #13714A;  --success-bg: #E3F4EA;
    --warn:    #8A5A00;  --warn-bg:    #FBF0D2;
    --danger:  #C0392B;  --danger-bg:  #FBE6E3;  --danger-fill: #C0392B;
    --info:    #1F5FB8;  --info-bg:    #E3EEFD;
    --focus-color: var(--emerald-700);
    --focus-ring: 0 0 0 var(--focus-offset) var(--surface-base), 0 0 0 calc(var(--focus-offset) + var(--focus-w)) var(--focus-color);
    --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-1: 0 1px 1px rgba(58, 42, 20, 0.05), 0 1px 3px rgba(58, 42, 20, 0.08);
    --shadow-2: 0 1px 2px rgba(58, 42, 20, 0.06), 0 6px 16px -4px rgba(58, 42, 20, 0.10), 0 16px 32px -12px rgba(58, 42, 20, 0.10);
    --shadow-3: 0 2px 4px rgba(58, 42, 20, 0.06), 0 12px 28px -6px rgba(58, 42, 20, 0.14), 0 32px 64px -24px rgba(58, 42, 20, 0.16);
    --shadow-4: 0 4px 8px rgba(58, 42, 20, 0.08), 0 24px 48px -12px rgba(58, 42, 20, 0.20), 0 64px 120px -32px rgba(58, 42, 20, 0.24);
    --glow-emerald: 0 0 0 1px rgba(23, 107, 69, 0.30), 0 0 20px 2px rgba(30, 138, 88, 0.22), 0 0 56px 8px rgba(30, 138, 88, 0.10);
    --glow-berry:   0 0 0 1px rgba(214, 63, 91, 0.30), 0 0 20px 2px rgba(214, 63, 91, 0.20), 0 0 56px 8px rgba(214, 63, 91, 0.08);
    --glow-lime:    0 0 0 1px rgba(122, 158, 27, 0.60), 0 0 16px 2px rgba(183, 228, 60, 0.45);
    --glow-heart-ring: conic-gradient(from 210deg, #D63F5B, #D6478C, #1E8A58, #9CC72A 58%, #1E8A58, #D63F5B);
  }
}

/* --------------------------------------------------------------------------
   4. HIGH TIME LOUNGE sub-theme  -  darker, candle-lit, velvet emerald + amber.
   Always paired with data-theme="dark". Amber replaces lime as the spark.
   -------------------------------------------------------------------------- */
[data-subtheme="hightime"] {
  color-scheme: dark;
  --surface-sunken: var(--ink-975);
  --surface-base:   var(--ink-950);   /* #101613 - darkest surface in the system, still not black */
  --surface-1:      #161E1A;
  --surface-2:      #1E2823;
  --surface-3:      #27332D;
  --surface-brand:  var(--emerald-950);
  --surface-brand-gradient: linear-gradient(180deg, #0C2A1E 0%, #0A1F17 100%);
  --surface-ambient:
    radial-gradient(60% 40% at 50% 0%, rgba(230, 174, 82, 0.12) 0%, transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(15, 61, 43, 0.55) 0%, transparent 70%),
    radial-gradient(40% 40% at 100% 90%, rgba(190, 49, 80, 0.10) 0%, transparent 70%);
  --glass-bg: rgba(22, 30, 26, 0.78);
  --text-1: var(--cream-200);       /* 16.68:1 */
  --text-2: var(--sand-200);        /*  8.36:1 on surface-3 */
  --text-3: var(--sand-300);        /*  5.51:1 on surface-3 */
  --accent: var(--amber-400);
  --accent-soft: rgba(230, 174, 82, 0.14);
  --text-on-accent: var(--amber-900);   /* 9.19:1 on amber */
  --lounge-gold: var(--amber-300);      /* 10.32:1 on surface-1 - lounge headings, prices */
  --focus-color: var(--amber-300);
  --glow-lime: 0 0 0 1px rgba(230, 174, 82, 0.55), 0 0 18px 2px rgba(230, 174, 82, 0.35);
  --glow-candle: 0 0 40px 6px rgba(230, 174, 82, 0.18), 0 0 120px 24px rgba(230, 174, 82, 0.08);
}

/* --------------------------------------------------------------------------
   5. REDUCED MOTION  (OS setting or in-app toggle)
   Movement collapses to instant; opacity fades (--dur-fade) remain.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-ok: 0;
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms;
    --dur-slower: 1ms; --dur-epic: 1ms; --dur-breathe: 1ms;
    --ease-spring: linear; --ease-heart: linear;
  }
  *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduce"] {
  --motion-ok: 0;
  --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms;
  --dur-slower: 1ms; --dur-epic: 1ms; --dur-breathe: 1ms;
  --ease-spring: linear; --ease-heart: linear;
}
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }

/* --------------------------------------------------------------------------
   6. SIGNATURE MOTION PRIMITIVES (keyframes). Timing lives in the components;
   see SPEC-DESIGN.md section 5 for which element uses which, and how long.
   -------------------------------------------------------------------------- */
@keyframes m4l-heart-pulse {        /* like: 0.9 -> 1.28 -> 0.96 -> 1 */
  0%   { transform: scale(0.9); }
  35%  { transform: scale(calc(1 + 0.28 * var(--motion-ok))); }
  65%  { transform: scale(calc(1 - 0.04 * var(--motion-ok))); }
  100% { transform: scale(1); }
}
@keyframes m4l-heart-burst {        /* the ring that leaves the heart on like */
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes m4l-glow-bloom {         /* match: emerald glow blooms and settles */
  0%   { box-shadow: 0 0 0 0 rgba(63, 198, 132, 0); }
  40%  { box-shadow: 0 0 0 6px rgba(63, 198, 132, 0.35), 0 0 80px 24px rgba(63, 198, 132, 0.35); }
  100% { box-shadow: var(--glow-emerald); }
}
@keyframes m4l-ring-spin {          /* glowing-heart ring around a matched profile */
  to { transform: rotate(1turn); }
}
@keyframes m4l-ring-breathe {
  0%, 100% { opacity: 0.55; filter: blur(10px); }
  50%      { opacity: 0.95; filter: blur(14px); }
}
@keyframes m4l-spark {              /* report generation: 4-point spark flares and fades */
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  30%  { transform: scale(1.15) rotate(0deg); opacity: 1; }
  60%  { transform: scale(0.9) rotate(10deg); opacity: 1; }
  100% { transform: scale(0) rotate(45deg); opacity: 0; }
}
@keyframes m4l-grow-in {            /* compliment card grows onto the screen: 0.92 -> 1.02 -> 1 */
  0%   { transform: translateY(calc(24px * var(--motion-ok))) scale(calc(1 - 0.08 * var(--motion-ok))); opacity: 0; }
  60%  { transform: translateY(0) scale(calc(1 + 0.02 * var(--motion-ok))); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes m4l-fade-up {
  from { transform: translateY(calc(12px * var(--motion-ok))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes m4l-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m4l-meter-fill {         /* meters animate from 0 to --value */
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes m4l-shimmer {            /* skeleton loading */
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
/* m4l-smoke-drift removed (BLUEPRINT D-60 deleted the hero smoke; §2.4 T1: no smoke keyframes). */
}

/* css/03-base.css */
/* My420Love · 03-base.css — element styles, typography, focus, selection, scoped theme rooms (@layer base).
   Components use SEMANTIC tokens only (02-tokens.css). SPEC-DESIGN §3, §4, §10, §11. */
@layer base {

  /* ---------------------------------------------------------------- brand-ink custom properties
     The logo SVGs take their colours from these (the UI draws them with <use href="…/logo-*.svg#…">), so the
     wordmark and the heart follow any scoped theme. Values: BLUEPRINT D-59 (420 = solid emerald, #176B45 on cream). */
  :root, [data-theme="dark"], [data-subtheme="hightime"] {
    --logo-ink: #FFF3DD; --logo-num: #2A9A63; --logo-berry: #FF8C9D; --logo-emerald: #2FA36B;
  }
  [data-theme="light"] {
    --logo-ink: #1A221E; --logo-num: #176B45; --logo-berry: #D63F5B; --logo-emerald: #176B45;
  }
  @media (prefers-color-scheme: light) {
    [data-theme="auto"] { --logo-ink: #1A221E; --logo-num: #176B45; --logo-berry: #D63F5B; --logo-emerald: #176B45; }
  }
  :root {
    /* 3% film grain for hero rooms: one static inline SVG, never animated (SPEC-DESIGN §7.1). */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .87 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../%23g)'/%3E%3C/svg%3E");
    --measure: 62ch;
    --header-h: 4.5rem;
  }

  /* ---------------------------------------------------------------- document */
  html {
    font-family: var(--font-text);
    font-size: 100%;
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    font-optical-sizing: auto;
    font-synthesis: none;
    font-kerning: normal;
    color: var(--text-1);
    background-color: var(--surface-base);
    accent-color: var(--brand);
    caret-color: var(--brand-strong);
    scroll-padding-block: calc(var(--topbar-h) + var(--space-4)) calc(var(--bottomnav-h) + var(--space-6));
    scrollbar-color: var(--surface-3) transparent;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    min-height: 100dvh;
    background-color: var(--surface-base);
    background-image: var(--surface-ambient);
    background-repeat: no-repeat;
    background-size: 100% min(120vh, 1100px);
    overflow-x: clip;
  }
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="reduce"]) { scroll-behavior: smooth; }
    @view-transition { navigation: auto; }
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); }

  /* Scoped rooms (SPEC-DESIGN §3.1, §11): any element with data-theme / the lounge re-declares every semantic token;
     it must also paint them. */
  [data-theme]:not(html), [data-subtheme="hightime"]:not(html) {
    color: var(--text-1);
    background-color: var(--surface-base);
  }
  [data-subtheme="hightime"] { background-image: var(--surface-ambient); background-repeat: no-repeat; }

  /* ---------------------------------------------------------------- type */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-variation-settings: var(--fvs-display-text);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-heading);
    color: var(--text-1);
  }
  h1 { font-size: var(--fs-4xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-variation-settings: var(--fvs-display); }
  h2 { font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: var(--fvs-display); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em; }
  h5, h6 { font-family: var(--font-text); font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0; font-variation-settings: normal; }
  /* The italic rule: one or two words per headline, Fraunces italic, love-coloured (large text ≥ 24px: 3:1 floor). */
  :is(h1, h2, h3) em, .c-display em {
    font-style: italic;
    font-weight: inherit;
    color: var(--love-strong);
    font-variation-settings: "SOFT" 100, "opsz" 144;
  }
  h4 em { font-style: italic; color: var(--text-love); }
  /* The lounge: candlelight gold carries the accent word (SPEC-DESIGN §3.7 --lounge-gold, 10.32:1). */
  [data-subtheme="hightime"] :is(h1, h2, h3) em, [data-subtheme="hightime"] .c-display em { color: var(--lounge-gold); }
  p, li, dd { max-width: var(--measure); }
  small { font-size: var(--fs-sm); }
  strong, b { font-weight: var(--fw-semibold); }
  em, i { font-style: italic; }
  sup.tm { position: relative; top: -0.6em; vertical-align: baseline; font-size: 0.62em; line-height: 0; margin-inline-start: 0.03em; font-weight: var(--fw-semibold); letter-spacing: 0; font-style: normal; font-family: var(--font-text); }
  time, data, .u-num, output { font-variant-numeric: var(--numerals); }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
  hr { border: 0; height: 1px; background: var(--border-subtle); margin-block: var(--space-6); }
  abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }
  ::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text-1); }
  ::placeholder { color: var(--text-3); opacity: 1; }

  /* ---------------------------------------------------------------- links */
  a {
    color: var(--text-link);
    text-decoration-line: underline;
    text-decoration-thickness: 0.07em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  }
  @media (hover: hover) { a:hover { text-decoration-color: currentColor; } }

  /* ---------------------------------------------------------------- focus (SPEC-DESIGN §3.6, §10.2)
     A 2px gap in the page colour, then a 3px ring. The transparent outline keeps a visible ring in forced colours. */
  :focus { outline: none; }
  :focus-visible {
    outline: 3px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
  }
  a:focus-visible { border-radius: var(--radius-xs); text-decoration-color: currentColor; }
  :where(input, select, textarea):focus-visible { border-radius: var(--radius-md); }

  /* ---------------------------------------------------------------- form defaults */
  input, select, textarea { font-size: max(16px, 1rem); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
  label { cursor: pointer; }

  /* ---------------------------------------------------------------- icons and emoji (helpers icon() and emoji()) */
  .c-icon {
    width: 1.5rem; height: 1.5rem;
    flex: none;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
    stroke: currentColor;
    fill: none;
  }
  .c-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    font-variant-emoji: emoji;
  }

  /* ---------------------------------------------------------------- media */
  img { border-style: none; }

  /* ---------------------------------------------------------------- forced colours (Windows high contrast, §10.10) */
  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
  }

  /* ---------------------------------------------------------------- print: paper, not a screen */
  @media print {
    html, body { background: #fff; color: #000; }
    body { background-image: none; }
    a { color: inherit; }
  }
}

/* css/04-layout.css */
/* My420Love · 04-layout.css — layout primitives (@layer layout). SPEC-ARCH §7.3, SPEC-DESIGN §5.4.
   Mobile first. Breakpoints (literal; custom properties cannot be used in @media): sm 30rem (480) · md 48rem (768)
   · lg 64rem (1024) · xl 80rem (1280). Knobs are custom properties set on the element: --stack, --cluster, --grid-min… */
@layer layout {

  /* ---------------------------------------------------------------- containers */
  .l-container {
    width: 100%;
    max-width: calc(var(--container-lg) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .l-container--xs   { max-width: calc(var(--container-xs) + 2 * var(--gutter)); }
  .l-container--sm   { max-width: calc(var(--container-sm) + 2 * var(--gutter)); }
  .l-container--feed { max-width: calc(var(--container-feed) + 2 * var(--gutter)); }
  .l-container--app  { max-width: calc(var(--container-app) + 2 * var(--gutter)); }
  .l-container--md   { max-width: calc(var(--container-md) + 2 * var(--gutter)); }
  .l-container--xl   { max-width: calc(var(--container-xl) + 2 * var(--gutter)); }

  /* ---------------------------------------------------------------- flow primitives */
  .l-stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-4)); }
  .l-stack > * { margin-block: 0; }
  .l-stack--xs { --stack: var(--space-2); }
  .l-stack--sm { --stack: var(--space-3); }
  .l-stack--lg { --stack: var(--space-6); }
  .l-stack--xl { --stack: var(--space-10); }

  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--align, center);
    justify-content: var(--justify, flex-start);
    gap: var(--cluster, var(--space-3));
  }
  .l-cluster--sm { --cluster: var(--space-2); }
  .l-cluster--lg { --cluster: var(--space-5); }
  .l-cluster--between { --justify: space-between; }
  .l-cluster--center { --justify: center; }
  .l-cluster--end { --justify: flex-end; }

  .l-grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
  .l-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }

  /* Side by side above --switch-at, stacked below (no media query needed). */
  .l-switcher { display: flex; flex-wrap: wrap; gap: var(--switch-gap, var(--space-5)); }
  .l-switcher > * { flex-grow: 1; flex-basis: calc((var(--switch-at, 40rem) - 100%) * 999); min-width: 0; }

  .l-center { max-inline-size: var(--measure); margin-inline: auto; }
  .l-center--text { text-align: center; }
  .l-center--text > * { margin-inline: auto; }

  .l-cover { display: flex; flex-direction: column; min-block-size: var(--cover-min, 100dvh); }
  .l-cover > .l-cover__main { margin-block: auto; }

  .l-sidebar { display: flex; flex-wrap: wrap; gap: var(--sidebar-gap, var(--space-8)); }
  .l-sidebar > .l-sidebar__side { flex-basis: var(--side-width, 20rem); flex-grow: 1; }
  .l-sidebar > .l-sidebar__main { flex-basis: 0; flex-grow: 999; min-inline-size: 55%; }

  /* A horizontal scroller with snap (the five little cards, chip rows on mobile). */
  .l-reel {
    display: flex;
    gap: var(--reel-gap, var(--space-4));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block: var(--space-2);
    scrollbar-width: none;
  }
  .l-reel::-webkit-scrollbar { display: none; }
  .l-reel > * { flex: 0 0 var(--reel-item, 78%); scroll-snap-align: start; }

  /* ---------------------------------------------------------------- marketing page */
  .l-section { position: relative; padding-block: var(--section-y); isolation: isolate; }
  .l-section--tight { padding-block: calc(var(--section-y) * 0.6); }
  .l-section--flush-top { padding-top: 0; }
  .l-marketing { display: flex; flex-direction: column; min-height: 100dvh; }
  .l-marketing > main { flex: 1 0 auto; }

  /* ---------------------------------------------------------------- the member app shell (SPEC-DESIGN §6.12)
     < 1024: top bar + content + fixed bottom nav. ≥ 1024: 240px left rail + content (max 720) centred. */
  .l-app-shell { min-height: 100dvh; }
  .l-app-shell__main { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
  .l-app-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(var(--container-app) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-5) var(--gutter) calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-12));
  }
  .l-app-main--wide { max-width: calc(var(--container-lg) + 2 * var(--gutter)); }
  @media (min-width: 64rem) {
    .l-app-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
    .l-app-main { padding-block: var(--space-8) var(--space-16); }
  }

  /* ---------------------------------------------------------------- auth / onboarding (centred single card) */
  .l-auth { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; }
  .l-auth__main {
    display: grid;
    /* minmax(0, 1fr): the track may shrink below its widest child, so a scrolling chip row or a long word can
       never widen the page on a phone (an implicit `auto` track grows to min-content). */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: center;
    padding: var(--space-6) var(--gutter) var(--space-16);
  }
  .l-auth__main > * { width: 100%; max-width: var(--container-xs); }
  .l-auth__main--wide > * { max-width: var(--container-sm); }
  @media (min-width: 48rem) { .l-auth__main { align-items: center; padding-top: var(--space-10); } }

  /* ---------------------------------------------------------------- bare (errors, holding) */
  .l-bare { display: flex; flex-direction: column; min-height: 100dvh; }
}

/* css/05-components.css */
/* My420Love · 05-components.css — every Foundation component and the app/marketing chrome (@layer components).
   SPEC-DESIGN §6 (catalog), §5 (space, shape, depth), §10 (accessibility). BEM: .c-block__element--modifier;
   state via .is-* or ARIA; JS hooks are data-* only. Components use semantic tokens; a dimension is selected with
   data-dim="<id>" and read as var(--dim) / --dim-fg / --dim-bg / --dim-glow (aliases --dim-ink, --dim-soft). */
@layer components {

  /* ================================================================ dimension selector (SPEC-ARCH §7.3) */
  [data-dim="love"]          { --dim: var(--dim-love);          --dim-fg: var(--dim-love-fg);          --dim-bg: var(--dim-love-bg);          --dim-glow: var(--dim-love-glow); }
  [data-dim="green"]         { --dim: var(--dim-green);         --dim-fg: var(--dim-green-fg);         --dim-bg: var(--dim-green-bg);         --dim-glow: var(--dim-green-glow); }
  [data-dim="chemistry"]     { --dim: var(--dim-chemistry);     --dim-fg: var(--dim-chemistry-fg);     --dim-bg: var(--dim-chemistry-bg);     --dim-glow: var(--dim-chemistry-glow); }
  [data-dim="communication"] { --dim: var(--dim-communication); --dim-fg: var(--dim-communication-fg); --dim-bg: var(--dim-communication-bg); --dim-glow: var(--dim-communication-glow); }
  [data-dim="fun"]           { --dim: var(--dim-fun);           --dim-fg: var(--dim-fun-fg);           --dim-bg: var(--dim-fun-bg);           --dim-glow: var(--dim-fun-glow); }
  [data-dim="lifestyle"]     { --dim: var(--dim-lifestyle);     --dim-fg: var(--dim-lifestyle-fg);     --dim-bg: var(--dim-lifestyle-bg);     --dim-glow: var(--dim-lifestyle-glow); }
  [data-dim="romance"]       { --dim: var(--dim-romance);       --dim-fg: var(--dim-romance-fg);       --dim-bg: var(--dim-romance-bg);       --dim-glow: var(--dim-romance-glow); }
  [data-dim] { --dim-ink: var(--dim-fg); --dim-soft: var(--dim-bg); }

  /* ================================================================ icon sizes */
  .c-icon--xs { width: 0.875rem; height: 0.875rem; }
  .c-icon--sm { width: 1rem; height: 1rem; }
  .c-icon--md { width: 1.25rem; height: 1.25rem; }
  .c-icon--lg { width: 2rem; height: 2rem; }
  .c-icon--xl { width: 3rem; height: 3rem; }
  .c-icon--mj { --mj-left: var(--logo-berry); --mj-right: var(--logo-emerald); }
  .c-icon--fill { fill: currentColor; }

  /* ================================================================ brand marks (logo SVGs drawn with <use>) */
  .c-wordmark { display: block; width: 8rem; height: auto; aspect-ratio: 560 / 132; overflow: visible; }
  .c-wordmark--lg { width: min(26rem, 100%); }
  @media (min-width: 48rem) { .c-wordmark--header { width: 10.5rem; } }
  .c-mark { display: block; width: 1.75rem; height: 1.75rem; flex: none; overflow: visible; }
  .c-mark--sm { width: 1.25rem; height: 1.25rem; }
  .c-mark--lg { width: 3rem; height: 3rem; }
  .c-mark--xl { width: 6rem; height: 6rem; }
  .c-mark--glow { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--logo-berry) 45%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--logo-emerald) 30%, transparent)); }

  /* ================================================================ eyebrow + display helpers */
  .c-eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .c-eyebrow .c-icon { width: 1rem; height: 1rem; }
  .c-eyebrow--love .c-icon { color: var(--love-strong); }
  .c-eyebrow--brand { color: var(--brand-strong); }
  .c-display { font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display); letter-spacing: var(--tracking-display); line-height: var(--lh-display); }
  .c-display--hero { font-size: var(--fs-5xl); font-weight: var(--fw-display-hero); }
  .c-lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); max-width: var(--measure); }
  .c-stat { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.03em; font-variation-settings: "SOFT" 40, "opsz" 144; font-variant-numeric: var(--numerals); }
  .c-stat small { font-size: 0.5em; vertical-align: 0.72em; margin-inline-start: 0.04em; letter-spacing: 0; }

  /* ================================================================ skip link */
  .c-skip-link {
    position: fixed; z-index: var(--z-toast); top: var(--space-3); left: var(--space-3);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
    background: var(--accent); color: var(--text-on-accent); font-weight: var(--fw-semibold); text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .c-skip-link:focus-visible { transform: none; box-shadow: var(--shadow-3); outline: 3px solid transparent; }

  /* ================================================================ buttons (§6.1) */
  .c-btn {
    --btn-h: 2.75rem; --btn-px: 1.125rem; --btn-fs: var(--fs-md); --btn-ic: 1.25rem;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--btn-h);
    padding: 0 var(--btn-px);
    border: 0; border-radius: var(--radius-full);
    font: var(--fw-semibold) var(--btn-fs)/1.15 var(--font-text);
    letter-spacing: var(--tracking-button);
    text-align: center; text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none; isolation: isolate;
    transition: transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
      background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
  }
  .c-btn .c-icon { width: var(--btn-ic); height: var(--btn-ic); }
  .c-btn:focus-visible { border-radius: var(--radius-full); }
  .c-btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(0.97); }
  .c-btn--sm { --btn-h: 2.25rem; --btn-px: 0.875rem; --btn-fs: var(--fs-sm); --btn-ic: 1.125rem; }
  .c-btn--sm::after { content: ""; position: absolute; inset: -0.25rem 0; }          /* 44px hit area */
  .c-btn--lg { --btn-h: 3.25rem; --btn-px: 1.5rem; }
  .c-btn--xl { --btn-h: 4rem; --btn-px: 2rem; --btn-fs: 1.125rem; --btn-ic: 1.5rem; }
  .c-btn--block { display: flex; width: 100%; }
  .c-btn__label { overflow: hidden; text-overflow: ellipsis; }

  .c-btn--primary, .c-btn--green {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%), var(--brand-fill);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-2), var(--edge-highlight);
  }
  .c-btn--love {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%), var(--love);
    color: var(--text-on-love);
    box-shadow: var(--shadow-2), var(--edge-highlight);
  }
  .c-btn--ghost, .c-btn--secondary {
    background: transparent;
    color: var(--text-1);
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
  }
  .c-btn--tonal {
    background: var(--brand-soft);
    color: var(--text-1);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-strong) 35%, transparent);
  }
  .c-btn--tonal .c-icon { color: var(--brand-strong); }
  .c-btn--match { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--glow-lime); }
  .c-btn--danger { background: var(--danger-fill); color: #FFFFFF; box-shadow: var(--shadow-1); }
  .c-btn--quiet {
    --btn-px: 0.25rem;
    background: none; color: var(--text-link);
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em;
  }
  @media (hover: hover) {
    .c-btn--primary:hover, .c-btn--green:hover { box-shadow: var(--glow-emerald), var(--edge-highlight); }
    .c-btn--love:hover { background-color: var(--love-hover); box-shadow: var(--glow-berry), var(--edge-highlight); }
    .c-btn--ghost:hover, .c-btn--secondary:hover { background: var(--surface-3); }
    .c-btn--tonal:hover { background: color-mix(in srgb, var(--brand-strong) 22%, transparent); }
    .c-btn--match:hover, .c-btn--danger:hover { filter: brightness(1.06); }
    .c-btn--quiet:hover { text-decoration-color: currentColor; }
  }
  .c-btn:disabled, .c-btn[aria-disabled="true"] { opacity: 0.4; box-shadow: none; filter: none; pointer-events: none; }
  /* Loading (§6 states): the label keeps the width; a pulsing mark heart replaces the leading icon. */
  .c-btn__busy { display: none; }
  .c-btn[aria-busy="true"] { pointer-events: none; }
  .c-btn[aria-busy="true"] .c-btn__busy { display: inline-block; }
  .c-btn[aria-busy="true"] .c-btn__icon--lead { display: none; }

  /* ================================================================ icon button (44 circle) */
  .c-icon-btn {
    position: relative;
    display: inline-grid; place-items: center; flex: none;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--surface-3); color: var(--text-1);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-base);
  }
  .c-icon-btn:focus-visible { border-radius: var(--radius-full); }
  .c-icon-btn:active { transform: scale(0.94); }
  .c-icon-btn--ghost { background: transparent; }
  .c-icon-btn--glass { background: var(--glass-bg); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); box-shadow: inset 0 0 0 1px var(--border-1); }
  .c-icon-btn--brand { background: var(--brand-fill); color: var(--text-on-brand); box-shadow: var(--shadow-1), var(--edge-highlight); }
  .c-icon-btn--love { background: transparent; color: var(--love-strong); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--love-strong) 55%, transparent); }
  .c-icon-btn--lg { width: 3.5rem; height: 3.5rem; }
  .c-icon-btn--lg .c-icon { width: 1.75rem; height: 1.75rem; }
  .c-icon-btn--sm { width: 2rem; height: 2rem; }
  .c-icon-btn--sm .c-icon { width: 1.125rem; height: 1.125rem; }
  .c-icon-btn--sm::after { content: ""; position: absolute; inset: -0.375rem; }
  @media (hover: hover) {
    .c-icon-btn:hover { background: var(--surface-2); }
    .c-icon-btn--ghost:hover { background: var(--surface-3); }
    .c-icon-btn--brand:hover { box-shadow: var(--glow-emerald); background: var(--brand-fill); }
    .c-icon-btn--love:hover { background: var(--love-soft); }
  }
  .c-icon-btn[aria-disabled="true"], .c-icon-btn:disabled { opacity: 0.4; pointer-events: none; }
  .c-icon-btn > .c-badge, .c-icon-btn > .c-dot { position: absolute; top: 0.125rem; right: 0.125rem; }
  .c-icon-btn > .c-dot { top: 0.5rem; right: 0.5rem; }

  /* ================================================================ badges, dots, pills (§6.2) */
  .c-badge {
    display: inline-grid; place-items: center;
    min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem;
    border-radius: var(--radius-full);
    background: var(--love);                 /* berry-700: white 11px text needs it (berry-600 is 4.45:1) */
    color: #FFFFFF;
    font: var(--fw-bold) 0.6875rem/1 var(--font-text);
    font-variant-numeric: var(--numerals);
    box-shadow: 0 0 0 2px var(--surface-base);
  }
  .c-badge--neutral { background: var(--surface-3); color: var(--text-1); }
  .c-badge--brand { background: var(--brand); color: var(--text-on-brand); }
  .c-badge--label { height: 1.375rem; padding-inline: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
  .c-dot {
    display: inline-block; width: 0.5rem; height: 0.5rem; flex: none;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--glow-lime);
  }
  .c-status-pill {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    min-height: 1.5rem; padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text);
    letter-spacing: 0.005em;
    white-space: nowrap;
    background: var(--surface-3); color: var(--text-2);
  }
  .c-status-pill .c-icon { width: 0.875rem; height: 0.875rem; }
  .c-status-pill--success { background: var(--success-bg); color: var(--success); }
  .c-status-pill--warn { background: var(--warn-bg); color: var(--warn); }
  .c-status-pill--danger { background: var(--danger-bg); color: var(--danger); }
  .c-status-pill--info { background: var(--info-bg); color: var(--info); }
  .c-status-pill--brand { background: var(--brand-soft); color: var(--text-1); }
  .c-status-pill--brand .c-icon { color: var(--brand-strong); }
  .c-status-pill--founding { background: var(--dim-lifestyle-bg); color: var(--dim-lifestyle-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dim-lifestyle) 35%, transparent); }
  .c-demo-badge {
    display: inline-grid; place-items: center;
    height: 1.25rem; padding: 0 0.4375rem;
    border-radius: var(--radius-xs);
    background: var(--amber-400); color: var(--amber-900);
    font: var(--fw-bold) 0.6875rem/1 var(--font-text);
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(5, 9, 7, 0.35);
    pointer-events: none;
  }

  /* ================================================================ chips (§6.2) */
  .c-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    min-height: 2rem; padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--surface-3); color: var(--text-2);
    font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text);
    letter-spacing: 0;
    white-space: nowrap;
    max-width: 100%;
  }
  .c-chip .c-icon { width: 1rem; height: 1rem; }
  .c-chip .c-emoji { font-size: 1rem; }
  .c-chip[data-dim] { background: var(--dim-bg); color: var(--dim-fg); }
  .c-chip--flag .c-icon { color: var(--brand-strong); }
  .c-chip__shared { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); margin-inline-start: var(--space-1); }
  .c-chip--glass { background: var(--glass-bg); color: var(--text-1); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); box-shadow: inset 0 0 0 1px var(--border-1); }
  .c-chip--locked { filter: blur(0); opacity: 0.6; }
  .c-chip--locked .c-chip__text { filter: blur(3px); }

  /* Choice chips: a real checkbox/radio inside the label (works without JS). */
  .c-chip--choice {
    min-height: 2.25rem; padding-inline: 0.875rem;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast);
  }
  .c-chip--choice::after { content: ""; position: absolute; inset: -0.25rem 0; }       /* 44px hit area */
  .c-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .c-chip__check { display: none; color: var(--brand-strong); }
  .c-chip--choice:has(:checked) { background: var(--brand-soft); color: var(--text-1); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .c-chip--choice:has(:checked) .c-chip__check { display: inline-block; }
  .c-chip--choice:has(:checked) .c-chip__lead { display: none; }
  .c-chip--choice:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .c-chip--choice:has(:disabled) { opacity: 0.4; cursor: not-allowed; }
  @media (hover: hover) { .c-chip--choice:hover:not(:has(:checked)) { color: var(--text-1); background: color-mix(in srgb, var(--surface-3) 70%, var(--text-1) 8%); } }
  .c-chip-group { display: flex; flex-direction: column; gap: var(--space-3); }
  .c-chip-group__items { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-2); }
  .c-chip-group__items--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: var(--space-1); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  /* ================================================================ cards (§5.3, §6) */
  .c-card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--stack-card);
    border-radius: var(--radius-lg);
    background: var(--surface-1); color: var(--text-1);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-2), var(--edge-highlight);
    text-decoration: none;
    min-width: 0;
  }
  .c-card--roomy { padding: var(--space-6); }
  @media (min-width: 48rem) { .c-card--roomy { padding: var(--space-8); } }
  .c-card--flat { box-shadow: none; }
  .c-card--cream { background: var(--cream); color: var(--text-1); border-color: transparent; box-shadow: var(--shadow-3); }
  .c-card--brand { background: var(--surface-brand-gradient); border-color: color-mix(in srgb, var(--emerald-400) 30%, transparent); }
  .c-card--glass { background: var(--glass-bg); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); }
  .c-card--dim { border-color: color-mix(in srgb, var(--dim) 28%, var(--border-1)); background: linear-gradient(180deg, var(--dim-bg), transparent 62%), var(--surface-1); }
  .c-card--dim::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--dim), color-mix(in srgb, var(--dim) 20%, transparent)); }
  a.c-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base); }
  a.c-card:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
  @media (hover: hover) { a.c-card:hover { transform: translateY(calc(-2px * var(--motion-ok))); box-shadow: var(--shadow-3), var(--edge-highlight); border-color: var(--border-2); } }
  .c-card__head { display: flex; align-items: center; gap: var(--space-3); }
  .c-card__icon {
    display: grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--dim-bg, var(--brand-soft)); color: var(--dim, var(--brand-strong));
  }
  .c-card__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .c-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: var(--fvs-display-text); color: var(--text-1); }
  .c-card__body { color: var(--text-2); }
  .c-card__body > * + * { margin-top: var(--space-3); }
  .c-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }

  /* ================================================================ avatars (§6.22) + photo */
  .c-avatar {
    --av: 2.5rem;
    position: relative;
    display: inline-block; flex: none;
    width: var(--av); height: var(--av);
    border-radius: 50%;
    background: var(--surface-3);
  }
  .c-avatar > img, .c-avatar > svg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .c-avatar--24 { --av: 1.5rem; } .c-avatar--32 { --av: 2rem; } .c-avatar--40 { --av: 2.5rem; } .c-avatar--56 { --av: 3.5rem; }
  .c-avatar--72 { --av: 4.5rem; } .c-avatar--96 { --av: 6rem; } .c-avatar--112 { --av: 7rem; } .c-avatar--128 { --av: 8rem; }
  .c-avatar--ringed { box-shadow: 0 0 0 2px var(--surface-base); }
  .c-avatar__active {
    position: absolute; right: 4%; bottom: 4%;
    width: max(0.5rem, calc(var(--av) * 0.16)); height: max(0.5rem, calc(var(--av) * 0.16));
    border-radius: 50%;
    background: var(--brand-strong);
    box-shadow: 0 0 0 2px var(--surface-base);
  }
  .c-avatar > .c-demo-badge { position: absolute; left: 50%; bottom: -0.375rem; transform: translateX(-50%); height: 1rem; font-size: 0.5625rem; padding: 0 0.3rem; }
  .c-avatar-stack { display: inline-flex; }
  .c-avatar-stack > .c-avatar + .c-avatar { margin-inline-start: -1rem; box-shadow: 0 0 0 2px var(--surface-base); }

  .c-photo { position: relative; display: block; border-radius: var(--radius-xl); background: var(--surface-3); aspect-ratio: var(--ratio, 4 / 5); isolation: isolate; }
  .c-photo > img, .c-photo > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .c-photo--square { --ratio: 1 / 1; }
  .c-photo--wide { --ratio: 16 / 9; }
  .c-photo--scrim::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(to top, rgba(11, 17, 14, 0.88) 0%, rgba(11, 17, 14, 0.55) 35%, transparent 55%);
  }
  .c-photo > .c-demo-badge { position: absolute; z-index: 2; top: var(--space-3); left: var(--space-3); }
  .c-photo__pending {
    position: absolute; z-index: 2; left: var(--space-3); bottom: var(--space-3);
  }

  /* ================================================================ the glowing-heart ring (§5.5, D-60)
     Mutual matches only. Crisp 3px conic ring + blurred breathing halo; 3 breaths (~10 s) then still.
     The ring element clips a rotating conic square, so circles and rounded rectangles both work. */
  .c-heart-glow { --ring-r: 50%; position: relative; display: inline-grid; place-items: center; isolation: isolate; border-radius: var(--ring-r); vertical-align: middle; }
  .c-heart-glow > .c-avatar { display: block; }
  .c-heart-glow--rect { --ring-r: var(--radius-xl); display: grid; place-items: stretch; }
  .c-heart-glow__ring, .c-heart-glow__halo { position: absolute; pointer-events: none; z-index: -1; }
  .c-heart-glow__ring { inset: -5px; border-radius: calc(var(--ring-r) + 5px); overflow: hidden; }
  .c-heart-glow--circle .c-heart-glow__ring, .c-heart-glow:not(.c-heart-glow--rect) .c-heart-glow__ring { border-radius: 50%; }
  .c-heart-glow__ring::before { content: ""; position: absolute; inset: -100%; background: var(--glow-heart-ring); }
  .c-heart-glow__halo { inset: -8px; border-radius: calc(var(--ring-r) + 8px); background: var(--glow-heart-ring); filter: blur(12px); opacity: 0.55; }
  .c-heart-glow:not(.c-heart-glow--rect) .c-heart-glow__halo { border-radius: 50%; }
  .c-heart-glow--love .c-heart-glow__halo { background: radial-gradient(closest-side, var(--love-strong), transparent); opacity: 0.6; }
  .c-heart-glow:not(.is-active) .c-heart-glow__ring, .c-heart-glow:not(.is-active) .c-heart-glow__halo { display: none; }
  /* A 2px page-colour gap between the photo and the 3px ring. */
  .c-heart-glow > .c-avatar, .c-heart-glow > .c-photo, .c-avatar.c-heart-glow > img, .c-avatar.c-heart-glow > svg { box-shadow: 0 0 0 2px var(--surface-base); }

  /* ================================================================ dimension meters (§6.3) */
  .c-dim-meter {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    grid-template-areas: "icon label value" "icon track track";
    align-items: center;
    column-gap: var(--space-3); row-gap: var(--space-1-5);
  }
  .c-dim-meter__icon {
    grid-area: icon;
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--dim-bg); color: var(--dim);
  }
  .c-dim-meter__icon .c-icon { width: 1rem; height: 1rem; }
  .c-dim-meter__label { grid-area: label; font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-2); display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
  .c-dim-meter__label .c-icon { width: 1rem; height: 1rem; color: var(--dim); }
  .c-dim-meter__value { grid-area: value; font: var(--fw-bold) var(--fs-sm)/1.3 var(--font-text); font-variant-numeric: var(--numerals); color: var(--dim-fg); }
  .c-dim-meter__track {
    grid-area: track;
    position: relative; display: block;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--meter-track);
    overflow: hidden;
  }
  .c-dim-meter__fill {
    position: absolute; inset: 0 auto 0 0;
    width: calc(var(--v, 0) * 1%);
    border-radius: inherit;
    background: var(--dim);
    transform-origin: left center;
  }
  .c-dim-meter--compact { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; row-gap: var(--space-1); }
  .c-dim-meter--compact .c-dim-meter__icon { display: none; }
  .c-dim-meter--compact .c-dim-meter__track { height: 0.375rem; }
  .c-dim-meter--muted .c-dim-meter__value { color: var(--text-3); font-weight: var(--fw-medium); }
  .c-meters { display: flex; flex-direction: column; gap: var(--space-4); }

  /* Ring meter */
  .c-dim-ring { --size: 6rem; --v: 0; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none; }
  .c-dim-ring--64 { --size: 4rem; } .c-dim-ring--96 { --size: 6rem; } .c-dim-ring--160 { --size: 10rem; }
  .c-dim-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .c-dim-ring__track { fill: none; stroke: var(--meter-track); }
  .c-dim-ring__arc { fill: none; stroke: var(--dim, var(--brand-strong)); stroke-linecap: round; }
  :root:not([data-theme="light"]) .c-dim-ring__arc { filter: drop-shadow(0 0 6px var(--dim-glow, transparent)); }
  .c-dim-ring__overall {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--glow-heart-ring);
    -webkit-mask: conic-gradient(#000 calc(var(--v) * 1%), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--stroke, 0.5rem) - 0.5px), #000 calc(100% - var(--stroke, 0.5rem)));
    -webkit-mask-composite: source-in;
    mask: conic-gradient(#000 calc(var(--v) * 1%), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--stroke, 0.5rem) - 0.5px), #000 calc(100% - var(--stroke, 0.5rem)));
    mask-composite: intersect;
  }
  .c-dim-ring__center { position: relative; display: grid; justify-items: center; gap: 0.125rem; text-align: center; line-height: 1; }
  .c-dim-ring__center .c-icon { width: 1rem; height: 1rem; color: var(--dim, var(--love-strong)); }
  .c-dim-ring--96 .c-dim-ring__center .c-icon { width: 1.25rem; height: 1.25rem; }
  .c-dim-ring--160 .c-dim-ring__center .c-icon { width: 1.75rem; height: 1.75rem; }
  .c-dim-ring__value { font-family: var(--font-display); font-weight: 600; font-variant-numeric: var(--numerals); font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--text-1); }
  .c-dim-ring--96 .c-dim-ring__value { font-size: var(--fs-2xl); }
  .c-dim-ring--160 .c-dim-ring__value { font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); }
  .c-dim-ring__value small { font-size: 0.5em; vertical-align: 0.7em; margin-inline-start: 0.03em; }
  .c-dim-ring__label { font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-top: 0.25rem; }
  .c-dim-ring--64 .c-dim-ring__label { display: none; }

  /* ================================================================ Love Print (D-61) */
  .c-love-print { display: inline-block; max-width: 100%; height: auto; flex: none; overflow: visible; }
  .c-love-print .lp-track { fill: var(--meter-track); }
  .c-love-print .lp-petal { fill: var(--dim); }
  .c-love-print .lp-gap { stroke: var(--lp-bg, var(--surface-1)); }

  .c-love-print .lp-gap-dot { fill: var(--lp-bg, var(--surface-1)); }
  .c-love-print .lp-edge { stroke: var(--border-2); }
  .c-love-print--glow { filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--love-strong) 30%, transparent)); }

  /* ================================================================ score chip + disclaimers */
  .c-score-chip {
    display: inline-flex; align-items: baseline; gap: var(--space-1-5);
    min-height: 2rem; padding: 0.25rem 0.75rem 0.3125rem;
    border-radius: var(--radius-full);
    background: var(--brand-soft); color: var(--text-1);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-strong) 30%, transparent);
    white-space: nowrap;
  }
  .c-score-chip__value { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: var(--numerals); }
  .c-score-chip__value small { font-size: 0.6em; margin-inline-start: 0.02em; }
  .c-score-chip__label { font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); color: var(--text-2); }
  .c-score-chip--pending { align-items: center; background: var(--surface-3); box-shadow: none; }
  .c-score-chip--pending .c-icon { width: 1rem; height: 1rem; color: var(--accent); }
  [data-theme="light"] .c-score-chip--pending .c-icon { color: var(--brand-strong); }
  .c-disclaimer { display: flex; align-items: flex-start; gap: var(--space-1-5); font: var(--fw-regular) var(--fs-xs)/1.45 var(--font-text); color: var(--text-3); }
  .c-disclaimer .c-icon { width: 0.875rem; height: 0.875rem; margin-top: 0.1rem; }
  .c-legal-disclosure {
    display: flex; gap: var(--space-3); align-items: flex-start;
    font: var(--fw-bold) var(--fs-md)/1.45 var(--font-text);
    letter-spacing: 0.01em;
    color: var(--text-1);
    max-width: none;
  }
  .c-legal-disclosure .c-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--text-2); }
  .c-legal-disclosure--boxed { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-1); }

  /* ================================================================ question card (§6.9) */
  .c-choice { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); width: 100%; max-width: var(--container-xs); margin-inline: auto; }
  .c-choice__art { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; margin-inline: auto; }
  @media (min-width: 48rem) { .c-choice__art { width: 10rem; height: 10rem; } }
  .c-choice__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 18px 40px -16px var(--dim-glow, rgba(0, 0, 0, 0.4)); }
  .c-choice__art > .c-emoji { position: relative; font-size: 3.5rem; filter: drop-shadow(0 4px 10px rgba(5, 9, 7, 0.35)); }
  .c-choice__fieldset { display: block; }
  .c-choice__prompt {
    float: left; width: 100%;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.02em;
    font-variation-settings: var(--fvs-display);
    text-align: center; text-wrap: balance;
    color: var(--text-1);
    margin-bottom: var(--space-2);
  }
  @media (min-width: 48rem) { .c-choice__prompt { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 2.75rem); } }
  .c-choice__sub { clear: both; text-align: center; font-size: var(--fs-lg); color: var(--text-2); margin: 0 auto var(--space-2); }
  .c-choice__hint { clear: both; text-align: center; font: var(--fw-semibold) var(--fs-sm)/1.4 var(--font-text); color: var(--text-3); margin: 0 auto var(--space-4); }
  .c-choice__options { clear: both; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
  .c-choice__tile {
    position: relative;
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 4rem; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-base);
  }
  .c-choice__tile:active { transform: scale(0.985); }
  .c-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .c-choice__emoji { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-3); font-size: 1.5rem; }
  .c-choice__label { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 1.3; color: var(--text-1); }
  .c-choice__tick { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--brand-strong); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
  .c-choice__tick .c-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .c-choice__tile:has(:checked) { border-color: var(--brand-strong); background: linear-gradient(0deg, var(--brand-soft), var(--brand-soft)), var(--surface-1); box-shadow: inset 0 0 0 0.5px var(--brand-strong), var(--shadow-1); }
  .c-choice__tile:has(:checked) .c-choice__tick { opacity: 1; transform: none; }
  .c-choice__tile:has(:focus-visible) { box-shadow: var(--focus-ring); }
  @media (hover: hover) { .c-choice__tile:hover:not(:has(:checked)) { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-1) 88%, var(--text-1) 4%); } }
  .c-choice__actions { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
  @media (min-width: 30rem) { .c-choice__options--grid { display: grid; grid-template-columns: 1fr 1fr; } }

  /* ================================================================ form fields (§6.21) */
  .c-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .c-field__label { font: var(--fw-semibold) var(--fs-sm)/1.35 var(--font-text); color: var(--text-2); letter-spacing: 0; }
  .c-field__req { font-weight: var(--fw-regular); color: var(--text-3); }
  .c-field__control { position: relative; display: flex; align-items: center; }
  .c-input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    background: var(--surface-sunken); color: var(--text-1);
    font: var(--fw-regular) max(16px, 1rem)/1.4 var(--font-text);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-fast);
    -webkit-appearance: none; appearance: none;
  }
  textarea.c-input { min-height: 7.5rem; padding-block: 0.875rem; padding-bottom: 2rem; line-height: var(--lh-body); }
  @media (hover: hover) { .c-input:hover:not(:focus) { border-color: var(--border-strong); } }
  .c-input:focus, .c-input:focus-visible { border-color: var(--brand-strong); box-shadow: var(--focus-ring); outline: 3px solid transparent; }
  .c-input:disabled { opacity: 0.5; cursor: not-allowed; }
  .c-input[aria-invalid="true"], .c-field.has-error .c-input { border-color: var(--danger); }
  .c-field__control--prefix .c-input { padding-left: 2.75rem; }
  .c-field__prefix { position: absolute; left: var(--space-4); color: var(--text-3); pointer-events: none; display: flex; }
  .c-field__prefix .c-icon { width: 1.25rem; height: 1.25rem; }
  .c-field__control--suffix .c-input { padding-right: 3.25rem; }
  .c-field__suffix { position: absolute; right: 0.25rem; }
  .c-field__help { font: var(--fw-medium) var(--fs-xs)/1.45 var(--font-text); color: var(--text-3); }
  .c-field__error { display: flex; align-items: flex-start; gap: var(--space-1-5); font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-text); color: var(--danger); }
  .c-field__error .c-icon { width: 1rem; height: 1rem; margin-top: 0.125rem; }
  .c-field__error:empty { display: none; }
  .c-field__counter { position: absolute; right: var(--space-4); bottom: var(--space-2); font: var(--fw-medium) var(--fs-xs)/1 var(--font-text); font-variant-numeric: var(--numerals); color: var(--text-3); pointer-events: none; }
  .c-field__counter.is-over { color: var(--danger); }

  .c-select { position: relative; display: flex; align-items: center; }
  .c-select .c-input { padding-right: 3rem; cursor: pointer; text-overflow: ellipsis; }
  .c-select__chev { position: absolute; right: var(--space-4); width: 1.25rem; height: 1.25rem; color: var(--text-2); pointer-events: none; }
  .c-select--pulldown .c-input { min-height: 3.5rem; padding-left: 3.5rem; font-size: var(--fs-lg); }
  .c-select__lead { position: absolute; left: 0.75rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dim-bg, var(--surface-3)); color: var(--dim, var(--text-2)); font-size: 1.25rem; pointer-events: none; }
  .c-select__lead .c-icon { width: 1.125rem; height: 1.125rem; }
  select.c-input option { background: var(--surface-2); color: var(--text-1); }

  /* Checkbox / radio: 24px box, 44px hit area through the label. */
  .c-check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 2.75rem; padding-block: 0.625rem; cursor: pointer; color: var(--text-1); }
  .c-check__input {
    -webkit-appearance: none; appearance: none;
    display: grid; place-items: center; flex: none;
    width: 1.5rem; height: 1.5rem; margin: -0.0625rem 0 0;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
  }
  .c-check__input[type="radio"] { border-radius: 50%; }
  .c-check__input::before {
    content: ""; width: 0.875rem; height: 0.875rem;
    background: var(--text-on-brand);
    -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat;
    transform: scale(0); transition: transform var(--dur-fast) var(--ease-spring);
    --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  .c-check__input[type="radio"]::before { --check-mask: radial-gradient(circle, #000 45%, transparent 48%); width: 1rem; height: 1rem; }
  .c-check__input:checked { background: var(--brand); border-color: var(--brand); }
  .c-check__input:checked::before { transform: scale(1); }
  .c-check__input:focus-visible { box-shadow: var(--focus-ring); }
  .c-check__text { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--fs-md); line-height: 1.45; }
  .c-check__help { font-size: var(--fs-sm); color: var(--text-3); }

  /* Toggle (switch) */
  .c-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 2.75rem; cursor: pointer; }
  .c-toggle__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
  .c-toggle__label { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-1); }
  .c-toggle__help { font-size: var(--fs-sm); color: var(--text-3); }
  .c-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .c-toggle__track {
    position: relative; flex: none;
    width: 3.25rem; height: 2rem;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--border-input);
    transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
  }
  .c-toggle__thumb {
    position: absolute; top: 0.1875rem; left: 0.1875rem;
    width: 1.625rem; height: 1.625rem;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 1px 3px rgba(5, 9, 7, 0.35);
    transition: transform var(--dur-base) var(--ease-spring);
  }
  .c-toggle:has(:checked) .c-toggle__track { background: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
  .c-toggle:has(:checked) .c-toggle__thumb { transform: translateX(1.25rem); }
  .c-toggle:has(:focus-visible) .c-toggle__track { box-shadow: var(--focus-ring); }
  .c-toggle:has(:disabled) { opacity: 0.45; cursor: not-allowed; }

  /* Segmented control */
  .c-segmented { display: flex; flex-direction: column; gap: var(--space-2); }
  .c-segmented__items { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-full); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-1); }
  .c-segmented__item { position: relative; flex: 1 1 auto; min-width: 0; }
  .c-segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .c-segmented__face {
    display: flex; align-items: center; justify-content: center; gap: var(--space-1-5);
    min-height: 2.5rem; padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font: var(--fw-semibold) var(--fs-sm)/1.15 var(--font-text); color: var(--text-2);
    cursor: pointer; text-align: center;
    transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-fast), box-shadow var(--dur-base);
  }
  .c-segmented__face .c-icon { width: 1.125rem; height: 1.125rem; }
  .c-segmented__input:checked + .c-segmented__face { background: var(--surface-1); color: var(--text-1); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-1); }
  .c-segmented__input:focus-visible + .c-segmented__face { box-shadow: var(--focus-ring); }
  .c-segmented--sm .c-segmented__face { min-height: 2.25rem; }

  /* Date of birth: three selects + the zodiac pop (Dawn) */
  .c-dob__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-2); }
  .c-dob__row .c-input { padding-inline: 0.75rem 1.75rem; }
  .c-dob__row .c-select__chev { right: 0.5rem; width: 1rem; height: 1rem; }
  .c-zodiac { display: flex; min-height: 2rem; }
  .c-zodiac__chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2rem; padding: 0.25rem 0.875rem 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--dim-chemistry-bg); color: var(--dim-chemistry-fg);
    font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text);
  }
  .c-zodiac__glyph { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: color-mix(in srgb, var(--dim-chemistry) 25%, transparent); font-size: 0.9375rem; }
  .c-dob__stop { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-medium); }

  /* ================================================================ sheets and modals (§6.14) — <dialog> */
  .c-sheet, .c-modal {
    position: fixed;
    color: var(--text-1);
    overflow: visible;
  }
  .c-sheet {
    inset: auto 0 0 0;
    width: 100%; max-width: 100%;
    margin: 0;
    max-height: 88dvh;
  }
  .c-sheet::backdrop, .c-modal::backdrop { background: rgba(8, 12, 10, 0.64); background: var(--scrim, rgba(8, 12, 10, 0.64)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .c-sheet__panel, .c-modal__panel {
    display: flex; flex-direction: column;
    max-height: inherit;
    background: var(--surface-2);
    box-shadow: var(--shadow-4), var(--edge-highlight);
    overflow: hidden;
  }
  .c-sheet__panel { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 88dvh; }
  .c-sheet__handle { width: 2.25rem; height: 0.25rem; margin: var(--space-2) auto 0; border-radius: var(--radius-full); background: var(--border-strong); flex: none; }
  .c-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-2) var(--space-6); flex: none; }
  .c-sheet__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.2; letter-spacing: -0.01em; }
  .c-sheet__body { padding: var(--space-2) var(--space-6) var(--space-6); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-4); }
  .c-sheet__actions { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
  .c-modal { inset: 0; margin: auto; width: min(32.5rem, calc(100% - 2 * var(--gutter))); max-height: min(88dvh, 52rem); height: fit-content; }
  .c-modal--wide { width: min(40rem, calc(100% - 2 * var(--gutter))); }
  .c-modal__panel { border-radius: var(--radius-xl); max-height: min(88dvh, 52rem); }
  @media (min-width: 48rem) {
    .c-sheet { inset: 0; margin: auto; width: min(32.5rem, calc(100% - 2 * var(--gutter))); height: fit-content; max-height: min(88dvh, 52rem); }
    .c-sheet__panel { border-radius: var(--radius-xl); max-height: min(88dvh, 52rem); }
    .c-sheet__handle { display: none; }
  }

  /* ================================================================ empty states (§6.16) */
  .c-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    text-align: center;
  }
  .c-empty__emblem { width: 3rem; height: 3rem; color: var(--text-2); opacity: 0.6; margin-bottom: var(--space-1); }
  .c-empty__emblem .c-icon { width: 3rem; height: 3rem; }
  .c-empty__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em; }
  .c-empty__body { color: var(--text-2); max-width: 36ch; }
  .c-empty__action { margin-top: var(--space-2); }

  /* ================================================================ tabs */
  .c-tabs { position: relative; }
  .c-tabs__list { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-subtle); list-style: none; padding: 0; margin: 0; }
  .c-tabs__list::-webkit-scrollbar { display: none; }
  .c-tabs__tab {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-4);
    font: var(--fw-semibold) var(--fs-md)/1 var(--font-text);
    color: var(--text-3); text-decoration: none; white-space: nowrap;
    transition: color var(--dur-fast);
  }
  .c-tabs__tab::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand-strong); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
  .c-tabs__tab[aria-current="page"], .c-tabs__tab[aria-selected="true"] { color: var(--text-1); }
  .c-tabs__tab[aria-current="page"]::after, .c-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
  @media (hover: hover) { .c-tabs__tab:hover { color: var(--text-1); } }
  .c-tabs__count { font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: var(--numerals); padding: 0.125rem 0.4rem; border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-2); }

  /* ================================================================ progress heart (§6.9) */
  .c-progress-heart { display: inline-flex; align-items: center; gap: var(--space-2); }
  .c-progress-heart__svg { width: 1.75rem; height: 1.75rem; overflow: visible; }
  .c-progress-heart__outline { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
  .c-progress-heart__fill { transition: y var(--dur-slower) var(--ease-out), height var(--dur-slower) var(--ease-out); }
  .c-progress-heart__a { stop-color: var(--dim-green); }
  .c-progress-heart__b { stop-color: var(--dim-love); }
  .c-progress-heart__note { font: var(--fw-medium) var(--fs-sm)/1 var(--font-text); color: var(--text-2); }

  /* ================================================================ section header */
  .c-section-header { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44rem; }
  .c-section-header--center { align-items: center; text-align: center; margin-inline: auto; }
  .c-section-header__title { font-size: var(--fs-3xl); }
  .c-section-header--lg .c-section-header__title { font-size: var(--fs-4xl); }
  .c-section-header__lead { font-size: var(--fs-lg); color: var(--text-2); }
  .c-section-header--center .c-section-header__lead { margin-inline: auto; }

  /* ================================================================ skeleton (§5.5) */
  .c-skeleton { display: flex; flex-direction: column; gap: var(--space-3); }
  .c-skeleton__block {
    display: block;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
    background-size: 200% 100%;
  }
  .c-skeleton__line { height: 0.875rem; border-radius: var(--radius-full); }
  .c-skeleton__line:last-child:not(:first-child) { width: 62%; }
  .c-skeleton__avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
  .c-skeleton__card { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
  .c-skeleton__row { display: flex; align-items: center; gap: var(--space-3); }
  .c-skeleton__row > .c-skeleton__stack { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

  /* ================================================================ locked (402 upsell) */
  .c-locked { position: relative; display: grid; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--surface-1); border: 1px solid var(--border-1); }
  .c-locked > * { grid-area: 1 / 1; min-width: 0; }
  .c-locked__content { padding: var(--stack-card); filter: blur(7px) saturate(0.8); opacity: 0.5; pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .c-locked__overlay {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 30%, transparent), color-mix(in srgb, var(--surface-1) 88%, transparent));
  }
  .c-locked__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-2); color: var(--text-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-2); }
  .c-locked__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.2; }
  .c-locked__body { color: var(--text-2); max-width: 32ch; }

  /* ================================================================ install prompt */
  .c-install__hero { display: flex; align-items: center; gap: var(--space-4); }
  .c-install__icon { width: 4rem; height: 4rem; border-radius: 1.125rem; box-shadow: var(--shadow-2); flex: none; }
  .c-install__steps { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; margin: 0; list-style: none; counter-reset: step; }
  .c-install__steps li { display: flex; gap: var(--space-3); align-items: center; color: var(--text-2); counter-increment: step; }
  .c-install__steps li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface-3); color: var(--text-1); font: var(--fw-bold) var(--fs-sm)/1 var(--font-text); }

  /* ================================================================ pagination */
  .c-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
  .c-pagination__status { font: var(--fw-medium) var(--fs-sm)/1 var(--font-text); color: var(--text-3); font-variant-numeric: var(--numerals); }
  .c-pagination__spacer { min-width: 2.75rem; }

  /* ================================================================ toasts (§6.15) — inverted so they pop */
  .c-toast-region {
    position: fixed; z-index: var(--z-toast);
    left: 50%; bottom: calc(var(--toast-offset, var(--space-6)) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(27.5rem, calc(100% - 2 * var(--gutter)));
    display: flex; flex-direction: column; gap: var(--space-2);
    pointer-events: none;
  }
  .l-app .c-toast-region { --toast-offset: calc(var(--bottomnav-h) + var(--space-4)); }
  @media (min-width: 64rem) { .l-app .c-toast-region { --toast-offset: var(--space-6); } }
  .c-toast-region__live { display: flex; flex-direction: column; gap: var(--space-2); }
  .c-toast {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 3rem; padding: 0.625rem 0.625rem 0.625rem var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-inverse); color: var(--text-inverse);
    box-shadow: var(--shadow-3);
    font: var(--fw-medium) 0.9375rem/1.35 var(--font-text);
    pointer-events: auto;
    animation: m4l-fade-up var(--dur-base) var(--ease-out) both;
  }
  .c-toast[data-theme] { background: var(--surface-base); color: var(--text-1); }
  .c-toast.is-leaving { animation: m4l-toast-out var(--dur-fast) var(--ease-in) both; }
  .c-toast__icon { flex: none; display: grid; place-items: center; }
  .c-toast__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .c-toast--success .c-toast__icon { color: var(--success); }
  .c-toast--error .c-toast__icon { color: var(--danger); }
  .c-toast--warning .c-toast__icon { color: var(--warn); }
  .c-toast--info .c-toast__icon { color: var(--info); }
  .c-toast--love .c-toast__icon { color: var(--love-strong); }
  .c-toast:not([data-theme]) .c-toast__icon { color: inherit; }
  .c-toast--love { box-shadow: var(--shadow-3), var(--glow-emerald); }
  .c-toast__text { flex: 1; min-width: 0; padding-block: 0.125rem; }
  .c-toast__action { flex: none; min-height: 2.25rem; padding: 0 var(--space-3); border-radius: var(--radius-full); font: var(--fw-bold) 0.9375rem/1 var(--font-text); color: var(--text-link); }
  .c-toast:not([data-theme]) .c-toast__action { color: inherit; text-decoration: underline; }
  .c-toast__close { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: inherit; opacity: 0.7; }
  .c-toast__close .c-icon { width: 1.125rem; height: 1.125rem; }

  /* ================================================================ banners (demo, preview, founding, offline) */
  .c-banner {
    position: relative; z-index: calc(var(--z-sticky) + 1);
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 0.5rem var(--gutter);
    font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-text);
    text-align: center;
    background: var(--surface-2); color: var(--text-1);
    border-bottom: 1px solid var(--border-subtle);
  }
  .c-banner .c-icon { width: 1rem; height: 1rem; flex: none; }
  .c-banner a { color: inherit; font-weight: var(--fw-semibold); }
  .c-banner--demo { background: color-mix(in srgb, var(--amber-400) 16%, var(--surface-base)); }
  .c-banner--demo .c-icon { color: var(--warn); }
  .c-banner--preview { background: color-mix(in srgb, var(--info) 12%, var(--surface-base)); }
  .c-banner--founding { background: var(--surface-brand-gradient); color: var(--cream-200); border-bottom-color: rgba(255, 243, 221, 0.1); }
  .c-banner--founding a { color: var(--cream-200); }
  .c-banner--offline { background: var(--warn-bg); color: var(--text-1); }
  .c-banner__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 10px 1px rgba(183, 228, 60, 0.6); flex: none; }

  /* ================================================================ marketing header (§6.13) */
  .c-site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base);
  }
  [data-scrolled] .c-site-header, .c-site-header.is-solid {
    background: color-mix(in srgb, var(--surface-base) 84%, transparent);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: 0 1px 0 var(--border-subtle);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-scrolled] .c-site-header, .c-site-header.is-solid { background: var(--surface-2); }
  }
  .c-site-header__inner { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-h); }
  .c-site-header__brand { display: inline-flex; align-items: center; padding-block: var(--space-2); border-radius: var(--radius-xs); color: var(--text-1); margin-inline-end: auto; }
  .c-site-nav { display: none; }
  .c-site-nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
  .c-site-nav__link {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font: var(--fw-medium) 0.9375rem/1 var(--font-text); color: var(--text-2); text-decoration: none;
    transition: color var(--dur-fast), background-color var(--dur-fast);
  }
  .c-site-nav__link[aria-current="page"] { color: var(--text-1); }
  @media (hover: hover) { .c-site-nav__link:hover { color: var(--text-1); background: var(--surface-3); } }
  .c-site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
  .c-site-header__login { display: none; }
  @media (min-width: 64rem) {
    .c-site-nav { display: block; margin-inline-end: var(--space-2); }
    .c-site-header__login { display: inline-flex; }
    .c-site-menu { display: none; }
  }
  /* The mobile menu: a <details> disclosure, so it works without JS. */
  .c-site-menu { position: relative; }
  .c-site-menu > summary { list-style: none; }
  .c-site-menu > summary::-webkit-details-marker { display: none; }
  .c-site-menu__panel {
    position: absolute; right: 0; top: calc(100% + var(--space-2));
    width: min(18rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-4), inset 0 0 0 1px var(--border-1);
    animation: m4l-fade-up var(--dur-base) var(--ease-out) both;
  }
  .c-site-menu__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
  .c-site-menu__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3rem; padding: 0 var(--space-4); border-radius: var(--radius-md); color: var(--text-1); text-decoration: none; font-weight: var(--fw-medium); }
  .c-site-menu__link .c-icon { width: 1.125rem; height: 1.125rem; color: var(--text-3); }
  @media (hover: hover) { .c-site-menu__link:hover { background: var(--surface-3); } }
  .c-site-menu__sep { height: 1px; background: var(--border-subtle); margin: var(--space-2) var(--space-3); }
  .c-site-menu[open] > summary { background: var(--surface-2); }
  .c-cta-short { display: none; }
  @media (max-width: 23.99rem) { .c-cta-long { display: none; } .c-cta-short { display: inline; } }

  /* ================================================================ marketing footer (§7.2 #10) */
  .c-site-footer {
    background: var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--space-16) var(--space-10);
    color: var(--text-3);
    font-size: var(--fs-sm);
    margin-top: auto;
  }
  .c-site-footer__top { display: grid; gap: var(--space-10); }
  @media (min-width: 48rem) { .c-site-footer__top { grid-template-columns: minmax(14rem, 1.2fr) 3fr; } }
  .c-site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
  .c-site-footer__tagline { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--text-2); font-variation-settings: var(--fvs-display-text); }
  .c-site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  @media (min-width: 48rem) { .c-site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .c-site-footer__heading { font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-4); }
  .c-site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
  .c-site-footer__list a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--text-3); text-decoration: none; font-weight: var(--fw-medium); }
  @media (hover: hover) { .c-site-footer__list a:hover { color: var(--text-1); } }
  .c-site-footer__notices { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
  .c-site-footer__notices p { max-width: none; }
  .c-site-footer__age { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-weight: var(--fw-semibold); }
  .c-site-footer__age-badge { display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.5rem; padding: 0 0.375rem; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-1); font: var(--fw-bold) var(--fs-xs)/1 var(--font-text); letter-spacing: 0.02em; }
  .c-site-footer__bottom p { max-width: none; }
  .c-site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
  .c-site-footer .c-legal-disclosure { font-size: var(--fs-md); color: var(--text-2); }

  /* ================================================================ theme quick toggle */
  .c-theme-toggle .c-segmented__items { width: auto; }
  .c-theme-toggle .c-segmented__face { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--fs-xs); }

  /* ================================================================ app top bar (§6.13) */
  .c-topbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
    min-height: var(--topbar-h);
    padding: 0 max(var(--space-2), calc(var(--gutter) - var(--space-2)));
    padding-top: env(safe-area-inset-top, 0px);
    transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  }
  [data-scrolled] .c-topbar {
    background: var(--glass-bg);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: 0 1px 0 var(--border-subtle);
  }
  .c-topbar__home { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); }
  .c-topbar__title { justify-self: center; font: var(--fw-semibold) 1.0625rem/1.2 var(--font-text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .c-topbar__title--display { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); }
  .c-topbar__actions { display: flex; align-items: center; gap: var(--space-1); }
  @media (min-width: 64rem) {
    .c-topbar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-8); }
    .c-topbar__home { display: none; }
    .c-topbar__title { justify-self: start; font-size: var(--fs-xl); font-family: var(--font-display); font-weight: var(--fw-display); }
    .c-topbar:has(> .c-icon-btn:first-child) { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }   /* child screens keep their back button in line */
  }

  /* ================================================================ bottom nav (§6.12) */
  .c-bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-nav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--glass-bg);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    border-top: 1px solid var(--border-subtle);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .c-bottom-nav { background: var(--surface-2); } }
  .c-bottom-nav__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 36rem; margin: 0 auto; padding: 0; list-style: none; }
  .c-bottom-nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem;
    height: var(--bottomnav-h);
    color: var(--text-3); text-decoration: none;
    font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text);
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .c-bottom-nav__icon { position: relative; display: grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--radius-full); transition: background-color var(--dur-base) var(--ease-spring); }
  .c-bottom-nav__icon .c-icon { width: 1.5rem; height: 1.5rem; }
  .c-bottom-nav__item[aria-current="page"] { color: var(--text-1); }
  .c-bottom-nav__item[aria-current="page"] .c-bottom-nav__icon { background: var(--brand-soft); color: var(--brand-strong); }
  .c-bottom-nav__item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
  .c-bottom-nav__item:focus-visible { box-shadow: none; }
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon { box-shadow: var(--focus-ring); }
  .c-bottom-nav__icon > .c-badge { position: absolute; top: -0.25rem; right: 0.5rem; }
  .c-bottom-nav__icon > .c-dot { position: absolute; top: 0.125rem; right: 0.875rem; }
  @media (min-width: 64rem) { .c-bottom-nav { display: none; } }

  /* ================================================================ desktop rail (§6.12) */
  .c-rail {
    display: none; flex-direction: column; gap: var(--space-6);
    padding: var(--space-6) var(--space-4) var(--space-5);
    border-right: 1px solid var(--border-subtle);
    background: var(--surface-base);
  }
  @media (min-width: 64rem) { .c-rail { position: sticky; top: 0; display: flex; height: 100dvh; } }
  .c-rail__brand { display: inline-flex; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
  .c-rail__list { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
  .c-rail__item {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 3rem; padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-2); text-decoration: none;
    font: var(--fw-semibold) var(--fs-md)/1 var(--font-text);
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }
  .c-rail__item .c-icon { width: 1.375rem; height: 1.375rem; }
  .c-rail__item[aria-current="page"] { background: var(--brand-soft); color: var(--text-1); }
  .c-rail__item[aria-current="page"] .c-icon { color: var(--brand-strong); }
  .c-rail__item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
  @media (hover: hover) { a.c-rail__item:not([aria-current="page"]):hover { background: var(--surface-3); color: var(--text-1); } }
  .c-rail__item > .c-badge { margin-inline-start: auto; }
  .c-rail__spacer { flex: 1; }
  .c-rail__mj { --btn-px: 0.875rem; }

  /* ================================================================ the Mary Jane pill (§6.12) */
  .c-mj-pill {
    position: fixed; z-index: var(--z-nav);
    left: 50%; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-4));
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 3.25rem; padding: 0 var(--space-5) 0 var(--space-4);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-2);
    color: var(--text-1); text-decoration: none;
    font: var(--fw-semibold) var(--fs-md)/1 var(--font-text);
    white-space: nowrap;
    transition: padding var(--dur-base) var(--ease-standard), gap var(--dur-base), box-shadow var(--dur-base);
  }
  .c-mj-pill .c-icon { width: 1.5rem; height: 1.5rem; }
  .c-mj-pill > .c-dot { position: absolute; top: 0.5rem; right: 0.625rem; }
  .c-mj-pill.is-collapsed { padding: 0; width: 3.25rem; justify-content: center; gap: 0; }
  .c-mj-pill.is-collapsed .c-mj-pill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  @media (min-width: 64rem) { .c-mj-pill { display: none; } }

  /* ================================================================ prose (legal pages, markdown()) */
  .c-prose { color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
  .c-prose > * + * { margin-top: var(--space-4); }
  .c-prose h2 { font-size: var(--fs-2xl); margin-top: var(--space-10); color: var(--text-1); }
  .c-prose h3 { font-size: var(--fs-xl); margin-top: var(--space-8); color: var(--text-1); }
  .c-prose ul, .c-prose ol { padding-inline-start: 1.25rem; }
  .c-prose li + li { margin-top: var(--space-2); }
  .c-prose strong { color: var(--text-1); }

  /* ================================================================ forced colours (§10.10): rings and glows drop */
  @media (forced-colors: active) {
    .c-heart-glow__ring, .c-heart-glow__halo, .c-dim-ring__overall { display: none; }
    .c-card, .c-empty, .c-choice__tile, .c-toast, .c-sheet__panel, .c-modal__panel { border: 1px solid CanvasText; }
    .c-btn, .c-chip, .c-status-pill, .c-segmented__face, .c-icon-btn { border: 1px solid ButtonText; }
    .c-dim-meter__fill, .c-toggle__thumb { forced-color-adjust: none; background: Highlight; }
  }

  /* ================================================================ auth chrome (layouts/auth) */
  .c-auth-header {
    display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: var(--space-2);
    min-height: var(--header-h);
    padding: var(--space-2) max(var(--space-2), calc(var(--gutter) - var(--space-2)));
  }
  .c-auth-header__brand { justify-self: center; display: inline-flex; padding: var(--space-2); border-radius: var(--radius-xs); }
  .c-auth-header__side { display: flex; align-items: center; min-width: 2.75rem; }
  .c-auth-header__side--end { justify-content: flex-end; }
  .c-auth-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--gutter) var(--space-10); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
  .c-auth-footer p { max-width: none; }
  .c-auth-footer a { color: var(--text-3); }
}

/* css/06-motion.css */
/* My420Love · 06-motion.css — motion classes (@layer components). SPEC-DESIGN §5.5, BLUEPRINT D-60.
   "Alive, not busy": motion marks emotional moments only. Nothing loops forever: the matched ring breathes three
   times (~10 s) and rests. Everything here is gated twice — the OS setting (prefers-reduced-motion) and the in-app
   setting (<html data-motion="reduce">) — and the tokens already collapse durations and distances under both.
   Keyframes live in 02-tokens.css (m4l-*); the few extra ones below are motion-layer additions. No smoke. */
@layer components {

  @keyframes m4l-ring-turn { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
  @keyframes m4l-ring-fill { from { stroke-dashoffset: 100; } }
  @keyframes m4l-sheet-in { from { transform: translateY(calc(100% * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes m4l-modal-in { from { transform: scale(calc(1 - 0.04 * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes m4l-toast-out { to { transform: translateY(calc(8px * var(--motion-ok))); opacity: 0; } }
  @keyframes m4l-heart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes m4l-pop { 0% { transform: scale(1); } 45% { transform: scale(calc(1 + 0.06 * var(--motion-ok))); } 100% { transform: scale(1); } }
  @keyframes m4l-mark-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(calc(1 + 0.12 * var(--motion-ok))); opacity: 0.7; } }
  @keyframes m4l-orbit { from { transform: rotate(0turn) translateX(var(--orbit-r, 3rem)) rotate(0turn); } to { transform: rotate(1turn) translateX(var(--orbit-r, 3rem)) rotate(-1turn); } }

  /* Dialog entrances (fade survives reduced motion because only the distance collapses). */
  .c-sheet[open] .c-sheet__panel { animation: m4l-sheet-in var(--dur-slow) var(--ease-out) both; }
  @media (min-width: 48rem) { .c-sheet[open] .c-sheet__panel { animation: m4l-modal-in var(--dur-base) var(--ease-out) both; } }
  .c-modal[open] .c-modal__panel { animation: m4l-modal-in var(--dur-base) var(--ease-out) both; }
  .c-sheet[open]::backdrop, .c-modal[open]::backdrop { animation: m4l-fade var(--dur-base) var(--ease-standard) both; }
  .c-sheet.is-closing .c-sheet__panel, .c-modal.is-closing .c-modal__panel { animation: m4l-toast-out var(--dur-fast) var(--ease-in) both; }

  @media (prefers-reduced-motion: no-preference) {

    /* ---- the glowing-heart ring (mutual match only): 3 breaths, one slow turn, then still */
    :root:not([data-motion="reduce"]) .c-heart-glow.is-active .c-heart-glow__ring::before { animation: m4l-ring-turn 9.6s var(--ease-standard) 1 both; }
    :root:not([data-motion="reduce"]) .c-heart-glow.is-active .c-heart-glow__halo { animation: m4l-ring-breathe var(--dur-breathe) var(--ease-breathe) 3 both; }
    :root:not([data-motion="reduce"]) .c-heart-glow[data-offscreen] .c-heart-glow__ring::before,
    :root:not([data-motion="reduce"]) .c-heart-glow[data-offscreen] .c-heart-glow__halo { animation-play-state: paused; }

    /* ---- meters fill on entry */
    :root:not([data-motion="reduce"]) .c-dim-meter__fill { animation: m4l-meter-fill var(--dur-slower) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
    :root:not([data-motion="reduce"]) .c-dim-ring__arc { animation: m4l-ring-fill var(--dur-slower) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

    /* ---- skeleton shimmer (a load state, not decoration) */
    :root:not([data-motion="reduce"]) .c-skeleton__block { animation: m4l-shimmer 1.4s linear infinite; }

    /* ---- choice tiles: the heart tick pulses at 60% scale */
    :root:not([data-motion="reduce"]) .c-choice__tile:has(:checked) .c-choice__tick .c-icon { animation: m4l-heart-pulse 420ms var(--ease-heart) both; }
    :root:not([data-motion="reduce"]) .c-chip--choice:has(:checked) { animation: m4l-pop var(--dur-base) var(--ease-spring); }

    /* ---- the loading heart (> 600 ms waits; buttons in aria-busy) */
    :root:not([data-motion="reduce"]) .fx-mark-pulse, :root:not([data-motion="reduce"]) .c-btn[aria-busy="true"] .c-btn__busy { animation: m4l-mark-pulse 1.1s var(--ease-breathe) infinite; }

    /* ---- one-time emphasis classes (JS adds them; core/motion.js) */
    :root:not([data-motion="reduce"]) .fx-pulse { animation: m4l-heart-pulse 420ms var(--ease-heart) both; }
    :root:not([data-motion="reduce"]) .fx-burst { position: relative; }
    :root:not([data-motion="reduce"]) .fx-burst::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--love-strong); animation: m4l-heart-burst 520ms var(--ease-out) both; pointer-events: none; }
    :root:not([data-motion="reduce"]) .fx-glow { animation: m4l-glow-bloom var(--dur-epic) var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .fx-grow-in { animation: m4l-grow-in var(--dur-slower) var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .fx-fade-up { animation: m4l-fade-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
    :root:not([data-motion="reduce"]) .fx-spark { animation: m4l-spark 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms); }
    :root:not([data-motion="reduce"]) .fx-cta-bloom { animation: m4l-glow-bloom 900ms var(--ease-out) 600ms both; }
    :root:not([data-motion="reduce"]) .fx-draw path { stroke-dasharray: 1; animation: m4l-heart-draw var(--dur-epic) var(--ease-out) 500ms both; }
  }

  /* Reduced motion (OS or in-app): the ring is a still, complete composition — crisp ring + halo at 70%. */
  @media (prefers-reduced-motion: reduce) {
    .c-heart-glow__halo { opacity: 0.7; filter: blur(12px); animation: none; }
    .c-heart-glow__ring::before { animation: none; }
  }
  :root[data-motion="reduce"] .c-heart-glow__halo { opacity: 0.7; filter: blur(12px); animation: none; }
  :root[data-motion="reduce"] .c-heart-glow__ring::before { animation: none; }
  :root[data-motion="reduce"] .fx-mark-pulse { animation: none; }
}

/* css/07-utilities.css */
/* My420Love · 07-utilities.css — single-purpose helpers (@layer utilities; they beat components by layer order,
   never by). SPEC-ARCH §7.3. Keep this list short: a utility used in one place is a component smell. */
@layer utilities {
  .u-visually-hidden, .u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .u-text-center { text-align: center; }
  .u-text-left { text-align: left; }
  .u-nowrap { white-space: nowrap; }
  .u-balance { text-wrap: balance; }
  .u-measure { max-width: var(--measure); }
  .u-mx-auto { margin-inline: auto; }
  .u-num { font-variant-numeric: var(--numerals); }
  .u-italic { font-style: italic; }
  .u-display { font-family: var(--font-display); font-variation-settings: var(--fvs-display-text); }
  .u-text-1 { color: var(--text-1); }
  .u-text-2, .u-muted { color: var(--text-2); }
  .u-text-3, .u-faint { color: var(--text-3); }
  .u-love { color: var(--text-love); }
  .u-brand { color: var(--brand-strong); }
  .u-sm { font-size: var(--fs-sm); }
  .u-xs { font-size: var(--fs-xs); }
  .u-lg { font-size: var(--fs-lg); }
  .u-semibold { font-weight: var(--fw-semibold); }
  .u-w-full { width: 100%; }
  .u-flex-1 { flex: 1 1 0; min-width: 0; }
  .u-mt-0 { margin-top: 0; }
  .u-mt-1 { margin-top: var(--space-1); }
  .u-mt-2 { margin-top: var(--space-2); }
  .u-mt-3 { margin-top: var(--space-3); }
  .u-mt-4 { margin-top: var(--space-4); }
  .u-mt-6 { margin-top: var(--space-6); }
  .u-mt-8 { margin-top: var(--space-8); }
  .u-mt-12 { margin-top: var(--space-12); }
  .u-mb-0 { margin-bottom: 0; }
  .u-mb-4 { margin-bottom: var(--space-4); }
  .u-dim { color: var(--dim-fg); }
  /* A cream room inside any page (the "fresh light sections" rhythm) — prefer data-theme="light" on the section. */
  .u-cream-section { background: var(--cream-100); color: var(--ink-text); }
  .u-ambient { background-image: var(--surface-ambient); background-repeat: no-repeat; }
  .u-grain { position: relative; isolation: isolate; }
  .u-grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.035; pointer-events: none; mix-blend-mode: overlay; }
  @media (max-width: 47.99rem) { .u-hide-mobile { display: none; } }
  @media (min-width: 48rem) { .u-hide-desktop, .u-mobile-only { display: none; } }
  @media (max-width: 63.99rem) { .u-lg-only { display: none; } }
  @media (min-width: 64rem) { .u-below-lg { display: none; } }
}

/* The last word: [hidden] always hides, whatever display a component sets (no !important needed at this layer). */
@layer overrides {
  [hidden] { display: none; }
}

/* modules/ads.css */
/* My420Love · ads.css — "From our family of sites" (component ad-band; Dawn 2026-10-01). Editorial partner placements
   like a luxury magazine's: a fine gold hairline, the Fraunces display serif for each domain, a small "Sponsored" label,
   generous space and a quiet hover. Semantic tokens only (gold = the theme-aware lifestyle dimension), so dark, light,
   device and the High Time lounge all work. No images, no scripts. Motion multiplies by --motion-ok (reduced motion =
   no movement); forced colours get real outlines; print hides the band. */
@layer modules {
  .c-ads {
    --ads-gold: color-mix(in srgb, var(--dim-lifestyle) 62%, transparent);
    --ads-hair: color-mix(in srgb, var(--dim-lifestyle) 28%, transparent);
    --ads-gold-text: var(--dim-lifestyle-fg);
    position: relative;
    isolation: isolate;
    color: var(--text-1);
  }
  .c-ads--marketing {
    padding-block: clamp(var(--space-12), 2rem + 5vw, var(--space-24));
    background: var(--surface-base);
  }
  .c-ads--marketing::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(55% 70% at 50% 0%, color-mix(in srgb, var(--dim-lifestyle) 9%, transparent), transparent 72%);
  }
  .c-ads--app { margin-top: var(--space-12); padding-top: var(--space-2); }

  /* ---------------------------------------------------------------- the head: rule · eyebrow · Sponsored · rule */
  .c-ads__head {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: clamp(var(--space-6), 4vw, var(--space-10));
  }
  .c-ads__rule { flex: 1 1 2rem; min-width: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--ads-gold)); }
  .c-ads__rule:last-child { background: linear-gradient(90deg, var(--ads-gold), transparent); }
  .c-ads__eyebrow {
    margin: 0;
    font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-text);
    letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
    color: var(--ads-gold-text);
  }
  .c-ads__tag {
    display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.625rem;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-2);
    font: var(--fw-medium) 0.625rem/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--text-3);
  }
  @media (max-width: 29.99rem) {
    .c-ads__rule { display: none; }
  }

  /* ---------------------------------------------------------------- family cards */
  .c-ads__grid {
    display: grid; gap: clamp(var(--space-4), 2vw, var(--space-6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
    margin: 0; padding: 0;
  }
  .c-ads__grid > li { display: flex; min-width: 0; }
  .c-adcard {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2);
    width: 100%; min-width: 0;
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--edge-highlight), inset 0 0 0 1px var(--ads-hair);
    outline: 1px solid transparent; outline-offset: -1px;            /* a real edge in forced colours */
    color: var(--text-1); text-decoration: none;
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-slow) var(--ease-out);
  }
  .c-adcard__ornament { display: block; width: 2.5rem; height: 1px; margin-bottom: var(--space-4); background: var(--ads-gold); }
  .c-adcard__domain {
    font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display);
    font-size: clamp(1.3125rem, 1.05rem + 0.5vw, 1.5625rem); line-height: 1.12; letter-spacing: -0.005em;
    color: var(--text-1); overflow-wrap: anywhere;
  }
  .c-adcard__tld { color: var(--text-3); font-style: italic; font-weight: var(--fw-regular); letter-spacing: 0; }
  .c-adcard__headline {
    font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fvs-display-text);
    font-size: var(--fs-lg); line-height: 1.3; color: var(--ads-gold-text);
  }
  .c-adcard__blurb { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); }
  .c-adcard__cta, .c-adsale__cta, .c-ads__house-cta {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--text-1);
  }
  .c-adcard__cta { margin-top: auto; padding-top: var(--space-5); color: var(--ads-gold-text); }
  .c-adcard__cta .c-icon, .c-adsale__cta .c-icon, .c-ads__house-cta .c-icon {
    width: 0.875rem; height: 0.875rem; color: var(--ads-gold-text);
    transition: transform var(--dur-base) var(--ease-out);
  }
  @media (hover: hover) {
    .c-adcard:hover {
      box-shadow: var(--edge-highlight), inset 0 0 0 1px var(--ads-gold), var(--shadow-2);
      transform: translateY(calc(-2px * var(--motion-ok)));
    }
    .c-adcard:hover .c-adcard__cta .c-icon, .c-adsale__item:hover .c-adsale__cta .c-icon {
      transform: translate(calc(2px * var(--motion-ok)), calc(-2px * var(--motion-ok)));
    }
  }
  .c-adcard:focus-visible { border-radius: var(--radius-lg); box-shadow: var(--focus-ring); }

  /* ---------------------------------------------------------------- premium domains for sale or rent */
  .c-adsale {
    display: grid; gap: var(--space-5);
    margin-top: clamp(var(--space-4), 2vw, var(--space-6));
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--edge-highlight), inset 0 0 0 1px var(--ads-hair);
    outline: 1px solid transparent; outline-offset: -1px;
  }
  @media (min-width: 64rem) {
    .c-ads--marketing .c-adsale { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-10); padding: var(--space-10); }
  }
  .c-adsale__title {
    margin: 0;
    font-family: var(--font-display); font-style: italic; font-weight: var(--fw-display); font-variation-settings: var(--fvs-display);
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.12; letter-spacing: var(--tracking-heading);
  }
  .c-adsale__blurb { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
  .c-adsale__list {
    display: grid; gap: 0 var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: 0; padding: 0;
  }
  .c-adsale__list > li { min-width: 0; }
  .c-adsale__item {
    display: grid; gap: 0.3rem;
    padding: var(--space-4) var(--space-1);
    border-top: 1px solid var(--ads-hair);
    color: var(--text-1); text-decoration: none;
  }
  .c-adsale__domain {
    font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display-text);
    font-size: var(--fs-xl); line-height: 1.2; overflow-wrap: anywhere;
    transition: color var(--dur-fast) var(--ease-standard);
  }
  .c-adsale__note { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
  .c-adsale__cta { margin-top: 0.25rem; color: var(--ads-gold-text); }
  @media (hover: hover) { .c-adsale__item:hover .c-adsale__domain { color: var(--ads-gold-text); } }
  .c-adsale__item:focus-visible { border-radius: var(--radius-sm); }

  /* ---------------------------------------------------------------- the house slot */
  .c-ads__house { margin: clamp(var(--space-6), 3vw, var(--space-10)) 0 0; text-align: center; max-width: none; }
  .c-ads__house-link {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: var(--space-1) var(--space-3);
    max-width: 46rem; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-2); text-decoration: none;
  }
  .c-ads__house-title { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--text-1); }
  .c-ads__house-blurb { font-size: var(--fs-sm); }
  .c-ads__house-cta { color: var(--ads-gold-text); }
  @media (hover: hover) {
    .c-ads__house-link:hover .c-ads__house-title { text-decoration: underline; text-decoration-color: var(--ads-gold); text-underline-offset: 0.2em; }
    .c-ads__house-link:hover .c-ads__house-cta .c-icon { transform: translateX(calc(3px * var(--motion-ok))); }
  }

  /* ---------------------------------------------------------------- compact (member app) */
  .c-ads--app .c-ads__head { margin-bottom: var(--space-5); }
  .c-ads--app .c-ads__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
  .c-ads--app .c-adcard { padding: var(--space-6) var(--space-5) var(--space-5); }
  .c-ads--app .c-adcard__ornament { margin-bottom: var(--space-3); }
  .c-ads--app .c-adcard__domain { font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); }
  .c-ads--app .c-adcard__headline { font-size: var(--fs-md); }
  .c-ads--app .c-adsale { margin-top: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-4); gap: var(--space-3); }
  .c-ads--app .c-adsale__title { font-size: var(--fs-xl); }
  .c-ads--app .c-adsale__list { grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-5); }
  @media (min-width: 40rem) { .c-ads--app .c-adsale__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-ads--app .c-adsale__domain { font-size: var(--fs-lg); }
  .c-ads--app .c-ads__house { margin-top: var(--space-5); }

  @media print { .c-ads { display: none; } }
}

/* modules/community.css */
/* My420Love · modules/community.css — events, the lounge, RSVP, "Met someone here?", Local Date Deals and the
   member-special pass (BLUEPRINT §3 M7; SPEC-DESIGN §3.7 lounge, §6.18 event card, §6.19 deal card). Built on the UI
   kit's semantic tokens; the base lounge tokens are Foundation's (02-tokens.css [data-subtheme="hightime"]) and only
   the lounge page accents live here (candle glow, amber date block, gold headings). Class prefix: com-.
   Everything is inside @layer modules; motion multiplies by --motion-ok and stops under reduced motion. */
@layer modules {

  /* ================================================================ tones (event kind → dimension colour) */
  .com-card, .com-hero { --tone: var(--brand-strong); --tone-bg: var(--brand-soft); --tone-fg: var(--text-1); }
  [data-tone="love"]      { --tone: var(--dim-love);      --tone-bg: var(--dim-love-bg);      --tone-fg: var(--dim-love-fg); }
  [data-tone="green"]     { --tone: var(--dim-green);     --tone-bg: var(--dim-green-bg);     --tone-fg: var(--dim-green-fg); }
  [data-tone="fun"]       { --tone: var(--dim-fun);       --tone-bg: var(--dim-fun-bg);       --tone-fg: var(--dim-fun-fg); }
  [data-tone="chemistry"] { --tone: var(--dim-chemistry); --tone-bg: var(--dim-chemistry-bg); --tone-fg: var(--dim-chemistry-fg); }
  [data-tone="romance"]   { --tone: var(--dim-romance);   --tone-bg: var(--dim-romance-bg);   --tone-fg: var(--dim-romance-fg); }
  [data-tone="lifestyle"] { --tone: var(--dim-lifestyle); --tone-bg: var(--dim-lifestyle-bg); --tone-fg: var(--dim-lifestyle-fg); }
  [data-subtheme="hightime"] .com-card, [data-subtheme="hightime"].com-card, .com-hero--lounge {
    --tone: var(--accent); --tone-bg: var(--accent-soft); --tone-fg: var(--lounge-gold);
  }

  /* ================================================================ page frame */
  .com-events, .com-event, .com-deals, .com-dealpage, .com-met { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  .com-events--public, .com-event--public { padding-block: var(--space-8) var(--space-16); }
  .com-head { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); isolation: isolate; }
  .com-head .c-section-header { max-width: 46rem; }
  .com-section { display: flex; flex-direction: column; gap: var(--space-4); }
  .com-section__head { display: flex; flex-direction: column; gap: var(--space-1); }
  .com-section__title { font-size: var(--fs-2xl); margin: 0; }
  .com-section__lead { color: var(--text-2); margin: 0; }
  .com-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); }
  .com-grid > li { display: flex; min-width: 0; }
  .com-back { margin: 0; }
  .com-back a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); text-decoration: none; font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text); min-height: 2.75rem; }
  .com-back a .c-icon { width: 1.125rem; height: 1.125rem; }
  @media (hover: hover) { .com-back a:hover { color: var(--text-1); } }
  .com-empty { margin-top: var(--space-2); }
  .com-legal, .com-note {
    display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; max-width: 46rem;
    color: var(--text-3); font-size: var(--fs-sm); line-height: var(--lh-snug);
  }
  .com-legal .c-icon, .com-note .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; color: var(--brand-strong); }
  .com-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warn-bg); color: var(--text-1); }
  .com-note .c-icon { color: var(--warn); }
  .com-legal a { color: var(--text-link); }
  .com-foot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
  .com-foot__join { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; }
  .com-foot__login { color: var(--text-link); font-weight: var(--fw-semibold); }

  /* tabs: in the lounge the underline is candlelight */
  [data-subtheme="hightime"] .com-events .c-tabs__tab::after { background: var(--accent); }

  /* ================================================================ the kind chip */
  .com-kind {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    min-height: 1.75rem; padding: 0.125rem 0.625rem 0.125rem 0.5rem;
    border-radius: var(--radius-full); background: var(--tone-bg, var(--brand-soft)); color: var(--tone-fg, var(--text-1));
    font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); white-space: nowrap;
  }
  .com-kind .c-icon { width: 0.9375rem; height: 0.9375rem; color: var(--tone, var(--brand-strong)); }
  .com-kind--big { min-height: 2.25rem; padding-inline: 0.75rem 0.875rem; font-size: var(--fs-sm); }
  .com-kind--big .c-icon { width: 1.125rem; height: 1.125rem; }
  .com-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

  /* ================================================================ date block (§6.18) */
  .com-date {
    flex: none; display: grid; place-content: center; justify-items: center; gap: 0.125rem;
    width: 3.5rem; height: 4rem; border-radius: var(--radius-md);
    background: var(--surface-3); color: var(--text-1);
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-1);
  }
  .com-date__m { font: var(--fw-bold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .com-date__d { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; font-variant-numeric: var(--numerals); letter-spacing: -0.02em; }
  .com-date--soon .c-icon { width: 1.25rem; height: 1.25rem; color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
  .com-date--soon .com-date__m { color: var(--text-2); }
  [data-theme="light"] .com-date--soon .c-icon { color: var(--brand-strong); filter: none; }
  .com-date--lg { width: 4.5rem; height: 5.25rem; border-radius: var(--radius-lg); }
  .com-date--lg .com-date__d { font-size: 2.375rem; }
  [data-subtheme="hightime"] .com-date {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px -4px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  [data-subtheme="hightime"] .com-date__m { color: var(--lounge-gold); }
  [data-subtheme="hightime"] .com-date__d { color: var(--lounge-gold); }

  /* ================================================================ event card (§6.18) */
  .com-card {
    position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
    border-radius: var(--radius-lg); background: var(--surface-1); color: var(--text-1);
    border: 1px solid var(--border-1); box-shadow: var(--shadow-2), var(--edge-highlight);
    overflow: hidden; isolation: isolate;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base);
  }
  .com-card__art {
    position: relative; height: 6.5rem; overflow: hidden;
    background:
      radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--tone) 30%, transparent) 0%, transparent 60%),
      radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 65%),
      var(--surface-2);
  }
  .com-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .com-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--surface-1) 70%, transparent)); pointer-events: none; }
  .com-card__glyph { position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%) rotate(-8deg); color: var(--tone); opacity: 0.3; }
  .com-card__glyph .c-icon { width: 3rem; height: 3rem; stroke-width: 1.5; }
  .com-card__main { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--space-4); padding: 0 var(--space-5); margin-top: -2rem; }
  .com-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: 2.5rem; flex: 1; }
  .com-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
  .com-card__host { font-weight: var(--fw-medium); }
  .com-card__title { margin: 0; font-size: var(--fs-xl); line-height: 1.18; letter-spacing: -0.01em; font-variation-settings: var(--fvs-display-text); }
  .com-card__link { color: inherit; text-decoration: none; }
  .com-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .com-card__link:focus-visible { box-shadow: none; outline: none; }
  .com-card__link:focus-visible::after { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
  .com-card__where, .com-card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-3); margin: 0; font: var(--fw-medium) var(--fs-sm)/1.35 var(--font-text); color: var(--text-2); }
  .com-card__where { flex-wrap: nowrap; align-items: flex-start; }
  .com-card__where .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; color: var(--tone); }
  .com-card__where > span { min-width: 0; }
  .com-card__price { font-weight: var(--fw-bold); font-variant-numeric: var(--numerals); color: var(--text-1); }
  .com-card__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
  .com-card__pills:empty { display: none; }
  .com-card__foot {
    position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: auto; padding: var(--space-4) var(--space-5) var(--space-5);
  }
  .com-card__matches { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); color: var(--text-2); }
  .com-card__matches .c-avatar-stack > .c-avatar + .c-avatar { margin-inline-start: -0.5rem; }
  .com-card__cta { display: flex; gap: var(--space-2); margin-inline-start: auto; }
  .com-notify { margin: 0; }
  @media (hover: hover) {
    .com-card:hover { transform: translateY(calc(-3px * var(--motion-ok))); box-shadow: var(--shadow-3), var(--edge-highlight); border-color: var(--border-2); }
  }
  .com-card--soon .com-card__art { height: 5rem; }
  .com-card--soon .com-card__glyph { opacity: 0.22; }

  /* the lounge card: velvet, amber, the candle glow on hover */
  .com-card--lounge { border-color: color-mix(in srgb, var(--accent) 22%, var(--border-1)); }
  .com-card--lounge .com-card__art {
    background:
      radial-gradient(70% 120% at 50% -10%, rgba(230, 174, 82, 0.34) 0%, transparent 62%),
      radial-gradient(80% 120% at 0% 110%, rgba(15, 61, 43, 0.85) 0%, transparent 70%),
      radial-gradient(60% 100% at 100% 100%, rgba(190, 49, 80, 0.16) 0%, transparent 70%),
      var(--surface-2);
  }
  .com-card--lounge .com-card__glyph { color: var(--lounge-gold); opacity: 0.4; }
  .com-card--lounge .com-card__title { color: var(--text-1); }
  @media (hover: hover) { .com-card--lounge:hover { box-shadow: var(--glow-candle), var(--shadow-3), var(--edge-highlight); } }

  /* ================================================================ page head: the lounge candle */
  .com-head--lounge { padding-block: var(--space-4) var(--space-2); }
  .com-head__candle { position: absolute; inset: -4rem -2rem auto; height: 18rem; z-index: -1; pointer-events: none; overflow: hidden; }
  .com-head__candle span {
    position: absolute; left: 50%; top: 0; width: min(46rem, 120%); height: 100%; transform: translateX(-50%);
    background:
      radial-gradient(50% 60% at 50% 20%, rgba(242, 194, 116, 0.22) 0%, transparent 70%),
      radial-gradient(30% 40% at 50% 12%, rgba(255, 214, 150, 0.16) 0%, transparent 70%);
    filter: blur(6px);
    animation: com-candle 5.6s var(--ease-breathe) infinite alternate;
  }
  @keyframes com-candle {
    0%   { opacity: 0.75; transform: translateX(-50%) scale(1); }
    40%  { opacity: 1;    transform: translateX(-50.6%) scale(1.03); }
    70%  { opacity: 0.82; transform: translateX(-49.5%) scale(0.99); }
    100% { opacity: 0.95; transform: translateX(-50%) scale(1.02); }
  }
  [data-subtheme="hightime"] .com-head .c-eyebrow { color: var(--lounge-gold); }

  /* ================================================================ honest empty state: "Events are coming" */
  .com-soon-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border-1);
    box-shadow: var(--shadow-2), var(--edge-highlight);
  }
  .com-soon-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%),
      radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--brand) 20%, transparent) 0%, transparent 70%),
      radial-gradient(40% 50% at 100% 100%, color-mix(in srgb, var(--love) 12%, transparent) 0%, transparent 70%);
  }
  .com-soon-hero__mark {
    display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%;
    background: var(--surface-2); color: var(--brand-strong);
    box-shadow: inset 0 0 0 1px var(--border-1), 0 0 0 10px color-mix(in srgb, var(--brand) 9%, transparent), 0 0 48px 6px color-mix(in srgb, var(--brand) 18%, transparent);
    animation: com-breathe 4.8s var(--ease-breathe) 3;
  }
  .com-soon-hero__mark .c-icon { width: 2.5rem; height: 2.5rem; }
  @keyframes com-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(calc(1 + 0.04 * var(--motion-ok))); }
  }
  .com-soon-hero__pill {
    display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--text-1); font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
  }
  .com-soon-hero__pill .c-icon { width: 0.875rem; height: 0.875rem; color: var(--accent); }
  [data-theme="light"] .com-soon-hero__pill .c-icon { color: var(--brand-strong); }
  .com-soon-hero__title { margin: 0; font-size: var(--fs-3xl); }
  .com-soon-hero__body { margin: 0; max-width: 38rem; color: var(--text-2); font-size: var(--fs-lg); }
  .com-soon-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
  [data-subtheme="hightime"] .com-soon-hero { border-color: color-mix(in srgb, var(--accent) 24%, var(--border-1)); }
  [data-subtheme="hightime"] .com-soon-hero__mark { color: var(--lounge-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 10px rgba(230, 174, 82, 0.07), var(--glow-candle); }
  [data-subtheme="hightime"] .com-soon-hero__title { color: var(--lounge-gold); }

  /* ================================================================ event detail */
  .com-hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border-1);
    box-shadow: var(--shadow-2), var(--edge-highlight);
  }
  .com-hero__art {
    position: relative; height: clamp(8rem, 22vw, 13rem);
    background:
      radial-gradient(80% 140% at 85% -10%, color-mix(in srgb, var(--tone) 36%, transparent) 0%, transparent 60%),
      radial-gradient(70% 130% at 0% 110%, color-mix(in srgb, var(--brand) 32%, transparent) 0%, transparent 65%),
      var(--surface-2);
  }
  .com-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .com-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--surface-1)); }
  .com-hero__glyph { position: absolute; right: 8%; top: 42%; transform: translateY(-50%) rotate(-10deg); color: var(--tone); opacity: 0.32; }
  .com-hero__glyph .c-icon { width: 6rem; height: 6rem; stroke-width: 1.25; }
  .com-hero__body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--space-5); padding: 0 var(--space-6) var(--space-6); margin-top: -2.75rem; }
  .com-hero__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: 3rem; }
  .com-hero__title { margin: 0; font-size: var(--fs-4xl); line-height: 1.04; overflow-wrap: anywhere; }
  .com-hero__where { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font: var(--fw-medium) var(--fs-md)/1.4 var(--font-text); }
  .com-hero__where .c-icon { width: 1.125rem; height: 1.125rem; color: var(--tone); flex: none; }
  .com-hero--lounge { border-color: color-mix(in srgb, var(--accent) 26%, var(--border-1)); box-shadow: var(--glow-candle), var(--shadow-2), var(--edge-highlight); }
  .com-hero--lounge .com-hero__art {
    background:
      radial-gradient(60% 120% at 50% -20%, rgba(242, 194, 116, 0.38) 0%, transparent 60%),
      radial-gradient(80% 140% at 0% 120%, rgba(15, 61, 43, 0.9) 0%, transparent 70%),
      radial-gradient(50% 100% at 100% 100%, rgba(190, 49, 80, 0.18) 0%, transparent 70%),
      var(--surface-2);
  }
  .com-hero--lounge .com-hero__title { color: var(--lounge-gold); }
  .com-hero--lounge .com-hero__glyph { color: var(--lounge-gold); }
  @media (max-width: 29.99rem) {
    .com-hero__body { flex-direction: column; gap: var(--space-3); padding-inline: var(--space-5); }
    .com-hero__text { padding-top: 0; }
  }

  .com-event, .com-dealpage { container-type: inline-size; }
  .com-event__layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
  .com-event__aside { order: -1; }
  @container (min-width: 50rem) {
    .com-event__layout { grid-template-columns: minmax(0, 1fr) 21rem; }
    .com-event__aside { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); order: 2; }
  }
  .com-event__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  .com-panel {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--border-1);
  }
  .com-panel__title { margin: 0; font-size: var(--fs-xl); }
  .com-panel__lead { margin: 0; font-size: var(--fs-lg); color: var(--text-1); }
  .com-panel__note { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
  .com-panel p { margin: 0; }
  .com-panel--soon { background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface-1); }
  .com-prose { display: flex; flex-direction: column; gap: var(--space-3); color: var(--text-2); }
  .com-prose :is(h2, h3, h4) { font-size: var(--fs-lg); margin: var(--space-2) 0 0; }
  .com-prose ul, .com-prose ol { margin: 0; padding-inline-start: 1.25rem; }
  .com-facts { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
  .com-facts > div { display: flex; align-items: flex-start; gap: var(--space-3); }
  .com-facts dt { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--tone-bg, var(--brand-soft)); color: var(--brand-strong); }
  .com-facts dt .c-icon { width: 1.125rem; height: 1.125rem; }
  .com-facts dd { margin: 0; padding-top: 0.375rem; font-weight: var(--fw-medium); }
  .com-facts__address { color: var(--text-2); font-weight: var(--fw-regular); }
  .com-id {
    display: flex; align-items: center; gap: var(--space-3); margin: 0;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1); font-size: var(--fs-md);
  }
  .com-id .c-icon { flex: none; width: 1.375rem; height: 1.375rem; color: var(--brand-strong); }
  .com-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-sm); }
  .com-rules li { display: flex; align-items: flex-start; gap: var(--space-3); max-width: none; }
  .com-rules .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; color: var(--text-3); }
  .com-rules a { color: var(--text-link); font-weight: var(--fw-semibold); }
  .com-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .com-person__link { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); }

  /* RSVP panel */
  .com-rsvp { gap: var(--space-4); padding: var(--space-6); }
  .com-rsvp__title { margin: 0; font-size: var(--fs-xl); }
  .com-rsvp__status:empty { display: none; }
  .com-rsvp__status { margin: 0; font-size: var(--fs-sm); color: var(--success); }
  .com-rsvp__lead { margin: 0; color: var(--text-2); }
  .com-rsvp__lead strong { color: var(--text-1); }
  .com-rsvp__help { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
  .com-rsvp__help a { color: var(--text-link); font-weight: var(--fw-semibold); }
  .com-rsvp__done { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-lg); color: var(--text-1); }
  .com-rsvp__done .c-icon { flex: none; width: 1.375rem; height: 1.375rem; color: var(--success); }
  .com-rsvp form { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .com-rsvp__cancel { align-items: flex-start; }
  .com-rsvp__met { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--love-soft); }
  .com-rsvp__met-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); }
  .com-rsvp__met-title .c-icon { color: var(--love-strong); }
  .com-guest { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
  [data-subtheme="hightime"] .com-rsvp { border-color: color-mix(in srgb, var(--accent) 26%, var(--border-1)); box-shadow: var(--glow-candle), var(--shadow-2), var(--edge-highlight); }
  [data-subtheme="hightime"] .com-facts dt { background: var(--accent-soft); color: var(--lounge-gold); }
  [data-subtheme="hightime"] .com-id .c-icon, [data-subtheme="hightime"] .com-hero__where .c-icon { color: var(--lounge-gold); }
  [data-subtheme="hightime"] .com-panel { border-color: color-mix(in srgb, var(--accent) 14%, var(--border-1)); }

  /* ================================================================ "Met someone here?" */
  .com-met__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding-top: var(--space-2); }
  .com-met__head .c-lead { margin-inline: auto; }
  .com-met__mark { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--love-soft); color: var(--love-strong); box-shadow: var(--glow-berry); }
  .com-met__mark .c-icon { width: 2rem; height: 2rem; }
  .com-met__title { margin: 0; font-size: var(--fs-4xl); }
  .com-met__clock { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0.375rem 0.875rem; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-2); font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text); }
  .com-met__clock .c-icon { width: 1rem; height: 1rem; color: var(--accent); }
  .com-met__me { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
  .com-met__me p { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .com-met__me .c-icon { width: 1.125rem; height: 1.125rem; }
  .com-met__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
  .com-met__person {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; max-width: none;
    padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1);
    transition: box-shadow var(--dur-slow) var(--ease-standard), border-color var(--dur-slow);
  }
  .com-met__person form { margin: 0; }
  .com-met__person.is-tapped { border-color: color-mix(in srgb, var(--love-strong) 40%, var(--border-1)); }
  .com-met__person.is-matched { border-color: color-mix(in srgb, var(--brand-strong) 50%, var(--border-1)); box-shadow: var(--glow-emerald); animation: m4l-glow-bloom var(--dur-epic) var(--ease-out) 1; }
  .com-met__who { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-1); text-decoration: none; }
  .com-met__name { font: var(--fw-semibold) var(--fs-md)/1.2 var(--font-text); }
  .com-met__age { color: var(--text-3); font-weight: var(--fw-medium); }
  .com-met__state { display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); margin: 0; font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-2); }
  .com-met__state .c-icon { width: 1rem; height: 1rem; }
  .com-met__state--matched { color: var(--text-1); }
  .com-met__state--matched .c-icon { color: var(--love-strong); fill: currentColor; }
  .com-met__help { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
  .com-met__safety { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); width: 100%; }

  /* ================================================================ deals: the ticket (§6.19) */
  .com-deals .com-head { gap: var(--space-3); }
  .com-disclosure { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0.375rem 0.875rem; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-2); font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-text); width: fit-content; max-width: 100%; }
  .com-disclosure .c-icon { flex: none; width: 1rem; height: 1rem; color: var(--info); }
  .com-deal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); }
  .com-deal {
    --ribbon: var(--accent);
    --notch: 1rem;
    position: relative; display: grid; grid-template-columns: minmax(0, 68fr) minmax(5.5rem, 32fr); width: 100%;
    border-radius: var(--radius-lg); background: var(--surface-1); color: var(--text-1);
    border: 1px solid var(--border-1); box-shadow: var(--shadow-2), var(--edge-highlight); isolation: isolate;
  }
  [data-theme="light"] .com-deal { --ribbon: var(--emerald-700); }
  @media (prefers-color-scheme: light) { [data-theme="auto"] .com-deal { --ribbon: var(--emerald-700); } }
  /* the perforation: two notches in the page colour and a dashed line at 68% */
  .com-deal::before, .com-deal::after {
    content: ""; position: absolute; left: 68%; width: var(--notch); height: var(--notch); margin-left: calc(var(--notch) / -2);
    border-radius: 50%; background: var(--surface-base); z-index: 2;
  }
  .com-deal::before { top: calc(var(--notch) / -2 - 1px); box-shadow: inset 0 -1px 0 var(--border-1); }
  .com-deal::after { bottom: calc(var(--notch) / -2 - 1px); box-shadow: inset 0 1px 0 var(--border-1); }
  .com-deal__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); }
  .com-deal__sponsored { margin: 0; font: var(--fw-medium) var(--fs-xs)/1.2 var(--font-text); color: var(--text-2); }
  .com-deal__ribbon { margin: 0; font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ribbon); }
  .com-deal__business { margin: 0; font: var(--fw-semibold) var(--fs-md)/1.3 var(--font-text); color: var(--text-1); }
  .com-deal__title { margin: 0; font-size: var(--fs-xl); line-height: 1.18; font-variation-settings: var(--fvs-display-text); }
  .com-deal__link { color: inherit; text-decoration: none; }
  .com-deal__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .com-deal__link:focus-visible { box-shadow: none; outline: none; }
  .com-deal__link:focus-visible::after { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
  .com-deal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-1) 0 0; font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-text); color: var(--text-3); }
  .com-deal__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .com-deal__pills:empty { display: none; }
  .com-deal__legal { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
  .com-deal__stub {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-3); border-inline-start: 2px dashed var(--border-2);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 80%);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .com-deal__stub-icon { display: grid; place-items: center; color: var(--brand-strong); }
  .com-deal__stub-icon .c-icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
  .com-deal__cta { position: relative; z-index: 3; }
  @media (hover: hover) { .com-deal:hover { box-shadow: var(--shadow-3), var(--edge-highlight); border-color: var(--border-2); } }
  @media (max-width: 29.99rem) {
    .com-deal { grid-template-columns: minmax(0, 1fr); }
    .com-deal::before, .com-deal::after { display: none; }
    .com-deal__stub { flex-direction: row; justify-content: space-between; border-inline-start: 0; border-top: 2px dashed var(--border-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-3) var(--space-5); }
    .com-deal__stub-icon .c-icon { width: 1.75rem; height: 1.75rem; }
  }
  .com-deal--hero .com-deal__title { font-size: var(--fs-3xl); }
  .com-deal--hero .com-deal__stub-icon .c-icon { width: 3.5rem; height: 3.5rem; }
  .com-dealpage__img { width: 100%; height: auto; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; }
  .com-deal__code-hidden { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--font-mono); letter-spacing: 0.2em; }

  /* ================================================================ the member-special pass */
  .com-pass { position: relative; isolation: isolate; padding: 3px; border-radius: calc(var(--radius-xl) + 3px); overflow: hidden; }
  .com-pass__glow {
    position: absolute; inset: -60%; z-index: -1;
    background: conic-gradient(from 0deg, #B7E43C, #3FC684, #176B45, #EE5A74, #F2C274, #B7E43C);
    animation: m4l-ring-spin 6s linear infinite;
  }
  .com-pass__card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6); border-radius: var(--radius-xl);
    background:
      radial-gradient(80% 60% at 100% 0%, rgba(183, 228, 60, 0.16) 0%, transparent 60%),
      radial-gradient(70% 70% at 0% 100%, rgba(238, 90, 116, 0.14) 0%, transparent 65%),
      linear-gradient(160deg, #0F3D2B 0%, #0B2E20 55%, #101613 100%);
    color: #FFF3DD;
  }
  .com-pass__sheen {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 243, 221, 0.16) 48%, rgba(255, 243, 221, 0.02) 56%, transparent 66%);
    transform: translateX(-120%);
    animation: com-sheen 4.2s var(--ease-standard) infinite;
  }
  @keyframes com-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
  .com-pass__ribbon { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: #D4F07A; }
  .com-pass__ribbon .c-icon { width: 1rem; height: 1rem; }
  .com-pass__for { margin: 0; font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); color: #D8CDB9; }
  .com-pass__title { margin: 0; font-size: var(--fs-3xl); color: #FFF3DD; line-height: 1.05; }
  .com-pass__business { margin: 0; color: #D8CDB9; font-weight: var(--fw-medium); }
  .com-pass__code { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(255, 243, 221, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.16); }
  .com-pass__label { font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: #B0A795; }
  .com-pass__promo { font: 700 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.1 var(--font-mono); letter-spacing: 0.12em; color: #FFF3DD; overflow-wrap: anywhere; }
  .com-pass__show { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); color: #FFF3DD; }
  .com-pass__show .c-icon { color: #D4F07A; }
  .com-pass__clock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .com-pass__live { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: rgba(183, 228, 60, 0.16); color: #D4F07A; font: var(--fw-bold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .com-pass__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #B7E43C; box-shadow: 0 0 10px 2px rgba(183, 228, 60, 0.6); animation: com-live 1.2s var(--ease-breathe) infinite alternate; }
  @keyframes com-live { from { opacity: 1; } to { opacity: calc(1 - 0.65 * var(--motion-ok)); } }
  .com-pass__time { font: 600 var(--fs-lg)/1.2 var(--font-text); font-variant-numeric: var(--numerals); color: #FFF3DD; }
  .com-pass__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0; font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-text); color: #D8CDB9; }
  .com-pass__note { margin: 0; font-size: var(--fs-xs); color: #B0A795; }
  .com-pass.is-reveal { animation: m4l-grow-in var(--dur-slower) var(--ease-spring) both; }

  /* ================================================================ the lounge band (any page) */
  .com-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6); }
  .com-band__candle { position: absolute; inset: -30% 10% auto; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 50% 30%, rgba(242, 194, 116, 0.2) 0%, transparent 70%); filter: blur(8px); animation: com-candle 5.6s var(--ease-breathe) infinite alternate; }
  .com-band__inner { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--container-lg); margin-inline: auto; }
  .com-band__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44rem; }
  .com-band__eyebrow { color: var(--lounge-gold); }
  .com-band__title { margin: 0; font-size: var(--fs-3xl); }
  .com-band__lead { margin: 0; color: var(--text-2); font-size: var(--fs-lg); }
  .com-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
  .com-band__list > li { display: flex; }
  .com-band__empty { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-1)); max-width: 36rem; }
  .com-band__empty p { margin: 0; color: var(--text-2); }
  .com-band__empty-title { margin: 0; font-size: var(--fs-xl); color: var(--lounge-gold); }
  .com-band__soon { display: inline-flex; align-items: center; gap: var(--space-1-5); font: var(--fw-bold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2); }
  .com-band__soon .c-icon { width: 1rem; height: 1rem; color: var(--accent); }
  .com-band__actions { margin: 0; }
  .com-band__legal { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }

  /* ================================================================ admin */
  .com-admin { display: flex; flex-direction: column; gap: var(--space-5); max-width: 64rem; }
  .com-admin__lead { margin: 0; color: var(--text-2); max-width: 60rem; }
  .com-admin__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .com-admin__table td { height: auto; padding-block: var(--space-2); }
  .com-admin__status { display: flex; flex-direction: column; gap: var(--space-2); }
  .com-admin__error { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--danger); font-weight: var(--fw-semibold); }
  .com-admin__group { border: 1px solid var(--border-1); margin: 0; min-width: 0; gap: var(--space-4); }
  .com-admin__legend { padding: 0 var(--space-2); font: var(--fw-semibold) var(--fs-md)/1.2 var(--font-text); color: var(--text-1); }
  .com-admin__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); align-items: start; }
  .com-admin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

  /* ================================================================ reduced motion: everything rests */
  @media (prefers-reduced-motion: reduce) {
    .com-head__candle span, .com-band__candle, .com-pass__glow, .com-pass__sheen, .com-pass__dot, .com-soon-hero__mark, .com-pass.is-reveal { animation: none; }
    .com-pass__sheen { display: none; }
  }
  :root[data-motion="reduce"] :is(.com-head__candle span, .com-band__candle, .com-pass__glow, .com-pass__sheen, .com-pass__dot, .com-soon-hero__mark, .com-pass.is-reveal) { animation: none; }
  :root[data-motion="reduce"] .com-pass__sheen { display: none; }

  /* forced colours: the shapes keep their borders */
  @media (forced-colors: active) {
    .com-card, .com-deal, .com-panel, .com-pass__card, .com-soon-hero, .com-met__person { border: 1px solid CanvasText; }
    .com-pass__glow { display: none; }
  }
}

/* modules/compat.css */
/* My420Love · modules/compat.css — Meet My Mary Jane, the match screen, the Match Report, Twin Alerts, the question
   game and the admin engine page (BLUEPRINT M3; SPEC-DESIGN §5.5, §6.3, §6.5, §6.9, §6.24, §7.6). @layer modules.
   Semantic tokens only (02-tokens.css); dimension colours come from [data-dim] (--dim, --dim-fg, --dim-bg, --dim-glow).
   Motion is gated twice (OS + data-motion="reduce"): distances multiply by --motion-ok and nothing loops except the
   matched ring's three breaths (Foundation). No smoke, no leaves as decoration. Every class is prefixed cmp-. */
@layer modules {

  /* ================================================================ shared pieces */
  .cmp-verified { width: 1.1em; height: 1.1em; color: var(--info); vertical-align: -0.12em; }
  .cmp-score { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .cmp-score__band { font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); color: var(--text-2); }
  .cmp-score--lg .c-score-chip__value { font-size: 2rem; }

  .cmp-bars { display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-bars--compact { gap: var(--space-2); }
  /* bars that start off screen wait (JS: modules/compat/bars.js) and fill when seen; animation-name none → keyframes
     restarts the fill from zero. Motion only: under reduced motion nothing is held back. */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) [data-bars-wait] .c-dim-meter__fill { animation: none; transform: scaleX(0); }
  }
  [data-glow] > .c-dim-ring { border-radius: 50%; }

  .cmp-why { display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-why__eyebrow, .cmp-match__block > .c-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
  .cmp-why__eyebrow .c-icon, .cmp-match__block > .c-eyebrow .c-icon { width: 1rem; height: 1rem; }
  .cmp-why__reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-why__reason { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; }
  .cmp-why__icon {
    flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
    background: var(--dim-bg, var(--surface-3)); color: var(--dim, var(--text-2));
  }
  .cmp-why__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .cmp-why__text { font-size: var(--fs-md); line-height: 1.45; color: var(--text-1); }
  .cmp-why__reasons--tight { gap: var(--space-2); }
  .cmp-why__reasons--tight .cmp-why__reason { min-height: 2.25rem; }
  .cmp-why__reasons--tight .cmp-why__icon { width: 1.75rem; height: 1.75rem; }
  .cmp-why__mystery { color: var(--text-2); }
  .cmp-why__vibe { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
  .cmp-why__vibe-text {
    margin: var(--space-2) 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.35;
    font-variation-settings: var(--fvs-display-text); color: var(--text-1);
  }

  .cmp-callout { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); }
  .cmp-callout p { margin: var(--space-1) 0 0; color: var(--text-1); }
  .cmp-callout__icon { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
  .cmp-callout__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .cmp-callout--talk { background: var(--accent-soft); }
  .cmp-callout--talk .cmp-callout__icon { color: var(--dim-green-fg); }
  [data-theme="light"] .cmp-callout--talk .cmp-callout__icon { color: var(--text-1); }
  .cmp-callout--differ { background: var(--surface-3); }
  .cmp-callout--differ .cmp-callout__icon { color: var(--text-2); }
  .cmp-differ { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-1); }
  .cmp-differ--rows li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.45; }

  /* ---------------------------------------------------------------- member actions (Compliment is the signature move) */
  .cmp-actions { display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-actions__primary { width: 100%; }
  .cmp-actions__row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
  .cmp-actions__row > .c-btn, .cmp-actions__form > .c-btn { flex: 1 1 8rem; min-width: 0; }
  .cmp-actions__form { display: contents; }
  .cmp-actions__form--pass > .c-btn { flex-basis: 100%; }

  /* ================================================================ Meet My Mary Jane */
  .page-compat.cmp-page-mj .l-app-main { position: relative; }
  .cmp-mj { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-6); min-height: 60dvh; }
  .cmp-mj__room {
    position: absolute; inset: calc(var(--space-5) * -1) calc(var(--gutter) * -1) auto; height: min(46rem, 110%); z-index: -1; pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
    background: radial-gradient(60% 55% at 50% 12%, rgba(31, 158, 98, 0.26), transparent 70%),
                radial-gradient(40% 40% at 85% 40%, rgba(214, 63, 91, 0.10), transparent 72%),
                radial-gradient(45% 45% at 10% 60%, rgba(183, 228, 60, 0.05), transparent 70%);
  }
  [data-theme="light"] .cmp-mj__room {
    background: radial-gradient(60% 55% at 50% 12%, rgba(30, 138, 88, 0.16), transparent 70%),
                radial-gradient(40% 40% at 85% 40%, rgba(214, 63, 91, 0.08), transparent 72%);
  }
  .cmp-mj__pre, .cmp-mj__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding-top: var(--space-6); }
  .cmp-mj__pre[hidden], .cmp-mj__deck[hidden] { display: none; }
  .cmp-mj__pre .c-section-header { margin: 0; }
  .cmp-mj__h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-3xl); line-height: 1.1; font-variation-settings: var(--fvs-display); max-width: 20ch; margin: 0; }
  .cmp-mj__intro { max-width: 34rem; margin: 0; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.5; }
  .cmp-mj__find { min-width: min(100%, 22rem); }
  .cmp-mj__waiting { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text); color: var(--text-2); }
  .cmp-mj__searching { margin: 0; min-height: 1.5em; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--text-1); }
  .cmp-mj__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
  .cmp-mj__drop, .cmp-mj__end-next { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--fw-semibold) var(--fs-md)/1.3 var(--font-text); color: var(--text-1); }
  .cmp-mj__drop .c-icon, .cmp-mj__end-next .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); }

  /* the mark and its orbit of seven colours */
  .cmp-mj__mark { --orbit-r: 6.25rem; position: relative; display: grid; place-items: center; width: 15rem; height: 15rem; margin-block: var(--space-2); border-radius: 50%; }
  .cmp-mj__mark .c-mark { width: 7.5rem; height: 7.5rem; position: relative; z-index: 2; }
  .cmp-mj__mark--rest { width: 10rem; height: 10rem; }
  .cmp-mj__mark--rest .c-mark { width: 6rem; height: 6rem; }
  .cmp-mj__halo {
    position: absolute; inset: 22%; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle, rgba(63, 198, 132, 0.40), rgba(214, 63, 91, 0.18) 55%, transparent 72%); filter: blur(14px);
  }
  .cmp-mj__orbit { position: absolute; inset: 0; z-index: 3; }
  .cmp-mj__planet {
    --a: calc(var(--k) * (360deg / 7) - 90deg);
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
    border-radius: 50%; background: var(--surface-2); color: var(--dim); box-shadow: 0 0 0 1px var(--border-1), 0 6px 18px -6px var(--dim-glow);
    transform: rotate(var(--a)) translateX(var(--orbit-r)) rotate(calc(var(--a) * -1));
  }
  .cmp-mj__planet .c-icon { width: 1.125rem; height: 1.125rem; }
  @keyframes cmp-orbit-spin { to { transform: rotate(1turn); } }
  @keyframes cmp-planet-in { from { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--orbit-r) * 0.4)) rotate(calc(var(--a) * -1)) scale(0.6); } }
  @keyframes cmp-halo-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(calc(1 + 0.14 * var(--motion-ok))); } }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .cmp-mj__planet { animation: cmp-planet-in var(--dur-slower) var(--ease-out) both; animation-delay: calc(var(--k) * 70ms); }
    :root:not([data-motion="reduce"]) .cmp-mj__halo { animation: cmp-halo-breathe var(--dur-breathe) var(--ease-breathe) 2 both; }
    :root:not([data-motion="reduce"]) .cmp-mj[data-state="searching"] .cmp-mj__orbit { animation: cmp-orbit-spin 1.2s var(--ease-standard) both; }
    :root:not([data-motion="reduce"]) .cmp-mj[data-state="searching"] .c-mark { animation: m4l-mark-pulse 0.6s var(--ease-breathe) 2 both; }
  }
  .cmp-mj[data-state="searching"] .cmp-mj__find, .cmp-mj[data-state="searching"] .cmp-mj__waiting { display: none; }
  .cmp-mj[data-state="searching"] .cmp-mj__searching { min-height: 3.5rem; display: grid; place-items: center; }

  /* the deck: stacked without JS; one card at a time with scroll-snap and a dot pager with JS */
  .cmp-mj__deck { display: flex; flex-direction: column; gap: var(--space-5); overflow-anchor: none; }   /* a slide change never drags the page */
  .cmp-mj__honest { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-sm); }
  .cmp-mj__track { display: flex; flex-direction: column; gap: var(--space-8); outline: none; }
  [data-js] .cmp-mj__track {
    position: relative;
    flex-direction: row; gap: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: var(--space-1) var(--gutter) var(--space-2);
    scroll-padding-inline: var(--gutter);
  }
  [data-js] .cmp-mj__track::-webkit-scrollbar { display: none; }
  [data-js] .cmp-mj__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; min-width: 0; }
  .cmp-mj__pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
  .cmp-mj__pager[hidden] { display: none; }
  .cmp-mj__dots { display: inline-flex; align-items: center; gap: var(--space-2); }
  .cmp-mj__dot {
    position: relative; width: 0.625rem; height: 0.625rem; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer;
    transition: width var(--dur-base) var(--ease-spring), background-color var(--dur-fast);
  }
  .cmp-mj__dot::before { content: ""; position: absolute; inset: -0.75rem -0.375rem; }
  .cmp-mj__dot[aria-current="true"] { width: 1.75rem; background: var(--brand-strong); }
  .cmp-mj__dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .cmp-mj__slide[data-status="passed"] .cmp-pick { opacity: 0.55; }

  .cmp-mj__end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding-block: var(--space-10); }
  .cmp-mj__end-mark { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--brand-soft); }
  .cmp-mj__end-mark .c-icon { width: 2rem; height: 2rem; }
  .cmp-mj__end-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1.15; max-width: 18ch; }
  .cmp-mj__honest-line { margin: 0; color: var(--text-2); }

  /* ---------------------------------------------------------------- the reveal card */
  .cmp-pick { display: flex; flex-direction: column; gap: var(--space-4); container-type: inline-size; }
  .cmp-pick__head { text-align: center; }
  .cmp-pick__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
  .cmp-pick__eyebrow .c-icon { width: 0.875rem; height: 0.875rem; }
  .cmp-pick__title {
    margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-4xl); line-height: 1.02;
    letter-spacing: -0.02em; font-variation-settings: var(--fvs-display);
  }
  .cmp-pick__title em { font-style: italic; color: var(--text-love); }
  .cmp-pick__grid { display: grid; gap: var(--space-5); }
  @container (min-width: 40rem) { .cmp-pick__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
  .cmp-pick__cover { position: relative; border-radius: var(--radius-xl); box-shadow: var(--shadow-3), 0 30px 80px -40px var(--dim-glow); }
  .cmp-pick__cover .c-photo { border-radius: var(--radius-xl); }
  .cmp-pick__caption { position: absolute; z-index: 3; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); color: #FFF3DD; }
  .cmp-pick__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.1; text-shadow: 0 2px 12px rgba(5, 9, 7, 0.45); }
  .cmp-pick__meta { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: rgba(255, 243, 221, 0.86); }
  .cmp-pick__meta .c-icon { width: 1rem; height: 1rem; }
  .cmp-pick__further { position: absolute; z-index: 3; top: var(--space-3); right: var(--space-3); }
  .cmp-pick__body { display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-pick__why {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4);
    border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--edge-highlight);
  }
  .cmp-pick__ring { display: grid; place-items: center; }
  .cmp-pick__pending { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 6rem; text-align: center;
    font: var(--fw-semibold) var(--fs-xs)/1.25 var(--font-text); color: var(--text-2); }
  .cmp-pick__pending .c-icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
  .cmp-pick__bars .c-eyebrow { display: block; margin-bottom: var(--space-2); }
  .cmp-pick__lead { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.3; color: var(--text-1); }
  .cmp-pick__flags { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .cmp-pick__flags .c-icon { width: 1rem; height: 1rem; color: var(--brand-strong); }
  .cmp-pick__more { margin: 0; text-align: center; font-size: var(--fs-sm); }
  .cmp-pick__more a, .cmp-twin__why a, .cmp-rmatch__cta a, .cmp-match__date a { display: inline-flex; align-items: center; gap: var(--space-1); }
  .cmp-pick__more .c-icon, .cmp-twin__why .c-icon, .cmp-rmatch__cta .c-icon, .cmp-match__date .c-icon { width: 1rem; height: 1rem; }
  .cmp-pick__done { margin: 0; text-align: center; }

  /* the reveal: the card rises 24px and fades in over 250ms, then the meters fill (SPEC-DESIGN §5.5) */
  @keyframes cmp-rise { from { opacity: 0; transform: translateY(calc(24px * var(--motion-ok))); } to { opacity: 1; transform: none; } }
  .cmp-mj__slide.is-revealing .cmp-pick { animation: cmp-rise 250ms var(--ease-out) both; }
  .cmp-mj__slide.is-revealing .cmp-pick__cover { animation: cmp-rise 360ms var(--ease-out) 60ms both; }
  @media (prefers-reduced-motion: reduce) { .cmp-mj__slide.is-revealing .cmp-pick, .cmp-mj__slide.is-revealing .cmp-pick__cover { animation: m4l-fade 150ms linear both; } }

  /* ================================================================ the match screen */
  .cmp-match { display: flex; flex-direction: column; gap: var(--space-6); }
  .cmp-match__hero { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
  @media (min-width: 64rem) { .cmp-match__hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); text-align: left; justify-items: stretch; align-items: center; } }
  .cmp-match__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: min(100%, 34rem); }
  .cmp-match__person { position: relative; margin: 0; }
  .cmp-match__person .c-photo { border-radius: var(--radius-lg); }
  .cmp-match__person--me { transform: rotate(calc(-2deg * var(--motion-ok))) translateY(0.5rem); }
  .cmp-match__person--them { transform: rotate(calc(2deg * var(--motion-ok))); }
  .cmp-match__label {
    position: absolute; z-index: 4; left: 50%; bottom: var(--space-3); transform: translateX(-50%); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: var(--blur-glass); color: var(--text-1);
    font: var(--fw-semibold) var(--fs-micro)/1.4 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
  }
  .cmp-match__heart {
    position: absolute; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--surface-base); box-shadow: 0 0 0 1px var(--border-1), var(--glow-emerald);
  }
  .cmp-match__heart .c-mark { width: 2.75rem; height: 2.75rem; }
  .cmp-match__intro { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
  @media (min-width: 64rem) { .cmp-match__intro { align-items: flex-start; } }
  .cmp-match__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: var(--fvs-display); }
  .cmp-match__meta { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--text-2); }
  .cmp-match__meta .c-icon { width: 1rem; height: 1rem; }
  .cmp-match__score { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
  @media (min-width: 64rem) { .cmp-match__score { align-items: flex-start; } }
  .cmp-match__band { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--text-1); }
  .cmp-match__hint { margin: 0; max-width: 28rem; color: var(--text-2); font-size: var(--fs-sm); }
  .cmp-match__grid { display: grid; gap: var(--space-4); }
  @media (min-width: 64rem) { .cmp-match__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
  .cmp-match__block { display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-match__block > .c-locked { height: 100%; }
  .cmp-match__more-locked { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); }
  .cmp-match__more-locked .c-icon { width: 1rem; height: 1rem; }
  .cmp-match__flags { display: flex; flex-direction: column; gap: var(--space-2); }
  .cmp-match__tot { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); }
  .cmp-match__tot .c-icon { width: 1rem; height: 1rem; }
  .cmp-icebreakers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .cmp-icebreakers li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-3); font-family: var(--font-display); font-style: italic; color: var(--text-1); }
  .cmp-match__date-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); }
  .cmp-match__date p { margin: 0; }
  .cmp-match__fit { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); }
  .cmp-match__legal { margin: 0; }
  .cmp-match__actions { position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-2)); z-index: 20;
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-full);
    background: var(--glass-bg); backdrop-filter: var(--blur-glass); box-shadow: var(--shadow-3); border: 1px solid var(--border-1); }
  @media (min-width: 64rem) { .cmp-match__actions { bottom: var(--space-4); max-width: 34rem; margin-inline: auto; width: 100%; } }
  /* compact actions (the sticky bar): Compliment stays the widest; Like and Say hello become labelled icon buttons */
  .cmp-actions--compact { flex-direction: row; align-items: center; gap: var(--space-2); }
  .cmp-actions--compact .cmp-actions__primary { flex: 1 1 auto; width: auto; min-width: 0; padding-inline: var(--space-3); }
  .cmp-actions--compact .cmp-actions__row { flex: 0 0 auto; flex-wrap: nowrap; }
  .cmp-actions--compact .cmp-actions__row > .c-btn, .cmp-actions--compact .cmp-actions__form > .c-btn { flex: 0 0 auto; width: 3rem; padding-inline: 0; justify-content: center; }
  .cmp-actions--compact .cmp-actions__row .c-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ================================================================ the Match Report */
  .cmp-report { display: flex; flex-direction: column; gap: var(--space-10); }
  .cmp-report__cover {
    position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--space-6); align-items: center; padding: clamp(var(--space-6), 5vw, var(--space-12));
    border-radius: var(--radius-2xl); background: var(--surface-brand-gradient); color: #FFF3DD; box-shadow: var(--shadow-3);
  }
  @media (min-width: 48rem) { .cmp-report__cover { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
  .cmp-report__cover-room {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(55% 60% at 90% 10%, color-mix(in srgb, var(--dim) 30%, transparent), transparent 70%),
                radial-gradient(45% 55% at 0% 100%, rgba(183, 228, 60, 0.08), transparent 70%);
  }
  .cmp-report__cover .c-eyebrow { color: rgba(255, 243, 221, 0.78); }
  .cmp-report__name { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-5xl); line-height: 0.98; letter-spacing: -0.025em; font-variation-settings: var(--fvs-display); }
  .cmp-report__persona { margin: var(--space-3) 0 0; font-size: var(--fs-lg); color: rgba(255, 243, 221, 0.9); }
  .cmp-report__persona em { font-family: var(--font-display); font-size: var(--fs-3xl); font-style: italic; color: #FFF3DD; }
  .cmp-report__hook { margin: var(--space-2) 0 0; max-width: 32rem; color: rgba(255, 243, 221, 0.86); }
  .cmp-report__date { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: rgba(255, 243, 221, 0.7); }
  .cmp-report__print { margin-top: var(--space-4); }
  .cmp-report__print-art { margin: 0; display: grid; justify-items: center; gap: var(--space-2); }
  .cmp-report__print-art figcaption { color: rgba(255, 243, 221, 0.72); }
  .cmp-report__spark { position: absolute; z-index: 1; color: var(--accent); pointer-events: none; }
  .cmp-report__spark .c-icon { width: 1.75rem; height: 1.75rem; }
  .cmp-report__spark--1 { top: 12%; right: 8%; }
  .cmp-report__spark--2 { top: 58%; right: 36%; color: var(--emerald-400); }
  .cmp-report__spark--3 { bottom: 10%; right: 6%; color: var(--berry-400); }
  .cmp-report__foot { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }

  .cmp-chapter { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-6); }
  .cmp-chapter__rule { position: absolute; top: 0; left: 0; width: 4rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--dim), transparent); }
  .cmp-chapter .c-section-header { margin: 0; }
  .cmp-chapter__body { display: flex; flex-direction: column; gap: var(--space-5); }

  .cmp-styles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
  .cmp-style {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--edge-highlight), var(--shadow-1); overflow: hidden;
  }
  .cmp-style::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--dim), color-mix(in srgb, var(--dim) 15%, transparent)); }
  .cmp-style__head { display: flex; align-items: center; gap: var(--space-2); }
  .cmp-style__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .cmp-style__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .cmp-style__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1.1; font-variation-settings: var(--fvs-display-text); }
  .cmp-style__intensity { display: flex; gap: 0.375rem; margin: 0; }
  .cmp-style__dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--dim) 55%, transparent); }
  .cmp-style__dot.is-on { background: var(--dim); border-color: var(--dim); box-shadow: 0 0 10px -2px var(--dim-glow); }
  .cmp-style__tagline { margin: 0; font-weight: var(--fw-semibold); color: var(--dim-fg); }
  .cmp-style__desc { margin: 0; color: var(--text-2); line-height: 1.55; }
  .cmp-style__prelim { margin: 0; font-size: var(--fs-sm); }

  .cmp-lookfor__intro { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-2xl); line-height: 1.2; }
  .cmp-lookfor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-lookfor li { display: flex; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-subtle); color: var(--text-1); line-height: 1.5; }
  .cmp-lookfor li > span { color: var(--text-love); font-weight: 700; }
  .cmp-lookfor__best { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-1); }
  .cmp-lookfor__best .c-icon { width: 1.125rem; height: 1.125rem; color: var(--accent); flex: none; }

  .cmp-report-matches { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
  .cmp-rmatch { display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-rmatch__who { display: flex; align-items: center; gap: var(--space-3); }
  .cmp-rmatch__who > div { flex: 1; min-width: 0; }
  .cmp-rmatch__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); }
  .cmp-rmatch__who p { margin: 0; }
  .cmp-rmatch__cta { margin: 0; margin-top: auto; }
  .cmp-green { display: grid; gap: var(--space-4); }
  @media (min-width: 48rem) { .cmp-green { grid-template-columns: 1fr 1fr; } }
  .cmp-green__card p { margin: 0; }
  .cmp-landing__parts { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

  /* ================================================================ Twin Alerts */
  .cmp-twin-badge {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.8rem 0.3rem 0.6rem; border-radius: var(--radius-full);
    font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); width: fit-content;
  }
  .cmp-twin-badge--perfect { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--glow-lime); }
  .cmp-twin-badge--green { background: var(--brand); color: var(--text-on-brand); }
  .cmp-twin-badge--vibe { background: var(--dim-romance-bg); color: var(--dim-romance-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dim-romance) 45%, transparent); }
  .cmp-twin-badge--lg { font-size: var(--fs-md); padding: 0.45rem 1rem 0.45rem 0.75rem; }

  .cmp-twins { display: flex; flex-direction: column; gap: var(--space-6); }
  .cmp-twins__head .c-section-header { margin-top: var(--space-2); }
  .cmp-twins__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .cmp-twins__note { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .cmp-twins__note .c-icon { width: 1rem; height: 1rem; }
  .cmp-twin-card__link {
    position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--border-1); color: inherit; text-decoration: none; box-shadow: var(--edge-highlight);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
  }
  @media (hover: hover) { .cmp-twin-card__link:hover { border-color: var(--border-2); box-shadow: var(--shadow-2); transform: translateY(calc(-2px * var(--motion-ok))); } }
  .cmp-twin-card__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .cmp-twin-card[data-new] .cmp-twin-card__link { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .cmp-twin-card__art.is-blurred .c-avatar { filter: blur(8px) saturate(1.2); }
  .cmp-twin-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .cmp-twin-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.2; }
  .cmp-twin-card__line { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
  .cmp-twin-card__line .c-icon { width: 0.875rem; height: 0.875rem; flex: none; }
  .cmp-twin-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .cmp-twin-card__chev { width: 1.25rem; height: 1.25rem; color: var(--text-3); flex: none; }

  /* the reveal */
  .cmp-twin { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-8); align-items: center; }
  .cmp-twin__room {
    position: absolute; inset: calc(var(--space-5) * -1) calc(var(--gutter) * -1) auto; height: 34rem; z-index: -1; pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
    background: radial-gradient(50% 50% at 50% 18%, rgba(183, 228, 60, 0.12), transparent 70%),
                radial-gradient(45% 45% at 20% 40%, rgba(31, 158, 98, 0.18), transparent 70%),
                radial-gradient(40% 40% at 85% 30%, rgba(214, 63, 91, 0.12), transparent 70%);
  }
  .cmp-twin[data-kind="green"] .cmp-twin__room { background: radial-gradient(55% 50% at 50% 18%, rgba(31, 158, 98, 0.26), transparent 70%), radial-gradient(40% 40% at 85% 30%, rgba(183, 228, 60, 0.08), transparent 70%); }
  .cmp-twin[data-kind="vibe"] .cmp-twin__room { background: radial-gradient(55% 50% at 50% 18%, rgba(240, 110, 170, 0.20), transparent 70%), radial-gradient(40% 40% at 15% 40%, rgba(31, 158, 98, 0.12), transparent 70%); }
  .cmp-twin__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; padding-top: var(--space-4); }
  .cmp-twin__portrait { display: grid; place-items: center; }
  .cmp-twin__portrait.is-blurred .c-avatar { filter: blur(16px) saturate(1.2); }
  .cmp-twin__title { margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.015em; font-variation-settings: var(--fvs-display); }
  .cmp-twin__num { font-variant-numeric: var(--numerals); color: var(--accent); font-style: italic; }
  [data-theme="light"] .cmp-twin__num { color: var(--brand); }
  .cmp-twin__meta { margin: 0; color: var(--text-2); }
  .cmp-twin__answers { width: 100%; max-width: 36rem; display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-twin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .cmp-twin__row {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-1); border: 1px solid var(--border-subtle);
    transition: border-color var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow);
  }
  .cmp-twin__check {
    flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--accent); color: var(--text-on-accent); box-shadow: var(--glow-lime);
    transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow), box-shadow var(--dur-slow), transform var(--dur-slow) var(--ease-spring);
  }
  .cmp-twin__check .c-icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
  .cmp-twin__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
  .cmp-twin__answer { font-weight: var(--fw-semibold); color: var(--text-1); line-height: 1.35; }
  .cmp-twin__prompt { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.35; }
  .cmp-twin__cta { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
  .cmp-twin__why { margin: 0; text-align: center; }
  .cmp-twin__seen { display: flex; justify-content: center; }
  /* JS stages the rows (never hidden without JS or under reduced motion): each row fades up 12px, its check turns lime */
  .cmp-twin[data-animate] .cmp-twin__row:not(.is-lit) { opacity: 0.18; transform: translateY(calc(12px * var(--motion-ok))); }
  .cmp-twin[data-animate] .cmp-twin__row:not(.is-lit) .cmp-twin__check { background: var(--surface-3); color: transparent; box-shadow: none; transform: scale(0.7); }
  .cmp-twin[data-animate] .cmp-twin__row { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow); }
  .cmp-twin__row.is-lit { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
  .cmp-twin[data-animate] .cmp-twin__cta:not(.is-ready) { opacity: 0; }
  .cmp-twin__cta { transition: opacity var(--dur-slow) var(--ease-out); }

  /* ================================================================ the question game */
  .cmp-onb, .cmp-bonus { display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-bonus { max-width: var(--container-feed); margin-inline: auto; width: 100%; }
  .cmp-onb__head { text-align: center; display: flex; flex-direction: column; gap: var(--space-1); align-items: center; }
  .cmp-onb__head .c-eyebrow { margin: 0; }
  .cmp-onb__lead { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .cmp-onb__imported { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full); background: var(--brand-soft); color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); }
  .cmp-onb__imported .c-icon { width: 1rem; height: 1rem; color: var(--brand-strong); }
  .cmp-q { display: flex; flex-direction: column; gap: var(--space-4); }
  .cmp-q__top { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: center; gap: var(--space-2); }
  .cmp-q__top > .c-progress-heart { justify-self: end; }
  .cmp-q__eyebrow { text-align: center; }
  .cmp-q__breather {
    margin: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--fs-2xl); color: var(--text-1);
  }
  @keyframes cmp-breather { 0% { opacity: 0; transform: translateY(calc(8px * var(--motion-ok))); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0.55; } }
  @media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"])[data-js] .cmp-q__breather { animation: cmp-breather 1.6s var(--ease-out) both; } }
  .cmp-q__actions { display: flex; flex-direction: column; gap: var(--space-2); }
  [data-js] .cmp-q:not(.is-keyboard) .cmp-q__continue--auto { display: none; }
  .cmp-q.is-leaving .cmp-q__stage { opacity: 0; transform: translateX(calc(-24px * var(--motion-ok))); transition: opacity 180ms var(--ease-in), transform 180ms var(--ease-in); }
  .cmp-q.is-entering .cmp-q__stage { animation: cmp-q-in 360ms var(--ease-out) both; }
  @keyframes cmp-q-in { from { opacity: 0; transform: translateX(calc(24px * var(--motion-ok))); } to { opacity: 1; transform: none; } }
  .cmp-bonus__left { margin: 0; text-align: center; }

  .cmp-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding-top: var(--space-4); }
  .cmp-done__art { position: relative; display: grid; place-items: center; width: 14rem; height: 14rem; margin-bottom: var(--space-2); }
  .cmp-done__art .cmp-report__spark--1 { top: 4%; right: 6%; }
  .cmp-done__art .cmp-report__spark--2 { top: 70%; right: 88%; }
  .cmp-done__art .cmp-report__spark--3 { bottom: 0; right: 14%; }
  .cmp-done__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-4xl); line-height: 1.02; font-variation-settings: var(--fvs-display); }
  .cmp-done__welcome { margin: 0; font-size: var(--fs-lg); color: var(--text-1); }
  .cmp-done__persona { margin: var(--space-2) 0 0; font-size: var(--fs-lg); color: var(--text-2); }
  .cmp-done__persona em { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-1); }
  .cmp-done__hook, .cmp-done__body { margin: 0; color: var(--text-2); max-width: 30rem; }
  .cmp-done__cta { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }

  /* ================================================================ admin: the engine page */
  .cmp-admin { display: flex; flex-direction: column; gap: var(--space-6); }
  .cmp-admin__tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
  .cmp-admin__tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-1); }
  .cmp-admin__k { font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .cmp-admin__v { font: 700 1.75rem/1.1 var(--font-text); font-variant-numeric: var(--numerals); color: var(--text-1); }
  .cmp-admin__s { font-size: var(--fs-xs); color: var(--text-2); }
  .cmp-admin__panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-1); }
  .cmp-admin__panel h2 { margin: 0; font: var(--fw-semibold) var(--fs-lg)/1.3 var(--font-text); }
  .cmp-admin__muted { color: var(--text-3); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
  .cmp-admin__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .cmp-admin__table th, .cmp-admin__table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
  .cmp-admin__table th { color: var(--text-3); font-weight: var(--fw-semibold); }
  .cmp-admin__ok, .cmp-admin__bad { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); }
  .cmp-admin__ok { color: var(--success); }
  .cmp-admin__bad { color: var(--danger); }
  .cmp-admin__ok .c-icon, .cmp-admin__bad .c-icon { width: 1.125rem; height: 1.125rem; }

  /* ================================================================ forced colours */
  @media (forced-colors: active) {
    .cmp-style, .cmp-pick__why, .cmp-twin__row, .cmp-twin-card__link, .cmp-admin__tile { border: 1px solid CanvasText; }
    .cmp-twin__check, .cmp-style__dot.is-on { forced-color-adjust: none; }
  }

  /* ================================================================ print: the Match Report keepsake (light, no glow) */
  @media print {
    @page { margin: 14mm; }
    :root { color-scheme: light; }
    body.cmp-page-report { background: #fff !important; color: #1A221E !important; }
    .cmp-page-report .c-rail, .cmp-page-report .c-bottom-nav, .cmp-page-report .c-topbar, .cmp-page-report .c-mj-pill,
    .cmp-page-report .c-banner, .cmp-page-report .c-toast-region, .cmp-page-report .c-install, .cmp-report__print, .cmp-report__spark,
    .cmp-page-report .c-locked__overlay .c-btn { display: none !important; }
    .cmp-page-report .l-app-shell { display: block !important; }
    .cmp-page-report .l-app-main { max-width: none !important; padding: 0 !important; }
    .cmp-report { gap: 10mm; }
    .cmp-report__cover { background: #FFF8EC !important; color: #1A221E !important; box-shadow: none !important; border: 1px solid #D9D2C3; border-radius: 6mm; }
    .cmp-report__cover .c-eyebrow, .cmp-report__name, .cmp-report__persona, .cmp-report__persona em, .cmp-report__hook, .cmp-report__date,
    .cmp-report__print-art figcaption { color: #1A221E !important; }
    .cmp-report__cover-room { display: none; }
    .cmp-chapter { break-before: page; }
    .cmp-chapter:first-of-type { break-before: auto; }
    .cmp-style, .cmp-rmatch, .cmp-lookfor li, .cmp-green__card { break-inside: avoid; box-shadow: none !important; background: #fff !important; border: 1px solid #D9D2C3 !important; color: #1A221E !important; }
    .cmp-style__desc, .cmp-why__text, .c-disclaimer { color: #333 !important; }
    .c-heart-glow__halo, .c-heart-glow__ring { display: none !important; }
    * { animation: none !important; transition: none !important; }
  }
}

/* modules/connect.css */
/* My420Love · modules/connect.css — Discover ("Find your vibe"), the action bar, the compliment composer and notes,
   hellos, likes, matches and the "It's mutual." celebration (BLUEPRINT M4; SPEC-DESIGN §5.5, §6.4, §6.6, §6.10, §7.6).
   @layer modules. Semantic tokens only (02-tokens.css); the compliment note is cream in both themes on purpose (§6.6).
   Motion is gated twice (OS + data-motion="reduce"): distances multiply by --motion-ok, durations collapse, nothing
   loops (the matched ring's three breaths are the Foundation's). Every class is prefixed con-. */
@layer modules {

  /* ================================================================ Discover: the room, the header, the deck */
  .con-discover { position: relative; display: flex; flex-direction: column; gap: var(--space-4); max-width: 34rem; margin-inline: auto; }
  .con-discover__room {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 30% 30%, color-mix(in srgb, var(--love-strong) 14%, transparent), transparent 70%),
      radial-gradient(45% 55% at 75% 45%, color-mix(in srgb, var(--brand-strong) 16%, transparent), transparent 72%);
    filter: blur(8px);
  }
  .con-discover__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading tools" "mj left"; align-items: center; gap: var(--space-3) var(--space-3);
  }
  .con-discover__heading { grid-area: heading; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .con-discover__heading .c-eyebrow { margin: 0; }
  .con-discover__title {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: 1.02;
    letter-spacing: var(--tracking-display); font-variation-settings: var(--fvs-display); color: var(--text-1);
  }
  .con-discover__title em { font-style: italic; color: var(--text-love); padding-right: 0.04em; }
  [data-theme="dark"] .con-discover__title em { color: var(--love-strong); }
  .con-discover__tools { grid-area: tools; display: contents; }
  .con-discover__tools > .con-discover__filters { grid-area: tools; align-self: end; }
  .con-discover__tools > .con-discover__left { grid-area: left; justify-self: end; }
  .con-discover__mjrow { grid-area: mj; min-width: 0; }
  .con-discover__left {
    display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-3); border-radius: var(--radius-full);
    background: var(--surface-2); color: var(--text-2); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text);
    font-variant-numeric: var(--numerals); white-space: nowrap;
  }
  .con-discover__filters { position: relative; }
  .con-discover__filters.is-on { color: var(--brand-strong); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .con-discover__fcount {
    position: absolute; top: -0.125rem; right: -0.125rem; display: grid; place-items: center; min-width: 1.125rem; height: 1.125rem;
    padding: 0 0.25rem; border-radius: var(--radius-full); background: var(--accent); color: var(--text-on-accent);
    font: var(--fw-bold) 0.6875rem/1 var(--font-text); box-shadow: 0 0 0 2px var(--surface-base);
  }
  /* Meet My Mary Jane lives in the header here (SPEC-PRODUCT §3.4 item 1), so the action bar can own the bottom. */
  .con-mj {
    position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent); box-shadow: inset 0 0 0 1px var(--border-2);
    color: var(--text-1); text-decoration: none; font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  }
  .con-mj .c-icon { width: 1.375rem; height: 1.375rem; }
  .con-mj > .c-dot { position: absolute; top: 0.375rem; right: 0.5rem; }
  @media (hover: hover) { .con-mj:hover { box-shadow: inset 0 0 0 1px var(--border-2), var(--glow-emerald); } }
  .con-mj:active { transform: scale(0.97); }
  .con-mj:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .con-discover__goals:empty { display: none; }
  .con-honest {
    display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5;
  }
  .con-honest .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: var(--brand-strong); }

  .con-banner {
    display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1);
  }
  .con-banner__icon {
    flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
    background: var(--brand-soft); color: var(--brand-strong);
  }
  .con-banner__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .con-banner__title { margin: 0; font-weight: var(--fw-semibold); color: var(--text-1); line-height: 1.35; flex: 1; }
  .con-banner__body { margin: var(--space-0-5) 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
  .con-banner--photo .con-banner__icon { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
  .con-banner--undo .c-btn { flex: none; }

  /* ---------------------------------------------------------------- the deck: one card at a time, a hint of the stack */
  .con-deck { position: relative; display: grid; gap: var(--space-4); }
  .con-deck:has(.con-card.is-current ~ .con-card)::after {
    content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 1rem; height: calc(min(100%, 38rem) - 1rem);
    border-radius: var(--radius-xl); background: var(--surface-2); box-shadow: var(--shadow-2);
    transform: translateY(0.75rem) scale(0.96); opacity: 0.7;
  }
  .con-deck__loading .c-skeleton__card { border-radius: var(--radius-xl); }

  /* ---------------------------------------------------------------- the card: a magazine cover (§6.4) */
  .con-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--surface-1);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1);
  }
  .con-card[hidden] { display: none; }
  .con-card__media { position: relative; }
  .con-card__cover { display: block; color: inherit; text-decoration: none; }
  .con-card__cover .c-photo { border-radius: 0; }
  .con-card__cover:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus-color); }
  .con-card__flags { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); pointer-events: none; }
  .con-card__liked {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.75rem; padding: 0 var(--space-3) 0 var(--space-2-5, 0.625rem);
    border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    color: var(--text-1); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); box-shadow: inset 0 0 0 1px var(--border-1);
  }
  .con-card__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-5) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; color: #FFF3DD;
  }
  .con-card__name {
    margin: 0; display: flex; align-items: baseline; flex-wrap: wrap;
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: var(--tracking-display);
    font-variation-settings: var(--fvs-display); text-shadow: 0 1px 12px rgba(11, 17, 14, 0.45);
  }
  .con-card__age { font-weight: 500; opacity: 0.92; }
  .con-card__verified { align-self: center; display: inline-grid; margin-left: var(--space-1-5); color: var(--info); }
  .con-card__verified .c-icon { width: 1.25rem; height: 1.25rem; }
  .con-card__place { margin: 0; display: flex; align-items: center; gap: var(--space-1-5); font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-text); color: rgba(255, 243, 221, 0.86); }
  .con-card__place .c-icon { width: 1rem; height: 1rem; }
  .con-card__lf { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .con-card__lf .c-chip--glass { background: rgba(21, 21, 21, 0.42); color: #FFF3DD; box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.22); }

  .con-card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); }
  .con-card__style { display: flex; flex-direction: column; gap: var(--space-2); }
  .con-card__persona { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-1); }
  .con-card__persona .c-emoji { font-size: 1.125rem; }
  .con-card__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .con-card__why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
  .con-card__reason { flex: 1 1 14rem; margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--text-1); line-height: 1.4; }
  .con-card__reason-icon {
    flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm);
    background: var(--dim-bg, var(--surface-3)); color: var(--dim, var(--text-2));
  }
  .con-card__reason-icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .con-card__why[data-dim] { --dim: var(--dim-love); --dim-bg: var(--dim-love-bg); }
  .con-card__why[data-dim="green"] { --dim: var(--dim-green); --dim-bg: var(--dim-green-bg); }
  .con-card__why[data-dim="chemistry"] { --dim: var(--dim-chemistry); --dim-bg: var(--dim-chemistry-bg); }
  .con-card__why[data-dim="communication"] { --dim: var(--dim-communication); --dim-bg: var(--dim-communication-bg); }
  .con-card__why[data-dim="fun"] { --dim: var(--dim-fun); --dim-bg: var(--dim-fun-bg); }
  .con-card__why[data-dim="lifestyle"] { --dim: var(--dim-lifestyle); --dim-bg: var(--dim-lifestyle-bg); }
  .con-card__why[data-dim="romance"] { --dim: var(--dim-romance); --dim-bg: var(--dim-romance-bg); }

  /* card motion: the next card rises in; the one acted on leaves by its verb */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-card.is-entering { animation: con-card-in var(--dur-slow) var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .con-card.is-leaving--like { animation: con-card-like 420ms var(--ease-in) both; }
    :root:not([data-motion="reduce"]) .con-card.is-leaving--pass { animation: con-card-pass var(--dur-base) var(--ease-in) both; }
    :root:not([data-motion="reduce"]) .con-card.is-leaving--compliment { animation: con-card-compliment 520ms var(--ease-in) both; }
  }
  .con-card.is-leaving { pointer-events: none; }
  @keyframes con-card-in {
    from { transform: translateY(calc(18px * var(--motion-ok))) scale(calc(1 - 0.03 * var(--motion-ok))); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  @keyframes con-card-like {
    0% { transform: none; opacity: 1; box-shadow: var(--shadow-3); }
    35% { transform: scale(calc(1 + 0.015 * var(--motion-ok))); box-shadow: var(--shadow-3), 0 0 0 2px var(--love-strong), 0 0 60px 8px color-mix(in srgb, var(--love-strong) 40%, transparent); }
    100% { transform: translateY(calc(-28px * var(--motion-ok))) scale(calc(1 - 0.04 * var(--motion-ok))); opacity: 0; }
  }
  @keyframes con-card-pass {
    to { transform: translateY(calc(16px * var(--motion-ok))) scale(calc(1 - 0.04 * var(--motion-ok))); opacity: 0; }
  }
  @keyframes con-card-compliment {
    0% { transform: none; opacity: 1; }
    40% { transform: scale(calc(1 + 0.02 * var(--motion-ok))); box-shadow: var(--shadow-3), var(--glow-emerald); }
    100% { transform: translateY(calc(-32px * var(--motion-ok))) scale(calc(1 - 0.05 * var(--motion-ok))); opacity: 0; }
  }

  /* ================================================================ the action bar: Not today · Like · Compliment · Say hello */
  .con-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; }
  .con-bar__form { display: contents; }
  .con-act {
    position: relative; flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-1); cursor: pointer; text-decoration: none;
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
    transition: transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-fast);
  }
  .con-act .c-icon { flex: none; width: 1.375rem; height: 1.375rem; }
  .con-act:active { transform: scale(0.94); }
  .con-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  @media (hover: hover) { .con-act:hover { background: var(--surface-3); } }
  .con-act__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .con-act--like { width: 3.5rem; height: 3.5rem; color: var(--love-strong); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--love-strong) 70%, transparent); }
  .con-act--like .c-icon { width: 1.625rem; height: 1.625rem; }
  .con-act__heart-fill { position: absolute; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
  .con-act--like.is-liked .con-act__heart-fill, .con-act--like[aria-pressed="true"] .con-act__heart-fill { opacity: 1; transform: none; }
  .con-act--like.is-liked .con-act__heart { opacity: 0; }
  @media (hover: hover) { .con-act--like:hover { background: var(--love-soft); box-shadow: inset 0 0 0 2px var(--love-strong), var(--glow-berry); } }
  /* Compliment: the signature move — the widest, emerald, labelled (§6.4) */
  .con-act--compliment {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 9.5rem; max-width: 15rem; height: 3.5rem; gap: var(--space-2);
    padding: 0 var(--space-6); background: var(--brand-fill); color: var(--text-on-brand);
    box-shadow: var(--shadow-2), var(--edge-highlight); font: var(--fw-semibold) var(--fs-md)/1 var(--font-text); letter-spacing: var(--tracking-button);
  }
  .con-act--compliment .con-act__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  @media (hover: hover) { .con-act--compliment:hover { background: var(--brand-hover); box-shadow: var(--glow-emerald); } }
  .con-act--compact { flex: none; min-width: 0; width: 3.5rem; padding: 0; }
  .con-act--compact .con-act__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .con-bar__main { flex: 1 1 auto; min-width: 0; }
  .con-bar--matched { justify-content: stretch; }
  .con-bar--matched .con-act--compliment:not(.con-act--compact) { flex: 1 1 auto; max-width: none; }

  /* the deck's bar floats above the bottom nav on phones, like a glass pill */
  .con-discover__bar {
    position: sticky; z-index: var(--z-sticky); bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
    padding: var(--space-2); border-radius: var(--radius-full); background: var(--glass-bg);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1);
  }
  @media (min-width: 64rem) { .con-discover__bar { bottom: var(--space-6); } }
  .con-discover__bar[hidden] { display: none; }
  [data-state="end"] .con-discover__bar, [data-state="empty"] .con-discover__bar, [data-state="end"] .con-honest { display: none; }

  /* the like pulse (the Foundation's fx-pulse / fx-burst run on the heart) */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-act--like.fx-burst::after { border-radius: 50%; }
  }

  /* ================================================================ the compliment composer (§6.6 compose sheet) */
  .con-composer, .con-hello { display: flex; flex-direction: column; gap: var(--space-5); }
  .con-composer__group { margin: 0; padding: 0; border: 0; min-width: 0; }
  .con-composer__legend { margin: 0 0 var(--space-3); padding: 0; font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-2); }
  .con-composer__note { margin: 0; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--text-1); font-size: var(--fs-sm); }
  .con-composer__note .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); }
  .con-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--space-2); }
  .con-cat { position: relative; display: block; cursor: pointer; }
  .con-cat__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .con-cat__face {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1-5); min-height: 4.5rem;
    padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--border-1); text-align: center;
    transition: background-color var(--dur-fast), box-shadow var(--dur-base), color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
  }
  .con-cat__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--text-2); transition: inherit; }
  .con-cat__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .con-cat__label { font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); }
  .con-cat__input:checked + .con-cat__face {
    background: var(--love-soft); color: var(--text-1); box-shadow: inset 0 0 0 1.5px var(--love-strong);
  }
  .con-cat__input:checked + .con-cat__face .con-cat__icon { background: var(--love-strong); color: #FFFFFF; }
  .con-cat__input:focus-visible + .con-cat__face { box-shadow: var(--focus-ring); }
  @media (hover: hover) { .con-cat:hover .con-cat__face { color: var(--text-1); } }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-cat__input:checked + .con-cat__face { animation: m4l-pop var(--dur-base) var(--ease-spring); }
  }

  .con-composer__starters { display: flex; flex-direction: column; }
  .con-starters { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
  .con-starters + .con-starters { margin-top: var(--space-3); }
  [data-js] [data-composer] .con-starters:not(.is-shown) { display: none; }
  [data-js] [data-composer] .con-starters { max-height: 14.5rem; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1);
    mask-image: linear-gradient(to bottom, #000 82%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); padding-bottom: var(--space-6); }
  .con-starter { position: relative; display: block; cursor: pointer; }
  .con-starter__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .con-starter__text {
    display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2);
    color: var(--text-1); font-size: var(--fs-sm); line-height: 1.45; box-shadow: inset 0 0 0 1px var(--border-1);
    transition: background-color var(--dur-fast), box-shadow var(--dur-base);
  }
  @media (hover: hover) { .con-starter:hover .con-starter__text { background: var(--surface-3); } }
  .con-starter__input:checked + .con-starter__text { background: var(--love-soft); box-shadow: inset 3px 0 0 var(--love-strong), inset 0 0 0 1px color-mix(in srgb, var(--love-strong) 45%, transparent); }
  .con-starter__input:focus-visible + .con-starter__text { box-shadow: var(--focus-ring); }
  .con-composer__hint { margin: var(--space-2) 0 0; color: var(--text-3); font-size: var(--fs-xs); }

  .con-composer__preview { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .con-composer__preview[hidden] { display: none; }
  .con-composer__preview figcaption { margin: 0; }
  .con-composer__actions { display: flex; flex-direction: column; gap: var(--space-2); }
  .con-composer__actions .c-btn[hidden] { display: none; }
  .con-composer__credit { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); color: var(--text-3); font-size: var(--fs-xs); }
  .con-composer__credit .c-icon { width: 0.875rem; height: 0.875rem; color: var(--love-strong); }

  .con-stop {
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warn) 12%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--warn); color: var(--text-1);
  }
  .con-stop[hidden] { display: none; }
  .con-stop__message { margin: 0; line-height: 1.5; }
  .con-stop__suggestions { margin: 0; padding: 0 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-2); font-size: var(--fs-sm); }
  .con-stop__suggestions:empty { display: none; }

  .con-locked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-1); }
  .con-locked p { margin: 0; line-height: 1.5; }
  .con-locked__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }

  /* ================================================================ the compliment note: paper handed across a table (§6.6) */
  .con-notes { display: flex; flex-direction: column; gap: var(--space-5); }
  .con-note {
    --note-ink: #1A221E;
    position: relative; display: flex; flex-direction: column; gap: var(--space-4); margin: 0;
    padding: var(--space-6); border-radius: var(--radius-lg); background: #FFF3DD; color: var(--note-ink);
    box-shadow: var(--shadow-3), 0 0 40px 0 rgba(214, 63, 91, 0.25);
  }
  .con-note--mini { padding: var(--space-5); gap: var(--space-3); box-shadow: var(--shadow-2), 0 0 32px 0 rgba(214, 63, 91, 0.18); }
  .con-note__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .con-note__tag {
    display: inline-flex; align-items: center; gap: var(--space-1-5); height: 1.75rem; padding: 0 var(--space-3) 0 var(--space-2);
    border-radius: var(--radius-full); background: #FDE8EC; color: #BE3150; font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); align-self: flex-start;
  }
  .con-note__tag .c-icon { width: 1rem; height: 1rem; }
  .con-note__time { color: rgba(26, 34, 30, 0.62); font-size: var(--fs-xs); }
  .con-note__text { margin: 0; padding: 0 0 0 var(--space-1); }
  .con-note__text p, p.con-note__text {
    position: relative; margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-xl); line-height: 1.3;
    color: var(--note-ink); overflow-wrap: anywhere; font-variation-settings: var(--fvs-display-text);
  }
  .con-note__text p::before, p.con-note__text::before { content: "\201C"; position: absolute; left: -0.55em; top: -0.05em; color: #BE3150; opacity: 0.55; }
  .con-note__text p::after { content: "\201D"; color: #BE3150; opacity: 0.55; padding-left: 0.05em; }
  p.con-note__text:empty::before { content: none; }
  .con-note__from { margin: 0; color: rgba(26, 34, 30, 0.7); font-size: var(--fs-sm); }
  .con-note__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .con-note__who { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(26, 34, 30, 0.72); text-decoration: none; font-size: var(--fs-sm); line-height: 1.3; }
  .con-note__who strong { color: var(--note-ink); font-weight: var(--fw-semibold); }
  .con-note__who:focus-visible { outline: none; box-shadow: 0 0 0 3px #176B45; border-radius: var(--radius-sm); }
  .con-note .c-status-pill { background: rgba(26, 34, 30, 0.08); color: var(--note-ink); }
  .con-note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-1); }
  .con-note__actions form { display: contents; }
  /* ink-on-cream buttons: the note keeps its paper colours in both themes */
  .con-note .c-btn--ghost { color: var(--note-ink); box-shadow: inset 0 0 0 1.5px rgba(26, 34, 30, 0.55); background: transparent; }
  @media (hover: hover) { .con-note .c-btn--ghost:hover { background: rgba(26, 34, 30, 0.06); } }
  .con-note .c-btn--quiet { color: #145A3A; }
  .con-note .c-btn--primary { background: #176B45; color: #FFFFFF; }
  .con-note__done { display: inline-flex; align-items: center; gap: var(--space-1-5); color: #145A3A; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
  .con-note__done .c-icon { width: 1rem; height: 1rem; color: #BE3150; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-note--grow { animation: m4l-grow-in var(--dur-slower) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
    :root:not([data-motion="reduce"]) .con-note--grow::after {
      content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
      box-shadow: 0 0 60px 10px rgba(214, 63, 91, 0.35); animation: con-note-glow 1.2s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms);
    }
  }
  @keyframes con-note-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.4; } }
  .con-note.is-answered { opacity: 0.82; }

  /* ================================================================ compose pages (the no-JS composers) */
  .con-compose { display: flex; flex-direction: column; gap: var(--space-5); }
  .con-compose__back { margin: 0; }
  .con-compose__back a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); text-decoration: none; font-weight: var(--fw-semibold); }
  .con-compose__back .c-icon { width: 1.125rem; height: 1.125rem; }
  .con-compose__grid { display: grid; gap: var(--space-5); align-items: start; }
  .con-compose__form { display: flex; flex-direction: column; gap: var(--space-4); }
  .con-compose__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.2; color: var(--text-1); }
  @media (min-width: 64rem) {
    .con-compose__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
    .con-compose__card { position: sticky; top: var(--space-6); }
  }

  /* ================================================================ the end of the deck and the cold start */
  .con-end { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-8) var(--space-6); }
  .con-end[hidden] { display: none; }
  .con-end__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); box-shadow: var(--glow-lime); }
  [data-theme="light"] .con-end__mark { color: var(--brand-strong); }
  .con-end__mark .c-icon { width: 1.5rem; height: 1.5rem; }
  .con-end__title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-2xl); color: var(--text-1); }
  .con-end__body { margin: 0; color: var(--text-2); max-width: 26rem; }
  .con-end__next { list-style: none; margin: var(--space-3) 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
  .con-end__link {
    display: flex; align-items: center; gap: var(--space-3); min-height: 3.75rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-1); text-decoration: none; transition: background-color var(--dur-fast);
  }
  @media (hover: hover) { .con-end__link:hover { background: var(--surface-3); } }
  .con-end__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .con-end__link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5); }
  .con-end__link small { color: var(--text-2); font-size: var(--fs-xs); }
  .con-end__link > .c-icon { width: 1.125rem; height: 1.125rem; color: var(--text-3); }
  .con-end__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); flex: none; }
  .con-end__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-end.is-revealed { animation: m4l-fade-up var(--dur-slow) var(--ease-out) both; }
  }

  .con-cold { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; }
  .con-cold__mark { display: grid; place-items: center; }
  .con-cold__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.15; color: var(--text-1); max-width: 26rem; }
  .con-cold__body { margin: 0; color: var(--text-2); max-width: 28rem; line-height: 1.55; }
  .con-cold__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

  /* ================================================================ filters */
  .con-filters { display: flex; flex-direction: column; gap: var(--space-5); }
  .con-filters__group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .con-filters__legend { padding: 0; margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-1); }
  .con-filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .con-filters__perk, .con-filters__locked { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
  .con-filters__perk .c-icon, .con-filters__locked .c-icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--lifestyle-400, var(--brand-strong)); }
  .con-filters__actions { display: flex; flex-direction: column; gap: var(--space-2); }
  .con-filters__note { margin: 0; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
  .con-discover__inline-filters { display: flex; flex-direction: column; gap: var(--space-4); }

  /* ================================================================ likes, compliments, matches: the inbox pages */
  .con-inbox, .con-matches { position: relative; display: flex; flex-direction: column; gap: var(--space-5); }
  /* the floating "Meet My Mary Jane" pill (phones) must never cover the last row */
  @media (max-width: 63.99rem) { .con-page-matches .con-matches { padding-bottom: calc(3.25rem + var(--space-6)); } }
  .con-inbox__room {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 70% 20%, color-mix(in srgb, var(--love-strong) 12%, transparent), transparent 70%);
  }
  .con-inbox__head { display: flex; flex-direction: column; gap: var(--space-2); }
  .con-inbox__head .c-eyebrow { margin: 0; }
  .con-inbox__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-1); }
  .con-inbox__title em { font-style: italic; color: var(--text-love); }
  [data-theme="dark"] .con-inbox__title em { color: var(--love-strong); }
  .con-inbox__lead { margin: 0; color: var(--text-2); line-height: 1.5; }
  .con-inbox__more { margin: 0; text-align: center; }
  .con-inbox__more a { display: inline-flex; align-items: center; gap: var(--space-1-5); font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; }
  .con-inbox__more .c-icon { width: 1rem; height: 1rem; }
  .con-inbox__credit { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1-5); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
  .con-inbox__credit > .c-icon { width: 1rem; height: 1rem; color: var(--love-strong); }
  .con-inbox__credit a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-link); }
  .con-inbox__credit a .c-icon { width: 0.875rem; height: 0.875rem; }
  .con-reply { display: flex; flex-direction: column; gap: var(--space-4); }

  .con-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  @media (min-width: 48rem) { .con-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } }
  .con-grid > [role="listitem"] { min-width: 0; }
  .con-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .con-tile__cover { position: relative; display: block; color: #FFF3DD; text-decoration: none; border-radius: var(--radius-lg); }
  .con-tile__cover .c-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .con-tile__cover .c-heart-glow--rect { --ring-r: var(--radius-lg); }
  .con-tile__cover:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .con-tile__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.125rem; padding: var(--space-3); pointer-events: none; }
  .con-tile__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: 1.15; text-shadow: 0 1px 10px rgba(11, 17, 14, 0.5); }
  .con-tile__meta { font-size: var(--fs-xs); color: rgba(255, 243, 221, 0.82); }
  .con-tile__badge { position: absolute; z-index: 3; top: var(--space-2); right: var(--space-2); }
  .con-tile__foot { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
  .con-tile__foot form { display: contents; }
  .con-tile__status, .con-tile__note { margin: 0; display: flex; align-items: center; gap: var(--space-1-5); font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-1); }
  .con-tile__status .c-icon, .con-tile__note .c-icon { flex: none; width: 1rem; height: 1rem; color: var(--text-3); }
  .con-tile__status--your_move .c-icon, .con-tile__status--say_hi .c-icon { color: var(--brand-strong); }
  .con-tile__status--unread { color: var(--text-1); }
  .con-tile__status--unread .c-icon { color: var(--love-strong); }
  .con-tile__status--their_move { color: var(--text-2); font-weight: var(--fw-medium); }
  .con-tile__note { color: var(--text-love); font-weight: var(--fw-medium); font-size: var(--fs-xs); }
  [data-theme="dark"] .con-tile__note { color: var(--love-strong); }
  .con-tile__note .c-icon { color: currentColor; }
  .con-tile__nudge {
    display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--text-1); text-decoration: none; font-size: var(--fs-xs); line-height: 1.35;
  }
  .con-tile__nudge .c-icon { flex: none; width: 0.875rem; height: 0.875rem; color: var(--dim-green-fg); }
  .con-tile--ghost { pointer-events: none; }
  .con-grid--blur .con-tile--ghost .c-photo { border-radius: var(--radius-lg); }
  .con-tile .c-status-pill { align-self: flex-start; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-tile--grow { animation: m4l-grow-in var(--dur-slower) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  }

  /* the ⋯ menu of a match tile (a <details>: works without JavaScript): the toggle sits beside the status line, never over
     the photo; the menu opens upward over the tile, clear of the bottom navigation and the Mary Jane pill */
  .con-grid--matches .con-tile__foot { position: relative; min-height: 2.25rem; padding-right: 2.5rem; }
  .con-more { position: absolute; z-index: 4; top: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-2)); }
  .con-more__toggle {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; list-style: none; cursor: pointer;
    background: transparent; color: var(--text-2);
  }
  @media (hover: hover) { .con-more__toggle:hover { background: var(--surface-2); color: var(--text-1); } }
  .con-more[open] .con-more__toggle { background: var(--surface-2); color: var(--text-1); }
  .con-more__toggle::-webkit-details-marker { display: none; }
  .con-more__toggle .c-icon { width: 1.25rem; height: 1.25rem; }
  .con-more__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .con-more__menu {
    position: absolute; bottom: calc(100% + var(--space-1)); right: 0; min-width: 10.5rem; padding: var(--space-2); border-radius: var(--radius-md);
    background: var(--surface-2); box-shadow: var(--shadow-4), inset 0 0 0 1px var(--border-2); display: flex; flex-direction: column;
  }
  .con-more__menu form { display: contents; }
  .con-more__menu a, .con-more__danger {
    display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-1); text-decoration: none; font: var(--fw-medium) var(--fs-sm)/1.2 var(--font-text); cursor: pointer; text-align: left;
  }
  .con-more__menu .c-icon { width: 1.125rem; height: 1.125rem; color: var(--text-2); }
  @media (hover: hover) { .con-more__menu a:hover, .con-more__danger:hover { background: var(--surface-3); } }
  .con-more__danger { color: var(--danger); }
  .con-more__danger .c-icon { color: var(--danger); }

  /* the "New matches" row */
  .con-matches__head { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
  .con-matches__head > div { display: flex; flex-direction: column; gap: var(--space-2); }
  .con-matches__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .con-matches__links .c-btn { position: relative; }
  .con-matches__links .c-badge { position: absolute; top: -0.375rem; right: -0.375rem; }
  .con-new { display: flex; flex-direction: column; gap: var(--space-3); }
  .con-new__title { margin: 0; font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); color: var(--text-2); }
  .con-new__row { list-style: none; margin: 0; padding: var(--space-3) var(--space-1) var(--space-2); display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; }
  .con-new__row::-webkit-scrollbar { display: none; }
  .con-new__person { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 5.5rem; color: var(--text-1); text-decoration: none; }
  .con-new__name { font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .con-new__badge { position: absolute; top: -0.25rem; right: 0; }
  .con-new__person:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
  .con-matches__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
  .con-matches__alt { margin: 0; }
  .con-matches__alt a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-link); font-weight: var(--fw-semibold); }
  .con-matches__alt .c-icon { width: 1rem; height: 1rem; }

  /* hellos: a message before a match */
  .con-hellos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .con-hello-card {
    display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1);
  }
  .con-hello-card__who { display: flex; align-items: center; gap: var(--space-3); color: var(--text-1); text-decoration: none; }
  .con-hello-card__who > span:last-child { display: flex; flex-direction: column; gap: var(--space-0-5); }
  .con-hello-card__who small { color: var(--text-3); font-size: var(--fs-xs); }
  .con-hello-card__note { margin: 0; }
  .con-hello-card__note p {
    margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
    background: var(--surface-2); color: var(--text-1); line-height: 1.5; overflow-wrap: anywhere;
  }
  .con-hello-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .con-hello-card__actions form { display: contents; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-hello-card--new { animation: m4l-fade-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  }
  .con-gone { transition: opacity var(--dur-base) var(--ease-in), transform var(--dur-base) var(--ease-in); opacity: 0; transform: scale(calc(1 - 0.03 * var(--motion-ok))); }

  /* ================================================================ "It's mutual." — the match celebration (§6.10, §5.5) */
  .con-celebrate {
    --stage-av: 7rem;
    position: fixed; inset: 0; z-index: var(--z-celebration); width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
    border: 0; background: var(--surface-brand-gradient); color: var(--text-1); overflow-x: hidden; overflow-y: auto;
  }
  [data-theme="light"] .con-celebrate { color: #FFF3DD; }
  .con-celebrate::backdrop { background: var(--scrim); backdrop-filter: var(--blur-scrim); -webkit-backdrop-filter: var(--blur-scrim); }
  .con-celebrate--page { position: relative; inset: auto; z-index: auto; height: auto; margin: 0 0 var(--space-6); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-4); }
  .con-celebrate--page:focus { outline: none; }
  .con-celebrate__panel {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); min-height: 100%;
    max-width: 30rem; margin: 0 auto; padding: calc(var(--space-12) + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    text-align: center; justify-content: center;
  }
  .con-celebrate--page .con-celebrate__panel { min-height: 0; padding-block: var(--space-10) var(--space-8); }
  .con-celebrate__room {
    position: absolute; inset: -20%; z-index: -1; pointer-events: none;
    background: radial-gradient(35% 30% at 30% 30%, rgba(238, 90, 116, 0.28), transparent 70%),
      radial-gradient(40% 35% at 70% 35%, rgba(52, 194, 126, 0.26), transparent 72%),
      radial-gradient(60% 40% at 50% 100%, rgba(183, 228, 60, 0.08), transparent 70%);
  }
  .con-celebrate__close { position: absolute; top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); right: var(--space-3); margin: 0; }
  .con-celebrate__close .c-icon-btn { color: #FFF3DD; }
  .con-celebrate__stage { position: relative; display: flex; align-items: center; justify-content: center; margin-top: var(--space-6); padding-top: 4.75rem; }
  .con-celebrate__person { position: relative; z-index: 1; display: block; }
  .con-celebrate__person--me { margin-right: -0.5rem; }
  .con-celebrate__person--them { margin-left: -0.5rem; }
  .con-celebrate__person .c-avatar { box-shadow: 0 0 0 3px #0C2B1F; }
  .con-celebrate__heart { position: absolute; z-index: 2; left: 50%; top: 0; width: 5.5rem; height: 5rem; margin-left: -2.75rem; overflow: visible;
    filter: drop-shadow(0 0 14px rgba(238, 90, 116, 0.55)) drop-shadow(0 0 26px rgba(52, 194, 126, 0.4)); }
  .con-celebrate__half { transform-box: fill-box; transform-origin: center; }
  .con-celebrate__eyebrow { margin: var(--space-4) 0 0; }
  .con-celebrate__title {
    margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-5xl); line-height: 1;
    letter-spacing: var(--tracking-display); color: #FFF3DD; font-variation-settings: var(--fvs-display);
  }
  .con-celebrate__title em { font-style: italic; color: #F7A9B6; }
  .con-celebrate__body { margin: 0; font-size: var(--fs-lg); color: rgba(255, 243, 221, 0.82); max-width: 24rem; line-height: 1.5; }
  .con-celebrate__ring { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .con-celebrate__ring .c-disclaimer { color: rgba(255, 243, 221, 0.62); justify-content: center; }
  .con-celebrate__actions { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
  .con-celebrate__actions .c-btn--ghost { color: #FFF3DD; box-shadow: inset 0 0 0 1.5px rgba(255, 243, 221, 0.45); }
  .con-celebrate__actions .c-btn--quiet { color: rgba(255, 243, 221, 0.86); align-self: center; }

  /* "hearts join": 1.1 s, then everything is still (reduced motion: one 150 ms fade of the finished composition) */
  .con-celebrate.is-playing .con-celebrate__panel > * { animation: m4l-fade var(--dur-fade) linear both; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__panel > * { animation: none; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__person--me { animation: con-join-left 520ms var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__person--them { animation: con-join-right 520ms var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__half--love { animation: con-half-left 700ms var(--ease-out) 300ms both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__half--green { animation: con-half-right 700ms var(--ease-out) 300ms both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__heart { animation: con-heart-bloom 1100ms var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__eyebrow,
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__title { animation: m4l-fade-up 360ms var(--ease-out) 800ms both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__body,
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__ring,
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__actions { animation: m4l-fade-up 360ms var(--ease-out) 950ms both; }
    :root:not([data-motion="reduce"]) .con-celebrate.is-playing .con-celebrate__room { animation: m4l-fade 900ms var(--ease-out) both; }
  }
  @keyframes con-join-left { from { transform: translateX(calc(-45vw * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes con-join-right { from { transform: translateX(calc(45vw * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes con-half-left { from { transform: translateX(calc(-36px * var(--motion-ok))) rotate(calc(-10deg * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes con-half-right { from { transform: translateX(calc(36px * var(--motion-ok))) rotate(calc(10deg * var(--motion-ok))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes con-heart-bloom {
    0%, 55% { filter: drop-shadow(0 0 0 rgba(52, 194, 126, 0)); }
    75% { filter: drop-shadow(0 0 22px rgba(238, 90, 116, 0.85)) drop-shadow(0 0 48px rgba(52, 194, 126, 0.7)); }
    100% { filter: drop-shadow(0 0 14px rgba(238, 90, 116, 0.55)) drop-shadow(0 0 26px rgba(52, 194, 126, 0.4)); }
  }
  @media (forced-colors: active) {
    .con-celebrate__heart { filter: none; }
    .con-card, .con-note, .con-hello-card { border: 1px solid CanvasText; }
  }

  /* ================================================================ wider screens */
  @media (min-width: 40rem) {
    .con-card__caption { padding: var(--space-8) var(--space-6) var(--space-6); }
    .con-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
  }
  @media (max-width: 22rem) {
    .con-discover__title { font-size: var(--fs-2xl); }
    .con-act--compliment { min-width: 0; padding: 0 var(--space-4); }
    .con-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* modules/marketing-home.css */
/* My420Love · modules/marketing-home.css — the home page (SPEC-DESIGN §7.1 hero, §7.2 rhythm) and the pieces other
   marketing pages reuse: plan cards (§6.17), the phone frame, the "why" panel, the compliment note, story cards.
   @layer modules. Semantic tokens only; motion gated by --motion-ok and the reduced-motion setting. */
@layer modules {

  /* ================================================================ hero: Love Test question 1 */
  .mk-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(1.5rem, 3vw, 3rem) clamp(4rem, 7vw, 6.5rem); }
  .mk-hero::before {
    content: ""; position: absolute; inset: -10% -10% 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(42% 46% at 12% 8%, rgba(31, 158, 98, 0.20), transparent 70%),
      radial-gradient(38% 44% at 86% 38%, rgba(214, 63, 91, 0.16), transparent 72%),
      radial-gradient(30% 30% at 60% 100%, rgba(183, 228, 60, 0.05), transparent 70%);
  }
  [data-theme="light"] .mk-hero::before, :root[data-theme="light"] .mk-hero::before { opacity: 0.55; }
  .mk-hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
  @media (min-width: 64rem) {
    .mk-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); min-height: min(47rem, calc(100dvh - var(--header-h) - 1rem)); }
  }
  .mk-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .mk-hero__eyebrow { font-size: var(--fs-xs); letter-spacing: 0.02em; }
  .mk-hero__title { max-width: 11.5ch; }
  .mk-hero__title em { color: var(--love-strong); }
  .mk-hero__lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); max-width: 30rem; }
  .mk-hero__actions { margin-top: var(--space-2); }
  @media (max-width: 39.99rem) {
    .mk-hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
    .mk-hero__cta { width: 100%; }
    .mk-hero__secondary { justify-content: center; min-height: 2.75rem; }
  }
  .mk-hero__under { font-size: var(--fs-sm); color: var(--text-2); max-width: 30rem; }
  .mk-hero__founding { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.875rem; border-radius: var(--radius-full);
    background: var(--brand-soft); color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-strong) 35%, transparent); }
  .mk-hero__founding .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); }

  .mk-hero__stage { position: relative; display: grid; justify-items: center; padding-block: var(--space-4); }
  .mk-hero__heart { position: absolute; z-index: -1; width: min(40rem, 128%); top: 44%; left: 50%; transform: translate(-50%, -50%); opacity: 0.95; pointer-events: none; }
  @media (max-width: 63.99rem) { .mk-hero__heart { width: min(34rem, 118%); top: 40%; opacity: 0.7; } }
  .mk-float {
    position: absolute; z-index: 2; display: none; align-items: center; gap: var(--space-2);
    padding: 0.5rem 0.9rem 0.5rem 0.65rem; border-radius: var(--radius-full);
    background: var(--glass-bg); color: var(--text-1); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-2); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); white-space: nowrap;
  }
  .mk-float .c-emoji { font-size: 1rem; }
  @media (min-width: 64rem) {
    .mk-float { display: inline-flex; }
    .mk-float--a { top: 3.25rem; left: -6rem; }
    .mk-float--b { bottom: -1.75rem; right: 1.5rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .mk-float--a { animation: m4l-fade-up var(--dur-slower) var(--ease-out) 900ms both; }
    :root:not([data-motion="reduce"]) .mk-float--b { animation: m4l-fade-up var(--dur-slower) var(--ease-out) 1200ms both; }
    :root:not([data-motion="reduce"]) .mk-hero__copy > * { animation: m4l-fade-up var(--dur-slower) var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .mk-hero__copy > :nth-child(2) { animation-delay: 60ms; }
    :root:not([data-motion="reduce"]) .mk-hero__copy > :nth-child(3) { animation-delay: 180ms; }
    :root:not([data-motion="reduce"]) .mk-hero__copy > :nth-child(4) { animation-delay: 300ms; }
    :root:not([data-motion="reduce"]) .mk-hero__copy > :nth-child(n + 5) { animation-delay: 420ms; }
    :root:not([data-motion="reduce"]) .mk-hero-card { animation: m4l-grow-in var(--dur-slower) var(--ease-out) 350ms both; }
  }

  /* the live question card */
  .mk-hero-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-4);
    width: min(100%, 27rem); padding: var(--space-5);
    border-radius: var(--radius-xl); background: var(--surface-1);
    box-shadow: var(--shadow-4), var(--edge-highlight), inset 0 0 0 1px var(--border-1);
  }
  @media (min-width: 30rem) { .mk-hero-card { padding: var(--space-6); } }
  .mk-hero-card::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(160deg, color-mix(in srgb, var(--dim-green) 45%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--dim-love) 45%, transparent));
    filter: blur(14px); opacity: 0.55;
  }
  .mk-hero-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .mk-hero-card__fieldset { display: block; min-width: 0; }
  .mk-hero-card__prompt { float: left; width: 100%; display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
  .mk-hero-card__orb { position: relative; display: grid; place-items: center; flex: none; width: 4rem; height: 4rem; }
  .mk-hero-card__orb svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 12px 28px -12px var(--dim-green-glow); }
  .mk-hero-card__orb .c-emoji { position: relative; font-size: 1.875rem; filter: drop-shadow(0 3px 8px rgba(5, 9, 7, 0.35)); }
  .mk-hero-card__prompt-text { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem); line-height: 1.05;
    letter-spacing: -0.02em; font-variation-settings: var(--fvs-display); color: var(--text-1); text-wrap: balance; }
  .mk-hero-card__tiles { clear: both; display: flex; flex-direction: column; gap: var(--space-2); }
  .mk-hero-tile.c-choice__tile { min-height: 3.25rem; padding: 0.4rem var(--space-4) 0.4rem 0.45rem; gap: var(--space-3); border-radius: var(--radius-md); }
  .mk-hero-tile .c-choice__emoji { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
  .mk-hero-tile .c-choice__label { font-size: var(--fs-md); }
  .mk-hero-tile.is-picked { border-color: var(--brand-strong); background: linear-gradient(0deg, var(--brand-soft), var(--brand-soft)), var(--surface-1); }
  .mk-hero-card .mk-age { min-height: 3rem; }
  .mk-hero-card__foot { display: flex; flex-direction: column; gap: var(--space-2); }
  .mk-hero-card__hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; max-width: none; }
  .mk-hero-card__resume { justify-content: center; font-size: var(--fs-sm); }
  .mk-hero-card.is-leaving { transition: opacity var(--dur-base) var(--ease-in), transform var(--dur-base) var(--ease-in); opacity: 0.2; transform: translateX(calc(-12px * var(--motion-ok))) scale(0.99); }

  /* ================================================================ 2 · seven colors */
  .mk-colors { display: flex; gap: var(--space-4); margin: 0; padding: 0 0 var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .mk-colors::-webkit-scrollbar { display: none; }
  .mk-color {
    position: relative; flex: 0 0 72%; scroll-snap-align: start; max-width: none;
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6);
    border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--dim-bg), transparent 75%), var(--surface-1);
    box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--dim) 22%, var(--border-1));
  }
  .mk-color::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--dim), color-mix(in srgb, var(--dim) 15%, transparent)); }
  @media (min-width: 40rem) { .mk-color { flex-basis: 44%; } }
  @media (min-width: 64rem) {
    .mk-colors { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; }
    .mk-color { flex: 0 0 calc((100% - 3 * var(--space-4)) / 4); }
  }
  .mk-color__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--dim-bg); color: var(--dim); margin-bottom: var(--space-2); }
  .mk-color__icon .c-icon { width: 1.5rem; height: 1.5rem; }
  .mk-color__name { font-size: var(--fs-xl); line-height: 1.15; }
  .mk-color__line { color: var(--text-2); font-size: var(--fs-md); }
  .mk-color__weight { position: absolute; top: var(--space-5); right: var(--space-5); font: var(--fw-bold) var(--fs-xs)/1 var(--font-text);
    font-variant-numeric: var(--numerals); color: var(--dim-fg); padding: 0.3rem 0.5rem; border-radius: var(--radius-full); background: var(--dim-bg); }
  .mk-colors__note { margin-top: var(--space-8); }

  /* ================================================================ 3 · why you match */
  .mk-ticks { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; }
  .mk-ticks li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-1); font-weight: var(--fw-medium); }
  .mk-ticks .c-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--accent); }
  .mk-why { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 30rem; margin-inline: auto; }
  @media (min-width: 64rem) {
    .mk-why-band { align-items: start; }
    .mk-why-band > :first-child { position: sticky; top: calc(var(--header-h) + var(--space-12)); }
  }
  .mk-pair { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
  .mk-pair__card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3);
    border-radius: var(--radius-lg); background: rgba(255, 243, 221, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.12); }
  .mk-pair__avatar { display: block; width: 4.5rem; height: 4.5rem; }
  .mk-pair__avatar svg { width: 100%; height: 100%; border-radius: 50%; }
  .mk-pair__label { font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text); color: var(--text-2); }
  .mk-pair__heart { width: 3.5rem; margin-inline: calc(var(--space-2) * -1); z-index: 1; }
  .mk-why__panel { position: relative; gap: var(--space-4); padding: var(--space-6); }
  .mk-why__example { position: absolute; top: var(--space-4); right: var(--space-4); }
  .mk-reasons { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; }
  .mk-reason { display: flex; align-items: center; gap: var(--space-3); min-height: 2.25rem; color: var(--text-1); max-width: none; }
  .mk-reason__icon { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .mk-reason__icon .c-icon { width: 1rem; height: 1rem; }
  .mk-reasons--sm .mk-reason { font-size: var(--fs-sm); min-height: 1.75rem; }
  .mk-why__meters { gap: var(--space-3); }
  .mk-why__vibe { display: flex; flex-direction: column; gap: var(--space-1); }
  .mk-why__vibe-text { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.3; color: var(--text-1); max-width: none; }
  .mk-talk { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--accent-soft); }
  .mk-talk__icon { flex: none; color: var(--dim-green-fg); }
  .mk-talk__icon .c-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .mk-talk__label { font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); color: var(--text-1); }
  .mk-talk__text { color: var(--text-2); max-width: none; }

  /* ================================================================ 4 · Mary Jane + the phone frame */
  .mk-points { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; }
  .mk-points li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-1); }
  .mk-points__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
  .mk-points__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .mk-mj-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); isolation: isolate; }
  .mk-mj-stage__glow { position: absolute; z-index: -1; width: 30rem; height: 30rem; max-width: 120%; top: 45%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(31, 158, 98, 0.24), rgba(214, 63, 91, 0.10) 60%, transparent); filter: blur(10px); }
  .mk-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: 0; }
  .mk-phone { position: relative; width: min(18.5rem, 86vw); padding: 0.625rem; border-radius: 2.75rem; background: #0B110E;
    box-shadow: 0 0 0 1px rgba(255, 243, 221, 0.14), 0 2px 0 1px rgba(255, 243, 221, 0.04) inset, var(--shadow-4); }
  .mk-phone__island { position: absolute; z-index: 3; top: 1.25rem; left: 50%; width: 5.25rem; height: 1.5rem; border-radius: var(--radius-full); background: #050807; transform: translateX(-50%); }
  .mk-phone__screen { position: relative; overflow: hidden; border-radius: 2.2rem; padding: 3.25rem var(--space-4) var(--space-5);
    background: var(--surface-base); background-image: var(--surface-ambient); color: var(--text-1); }
  .mk-phone__caption { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
  .mk-reveal { display: flex; flex-direction: column; gap: var(--space-3); }
  .mk-reveal .c-eyebrow { font-size: 0.625rem; }
  .mk-reveal__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; margin-top: calc(var(--space-1) * -1); }
  .mk-reveal__name em { font-style: italic; color: var(--love-strong); }
  .mk-reveal__cover { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-3); }
  .mk-reveal__cover svg { position: absolute; inset: -12%; width: 124%; height: 124%; }
  .mk-reveal__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 17, 14, 0.8), transparent 55%); }
  .mk-reveal__example { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); }
  .mk-reveal__meta { position: absolute; z-index: 1; left: var(--space-3); right: var(--space-3); bottom: var(--space-2); font: var(--fw-semibold) var(--fs-xs)/1.3 var(--font-text); color: #FFF3DD; }
  .mk-reveal__meters { gap: var(--space-2); }
  .mk-reveal__meters .c-dim-meter__label, .mk-reveal__meters .c-dim-meter__value { font-size: var(--fs-xs); }
  .mk-reveal__hello { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--text-2); }
  .mk-reveal__actions { display: flex; gap: var(--space-2); }
  .mk-reveal__actions .c-btn { flex: 1 1 0; min-width: 0; --btn-px: 0.5rem; --btn-fs: 0.8125rem; pointer-events: none; }
  .mk-mj-stage .c-disclaimer { justify-content: center; }

  /* ================================================================ 5 · compliment before message */
  .mk-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
  .mk-kind { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0.375rem 0.875rem; border-radius: var(--radius-full);
    background: var(--love-soft); color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); max-width: none; }
  .mk-kind .c-icon { width: 1rem; height: 1rem; color: var(--love-strong); }
  .mk-inline-icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.2em; margin-right: var(--space-1-5); color: var(--love-strong); }
  .mk-compliment-stage { position: relative; display: grid; place-items: center; padding: var(--space-8) var(--space-2); isolation: isolate; }
  .mk-compliment-stage::before {
    content: ""; position: absolute; z-index: -1; width: min(24rem, 86%); height: 62%; border-radius: var(--radius-lg);
    background: rgba(255, 243, 221, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.12); transform: rotate(-5deg) translate(-6%, -8%);
  }
  .mk-compliment {
    position: relative; width: min(100%, 27rem); padding: var(--space-6); border-radius: var(--radius-lg);
    background: #FFF3DD; color: #1A221E; display: flex; flex-direction: column; gap: var(--space-4);
    box-shadow: var(--shadow-3), 0 0 40px 4px rgba(214, 63, 91, 0.25); transform: rotate(1.5deg);
  }
  .mk-compliment__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .mk-compliment__tag { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 1.75rem; padding: 0 0.75rem; border-radius: var(--radius-full);
    background: #FDE8EC; color: #BE3150; font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); }
  .mk-compliment__tag .c-icon { width: 0.95rem; height: 0.95rem; }
  .mk-compliment .mk-example { background: rgba(26, 34, 30, 0.06); color: #46514B; box-shadow: inset 0 0 0 1px rgba(26, 34, 30, 0.14); }
  .mk-compliment__text { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-xl); line-height: 1.3; color: #1A221E; text-indent: -0.4em; max-width: none; }
  .mk-compliment__from { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: rgba(26, 34, 30, 0.72); }
  .mk-compliment__from strong { color: #1A221E; }
  .mk-compliment__actions { display: flex; gap: var(--space-2); }
  .mk-compliment__actions .c-btn { pointer-events: none; }
  .mk-compliment__actions .c-btn--ghost { color: #1A221E; box-shadow: inset 0 0 0 1.5px rgba(26, 34, 30, 0.4); }

  /* ================================================================ 6 · smokin' hot match / smokin' buddy */
  .mk-modes { display: grid; gap: var(--space-4); margin: 0; padding: 0; }
  @media (min-width: 48rem) { .mk-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-mode { --m: var(--dim-love); --m-bg: var(--dim-love-bg);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); text-align: center; max-width: none;
    border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--m-bg), transparent 70%), var(--surface-1);
    box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--m) 25%, var(--border-1)); }
  .mk-mode--buddy { --m: var(--dim-green); --m-bg: var(--dim-green-bg); }
  .mk-mode--both { --m: var(--dim-lifestyle); --m-bg: var(--dim-lifestyle-bg); }
  .mk-mode__emoji { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--m-bg); font-size: 2.25rem;
    box-shadow: 0 10px 30px -12px var(--m); }
  .mk-mode__name { font-size: var(--fs-2xl); }
  .mk-mode__desc { color: var(--text-2); }
  .mk-goals { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-10); text-align: center; }
  .mk-goals__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; max-width: 46rem; }
  .mk-goals__list li { max-width: none; }

  /* ================================================================ 7 · twin alerts */
  .mk-twin-kinds { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; }
  .mk-twin-kinds li { display: flex; align-items: center; gap: var(--space-4); max-width: none; }
  .mk-twin-kinds li > span:last-child { display: flex; flex-direction: column; }
  .mk-twin-kinds__emoji { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface-2); font-size: 1.5rem; box-shadow: inset 0 0 0 1px var(--border-1); }
  .mk-twin-stage { display: grid; place-items: center; }
  .mk-twin { width: min(100%, 26rem); gap: var(--space-4); padding: var(--space-6); box-shadow: var(--shadow-3), var(--glow-emerald); }
  .mk-twin__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .mk-twin__badge { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2rem; padding: 0 0.875rem; border-radius: var(--radius-full);
    background: var(--brand-soft); color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1 var(--font-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-strong) 40%, transparent); }
  .mk-twin__people { display: flex; align-items: center; gap: var(--space-4); }
  .mk-twin__title { font-size: var(--fs-xl); }
  .mk-twin__rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; }
  .mk-twin__row { display: flex; align-items: center; gap: var(--space-3); color: var(--text-1); max-width: none; }
  .mk-twin__check { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); }
  .mk-twin__check .c-icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.5; }
  [data-js] [data-reveal] .mk-twin__row { opacity: 0.25; }
  [data-js] [data-reveal] .mk-twin__check { background: var(--surface-3); color: var(--text-3); }
  [data-js] [data-reveal].is-in .mk-twin__row { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 180ms); }
  [data-js] [data-reveal].is-in .mk-twin__check { background: var(--accent); color: var(--text-on-accent); transition: background-color var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 180ms + 120ms), color var(--dur-slow) calc(var(--i, 0) * 180ms + 120ms); }
  .mk-twin__actions .c-btn { pointer-events: none; }

  /* ================================================================ 8 · the family */
  .mk-family { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: 0; padding: 0; }
  .mk-family > * { flex: 1 1 100%; }
  @media (min-width: 40rem) { .mk-family > * { flex: 0 0 calc((100% - var(--space-4)) / 2); } }
  @media (min-width: 64rem) { .mk-family > * { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); } }
  .mk-brand { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); max-width: none;
    background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1); }
  .mk-brand__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--dim-bg); color: var(--dim); margin-bottom: var(--space-2); }
  .mk-brand__icon .c-icon { width: 1.375rem; height: 1.375rem; }
  .mk-brand__name { font-size: var(--fs-xl); }
  .mk-brand__role { color: var(--text-2); }
  .mk-brand__link { margin-top: auto; padding-top: var(--space-2); }
  .mk-family__more { margin-top: var(--space-8); }

  /* ================================================================ 9 · events are coming (lounge) */
  .mk-events .c-section-header__title em { color: var(--lounge-gold); }
  .mk-event-types { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
  .mk-event-type { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0.375rem 0.875rem; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--text-1); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); max-width: none; }
  .mk-event-type .c-icon { width: 1rem; height: 1rem; color: var(--lounge-gold); }
  .mk-events__card { gap: var(--space-3); padding: var(--space-6); box-shadow: var(--shadow-3), var(--glow-candle); }
  .mk-events__title { font-size: var(--fs-2xl); }
  .mk-soon { display: inline-grid; place-items: center; gap: 0.1rem; width: 3.5rem; height: 4rem; border-radius: var(--radius-md); background: var(--surface-3); color: var(--accent);
    font: var(--fw-bold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .mk-soon .c-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .mk-waitlist { display: flex; flex-direction: column; gap: var(--space-2); }
  .mk-waitlist-fallback { margin-top: var(--space-2); }
  .mk-waitlist__done { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--surface-2); color: var(--text-1); font-weight: var(--fw-semibold); }
  .mk-waitlist__row { display: grid; gap: var(--space-3); }
  @media (min-width: 40rem) { .mk-waitlist__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .mk-waitlist__submit { grid-column: 1 / -1; } }

  /* ================================================================ plans (home teaser + /pricing) */
  .mk-ribbon { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: fit-content; max-width: 100%; margin: 0 auto var(--space-10);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--surface-brand-gradient); color: #FFF3DD;
    font: var(--fw-semibold) var(--fs-sm)/1.4 var(--font-text); text-align: center; box-shadow: var(--shadow-2); }
  .mk-ribbon .c-dot { flex: none; }
  @media (max-width: 39.99rem) { .mk-ribbon { border-radius: var(--radius-lg); } }
  .mk-plans { display: grid; gap: var(--space-5); align-items: stretch; }
  .mk-plans--teaser { max-width: 52rem; margin-inline: auto; }
  @media (min-width: 48rem) { .mk-plans--teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mk-plans__more { margin-top: var(--space-8); }
  .mk-plan {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6);
    border-radius: var(--radius-xl); background: var(--surface-1); color: var(--text-1);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1);
  }
  .mk-plan--love42 { box-shadow: var(--shadow-2), inset 0 0 0 1.5px rgba(238, 90, 116, 0.35); }
  .mk-plan--love71 { background: var(--surface-brand-gradient); box-shadow: var(--glow-emerald), var(--shadow-3), inset 0 0 0 1.5px rgba(63, 198, 132, 0.45); }
  .mk-plan--free { background: transparent; box-shadow: inset 0 0 0 1px var(--border-1); }
  .mk-plan__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.875rem;
    border-radius: var(--radius-full); background: var(--lime-400); color: #14201A; font: var(--fw-bold) var(--fs-xs)/1 var(--font-text); white-space: nowrap; box-shadow: var(--glow-lime); }
  .mk-plan__emblem { display: block; width: 4rem; height: 4rem; margin-bottom: var(--space-2); }
  .mk-plan__emblem--heart svg { width: 100%; height: 100%; overflow: visible; }
  .mk-plan__emblem--heart path { fill: none; stroke: var(--love-strong); stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(238, 90, 116, 0.45)); }
  .mk-plan__emblem--mark { width: 4.5rem; height: auto; }
  .mk-plan__name { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2xl); line-height: 1.1; }
  .mk-plan--free .mk-plan__name { font-style: normal; }
  .mk-plan__price { display: flex; align-items: baseline; gap: var(--space-2); }
  .mk-plan__amount { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem); }
  .mk-plan__per { font: var(--fw-medium) var(--fs-md)/1 var(--font-text); color: var(--text-2); }
  .mk-plan__pitch { color: var(--text-2); }
  .mk-plan__lines { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); padding: 0; }
  .mk-plan__lines li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-1); max-width: none; }
  .mk-plan__lines .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--love-strong); }
  .mk-plan--love71 .mk-plan__lines .c-icon { color: var(--emerald-400); }
  .mk-plan--free .mk-plan__lines .c-icon { color: var(--text-3); }
  .mk-plan__cta { margin-top: auto; }
  .mk-plan--compact .mk-plan__lines { margin-bottom: var(--space-2); }

  /* ================================================================ 11 · stories */
  .mk-stories-empty { max-width: 34rem; margin-inline: auto; }
  .mk-stories-empty .c-empty { background: linear-gradient(180deg, var(--love-soft), transparent 70%), var(--surface-1); padding: var(--space-10) var(--space-8); }
  .mk-stories { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
  .mk-story { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1); }
  .mk-story__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-3); }
  .mk-story__media img { width: 100%; height: 100%; object-fit: cover; }
  .mk-story__orbs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .mk-story__orb { width: 6rem; height: 6rem; }
  .mk-story__orb svg { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-3); }
  .mk-story__heart { width: 3.25rem; margin-inline: -0.75rem; z-index: 1; }
  .mk-story__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
  .mk-story__names { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2xl); }
  .mk-story__names a { color: inherit; text-decoration: none; }
  .mk-story__city { display: inline-flex; align-items: center; gap: var(--space-1-5); font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-text); color: var(--text-2); }
  .mk-story__city .c-icon { width: 1rem; height: 1rem; }
  .mk-story__quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--text-1); }
  .mk-story__permission { font: var(--fw-medium) var(--fs-xs)/1.3 var(--font-text); color: var(--text-3); }
  .mk-timeline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; }
  .mk-timeline__step { display: inline-flex; align-items: center; gap: var(--space-1-5); font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); color: var(--text-3); max-width: none; }
  .mk-timeline__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .mk-timeline__step.is-reached { color: var(--text-1); }
  .mk-timeline__step.is-reached .mk-timeline__dot { background: var(--brand-strong); box-shadow: none; }
  .mk-timeline__step + .mk-timeline__step::before { content: ""; width: 1rem; height: 2px; background: var(--border-2); margin-right: var(--space-1); }

  /* ================================================================ 12 · closing */
  .mk-closing { text-align: center; }
  .mk-closing .l-container { align-items: center; }
  .mk-closing__heart { width: 6rem; margin-inline: auto; }
  .mk-closing .mk-h2 { max-width: 20ch; margin-inline: auto; }
  .mk-actions--center { justify-content: center; }
}

/* modules/marketing-pages.css */
/* My420Love · modules/marketing-pages.css — legal pages, FAQ, safety, contact/business, stories, simple landings.
   @layer modules. Semantic tokens only. */
@layer modules {

  /* ================================================================ legal pages (D-55) */
  .mk-legal__head { position: relative; padding-block: var(--space-10) var(--space-8); background-image: var(--surface-ambient); background-repeat: no-repeat; }
  .mk-legal__head .l-container { display: flex; flex-direction: column; gap: var(--space-3); }
  .mk-legal__title { font-size: var(--fs-4xl); line-height: 1.04; }
  .mk-legal__updated { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-3); }
  .mk-legal__updated .c-icon { width: 1rem; height: 1rem; }
  .mk-draft {
    display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2);
    padding: 0.5rem 0.875rem; border-radius: var(--radius-full); margin-bottom: var(--space-2);
    background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
    font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); max-width: none;
  }
  .mk-draft .c-icon { width: 1rem; height: 1rem; flex: none; }
  .mk-legal__layout { display: grid; gap: var(--space-8); padding-bottom: var(--space-20); }
  @media (min-width: 64rem) {
    .mk-legal__layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-12); align-items: start; }
    .mk-legal__layout--single { grid-template-columns: minmax(0, 1fr); }
  }
  .mk-legal__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
  .mk-toc { position: relative; }
  @media (min-width: 64rem) { .mk-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100dvh - var(--header-h) - var(--space-8)); overflow: auto; } }
  .mk-toc__box { border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); padding: var(--space-4) var(--space-5); }
  .mk-toc__title { font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); list-style: none; min-height: 2rem; display: flex; align-items: center; }
  .mk-toc__title::-webkit-details-marker { display: none; }
  .mk-toc__list { display: flex; flex-direction: column; gap: 0.125rem; margin: var(--space-2) 0 0; padding: 0; counter-reset: toc; }
  .mk-toc__list a { display: block; padding: 0.375rem 0; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
  @media (hover: hover) { .mk-toc__list a:hover { color: var(--text-1); } }

  .mk-prose { font-size: var(--fs-md); }
  .mk-prose h2, .mk-prose h3, .mk-prose h4 { scroll-margin-top: calc(var(--header-h) + var(--space-4)); text-wrap: balance; }
  .mk-prose h2 { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
  .mk-prose h4 { font-size: var(--fs-lg); margin-top: var(--space-6); color: var(--text-1); }
  .mk-prose a { color: var(--text-link); }
  .mk-prose ul li::marker { color: var(--brand-strong); }
  .mk-prose ol li::marker { color: var(--brand-strong); font-weight: var(--fw-semibold); }
  .mk-prose blockquote { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: inset 3px 0 0 var(--brand-strong), inset 0 0 0 1px var(--border-1); }
  .mk-prose blockquote > * + * { margin-top: var(--space-3); }
  .mk-prose blockquote.mk-legal__plain {
    margin-top: 0; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--surface-1);
    box-shadow: var(--shadow-2), inset 4px 0 0 var(--brand-strong), inset 0 0 0 1px var(--border-1);
  }
  .mk-prose blockquote.mk-legal__plain > p:first-child strong:only-child { display: inline-flex; font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text);
    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand-strong); }
  .mk-prose blockquote.mk-legal__plain p { color: var(--text-1); }
  .mk-placeholder { padding: 0.05em 0.35em; border-radius: var(--radius-xs); background: var(--warn-bg); color: var(--warn);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); font-weight: var(--fw-semibold); }
  .mk-prose hr { margin-block: var(--space-8); }
  .mk-legal__table { width: 100%; overflow-x: auto; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-1); }
  .mk-legal__table table { width: 100%; min-width: 32rem; font-size: var(--fs-sm); }
  .mk-legal__table th, .mk-legal__table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); color: var(--text-2); }
  .mk-legal__table th { font-weight: var(--fw-semibold); color: var(--text-1); background: var(--surface-2); }
  .mk-legal__table code { color: var(--text-1); }
  .mk-cookie-table { gap: var(--space-3); }
  .mk-cookie-table__title { font-size: var(--fs-xl); }

  /* ================================================================ shared page head */
  .mk-band--flush-top { padding-top: 0; }
  .mk-page-head { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem); overflow: clip; }
  .mk-page-head::before {
    content: ""; position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 15% 10%, rgba(31, 158, 98, 0.16), transparent 70%), radial-gradient(35% 45% at 90% 30%, rgba(214, 63, 91, 0.12), transparent 72%);
  }
  :root[data-theme="light"] .mk-page-head::before { opacity: 0.6; }
  .mk-page-head .mk-grid-2 { align-items: center; }
  .mk-page-head--center .mk-stack { align-items: center; }
  .mk-page-title { font-size: var(--fs-4xl); line-height: 1.04; letter-spacing: var(--tracking-display); font-variation-settings: var(--fvs-display); text-wrap: balance; }
  .mk-page-title--xl { font-size: var(--fs-5xl); line-height: 1.0; }
  .mk-page-head__heart { width: 5rem; margin: 0 auto var(--space-2); }

  /* ================================================================ forms (contact, business, stories) */
  .mk-form-layout { display: grid; gap: var(--space-6); align-items: start; }
  @media (min-width: 56rem) { .mk-form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
  .mk-form { gap: var(--space-5); }
  .mk-form__title { font-size: var(--fs-2xl); }
  .mk-form__grid { display: grid; gap: var(--space-5); }
  @media (min-width: 36rem) { .mk-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mk-form .c-btn[type="submit"] { align-self: flex-start; }
  .mk-safety-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--danger-bg); color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); max-width: none; }
  .mk-safety-note .c-icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--danger); }
  .mk-aside { display: flex; flex-direction: column; gap: var(--space-4); }
  .mk-aside__card { gap: var(--space-2); }
  .mk-aside__big { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); line-height: 1.25; }

  /* ================================================================ feature cards (how it works "not", business, Mary Jane) */
  .mk-feature-cards { display: grid; gap: var(--space-4); margin: 0; padding: 0; }
  @media (min-width: 48rem) { .mk-feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-feature-card { gap: var(--space-2); padding: var(--space-6); max-width: none; }
  .mk-feature-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-strong); margin-bottom: var(--space-2); }
  .mk-feature-card__icon .c-icon { width: 1.375rem; height: 1.375rem; }
  .mk-feature-card__icon--no { background: var(--love-soft); color: var(--love-strong); }
  .mk-feature-card__title { font-size: var(--fs-xl); }

  /* ================================================================ how it works: the six steps */
  .mk-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; counter-reset: step; }
  @media (min-width: 40rem) { .mk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
  .mk-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; max-width: none;
    background: linear-gradient(160deg, var(--dim-bg), transparent 60%), var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--dim) 20%, var(--border-1)); }
  .mk-step__n { position: absolute; top: -0.35rem; right: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 5.5rem; line-height: 1; color: var(--dim); opacity: 0.22; font-variant-numeric: var(--numerals); }
  .mk-step__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--dim-bg); color: var(--dim); margin-bottom: var(--space-2); }
  .mk-step__icon .c-icon { width: 1.5rem; height: 1.5rem; }
  .mk-step__title { font-size: var(--fs-xl); }
  .mk-step__body { color: var(--text-2); }

  /* ================================================================ about */
  .mk-about-art { width: min(22rem, 70%); margin-inline: auto; }
  .mk-editorial { display: flex; flex-direction: column; gap: var(--space-10); }
  .mk-editorial__item { display: grid; gap: var(--space-2) var(--space-6); }
  @media (min-width: 48rem) { .mk-editorial__item { grid-template-columns: 4.5rem minmax(0, 1fr); } .mk-editorial__item > :not(.mk-editorial__n) { grid-column: 2; } .mk-editorial__n { grid-row: span 2; } }
  .mk-editorial__n { font-family: var(--font-display); font-style: italic; font-size: var(--fs-3xl); line-height: 1; color: var(--love-strong); }
  .mk-editorial__title { font-size: var(--fs-2xl); }
  .mk-editorial__body { font-size: var(--fs-lg); color: var(--text-2); }

  /* ================================================================ FAQ */
  .mk-faq-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
  .mk-faq-nav__chip { text-decoration: none; min-height: 2.25rem; }
  @media (hover: hover) { .mk-faq-nav__chip:hover { color: var(--text-1); background: color-mix(in srgb, var(--surface-3) 70%, var(--text-1) 8%); } }
  .mk-faq { display: flex; flex-direction: column; gap: var(--space-12); }
  .mk-faq__group { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
  .mk-faq__title { font-size: var(--fs-2xl); }
  .mk-faq__items { display: flex; flex-direction: column; gap: var(--space-2); }
  .mk-faq__item { border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
  .mk-faq__item[open] { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-2); }
  .mk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.5rem; padding: var(--space-3) var(--space-5);
    list-style: none; font-weight: var(--fw-semibold); color: var(--text-1); border-radius: var(--radius-lg); }
  .mk-faq__q::-webkit-details-marker { display: none; }
  .mk-faq__chev { width: 1.25rem; height: 1.25rem; flex: none; color: var(--text-3); transition: transform var(--dur-base) var(--ease-out); }
  details[open] > summary .mk-faq__chev { transform: rotate(180deg); }
  .mk-faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--text-2); }
  .mk-faq__a p { max-width: 64ch; }
  .mk-faq__a strong { color: var(--text-1); }

  /* ================================================================ safety */
  .mk-safety-head .mk-stack { gap: var(--space-5); }
  .mk-emergency { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
    background: var(--danger-bg); color: var(--text-1); font-weight: var(--fw-semibold); font-size: var(--fs-lg); max-width: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
  .mk-emergency__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--danger-fill); color: #FFFFFF; }
  .mk-emergency__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .mk-quick { display: grid; gap: var(--space-2); }
  @media (min-width: 36rem) { .mk-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 56rem) { .mk-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-quick__link { display: flex; align-items: center; gap: var(--space-3); min-height: 3.25rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--text-1); text-decoration: none; font-weight: var(--fw-semibold); }
  @media (hover: hover) { .mk-quick__link:hover { box-shadow: inset 0 0 0 1px var(--border-2), var(--shadow-1); } }
  .mk-quick__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
  .mk-quick__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .mk-quick__chev { width: 1rem; height: 1rem; margin-left: auto; color: var(--text-3); }
  .mk-safety-doc { padding-top: var(--space-4); }
  .mk-tip-grid { display: grid; gap: var(--space-4); }
  @media (min-width: 48rem) { .mk-tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mk-tip { gap: var(--space-3); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
  .mk-tip__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-strong); }
  .mk-tip__title { font-size: var(--fs-xl); }
  .mk-tip__list { display: flex; flex-direction: column; gap: var(--space-2); padding-inline-start: 1.1rem; color: var(--text-2); }
  .mk-hotlines, .mk-policy { margin-top: var(--space-5); gap: var(--space-3); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
  .mk-hotlines__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
  .mk-hotlines__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); max-width: none; }
  .mk-hotlines__number { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); font-variant-numeric: var(--numerals); }

  /* ================================================================ pricing page */
  .mk-pricing-head { padding-bottom: var(--space-8); }
  .mk-founding { display: flex; gap: var(--space-4); align-items: flex-start; max-width: 52rem; margin: 0 auto var(--space-12); padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl); background: var(--surface-brand-gradient); color: #FFF3DD; box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(63, 198, 132, 0.3); }
  .mk-founding__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(183, 228, 60, 0.16); color: var(--lime-400); }
  .mk-founding__title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; color: #FFF3DD; max-width: none; }
  .mk-founding__body { font-size: var(--fs-sm); color: rgba(255, 243, 221, 0.82); max-width: none; }
  .mk-plans--page { max-width: 68rem; margin-inline: auto; }
  @media (min-width: 64rem) {
    .mk-plans--page { grid-template-columns: 15rem repeat(2, minmax(0, 1fr)); align-items: end; }
    .mk-plans--page .mk-plan--love71 { transform: scale(1.04); transform-origin: bottom center; z-index: 1; }
  }
  @media (max-width: 63.99rem) {
    .mk-plans--page { max-width: 30rem; }
    .mk-plans--page .mk-plan--love71 { order: 1; margin-top: var(--space-4); }
    .mk-plans--page .mk-plan--love42 { order: 2; }
    .mk-plans--page .mk-plan--free { order: 3; }
  }
  .mk-wink { margin: var(--space-10) auto var(--space-2); text-align: center; font: var(--fw-medium) var(--fs-sm)/1.5 var(--font-text); color: var(--text-2); max-width: none; }
  .mk-inline-icon--brand { color: var(--brand-strong); }
  .mk-compare { max-width: 68rem; margin: var(--space-10) auto 0; border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1); }
  .mk-compare__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.75rem; padding: var(--space-3) var(--space-6);
    list-style: none; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); border-radius: var(--radius-xl); }
  .mk-compare__summary::-webkit-details-marker { display: none; }
  .mk-compare__wrap { overflow-x: auto; padding: 0 var(--space-2) var(--space-2); }
  .mk-compare__table { width: 100%; min-width: 36rem; font-size: var(--fs-sm); font-variant-numeric: var(--numerals); }
  .mk-compare__table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-1); font-weight: var(--fw-semibold); text-align: center; padding: var(--space-3); vertical-align: bottom; }
  .mk-compare__table thead th:first-child { text-align: left; border-radius: var(--radius-md) 0 0 0; }
  .mk-compare__table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }
  .mk-compare__price { display: block; font-weight: var(--fw-medium); color: var(--text-3); font-size: var(--fs-xs); margin-top: 0.125rem; }
  .mk-compare__table tbody th { text-align: left; font-weight: var(--fw-medium); color: var(--text-1); padding: var(--space-3); }
  .mk-compare__table td { text-align: center; color: var(--text-2); padding: var(--space-3); }
  .mk-compare__table tbody tr + tr > * { border-top: 1px solid var(--border-subtle); }
  .mk-compare__table td:last-child { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
  .mk-yes { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
  .mk-yes .c-icon { width: 0.95rem; height: 0.95rem; stroke-width: 2.5; }
  .mk-no { color: var(--text-3); }
  .mk-compare > .mk-note { padding: 0 var(--space-6) var(--space-5); }
  .mk-never { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-1); max-width: 46rem; margin: var(--space-8) auto 0; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }

  /* ================================================================ Mary Jane landing */
  .mk-mj-head .mk-pill .c-icon { width: 1.25rem; height: 1.25rem; }
  .mk-clock { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-10); font-family: var(--font-display); color: var(--text-1); }
  .mk-clock__time { font-size: clamp(4.5rem, 3rem + 7vw, 8.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: var(--numerals);
    background: linear-gradient(120deg, var(--dim-love), var(--dim-lifestyle) 55%, var(--dim-green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mk-clock__pm { font-size: var(--fs-2xl); font-style: italic; color: var(--text-2); }

  /* ================================================================ lounge landing */
  .mk-candle { position: relative; width: min(24rem, 80%); margin-inline: auto; isolation: isolate; }
  .mk-candle__glow { position: absolute; inset: -20%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 174, 82, 0.28), rgba(230, 174, 82, 0.06) 60%, transparent); filter: blur(8px); }
  .mk-lounge-grid { align-items: start; }

  /* ================================================================ family page */
  .mk-brand--home { background: var(--surface-brand-gradient); color: #FFF3DD; }
  .mk-brand--home .mk-brand__name { color: #FFF3DD; }
  .mk-brand--home .mk-brand__role { color: rgba(255, 243, 221, 0.82); }
  .mk-family__closing { margin-top: var(--space-10); font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--text-2); max-width: none; }

  /* ================================================================ Match Report landing */
  .mk-spread { display: grid; place-items: center; }
  .mk-spread__cover { position: relative; width: min(100%, 25rem); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl);
    background: var(--surface-brand-gradient); color: #FFF3DD; box-shadow: var(--shadow-4), var(--glow-emerald); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
  .mk-spread__example { position: absolute; top: var(--space-4); right: var(--space-4); }
  .mk-spread__print { width: 9rem; --lp-bg: #0F3526; }
  .mk-spread__print svg { width: 100%; height: auto; }
  .mk-spread__you { font-size: var(--fs-md); color: rgba(255, 243, 221, 0.8); }
  .mk-spread__name { font-family: var(--font-display); font-style: italic; font-size: var(--fs-3xl); line-height: 1; color: #FFF3DD; }
  .mk-spread__styles { display: grid; gap: var(--space-2); width: 100%; margin: var(--space-4) 0 0; padding: 0; text-align: left; }
  .mk-spread__styles li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 var(--space-3); align-items: center; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); background: rgba(255, 243, 221, 0.06); max-width: none; }
  .mk-spread__icon { grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .mk-spread__icon .c-icon { width: 1rem; height: 1rem; }
  .mk-spread__label { font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255, 243, 221, 0.7); }
  .mk-spread__value { font-family: var(--font-display); font-size: var(--fs-md); color: #FFF3DD; }
  .mk-parts { display: grid; gap: var(--space-4); margin: 0; padding: 0; }
  @media (min-width: 48rem) { .mk-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-part { position: relative; overflow: hidden; gap: var(--space-2); padding: var(--space-6); max-width: none; }
  .mk-part__n { position: absolute; top: -0.4rem; right: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 5rem; line-height: 1; color: var(--dim); opacity: 0.2; }
  .mk-part__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--dim-bg); color: var(--dim); }
  .mk-part__title { font-size: var(--fs-xl); }

  /* ================================================================ business: the member-special pass */
  .mk-ticket-stage { display: grid; place-items: center; padding: var(--space-6) 0; }
  .mk-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); width: min(100%, 27rem); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1); transform: rotate(-2deg); }
  .mk-ticket::before, .mk-ticket::after { content: ""; position: absolute; left: 68%; width: 1rem; height: 1rem; margin-left: -0.5rem; border-radius: 50%; background: var(--surface-base); }
  .mk-ticket::before { top: -0.5rem; }
  .mk-ticket::after { bottom: -0.5rem; }
  .mk-ticket__main { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-6) var(--space-5); border-right: 2px dashed var(--border-2); }
  .mk-ticket__eyebrow { font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
  :root[data-theme="light"] .mk-ticket__eyebrow { color: var(--emerald-700); }
  .mk-ticket__biz { font-weight: var(--fw-semibold); color: var(--text-1); }
  .mk-ticket__offer { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.15; color: var(--text-1); }
  .mk-ticket__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-3); }
  .mk-ticket__stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); }
  .mk-ticket__stub > .c-icon { width: 2.5rem; height: 2.5rem; color: var(--brand-strong); }
  .mk-ticket__stub .c-btn { pointer-events: none; }
  .mk-ticket__sponsored { position: absolute; top: var(--space-2); right: var(--space-3); font: var(--fw-medium) var(--fs-xs)/1 var(--font-text); color: var(--text-3); }
}

/* modules/marketing-result.css */
/* My420Love · modules/marketing-result.css — the Love Test result + shared result (SPEC-DESIGN §7.5). @layer modules. */
@layer modules {
  .mk-result { --acc: var(--dim-love); position: relative; isolation: isolate; }
  .mk-result[data-accent="green"] { --acc: var(--dim-green); }
  .mk-result[data-accent="chemistry"] { --acc: var(--dim-chemistry); }
  .mk-result[data-accent="communication"] { --acc: var(--dim-communication); }
  .mk-result[data-accent="fun"] { --acc: var(--dim-fun); }
  .mk-result[data-accent="lifestyle"] { --acc: var(--dim-lifestyle); }
  .mk-result[data-accent="romance"] { --acc: var(--dim-romance); }
  .mk-result__room {
    position: absolute; inset: 0 0 auto; height: 60rem; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 40% at 50% 6%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 72%),
                radial-gradient(40% 30% at 0% 30%, rgba(31, 158, 98, 0.10), transparent 70%);
  }
  .mk-result__stage {
    display: flex; flex-direction: column; gap: var(--space-8);
    width: 100%; max-width: calc(var(--container-sm) + 2 * var(--gutter)); margin-inline: auto;
    padding: var(--space-6) var(--gutter) var(--space-16);
  }
  @media (min-width: 48rem) { .mk-result__stage { padding-top: var(--space-10); } }
  .mk-result__block { display: flex; flex-direction: column; gap: var(--space-4); }
  .mk-result__h2 { font-size: var(--fs-2xl); }

  /* the persona card: the hero of the result (always a dark "night" card, whatever the theme) */
  .mk-persona {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 27.5rem; border-radius: var(--radius-xl);
    background: #1D2822; box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 243, 221, 0.12);
    display: flex; align-items: flex-end;
  }
  .mk-persona__art { position: absolute; top: -34%; right: -34%; width: 118%; z-index: -1; opacity: 0.92; }
  .mk-persona__art svg { width: 100%; height: auto; border-radius: 50%; filter: saturate(1.1); }
  .mk-persona::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(11, 17, 14, 0) 0%, rgba(11, 17, 14, 0.5) 42%, rgba(11, 17, 14, 0.94) 100%);
  }
  .mk-persona__body { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6); color: #FFF3DD; }
  @media (min-width: 48rem) { .mk-persona__body { padding: var(--space-12) var(--space-10) var(--space-8); } }
  .mk-persona .c-eyebrow { color: rgba(255, 243, 221, 0.8); }
  .mk-persona__emoji { font-size: 3.5rem; line-height: 1; filter: drop-shadow(0 6px 16px rgba(5, 9, 7, 0.45)); }
  .mk-persona__name { display: flex; flex-direction: column; gap: var(--space-1); color: #FFF3DD; font-size: var(--fs-5xl); line-height: 0.98; letter-spacing: var(--tracking-display); }
  .mk-persona__pre { font-family: var(--font-text); font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: 0; color: rgba(255, 243, 221, 0.86); }
  .mk-persona__name em { font-style: italic; color: #FFF3DD; font-variation-settings: "SOFT" 100, "opsz" 144; text-shadow: 0 2px 30px color-mix(in srgb, var(--acc) 60%, transparent); }
  .mk-persona__hook { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.3; color: #FFF3DD; max-width: 30ch; }
  .mk-persona__desc { font-size: var(--fs-md); color: rgba(255, 243, 221, 0.88); max-width: 52ch; }
  .mk-persona__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
  .mk-persona__foot .c-wordmark { width: 7rem; --logo-ink: #FFF3DD; --logo-num: #2A9A63; --logo-berry: #FF8C9D; --logo-emerald: #2FA36B; }

  /* three style lines */
  .mk-styles { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
  @media (min-width: 40rem) { .mk-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mk-style { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--dim-bg), transparent 80%), var(--surface-1); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-1); max-width: none; }
  @media (min-width: 40rem) { .mk-style { flex-direction: column; align-items: flex-start; } }
  .mk-style__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .mk-style__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .mk-style__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .mk-style__value { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; color: var(--text-1); font-variation-settings: var(--fvs-display-text); }

  .mk-click { gap: var(--space-2); }
  .mk-click__text { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.35; color: var(--text-1); max-width: none; }

  /* your strongest colors */
  .mk-bars { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; }
  .mk-bar { display: grid; grid-template-columns: 2rem 9rem minmax(0, 1fr); align-items: center; gap: var(--space-3); max-width: none; }
  .mk-bar__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .mk-bar__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .mk-bar__label { font-weight: var(--fw-semibold); color: var(--text-1); }
  .mk-bar__track { position: relative; height: 0.625rem; border-radius: var(--radius-full); background: var(--meter-track); overflow: hidden; }
  .mk-bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dim) 65%, transparent), var(--dim)); transform-origin: left center; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .mk-bar__fill { animation: m4l-meter-fill var(--dur-slower) var(--ease-out) both; animation-delay: calc(400ms + var(--i, 0) * 90ms); }
  }
  @media (max-width: 29.99rem) { .mk-bar { grid-template-columns: 2rem minmax(0, 1fr); } .mk-bar__track { grid-column: 1 / -1; } }

  .mk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .mk-teaser { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-1) 0 0; padding: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .mk-teaser li { display: inline-flex; align-items: center; gap: var(--space-1-5); max-width: none; }

  .mk-result__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-xl);
    background: var(--surface-brand-gradient); box-shadow: var(--glow-emerald), var(--shadow-3); color: #FFF3DD; }
  .mk-result__cta .mk-note { color: rgba(255, 243, 221, 0.8); }
  /* The join CTA carries the brand name: on a phone it wraps to two lines rather than ending in an ellipsis. */
  .mk-result__cta .c-btn { white-space: normal; padding-block: var(--space-3); }
  .mk-result__cta .c-btn__label { overflow: visible; text-overflow: clip; }
  .mk-result__cta-note { display: block; font-weight: var(--fw-semibold); color: #FFF3DD; text-align: center; max-width: none; }
  .mk-result__cta-note .c-dot { display: inline-block; vertical-align: 0.1em; margin-right: var(--space-2); }

  .mk-twin-teaser { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
    background: var(--dim-green-bg); color: var(--text-1); font-weight: var(--fw-semibold); max-width: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dim-green) 35%, transparent); }
  .mk-twin-teaser .c-emoji { font-size: 1.5rem; }
  .mk-near { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); }
  .mk-near__row { display: flex; gap: var(--space-2); align-items: center; }
  .mk-near__row .c-select { flex: 1; min-width: 0; }

  .mk-result__share { display: grid; gap: var(--space-5); }
  .mk-share { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
  .mk-email { gap: var(--space-3); }
  .mk-email__title { font-size: var(--fs-xl); }
  .mk-email__row { display: grid; gap: var(--space-3); align-items: start; }
  @media (min-width: 30rem) { .mk-email__row { grid-template-columns: minmax(0, 1fr) auto; } .mk-email__row > .c-btn { margin-top: 1.72rem; } }
  .mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .mk-comfy { flex-direction: row; align-items: flex-start; gap: var(--space-4); background: linear-gradient(135deg, var(--dim-green-bg), transparent 70%), var(--surface-1); }
  .mk-comfy__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--dim-green-bg); color: var(--dim-green); }
  .mk-comfy__title { font-size: var(--fs-xl); }
  .mk-result__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

  /* the shared page */
  .mk-shared { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
  .mk-shared .mk-persona { width: 100%; text-align: left; }
  .mk-shared__ask { font-size: var(--fs-3xl); }
}

/* modules/marketing.css */
/* My420Love · modules/marketing.css — the public website (BLUEPRINT M1; SPEC-DESIGN §6.9, §6.17, §7). @layer modules.
   Semantic tokens only (02-tokens.css). Rooms alternate by data-theme on each band (cream = data-theme="light").
   Motion is gated twice (OS + data-motion="reduce"): only opacity survives, distances multiply by --motion-ok. */
@layer modules {

  /* ================================================================ registered colour for the Love Test room bloom */
  @property --lt-bloom { syntax: '<color>'; inherits: true; initial-value: #EE5A74; }

  /* ================================================================ shared: bands, headings, small pieces */
  .mk-band { position: relative; padding-block: var(--section-y); isolation: isolate; overflow: clip; }
  .mk-band--tight { padding-block: calc(var(--section-y) * 0.62); }
  .mk-band--emerald { background: var(--surface-brand-gradient); }
  .mk-band--emerald::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 70% at 85% 10%, rgba(63, 198, 132, 0.16), transparent 70%),
                radial-gradient(50% 60% at 0% 100%, rgba(183, 228, 60, 0.06), transparent 70%);
  }
  .mk-band--berry::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 55% at 78% 45%, rgba(214, 63, 91, 0.16), transparent 72%),
                radial-gradient(40% 50% at 10% 90%, rgba(31, 158, 98, 0.08), transparent 70%);
  }
  .mk-band--ambient { background-image: var(--surface-ambient); background-repeat: no-repeat; }
  [data-theme="light"].mk-band--paper { background: var(--cream-200); }
  .mk-band__head { margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); }
  .mk-grid-2 { display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
  @media (min-width: 64rem) { .mk-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .mk-grid-2--flip > :first-child { order: 0; }
  @media (min-width: 64rem) { .mk-grid-2--flip > :first-child { order: 2; } }
  .mk-h1 { font-family: var(--font-display); font-weight: var(--fw-display-hero); font-size: var(--fs-5xl); line-height: 1.02;
    letter-spacing: var(--tracking-display); font-variation-settings: var(--fvs-display); text-wrap: balance; }
  .mk-h2 { font-size: var(--fs-3xl); line-height: 1.06; text-wrap: balance; }
  .mk-h2--lg { font-size: var(--fs-4xl); }
  .mk-lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); max-width: 36rem; }
  .mk-center { text-align: center; margin-inline: auto; }
  .mk-center .mk-lead { margin-inline: auto; }
  .mk-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .mk-stack > * { margin: 0; }
  .mk-stack--lg { gap: var(--space-6); }
  .mk-note { font-size: var(--fs-sm); color: var(--text-3); max-width: 42rem; }
  .mk-example {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    height: 1.5rem; padding: 0 0.625rem; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-base) 70%, transparent); color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--border-2);
    font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
  }
  .mk-pill {
    display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; max-width: 100%;
    min-height: 2.25rem; padding: 0.375rem 0.875rem 0.375rem 0.625rem; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text-1);
    box-shadow: inset 0 0 0 1px var(--border-2); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  }
  .mk-pill .c-dot { flex: none; }
  [data-theme="light"] .mk-pill { background: rgba(255, 255, 255, 0.72); }
  .mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
  .mk-link { display: inline-flex; align-items: center; gap: var(--space-1-5); font-weight: var(--fw-semibold); text-decoration: none; }
  .mk-link .c-icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-fast) var(--ease-out); }
  @media (hover: hover) { .mk-link:hover .c-icon { transform: translateX(calc(3px * var(--motion-ok))); } }

  /* ================================================================ the two-halves heart (marketing:heart-art) */
  .mk-heart { display: block; width: 100%; height: auto; overflow: visible; }
  .mk-heart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .mk-heart__love { stroke: var(--logo-berry); stroke-width: 22; }
  .mk-heart__green { stroke: var(--logo-emerald); stroke-width: 15.5; }
  .mk-heart__halo path { stroke-width: 34; opacity: 0.55; }
  .mk-heart__halo path:first-child { stroke: var(--logo-emerald); }
  .mk-heart__halo path:last-child { stroke: var(--logo-berry); }
  .mk-heart__halo { filter: blur(18px); }
  [data-theme="light"] .mk-heart__halo { opacity: 0.5; }

  /* ================================================================ Love Test (SPEC-DESIGN §6.9, §7.4) */
  .mk-lt {
    --lt-bloom: var(--dim-love);
    position: relative; isolation: isolate;
    min-height: calc(100dvh - var(--header-h));
    transition: --lt-bloom var(--dur-slower) var(--ease-standard);
  }
  .mk-lt[data-accent="love"] { --lt-bloom: var(--dim-love); }
  .mk-lt[data-accent="green"] { --lt-bloom: var(--dim-green); }
  .mk-lt[data-accent="chemistry"] { --lt-bloom: var(--dim-chemistry); }
  .mk-lt[data-accent="communication"] { --lt-bloom: var(--dim-communication); }
  .mk-lt[data-accent="fun"] { --lt-bloom: var(--dim-fun); }
  .mk-lt[data-accent="lifestyle"] { --lt-bloom: var(--dim-lifestyle); }
  .mk-lt[data-accent="romance"] { --lt-bloom: var(--dim-romance); }
  .mk-lt__room {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    background:
      radial-gradient(55% 42% at 50% 8%, color-mix(in srgb, var(--lt-bloom) 24%, transparent), transparent 72%),
      radial-gradient(45% 40% at 0% 100%, rgba(31, 158, 98, 0.10), transparent 70%),
      radial-gradient(40% 36% at 100% 88%, color-mix(in srgb, var(--lt-bloom) 10%, transparent), transparent 70%);
  }
  [data-theme="light"] .mk-lt__room, .mk-lt__room:where([data-theme="light"] *) { opacity: 0.7; }
  .mk-lt__stage {
    width: 100%; max-width: calc(var(--container-xs) + 2 * var(--gutter)); margin-inline: auto;
    padding: var(--space-4) var(--gutter) var(--space-16);
  }
  @media (min-width: 48rem) { .mk-lt__stage { padding-top: var(--space-8); } }
  .mk-lt__panel { display: flex; flex-direction: column; }
  .mk-lt__panel.is-entering { animation: mk-slide-in var(--dur-slow) var(--ease-out) both; }
  .mk-lt__panel.is-entering-back { animation: mk-slide-in-back var(--dur-slow) var(--ease-out) both; }
  .mk-lt__panel.is-leaving { animation: mk-slide-out 240ms var(--ease-in) both; pointer-events: none; }
  @keyframes mk-slide-in { from { opacity: 0; transform: translateX(calc(28px * var(--motion-ok))); } to { opacity: 1; transform: none; } }
  @keyframes mk-slide-in-back { from { opacity: 0; transform: translateX(calc(-28px * var(--motion-ok))); } to { opacity: 1; transform: none; } }
  @keyframes mk-slide-out { from { opacity: 1; } to { opacity: 0; transform: translateX(calc(-20px * var(--motion-ok))); } }

  /* intro */
  .mk-lt__intro { align-items: center; text-align: center; gap: var(--space-4); padding-top: var(--space-6); }
  .mk-lt__intro-art { width: 7.5rem; margin-bottom: var(--space-2); }
  @media (min-width: 48rem) { .mk-lt__intro-art { width: 8.5rem; } }
  .mk-lt__title { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: var(--tracking-display); font-variation-settings: var(--fvs-display); outline: none; }
  .mk-lt__lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 30ch; }
  .mk-lt__points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); padding: 0; }
  .mk-lt__points li { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.375rem 0.75rem; border-radius: var(--radius-full);
    background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); color: var(--text-2); max-width: none; }
  .mk-lt__points .c-icon { width: 1rem; height: 1rem; color: var(--brand-strong); }
  .mk-lt__start { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; max-width: 26rem; text-align: left; }
  .mk-lt__small { font-size: var(--fs-xs); color: var(--text-3); text-align: center; max-width: none; }
  .mk-lt__welcome { width: 100%; align-items: center; text-align: center; }
  .mk-lt__welcome-line { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); display: flex; align-items: center; gap: var(--space-2); justify-content: center; }
  .mk-lt__welcome .l-cluster { justify-content: center; }

  /* the 21+ box: one big, friendly target */
  .mk-age {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 3.25rem; padding: 0.625rem var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-1);
    box-shadow: inset 0 0 0 1px var(--border-1); cursor: pointer;
    font-weight: var(--fw-semibold); color: var(--text-1);
    transition: box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
  }
  .mk-age:has(:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .mk-age:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .mk-age.has-error, .mk-age.is-nudged { box-shadow: inset 0 0 0 1.5px var(--danger); }
  .mk-age.is-nudged { animation: mk-nudge 420ms var(--ease-standard); }
  @keyframes mk-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(calc(-6px * var(--motion-ok))); } 60% { transform: translateX(calc(5px * var(--motion-ok))); } }

  /* questions */
  .mk-lt__form { display: flex; flex-direction: column; gap: var(--space-2); }
  .mk-lt__top { display: flex; align-items: center; justify-content: space-between; margin: 0 calc(var(--space-2) * -1) var(--space-2); }
  .mk-lt .c-choice { gap: var(--space-5); }
  .mk-lt .c-choice__art { width: 7.5rem; height: 7.5rem; }
  @media (min-width: 48rem) { .mk-lt .c-choice__art { width: 9.5rem; height: 9.5rem; } }
  .mk-lt .c-choice__art > .c-emoji { font-size: 3.25rem; }
  .mk-lt .c-choice__art::after {
    content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lt-bloom) 34%, transparent), transparent);
  }
  .mk-lt .c-choice__prompt { outline: none; }
  .mk-lt .c-choice__options { padding-top: var(--space-2); }
  .mk-lt .c-choice__tile { min-height: 4rem; }
  .mk-lt .c-choice__tile.is-picked { border-color: var(--brand-strong); background: linear-gradient(0deg, var(--brand-soft), var(--brand-soft)), var(--surface-1); }
  .mk-lt .c-choice__actions { padding-top: var(--space-2); }
  [data-js] .mk-lt [data-lt-next] { opacity: 0.82; }
  [data-js] .mk-lt [data-lt-next][data-armed] { opacity: 1; }

  /* breather + reading */
  .mk-lt__breather, .mk-lt__reading { align-items: center; justify-content: center; text-align: center; gap: var(--space-8); min-height: min(34rem, 70dvh); }
  .mk-lt__breather-art, .mk-lt__reading-art { position: relative; width: 7.5rem; }
  .mk-lt__breath { font-family: var(--font-display); font-style: italic; font-size: var(--fs-3xl); line-height: 1.12; color: var(--text-1);
    font-variation-settings: "SOFT" 100, "opsz" 144; max-width: 18ch; outline: none; text-wrap: balance; }
  :root:not([data-motion="reduce"]) .mk-lt__breather-art .mk-heart { animation: m4l-mark-pulse 2.4s var(--ease-breathe) 1; }
  .mk-spark { position: absolute; width: 1.5rem; height: 1.5rem; color: var(--accent); opacity: 0; }
  .mk-spark .c-icon { width: 100%; height: 100%; fill: currentColor; }
  .mk-spark--1 { top: -8%; left: -18%; color: var(--accent); }
  .mk-spark--2 { top: 10%; right: -22%; color: var(--emerald-400); width: 1.125rem; height: 1.125rem; }
  .mk-spark--3 { bottom: 4%; left: -8%; color: var(--berry-400); width: 1rem; height: 1rem; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .mk-lt__reading:not([hidden]) .mk-spark { animation: m4l-spark 700ms var(--ease-out) infinite; }
    :root:not([data-motion="reduce"]) .mk-lt__reading:not([hidden]) .mk-spark--2 { animation-delay: 120ms; }
    :root:not([data-motion="reduce"]) .mk-lt__reading:not([hidden]) .mk-spark--3 { animation-delay: 240ms; }
    :root:not([data-motion="reduce"]) .mk-lt__reading:not([hidden]) .mk-heart { animation: m4l-mark-pulse 1.2s var(--ease-breathe) infinite; }
  }
  :root[data-motion="reduce"] .mk-spark, .mk-lt__reading .mk-spark { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"]) .mk-lt__reading .mk-spark { opacity: 0; } }
  [data-js] .mk-lt__reading form { display: none; }
  [data-js] .mk-lt__reading form.is-shown { display: block; animation: m4l-fade var(--dur-base) both; }
}

/* modules/messages.css */
/* My420Love · modules/messages.css — the inbox, the thread, the composer and the icebreaker picker (SPEC-DESIGN §6.7,
   §6.11, §7.6). Everything uses the Foundation tokens, so dark, light and auto follow the theme. Motion only under
   prefers-reduced-motion: no-preference and never when the member turned motion down (data-motion="reduce"). */
@layer modules {

  /* base.css caps list items at a reading measure; chat lists run full width */
  .msg-log > li, .msg-list > li, .msg-picker__list > li { max-width: none; }

  /* ================================================================ inbox */
  .msg-inbox { display: flex; flex-direction: column; gap: var(--space-4); }
  .msg-inbox .c-tabs { margin-bottom: var(--space-1); }
  .msg-search { position: relative; display: flex; align-items: center; }
  .msg-search__icon { position: absolute; left: var(--space-4); display: grid; color: var(--text-3); pointer-events: none; }
  .msg-search__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .msg-search__input {
    width: 100%; min-height: 2.75rem; padding: 0 var(--space-4) 0 calc(var(--space-4) + 1.75rem);
    border: 1px solid var(--border-1); border-radius: var(--radius-full);
    background: var(--surface-sunken); color: var(--text-1); font: inherit; font-size: var(--fs-md);
  }
  .msg-search__input::placeholder { color: var(--text-3); }
  .msg-inbox__none, .msg-inbox__lead { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

  .msg-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .msg-conv { position: relative; }
  .msg-conv + .msg-conv::before {
    content: ""; position: absolute; top: 0; left: calc(3.5rem + var(--space-4)); right: 0; height: 1px; background: var(--border-subtle);
  }
  .msg-conv__link {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
    min-height: 4.5rem; padding: var(--space-2) var(--space-2); margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius-md); color: inherit; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard);
  }
  @media (hover: hover) { .msg-conv__link:hover { background: var(--surface-1); } }
  .msg-conv__avatar { display: grid; }
  .msg-conv__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
  .msg-conv__top { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
  .msg-conv__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msg-conv__new {
    flex: none; padding: 0.0625rem var(--space-2); border-radius: var(--radius-full);
    background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  }
  .msg-conv__time { margin-inline-start: auto; flex: none; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .msg-conv__preview { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msg-conv.is-unread .msg-conv__preview { color: var(--text-1); font-weight: var(--fw-medium); }
  .msg-conv.is-unread .msg-conv__time { color: var(--brand-strong); font-weight: var(--fw-semibold); }
  .msg-conv__nudge { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--brand-strong); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .msg-conv__nudge .c-icon { width: 0.875rem; height: 0.875rem; }
  .msg-conv__badge { position: static; }
  .msg-conv.is-ended .msg-conv__link { opacity: 0.62; }
  .msg-conv[hidden] { display: none; }

  .msg-ended { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
  .msg-ended__title { margin: 0; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .msg-ended__note { margin: 0 0 var(--space-2); color: var(--text-3); font-size: var(--fs-xs); }

  .msg-requests { gap: var(--space-3); }
  .msg-request {
    display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
    border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-1, none), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-request.is-new { box-shadow: inset 0 0 0 1px var(--brand-soft), var(--shadow-1, none); }
  .msg-request__who { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
  .msg-request__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); flex: 1; }
  .msg-request__name { font-weight: var(--fw-semibold); }
  .msg-request__said { color: var(--text-2); font-size: var(--fs-sm); }
  .msg-request__note {
    margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0.375rem;
    background: var(--surface-2); color: var(--text-1); white-space: pre-line; overflow-wrap: anywhere;
  }
  .msg-request__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .msg-request__wait { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }

  /* ================================================================ thread: the page frame */
  /* The thread is a chat: the composer stays at the bottom and the tab bar steps aside on phones (back = the inbox). */
  @media (max-width: 63.999rem) {
    .msg-page-thread .c-bottom-nav { display: none; }
  }
  .msg-page-thread .l-app-main { padding-bottom: 0; display: flex; flex-direction: column; }
  .msg-thread { display: flex; flex-direction: column; flex: 1 0 auto; min-height: calc(100dvh - var(--topbar-h) - var(--space-8)); }

  /* header (replaces the app top bar) */
  .msg-head { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .msg-head__who {
    display: flex; align-items: center; gap: var(--space-3); min-width: 0; justify-self: start;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-full);
    color: inherit; text-decoration: none;
  }
  a.msg-head__who:hover { background: var(--surface-3); }
  .msg-head__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .msg-head__name { font-weight: var(--fw-semibold); font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msg-head__sub { color: var(--text-3); font-size: var(--fs-xs); }
  @media (min-width: 64rem) { .msg-head__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); } }

  .msg-more { position: relative; }
  .msg-more > summary { list-style: none; cursor: pointer; }
  .msg-more > summary::-webkit-details-marker { display: none; }
  .msg-more[open] > summary { background: var(--surface-3); }
  .msg-more__menu {
    position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-overlay);
    width: min(17rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-2); border-radius: var(--radius-lg);
    background: var(--surface-2); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-more__title { margin: var(--space-2) var(--space-3) var(--space-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .msg-more__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .msg-more__item, .msg-more__list .saf-menu-item {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.75rem; padding: 0 var(--space-3);
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1);
    font: inherit; font-size: var(--fs-md); text-align: start; text-decoration: none; cursor: pointer;
  }
  .msg-more__item .c-icon, .msg-more__list .saf-menu-item .c-icon { width: 1.25rem; height: 1.25rem; color: var(--text-2); }
  .msg-more__item:hover, .msg-more__list .saf-menu-item:hover { background: var(--surface-3); }
  .msg-more__item--danger, .msg-more__item--danger .c-icon { color: var(--danger); }
  .msg-more__list form { margin: 0; }

  /* ================================================================ the log */
  .msg-log {
    display: flex; flex-direction: column; flex: 1 0 auto; justify-content: flex-end;
    margin: 0; padding: var(--space-2) 0 var(--space-4); list-style: none;
  }
  .msg-earlier { display: flex; justify-content: center; padding: var(--space-2) 0 var(--space-4); }

  .msg-start { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-8); text-align: center; }
  .msg-start__pair { position: relative; display: flex; align-items: center; }
  .msg-start__pair > .c-avatar + .msg-start__heart + .c-avatar { margin-inline-start: -0.75rem; }
  .msg-start__pair > .c-avatar:first-child { margin-inline-end: -0.75rem; }
  .msg-start__heart {
    position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
    border-radius: var(--radius-full); background: var(--surface-base); color: var(--love); box-shadow: 0 0 0 3px var(--surface-base), var(--glow-berry, none);
  }
  .msg-start__heart .c-icon { width: 1.25rem; height: 1.25rem; }
  .msg-start__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); color: var(--text-1); }
  .msg-start__date { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
  .msg-start__score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
  .msg-start__why { color: var(--text-link); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .msg-start .c-disclaimer { width: fit-content; max-width: 22rem; margin: 0 auto; text-align: start; }

  .msg-day { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .msg-day::before, .msg-day::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

  /* rows and bubbles (§6.11) */
  .msg-row { display: flex; flex-direction: column; margin-top: 0.25rem; max-width: 100%; }
  .msg-row.is-group-start { margin-top: var(--space-4); }
  .msg-row--mine { align-items: flex-end; }
  .msg-row--theirs { align-items: flex-start; }
  .msg-bubble {
    position: relative; max-width: min(78%, 34rem); padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg); font-size: var(--fs-md); line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .msg-row--mine .msg-bubble { background: var(--brand); color: var(--text-on-brand); }
  .msg-row--theirs .msg-bubble { background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-subtle); }
  .msg-row--mine.is-group-end .msg-bubble { border-bottom-right-radius: 0.375rem; }
  .msg-row--theirs.is-group-end .msg-bubble { border-bottom-left-radius: 0.375rem; }
  .msg-bubble__text { margin: 0; white-space: pre-line; }
  .msg-bubble__tag { display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 0.125rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); opacity: 0.85; }
  .msg-bubble__tag .c-icon { width: 0.75rem; height: 0.75rem; }
  .msg-row.is-held .msg-bubble { opacity: 0.72; }
  .msg-row.is-removed .msg-bubble { opacity: 0.5; }
  .msg-row.is-removed .msg-bubble__text { text-decoration: line-through; text-decoration-thickness: 1px; }
  .msg-row.is-pending .msg-bubble { opacity: 0.68; }
  .msg-row.is-failed .msg-bubble { box-shadow: inset 0 0 0 1.5px var(--danger); }

  .msg-row__meta {
    display: none; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0.25rem 0.25rem 0;
    color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
  }
  .msg-row.is-group-end .msg-row__meta, .msg-row.is-held .msg-row__meta, .msg-row.is-removed .msg-row__meta,
  .msg-row.is-pending .msg-row__meta, .msg-row.is-failed .msg-row__meta { display: flex; }
  .msg-row__note { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-2); }
  .msg-row__note .c-icon { width: 0.875rem; height: 0.875rem; }
  .msg-row.is-failed .msg-row__note { color: var(--danger); }
  .msg-row__retry { padding: 0; border: 0; background: none; color: var(--text-link); font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; cursor: pointer; }
  .msg-row__safety { width: min(100%, 26rem); margin-top: var(--space-2); }
  .msg-row__tip {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); background: var(--info-bg); color: var(--text-2); font-size: var(--fs-xs);
  }
  .msg-row__tip .c-icon { width: 0.875rem; height: 0.875rem; flex: none; }

  /* system cards */
  .msg-row--card { align-items: center; margin-top: var(--space-4); }
  .msg-card--owner { width: min(100%, 26rem); }
  .msg-row--card .c-card, .msg-card--owner > * { transform-origin: center top; }
  .msg-note {
    width: min(100%, 22rem); padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: var(--radius-lg); background: var(--cream, #FFF3DD); color: #1A221E;
    box-shadow: var(--shadow-3), 0 0 40px rgba(214, 63, 91, 0.25);
  }
  .msg-note__tag {
    display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full); background: var(--berry-100, #FBE3E8); color: var(--berry-700, #9C2740);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  }
  .msg-note__tag .c-icon { width: 0.875rem; height: 0.875rem; }
  .msg-note__text { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-xl); line-height: 1.3; text-indent: -0.4em; }
  .msg-note__text p { margin: 0; overflow-wrap: anywhere; }
  .msg-note__from { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: rgba(26, 34, 30, 0.72); }
  .msg-note__from .c-icon { width: 1rem; height: 1rem; color: var(--berry-700, #9C2740); }

  .msg-hello {
    width: min(100%, 24rem); padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-hello__eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .msg-hello__eyebrow .c-icon { width: 1rem; height: 1rem; color: var(--brand-strong); }
  .msg-hello__text { margin: 0; font-size: var(--fs-md); white-space: pre-line; overflow-wrap: anywhere; }

  .msg-sys {
    display: flex; align-items: flex-start; gap: var(--space-3); width: min(100%, 24rem); padding: var(--space-4);
    border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-sys__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--dim-soft, var(--surface-3)); color: var(--dim, var(--brand-strong)); }
  .msg-sys__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .msg-sys__icon .c-emoji { font-size: 1.25rem; }
  .msg-sys__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
  .msg-sys__title { margin: 0; font-weight: var(--fw-semibold); }
  .msg-sys__text { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .msg-sys__cta { margin-top: var(--space-2); }

  .msg-closed {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) auto 0; padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full); background: var(--surface-1); color: var(--text-2); font-size: var(--fs-sm);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
  }
  .msg-closed .c-icon { width: 1rem; height: 1rem; }

  /* ================================================================ below the log */
  .msg-extras { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); }
  .msg-extras:empty { display: none; }
  .msg-tip:empty { display: none; }

  /* the picker (§6.7) */
  .msg-picker {
    display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4);
    border-radius: var(--radius-xl); background: var(--surface-1);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-picker[hidden] { display: none; }
  .msg-picker__head { display: flex; flex-direction: column; gap: var(--space-1); text-align: center; }
  .msg-picker__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); color: var(--text-1); }
  .msg-picker__sub { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .msg-picker__styles {
    display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1) var(--space-1) var(--space-2);
    margin-inline: calc(var(--space-1) * -1); scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .msg-picker__styles::-webkit-scrollbar { display: none; }
  .msg-tone {
    flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4);
    border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-1);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; scroll-snap-align: start;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .msg-tone .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); }
  .msg-tone[aria-current="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  @media (hover: hover) { .msg-tone:not([aria-current="true"]):hover { background: var(--surface-2); } }
  .msg-picker__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; min-height: 3rem; }
  .msg-picker__list.is-loading { opacity: 0.55; }
  .msg-picker__empty { color: var(--text-2); font-size: var(--fs-sm); text-align: center; padding: var(--space-3); }
  .msg-ib {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text use" "because use"; align-items: center;
    column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-1); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--border-subtle);
    transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  }
  .msg-ib:active { transform: scale(0.985); }
  @media (hover: hover) { .msg-ib:hover { box-shadow: inset 0 0 0 1px var(--brand-strong); } }
  .msg-ib.is-picked { box-shadow: inset 0 0 0 1.5px var(--brand-strong), var(--glow-emerald); }
  .msg-ib__text { grid-area: text; font-size: var(--fs-md); line-height: 1.4; }
  .msg-ib__because { grid-area: because; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .msg-ib__use { grid-area: use; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-strong); }
  .msg-ib__use .c-icon { width: 1rem; height: 1rem; }
  .msg-picker__shuffle { align-self: center; }

  /* stop panel and the inline confirm */
  .msg-stop, .msg-confirm {
    display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-subtle);
  }
  .msg-stop--warn { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--warn); }
  .msg-stop--block { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--danger); }
  .msg-stop__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-strong); }
  .msg-stop--block .msg-stop__icon { background: var(--danger-bg); color: var(--danger); }
  .msg-stop--warn .msg-stop__icon { background: var(--warn-bg); color: var(--warn); }
  .msg-stop__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .msg-stop__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
  .msg-stop__title, .msg-confirm__title { margin: 0; font-weight: var(--fw-semibold); color: var(--text-1); }
  .msg-stop__text { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
  .msg-stop__actions, .msg-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .msg-stop__form, .msg-confirm__actions form { margin: 0; }
  .msg-stop__help { margin: 0; color: var(--text-3); font-size: var(--fs-xs); }
  .msg-confirm { flex-direction: column; }
  .msg-confirm p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }

  /* ================================================================ the composer (§6.11) */
  .msg-composer {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: end; gap: var(--space-2);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    border-top: 1px solid var(--border-subtle);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .msg-composer { background: var(--surface-2); } }
  .msg-composer__spark { background: var(--brand-soft); color: var(--brand-strong); }
  .msg-composer__spark[aria-expanded="true"] { background: var(--brand); color: var(--text-on-brand); }
  .msg-composer__input {
    width: 100%; min-height: 2.75rem; max-height: 9.5rem; resize: none; overflow-y: auto;
    padding: 0.6875rem var(--space-4); border: 1px solid var(--border-input, var(--border-1)); border-radius: 1.375rem;
    background: var(--surface-sunken); color: var(--text-1);
    font: inherit; font-size: var(--fs-md); line-height: 1.35;
  }
  .msg-composer__input::placeholder { color: var(--text-3); }
  .msg-composer__input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: transparent; }
  .msg-composer__send:disabled { opacity: 0.45; cursor: default; transform: none; }
  @media (min-width: 64rem) {
    .msg-composer { margin-inline: 0; padding-inline: 0; border-top: 0; background: linear-gradient(to top, var(--surface-base) 70%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  .msg-readonly {
    position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    margin-inline: calc(var(--gutter) * -1); padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    border-top: 1px solid var(--border-subtle); text-align: center;
  }
  .msg-readonly__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); }
  .msg-readonly__title .c-icon { width: 1rem; height: 1rem; color: var(--text-2); }
  .msg-readonly__body { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }

  .msg-jump {
    position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4);
    border: 0; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-1); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1);
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  }
  .msg-jump[hidden] { display: none; }

  /* ================================================================ motion (never when motion is turned down) */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .msg-row.is-arriving { animation: msg-arrive var(--dur-base, 220ms) var(--ease-out, ease-out) both; }
    :root:not([data-motion="reduce"]) .msg-row--card.is-arriving .msg-note,
    :root:not([data-motion="reduce"]) .msg-row--card.is-arriving .msg-card--owner { animation: msg-grow 560ms var(--ease-spring, ease-out) both; }
    :root:not([data-motion="reduce"]) .msg-picker.is-opening { animation: msg-rise 260ms var(--ease-out, ease-out) both; }
    :root:not([data-motion="reduce"]) .msg-ib.is-picked { animation: msg-flash 220ms var(--ease-standard, ease) both; }
    @keyframes msg-arrive { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
    @keyframes msg-grow { from { opacity: 0; transform: scale(0.92); } 70% { transform: scale(1.015); } to { opacity: 1; transform: none; } }
    @keyframes msg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes msg-flash { from { box-shadow: inset 0 0 0 1.5px var(--brand-strong), 0 0 0 4px var(--brand-soft); } }
  }

  /* forced colours: bubbles keep their shape with system borders */
  @media (forced-colors: active) {
    .msg-bubble, .msg-ib, .msg-picker, .msg-stop, .msg-note, .msg-hello, .msg-sys { border: 1px solid CanvasText; }
  }
}

/* modules/profile.css */
/* My420Love · modules/profile.css — the profile module (PRO): "Let's get comfy" onboarding, the magazine-cover
   profile, /me, /me/edit, photos, the 30-second recorder, verification and settings (SPEC-DESIGN §6.4, §6.9, §7.4).
   Every rule is scoped to a .pro-* class (module CSS loads on every page). Semantic tokens only, except the cream
   type set on member photos, which must stay light on any photo in either theme (the scrim guarantees ≥ 4.5:1).
   Motion is gated twice (OS setting and <html data-motion="reduce">), like 06-motion.css. */
@layer modules {

  /* ================================================================ shared bits */
  .pro-section-title {
    margin: 0;
    font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display-text);
    font-size: var(--fs-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-heading);
    color: var(--text-1);
  }
  .pro-link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; }
  .pro-link .c-icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
  @media (hover: hover) { .pro-link:hover .c-icon { transform: translateX(calc(3px * var(--motion-ok))); } }
  .pro-private {
    display: inline-flex; align-items: center; gap: var(--space-1-5); align-self: flex-start;
    padding: 0.25rem 0.625rem; border-radius: var(--radius-full);
    font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text);
    background: var(--love-soft); color: var(--text-love);
  }
  .pro-private .c-icon { width: 0.875rem; height: 0.875rem; }
  .pro-private--sm { padding: 0.125rem 0.5rem; }
  .pro-drawer { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
  .pro-drawer__summary {
    display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit-min);
    list-style: none; cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-1);
  }
  .pro-drawer__summary::-webkit-details-marker { display: none; }
  .pro-drawer__summary .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); transition: transform var(--dur-base) var(--ease-out); }
  .pro-ob .pro-drawer[open] > .pro-drawer__summary > .c-icon:first-child { transform: rotate(45deg); }
  .pro-drawer__body { padding-block: var(--space-3) var(--space-2); }
  .pro-drawer--danger .pro-drawer__summary, .pro-drawer--danger .pro-drawer__summary .c-icon { color: var(--danger); }

  .pro-status {
    --tone: var(--info); --tone-bg: var(--info-bg);
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--tone-bg); color: var(--text-1);
    border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  }
  .pro-status[data-tone="success"] { --tone: var(--success); --tone-bg: var(--success-bg); }
  .pro-status[data-tone="warn"] { --tone: var(--warn); --tone-bg: var(--warn-bg); }
  .pro-status[data-tone="danger"] { --tone: var(--danger); --tone-bg: var(--danger-bg); }
  .pro-status[data-tone="neutral"] { --tone: var(--text-3); --tone-bg: var(--surface-3); }
  .pro-status__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); }
  .pro-status__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .pro-status__text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .pro-status__text p { margin: 0; }
  .pro-status__title { margin: 0; font-weight: var(--fw-semibold); color: var(--text-1); }

  /* ================================================================ "Let's get comfy" — the room
     One question per screen on the auth layout. The page's ambient light takes the colour of the step's dimension
     (data-accent on the section), so the room shifts gently as the member moves through the sets. */
  body.pro-ob-page { --ob: var(--dim-love); --ob-fg: var(--dim-love-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="green"]) { --ob: var(--dim-green); --ob-fg: var(--dim-green-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="chemistry"]) { --ob: var(--dim-chemistry); --ob-fg: var(--dim-chemistry-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="communication"]) { --ob: var(--dim-communication); --ob-fg: var(--dim-communication-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="fun"]) { --ob: var(--dim-fun); --ob-fg: var(--dim-fun-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="lifestyle"]) { --ob: var(--dim-lifestyle); --ob-fg: var(--dim-lifestyle-fg); }
  body.pro-ob-page:has(.pro-ob[data-accent="romance"]) { --ob: var(--dim-romance); --ob-fg: var(--dim-romance-fg); }
  body.pro-ob-page {
    background-image:
      radial-gradient(80% 48% at 50% -6%, color-mix(in srgb, var(--ob) 24%, transparent) 0%, transparent 72%),
      radial-gradient(55% 38% at 105% 100%, color-mix(in srgb, var(--love-strong) 12%, transparent) 0%, transparent 70%),
      radial-gradient(45% 30% at -8% 70%, color-mix(in srgb, var(--brand-strong) 10%, transparent) 0%, transparent 70%);
    background-size: 100% 100%;
    background-attachment: fixed;
  }
  /* the one flexible track (minmax(0, 1fr)) now comes from 04-layout.css for every auth page */
  .pro-ob-page .l-auth__main { padding-top: var(--space-4); }
  @media (min-width: 48rem) { .pro-ob-page .l-auth__main { align-items: start; padding-top: clamp(var(--space-6), 6vh, var(--space-16)); } }
  .pro-ob__room { display: none; }
  /* the heart's "Almost there" note sits under the heart instead of squeezing the header column */
  .pro-ob-page .c-auth-header__side--end { position: relative; }
  .pro-ob-page .c-progress-heart__note { position: absolute; top: calc(100% - 0.25rem); right: max(var(--space-2), calc(var(--gutter) - var(--space-2))); white-space: nowrap; font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); color: var(--brand-strong); }

  .pro-ob { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
  .pro-ob__form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  .pro-ob__form > form:not(.pro-metro__search) { display: flex; flex-direction: column; gap: var(--space-5); }
  .pro-ob__eyebrow { align-self: center; margin: 0; }
  .pro-ob__eyebrow--top { margin-top: var(--space-2); }
  .pro-ob__title {
    margin: 0; padding: 0;
    font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display);
    font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: -0.022em;
    text-align: center; text-wrap: balance; color: var(--text-1);
  }
  legend.pro-ob__title { float: left; width: 100%; margin-bottom: var(--space-2); }
  legend.pro-ob__title + * { clear: both; }
  .pro-ob__title em, .pro-ob__breather em, .pro-ob__veil em, .pro-me__hello em, .pro-page__title em {
    font-style: italic; font-weight: calc(var(--fw-display) - 60); color: var(--text-love);
  }
  .pro-ob__title--hero { font-size: var(--fs-4xl); font-weight: var(--fw-display-hero); line-height: 1.02; }
  .pro-ob__lead { margin: 0 auto; max-width: 34ch; text-align: center; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); text-wrap: pretty; }
  .pro-ob__fine { margin: 0; }
  .pro-ob__art { margin-bottom: calc(-1 * var(--space-1)); }
  .pro-ob__art > svg { box-shadow: 0 22px 48px -18px var(--ob, var(--dim-love)), 0 0 0 1px var(--border-subtle); }
  .pro-ob__actions { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
  .pro-ob__actions .c-btn[disabled] { opacity: 0.55; }
  .pro-ob__panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }
  .pro-ob__panel > legend { float: left; width: 100%; padding: 0; }
  .pro-ob__panel > legend + * { clear: both; }
  .pro-ob .c-choice { gap: var(--space-5); }
  .pro-ob .c-choice__art > svg { box-shadow: 0 22px 48px -18px var(--ob, var(--dim-love)); }
  .pro-ob .c-input[data-ob-name] { font-family: var(--font-display); font-size: var(--fs-2xl); text-align: center; min-height: 3.75rem; letter-spacing: -0.01em; }

  /* the entrance: the step rises in; while the next step loads it softly recedes */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .pro-ob__form { animation: m4l-fade-up var(--dur-slower) var(--ease-out) both; }
    :root:not([data-motion="reduce"]) .pro-ob__art { animation: m4l-grow-in var(--dur-slower) var(--ease-out) 60ms both; }
    :root:not([data-motion="reduce"]) .pro-ob.is-leaving .pro-ob__form { opacity: 0.4; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-in), transform var(--dur-base) var(--ease-in); }
    :root:not([data-motion="reduce"]) .pro-pick__tile.is-picked, :root:not([data-motion="reduce"]) .c-choice__tile.is-picked { animation: m4l-pop var(--dur-base) var(--ease-spring); }
  }

  /* the breather: inline without JS, full screen for 1.2 s with JS */
  .pro-ob__breather {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin: 0; text-align: center;
    font-family: var(--font-display); font-size: var(--fs-xl); font-variation-settings: var(--fvs-display-text); color: var(--text-1);
  }
  .pro-ob__breather .c-icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }
  .pro-ob__veil {
    position: fixed; inset: 0; z-index: var(--z-celebration);
    display: grid; place-items: center; padding: var(--gutter);
    background: var(--surface-base); background-image: var(--surface-ambient);
    font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display);
    font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.02em; text-align: center; color: var(--text-1);
    animation: m4l-fade var(--dur-slow) var(--ease-out) both;
    transition: opacity 450ms var(--ease-in);
  }
  .pro-ob__veil > span { max-width: 14ch; animation: m4l-grow-in var(--dur-slower) var(--ease-out) 80ms both; }
  .pro-ob__veil.is-leaving { opacity: 0; }

  /* welcome */
  .pro-ob--welcome .pro-ob__form { gap: var(--space-6); padding-top: var(--space-4); }
  .pro-ob__mark { display: grid; place-items: center; }
  .pro-ob__mark .c-mark { width: 6.5rem; height: auto; filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--love-strong) 35%, transparent)); }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .pro-ob__mark .c-mark { animation: m4l-grow-in 900ms var(--ease-out) 120ms both; }
  }
  .pro-ob__badges { gap: var(--space-2); }
  .pro-ob__points { list-style: none; margin: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }
  .pro-ob__points li { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-medium); }
  .pro-ob__point-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
  .pro-ob__point-icon .c-icon { width: 1.125rem; height: 1.125rem; }

  /* your info: birthday + zodiac + the consent card */
  .pro-ob__birthday { gap: var(--space-3); }
  .pro-ob__birthday-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
  .pro-ob__birthday-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background: var(--dim-lifestyle-bg); color: var(--dim-lifestyle); }
  .pro-ob__birthday-date { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); }
  .pro-ob__zodiac { margin-left: auto; }
  .pro-ob__zodiac.is-waiting { opacity: 0; }
  .pro-ob__birthday-note { margin: 0; }
  .pro-ob__consent { gap: var(--space-3); }
  .pro-ob__consent.has-error { border-color: var(--danger); }
  .pro-ob__consent-head { display: flex; align-items: center; gap: var(--space-3); }
  .pro-ob__consent-head .c-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); }
  .pro-ob__consent-text { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); }
  .pro-ob__consent-check { min-height: var(--hit-min); }

  /* gender drawer, counter, tips */
  .pro-ob .pro-drawer { border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); background: var(--surface-1); }
  .pro-ob__counter { margin: 0; align-self: center; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); background: var(--surface-3); font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-text); font-variant-numeric: var(--numerals); color: var(--text-2); }
  .pro-ob__counter.is-ready { background: var(--brand-soft); color: var(--brand-strong); }
  .pro-ob__tips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .pro-ob__tips li { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.3125rem 0.75rem; border-radius: var(--radius-full); background: var(--surface-1); border: 1px solid var(--border-1); font-size: var(--fs-sm); color: var(--text-2); }
  .pro-ob__tips .c-icon { width: 1rem; height: 1rem; color: var(--dim-fun); }

  /* the ages slider: two range inputs over one track */
  .pro-range { --lo: 25; --hi: 40; --min: 21; --max: 99; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }
  .pro-range__value { display: block; text-align: center; font-family: var(--font-display); font-size: var(--fs-3xl); font-variant-numeric: var(--numerals); color: var(--text-1); }
  .pro-range__track { position: relative; height: 2.75rem; }
  .pro-range__track::before { content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--radius-full); background: var(--meter-track); }
  .pro-range__fill {
    position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--radius-full);
    left: calc(0.875rem + (100% - 1.75rem) * (var(--lo) - var(--min)) / (var(--max) - var(--min)));
    right: calc(0.875rem + (100% - 1.75rem) * (var(--max) - var(--hi)) / (var(--max) - var(--min)));
    background: linear-gradient(90deg, var(--ob, var(--dim-chemistry)), var(--love-strong));
  }
  .pro-range__input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
  }
  .pro-range__input:focus { outline: none; }
  .pro-range__input::-webkit-slider-runnable-track { background: none; height: 100%; }
  .pro-range__input::-moz-range-track { background: none; }
  .pro-range__input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
    width: 1.75rem; height: 1.75rem; margin-top: calc((2.75rem - 1.75rem) / 2); border-radius: 50%;
    background: var(--cream-200); border: 3px solid var(--brand); box-shadow: var(--shadow-2);
  }
  .pro-range__input::-moz-range-thumb {
    pointer-events: auto; cursor: grab; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--cream-200); border: 3px solid var(--brand); box-shadow: var(--shadow-2);
  }
  .pro-range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
  .pro-range__input:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
  .pro-range__input[data-range-lo] { z-index: 2; }
  .pro-range__input[data-range-hi] { z-index: 3; }
  .pro-range.is-lo-top .pro-range__input[data-range-lo] { z-index: 4; }
  .pro-range__scale { display: flex; justify-content: space-between; padding-inline: 0.5rem; font-size: var(--fs-xs); color: var(--text-3); }
  .pro-range--compact { padding: var(--space-4) var(--space-3) var(--space-2); box-shadow: none; background: var(--surface-sunken); }
  .pro-range--compact .pro-range__value { font-size: var(--fs-2xl); }

  /* metro */
  .pro-metro__search { display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-metro__search .c-field { flex: 1; }
  @media (min-width: 30rem) { .pro-metro__search { flex-direction: row; align-items: flex-start; } .pro-metro__search > .c-btn { margin-top: 1.625rem; } }
  .pro-metro__list-wrap { border: 0; margin: 0; padding: 0; min-width: 0; }
  .pro-metro__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-metro__option {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3);
    min-height: 3.5rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-1); border: 1px solid var(--border-1); cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .pro-metro__option .c-check__input { grid-row: span 2; }
  .pro-metro__name { font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }
  .pro-metro__alias { grid-column: 2; font-size: var(--fs-xs); color: var(--text-3); }
  .pro-metro__option:has(:checked) { border-color: var(--brand-strong); background: linear-gradient(0deg, var(--brand-soft), var(--brand-soft)), var(--surface-1); }
  .pro-metro__option:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .pro-metro__none { margin: var(--space-2) 0 0; text-align: center; }
  .pro-metro__filter { display: flex; flex-direction: column; gap: var(--space-1); }
  .pro-metro__note { margin: 0; min-height: 1rem; }

  /* looking for: big mode tiles with a line of description */
  .pro-pick { padding-top: var(--space-4); }
  .pro-pick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
  .pro-pick__desc { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-3); }
  .pro-pick--modes .c-choice__tile { min-height: 5.25rem; padding-block: var(--space-4); }
  .pro-pick--modes .c-choice__emoji { width: 3.25rem; height: 3.25rem; font-size: 1.875rem; background: var(--love-soft); }
  .pro-pick--modes .c-choice__label { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); }
  .pro-pick--compact { padding-top: 0; display: grid; gap: var(--space-2); }
  .pro-pick--compact .c-choice__tile { min-height: 3.5rem; padding-block: var(--space-2); }
  .pro-pick--compact .c-choice__emoji { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
  .pro-pick--compact .c-choice__label { font-family: var(--font-text); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
  @media (min-width: 40rem) { .pro-pick--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* what matters most: seven dimension cards */
  .pro-dims { clear: both; display: grid; gap: var(--space-2); padding-top: var(--space-4); }
  @media (min-width: 30rem) { .pro-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pro-dim {
    position: relative; display: flex; align-items: center; gap: var(--space-3);
    min-height: 4.25rem; padding: var(--space-3); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-instant);
  }
  .pro-dim:active { transform: scale(0.985); }
  .pro-dim__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pro-dim__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); }
  .pro-dim__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .pro-dim__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pro-dim__name { font-weight: var(--fw-semibold); color: var(--text-1); }
  .pro-dim__short { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-3); }
  .pro-dim__tick { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--border-2); color: transparent; transition: all var(--dur-fast); }
  .pro-dim__tick .c-icon { width: 0.875rem; height: 0.875rem; }
  .pro-dim:has(:checked) { border-color: var(--dim); background: linear-gradient(0deg, var(--dim-bg), var(--dim-bg)), var(--surface-1); }
  .pro-dim:has(:checked) .pro-dim__tick { background: var(--dim); border-color: var(--dim); color: var(--surface-base); }
  .pro-dim:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .pro-dims--compact { padding-top: var(--space-2); }
  .pro-dims--compact .pro-dim { min-height: 3.5rem; box-shadow: none; }

  /* bio starters */
  .pro-starters { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .pro-starters p { margin: 0; }
  .pro-starters__list { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; scroll-snap-type: x proximity; }
  .pro-starters__list::-webkit-scrollbar { display: none; }
  .pro-starter { flex: none; scroll-snap-align: start; cursor: pointer; border: 1px solid var(--border-1); background: var(--surface-1); color: var(--text-1); min-height: var(--hit-min); }
  .pro-starter .c-icon { width: 0.875rem; height: 0.875rem; color: var(--dim-communication); }
  .pro-starter.is-used { border-color: var(--brand-strong); background: var(--brand-soft); }

  /* red flags (private) */
  .pro-ob .pro-private { display: flex; width: fit-content; margin: var(--space-3) auto 0; }
  .pro-flags { clear: both; display: grid; gap: var(--space-2); padding-top: var(--space-3); }
  .pro-flag {
    position: relative; display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--surface-1); border: 1px solid var(--border-1); cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .pro-flag__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pro-flag__emoji { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-3); font-size: 1.125rem; }
  .pro-flag__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pro-flag__label { font-weight: var(--fw-semibold); color: var(--text-1); line-height: 1.3; }
  .pro-flag__desc { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-3); }
  .pro-flag__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--warn); }
  .pro-flag__state .c-icon { width: 0.75rem; height: 0.75rem; }
  .pro-flag__tick { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-xs); border: 1.5px solid var(--border-2); color: transparent; }
  .pro-flag__tick .c-icon { width: 0.875rem; height: 0.875rem; }
  .pro-flag:has(:checked) { border-color: var(--love-strong); background: linear-gradient(0deg, var(--love-soft), var(--love-soft)), var(--surface-1); }
  .pro-flag:has(:checked) .pro-flag__tick { background: var(--love); border-color: var(--love); color: var(--text-on-love); }
  .pro-flag:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .pro-flags--compact .pro-flag { padding: var(--space-2) var(--space-3); }
  .pro-flags + p { margin: var(--space-3) 0 0; }
  @media (min-width: 40rem) { .pro-flags--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pro-pool { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
  .pro-pool .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 2px; color: var(--brand-strong); }

  /* notifications step + install card */
  .pro-ob__toggles { border: 1px solid var(--border-1); margin: 0; }
  .pro-ob__install {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center;
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--surface-1);
    border: 1px solid color-mix(in srgb, var(--brand-strong) 30%, var(--border-1));
  }
  .pro-ob__install[hidden] { display: none; }
  .pro-ob__install > .c-btn { grid-column: 1 / -1; justify-self: start; }
  @media (min-width: 30rem) { .pro-ob__install { grid-template-columns: auto minmax(0, 1fr) auto; } .pro-ob__install > .c-btn { grid-column: auto; } }
  .pro-ob__install-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background: var(--brand); color: var(--text-on-brand); }
  .pro-ob__install-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pro-ob--center .pro-ob__form { padding-top: var(--space-10); }

  /* ================================================================ photos grid (onboarding + /me/photos) */
  .pro-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  @media (min-width: 40rem) { .pro-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pro-photo { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .pro-photo:first-child:not(.pro-photo--add) { grid-column: span 2; grid-row: span 2; }
  @media (min-width: 40rem) { .pro-photo:first-child:not(.pro-photo--add) { grid-column: span 2; grid-row: span 2; } }
  .pro-photo__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
  .pro-photo__frame .c-photo { border-radius: var(--radius-lg); }
  .pro-photo.is-primary .pro-photo__frame { box-shadow: 0 0 0 2px var(--brand-strong), var(--shadow-3); }
  .pro-photo.is-rejected .pro-photo__frame { opacity: 0.55; filter: grayscale(0.7); }
  .pro-photo.is-dragging { opacity: 0.45; }
  .pro-photo__primary {
    position: absolute; z-index: 2; top: var(--space-2); left: var(--space-2);
    display: inline-flex; align-items: center; gap: 4px; padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full); background: rgba(16, 22, 19, 0.68); color: #FFF3DD;
    font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .pro-photo__primary .c-icon { width: 0.75rem; height: 0.75rem; color: var(--lime-400); }
  .pro-photo__status { position: absolute; z-index: 2; left: var(--space-2); bottom: var(--space-2); }
  .pro-photo__status .c-status-pill { background: rgba(16, 22, 19, 0.7); color: #FFF3DD; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .pro-photo__reason { display: flex; gap: var(--space-1-5); margin: 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--danger); }
  .pro-photo__reason .c-icon { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 1px; }
  .pro-photo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .pro-photo__actions form { display: contents; }
  .pro-photo--add .pro-photo__upload { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
  .pro-photo__drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    aspect-ratio: 4 / 5; padding: var(--space-4); border-radius: var(--radius-lg); cursor: pointer; text-align: center;
    border: 2px dashed var(--border-2); background: var(--surface-1); color: var(--text-2);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .pro-photo__drop:hover, .pro-photo__drop.is-over { border-color: var(--brand-strong); background: var(--brand-soft); }
  .pro-photo__drop:focus-within { box-shadow: var(--focus-ring); }
  .pro-photo__plus { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); box-shadow: var(--glow-emerald); }
  .pro-photo__plus .c-icon { width: 1.5rem; height: 1.5rem; }
  .pro-photo__drop-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
  .pro-photo__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .pro-photo--add.is-busy .pro-photo__drop { pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .pro-photo--add.is-busy .pro-photo__plus { animation: m4l-mark-pulse 1.1s var(--ease-breathe) infinite; }
  }
  .pro-photos:only-child .pro-photo:first-child.pro-photo--add { grid-column: span 2; }

  /* ================================================================ the 30-second recorder */
  .pro-rec { display: flex; flex-direction: column; gap: var(--space-4); }
  .pro-rec__current { gap: var(--space-3); }
  .pro-rec__player { width: 100%; max-height: 28rem; border-radius: var(--radius-md); background: var(--surface-sunken); }
  .pro-rec__stage {
    position: relative; overflow: hidden; isolation: isolate;
    width: 100%; max-width: 22rem; margin-inline: auto; aspect-ratio: 3 / 4;
    border-radius: var(--radius-xl); background: var(--surface-brand-gradient);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1);
  }
  .pro-rec__preview, .pro-rec__review { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B110E; }
  .pro-rec__preview { transform: scaleX(-1); }
  .pro-rec__stage:not(.is-recording) .pro-rec__preview { visibility: hidden; }
  .pro-rec__review[hidden] { display: none; }
  .pro-rec__stage.is-review .pro-rec__preview { display: none; }
  .pro-rec__idle { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); text-align: center; color: #FFF3DD; }
  .pro-rec__idle[hidden] { display: none; }
  .pro-rec__idle-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255, 243, 221, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.24); }
  .pro-rec__idle-icon .c-icon { width: 2rem; height: 2rem; }
  .pro-rec__idle-text { max-width: 18ch; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3; }
  .pro-rec__ring { position: absolute; z-index: 3; top: var(--space-3); right: var(--space-3); width: 4.5rem; height: 4.5rem; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity var(--dur-base); }
  .pro-rec__stage.is-recording .pro-rec__ring { opacity: 1; }
  .pro-rec__ring-track { fill: rgba(11, 17, 14, 0.45); stroke: rgba(255, 243, 221, 0.25); stroke-width: 8; }
  .pro-rec__ring-fill { fill: none; stroke: var(--berry-400); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 250ms linear; }
  .pro-rec__timer { position: absolute; z-index: 4; top: var(--space-3); right: var(--space-3); display: grid; place-items: center; width: 4.5rem; height: 4.5rem; font: var(--fw-bold) var(--fs-xl)/1 var(--font-text); font-variant-numeric: var(--numerals); color: #FFF3DD; }
  .pro-rec__timer[hidden], .pro-rec__live[hidden], .pro-rec__prompt[hidden] { display: none; }
  .pro-rec__live { position: absolute; z-index: 4; top: var(--space-4); left: var(--space-4); display: inline-flex; align-items: center; gap: 6px; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: rgba(11, 17, 14, 0.6); color: #FFF3DD; font: var(--fw-bold) var(--fs-xs)/1 var(--font-text); letter-spacing: 0.08em; }
  .pro-rec__live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--berry-400); }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .pro-rec__live-dot { animation: m4l-mark-pulse 1.1s var(--ease-breathe) infinite; }
    :root:not([data-motion="reduce"]) .pro-rec__prompt.is-new { animation: m4l-fade-up var(--dur-slow) var(--ease-out) both; }
  }
  .pro-rec__prompt { position: absolute; z-index: 4; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(11, 17, 14, 0.62); color: #FFF3DD; font-family: var(--font-display); font-size: var(--fs-lg); text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .pro-rec__status { min-height: 1.25rem; margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
  .pro-rec__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
  .pro-rec__send { margin-top: var(--space-3); }
  .pro-rec__send[hidden] { display: none; }
  .pro-rec__unsupported { display: flex; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); }
  .pro-rec__unsupported[hidden] { display: none; }
  .pro-rec__tips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .pro-rec__tips li { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.3125rem 0.75rem; border-radius: var(--radius-full); background: var(--surface-1); border: 1px solid var(--border-1); font-size: var(--fs-xs); color: var(--text-2); }
  .pro-rec__tips .c-icon { width: 0.875rem; height: 0.875rem; color: var(--dim-fun); }

  /* ================================================================ the magazine cover (profile:card) */
  .pro-cover { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }
  .pro-cover > .c-heart-glow { display: block; border-radius: var(--radius-xl); }
  .pro-cover__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; background: var(--surface-3); box-shadow: var(--shadow-3); }
  .pro-cover__frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(to top, rgba(11, 17, 14, 0.94) 0%, rgba(11, 17, 14, 0.66) 26%, rgba(11, 17, 14, 0.12) 52%, transparent 62%),
      linear-gradient(to bottom, rgba(11, 17, 14, 0.5) 0%, transparent 20%);
  }
  .pro-cover__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: inherit; }
  .pro-cover__track::-webkit-scrollbar { display: none; }
  .pro-cover__track:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -4px; }
  .pro-cover__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .pro-cover__slide .c-photo { border-radius: 0; }
  .pro-cover__slide .c-photo > .c-demo-badge, .pro-cover .c-photo__pending { top: calc(var(--space-2) + 3rem); bottom: auto; left: var(--space-3); }
  .pro-cover .c-photo__pending .c-status-pill { background: rgba(16, 22, 19, 0.7); color: #FFF3DD; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.18); }
  .pro-cover .c-photo__pending .c-icon { color: var(--amber-300); }
  .pro-cover__hit { position: absolute; inset: 0; z-index: 2; }
  .pro-cover__dots { position: absolute; z-index: 3; top: var(--space-2); left: var(--space-3); right: var(--space-3); display: flex; gap: 4px; pointer-events: none; }
  .pro-cover__dot { flex: 1; height: 3px; border-radius: var(--radius-full); background: rgba(255, 243, 221, 0.32); transition: background-color var(--dur-base); }
  .pro-cover__dot.is-active { background: #FFF3DD; box-shadow: 0 0 8px rgba(255, 243, 221, 0.45); }
  .pro-cover__nav {
    position: absolute; z-index: 4; top: 42%; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(16, 22, 19, 0.55); color: #FFF3DD; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; transition: opacity var(--dur-base);
  }
  .pro-cover__nav--prev { left: var(--space-3); }
  .pro-cover__nav--next { right: var(--space-3); }
  .pro-cover__nav[disabled] { visibility: hidden; }
  .pro-cover:hover .pro-cover__nav, .pro-cover__nav:focus-visible { opacity: 1; }
  .pro-cover__top { position: absolute; z-index: 3; top: calc(var(--space-2) + 0.75rem); left: var(--space-3); right: var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); pointer-events: none; }
  .pro-cover__pills { display: flex; flex-wrap: wrap; gap: var(--space-1-5); min-width: 0; }
  .pro-cover__pills .c-status-pill { background: rgba(16, 22, 19, 0.62); color: #FFF3DD; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.16); }
  .pro-cover__pills .c-status-pill--success .c-icon { color: var(--emerald-300); }
  .pro-cover__pills .c-status-pill--founding .c-icon { color: var(--lifestyle-300); }
  .pro-cover__pills .c-status-pill--brand .c-icon { color: var(--berry-300); }
  .pro-cover__print {
    --lp-bg: #1D2822;
    flex: none; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%;
    background: rgba(16, 22, 19, 0.58); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.18), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  }
  .pro-cover__print .c-love-print .lp-track { fill: #2D3C34; }
  .pro-cover__caption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: var(--space-8) var(--space-5) var(--space-5); color: #FFF3DD; pointer-events: none; }
  .pro-cover__caption a, .pro-cover__caption .c-chip { pointer-events: auto; }
  .pro-cover__active { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); letter-spacing: 0.02em; color: rgba(255, 243, 221, 0.9); }
  .pro-cover__active-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 10px var(--lime-400); }
  .pro-cover__name {
    margin: 0;
    font-family: var(--font-display); font-weight: var(--fw-display-hero); font-variation-settings: var(--fvs-display);
    font-size: clamp(2.375rem, 1.7rem + 2.8vw, 3.5rem); line-height: 0.98; letter-spacing: -0.032em;
    color: #FFF3DD; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere;
  }
  .pro-cover__link { color: inherit; text-decoration: none; }
  .pro-cover__link:focus-visible { outline: var(--focus-w) solid var(--lime-400); outline-offset: 4px; border-radius: var(--radius-xs); }
  .pro-cover__age { margin-left: 0.28em; font-weight: 340; font-style: italic; color: rgba(255, 243, 221, 0.9); }
  .pro-cover__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: rgba(255, 243, 221, 0.88); }
  .pro-cover__meta:empty { display: none; }
  .pro-cover__pronouns { padding: 0.0625rem 0.5rem; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.32); }
  .pro-cover__place, .pro-cover__visiting { display: inline-flex; align-items: center; gap: 4px; }
  .pro-cover__place .c-icon, .pro-cover__visiting .c-icon { width: 0.875rem; height: 0.875rem; color: var(--berry-300); }
  .pro-cover__visiting { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--lime-300); }
  .pro-cover__chips { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
  .pro-cover .c-chip--glass { background: rgba(16, 22, 19, 0.56); color: #FFF3DD; box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .pro-cover .pro-cover__chip--mode { background: linear-gradient(135deg, rgba(190, 49, 80, 0.9), rgba(165, 39, 106, 0.82)); box-shadow: inset 0 0 0 1px rgba(255, 243, 221, 0.28), 0 6px 18px -8px rgba(190, 49, 80, 0.8); }
  .pro-cover--compact { max-width: 22rem; }
  .pro-cover--compact .pro-cover__name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); }
  .pro-cover--compact .pro-cover__print { width: 3.75rem; height: 3.75rem; }
  .pro-cover--compact .pro-cover__caption { padding: var(--space-6) var(--space-4) var(--space-4); }
  @media (hover: hover) {
    .pro-cover--link .pro-cover__frame { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
    .pro-cover--link:hover .pro-cover__frame { transform: translateY(calc(-3px * var(--motion-ok))); box-shadow: var(--shadow-4); }
  }

  /* ================================================================ /u/{handle} */
  .pro-profile { position: relative; display: flex; flex-direction: column; gap: var(--space-6); }
  .pro-profile__layout { display: grid; gap: var(--space-6); min-width: 0; }
  .pro-profile__body { min-width: 0; }
  @media (min-width: 64rem) {
    .pro-profile__layout { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
    .pro-profile__cover { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); }
    .pro-profile__cover .pro-cover { max-width: none; }
  }
  .pro-preview-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand-strong) 55%, transparent); color: var(--text-1);
  }
  .pro-preview-banner p { flex: 1 1 12rem; margin: 0; font-size: var(--fs-sm); }
  .pro-preview-banner__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); }
  .pro-preview-banner__icon .c-icon { width: 1rem; height: 1rem; }

  .pro-why { gap: var(--space-4); background: linear-gradient(160deg, color-mix(in srgb, var(--love-strong) 10%, transparent), transparent 55%), var(--surface-1); }
  .pro-why__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .pro-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-why__reason { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-md); line-height: var(--lh-snug); }
  .pro-why__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--dim-bg); color: var(--dim); font-size: 1rem; }
  .pro-why__icon .c-icon { width: 1rem; height: 1rem; }
  .pro-why__talk { display: flex; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-sm); color: var(--text-2); }
  .pro-why__talk .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 2px; color: var(--dim-communication); }
  .pro-why__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

  .pro-video { display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-video__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #0B110E; box-shadow: var(--shadow-2); max-width: 24rem; }
  .pro-video__player { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .pro-video__len { position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; gap: 4px; padding: 0.1875rem 0.5rem; border-radius: var(--radius-full); background: rgba(11, 17, 14, 0.62); color: #FFF3DD; font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-text); pointer-events: none; }
  .pro-video__len .c-icon { width: 0.75rem; height: 0.75rem; }
  .pro-video__transcript summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-link); min-height: var(--hit-min); display: flex; align-items: center; }
  .pro-video__transcript p { margin: 0; color: var(--text-2); }

  .pro-bio { display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-bio__text { margin: 0; font-family: var(--font-display); font-variation-settings: var(--fvs-display-text); font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-1); white-space: pre-line; overflow-wrap: anywhere; }

  .pro-style { gap: var(--space-4); border-color: color-mix(in srgb, var(--dim-green) 30%, var(--border-1)); background: linear-gradient(170deg, var(--dim-green-bg), transparent 60%), var(--surface-1); }
  .pro-style__head { display: flex; align-items: center; gap: var(--space-3); }
  .pro-style__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--dim-green); color: var(--surface-base); }
  .pro-style__icon .c-icon { width: 1.25rem; height: 1.25rem; }
  .pro-style__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: var(--lh-tight); }
  .pro-style__row { display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-style__label { margin: 0; font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .pro-style__pace, .pro-style__strain { display: flex; flex-direction: column; gap: 2px; margin: 0; }
  .pro-style__value { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-1); }
  .pro-style__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

  .pro-prompts { display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-prompts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .pro-prompt { position: relative; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); overflow: hidden; }
  .pro-prompt::before { content: "“"; position: absolute; top: -0.35em; right: var(--space-3); font-family: var(--font-display); font-size: 6rem; line-height: 1; color: color-mix(in srgb, var(--love-strong) 18%, transparent); pointer-events: none; }
  .pro-prompt[data-i="1"]::before { color: color-mix(in srgb, var(--dim-green) 20%, transparent); }
  .pro-prompt[data-i="2"]::before { color: color-mix(in srgb, var(--dim-chemistry) 22%, transparent); }
  .pro-prompt__q { position: relative; margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-sm)/1.35 var(--font-text); color: var(--text-3); }
  .pro-prompt__a { position: relative; margin: 0; font-family: var(--font-display); font-variation-settings: var(--fvs-display-text); font-size: var(--fs-xl); line-height: 1.3; color: var(--text-1); overflow-wrap: anywhere; }

  .pro-flags-view { display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-flags-view__common { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); color: var(--brand-strong); }
  .pro-flags-view__common .c-icon { width: 1rem; height: 1rem; color: var(--accent); }
  .pro-flags-view__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .pro-facts { display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-facts__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-2); }
  .pro-facts__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-subtle); min-width: 0; }
  .pro-facts__label { font: var(--fw-semibold) var(--fs-micro)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .pro-facts__value { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; font-weight: var(--fw-medium); color: var(--text-1); overflow-wrap: anywhere; }

  .pro-profile__legal { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

  .pro-actions {
    position: sticky; z-index: var(--z-sticky);
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
    display: flex; align-items: center; gap: var(--space-2);
    width: min(100%, 34rem); margin-inline: auto; padding: var(--space-2);
    border-radius: var(--radius-full); background: var(--glass-bg);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-1);
    transition: box-shadow var(--dur-base);
  }
  .pro-actions.is-floating { box-shadow: var(--shadow-4), inset 0 0 0 1px var(--border-2); }
  @media (min-width: 64rem) { .pro-actions { bottom: var(--space-6); } }
  .pro-actions__bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
  .pro-actions__bar > .c-btn:not(.pro-actions__main) { flex: none; }
  .pro-actions__main { flex: 1; min-width: 0; }
  .pro-actions > :first-child:not(.pro-actions__bar) { flex: 1; min-width: 0; }
  .pro-actions__more { flex: none; }
  .pro-actions--solo { width: auto; margin-inline: auto 0; align-self: flex-end; padding: var(--space-1); }
  .pro-more { gap: var(--space-2); }

  /* ================================================================ profile:hero (compact identity row) */
  .pro-hero { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--text-1); text-decoration: none; }
  .pro-hero__text { display: flex; flex-direction: column; min-width: 0; }
  .pro-hero__name { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.15; }
  .pro-hero__age { font-style: italic; font-weight: 380; color: var(--text-2); }
  .pro-hero__verified { display: inline-grid; color: var(--brand-strong); }
  .pro-hero__verified .c-icon { width: 1.125rem; height: 1.125rem; }
  .pro-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); color: var(--text-3); }
  .pro-hero__chip { display: inline-flex; align-items: center; gap: 4px; color: var(--text-love); }
  .pro-hero--lg .pro-hero__name { font-size: var(--fs-2xl); }
  a.pro-hero:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }

  /* ================================================================ /me */
  .pro-me { display: flex; flex-direction: column; gap: var(--space-6); }
  .pro-me__hero { display: grid; gap: var(--space-5); }
  @media (min-width: 48rem) { .pro-me__hero { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: center; gap: var(--space-8); } }
  .pro-me__cover .pro-cover { max-width: 19rem; }
  @media (max-width: 47.99rem) { .pro-me__cover .pro-cover { max-width: 17rem; } }
  .pro-me__hello { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .pro-me__cta { gap: var(--space-2); }

  .pro-missing { gap: var(--space-3); }
  .pro-missing__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .pro-missing__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-min); padding-block: var(--space-2); color: var(--text-1); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
  .pro-missing__list li:last-child .pro-missing__item { border-bottom: 0; }
  .pro-missing__item > span:nth-child(2) { flex: 1; min-width: 0; }
  .pro-missing__item .c-icon { width: 1rem; height: 1rem; color: var(--text-3); }
  .pro-missing__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--love-strong); box-shadow: 0 0 0 4px var(--love-soft); }
  @media (hover: hover) { .pro-missing__item:hover > span:nth-child(2) { color: var(--text-link); } }

  .pro-strength { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
  .pro-strength__ring { position: relative; flex: none; width: 7rem; height: 7rem; }
  .pro-strength__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .pro-strength__track { fill: none; stroke: var(--meter-track); stroke-width: 9; }
  .pro-strength__arc { fill: none; stroke: var(--brand-strong); stroke-width: 9; stroke-linecap: round; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .pro-strength__arc { animation: pro-ring-in var(--dur-epic) var(--ease-out) both; }
  }
  @keyframes pro-ring-in { from { stroke-dashoffset: 263.89; } }
  .pro-strength__value { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-2xl); font-variant-numeric: var(--numerals); color: var(--text-1); }
  .pro-strength__pct { font-size: 0.55em; color: var(--text-3); }
  .pro-strength__body { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-strength__body > p { margin: 0; }
  .pro-checklist { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
  .pro-checklist__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
  .pro-checklist__item a { color: var(--text-link); font-weight: var(--fw-semibold); text-decoration: none; }
  .pro-checklist__tick { display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--surface-3); color: var(--text-3); }
  .pro-checklist__tick .c-icon { width: 0.75rem; height: 0.75rem; }
  .pro-checklist__item.is-done { color: var(--text-3); }
  .pro-checklist__item.is-done .pro-checklist__tick { background: var(--brand); color: var(--text-on-brand); }

  .pro-shortcuts { display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-shortcuts__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
  .pro-shortcut {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 5.5rem;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--border-1); color: var(--text-1); text-decoration: none;
    box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
  }
  .pro-shortcut:focus-visible { box-shadow: var(--focus-ring); }
  @media (hover: hover) { .pro-shortcut:hover { transform: translateY(calc(-2px * var(--motion-ok))); border-color: var(--border-2); } }
  .pro-shortcut__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
  .pro-shortcut__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .pro-shortcut__label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.3; }

  /* ================================================================ /me/edit + /settings: one card per section */
  .pro-edit, .pro-settings { display: flex; flex-direction: column; gap: var(--space-5); }
  .pro-edit__toc {
    position: sticky; top: var(--topbar-h); z-index: var(--z-raised);
    display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--surface-base) 88%, transparent);
    backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  }
  .pro-edit__toc::-webkit-scrollbar { display: none; }
  .pro-edit__toc-link { flex: none; text-decoration: none; min-height: 2.25rem; background: var(--surface-1); border: 1px solid var(--border-1); color: var(--text-2); }
  .pro-edit__toc-link:hover { color: var(--text-1); border-color: var(--border-2); }
  .pro-edit__card { gap: var(--space-4); scroll-margin-top: calc(var(--topbar-h) + 3.5rem); }
  .pro-edit__card:target { box-shadow: var(--shadow-2), 0 0 0 2px var(--brand-strong); }
  .pro-edit__card--private { border-color: color-mix(in srgb, var(--love-strong) 30%, var(--border-1)); background: linear-gradient(170deg, var(--love-soft), transparent 45%), var(--surface-1); }
  .pro-edit__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .pro-edit__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
  .pro-edit__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .pro-edit__title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: var(--lh-tight); }
  .pro-edit__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .pro-edit__legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); padding: 0; font: var(--fw-semibold) var(--fs-sm)/1.35 var(--font-text); color: var(--text-2); }
  .pro-edit__legend + * { clear: both; }
  .pro-edit__legend .c-icon { width: 1rem; height: 1rem; }
  .pro-edit__field { display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-edit__field > .pro-edit__legend { float: none; }
  .pro-edit__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
  .pro-edit__actions.is-autosaved { display: none; }
  .pro-goals { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .pro-goal {
    position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 2.5rem; padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-1); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium);
    border: 1px solid transparent; transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .pro-goal[hidden] { display: none; }
  .pro-goal__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pro-goal:has(:checked) { background: var(--love-soft); border-color: var(--love-strong); color: var(--text-love); }
  .pro-goal:has(:focus-visible) { box-shadow: var(--focus-ring); }
  .pro-prompt-edit { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
  .pro-prompt-edit > .c-field__error:empty { display: none; }
  .pro-fact-edit { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-3); border-top: 1px solid var(--border-subtle); }
  .pro-fact-edit:first-of-type { border-top: 0; }
  .pro-fact-edit > .pro-private { position: absolute; top: var(--space-3); right: 0; }
  .pro-moods { display: grid; gap: var(--space-2); }
  @media (min-width: 30rem) { .pro-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .pro-settings__facts { margin: 0; display: grid; gap: var(--space-2); }
  .pro-settings__facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
  .pro-settings__facts dt { color: var(--text-3); font-size: var(--fs-sm); }
  .pro-settings__facts dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
  .pro-settings__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .pro-settings__inline { display: inline-flex; }
  .pro-settings__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .pro-settings__sensitive { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
  .pro-settings__block { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .pro-settings__block > * { margin: 0; }
  .pro-settings__note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--warn); }
  .pro-settings__note .c-icon { width: 1rem; height: 1rem; }
  .pro-settings__link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-min); padding-block: var(--space-2); color: var(--text-1); text-decoration: none; }
  .pro-settings__link > span:first-of-type { flex: 1; min-width: 0; }
  .pro-settings__link .c-icon { width: 1.125rem; height: 1.125rem; color: var(--text-3); flex: none; }
  .pro-settings__count { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding-inline: 0.5rem; border-radius: var(--radius-full); background: var(--surface-3); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); font-variant-numeric: var(--numerals); color: var(--text-2); }
  .pro-settings__more { display: flex; flex-direction: column; gap: var(--space-2); padding-inline: var(--space-1); }
  .pro-settings__more ul { list-style: none; margin: 0; padding: 0; }
  .pro-settings__more li + li .pro-settings__link { border-top: 1px solid var(--border-subtle); }
  .pro-travel { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
  .pro-travel > * { margin: 0; }
  .pro-travel h3 { float: none; }
  .pro-travel__active { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--text-1); }
  .pro-travel__active .c-icon { width: 1rem; height: 1rem; color: var(--love-strong); }

  /* ================================================================ simple pages (photos, video, verify, blocked) */
  .pro-page { width: 100%; }
  .pro-page__head { display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-page__head > * { margin: 0; }
  .pro-page__title { font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: -0.02em; }
  .pro-page__lead { font-size: var(--fs-md); color: var(--text-2); max-width: 44ch; }
  .pro-guidelines { gap: 0; }
  .pro-guidelines__summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit-min); cursor: pointer; list-style: none; font-weight: var(--fw-semibold); }
  .pro-guidelines__summary::-webkit-details-marker { display: none; }
  .pro-guidelines__summary > span { flex: 1; }
  .pro-guidelines__summary .c-icon { width: 1.125rem; height: 1.125rem; color: var(--brand-strong); }
  .pro-guidelines[open] .pro-guidelines__summary .c-icon:last-child { transform: rotate(180deg); }
  .pro-guidelines__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .pro-guidelines__list li { display: flex; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
  .pro-guidelines__list .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 2px; color: var(--brand-strong); }

  .pro-verify { gap: var(--space-4); }
  .pro-verify__pose { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--dim-romance-bg), transparent 70%), var(--surface-sunken); }
  .pro-verify__pose > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pro-verify__pose p { margin: 0; }
  .pro-verify__emoji { display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--surface-1); font-size: 2.5rem; box-shadow: var(--shadow-2); }
  .pro-verify__pose-text { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; color: var(--text-1); }
  .pro-verify__stage { position: relative; overflow: hidden; width: 100%; max-width: 20rem; margin-inline: auto; aspect-ratio: 3 / 4; border-radius: var(--radius-xl); background: #0B110E; }
  .pro-verify__stage[hidden] { display: none; }
  .pro-verify__video, .pro-verify__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
  .pro-verify__video[hidden], .pro-verify__shot[hidden] { display: none; }
  .pro-verify__file { padding: var(--space-3); min-height: auto; }
  .pro-verify__file::file-selector-button { margin-right: var(--space-3); padding: 0.5rem 1rem; border: 0; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-strong); font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-text); cursor: pointer; }
  .pro-verify__actions { gap: var(--space-2); }
  .pro-verify [data-verify-file-field][hidden] { display: none; }

  .pro-blocked { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); gap: 0; }
  .pro-blocked__row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
  .pro-blocked__row:last-child { border-bottom: 0; }
  .pro-blocked__who { flex: 1; min-width: 0; }
  .pro-blocked__who p { margin: 0; }
  .pro-blocked__name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

  /* ================================================================ forced colours */
  @media (forced-colors: active) {
    .pro-cover__frame::after { display: none; }
    .pro-cover__caption { background: Canvas; color: CanvasText; }
    .pro-dim:has(:checked), .pro-flag:has(:checked), .pro-goal:has(:checked), .pro-metro__option:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* modules/promo.css */
/* My420Love · promo.css — discount codes (component promo-field: "Have a discount code?" on every payment form, "Have a
   code?" on /me), the join-page code note, and the pricing page's Extras section (the Bio Glow-Up, free with FREELOVE).
   Dawn 2026-10-01. <details>-based, so it all works without JavaScript. Semantic tokens only. */
@layer modules {
  /* ---------------------------------------------------------------- the field */
  .c-promo { display: block; min-width: 0; }
  .mk-plan .c-promo { margin-top: calc(-1 * var(--space-1)); }
  .c-promo__details { border-radius: var(--radius-md); }
  .c-promo__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: var(--hit-min); padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    list-style: none; cursor: pointer;
    font: var(--fw-medium) var(--fs-sm)/1.2 var(--font-text); color: var(--text-2);
  }
  .c-promo__toggle::-webkit-details-marker { display: none; }
  .c-promo__toggle .c-icon { width: 1rem; height: 1rem; color: var(--brand-strong); flex: none; }
  .c-promo__toggle .c-promo__chev { color: var(--text-3); transition: transform var(--dur-fast) var(--ease-standard); }
  .c-promo__details[open] > .c-promo__toggle .c-promo__chev { transform: rotate(180deg); }
  @media (hover: hover) { .c-promo__toggle:hover { color: var(--text-1); } }
  .c-promo__body { display: grid; gap: var(--space-2); padding: var(--space-1) 0 var(--space-1); }
  .c-promo--open .c-promo__body { padding: 0; }
  .c-promo__label { font: var(--fw-semibold) var(--fs-xs)/1.3 var(--font-text); color: var(--text-2); }
  .c-promo__row { display: flex; gap: var(--space-2); align-items: stretch; min-width: 0; }
  .c-promo__input {
    flex: 1 1 auto; min-width: 0; min-height: 2.75rem;
    font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .c-promo__row .c-btn { flex: none; align-self: stretch; min-height: 2.75rem; }
  .c-promo__msg {
    display: flex; align-items: flex-start; gap: 0.375rem; margin: 0; max-width: none;
    font: var(--fw-medium) var(--fs-sm)/1.45 var(--font-text); color: var(--text-2);
  }
  .c-promo__msg:empty { display: none; }
  .c-promo__msg .c-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; }
  .c-promo__msg.is-good { color: var(--text-1); }
  .c-promo__msg.is-good .c-icon { color: var(--success); }
  .c-promo__msg.is-bad .c-icon { color: var(--warn); }

  /* ---------------------------------------------------------------- price after a code (plan cards) */
  .mk-plan__was {
    align-self: center;
    font: var(--fw-medium) var(--fs-xl)/1 var(--font-display);
    color: var(--text-3);
    text-decoration-thickness: 1.5px;
  }

  /* ---------------------------------------------------------------- join page note + /me card */
  .c-promo-note {
    display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; max-width: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--brand-soft); color: var(--text-1);
    font: var(--fw-medium) var(--fs-sm)/1.45 var(--font-text);
  }
  .c-promo-note .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--love-strong); }
  .c-promo-card { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
  .c-promo-card__owned { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); color: var(--text-1); }
  .c-promo-card__owned .c-icon { width: 1.125rem; height: 1.125rem; color: var(--success); }

  /* ---------------------------------------------------------------- pricing: Extras */
  .mk-extras { scroll-margin-top: var(--space-8); }
  .mk-extras__head { align-items: center; text-align: center; margin-bottom: clamp(var(--space-6), 4vw, var(--space-10)); }
  .mk-extra {
    display: grid; gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--surface-1);
    box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--dim-lifestyle) 30%, transparent);
    outline: 1px solid transparent; outline-offset: -1px;
  }
  @media (min-width: 48rem) {
    .mk-extra { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; padding: var(--space-10); }
  }
  .mk-extra__main { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
  .mk-extra__soon {
    display: inline-flex; align-items: center; gap: 0.375rem; margin: 0;
    height: 1.625rem; padding: 0 0.75rem;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dim-lifestyle) 55%, transparent);
    font: var(--fw-semibold) var(--fs-micro)/1 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--dim-lifestyle-fg);
  }
  .mk-extra__soon .c-icon { width: 0.875rem; height: 0.875rem; }
  .mk-extra__name {
    margin: 0;
    font-family: var(--font-display); font-style: italic; font-weight: var(--fw-display); font-variation-settings: var(--fvs-display);
    font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: var(--tracking-display);
  }
  .mk-extra__price { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; }
  .mk-extra__amount { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1; font-variant-numeric: var(--numerals); }
  .mk-extra__was { font: var(--fw-medium) var(--fs-xl)/1 var(--font-display); color: var(--text-3); text-decoration-thickness: 1.5px; }
  .mk-extra__pitch { margin: 0; color: var(--text-2); }
  .mk-extra__notes { display: grid; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; }
  .mk-extra__notes li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-1); max-width: none; }
  .mk-extra__notes .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--brand-strong); }
  .mk-extra__code { font-weight: var(--fw-semibold); }
  .mk-extra__code .c-icon { color: var(--love-strong); }
  .mk-extra__side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
  @media (min-width: 48rem) { .mk-extra__side { padding-top: var(--space-10); } }
  .mk-extra__owned {
    display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; max-width: none;
    padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--success-bg); color: var(--text-1); font-weight: var(--fw-semibold);
  }
  .mk-extra__owned .c-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--success); }
}

/* modules/safety.css */
/* My420Love · modules/safety.css — the safety module (BLUEPRINT §3 M10): report sheet and page, block, the onboarding
   safety step, appeals, legal intake pages, the recipient money banner, the first-message tip, and the staff queues
   (reports, media approvals, held content, appeals, legal). Built on the UI kit's tokens and components; only layout
   and module-specific pieces live here. Everything is inside @layer modules. Class prefix: saf-. */
@layer modules {

  /* ================================================================ shared bits */
  .saf-note {
    max-width: none;
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2);
    font-size: var(--fs-sm); line-height: var(--lh-snug);
  }
  .saf-note > .c-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: var(--brand-strong); }
  .saf-note a { color: var(--text-link); font-weight: var(--fw-semibold); }
  .saf-note--emergency { background: var(--danger-bg); color: var(--text-1); }
  .saf-note--emergency > .c-icon { color: var(--danger); }
  .saf-link { color: var(--text-link); font-weight: var(--fw-semibold); }
  .saf-strong { display: block; color: var(--text-1); font-weight: var(--fw-semibold); }
  .saf-sub { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
  span.saf-sub { display: inline; }
  td > .saf-sub { display: block; margin-top: 0.125rem; }
  .saf-mono { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
  .saf-quote {
    margin: 0; padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--border-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-sunken); color: var(--text-1); overflow-wrap: anywhere;
  }
  .saf-quote p { margin: 0; }
  .saf-pre p { white-space: pre-wrap; }
  .saf-card-title { margin: 0; font-family: var(--font-text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--space-2); }
  .saf-card-title .saf-sub { font-weight: var(--fw-medium); }
  .saf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
  .saf-list a { color: var(--text-link); }

  /* ================================================================ report form (page + sheet) */
  .saf-report { max-width: 40rem; margin-inline: auto; }
  .saf-report__title { font-size: var(--fs-3xl); margin: 0; }
  .saf-reasons, .saf-choice { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .saf-reasons__legend { padding: 0; margin-bottom: var(--space-3); font-family: var(--font-display); font-variation-settings: var(--fvs-display-text); font-size: var(--fs-xl); color: var(--text-1); }
  .saf-reasons__list { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .saf-reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .saf-reason {
    position: relative; display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--hit-min, 44px); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1);
    color: var(--text-1); font-size: var(--fs-sm); line-height: var(--lh-snug); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  @media (hover: hover) { .saf-reason:hover { background: var(--surface-3); } }
  .saf-reason__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .saf-reason__dot { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--border-strong); background: var(--surface-sunken); transition: box-shadow var(--dur-fast) var(--ease-standard); }
  .saf-reason__input:checked + .saf-reason__dot { box-shadow: inset 0 0 0 6px var(--brand); background: var(--text-on-brand); }
  .saf-reason:has(.saf-reason__input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .saf-reason__input:focus-visible + .saf-reason__dot { box-shadow: inset 0 0 0 2px var(--border-strong), var(--focus-ring); }
  .saf-reason__label { flex: 1; }
  .saf-report-form .c-sheet__actions { margin-top: var(--space-2); }
  .saf-done, .saf-sheet-done { max-width: 36rem; margin-inline: auto; text-align: center; align-items: center; }
  .saf-done__mark { display: grid; place-items: center; width: 4rem; height: 4rem; margin-inline: auto; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
  .saf-done__mark .c-icon { width: 2rem; height: 2rem; }
  .saf-done__title { margin: 0; font-size: var(--fs-3xl); }
  .saf-sheet-done__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-1); }
  .saf-sheet-done .c-sheet__actions { width: 100%; }

  /* ================================================================ report / block triggers */
  .saf-block-form { display: inline-flex; margin: 0; }
  .saf-menu-item {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--hit-min, 44px);
    padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--text-1); font: var(--fw-medium) var(--fs-md)/1.2 var(--font-text); text-decoration: none; text-align: left; cursor: pointer;
  }
  .saf-menu-item .c-icon { width: 1.25rem; height: 1.25rem; }
  .saf-menu-item--danger { color: var(--danger); }
  @media (hover: hover) { .saf-menu-item:hover { background: var(--surface-3); } }
  .saf-menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* ================================================================ money banner + first-message tip */
  .saf-money {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--warn-bg); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent);
    font-size: var(--fs-sm); line-height: var(--lh-snug);
  }
  .saf-money__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
  .saf-money__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .saf-money__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .saf-money__body p { margin: 0; }
  .saf-money__title { font-weight: var(--fw-semibold); }
  .saf-money__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .saf-money__links a { color: var(--text-link); font-weight: var(--fw-semibold); }
  .saf-money__links .c-btn { min-height: auto; padding: 0; }
  .saf-tipcard {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1), var(--shadow-1); color: var(--text-2);
    font-size: var(--fs-sm);
  }
  .saf-tipcard p { margin: 0; }
  .saf-tipcard__head { display: flex; align-items: center; gap: var(--space-2); }
  .saf-tipcard__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
  .saf-tipcard__icon .c-icon { width: 1rem; height: 1rem; }
  .saf-tipcard__title { flex: 1; color: var(--text-1); font-weight: var(--fw-semibold); }
  .saf-tipcard__kind { color: var(--text-1); }
  .saf-tipcard .c-legal-disclosure { margin: 0; }

  /* ================================================================ onboarding safety step */
  .saf-onb__title { margin: 0; font-size: var(--fs-3xl); }
  .saf-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .saf-tip { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-1); line-height: var(--lh-snug); }
  .saf-tip__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
  .saf-tip__icon .c-icon { width: 1.125rem; height: 1.125rem; }
  .saf-tip > span:last-child { padding-top: 0.375rem; }

  /* ================================================================ appeal page */
  .saf-appeal__decision, .saf-appeal__status { display: flex; flex-direction: column; gap: var(--space-2); }
  .saf-appeal__decision p, .saf-appeal__status p { margin: 0; }
  .saf-appeal__kind { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); }

  /* ================================================================ legal intake pages */
  .saf-legal__head { padding-block: var(--space-10) var(--space-6); background-image: var(--surface-ambient); background-repeat: no-repeat; }
  .saf-legal__title { margin: 0; font-size: var(--fs-4xl); line-height: 1.05; }
  .saf-legal__updated { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--text-3); }
  .saf-legal__updated .c-icon { width: 1rem; height: 1rem; }
  .saf-draft {
    display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
    margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    background: var(--warn-bg); color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  }
  .saf-draft .c-icon { width: 1rem; height: 1rem; color: var(--warn); }
  .saf-legal__sent { margin-bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .saf-legal__sent p { margin: 0; }
  .saf-legal__sent-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--text-1); font-size: var(--fs-lg); }
  .saf-legal__sent-title .c-icon { color: var(--brand-strong); }
  .saf-legal__ref { font-family: var(--font-mono); color: var(--text-1); }
  .saf-legal__grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-20); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 64rem) {
    .saf-legal__grid { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; gap: var(--space-10); }
    .saf-legal__form { position: sticky; top: calc(var(--topbar-h, 4rem) + var(--space-4)); max-height: calc(100dvh - var(--space-12)); overflow-y: auto; }
  }
  .saf-legal__doc { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .saf-legal__form-title { margin: 0; font-size: var(--fs-xl); }
  .saf-legal__prose h2 { scroll-margin-top: var(--space-20); }
  .saf-legal__prose a { color: var(--text-link); }
  .saf-legal__plain {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
    background: var(--surface-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, var(--border-1));
    color: var(--text-1);
  }
  .saf-legal__plain > * { margin: 0; }
  .saf-legal__plain p:first-child strong:only-child { font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand-strong); }
  .saf-legal__todo { padding: 0 0.25em; border-radius: var(--radius-xs); background: var(--warn-bg); color: var(--text-1); font-weight: var(--fw-semibold); }
  .saf-toc details { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); }
  .saf-toc summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-1); }
  .saf-toc ol { margin: var(--space-3) 0 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
  .saf-toc a { color: var(--text-link); }
  .saf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  /* ================================================================ staff: shared */
  .saf-admin-stack { display: flex; flex-direction: column; gap: var(--space-6); }
  .saf-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
  .saf-tile-link { color: inherit; text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease-standard); }
  @media (hover: hover) { .saf-tile-link:hover { box-shadow: inset 0 0 0 1px var(--border-strong); } }
  .saf-tile-link.is-active { box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
  .saf-tile--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  .saf-tile--danger .c-stat-tile__value { color: var(--danger); }
  .saf-table td { vertical-align: middle; }
  .saf-table tbody td { height: auto; padding-block: var(--space-2); }
  .saf-row--overdue { background: color-mix(in srgb, var(--danger) 8%, transparent); }
  .saf-sla { display: inline-flex; white-space: nowrap; }
  .saf-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
  .saf-banner > .c-icon { flex: none; width: 1.5rem; height: 1.5rem; }
  .saf-banner--danger { background: var(--danger-bg); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
  .saf-banner--danger > .c-icon { color: var(--danger); }
  .saf-cybertip { align-self: flex-start; margin-top: var(--space-2); }
  .saf-detail { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 64rem) { .saf-detail { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
  .saf-dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
  .saf-dl > div { display: grid; grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr); gap: var(--space-3); }
  .saf-dl dt { color: var(--text-3); }
  .saf-dl dd { margin: 0; color: var(--text-1); overflow-wrap: anywhere; }
  .saf-member-name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-1); }
  .saf-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .saf-thumb { position: relative; display: block; width: 4.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
  .saf-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .saf-thumb__tag { position: absolute; inset: auto 0 0 0; padding: 0.125rem 0.25rem; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.6875rem; text-align: center; }
  .saf-thread { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); max-height: 32rem; overflow-y: auto; }
  .saf-bubble { display: flex; flex-direction: column; gap: 0.125rem; max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-sm); }
  .saf-bubble--reporter { align-self: flex-end; background: var(--brand-soft); color: var(--text-1); }
  .saf-bubble--subject { align-self: flex-start; background: var(--surface-3); color: var(--text-1); }
  .saf-bubble__who { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-3); }
  .saf-bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; }
  .saf-bubble__at { font-size: var(--fs-xs); color: var(--text-3); align-self: flex-end; }
  .saf-danger-zone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
  .saf-danger-zone .saf-card-title .c-icon { color: var(--danger); }
  [data-for-outcome][hidden] { display: none; }
  .saf-closed summary { cursor: pointer; color: var(--text-2); font-weight: var(--fw-semibold); }
  .saf-closed .saf-list { margin-top: var(--space-3); }
  .saf-legal-card--overdue { box-shadow: inset 0 0 0 1.5px var(--danger); }
  .saf-legal-card--soon { box-shadow: inset 0 0 0 1.5px var(--warn); }
  .saf-legal-card--emergency { background: linear-gradient(180deg, var(--danger-bg), transparent 55%), var(--surface-1); }
  .saf-held { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .saf-held__item { max-width: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .saf-held__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .saf-held__head .saf-strong { display: inline; }
  .saf-held form { margin: 0; }
  .saf-appeal-card blockquote { max-width: 60rem; }

  /* user-actions (rendered on the admin member page) */
  .saf-user-actions { gap: var(--space-3); }
  .saf-ua { border-radius: var(--radius-md); background: var(--surface-2); }
  .saf-ua > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4); cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-1); list-style: none; }
  .saf-ua > summary::-webkit-details-marker { display: none; }
  .saf-ua > summary .c-icon { width: 1.125rem; height: 1.125rem; color: var(--text-3); }
  .saf-ua[open] > summary { border-bottom: 1px solid var(--border-subtle); }
  .saf-ua > form { padding: var(--space-4); }
  .saf-ua--danger > summary, .saf-ua--danger > summary .c-icon { color: var(--danger); }

  /* ================================================================ staff: media approval queue */
  .saf-mq { display: flex; flex-direction: column; gap: var(--space-5); }
  .saf-mq__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .saf-mq__oldest { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
  .saf-mq__oldest .c-icon { width: 1rem; height: 1rem; }
  .saf-mq__oldest.is-late { color: var(--warn); font-weight: var(--fw-semibold); }
  .saf-mq-total { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: var(--numerals); }
  .saf-mq__legend { font-size: var(--fs-sm); color: var(--text-2); }
  .saf-mq__legend summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-2); width: max-content; }
  .saf-mq__legend ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .saf-mq__legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
  .saf-mq__grid { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
  .saf-mq__cell { display: flex; min-width: 0; max-width: none; }
  .saf-mq-card {
    position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
    border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1), var(--shadow-1);
    overflow: hidden; outline: none;
    transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .saf-mq-card:focus-visible, .saf-mq-card.is-current { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--focus-color, var(--brand-strong)), var(--shadow-3); }
  .saf-mq-card.is-busy { opacity: 0.55; pointer-events: none; }
  .saf-mq-card.is-leaving { opacity: 0; transform: scale(calc(1 - 0.04 * var(--motion-ok, 1))); }
  .saf-mq-card.is-approved { box-shadow: inset 0 0 0 2px var(--success); }
  .saf-mq-card.is-rejected { box-shadow: inset 0 0 0 2px var(--danger); }
  .saf-mq-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-3); }
  .saf-mq-card__media img, .saf-mq-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .saf-mq-card__media img { cursor: zoom-in; }
  .saf-mq-card__tags { position: absolute; inset: var(--space-2) var(--space-2) auto var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); pointer-events: none; }
  .saf-tag { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0 var(--space-2); border-radius: var(--radius-full); background: rgba(12, 17, 14, 0.78); color: #fff; font: var(--fw-semibold) var(--fs-xs)/1 var(--font-text); }
  .saf-tag--primary { background: var(--brand-fill); color: var(--text-on-brand); }
  .saf-mq-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; font-size: var(--fs-sm); }
  .saf-mq-card__body p { margin: 0; }
  .saf-mq-card__who .saf-strong { display: inline; }
  .saf-mq-card__wait { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-3); }
  .saf-mq-card__wait .c-icon { width: 0.875rem; height: 0.875rem; }
  .saf-mq-card__wait.is-late { color: var(--warn); font-weight: var(--fw-semibold); }
  .saf-mq-card__transcript { max-height: 4.5rem; overflow-y: auto; color: var(--text-2); font-style: italic; }
  .saf-mq-card__others { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--space-1); overflow-x: auto; }
  .saf-mq-card__others li { position: relative; flex: none; width: 2.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-3); }
  .saf-mq-card__others img { width: 100%; height: 100%; object-fit: cover; }
  .saf-mq-card__pending { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--warn); }
  .saf-mq-card__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); margin-top: auto; }
  .saf-mq-card__actions form { margin: 0; min-width: 0; }
  .saf-mq-reject { display: flex; flex-direction: column; gap: var(--space-2); }
  .saf-mq-reject__pick .c-input { min-height: 2.5rem; height: 2.5rem; font-size: var(--fs-sm); }
  .saf-mq-btn { gap: var(--space-2); }
  .saf-mq-btn .c-kbd { margin-inline-start: auto; background: rgba(255, 255, 255, 0.16); box-shadow: none; color: inherit; }
  .saf-mq-reasons { grid-column: 1 / -1; display: grid; gap: var(--space-1); grid-template-columns: minmax(0, 1fr); }
  .saf-mq-reason {
    display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3);
    border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-1);
    font: var(--fw-medium) var(--fs-sm)/1.2 var(--font-text); text-align: left; cursor: pointer;
  }
  @media (hover: hover) { .saf-mq-reason:hover { background: var(--danger-bg); } }
  .saf-mq-reason:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .saf-mq-card.is-choosing [data-mq-approve], .saf-mq-card.is-choosing [data-mq-select], .saf-mq-card.is-choosing [data-mq-reject-button] { display: none; }
  .saf-mq__recent { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
  .saf-recent { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
  .saf-recent__item { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-1); font-size: var(--fs-sm); }
  .saf-recent__item img { border-radius: var(--radius-xs); object-fit: cover; }
  .saf-recent__video { display: grid; place-items: center; width: 2.5rem; height: 3.125rem; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--text-3); }
  .saf-recent__text { flex: 1 1 12rem; min-width: 0; color: var(--text-2); }
  .saf-recent__text .saf-strong { display: inline; }
  .saf-recent__form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
  .saf-recent__select { min-height: 2.25rem; height: 2.25rem; width: auto; font-size: var(--fs-sm); padding-inline: var(--space-3); }
  .saf-viewer { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: min(92vw, 60rem); max-height: 92dvh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface-base); overflow: hidden; }
  .saf-viewer::backdrop { background: var(--scrim); backdrop-filter: var(--blur-scrim); }
  .saf-viewer img { display: block; max-width: 100%; max-height: 92dvh; object-fit: contain; }
  .saf-viewer form { position: absolute; top: var(--space-2); right: var(--space-2); margin: 0; }
  /* Touch screens have no keyboard: the legend and the key hints go; the buttons stay. */
  @media (hover: none) and (pointer: coarse) {
    .saf-mq__legend, .saf-mq-btn .c-kbd, .saf-mq-reason .c-kbd, [data-mq-cancel] .c-kbd { display: none; }
  }
}