/*
  Shared layout for the public free tools and their index (/tools).

  Tool widgets keep their own palette in every site theme, because their
  scripts paint some colours directly. This file only lays out the page
  around them, so it uses the site's semantic tokens.
*/
.tool-page { min-height: 100vh; display: flex; flex-direction: column; }
.tool-main { flex: 1; width: min(1100px, 100%); margin: 0 auto; padding: 48px 20px 72px; }

.tool-intro { max-width: 760px; margin: 0 0 24px; }
.tool-eyebrow { margin: 0 0 12px; color: var(--cw-muted); font-size: 13px; font-weight: 600; }
.tool-intro h1 { margin: 0 0 12px; color: var(--cw-text); font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.tool-intro h1 span { color: var(--cw-blue); }
.tool-intro .lede { margin: 0; color: var(--cw-muted); font-size: 16px; line-height: 1.6; }

.tool-more { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 36px; color: var(--cw-muted); font-size: 14px; }
.tool-more a { color: var(--cw-text); text-decoration: underline; text-underline-offset: 3px; }

.tool-cta { margin-top: 28px; padding: 28px; border: 1px solid var(--cw-border-soft); border-radius: 16px; }
.tool-cta h2 { margin: 0 0 10px; color: var(--cw-text); font-size: 22px; line-height: 1.3; }
.tool-cta p { margin: 0 0 18px; max-width: 680px; color: var(--cw-muted); font-size: 15px; line-height: 1.7; }
.tool-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tool-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tool-card { display: block; height: 100%; padding: 22px; border: 1px solid var(--cw-border-soft); border-radius: 16px; color: inherit; text-decoration: none; }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--cw-muted); }
.tool-card h2 { margin: 0 0 8px; color: var(--cw-text); font-size: 18px; line-height: 1.3; }
.tool-card p { margin: 0; color: var(--cw-muted); font-size: 15px; line-height: 1.6; }

.tool-updated { margin: 12px 0 0; color: var(--cw-faint); font-size: 13px; }

.tool-faq { margin-top: 36px; max-width: 760px; }
.tool-faq h2 { margin: 0 0 12px; color: var(--cw-text); font-size: 20px; line-height: 1.3; }
.tool-faq__item { padding: 16px 0; border-top: 1px solid var(--cw-border-soft); }
.tool-faq__item h3 { margin: 0 0 6px; color: var(--cw-text); font-size: 16px; line-height: 1.4; }
.tool-faq__item p { margin: 0; color: var(--cw-muted); font-size: 15px; line-height: 1.7; }

@media (max-width: 600px) {
  /* Same phone header fit as the landing page (landing.css), so the nav
     stays inside the viewport. */
  .tool-page .marketing-nav { gap: 12px; }
  .tool-page .marketing-nav__actions .button--light { min-height: 36px; padding: 0 12px; white-space: nowrap; }
  .tool-main { padding: 32px 16px 56px; }
  .tool-cta { padding: 20px; }
}
@media (max-width: 420px) {
  .tool-page .marketing-nav .status-badge { display: none; }
}