// ===========================================================================
// PLAIN TEXT JS SOURCE FILE — iam/marketing v5 d4-shell
// ===========================================================================
// 
// This file contains JavaScript and JSX source code.
// Loaded at runtime by Babel-standalone and compiled in the browser.
// Not intended to be parsed as HTML.
// 
// Charset: UTF-8 · Line endings: LF · Filetype: text/plain
// ===========================================================================
// D4 Production · Shared primitives, tokens, nav, footer.
// Operator Console direction — terminal chrome, mono labels, status pips, marquees, // comments.

const D4P = {
  // Surfaces
  void: '#050506',
  base: '#0A0A0B',
  surface: '#0F0F11',
  surfaceHi: '#161618',
  // Foreground
  bone: '#F2EFE6',
  boneDim: 'rgba(242,239,230,0.78)',     // bumped 0.72 → 0.78 for WCAG AA
  muted: 'rgba(242,239,230,0.58)',       // bumped 0.45 → 0.58 to clear 4.5:1 on void
  faint: 'rgba(242,239,230,0.30)',       // bumped 0.22 → 0.30 (decorative still, but readable)
  // Accents
  accent: '#C5D86D',     // chartreuse — system-active
  accentHi: '#D9EE7A',
  warm: '#D4A574',       // sand — secondary
  danger: '#C97D7D',     // red — broken state
  cool: '#7AA8C9',       // ice — info
  // Lines
  hair005: 'rgba(242,239,230,0.05)',
  hair010: 'rgba(242,239,230,0.10)',
  hair018: 'rgba(242,239,230,0.18)',
  hair030: 'rgba(242,239,230,0.30)',
  // Type stacks · v3 · Fraunces (variable serif) + Geist sans
  serif: '"Fraunces", "Instrument Serif", "Times New Roman", Georgia, serif',
  sans:  '"Geist", "Inter", system-ui, -apple-system, sans-serif',
  mono:  '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',

  // Tinted shadows · carry chartreuse hue instead of generic black
  shadowSm: '0 2px 8px rgba(0,0,0,0.4), 0 0 24px -8px rgba(197,216,109,0.06)',
  shadowMd: '0 8px 24px rgba(0,0,0,0.5), 0 0 40px -12px rgba(197,216,109,0.10)',
  shadowLg: '0 24px 60px -16px rgba(0,0,0,0.6), 0 0 80px -16px rgba(197,216,109,0.14)',
  shadowXl: '0 40px 100px -24px rgba(0,0,0,0.7), 0 0 120px -24px rgba(197,216,109,0.18)',

  // Easing
  springEase: 'cubic-bezier(0.34, 1.56, 0.64, 1)',  // overshoot — buttons/CTAs
  smoothEase: 'cubic-bezier(0.22, 1, 0.36, 1)',     // standard ease-out
};

// ── Atoms ──────────────────────────────────────────────────────
const D4Mono = ({ children, accent, dim, muted, size = 11, style = {}, ...p }) => (
  <span {...p} style={{
    fontFamily: D4P.mono, fontSize: size, letterSpacing: '0.10em',
    textTransform: 'uppercase',
    color: accent ? D4P.accent : dim ? D4P.muted : muted ? D4P.boneDim : D4P.bone,
    ...style,
  }}>{children}</span>
);

const D4Serif = ({ children, italic, size = 56, style = {}, as: Tag = 'span', ...p }) => (
  <Tag {...p} style={{
    fontFamily: D4P.serif, fontSize: size, lineHeight: 0.98, letterSpacing: '-0.012em',
    fontStyle: italic ? 'italic' : 'normal', display: 'inline-block', ...style,
  }}>{children}</Tag>
);

const D4Pip = ({ children, status = 'ON', color = D4P.accent }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: D4P.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: D4P.muted }}>
    <span className="d4p-pulse" style={{ width: 7, height: 7, background: color, borderRadius: '50%', boxShadow: `0 0 8px ${color}` }} />
    <span style={{ color: D4P.bone }}>{status}</span>
    {children && <span>· {children}</span>}
  </span>
);

const D4Tag = ({ children, color = D4P.accent }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '4px 10px', border: `1px solid ${D4P.hair018}`,
    fontFamily: D4P.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase',
    color: D4P.boneDim, background: D4P.surface, borderRadius: 1,
  }}>
    <span style={{ width: 5, height: 5, background: color, borderRadius: '50%' }} />
    {children}
  </span>
);

