/* Research tools — the Partners / account paper, ambient wash, and type system. */
.recon,
.recon-feature {
  --recon-paper: #fcfaf6;
  --recon-ink: #17171d;
  --recon-muted: #65646d;
  --recon-line: rgb(23 41 83 / 0.12);
  --recon-violet: var(--dusk-violet, #172953);
  --recon-mono: var(--font-mono--family, monospace);
  color: var(--recon-ink);
}
.recon { background: var(--recon-paper); padding-bottom: 76px; }
.recon *, .recon-feature * { box-sizing: border-box; }
.recon [hidden] { display: none !important; }
.recon-shell { width: min(90%, 1280px); margin-inline: auto; }
.recon :is(button, input, a, summary):focus-visible,
.recon-feature a:focus-visible { outline: 2px solid var(--recon-violet); outline-offset: 4px; }
.recon button { cursor: pointer; font: inherit; }
.recon :is(h1, h2, h3, p) { margin-top: 0; }
.recon-eyebrow {
  margin: 0 0 18px;
  color: var(--recon-violet);
  font-family: var(--recon-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.recon-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #82799b; vertical-align: middle; margin-right: 8px; }
.recon-hero { padding-block: 46px 36px; }
.recon-hero h1 {
  margin-bottom: 20px;
  font-family: var(--font-heading--family);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.recon-hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.recon-hero__bottom > p { max-width: 590px; margin-bottom: 0; color: var(--recon-muted); font-size: 1rem; line-height: 1.6; }
.recon-hero__tag { flex-shrink: 0; padding: 9px 13px; border: 1px solid var(--recon-line); border-radius: 5px; color: var(--recon-muted); font: 9px/1.4 var(--recon-mono); letter-spacing: .05em; text-transform: uppercase; }
.recon-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--recon-line);
  border-radius: 26px;
  background-color: #eef2f4;
  background-image: radial-gradient(620px 520px at 96% 0%, rgb(226 196 190 / .5), transparent 70%), radial-gradient(680px 600px at 0% 64%, rgb(186 214 236 / .5), transparent 72%);
  box-shadow: 0 24px 70px rgb(23 41 83 / .06);
}
.recon-form { margin: 0; padding: clamp(24px, 2.8vw, 40px); border: 1px solid rgb(255 255 255 / .9); border-radius: 17px; background: linear-gradient(120deg, #fff 0%, #fcfaf6 76%, #f5f8fa 100%); }
.recon-form__head, .recon-result__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recon-form__head h2, .recon-result__head h2 { margin: 0; font: 500 22px/1.2 var(--font-heading--family); letter-spacing: -.025em; }
.recon .recon-reset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0 6px 10px; border: 0; background: none; color: var(--recon-muted); font-size: 12px; }
.recon-reset span { font-size: 21px; line-height: 1; }
.recon .recon-reset:hover { color: var(--recon-violet); }
.recon-form__intro { margin-block: 8px 27px; color: var(--recon-muted); font-size: 13px; line-height: 1.5; }
.recon-field { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--recon-line); }
.recon-field--last { margin-bottom: 0; padding-bottom: 18px; }
.recon-field > label, .recon-field__heading > label { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; color: var(--recon-ink); font-size: 14px; font-weight: 500; }
.recon-step { color: #827c8c; font: 10px/1.4 var(--recon-mono); letter-spacing: .04em; }
.recon-input-wrap { position: relative; }
.recon .recon-input-wrap input { width: 100%; height: 52px; padding: 10px 62px 10px 16px; border: 1px solid #cdd0d8; border-radius: 8px; background: #fff; box-shadow: 0 2px 3px rgb(23 41 83 / .02); color: var(--recon-ink); font: 400 23px/1 var(--recon-mono); appearance: textfield; }
.recon-input-wrap input::-webkit-inner-spin-button, .recon-input-wrap input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.recon .recon-input-wrap input:focus { border-color: #82799b; outline: 2px solid rgb(130 121 155 / .18); outline-offset: 0; }
.recon-input-wrap > span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--recon-muted); font: 12px/1 var(--recon-mono); }
.recon .recon-input-wrap input[aria-invalid="true"] { border-color: #a74735; }
.recon-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.recon-presets button { min-width: 56px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--recon-line); border-radius: 5px; background: transparent; color: #65616e; font: 10px/1.4 var(--recon-mono); transition: background 140ms ease, border-color 140ms ease; }
.recon-presets button:hover { border-color: #82799b; background: #f0edf5; }
.recon-presets button[aria-pressed="true"] { border-color: #d6cfe2; background: #ebe7f1; color: #51476c; }
.recon-hint { margin: 9px 0 0; color: var(--recon-muted); font-size: 11px; line-height: 1.5; }
.recon-field__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recon-field__heading > label { margin: 0; }
.recon .recon-segment { display: flex; gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--recon-line); border-radius: 8px; background: rgb(255 255 255 / .35); }
.recon-segment > label { position: relative; flex: 1; margin: 0; cursor: pointer; }
.recon-segment input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.recon-segment label > span { display: block; padding: 10px 9px; border-radius: 5px; color: #635e70; text-align: center; font: 12px/1.4 var(--recon-mono); }
.recon-segment input:checked + span { color: var(--recon-violet); background: #fff; box-shadow: 0 2px 8px rgb(46 41 65 / .08); }
.recon-segment input:focus-visible + span { outline: 2px solid var(--recon-violet); outline-offset: 2px; }
.recon-segment label:hover > span { background: rgb(255 255 255 / .65); }
.recon-segment small { display: block; margin-top: 2px; color: #726c7e; font-size: 9px; }
.recon .recon-segment--unit { flex-shrink: 0; padding: 2px; gap: 2px; border-radius: 5px; background: #eeecf1; }
.recon-segment--unit label > span { padding: 5px 10px; font-size: 10px; border-radius: 3px; }
.recon-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 17px; color: var(--recon-muted); font: 9px/1.4 var(--recon-mono); }
.recon-form__foot .recon-dot { width: 5px; height: 5px; }
.recon-mobile-result { display: none; color: var(--recon-violet); }
.recon-result { position: relative; min-width: 0; padding: clamp(24px, 2.8vw, 40px); scroll-margin-top: 120px; }
.recon-result__badge { border: 1px solid rgb(81 71 108 / .15); border-radius: 30px; padding: 5px 10px; color: var(--recon-violet); font: 9px/1.2 var(--recon-mono); }
.recon-result__amount { margin-block: 40px 32px; }
.recon-result__amount .recon-eyebrow { margin-bottom: 10px; font-size: 9px; }
.recon-result__number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; font: 400 clamp(3.25rem, 5.8vw, 5.2rem)/1 var(--font-heading--family); letter-spacing: -.035em; overflow-wrap: anywhere; }
.recon-result__unit { font: 400 20px/1 var(--font-heading--family); color: #686272; letter-spacing: -.02em; }
.recon-result__volume { margin: 14px 0 0; color: var(--recon-violet); font: 13px/1.5 var(--recon-mono); overflow-wrap: anywhere; }
.recon-result__equals { padding-inline: 10px; color: #9e94a9; }
.recon .recon-syringe-size { min-width: 0; margin: 0; padding: 0; border: 0; }
.recon-syringe-size legend { width: 100%; margin-bottom: 10px; padding: 0; font-size: 12px; color: #50495c; }
.recon-syringe-size legend > span { float: right; color: #6c6378; font: 9px/1.6 var(--recon-mono); }
.recon-meter { margin: 20px -6px 0; color: #9993a7; }
.recon-meter svg { display: block; width: 100%; height: auto; }
.recon-meter text { font: 10px var(--recon-mono); fill: #615b6f; }
.recon-meter-note { margin: -2px 0 24px; color: #726a7d; font-size: 10px; text-align: center; line-height: 1.5; }
.recon-stats { display: grid; grid-template-columns: 1.15fr 1fr; margin: 0; border-block: 1px solid var(--recon-line); padding-block: 20px; }
.recon-stats > div + div { padding-left: 20px; border-left: 1px solid var(--recon-line); }
.recon-stats dt { margin-bottom: 10px; color: #686172; font-size: 11px; }
.recon-stats dd { margin: 0; font: 400 25px/1.2 var(--font-heading--family); letter-spacing: -.02em; overflow-wrap: anywhere; }
.recon-stats dd small { font: 10px/1.2 var(--recon-mono); color: #70677f; letter-spacing: 0; }
.recon-result__equation { margin: 18px 0; color: #62596f; font: 10px/1.65 var(--recon-mono); }
.recon .recon-copy { display: flex; align-items: center; justify-content: center; width: 100%; gap: 9px; min-height: 45px; border: 1px solid var(--recon-violet); border-radius: 8px; background: var(--recon-violet); color: #fff; font-size: 12px; font-weight: 500; transition: background 160ms ease; }
.recon .recon-copy:hover { background: #403756; }
.recon .recon-copy:disabled { cursor: default; opacity: .45; }
.recon-copy-status { min-height: 16px; margin: 8px 0 -16px; font-size: 10px; line-height: 1.5; color: #5b526b; text-align: center; }
.recon-example-note { max-width: 900px; margin: 18px auto 0; color: var(--recon-muted); text-align: center; font-size: 10px; line-height: 1.6; }
.recon-field-error { margin: 8px 0 0; color: #9c3d2d; font-size: 12px; line-height: 1.5; }
.recon-result-message, .recon-notice { padding: 12px 14px; border: 1px solid #d9c6b7; border-radius: 7px; background: #fff4e9; color: #785134; font-size: 12px; line-height: 1.5; }
.recon-result[data-state="invalid"] .recon-result-message { background: #fff6f0; }
.recon-feature--supplies { margin-top: 76px; }
.recon-explainer { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; padding-block: 85px 65px; }
.recon-explainer h2, .recon-faq h2 { margin: 0; font: 500 clamp(1.75rem, 3.2vw, 2.5rem)/1.08 var(--font-heading--family); letter-spacing: -.025em; }
.recon-explainer__cta { margin-top: 28px; }
.recon-formulas > div { display: flex; align-items: flex-start; gap: 20px; padding-block: 21px; border-top: 1px solid var(--recon-line); }
.recon-formulas > div:last-child { border-bottom: 1px solid var(--recon-line); }
.recon-formulas .recon-step { margin-top: 4px; }
.recon-formulas h3 { margin-bottom: 7px; font: 500 17px/1.3 var(--font-heading--family); }
.recon-formulas p { margin-bottom: 0; color: var(--recon-muted); font-size: 12px; line-height: 1.6; }
.recon-formulas .recon-formula-value { margin-top: 7px; color: var(--recon-violet); font: 11px/1.6 var(--recon-mono); overflow-wrap: anywhere; }
.recon-faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; padding-top: 55px; border-top: 1px solid var(--recon-line); }
.recon-faq details { border-bottom: 1px solid var(--recon-line); }
.recon-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 21px; font-size: 14px; line-height: 1.5; cursor: pointer; list-style: none; }
.recon-faq summary::-webkit-details-marker { display: none; }
.recon-faq details:first-child summary { padding-top: 0; }
.recon-faq summary > span { flex-shrink: 0; font: 400 22px/1 var(--font-heading--family); color: var(--recon-violet); }
.recon-faq details[open] summary > span { transform: rotate(45deg); }
.recon-faq details > p { margin-bottom: 20px; color: var(--recon-muted); font-size: 13px; line-height: 1.75; }
.recon-research-note { display: grid; grid-template-columns: 170px 1fr; gap: 30px; align-items: baseline; margin-top: 65px; padding: 24px; border: 1px solid var(--recon-line); border-radius: 10px; }
.recon-research-note .recon-eyebrow { margin: 0; font-size: 9px; }
.recon-research-note p { margin: 0; color: var(--recon-muted); font-size: 11px; line-height: 1.75; }
.recon-feature { padding-bottom: 50px; }
.recon-feature__link { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: clamp(28px, 4vw, 50px); border: 1px solid var(--recon-line); border-radius: 22px; background: radial-gradient(ellipse at 96% 0, rgb(226 196 190 / .45), transparent 70%), radial-gradient(ellipse at 0 64%, rgb(186 214 236 / .45), transparent 72%), #eef2f4; color: inherit; text-decoration: none; }
.recon-feature h2 { margin: 0 0 12px; font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-heading--family); letter-spacing: -.025em; }
.recon-feature__link > div > p:last-child { max-width: 630px; margin: 0; color: var(--recon-muted); font-size: 14px; line-height: 1.7; }
.recon-feature__cta,
.recon-explainer__cta { display: inline-flex; align-items: center; justify-content: center; padding: 15px 21px; border: 1px solid var(--recon-violet); border-radius: 8px; color: #fff; background: var(--recon-violet); font-size: 12px; text-decoration: none; transition: background 160ms ease; }
.recon-feature__cta { flex-shrink: 0; }
.recon-feature__link:hover .recon-feature__cta,
.recon-explainer__cta:hover { background: #403756; }
@media (max-width: 1000px) {
  .recon-hero__tag { display: none; }
  .recon-form, .recon-result { padding: 25px; }
  .recon-presets { gap: 5px; }
  .recon-presets button { min-width: 49px; padding-inline: 8px; }
  .recon-explainer, .recon-faq { gap: 40px; grid-template-columns: 1fr 1.2fr; }
  .recon-stats > div + div { padding-left: 12px; }
}
@media (max-width: 760px) {
  .recon-shell { width: calc(100% - 32px); }
  .recon-hero { padding-block: 30px 28px; }
  .recon-hero h1 { max-width: 15ch; margin-bottom: 16px; }
  .recon-hero__bottom > p { font-size: 14px; }
  .recon-eyebrow { font-size: 9px; margin-bottom: 14px; }
  .recon-workspace { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px; border-radius: 21px; }
  .recon-form { padding: 22px; border-radius: 14px; }
  .recon-field { margin-bottom: 19px; padding-bottom: 19px; }
  .recon-field--last { margin-bottom: 0; }
  .recon-presets button { min-height: 38px; font-size: 10px; padding-inline: 10px; }
  .recon-segment--unit label > span { padding: 8px 10px; }
  .recon-mobile-result { display: inline-block; padding-block: 8px; }
  .recon-form__foot { margin-top: 10px; }
  .recon-result { padding: 30px 22px; }
  .recon-result__amount { margin-block: 32px 28px; }
  .recon-result__number { font-size: 70px; }
  .recon-copy-status { margin-bottom: -14px; }
  .recon-example-note { margin: 16px 10px 0; text-align: left; }
  .recon-explainer { grid-template-columns: 1fr; gap: 28px; padding-block: 55px 45px; }
  .recon-explainer h2 br { display: none; }
  .recon-explainer__cta { margin-top: 18px; }
  .recon-faq { grid-template-columns: 1fr; gap: 32px; padding-top: 38px; }
  .recon-research-note { grid-template-columns: 1fr; gap: 12px; margin-top: 42px; padding: 20px; }
  .recon { padding-bottom: 44px; }
  .recon-feature__link { flex-direction: column; align-items: flex-start; gap: 24px; border-radius: 18px; }
  .recon-feature { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .recon *, .recon-feature * { transition: none !important; scroll-behavior: auto !important; }
}