/* ════════════════════════════════════════════════════════════════════
   Tool landing pages (tools/*.html, written by scripts/build-tool-pages.py).

   Tokens, nav, buttons and footer come from magic-lab.css. Each page sets
   --fam on <body> to its tool's hue from the catalogue spectrum; that hue
   is used for small accents only (icon tiles, list markers), never for
   large fills, gradients or glows.
   ════════════════════════════════════════════════════════════════════ */
.tool-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--paper);
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; letter-spacing: -0.025em;
}
.tool-brand img { border-radius: 7px; }

.tl-lead { padding-block: clamp(36px, 6vw, 72px) clamp(24px, 4vw, 40px); }
.tl-lead > * { max-width: 920px; }   /* narrow text, but aligned with the sections below */
.tl-name {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-5);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--paper);
}
.tl-icon, .tl-ficon {
  display: grid; place-items: center; flex-shrink: 0; color: var(--fam);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05); background: color-mix(in srgb, var(--fam) 14%, transparent);
  border: 1px solid rgba(255,255,255,0.10); border-color: color-mix(in srgb, var(--fam) 30%, transparent);
}
.tl-icon { width: 44px; height: 44px; }
.tl-icon svg { width: 22px; height: 22px; }
.tl-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.tl-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fam); }
.tl-lead h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.0; letter-spacing: -0.042em;
  color: var(--paper); text-wrap: balance;
}
.tl-lead > p { margin-top: var(--space-4); max-width: 62ch; font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.7; color: var(--text-2); }
.tl-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.tl-lead > p.tl-note { margin-top: var(--space-3); font-size: 13px; color: var(--text-3); }

.tl-shot { margin: 0 0 clamp(40px, 6vw, 72px); }
.tl-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  box-shadow: var(--elevation-md);
}
.tl-shot figcaption { margin-top: var(--space-3); font-size: 13px; color: var(--text-3); }

.tl-section { padding-bottom: clamp(40px, 6vw, 72px); }
.tl-section h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.03em; color: var(--paper); margin-bottom: var(--space-5);
}

.tl-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.tl-feat { padding: var(--space-5); background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tl-feat .tl-ficon { width: 38px; height: 38px; margin-bottom: var(--space-4); }
.tl-feat .tl-ficon svg { width: 19px; height: 19px; }
.tl-feat h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--paper); margin-bottom: 6px; }
.tl-feat p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

.tl-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5) var(--space-7); }
.tl-group h3 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fam); margin-bottom: var(--space-3); }
.tl-group ul { list-style: none; margin: 0; padding: 0; }
.tl-group li { position: relative; padding: 7px 0 7px 18px; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tl-group li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 2px; background: var(--fam); opacity: .8; }

.tl-faq { max-width: 760px; }
.tl-q { border-top: 1px solid var(--line); }
.tl-q:last-child { border-bottom: 1px solid var(--line); }
.tl-q summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 16px; color: var(--paper); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.tl-q summary::-webkit-details-marker { display: none; }
.tl-q summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 20px; line-height: 1; }
.tl-q[open] summary::after { content: "−"; }
.tl-q p { padding: 0 0 18px; max-width: 68ch; font-size: 15px; line-height: 1.7; color: var(--text-2); }

.tl-rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.tl-rel {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5);
  background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
}
.tl-rel:hover { border-color: color-mix(in srgb, var(--fam) 42%, transparent); transform: translateY(-2px); }
.tl-rel .tl-ficon { width: 38px; height: 38px; }
.tl-rel .tl-ficon svg { width: 19px; height: 19px; }
.tl-rel strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--paper); }
.tl-rel span span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }