/* tpl/tools-index-099bf64b.css — page CSS shared by 1 page(s) of this template.
   Auto-extracted from inline <style> by scripts/refactor_css.py.
   Loaded after components.css; per-page :root{} stays inline. */

body { background: var(--color-base-bg); }
.hero {
      position: relative; overflow: hidden;
      background: var(--grad-signature);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 18px 50px color-mix(in srgb, var(--grad-signature-halo) 22%, transparent);
      padding: 3rem 1.5rem 3.25rem;
      text-align: center;
    }
.hero-kicker {
      font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.85); margin-bottom: 0.75rem;
    }
.hero h1 {
      font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 2.9rem);
      font-weight: 600; color: #fff; margin: 0 0 0.55rem; line-height: 1.05;
    }
.hero p {
      font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: rgba(255,255,255,0.88);
      max-width: 480px; margin: 0 auto; line-height: 1.6;
    }
.hero-meta {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem 1.1rem;
      margin-top: 1.35rem;
      font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.8);
    }
.hero-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-meta span::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%;
      background: rgba(255,255,255,0.7);
    }
.tools-grid {
      max-width: 960px; margin: 2.5rem auto; padding: 0 1.5rem 3rem;
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1.25rem;
    }
.tool-card {
      position: relative; overflow: hidden;
      background: var(--color-base-elevated); border: 1px solid var(--color-base-border);
      border-radius: 14px;
      padding: 1.5rem; text-decoration: none;
      display: flex; flex-direction: column;
      box-shadow:
        0 1px 2px color-mix(in srgb, var(--c) 12%, transparent),
        0 10px 26px color-mix(in srgb, var(--c) 9%, transparent);
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.2s;
    }
.tool-card::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
    }
.tool-card::after {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--c);
    }
.tool-card:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--c) 40%, var(--color-base-border));
      box-shadow:
        0 2px 4px color-mix(in srgb, var(--c) 16%, transparent),
        0 18px 40px color-mix(in srgb, var(--c) 18%, transparent);
    }
.tool-card:focus-visible {
      outline: 2px solid var(--c); outline-offset: 3px;
    }
.tool-chip {
      align-self: flex-start;
      font-family: 'DM Sans', sans-serif; font-size: 0.68rem;
      font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.2rem 0.6rem; border-radius: 4px; margin-bottom: 0.85rem;
      background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
    }
.tool-icon {
      align-self: flex-start; margin-bottom: 0.9rem; line-height: 0;
      width: 48px; height: 48px; border-radius: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff;
      background:
        radial-gradient(120% 115% at 30% 18%, rgba(255,255,255,0.55), rgba(255,255,255,0) 47%),
        linear-gradient(157deg,
          color-mix(in srgb, var(--c) 78%, #fff),
          var(--c) 54%,
          color-mix(in srgb, var(--c) 72%, #000) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 6px 16px color-mix(in srgb, var(--c) 32%, transparent);
    }
.tool-icon svg {
      width: 24px; height: 24px; display: block;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.22));
    }
.tool-name {
      font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600;
      color: var(--color-text-primary); margin: 0 0 0.4rem;
    }
.tool-desc {
      font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--color-text-secondary);
      line-height: 1.6; flex: 1;
    }
.tool-cta {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: 4px; margin-top: 1rem;
      font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
      color: var(--c);
    }
.tool-cta::after { content: "→"; }
.site-footer {
      max-width: 960px; margin: 0 auto; padding: 1.5rem; text-align: center;
      border-top: 1px solid var(--color-base-border);
      font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--color-text-tertiary);
    }
.site-footer a { color: var(--color-text-secondary); text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }