* { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; min-height: 100vh;
    background: var(--chalk);
    color: var(--fg-1);
    font-family: var(--font-sans);
  }
  .shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  /* Header */
  .top {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-12);
  }
  .top-logo {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--chalk-warm) url('../assets/logo-club.png') center/cover no-repeat;
    box-shadow: 0 0 0 1px var(--border);
    flex: none;
  }
  .top-wm {
    display: flex; flex-direction: column; line-height: 1; gap: 4px;
  }
  .top-wm .b1 {
    font-family: var(--font-display);
    font-size: 24px; text-transform: uppercase;
    color: var(--rock); letter-spacing: 0.02em;
  }
  .top-wm .b2 {
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mer-deep);
  }
  .top a.ext {
    margin-left: auto;
    font-size: 12px; font-weight: 700;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--fg-2); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--radius-pill);
    transition: all var(--dur-fast) var(--ease-out);
  }
  .top a.ext:hover { color: var(--rock); background: var(--neutral-100); }

  /* Hero */
  .eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--mer-deep);
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: var(--space-5);
  }
  .eyebrow::before { content:''; width: 24px; height: 1.5px; background: var(--mer); }
  h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 1.0; letter-spacing: 0;
    text-transform: uppercase; color: var(--rock);
    margin: 0 0 var(--space-4);
  }
  .lede { color: var(--fg-2); font-size: 16px; max-width: 56ch; margin: 0; line-height: 1.55; }

  /* Section heads */
  .section-bar {
    display: flex; align-items: center; gap: var(--space-4);
    margin: var(--space-16) 0 var(--space-6);
  }
  .section-bar h2 {
    font-family: var(--font-display);
    font-size: 28px; text-transform: uppercase;
    letter-spacing: 0.01em; margin: 0; line-height: 1;
  }
  .section-bar .rule {
    flex: 1; height: 1px; background: var(--border);
  }
  .section-bar .count {
    font-size: 11px; font-weight: 700; color: var(--fg-3);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  }

  /* Tool grid */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
  }
  .tool {
    display: flex; flex-direction: column; gap: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-decoration: none; color: inherit;
    box-shadow: var(--shadow-1);
    position: relative;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    min-height: 220px;
    -webkit-tap-highlight-color: rgba(43,168,214,0.18);
  }
  .tool:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--rock);
  }
  .tool:focus-visible {
    outline: none;
    border-color: var(--mer);
    box-shadow: 0 0 0 3px rgba(43,168,214,0.22), var(--shadow-2);
  }
  .tool:active { transform: translateY(0); transition-duration: var(--dur-fast); }
  .tool:hover .open svg { transform: translateX(3px); }
  .tool-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--mer-foam); color: var(--mer-deep);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
  }
  .tool-icon svg { width: 22px; height: 22px; }
  .tool h3 {
    margin: 0; font-size: 19px; font-weight: 700;
    line-height: 1.25; color: var(--rock);
  }
  .tool p {
    margin: 0; color: var(--fg-2); font-size: 13.5px;
    line-height: 1.5; flex: 1;
  }
  .tool .meta {
    display: flex; align-items: center; gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--divider);
    font-size: 11px; color: var(--fg-3);
    letter-spacing: 0.04em;
  }
  .tool .meta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mer);
  }
  .tool .open {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--mer-deep);
  }
  .tool .open svg { transition: transform var(--dur-base) var(--ease-out); }

  /* Status pill on tool */
  .tag {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: var(--mer-foam); color: var(--mer-deep);
    font-size: 10px; font-weight: 700;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    line-height: 1.4;
  }
  .tag.soon { background: var(--neutral-100); color: var(--fg-2); }

  /* Coming-soon tools */
  .tool.soon {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    cursor: default;
  }
  .tool.soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-strong);
  }
  .tool.soon .tool-icon {
    background: var(--neutral-100); color: var(--neutral-400);
  }
  .tool.soon h3, .tool.soon p { color: var(--fg-3); }

  /* Footer */
  .foot {
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--fg-3); font-size: 12px;
  }
  .foot .spacer { flex: 1; }
  .foot a { color: var(--fg-2); }