/* The Make Inquiry CTA on every page, as a 1990s desktop mail window (build.py cta(), typing: assets/mailbox.js).
   Its own file so the hand-built cold-outbound.html can use it without brand.css; page() loads it
   BEFORE brand.css, since the kairos dictionary (.dict, in brand.css) reuses and overrides .mail.
   1-bit, after early Mac OS: white window, 1px ink borders, a hard offset shadow, a pinstriped
   title bar with a close box, field rows ruled off in dotted ink, and Send drawn as the
   default button (the thick rounded ring). Fixed colours in both themes: it is a screen. */
.mail {
  position: relative;
  --ink: #111; --paper: #FFFFFF;
  max-width: 1080px; margin-inline: auto; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--font-mono);
}
/* the title bar: Keycap Cobalt with the brand's fine dot grid, a signal orange close cell,
   the window's pixel icon beside a white title, and the pixel K at the right edge */
.mail__bar {
  position: relative; display: grid; place-items: center; height: 34px; border-bottom: 1.5px solid var(--ink);
  background: radial-gradient(circle, rgba(255, 255, 255, .22) .8px, transparent 1.2px) 0 0 / 6px 6px, #2F5BD3;
  color: #fff;
}
.mail__bar span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.mail__close { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; background: #E2520F; border: 1.5px solid var(--ink); }
.win__ico { width: 16px; height: 16px; fill: currentColor; }
.win__k { position: absolute; right: 11px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; }
.mail__head { margin: 0; padding: 8px 26px 0; }
.mail__head > div { display: grid; grid-template-columns: 104px 1fr; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px dotted var(--ink); }
.mail__head dt { font-size: 13.5px; font-weight: 600; text-align: right; letter-spacing: .03em; }
.mail__head dd { margin: 0; font-size: 15.5px; }
.mail__subject dd .h2 { margin: 0; font-family: var(--font-display, inherit); color: var(--ink); font-size: clamp(28px, 4.2vw, 56px); line-height: 1.04; }
.mail__body { padding: 28px 26px 8px calc(26px + 118px); min-height: 8em; }
.mail__body .lede { margin: 0; color: #333; font-family: var(--font-mono); font-size: 17.5px; line-height: 1.7; max-width: 60ch; }
/* the text cursor: a solid block that blinks, after the last character typed */
.mail__body .lede::after { content: ""; display: inline-block; width: .6em; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--ink); animation: mail-caret 1s steps(1) infinite; }
@keyframes mail-caret { 50% { opacity: 0; } }
.mail__actions { display: flex; justify-content: flex-end; gap: 18px; padding: 22px 26px 26px; }
.mail__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border: 1.5px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
/* the default button: signal orange, with the extra thick ring of a classic dialog's default */
.mail__btn--send { background: #E2520F; color: #fff; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--ink); }
.mail__btn:hover, .mail__btn:focus-visible { background: var(--ink); color: var(--paper); }
.mail__plane { width: 15px; height: 15px; fill: currentColor; }
/* Kairo's pixel K as the recipient's avatar */
.mail__to { display: flex; align-items: center; gap: 9px; }
.mail__avatar { width: 22px; height: 22px; }
.mail__btn:active { translate: 0 1px; }
/* inside a practice page's pricing section */
.pricing__mail { margin-top: clamp(28px, 4vw, 48px); }
/* the mail window and the kairos dictionary close every page as one pair, with no rule between them
   and about 30% of the usual section spacing around them (cut 70% at the user's request, 2026-10-27) */
.section--mail { padding-top: clamp(8px, 1vw, 14px); padding-bottom: clamp(16px, 2.4vw, 34px); }
.rule + .section--mail { padding-top: clamp(14px, 1.8vw, 25px); }
.section--mail + .section--tight { padding-top: clamp(16px, 2.4vw, 34px); padding-bottom: clamp(14px, 1.8vw, 25px); }
@media (max-width: 640px) {
  .mail { box-shadow: 4px 4px 0 var(--ink); }
  .win__k { display: none; }
  .mail__head > div { grid-template-columns: 62px 1fr; }
  .mail__head { padding-inline: 16px; }
  .mail__head > div { gap: 10px; padding: 10px 0; }
  .mail__head dt { font-size: 12px; }
  .mail__head dd { font-size: 14px; }
  .mail__body { padding: 18px 16px 4px; }
  .mail__body .lede { font-size: 15.5px; }
  .mail__subject .h2 br { display: none; }   /* the desktop line break leaves ragged lines in a narrow column */
  .mail__actions { justify-content: stretch; flex-direction: column; padding: 16px; }
  .mail__btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mail__body .lede::after { animation: none; } }

/* Make Inquiry "sends": a deep sheet slides over the window body while the clock-K sweeps
   round to 1:22, then the link opens (assets/kairoclock.js). The title bar stays visible. */
.mail__sending {
  position: absolute; inset: 35.5px 0 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #15162A; color: #E6D3A6; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .22s ease-out;
}
.mail__sending.on { opacity: 1; }
.mail__sending canvas { width: clamp(120px, 22vw, 200px); height: auto; aspect-ratio: 1; }
.mail__sending p { margin: 0; }