/*
 * ════════════════════════════════════════════════════════════
 * SECRET.BROKER — VEIL PLUM DESIGN SYSTEM
 * ════════════════════════════════════════════════════════════
 *
 * Complete, implementable style guide for the Veil · Plum theme.
 * Plain CSS custom properties — Vue 3 + Vite, no Tailwind.
 *
 * Font:    Sora (300 light, 400 regular, 500 medium, 600 semibold)
 * Palette: Plum — purple-shifted neutrals, secretive, restrained
 * Shape:   Rounded (6–16px radii)
 * Feel:    Tool-first, quiet, the character is in the restraint
 *
 * Both themes are fully specified — light is NOT an inversion
 * of dark. Each has its own palette logic:
 *   • Dark uses glows + border-color for depth
 *   • Light uses box-shadows + plum-tinted rgba
 *   • Dark accent is light plum (#b99fc4)
 *   • Light accent is dark plum (#7b5290)
 *   • All light-theme neutrals stay in the plum family (no pure gray)
 *   • Light background is dusty lavender, not white
 *
 * ════════════════════════════════════════════════════════════
 *
 * TABLE OF CONTENTS
 * ─────────────────
 *  1.  Font import
 *  2.  Dark theme tokens (default)
 *  3.  Light theme tokens
 *  4.  Global reset & base
 *  5.  Accessibility & reduced motion
 *  6.  Z-index scale
 *  7.  Layout system
 *  8.  Ambient depth layer
 *  9.  Typography utilities
 * 10.  Header & wordmark
 * 11.  Hero section
 * 12.  Backdrop (broker silhouette behind hero)
 * 13.  Tool card
 * 14.  Card sigil (maker's mark)
 * 15.  Textarea
 * 16.  Tool bar, option buttons & CTA
 * 17.  Meta strip & status dots
 * 18.  Veil mechanic (scroll reveal)
 * 19.  Sections & dividers
 * 20.  Context bar ("Why not just use Slack")
 * 21.  Step cards ("How it works")
 * 22.  FAQ accordion
 * 23.  Footer
 * 24.  Keyframe animations
 * 25.  Responsive breakpoints
 * 26.  Light theme — component overrides
 *
 * ════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════
   1. FONT IMPORT
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&display=swap');


/* ═══════════════════════════════════════════════════════════
   2. DARK THEME TOKENS (default)
   ═══════════════════════════════════════════════════════════

   ┌──────────────────┬──────────┬──────────────────────────────────┐
   │ Role             │ Hex      │ Description                      │
   ├──────────────────┼──────────┼──────────────────────────────────┤
   │ --bg             │ #100e14  │ Page background                  │
   │ --surface        │ #1c1722  │ Cards, panels                    │
   │ --ink            │ #ada5b4  │ Body text                        │
   │ --bright         │ #f2ecf5  │ Headings, strong text            │
   │ --dim            │ #5e5568  │ Placeholders, muted text         │
   │ --accent         │ #b99fc4  │ Links, active state, CTA bg      │
   │ --accent-dim     │ #7a6584  │ Eyebrow text, secondary accent   │
   │ --accent-hover   │ #c8aad0  │ Accent hover                     │
   │ --figure         │ #4a3654  │ Broker SVG fill (near-black)     │
   │ --figure-glow    │ #4a2d5c  │ Broker ambient glow              │
   │ --success        │ #72b872  │ Status dots                      │
   │ --line           │ #ffffff12│ Borders, dividers                │
   │ --shadow         │ #05030a  │ Deep shadows                     │
   └──────────────────┴──────────┴──────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Font ── */
  --font: 'Sora', system-ui, -apple-system, sans-serif;

  /* ── Core palette ── */
  --bg:          #100e14;
  --surface:     #1c1722;
  --ink:         #ada5b4;
  --bright:      #f2ecf5;
  --dim:         #5e5568;

  /* ── Borders & lines ── */
  --line:        rgba(255, 255, 255, 0.07);
  --line-hover:  rgba(255, 255, 255, 0.13);

  /* ── Accent ── */
  --accent:      #b99fc4;
  --accent-dim:  #7a6584;
  --accent-hover:#c8aad0;

  /* ── Broker silhouette ── */
  --figure:      #4a3654;
  --figure-glow: #4a2d5c;

  /* ── Depth & shadow ── */
  --shadow:      #05030a;
  --glow:        #261a30;
  --edge:        #08060c;

  /* ── Status ── */
  --success:     #72b872;
  --success-glow:rgba(114, 184, 114, 0.27);
  --error:       #d45d5d;
  --warning:     #c4a44e;

  /* ── Ambient depth layers ── */
  --ambient:
    radial-gradient(60rem 44rem at 50% 18%, #2a1838 0%, transparent 55%),
    radial-gradient(40rem 40rem at 80% 70%, #1a1028 0%, transparent 50%),
    radial-gradient(35rem 35rem at 15% 85%, #16101e 0%, transparent 50%);

  /* ── Tool card specifics ── */
  --card-bg:           linear-gradient(180deg, var(--surface), #130f18);
  --card-border:       rgba(255, 255, 255, 0.08);
  --card-shadow:       0 40px 80px -30px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --card-focus-border: rgba(185, 159, 196, 0.16);
  --card-focus-shadow: 0 40px 80px -30px var(--shadow), 0 0 0 1px rgba(185, 159, 196, 0.09), 0 0 100px -20px rgba(185, 159, 196, 0.05);
  --card-accent-line:  linear-gradient(90deg, transparent, var(--accent), transparent);
  --card-glow:         radial-gradient(circle at 50% 0%,
                         rgba(185,159,196,0.10) 0%,
                         rgba(185,159,196,0.05) 8%,
                         rgba(185,159,196,0.02) 16%,
                         rgba(185,159,196,0) 28%);

  /* ── Option buttons ── */
  --opt-bg:            rgba(255, 255, 255, 0.03);
  --opt-border:        rgba(255, 255, 255, 0.055);
  --opt-hover-bg:      rgba(255, 255, 255, 0.07);
  --opt-active-bg:     rgba(185, 159, 196, 0.09);
  --opt-active-border: rgba(185, 159, 196, 0.31);

  /* ── CTA button (resolved — var() chains don't recompute on dynamic class toggle) ── */
  --cta-bg:      #a065b5;
  --cta-color:   #ffffff;
  --cta-hover:   #8b52b0;

  /* ── Step card accent bar ── */
  --step-bar:    linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim));
  --step-bar-opacity: 0.5;

  /* ── Selection ── */
  --selection:   rgba(185, 159, 196, 0.3);

  /* ── Placeholder focus shift ── */
  --placeholder-focus: #756a7e;

  /* ── Sigil ── */
  --sigil-ring-dashed: rgba(185, 159, 196, 0.35);
  --sigil-ring-solid:  rgba(185, 159, 196, 0.18);
  --sigil-text:        rgba(185, 159, 196, 0.55);

  /* ── Opacity tuning (theme-specific) ── */
  --backdrop-opacity:    0.055;
  --header-broker-opacity: 0.85;
  --meta-strip-opacity:  0.6;
  --footer-opacity:      0.65;
  --chevron-opacity:     0.6;
  --veil-initial-opacity: 0.0;
  --veil-initial-blur:   6px;
  --pulse-low:           0.5;
  --nav-link-opacity:    0.6;
  --status-label-opacity: 0.5;

  /* ── Dot glow ── */
  --dot-green-shadow:  0 0 6px rgba(114, 184, 114, 0.27);
  --dot-pulse-shadow:  0 0 6px rgba(185, 159, 196, 0.27);

  /* ── Spacing ── */
  --space-xs:   0.4rem;
  --space-sm:   0.8rem;
  --space-md:   1.5rem;
  --space-lg:   3rem;
  --space-xl:   4.5rem;
  --space-2xl:  7rem;

  /* ── Layout widths ── */
  --max-w:      56rem;
  --max-w-wide: 72rem;

  /* ── Radii ── */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  14px;
  --r-2xl: 16px;

  /* ── Semantic overlays ── */
  --overlay:           color-mix(in srgb, var(--bg) 70%, transparent);
  --error-subtle:      color-mix(in srgb, var(--error) 10%, transparent);
  --success-subtle:    color-mix(in srgb, var(--success) 8%, transparent);
  --accent-glow:       color-mix(in srgb, var(--accent) 15%, transparent);

  /* ── Motion ── */
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
}


/* ═══════════════════════════════════════════════════════════
   3. LIGHT THEME TOKENS
   ═══════════════════════════════════════════════════════════
   Not an inversion. Own palette logic:
   - Shadows replace glows
   - Accent darkens for contrast on light bg
   - All neutrals stay in the plum family (no pure gray)
   - Background is dusty lavender, not white

   ┌──────────────────┬───────────────────────┬──────────────────────────────────┐
   │ Role             │ Value                 │ Description                      │
   ├──────────────────┼───────────────────────┼──────────────────────────────────┤
   │ --bg             │ #eee9f2               │ Dusty lavender background        │
   │ --surface        │ #f6f3f8               │ Cards — barely lighter than bg   │
   │ --ink            │ #4e4258               │ Body text — purple-gray          │
   │ --bright         │ #1c1428               │ Headings — deep purple-black     │
   │ --dim            │ #8e7e9a               │ Placeholders, muted text         │
   │ --accent         │ #7b5290               │ Darker plum for contrast         │
   │ --accent-dim     │ #9878aa               │ Softer accent                    │
   │ --accent-hover   │ #5c3f6c               │ Accent hover — darker still      │
   │ --figure         │ #c4aed0               │ Broker SVG — pale watermark      │
   │ --figure-glow    │ #d0b8de               │ Broker ambient glow              │
   │ --success        │ #4a8a4a               │ Deeper green for contrast        │
   │ --line           │ rgba(70,40,100,.08)   │ Plum-tinted borders              │
   │ --shadow         │ rgba(50,28,80,.1)     │ Plum-tinted shadows              │
   └──────────────────┴───────────────────────┴──────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */

.light-theme,
[data-theme="light"] {
  /* ── Core palette ── */
  --bg:          #eee9f2;
  --surface:     #f6f3f8;
  --ink:         #4e4258;
  --bright:      #1c1428;
  --dim:         #8e7e9a;

  /* ── Borders & lines ── */
  --line:        rgba(70, 40, 100, 0.08);
  --line-hover:  rgba(70, 40, 100, 0.14);

  /* ── Accent ── */
  --accent:      #7b5290;
  --accent-dim:  #9878aa;
  --accent-hover:#5c3f6c;

  /* ── Broker silhouette ── */
  --figure:      #c4aed0;
  --figure-glow: #d0b8de;

  /* ── Depth & shadow ── */
  --shadow:      rgba(50, 28, 80, 0.1);
  --glow:        #ddd0e8;
  --edge:        #d4c0e0;

  /* ── Status ── */
  --success:     #4a8a4a;
  --success-glow:rgba(74, 138, 74, 0.2);
  --error:       #c44040;
  --warning:     #a08020;

  /* ── Ambient depth layers ── */
  --ambient:
    radial-gradient(60rem 44rem at 50% 18%, #ddd0e8 0%, transparent 50%),
    radial-gradient(40rem 40rem at 80% 70%, #e4d8ec 0%, transparent 45%),
    radial-gradient(35rem 35rem at 15% 85%, #e6dcee 0%, transparent 45%);

  /* ── Tool card specifics ── */
  --card-bg:           var(--surface);
  --card-border:       rgba(100, 50, 140, 0.08);
  --card-shadow:       0 1px 3px rgba(80, 30, 120, 0.05), 0 8px 32px -8px rgba(80, 30, 120, 0.1), 0 24px 60px -20px rgba(80, 30, 120, 0.07);
  --card-focus-border: rgba(123, 82, 144, 0.22);
  --card-focus-shadow: 0 1px 3px rgba(80, 30, 120, 0.05), 0 8px 32px -8px rgba(80, 30, 120, 0.14), 0 24px 60px -20px rgba(123, 82, 144, 0.12);
  --card-accent-line:  linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  --card-glow:         none;

  /* ── Option buttons ── */
  --opt-bg:            rgba(100, 50, 140, 0.04);
  --opt-border:        rgba(100, 50, 140, 0.1);
  --opt-hover-bg:      rgba(100, 50, 140, 0.08);
  --opt-active-bg:     rgba(123, 82, 144, 0.12);
  --opt-active-border: rgba(123, 82, 144, 0.3);

  /* ── CTA button (resolved — matches dark block pattern) ── */
  --cta-bg:      #6d3a8a;
  --cta-color:   #ffffff;
  --cta-hover:   #5a2d74;

  /* ── Step card accent bar ── */
  --step-bar:    linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim));
  --step-bar-opacity: 0.4;

  /* ── Selection ── */
  --selection:   rgba(123, 82, 144, 0.2);

  /* ── Placeholder focus shift ── */
  --placeholder-focus: #8a7e94;

  /* ── Sigil ── */
  --sigil-ring-dashed: rgba(123, 82, 144, 0.30);
  --sigil-ring-solid:  rgba(123, 82, 144, 0.15);
  --sigil-text:        rgba(123, 82, 144, 0.55);

  /* ── Opacity tuning ── */
  --backdrop-opacity:    0.10;
  --header-broker-opacity: 0.75;
  --meta-strip-opacity:  0.5;
  --footer-opacity:      0.55;
  --chevron-opacity:     0.5;
  --veil-initial-opacity: 0.0;
  --veil-initial-blur:   5px;
  --pulse-low:           0.4;
  --nav-link-opacity:    0.5;
  --status-label-opacity: 0.45;

  /* ── Semantic overlays ── */
  --overlay:           color-mix(in srgb, var(--bg) 85%, transparent);

  /* ── Dot glow ── */
  --dot-green-shadow:  0 0 4px rgba(74, 138, 74, 0.2);
  --dot-pulse-shadow:  0 0 5px rgba(123, 82, 144, 0.35);
}


/* ═══════════════════════════════════════════════════════════
   4. GLOBAL RESET & BASE
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--selection);
}


/* ═══════════════════════════════════════════════════════════
   5. ACCESSIBILITY & REDUCED MOTION
   ═══════════════════════════════════════════════════════════
   - prefers-reduced-motion kills all animation and the
     veil blur/translate reveal
   - prefers-color-scheme can auto-select theme
   - :focus-visible for keyboard navigation
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .veil {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* opt-in: uncomment to auto-detect OS preference */
    /* @extend .light-theme; */
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
.opt-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════
   6. Z-INDEX SCALE
   ═══════════════════════════════════════════════════════════

   ┌────────┬──────────────────────────────────────────────────┐
   │ z-index│ Layer                                            │
   ├────────┼──────────────────────────────────────────────────┤
   │ 0      │ .depth — ambient gradient background             │
   │ 1      │ .content — all page content above depth          │
   │ 0      │ .backdrop — broker figure behind hero            │
   │ 1      │ .tool-card — sits above backdrop                 │
   │ 2      │ .hero-inner — hero content above backdrop        │
   │ 2      │ .tool-textarea, .tool-bar — above card ::after   │
   │ 3      │ header — always on top                           │
   │ 3      │ .card-sigil — above card glow overlay            │
   └────────┴──────────────────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   7. LAYOUT SYSTEM
   ═══════════════════════════════════════════════════════════

   Layout widths:
   - .wrap (hero, main):  max-width 56rem (896px)
   - .wide (below fold):  max-width 72rem (1152px)
   - .hero-inner:         max-width 44rem (704px)
   - Horizontal padding:  clamp(1.5rem, 5vw, 4rem)

   ═══════════════════════════════════════════════════════════ */

.content {
  position: relative;
  z-index: 1;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.wide {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}


/* ═══════════════════════════════════════════════════════════
   8. AMBIENT DEPTH LAYER
   ═══════════════════════════════════════════════════════════
   Fixed-position radial gradients that sit behind all content.
   Creates the plum-tinted atmospheric depth.
   Dark: deep purple nebula feel.
   Light: warm lavender wash.
   ═══════════════════════════════════════════════════════════ */

.depth {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ambient);
}


/* ═══════════════════════════════════════════════════════════
   9. TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════

   Font family: Sora
   Weights:     300 (light), 400 (regular), 500 (medium), 600 (semibold)

   Scale:
   ┌──────────────────────┬──────────────────────────────────┐
   │ Role                 │ Size / Weight / Tracking         │
   ├──────────────────────┼──────────────────────────────────┤
   │ Hero heading         │ clamp(1.8rem, 3.5vw, 2.6rem)    │
   │                      │ weight 300, tracking -0.03em     │
   │                      │ line-height 1.1                  │
   ├──────────────────────┼──────────────────────────────────┤
   │ Section heading      │ 1.15rem                          │
   │                      │ weight 300, tracking -0.01em     │
   │                      │ line-height 1.15                 │
   ├──────────────────────┼──────────────────────────────────┤
   │ Card heading         │ 0.9rem                           │
   │                      │ weight 500                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Eyebrow              │ 0.82rem                          │
   │                      │ weight 300, tracking 0.04em      │
   ├──────────────────────┼──────────────────────────────────┤
   │ Body (textarea)      │ 0.95rem                          │
   │                      │ weight 400, line-height 1.6      │
   ├──────────────────────┼──────────────────────────────────┤
   │ Card body            │ 0.84rem                          │
   │                      │ weight 400, line-height 1.7      │
   ├──────────────────────┼──────────────────────────────────┤
   │ Small card body      │ 0.82rem                          │
   │                      │ weight 400, line-height 1.6      │
   ├──────────────────────┼──────────────────────────────────┤
   │ Button               │ 0.85rem                          │
   │                      │ weight 500                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Option button        │ 0.75rem                          │
   │                      │ weight 400                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Step number          │ 0.62rem                          │
   │                      │ weight 400, tracking 0.2em, caps │
   ├──────────────────────┼──────────────────────────────────┤
   │ Wordmark             │ 0.9rem                           │
   │                      │ weight 600                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ FAQ summary          │ 0.9rem                           │
   │                      │ weight 500                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ FAQ answer           │ 0.84rem                          │
   │                      │ weight 400, line-height 1.65     │
   ├──────────────────────┼──────────────────────────────────┤
   │ Meta / status        │ 0.72rem                          │
   │                      │ weight 400                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Footer               │ 0.75rem                          │
   │                      │ weight 400                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Nav link             │ 0.72rem                          │
   │                      │ weight 400                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Status label         │ 0.68rem                          │
   │                      │ weight 400                       │
   ├──────────────────────┼──────────────────────────────────┤
   │ Pullquote            │ 0.95rem                          │
   │                      │ weight 300, line-height 1.4      │
   ├──────────────────────┼──────────────────────────────────┤
   │ Chevron              │ 0.75rem                          │
   │                      │ accent color                     │
   ├──────────────────────┼──────────────────────────────────┤
   │ Sigil ring text      │ 6px                              │
   │                      │ weight 500, tracking 2px         │
   └──────────────────────┴──────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */

.bright { color: var(--bright); }
.dim    { color: var(--dim); }


/* ═══════════════════════════════════════════════════════════
   10. HEADER & WORDMARK
   ═══════════════════════════════════════════════════════════
   Minimal app chrome. Logo + nav + status indicator.
   Sits above hero at z-index 3.
   ═══════════════════════════════════════════════════════════ */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.4rem;
  position: relative;
  z-index: 3;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bright);
  text-decoration: none;
}

