/* instrument.css — the shared kit for gate-door / tool pages (2026-07-12).
   One source of physics for every "instrument" page (health check, future
   tools) plus the split editorial hero (switch guide). Values are the
   flagship tokens: calc-hero (calculator.css) and svc-hero (services.css).
   Pages load: main.css + components.css (+ forms.css if a form) + this.
   NEVER re-declare these in page-scoped <style> blocks — that's how the
   17px-caption cascade bug happened. */

@keyframes cs-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(93,118,82,0.5); } 70% { box-shadow: 0 0 0 9px rgba(93,118,82,0); } 100% { box-shadow: 0 0 0 0 rgba(93,118,82,0); } }

/* ── Centered tool hero (calculator pattern) ── */
.ins-hero { max-width: var(--container-xl, 1280px); margin: 0 auto; padding: 72px 40px 26px; text-align: center; }
.ins-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  color: var(--color-primary-dark); font-weight: 500; }
.ins-dot { width: 8px; height: 8px; border-radius: var(--radius-full, 999px); background: var(--color-primary); flex: none; }
.js .ins-dot { animation: cs-pulse-green 2.4s ease-out infinite; }
.ins-hero h1 { font-family: var(--font-display-editorial); font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 58px); line-height: 1.06; letter-spacing: -0.022em;
  margin: 0 auto 22px; color: var(--color-charcoal); max-width: 22ch; text-wrap: balance; }
.ins-hero h1 em { font-style: italic; font-weight: 400; color: var(--color-primary-dark); }
.ins-hero > p { font-size: 17px; line-height: 1.65; color: var(--color-gray-600); max-width: 62ch; margin: 0 auto; }

/* ── Split editorial hero (services pattern) ── */
.ins-hero--split { max-width: 1280px; margin: 0 auto; padding: 76px 40px 56px; display: grid;
  grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; text-align: left; }
.ins-hero--split .ins-eyebrow { display: flex; margin-bottom: 28px; }
.ins-hero--split h1 { font-size: clamp(2.2rem, 4.5vw, 54px); margin: 0 0 24px; max-width: none; }
.ins-hero--split > div > p, .ins-hero--split .ins-lede { font-size: 17.5px; line-height: 1.65;
  color: var(--color-gray-600); max-width: 54ch; margin: 0; }
.ins-hero__media { border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(44,44,44,.35); aspect-ratio: 4 / 3; }
.ins-hero__media picture { display: block; width: 100%; height: 100%; }
.ins-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── The instrument card (form) ── */
.ins-card { max-width: 640px; margin: 34px auto 0; background: var(--color-white, #fff);
  border: 1px solid var(--color-border); border-radius: 14px; padding: 32px 34px 28px; text-align: left;
  box-shadow: 0 30px 70px -20px rgba(44,44,44,.25); }
.ins-card .form-group { margin-bottom: 16px; }
.ins-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ins-card .input { width: 100%; }
.ins-card .form__submit { display: block; width: 100%; text-align: center; font-size: 15px; padding: 13px 24px; }
.ins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ins-card .ins-fine { font-family: var(--font-mono); font-size: 10px; line-height: 1.6;
  letter-spacing: .08em; color: var(--color-text-light); margin: 12px 0 0; text-align: center; }
.ins-error { background: #fdf2f0; border: 1px solid #e5b8ae; color: #a3452c;
  border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* ── Numbered feature section ── */
.ins-section { max-width: 860px; margin: 56px auto 0; padding: 48px 24px 70px;
  border-top: 1px solid var(--color-border); }
.ins-num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  color: var(--color-primary); font-weight: 500; margin-bottom: 12px; }
.ins-section h2 { font-family: var(--font-display-editorial); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 34px); color: var(--color-charcoal);
  margin: 0 0 26px; letter-spacing: -0.018em; }
.ins-section h2 em { font-style: italic; font-weight: 400; color: var(--color-primary-dark); }
.ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ins-item { border-top: 2px solid var(--color-primary); padding-top: 14px; }
.ins-item .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--color-primary); margin-bottom: 8px; font-weight: 500; }
.ins-item p { font-size: 14px; line-height: 1.6; color: var(--color-gray-600); margin: 0; }

/* ── Cross-link / callout box ── */
.ins-cross { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
.ins-cross .box { border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  background: var(--color-white, #fff); padding: 20px 24px; }
.ins-cross .micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.ins-cross p { font-size: 14px; color: var(--color-gray-600); margin: 0; }
.ins-cross a { color: var(--color-primary-dark); font-weight: 600; }

@media (max-width: 900px) {
  .ins-hero--split { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px 20px; }
}
@media (max-width: 860px) { .ins-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .ins-grid, .ins-row { grid-template-columns: 1fr; }
  .ins-hero { padding: 44px 20px 20px; }
}