/* Compatibility selectors for migrated pages. Loaded once, never per-route. */

      /* ══════════════════ §2.6 tokens ══════════════════ */


      /* ══════════════════ §3 the two voices ══════════════════ */
      .ec-page {
        font-family: var(--ec-font-sans);
        font-feature-settings: "ss01", "cv05";
        font-weight: 400;
        font-size: var(--ec-body);
        line-height: 1.55;
        background: var(--ec-paper);
        color: var(--ec-ink);
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
      }
      /* globals.css sets Darker Grotesque on every h1–h6, and a matching rule
         beats inheritance — so the display face is re-asserted here. */
      .ec-page h1, .ec-page h2, .ec-page h3,
      .ec-page h4, .ec-page h5, .ec-page h6,
      .ec-page button, .ec-page input {
        font-family: var(--ec-font-sans);
        font-weight: 400;
      }
      .ec-page h1, .ec-page h2, .ec-page h3 { text-wrap: balance; }
      .ec-page em, .ec-page i { font-style: normal; }
      .ec-page a { color: inherit; text-decoration: none; }
      .ec-page .ec-num { font-variant-numeric: tabular-nums; }

      /* ══════════════════ §2.6 surfaces ══════════════════ */
      .ec-page [data-surface="paper"] { background: var(--ec-paper); color: var(--ec-ink); }
      .ec-page [data-surface="bone"] {
        background: var(--ec-bone); color: var(--ec-ink);
        --ec-rule: rgba(26, 26, 22, 0.12);
        --ec-rule-mark: rgba(26, 26, 22, 0.24);
      }
      .ec-page [data-surface="yellow"] {
        background: var(--ec-yellow); color: var(--ec-ink);
        --ec-rule: rgba(26, 26, 22, 0.14);
        --ec-rule-mark: rgba(26, 26, 22, 0.26);
      }
      .ec-page [data-surface="umber"] {
        background: var(--ec-umber); color: var(--ec-paper);
        --ec-rule: rgba(255, 255, 255, 0.10);
        --ec-rule-mark: rgba(255, 255, 255, 0.22);
        --ec-border: rgba(255, 255, 255, 0.14);
      }

      /* ══════════════════ §4.1 container and rhythm ══════════════════ */
      .ec-wrap { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
      .ec-sec { padding: 96px 0; }
      @media (max-width: 1023px) {
        .ec-wrap { padding: 0 40px; }
        .ec-sec { padding: 64px 0; }
      }
      @media (max-width: 767px) {
        .ec-wrap { padding: 0 24px; }
        .ec-sec { padding: 48px 0; }
      }

      /* ══════════════════ §5 primitives ══════════════════ */
      .ec-eyebrow {
        display: block;
        font-family: var(--ec-font-code);
        font-size: var(--ec-mono-label); line-height: 1.2;
        letter-spacing: 0.06em; font-weight: 400;
        color: var(--ec-ink-2);
      }
      .ec-micro {
        font-family: var(--ec-font-code);
        font-size: var(--ec-mono-micro); line-height: 1.2;
        letter-spacing: 0.08em; font-weight: 400;
        font-variant-numeric: tabular-nums;
        color: var(--ec-ink-3);
      }
      .ec-chip {
        display: inline-flex; align-items: center;
        height: 26px; padding: 0 10px;
        border: 1px solid var(--ec-border); border-radius: var(--ec-r-chip);
        font-family: var(--ec-font-code);
        font-size: var(--ec-mono-label); letter-spacing: 0.06em; font-weight: 400;
        color: var(--ec-ink); background: transparent;
        white-space: nowrap;
      }

      .ec-h1 { font-size: var(--ec-display-l); line-height: 1.04; letter-spacing: -0.025em; margin: 0; }
      .ec-h2 { font-size: var(--ec-display-m); line-height: 1.08; letter-spacing: -0.022em; margin: 0; }
      .ec-h3 { font-size: var(--ec-heading);   line-height: 1.14; letter-spacing: -0.018em; margin: 0; }
      .ec-page .ec-title {
        font-size: var(--ec-title); line-height: 1.24; letter-spacing: -0.012em;
        font-weight: 500; margin: 0;
      }
      .ec-lead {
        font-size: var(--ec-body-l); line-height: 1.5; letter-spacing: -0.005em;
        color: var(--ec-ink-2); max-width: 34em; margin: 0;
      }
      .ec-body-s { font-size: var(--ec-body-s); line-height: 1.5; color: var(--ec-ink-2); margin: 0; }

      /* §5.7 section header stack: eyebrow → 24 → headline → 16 → lead → 32 → button */
      .ec-head .ec-h1, .ec-head .ec-h2 { margin-top: 24px; }
      .ec-head .ec-lead { margin-top: 16px; }
      .ec-head .ec-actions { margin-top: 32px; }

      /* §5.1 button */
      .ec-btn {
        display: inline-flex; align-items: center; gap: 8px;
        height: 34px; padding: 0 14px; border-radius: var(--ec-r-button);
        background: var(--ec-ink); color: var(--ec-paper);
        font-family: var(--ec-font-sans); font-weight: 400;
        font-size: 14px; line-height: 1; letter-spacing: -0.005em;
        border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
        transition: transform 120ms ease, background-color 120ms ease;
      }
      .ec-page a.ec-btn { color: var(--ec-paper); }
      .ec-btn:hover { background: #262620; }
      .ec-btn:active { transform: translateY(1px); }
      .ec-btn:focus-visible { outline: 2px solid var(--ec-ink); outline-offset: 2px; }
      .ec-btn .ec-arrow { font-size: 13px; line-height: 1; transition: transform 160ms ease; }
      .ec-btn:hover .ec-arrow { transform: translateX(2px); }
      .ec-btn--lg { height: 44px; padding: 0 20px; font-size: 16px; }
      .ec-btn--lg .ec-arrow { font-size: 15px; }
      .ec-page .ec-btn--secondary,
      .ec-page a.ec-btn--secondary {
        background: transparent; border: 1px solid var(--ec-border); color: var(--ec-ink);
      }
      .ec-page .ec-btn--secondary:hover { background: rgba(26, 26, 22, 0.04); }
      .ec-actions { display: flex; gap: 12px; flex-wrap: wrap; }

      /* §4.2 grid paper */
      .ec-grid {
        --ec-cell: 148px;
        background-image:
          var(--ec-grid-mark),
          linear-gradient(to right,  var(--ec-rule) 1px, transparent 1px),
          linear-gradient(to bottom, var(--ec-rule) 1px, transparent 1px);
        background-size: var(--ec-cell) var(--ec-cell);
        background-position: -4px -4px, 0 0, 0 0;
      }
      @media (max-width: 1023px) { .ec-grid { --ec-cell: 112px; } }
      @media (max-width: 767px)  { .ec-grid { --ec-cell: 84px; } }

      /* §9 entrance */
      @keyframes ecIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        @keyframes ecIn { from { opacity: 0; } to { opacity: 1; } }
      }

      .ec-page a[href="/try-echelon"] { animation: none !important; box-shadow: none !important; }