.header-broker {
  display: inline-block;
  width: 1.1rem;
  height: 1.55rem;
  flex-shrink: 0;
  opacity: var(--header-broker-opacity);
  line-height: 0;
}

.header-broker img {
  width: 100%;
  height: 100%;
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-nav a {
  font-size: 0.72rem;
  color: var(--ink);
  opacity: var(--nav-link-opacity);
  text-decoration: none;
  transition: opacity 0.2s;
}

.header-nav a:hover {
  opacity: 1;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-status-label {
  font-size: 0.68rem;
  color: var(--ink);
  opacity: var(--status-label-opacity);
}


/* ═══════════════════════════════════════════════════════════
   11. HERO SECTION
   ═══════════════════════════════════════════════════════════
   Full-viewport tool-first hero.
   - min-height: 92vh — fills the screen
   - Vertically and horizontally centered
   - Contains: eyebrow, h1, reveal-gap, tool-card, meta-strip
   ═══════════════════════════════════════════════════════════ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 92vh;
  padding: 7.5rem clamp(1.5rem, 5vw, 4rem) var(--space-2xl);
  position: relative;
}

.hero-inner {
  width: 100%;
  max-width: 44rem;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-weight: 300;
  color: var(--bright);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.eyebrow {
  font-size: 0.82rem;
  color: var(--accent-dim);
  font-weight: 300;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.04em;
}

.reveal-gap {
  height: 1.75rem;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   12. BACKDROP (broker silhouette behind hero)
   ═══════════════════════════════════════════════════════════
   Full-figure ghosted broker behind the hero section.
   - Dark: subtle silhouette with purple undertone
   - Light: pale watermark, slightly more visible
   - Masked with radial-gradient ellipse for natural fade
   ═══════════════════════════════════════════════════════════ */

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.backdrop img {
  height: 85%;
  width: auto;
  margin-top: -1.5rem;
  opacity: var(--backdrop-opacity);
  filter: blur(1.2px);
  -webkit-mask-image:
    radial-gradient(ellipse 55% 65% at 50% 45%,
      #000 0%,
      rgba(0, 0, 0, 0.85) 50%,
      rgba(0, 0, 0, 0.35) 78%,
      transparent 100%);
  mask-image:
    radial-gradient(ellipse 55% 65% at 50% 45%,
      #000 0%,
      rgba(0, 0, 0, 0.85) 50%,
      rgba(0, 0, 0, 0.35) 78%,
      transparent 100%);
}


/* ═══════════════════════════════════════════════════════════
   13. TOOL CARD
   ═══════════════════════════════════════════════════════════
   The main event. The page IS this tool.

   Structure:
   ┌─────────────────────────────────────────────┐
   │ ::before — accent line (gradient, 1px)      │
   │ ::after  — light-spill glow (dark only)     │
   │ ┌─────────────────────────────────────────┐ │
   │ │ .card-sigil (absolute, top-right)       │ │
   │ │ .tool-textarea                          │ │
   │ ├─────────────────────────────────────────┤ │
   │ │ .tool-bar (border-top)                  │ │
   │ │   .tool-options  [opt-btns]   .btn      │ │
   │ └─────────────────────────────────────────┘ │
   └─────────────────────────────────────────────┘

   Dark:  gradient background, border-glow on focus
   Light: solid surface, box-shadow depth on focus

   ═══════════════════════════════════════════════════════════ */

.tool-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: border-color 0.4s, box-shadow 0.4s;
}

/* Accent line — gradient along top edge */
.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--card-accent-line);
  opacity: 0.45;
  transition: opacity 0.4s;
  z-index: 1;
}

