/* Words to minutes calculator page. Sits on the shared container system
   (.wrap) and reuses shared tokens from site.css (--yellow, --ink, --muted,
   --faint, --hair). Pure in-page tool, no capture. */

.wtm-page { padding: 80px 0 96px; }

.wtm-hero { text-align: center; margin: 0 0 44px; }
.wtm-kicker { font-size: 14px; letter-spacing: .02em; color: var(--muted); margin: 0 0 14px; }
.wtm-title { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.022em; margin: 0 auto 18px; max-width: 16ch; }
.wtm-lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--muted); margin: 0 auto; max-width: 56ch; }

.wtm-card { border: 1px solid var(--hair); border-radius: 20px; background: #fff; padding: 30px 28px 34px; box-shadow: 0 30px 70px -46px rgba(0,0,0,0.4); }

.wtm-textarea { width: 100%; min-height: 150px; resize: vertical; border: 1px solid var(--hair); border-radius: 14px; padding: 15px 16px; font: inherit; font-size: 16px; line-height: 1.55; color: var(--ink); background: #fff; box-sizing: border-box; }
.wtm-textarea::placeholder { color: var(--faint); }
.wtm-textarea:focus { outline: none; border-color: var(--yellow-2, #f0b90b); }

.wtm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.wtm-row label { font-size: 15px; color: var(--muted); }
.wtm-count { width: 110px; border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.wtm-count:focus { outline: none; border-color: var(--yellow-2, #f0b90b); }

.wtm-picker { margin: 22px 0 0; }
.wtm-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.wtm-chip { border: 1px solid var(--hair); border-radius: 999px; background: #fff; padding: 9px 16px; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.wtm-chip b { font-weight: 600; color: var(--ink); margin-right: 5px; }
.wtm-chip:hover { border-color: rgba(0,0,0,.2); }
.wtm-chip[aria-pressed="true"] { background: var(--yellow-soft, rgba(245,197,24,0.16)); border-color: var(--yellow-2, #f0b90b); color: var(--ink); }
.wtm-chip-cap { margin: 12px 0 0; font-size: 13.5px; color: var(--faint); }

.wtm-readout { margin: 26px 0 0; padding: 22px 0 4px; border-top: 1px solid var(--hair); text-align: center; }
.wtm-readout .wtm-big { font-size: clamp(28px, 5vw, 40px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.wtm-sec { margin: 72px 0 0; }
.wtm-sec h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.015em; margin: 0 0 18px; }
.wtm-sec p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 64ch; margin: 0 0 14px; }
.wtm-sec a { color: var(--ink); font-weight: 550; }

.wtm-table { border-collapse: collapse; margin: 0 0 12px; font-size: 16px; }
.wtm-table th, .wtm-table td { text-align: left; padding: 9px 26px 9px 0; border-bottom: 1px solid var(--hair); color: var(--muted); }
.wtm-table th { color: var(--ink); font-weight: 550; }
.wtm-cap { font-size: 14px; color: var(--faint); margin: 0; max-width: 56ch; line-height: 1.5; }

.wtm-pointer { max-width: 640px; margin: 40px auto 0; text-align: center; font-size: 17px; line-height: 1.5; color: var(--muted); }
.wtm-pointer a { color: var(--ink); font-weight: 550; }

@media (max-width: 620px) {
  .wtm-page { padding: 52px 0 72px; }
  .wtm-card { padding: 22px 20px 26px; }
  .wtm-sec { margin-top: 56px; }
}