// Logo · ascii-mono mark + lowercase wordmark
const D4Logo = ({ small }) => (
  <a href="/" translate="no" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: D4P.bone }}>
    <span style={{
      fontFamily: D4P.mono, fontSize: small ? 14 : 16, fontWeight: 700,
      color: D4P.accent, letterSpacing: '-0.02em', lineHeight: 1,
      width: small ? 18 : 22, height: small ? 18 : 22,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: `1.5px solid ${D4P.accent}`, borderRadius: 2,
    }}>i</span>
    <span style={{ fontFamily: D4P.mono, fontSize: small ? 11 : 13, letterSpacing: '0.04em', color: D4P.bone, fontWeight: 500 }}>
      iam<span style={{ color: D4P.muted }}>/</span><span style={{ fontStyle: 'italic', fontFamily: D4P.serif, fontSize: small ? 13 : 16 }}>marketing</span>
    </span>
  </a>
);

// ── Nav ────────────────────────────────────────────────────────
const D4Nav = ({ current, lang = 'EN', mobile }) => {
  // Nav consolidated to 5 items + CTA per site-architecture audit.
  // Lead magnet, webinar, newsletter collapsed under /resources hub.
  const items = [
    ['ai',        'AI Operator', '/en/ai-operator/'],
    ['cases',     'Cases',       '/en/case-studies/'],
    ['resources', 'Resources',   '/en/resources/'],
    ['partners',  'Partners',    '/en/partners/'],
    ['about',     'About',       '/en/about/'],
  ];
  const [open, setOpen] = React.useState(false);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(5,5,6,0.92)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${D4P.hair010}`,
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: mobile ? '12px 16px' : '14px 32px',
        display: 'flex', alignItems: 'center', gap: mobile ? 12 : 24,
      }}>
        <D4Logo small={mobile} />
        {!mobile && (
          <div style={{ display: 'flex', gap: 22, marginLeft: 32 }}>
            {items.map(([k, label, href]) => (
              <a key={k} href={href} className="d4-bracket-link" style={{
                fontFamily: D4P.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
                color: current === k ? D4P.accent : D4P.boneDim, textDecoration: 'none',
                paddingBottom: 4, borderBottom: current === k ? `1px solid ${D4P.accent}` : '1px solid transparent',
                transition: `color 160ms ${D4P.smoothEase}`,
              }}>
                <span className="d4-bracket" style={{ color: D4P.accent }}>[[</span>
                <span style={{ padding: '0 6px' }}>{label}</span>
                <span className="d4-bracket" style={{ color: D4P.accent }}>]]</span>
              </a>
            ))}
          </div>
        )}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: mobile ? 10 : 14 }}>
          {!mobile && <D4Pip status="ROOM_01 LIVE" />}
          {!mobile && (
            <div style={{ display: 'flex', border: `1px solid ${D4P.hair018}`, borderRadius: 1 }}>
              <a href="/" style={{ padding: '4px 8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: D4P.mono, fontSize: 9, letterSpacing: '0.10em', color: lang === 'EN' ? D4P.bone : D4P.muted, background: lang === 'EN' ? D4P.surfaceHi : 'transparent', textDecoration: 'none' }}>EN</a>
              <a href="/es/" style={{ padding: '4px 8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: D4P.mono, fontSize: 9, letterSpacing: '0.10em', color: lang === 'ES' ? D4P.bone : D4P.muted, background: lang === 'ES' ? D4P.surfaceHi : 'transparent', textDecoration: 'none' }}>ES</a>
            </div>
          )}
          {!mobile && (
            <a href="https://calendly.com/scaleupteam/automation"
              className="d4-cta-spring v3-magnetic"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '9px 14px',
                background: D4P.accent, color: D4P.void,
                fontFamily: D4P.mono, fontSize: 10, letterSpacing: '0.10em', textTransform: 'uppercase',
                fontWeight: 600, textDecoration: 'none', borderRadius: 1,
                boxShadow: D4P.shadowSm,
                transition: `transform 280ms ${D4P.springEase}, box-shadow 280ms ${D4P.smoothEase}, background-color 200ms ${D4P.smoothEase}`,
              }}>./book.sh ▸</a>
          )}
          {mobile && (
            <button
              onClick={() => setOpen(!open)}
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
              style={{ background: 'transparent', border: `1px solid ${D4P.hair018}`, color: D4P.bone, padding: '6px 9px', fontFamily: D4P.mono, fontSize: 11, cursor: 'pointer', minWidth: 44, minHeight: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
            >
              <span aria-hidden="true" style={{ fontSize: 22, lineHeight: 1 }}>≡</span>
            </button>
          )}
        </div>
      </div>
      {mobile && open && (
        <div style={{ borderTop: `1px solid ${D4P.hair010}`, padding: '18px 16px', background: D4P.base, display: 'grid', gap: 14 }}>
          {items.map(([k, label, href]) => (
            <a key={k} href={href} style={{ fontFamily: D4P.mono, fontSize: 13, letterSpacing: '0.10em', textTransform: 'uppercase', color: current === k ? D4P.accent : D4P.bone, textDecoration: 'none', padding: '8px 0' }}>{label}</a>
          ))}
          <div style={{ height: 1, background: D4P.hair010, margin: '4px 0' }} />
          <a href="https://calendly.com/scaleupteam/automation" style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center', padding: '14px 18px', minHeight: 48, background: D4P.accent, color: D4P.void, fontFamily: D4P.mono, fontSize: 12, letterSpacing: '0.10em', textTransform: 'uppercase', fontWeight: 700, textDecoration: 'none', borderRadius: 1, boxShadow: D4P.shadowSm }}>./book.sh ▸</a>
          <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
            <a href="/" style={{ flex: 1, textAlign: 'center', padding: '12px', border: `1px solid ${D4P.hair018}`, fontFamily: D4P.mono, fontSize: 10, letterSpacing: '0.12em', color: lang === 'EN' ? D4P.accent : D4P.muted, background: lang === 'EN' ? D4P.surfaceHi : 'transparent', textDecoration: 'none' }}>EN</a>
            <a href="/es/" style={{ flex: 1, textAlign: 'center', padding: '12px', border: `1px solid ${D4P.hair018}`, fontFamily: D4P.mono, fontSize: 10, letterSpacing: '0.12em', color: lang === 'ES' ? D4P.accent : D4P.muted, background: lang === 'ES' ? D4P.surfaceHi : 'transparent', textDecoration: 'none' }}>ES</a>
          </div>
        </div>
      )}
    </nav>
  );
};

// ── Footer ─────────────────────────────────────────────────────
const D4Footer = ({ lang = 'EN', mobile }) => {
  const [submitState, setSubmitState] = React.useState('idle'); // idle | submitting | done | error
  const [emailValue, setEmailValue] = React.useState('');
  // Strict-but-friendly: must look like a real address, not a typo / role / disposable.
  const validateEmail = (v) => {
    const e = (v || '').trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(e)) return 'Format looks off — try operator@company.com';
    if (/(^|@)(test|example|disposable|mailinator)\./.test(e)) return 'Use your work address — that one bounces';
    return null;
  };
  const handleSubscribe = (e) => {
    e.preventDefault();
    if (submitState === 'submitting' || submitState === 'done') return;
    const err = validateEmail(emailValue);
    if (err) { setSubmitState('error'); return; }
    setSubmitState('submitting');
    setTimeout(() => setSubmitState('done'), 1100);
  };
  return (
  <footer style={{ background: D4P.void, borderTop: `1px solid ${D4P.hair010}`, marginTop: 'auto' }}>
    {/* Newsletter capture */}
    <div style={{ borderBottom: `1px solid ${D4P.hair010}`, padding: mobile ? '36px 20px' : '60px 60px' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 24 : 60, alignItems: 'center' }}>
        <div>
          <D4Mono accent>// SUBSCRIBE.SH · OPERATORS ONLY</D4Mono>
          <div style={{ marginTop: 12 }}>
            <D4Serif size={mobile ? 36 : 64}>The newsletter</D4Serif><br/>
            <D4Serif italic size={mobile ? 36 : 64} style={{ color: D4P.accent }}>operators read.</D4Serif>
          </div>
          <div style={{ marginTop: 14, color: D4P.boneDim, fontSize: mobile ? 13 : 14, maxWidth: 460 }}>
            One reframe per week. Receipts. No fluff. Read by 14,200 operators across 23 countries.
          </div>
        </div>
        <form onSubmit={handleSubscribe} style={{ display: 'grid', gap: 10 }} aria-label="Subscribe to newsletter">
          <label htmlFor="d4-newsletter-email" style={{ display: 'block' }}>
            <D4Mono dim>// ENTER.OPERATOR_EMAIL</D4Mono>
          </label>
          <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: 8 }}>
            <input
              id="d4-newsletter-email"
              type="email"
              name="email"
              autoComplete="email"
              inputMode="email"
              placeholder="operator@company.com…"
              required
              disabled={submitState === 'submitting' || submitState === 'done'}
              value={emailValue}
              onChange={(e) => { setEmailValue(e.target.value); if (submitState === 'error') setSubmitState('idle'); }}
              aria-invalid={submitState === 'error'}
              aria-describedby="d4-newsletter-status"
              className="d4-input"
              style={{
                flex: 1, padding: '14px 16px', background: D4P.surface,
                border: `1px solid ${submitState === 'error' ? D4P.danger : D4P.hair018}`,
                color: D4P.bone, fontFamily: D4P.mono, fontSize: 12, borderRadius: 1,
              }}
            />
            <button
              type="submit"
              disabled={submitState !== 'idle'}
              style={{
                padding: '14px 20px', background: D4P.accent, color: D4P.void,
                fontFamily: D4P.mono, fontSize: 11, letterSpacing: '0.10em', textTransform: 'uppercase',
                fontWeight: 600, border: 'none', cursor: submitState === 'idle' ? 'pointer' : 'not-allowed',
                borderRadius: 1, opacity: submitState === 'idle' ? 1 : 0.7, transition: 'opacity 200ms',
              }}
            >
              {submitState === 'submitting' ? 'Sending…' : submitState === 'done' ? '✓ Subscribed' : './subscribe ▸'}
            </button>
          </div>
          <div id="d4-newsletter-status" role="status" aria-live="polite" style={{ display: 'flex', gap: 14, marginTop: 4, minHeight: 14 }}>
            {submitState === 'done' ? (
              <D4Mono accent>// CHECK YOUR INBOX · CONFIRM SUBSCRIPTION</D4Mono>
            ) : submitState === 'error' ? (
              <D4Mono style={{ color: D4P.danger }}>// {validateEmail(emailValue) || 'Please enter a valid email address.'}</D4Mono>
            ) : (
              <>
                <D4Pip status="14,200 OPERATORS" />
                <D4Pip status="0 SPAM" color={D4P.warm} />
              </>
            )}
          </div>
        </form>
      </div>
    </div>

    {/* Massive logotype strip */}
    <div style={{ padding: mobile ? '20px' : '40px 60px', borderBottom: `1px solid ${D4P.hair010}`, overflow: 'hidden' }}>
      <div style={{
        fontFamily: D4P.serif, fontStyle: 'italic',
        fontSize: mobile ? 64 : 200, lineHeight: 0.86, letterSpacing: '-0.04em',
        color: D4P.bone, whiteSpace: 'nowrap',
      }}>
        i am marketing<span style={{ color: D4P.accent }}>.</span>
      </div>
    </div>

    {/* Link grid */}
    <div style={{ padding: mobile ? '32px 20px' : '60px 60px' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '1.4fr repeat(4, 1fr)', gap: mobile ? 24 : 40 }}>
        <div>
          <D4Logo />
          <div style={{ marginTop: 14, fontFamily: D4P.mono, fontSize: 10, color: D4P.muted, letterSpacing: '0.05em', lineHeight: 1.6 }}>
            // operator-grade growth<br/>
            // for $5M–$50M brands<br/>
            // 14 yrs · $1.5B moved · 65k operators
          </div>
          <div style={{ marginTop: 14 }}><D4Pip status="ACCEPTING · ROOM_01" /></div>
        </div>
        {[
          ['Funnels', [['Home', './home.html'], ['AI Operator', '/en/ai-operator/']]],
          ['Cases', [['All', '/en/case-studies/'], ['Stayfull', '/en/case-studies/stayfull/'], ['Mortero', '/en/case-studies/mortero/']]],
          ['Magnets', [['Lead Magnet', './lead-magnet.html'], ['Webinar Reg', './webinar-register.html'], ['Replay', './webinar-replay.html']]],
          ['Station', [['Newsletter', '/en/newsletter/'], ['Partners', '/en/partners/'], ['Contact', './contact.html']]],
        ].map(([title, links]) => (
          <div key={title}>
            <D4Mono accent>// {title.toUpperCase()}</D4Mono>
            <div style={{ marginTop: 14, display: 'grid', gap: 10 }}>
              {links.map(([label, href]) => (
                <a key={href} href={href} style={{ fontFamily: D4P.mono, fontSize: 11, color: D4P.boneDim, textDecoration: 'none', letterSpacing: '0.04em', transition: 'color 160ms' }}
                  onMouseEnter={e => e.currentTarget.style.color = D4P.accent}
                  onMouseLeave={e => e.currentTarget.style.color = D4P.boneDim}>→ {label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* Build version bottom bar */}
    <div style={{ borderTop: `1px solid ${D4P.hair010}`, padding: mobile ? '14px 20px' : '18px 60px' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
        <D4Mono dim style={{ fontSize: 9 }}>// © 2025 IAM/MARKETING · OPERATOR_GRADE · BUILD_v1.0.4</D4Mono>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <a href="/en/terms/" style={{ fontFamily: D4P.mono, fontSize: 9, color: D4P.muted, textDecoration: 'none', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Terms</a>
          <a href="/en/privacy/" style={{ fontFamily: D4P.mono, fontSize: 9, color: D4P.muted, textDecoration: 'none', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Privacy</a>
          <D4Pip status={lang === 'EN' ? 'EN-US' : 'ES-MX'} color={D4P.warm} />
        </div>
      </div>
    </div>
  </footer>
  );
};

// ── Marquee ────────────────────────────────────────────────────
const D4Marquee = ({ items = [], speed = 28, accent, mono, italic }) => {
  const text = items.join('  ·  ');
  return (
    <div style={{ overflow: 'hidden', position: 'relative', borderTop: `1px solid ${D4P.hair010}`, borderBottom: `1px solid ${D4P.hair010}`, padding: '14px 0', background: D4P.base }}>
      <div className="d4p-marq" style={{
        display: 'inline-block', whiteSpace: 'nowrap',
        fontFamily: mono ? D4P.mono : D4P.serif,
        fontStyle: italic ? 'italic' : 'normal',
        fontSize: mono ? 12 : 28, letterSpacing: mono ? '0.10em' : '-0.01em',
        textTransform: mono ? 'uppercase' : 'none',
        color: accent ? D4P.accent : D4P.bone,
        animation: `d4p-marq ${speed}s linear infinite`,
      }}>
        {[0,1,2].map(i => <span key={i} style={{ paddingRight: 60 }}>{text}  ·  </span>)}
      </div>
    </div>
  );
};

// ── Page shell ─────────────────────────────────────────────────
const D4Page = ({ children, current, lang = 'EN', mobile }) => (
  <div style={{ minHeight: '100dvh', background: D4P.void, color: D4P.bone, fontFamily: D4P.sans, display: 'flex', flexDirection: 'column' }}>
    <D4Nav current={current} lang={lang} mobile={mobile} />
    <main id="main" tabIndex={-1} style={{ flex: 1, outline: 'none' }}>{children}</main>
    <D4Footer lang={lang} mobile={mobile} />
  </div>
);

// ── Section primitives ─────────────────────────────────────────
// v2: every D4Section has a scroll-reveal entrance — IntersectionObserver,
// transform+opacity only, premium cubic-bezier, reduced-motion fallback.
const D4Section = ({ children, label, num, dark, full, mobile, id, style = {} }) => {
  const ref = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setRevealed(true); return; }

    // Above-fold sections reveal immediately (one rAF tick so the transition still plays)
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      const id = requestAnimationFrame(() => setRevealed(true));
      return () => cancelAnimationFrame(id);
    }

    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setRevealed(true);
          obs.disconnect();
        }
      },
      // threshold 0 = fire as soon as ANY part enters the viewport.
      // Critical for tall sections (Hero 320vh, DIFF 400vh) where a higher
      // ratio threshold would never satisfy and the section would stay at opacity 0.
      { threshold: 0, rootMargin: '0px 0px -12% 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Move A · vertical rotated mono edge label — derived from `num` ("02 · MECHANISM" → "02 — MECHANISM")
  const edgeLabel = num ? String(num).replace(' · ', ' — ').toUpperCase() : null;

  return (
    <section
      ref={ref}
      id={id}
      className={`d4-section ${revealed ? 'is-revealed' : ''}`}
      style={{
        // v5 · asymmetric optical padding — bottom slightly heavier so adjacent sections breathe
        padding: full ? 0 : (mobile ? '64px 20px 76px' : '120px 60px 136px'),
        background: dark ? D4P.base : D4P.void,
        borderBottom: `1px solid ${D4P.hair010}`,
        position: 'relative',
        // section itself is a subtle fade only — the dramatic motion is on children inside .d4-stage
        opacity: revealed ? 1 : 0.001,
        transition: 'opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1)',
        ...style,
      }}
    >
      {edgeLabel && !mobile && (
        <span aria-hidden="true" className="d4-edge-label" style={{
          position: 'absolute', top: '50%', left: 18,
          transform: 'translateY(-50%) rotate(-90deg)', transformOrigin: 'left center',
          fontFamily: D4P.mono, fontSize: 10, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: D4P.muted, whiteSpace: 'nowrap',
          pointerEvents: 'none', zIndex: 1,
        }}>{edgeLabel}</span>
      )}
      {(label || num) && !full && (
        <div className="d4-stage" style={{ maxWidth: 1320, margin: '0 auto 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          {num && (() => {
            // num arrives like "02 · MECHANISM" — split into editorial § marker + name
            const [n, ...rest] = String(num).split(' · ');
            const sectionName = rest.join(' · ');
            return (
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                <span style={{ fontFamily: D4P.serif, fontStyle: 'italic', fontSize: 44, color: D4P.accent, lineHeight: 0.9, letterSpacing: '-0.02em', fontVariationSettings: '"opsz" 144, "wght" 500' }}>§{n.replace(/^0+/, '') || '0'}</span>
                {sectionName && <D4Mono dim style={{ fontSize: 10, letterSpacing: '0.22em' }}>{sectionName}</D4Mono>}
              </div>
            );
          })()}
          {label && <D4Mono dim>{label}</D4Mono>}
        </div>
      )}
      <div className="d4-stage" style={{ maxWidth: full ? 'none' : 1320, margin: '0 auto' }}>{children}</div>
    </section>
  );
};

// Global motion CSS
(function injectD4Styles() {
  if (document.getElementById('d4p-styles')) return;
  const s = document.createElement('style');
  s.id = 'd4p-styles';
  s.textContent = `
    @keyframes d4p-pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(.85)} }
    @keyframes d4p-marq { 0%{transform:translateX(0)} 100%{transform:translateX(-33.33%)} }
    @keyframes d4p-sweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
    @keyframes d4p-blink { 0%,49%,100%{opacity:1} 50%,99%{opacity:0} }
    @keyframes d4p-typing { 0%{width:0} 60%,100%{width:100%} }
    @keyframes d4p-grain { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-1%)} 75%{transform:translate(-1%,2%)} }
    .d4p-pulse { animation: d4p-pulse 1.6s ease-in-out infinite; }
    .d4p-blink { animation: d4p-blink 1s steps(1) infinite; }
    .d4p-grain::after {
      content: ''; position: absolute; inset: -10%; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
      opacity: 0.06; mix-blend-mode: overlay; animation: d4p-grain 4s steps(4) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .d4p-pulse, .d4p-marq, .d4p-blink { animation: none !important; }
    }

    /* ──── v5+ · EMIL-GRADE STAGE REVEAL ────
       Smaller movement at higher quality. translateY(8px) + scale(0.99)
       creates depth on entrance without shouting. cubic-bezier(0.16,1,0.3,1)
       is Emil's signature ease-out (Sonner/Vaul). 600ms over 1100ms because
       smaller movements need shorter durations to feel intentional. */
    .d4-stage > * {
      opacity: 0;
      transform: translateY(8px) scale(0.99);
      transition:
        opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rd, 0) * 1ms),
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rd, 0) * 1ms);
    }
    .d4-stage > *:nth-child(1) { --rd: 0;   }
    .d4-stage > *:nth-child(2) { --rd: 80;  }
    .d4-stage > *:nth-child(3) { --rd: 160; }
    .d4-stage > *:nth-child(4) { --rd: 240; }
    .d4-stage > *:nth-child(5) { --rd: 320; }
    .d4-stage > *:nth-child(6) { --rd: 400; }
    .d4-stage > *:nth-child(n+7) { --rd: 480; }

    .d4-section.is-revealed .d4-stage > * {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .d4-stage > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* Move A · hide vertical edge labels on narrow viewports (already gated in JS, defensive CSS) */
    @media (max-width: 768px) { .d4-edge-label { display: none !important; } }

    /* Eliminate 300ms tap delay on touch devices */
    button, a, [role="button"] { touch-action: manipulation; }

    /* Emil-grade focus rings · layered chartreuse glow instead of hard outline.
       Softer, more deliberate, doesn't compete with content like 2px solid does.
       Uses box-shadow so it composites cheaply and stacks with existing shadows. */
    *:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px rgba(197,216,109,0.55),
        0 0 0 4px rgba(197,216,109,0.18);
      border-radius: inherit;
    }
    /* Buttons/links with their own background keep the layered glow but no border-radius forcing */
    a:focus-visible, button:focus-visible {
      box-shadow:
        0 0 0 2px rgba(197,216,109,0.55),
        0 0 0 4px rgba(197,216,109,0.18),
        ${D4P.shadowSm};
    }
    /* Newsletter input — proper :focus-visible state replaces JS border-swap */
    .d4-input { outline: none; transition: border-color 160ms ${D4P.smoothEase}; }
    .d4-input:focus-visible {
      border-color: ${D4P.accent};
      box-shadow: 0 0 0 2px rgba(197,216,109,0.40), 0 0 0 4px rgba(197,216,109,0.14);
    }
    .d4-input::placeholder { color: ${D4P.muted}; }

    /* v5 · Emil-grade CTA spring · cubic-bezier(0.32,0.72,0,1) is the Sonner curve.
       Single property transition (transform) — never two motions where one will do.
       Press feels weighty: scale below 1 + translateY back to baseline. */
    .d4-cta-spring { transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 240ms ${D4P.smoothEase}; }
    .d4-cta-spring:hover { transform: translateY(-1px); box-shadow: ${D4P.shadowLg}; }
    .d4-cta-spring:active { transform: translateY(0) scale(0.96); transition-duration: 120ms; }

    /* v5 · Bracket links — brackets compress inward on hover, label nudges 1px.
       Compositor-only (transform), 220ms cubic-bezier(0.32,0.72,0,1). */
    .d4-bracket-link { position: relative; }
    .d4-bracket-link .d4-bracket {
      display: inline-block;
      transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .d4-bracket-link > span:not(.d4-bracket) {
      display: inline-block;
      transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .d4-bracket-link:hover .d4-bracket:first-of-type { transform: translateX(2px); }
    .d4-bracket-link:hover .d4-bracket:last-of-type  { transform: translateX(-2px); }
    .d4-bracket-link:hover > span:not(.d4-bracket) { transform: translateY(-1px); }
    @media (prefers-reduced-motion: reduce) {
      .d4-bracket-link .d4-bracket,
      .d4-bracket-link > span:not(.d4-bracket) { transition: none !important; transform: none !important; }
      .d4-cta-spring { transition: none !important; }
    }

    /* v5 · numeric polish — opt-in for any data block */
    .d4-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }

    /* v5 · subtle alternating tint to break vertical monotony when sections stack */
    .d4-section + .d4-section { /* no-op anchor for tooling */ }

    /* v5 · physical primary CTA — used by raw <a>/button without .d4-cta-spring class */
    .d4-cta-primary { position: relative; transition: transform 240ms ${D4P.springEase}, box-shadow 240ms ${D4P.smoothEase}, background-color 200ms ${D4P.smoothEase}; }
    .d4-cta-primary:hover { transform: translateY(-1px); }
    .d4-cta-primary:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
    .d4-cta-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

    /* v3 · Fraunces variable axis · slightly lighter optical weight at display sizes */
    .d4-display-serif { font-variation-settings: 'opsz' 144, 'wght' 460; }
    /* Scrollbar */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: ${D4P.base}; }
    ::-webkit-scrollbar-thumb { background: ${D4P.hair018}; border-radius: 1px; }
    ::-webkit-scrollbar-thumb:hover { background: ${D4P.accent}; }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, { D4P, D4Mono, D4Serif, D4Pip, D4Tag, D4Logo, D4Nav, D4Footer, D4Marquee, D4Page, D4Section });