/* Light-spill glow from the broker onto the card (dark theme only) */
.tool-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--card-glow);
  opacity: 0.9;
  transition: opacity 0.4s;
}

/* Focus-within state — the card comes alive when you're typing */
.tool-card:focus-within {
  border-color: var(--card-focus-border);
  box-shadow: var(--card-focus-shadow);
}

.tool-card:focus-within::before {
  opacity: 0.8;
}

.tool-card:focus-within::after {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════
   14. CARD SIGIL (maker's mark)
   ═══════════════════════════════════════════════════════════
   Circular decorative element, top-right of the tool card.
   Contains: dashed outer ring, solid inner ring, ring text
   (SVG textPath), and a small broker figure.
   ═══════════════════════════════════════════════════════════ */

.card-sigil {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 4rem;
  height: 4rem;
  pointer-events: none;
  opacity: 0.75;
}

/* Dashed outer ring */
.card-sigil::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--sigil-ring-dashed);
}

/* Solid inner ring */
.card-sigil::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid var(--sigil-ring-solid);
}

.card-sigil .figure {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
}

.card-sigil .ring-text {
  position: absolute;
  inset: 0;
}

.card-sigil .ring-text text {
  font-size: 6px;
  letter-spacing: 2px;
  fill: var(--sigil-text);
  font-family: var(--font);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   15. TEXTAREA
   ═══════════════════════════════════════════════════════════ */

.tool-textarea {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 8.5rem;
  background: transparent;
  border: 0;
  outline: none;
  resize: vertical;
  padding: 1.4rem 1.5rem;
  color: var(--bright);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.6;
}

.tool-textarea::placeholder {
  color: var(--dim);
  transition: color 0.3s;
}

.tool-card:focus-within .tool-textarea::placeholder {
  color: var(--placeholder-focus);
}


/* ═══════════════════════════════════════════════════════════
   16. TOOL BAR, OPTION BUTTONS & CTA
   ═══════════════════════════════════════════════════════════

   Option buttons:
   - Radio-group behavior (one active at a time)
   - Three states: default → hover → active

   CTA ("Create link"):
   - Dark: accent bg, dark text
   - Light: accent bg, white text

   ═══════════════════════════════════════════════════════════ */

.tool-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem 1rem;
  border-top: 1px solid var(--line);
}

