:root { --tool-anchor: #c4d6eb; --tool-card-anchor: #5f82b2; --tool-mint: #b9ded5; --tool-peach: #f3c3b6; --tool-sage: #d2dfc2; --tool-lavender: #d8d2ef; --tool-rose: #edcbd4; }
.tool-nav { display: flex; align-items: center; gap: 22px; font-weight: 900; }
.tool-nav a { text-decoration: none; }
.tools-hero { padding: clamp(58px, 8vw, 95px) clamp(28px, 8vw, 105px); color: var(--navy); background: var(--tool-anchor); }
.tools-hero .eyebrow, .tool-hero .eyebrow { color: var(--navy); }
.tools-hero h1 { margin: 10px 0; font-size: clamp(3rem, 7vw, 5.4rem); letter-spacing: -.05em; }
.tools-hero > p:last-child { max-width: 720px; font-size: 1.3rem; line-height: 1.55; }
.tools-section { padding: clamp(55px, 7vw, 90px) clamp(22px, 6vw, 80px) 100px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: auto; gap: 24px; }
.tool-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--cream); }
.tool-card__art { display: grid; height: 170px; place-items: center; color: white; background: var(--tool-card-anchor); }
.tool-card__art svg { width: 180px; height: 145px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tool-card > div:last-child { padding: 24px; }
.tool-card h2 { margin: 10px 0; font-size: 1.55rem; line-height: 1.12; }
.tool-card h2 a { text-decoration: none; }
.tool-card p:not(.article-card__topic) { color: var(--muted); line-height: 1.55; }
.tool-card__cta { font-weight: 900; }
.tool-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: center; gap: clamp(24px, 4vw, 40px); min-height: 0; padding: clamp(36px, 4.5vw, 60px) clamp(28px, 8vw, 105px); color: var(--navy); background: var(--tool-anchor); }
.theme-mint { background: var(--tool-mint); }.theme-peach { background: var(--tool-peach); }.theme-sage { background: var(--tool-sage); }.theme-lavender { background: var(--tool-lavender); }.theme-rose { background: var(--tool-rose); }.theme-blue { background: var(--tool-anchor); }
.tool-hero h1 { margin: 10px 0 16px; max-width: 760px; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -.055em; line-height: 1; }
.tool-hero p:not(.eyebrow) { max-width: 720px; font-size: 1.15rem; line-height: 1.55; }
.tool-reviewed { font-weight: 900; color: var(--navy); }
.tool-hero__doodle svg { width: min(100%, 260px); fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tool-layout { max-width: 980px; margin: auto; padding: clamp(36px, 5vw, 56px) 24px 100px; }
.tool-intro, .tool-safety, .tool-sources, .tool-related { font-size: 1.1rem; line-height: 1.7; }
.tool-limit, .tool-caution { padding: 20px 24px; border: 1px solid rgba(239,118,94,.35); border-radius: 20px; background: #fff0e9; }
.tool-panel { margin: 36px 0 42px; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: var(--cream); }
.tool-panel h2, .tool-layout h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.tool-form { display: grid; gap: 12px; }
.tool-form > label, .tool-form legend, .tool-gate label { font-weight: 900; }
.tool-form input, .tool-form select, .tool-gate input { width: 100%; min-height: 52px; padding: 11px 14px; border: 2px solid rgba(16,34,82,.2); border-radius: 14px; background: white; color: var(--navy); font: inherit; }
.tool-form fieldset { padding: 0; border: 0; }
.tool-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tool-choices label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.tool-choices input { width: 22px; min-height: 22px; }
.tool-field-hint { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
.tool-field-error { margin: 8px 0 0; color: #8a2e20; font-weight: 900; }
.tool-form button, .tool-gate button { margin-top: 16px; padding: 15px 24px; border: 0; border-radius: 999px; color: white; background: var(--navy); font: 900 1.05rem "Nunito", sans-serif; cursor: pointer; }
.tool-status { min-height: 28px; margin-top: 14px; color: var(--muted); font-weight: 800; }
.tool-result { margin-top: 30px; }
.tool-gate, .tool-result__content { padding: clamp(24px, 5vw, 42px); border-radius: 24px; background: white; box-shadow: 0 18px 50px rgba(16,34,82,.1); }
.tool-result__summary { color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
.tool-result__content section { margin: 28px 0; }
.tool-result__content li { margin: 10px 0; line-height: 1.55; }
.tool-next {
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(143, 180, 110, 0.4);
  border-radius: 20px;
  background: #eef4e8;
}
.tool-app-link { display: inline-block; margin-top: 24px; font-weight: 900; }
.tool-sources li { margin: 12px 0; }
.tool-safety { padding: 20px 24px; border: 1px solid rgba(16,34,82,.18); border-radius: 20px; background: #eef4f8; }
.tool-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tool-related li { margin: 10px 0; }
.campaign-honeypot { position: absolute !important; left: -10000px !important; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tool-nav a:first-child { display: none; } .tool-hero { grid-template-columns: 1fr; gap: 14px; padding: 36px 24px 28px; } .tool-hero h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); } .tool-hero__doodle { width: 140px; margin: 0 auto; } .tool-grid, .tool-choices, .tool-related__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }