/* Free calculator pages. Builds on site.css and uses its tokens. */
.tool { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.tool h1 { font: 800 clamp(2rem, 4.6vw, 3.1rem)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; margin: 6px 0 14px; }
.crumb { font-size: .88rem; color: var(--muted); margin: 0 0 22px; }
.crumb a { color: var(--brand); }

.explain { padding-block: clamp(40px, 6vw, 72px); }
.explain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.explain h2, .more h2 { font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.15 var(--display); margin: 0 0 18px; }
.steps { margin: 0; padding-left: 1.2em; display: grid; gap: 12px; color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.steps li::marker { font: 700 .95rem var(--mono); color: var(--brand); }
.explain details { border-top: 1px solid var(--rule); padding-block: 14px; }
.explain details:last-child { border-bottom: 1px solid var(--rule); }
.explain summary { font-weight: 700; cursor: pointer; }
.explain details p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.6; max-width: 60ch; }

.pitch { background: var(--wash); border-block: 1px solid var(--rule); padding-block: clamp(40px, 6vw, 72px); }
.pitch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pitch h2 { font: 800 clamp(1.6rem, 3.2vw, 2.3rem)/1.1 var(--display); letter-spacing: -.01em; text-wrap: balance; margin: 6px 0 14px; }
.pitch img { border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow); height: auto; }

.more { padding-block: clamp(40px, 6vw, 72px); }
.tool-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tool-list a { display: grid; gap: 6px; height: 100%; padding: 18px 20px; border: 2px solid var(--rule); border-radius: 12px;
  background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.tool-list a:hover { border-color: var(--brand); transform: translateY(-2px); }
.tool-list b { font: 700 1.08rem/1.2 var(--display); }
.tool-list span { color: var(--muted); font-size: .93rem; }

@media (max-width: 860px) { .explain-grid, .pitch-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tool-list a { transition: none; } .tool-list a:hover { transform: none; } }
.tool .calc label { align-content: end; }

.guide { max-width: 68ch; }
.guide h2 { font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--display); margin: 40px 0 12px; text-wrap: balance; }
.guide p { color: var(--ink-2); line-height: 1.7; font-size: 1.05rem; margin: 0 0 16px; }
.guide .sub { font-size: 1.15rem; color: var(--ink); }
.try-it { margin-top: 40px; padding: 24px; border: 2px dashed var(--rule); border-radius: 12px; background: var(--bench);
  display: grid; gap: 14px; justify-items: start; }
.try-it p { margin: 0; color: var(--ink); }