.tool-options {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.tool-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Option button ── */
.opt-btn {
  background: var(--opt-bg);
  border: 1px solid var(--opt-border);
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.38rem 0.8rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.opt-btn:hover {
  background: var(--opt-hover-bg);
  color: var(--bright);
}

.opt-btn.active {
  background: var(--opt-active-bg);
  border-color: var(--opt-active-border);
  color: var(--accent);
}

/* ── Dropdown select ── */
.tool-select {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tool-select-label {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  user-select: none;
}

.tool-dropdown {
  appearance: none;
  -webkit-appearance: none;
  background: var(--opt-bg);
  border: 1px solid var(--opt-border);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.38rem 2rem 0.38rem 0.8rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ada5b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

.tool-dropdown:hover {
  background-color: var(--opt-hover-bg);
  border-color: var(--line-hover);
  color: var(--bright);
}

.tool-dropdown option {
  background: var(--surface);
  color: var(--ink);
}

.tool-dropdown option:checked {
  background: var(--accent);
  color: var(--bg);
}

.tool-dropdown:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── CTA push-right modifier ── */
.btn-cta {
  margin-left: auto;
}

.btn-cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── CTA button ── */
.btn {
  background: var(--cta-bg);
  color: var(--cta-color);
  border: 0;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.55rem 1.5rem;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn:hover {
  background: var(--cta-hover);
}

/* ── Outline button variant ── */
.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* ── Small button modifier ── */
.btn-sm {
  padding: 0.38rem 0.8rem;
  font-size: 0.75rem;
}

/* ── Theme toggle ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
  transition: border-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* ── Option group separator ── */
.opt-sep {
  color: var(--dim);
  font-size: 0.75rem;
  user-select: none;
  padding: 0 0.35rem;
}

/* ── Attachment button ── */
.attach-btn {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
  transition: color 0.2s;
}

.attach-btn:hover {
  color: var(--accent);
}

.attach-btn svg {
  width: 16px;
  height: 16px;
}


/* ═══════════════════════════════════════════════════════════
   17. META STRIP & STATUS DOTS
   ═══════════════════════════════════════════════════════════
   Row of trust signals below the tool card.
   "Encrypted in your browser" · "Zero knowledge" · live counter

   Dot types:
   - .dot-green  — static, success color with glow
   - .dot-pulse  — accent color, animated opacity

   ═══════════════════════════════════════════════════════════ */

.meta-strip {
  display: flex;
  gap: 1.8rem;
  padding: 1.2rem 0 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--ink);
  opacity: var(--meta-strip-opacity);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-green {
  background: var(--success);
  box-shadow: var(--dot-green-shadow);
}

.dot-pulse {
  background: var(--accent);
  box-shadow: var(--dot-pulse-shadow);
  animation: pulse 3s ease-in-out infinite;
}

.live-count {
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════
   18. VEIL MECHANIC (scroll reveal)
   ═══════════════════════════════════════════════════════════
   Elements with .veil start blurred and translucent, then
   resolve to full clarity when they enter the viewport.

   Trigger: IntersectionObserver
     rootMargin: '-25% 0px -25% 0px'
     threshold: 0

   Class transition: .veil → .veil.focus

   Dark:  opacity 0.20, blur 2.4px, translateY(6px)
   Light: opacity 0.15, blur 2.0px, translateY(6px)

   JS required:
     const io = new IntersectionObserver((entries) => {
       entries.forEach(en =>
         en.target.classList.toggle('focus', en.isIntersecting));
     }, { rootMargin: '-25% 0px -25% 0px', threshold: 0 });
     document.querySelectorAll('.veil').forEach(el => io.observe(el));

   ═══════════════════════════════════════════════════════════ */

.veil {
  opacity: var(--veil-initial-opacity);
  filter: blur(var(--veil-initial-blur));
  transform: translateY(14px);
  transition:
    opacity 0.8s var(--ease-reveal),
    filter 0.8s var(--ease-reveal),
    transform 0.8s var(--ease-reveal);
}

.veil.focus {
  opacity: 1;
  filter: blur(0);
  transform: none;
}


/* ═══════════════════════════════════════════════════════════
   19. SECTIONS & DIVIDERS
   ═══════════════════════════════════════════════════════════
   Below-the-fold content sections.
   - Padding: 4.5rem vertical
   - Separated by 1px border-top in --line color
   - Section headings: weight 300, 1.15rem
   ═══════════════════════════════════════════════════════════ */

.section {
  padding: var(--space-xl) 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section h2 {
  font-weight: 300;
  color: var(--bright);
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════
   20. CONTEXT BAR ("Why not just use Slack")
   ═══════════════════════════════════════════════════════════

   Layout:
   ┌─────────────────┬───────────────────────────────────────┐
   │ h2              │ 2-column body text (CSS columns)      │
   │ .pullquote      │                                       │
   └─────────────────┴───────────────────────────────────────┘

   - Grid: auto 1fr (stacks on ≤900px)
   - Dark: surface bg, line border, no shadow
   - Light: surface bg, plum border, subtle box-shadow

   ═══════════════════════════════════════════════════════════ */

.context-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.8rem 2rem;
}

.context-bar h2 {
  margin-bottom: 0.6rem;
  white-space: nowrap;
}

.context-bar .pullquote {
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--accent);
  line-height: 1.4;
  margin: 0;
}

.context-body {
  column-count: 2;
  column-gap: 2rem;
}

.context-body p {
  font-size: 0.84rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
  break-inside: avoid;
}

.context-body p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════
   21. STEP CARDS ("How it works")
   ═══════════════════════════════════════════════════════════

   Layout:
   ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
   │ ▔▔▔ bar ▔▔▔  │ │ ▔▔▔ bar ▔▔▔  │ │ ▔▔▔ bar ▔▔▔  │
   │ 01            │ │ 02            │ │ 03            │
   │ Heading       │ │ Heading       │ │ Heading       │
   │ Body text     │ │ Body text     │ │ Body text     │
   └──────────────┘ └──────────────┘ └──────────────┘

   - Grid: 3 columns, 1rem gap (1 col on ≤700px)
   - Top bar: 2px gradient (--step-bar), opacity varies by theme
   - Hover: translateY(-2px)
   - Dark: border changes on hover
   - Light: shadow deepens on hover

   ═══════════════════════════════════════════════════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* Top accent bar */
.step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.2rem;
  right: 1.2rem;
  height: 2px;
  background: var(--step-bar);
  border-radius: 0 0 2px 2px;
  opacity: var(--step-bar-opacity);
}

.step-card:hover {
  border-color: var(--line-hover);
  transform: translateY(-2px);
}

.step-num {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.step-card h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bright);
  margin-bottom: 0.4rem;
}

.step-card p {
  font-size: 0.82rem;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   22. FAQ ACCORDION
   ═══════════════════════════════════════════════════════════
   Native <details> + <summary> accordion.

   States:
   - Closed: summary in --bright, chevron (+) at 0deg
   - Hover:  summary color → --accent
   - Open:   summary color → --accent, chevron rotates 45deg

   ═══════════════════════════════════════════════════════════ */

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--bright);
  transition: color 0.2s;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Chevron indicator */
.faq summary .ch {
  color: var(--accent);
  font-size: 0.75rem;
  opacity: var(--chevron-opacity);
  transition: transform 0.25s, opacity 0.25s;
}

.faq details[open] summary .ch {
  transform: rotate(45deg);
  opacity: 1;
}

.faq details[open] summary {
  color: var(--accent);
}

.faq details p {
  padding: 0 0 1rem;
  font-size: 0.84rem;
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════
   23. FOOTER
   ═══════════════════════════════════════════════════════════ */

.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink);
  opacity: var(--footer-opacity);
}

.foot-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.foot-links a {
  font-size: 0.72rem;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s;
}

.foot-links a:hover {
  opacity: 1;
  color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   24. KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════

   ┌────────────────┬──────────────────────────────────────────┐
   │ Name           │ Description                              │
   ├────────────────┼──────────────────────────────────────────┤
   │ pulse          │ Status dot breathing — 3s loop           │
   │                │ Dark:  opacity 0.5 → 1 → 0.5            │
   │                │ Light: opacity 0.4 → 1 → 0.4            │
   │                │ Uses --pulse-low token for theme parity  │
   └────────────────┴──────────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% { opacity: var(--pulse-low); }
  50%      { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   25. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════

   ┌──────────────┬──────────────────────────────────────────┐
   │ Breakpoint   │ Changes                                  │
   ├──────────────┼──────────────────────────────────────────┤
   │ ≤ 900px      │ Context bar stacks to single column      │
   │              │ Context body drops to 1 text column       │
   ├──────────────┼──────────────────────────────────────────┤
   │ ≤ 700px      │ Step cards stack to single column         │
   ├──────────────┼──────────────────────────────────────────┤
   │ fluid        │ Hero h1 scales via clamp(1.8rem–2.6rem)  │
   │              │ Horizontal padding via clamp(1.5rem–4rem) │
   └──────────────┴──────────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .context-bar {
    grid-template-columns: 1fr;
  }
  .context-body {
    column-count: 1;
  }
}

@media (max-width: 700px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .header-nav a {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   26. LIGHT THEME — COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════
   Styles that require rule-level changes, not just token swaps.
   Token-only differences are already handled by §3.
   ═══════════════════════════════════════════════════════════ */

/* ── Tool card: no glow overlay, different accent line position ── */
.light-theme .tool-card::before,
[data-theme="light"] .tool-card::before {
  left: 15%;
  right: 15%;
  top: -1px;
  opacity: 0.35;
}

.light-theme .tool-card:focus-within::before,
[data-theme="light"] .tool-card:focus-within::before {
  opacity: 0.6;
}

/* ── Tool card ::after glow is off in light — explicit suppression ── */
.light-theme .tool-card::after,
[data-theme="light"] .tool-card::after {
  display: none;
}

/* ── Dropdown chevron: light-theme ink color ── */
.light-theme .tool-dropdown,
[data-theme="light"] .tool-dropdown {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234e4258' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Context bar: box-shadow for depth in light ── */
.light-theme .context-bar,
[data-theme="light"] .context-bar {
  border-color: rgba(100, 50, 140, 0.07);
  box-shadow: 0 1px 3px rgba(80, 30, 120, 0.04),
              0 8px 24px -8px rgba(80, 30, 120, 0.06);
}

/* ── Step cards: shadow-based depth instead of border glow ── */
.light-theme .step-card,
[data-theme="light"] .step-card {
  border-color: rgba(100, 50, 140, 0.07);
  box-shadow: 0 1px 3px rgba(80, 30, 120, 0.04),
              0 4px 16px -4px rgba(80, 30, 120, 0.05);
}

.light-theme .step-card:hover,
[data-theme="light"] .step-card:hover {
  border-color: rgba(100, 50, 140, 0.07);
  box-shadow: 0 2px 6px rgba(80, 30, 120, 0.06),
              0 8px 24px -4px rgba(80, 30, 120, 0.1);
}

/* ── Card sigil: slightly more visible in light ── */
.light-theme .card-sigil,
[data-theme="light"] .card-sigil {
  opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════
   SPACING & LAYOUT — QUICK REFERENCE
   ═══════════════════════════════════════════════════════════

   ┌──────────────┬────────┬──────────────────────────────────┐
   │ Token        │ Value  │ Usage                            │
   ├──────────────┼────────┼──────────────────────────────────┤
   │ --space-xs   │ 0.4rem │ button gap, tight padding        │
   │ --space-sm   │ 0.8rem │ card internal spacing            │
   │ --space-md   │ 1.5rem │ card padding, content gaps       │
   │ --space-lg   │ 3rem   │ section internal padding         │
   │ --space-xl   │ 4.5rem │ section vertical padding         │
   │ --space-2xl  │ 7rem   │ hero bottom padding              │
   └──────────────┴────────┴──────────────────────────────────┘

   RADII — QUICK REFERENCE
   ┌────────────┬────────┬───────────────────────────────────┐
   │ Token      │ Value  │ Usage                             │
   ├────────────┼────────┼───────────────────────────────────┤
   │ --r-sm     │ 6px    │ option buttons                    │
   │ --r-md     │ 8px    │ CTA button                        │
   │ --r-lg     │ 12px   │ step cards                        │
   │ --r-xl     │ 14px   │ context bar                       │
   │ --r-2xl    │ 16px   │ tool card                         │
   └────────────┴────────┴───────────────────────────────────┘

   MOTION — QUICK REFERENCE
   ┌──────────────┬──────────────────────────────────────────┐
   │ Duration     │ Usage                                    │
   ├──────────────┼──────────────────────────────────────────┤
   │ 0.2s         │ Buttons, links, small interactive states │
   │ 0.25s        │ Chevron rotate, opacity transitions      │
   │ 0.3s         │ Card hover (border, transform, shadow)   │
   │ 0.4s         │ Tool card focus (border, shadow, glow)   │
   │ 0.55s        │ Veil reveal (opacity, blur, translate)   │
   │ 3s           │ Pulse dot (infinite loop)                │
   └──────────────┴──────────────────────────────────────────┘

   Easing:
   - Interactive:  ease (browser default)
   - Veil reveal:  var(--ease-reveal) = cubic-bezier(.16, 1, .3, 1)
                   fast in, gentle out — like lifting a curtain

   ═══════════════════════════════════════════════════════════ */