/* Contact sales is a Jinja marketing surface. It consumes the shared Rescript
   tokens first, then applies only the page composition defined for this flow. */

:root {
  --serif: "PT Serif", "Times New Roman", serif;
  --sans: var(--font-ui);
  --gutter: clamp(var(--rs-space-7), 4vw, var(--rs-space-14));
  --contact-field-height: calc(var(--rs-control-h-field) + var(--rs-space-3));
}

html,
body {
  min-height: 100%;
  background: var(--rs-paper-2);
  color: var(--text-heading);
}

body { font-family: var(--font-ui); }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(420px, 40fr) minmax(600px, 60fr);
  background: var(--rs-paper-2);
}

.intro {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  padding: var(--rs-space-9) var(--gutter) var(--rs-space-8);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.contact-ascii {
  position: absolute;
  z-index: 0;
  inset: 34% -18% -10% 8%;
  overflow: hidden;
  color: var(--rs-fg-a24);
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 78%, transparent 100%);
}

.contact-ascii pre {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--contact-ascii-size, 6px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  white-space: pre;
}

.intro > * {
  position: relative;
  z-index: 1;
}

.brand,
.brand:hover,
.brand:focus-visible { color: var(--text-inverse); }

.brand-logo {
  width: auto;
  height: 36px;
}

.intro-copy {
  max-width: 550px;
  padding: clamp(var(--rs-space-16), 17vh, calc(var(--rs-space-16) * 2)) 0 var(--rs-space-10);
}

.intro-copy .event-kicker {
  margin: 0 0 var(--rs-space-5);
  color: var(--rs-fg-a44);
  font-size: var(--rs-text-2xs);
  letter-spacing: 0.12em;
  line-height: var(--rs-lh-tight);
}

h1 {
  max-width: 520px;
  font-family: var(--serif);
  font-size: clamp(48px, 4.25vw, 68px);
  font-weight: var(--rs-weight-body);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-inverse);
}

.intro-copy p {
  max-width: 500px;
  margin-top: var(--rs-space-7);
  font-size: var(--rs-text-body-lg);
  line-height: var(--rs-lh-body);
  color: var(--rs-fg-dim);
}

.intro-copy .event-note {
  margin-top: var(--rs-space-4);
  color: var(--text-inverse);
  font-size: var(--rs-text-body);
  font-weight: var(--rs-weight-medium);
}

.intro-copy .event-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rs-fg-a44);
  text-underline-offset: 3px;
}

.intro-copy .event-note a:hover,
.intro-copy .event-note a:focus-visible {
  color: var(--text-inverse);
  text-decoration-color: currentColor;
}

.trust-row {
  display: grid;
  align-items: start;
  gap: var(--rs-space-2);
  max-width: 620px;
  padding-top: var(--rs-space-5);
  border-top: 1px solid var(--border-rule-inverse);
  color: var(--rs-fg-mute);
}

.trust-label {
  margin-bottom: var(--rs-space-1);
  color: var(--rs-fg-a44);
}

.trust-item + .trust-item::before { content: none; }

.footer {
  align-self: end;
  margin-top: 0;
  color: var(--rs-fg-mute);
}

.footer a,
.footer a:hover,
.footer a:focus-visible { color: inherit; }

.form-side {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: flex-start;
  justify-content: center;
  padding: calc(clamp(var(--rs-space-16), 15vh, calc(var(--rs-space-16) * 2)) + var(--contact-field-height) - var(--rs-space-3)) clamp(var(--rs-space-8), 6vw, var(--rs-space-16)) var(--rs-space-16);
  overflow: visible;
  background: var(--rs-paper-2);
  color: var(--text-heading);
}

.form-side::before { content: none; }

.page--event .form-side {
  padding-top: calc(clamp(var(--rs-space-16), 15vh, calc(var(--rs-space-16) * 2)) + var(--contact-field-height) - var(--rs-space-3) + var(--rs-space-6));
}

.form-card {
  width: min(100%, 820px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-heading);
  box-shadow: none;
}

.form-grid { gap: var(--rs-space-6); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

input,
select,
textarea {
  min-height: var(--contact-field-height);
  padding: 0 var(--rs-space-5);
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--rs-gray-100);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: var(--rs-text-body-lg);
  transition: border-color var(--rs-dur-fast) ease, box-shadow var(--rs-dur-fast) ease, background var(--rs-dur-fast) ease;
}

input::placeholder {
  color: var(--rs-ink-a62);
  opacity: 1;
}

select:required:invalid { color: var(--rs-ink-a62); }
select option { color: var(--text-heading); }

input:hover,
select:hover,
textarea:hover { background: var(--rs-gray-150); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rs-ink-a64);
  background: var(--surface-card);
  box-shadow: 0 0 0 3px var(--rs-ink-a09);
}

.checkbox-row {
  grid-template-columns: 24px 1fr;
  gap: var(--rs-space-3);
  margin-top: var(--rs-space-1);
  color: var(--rs-ink-a64);
  font-size: var(--rs-text-sm);
}

.checkbox-row input {
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  accent-color: var(--action-primary);
}

.submit {
  min-height: var(--rs-space-12);
  border-radius: 4px;
  background: var(--action-primary);
  color: var(--text-inverse);
  font-size: var(--rs-text-body);
  font-weight: var(--rs-weight-medium);
}

.submit:hover { background: var(--action-primary-hover); }

.form-note,
.form-status {
  color: var(--text-muted);
  font-size: var(--rs-text-3xs);
}

.form-note {
  margin: var(--rs-space-2) 0 0;
  padding-top: var(--rs-space-7);
  border-top: 1px solid var(--border-rule);
}

.form-note a,
.form-note a:hover,
.form-note a:focus-visible { color: inherit; }

.calendly-card {
  width: min(100%, 860px);
  background: var(--surface-card-warm);
}

@media (max-width: 1100px) {
  .page { grid-template-columns: 1fr; }
  .intro { min-height: min(780px, 100dvh); }
  .intro-copy { padding-top: var(--rs-space-14); }
  .contact-ascii {
    inset: 38% -8% -8% 18%;
  }
  .form-side {
    min-height: auto;
    padding-top: var(--rs-space-14);
    padding-bottom: var(--rs-space-14);
  }
  .page--event .form-side { padding-top: var(--rs-space-14); }
}

@media (max-width: 640px) {
  :root { --gutter: var(--rs-space-6); }
  .intro {
    min-height: 660px;
    padding-top: var(--rs-space-7);
    padding-bottom: var(--rs-space-7);
  }
  .brand-logo { height: 32px; }
  .intro-copy { padding: var(--rs-space-9) 0; }
  h1 { font-size: clamp(40px, 12vw, 52px); }
  .trust-row { gap: var(--rs-space-2); }
  .trust-item { font-size: var(--rs-text-sm); }
  .footer {
    display: flex;
    margin-top: 0;
    font-size: var(--rs-text-3xs);
  }
  .form-side { padding: var(--rs-space-12) var(--rs-space-6); }
  .form-card { padding: 0; }
  .form-grid { gap: var(--rs-space-4); }
  input,
  select,
  textarea {
    min-height: calc(var(--rs-control-h-field) + var(--rs-space-1));
    font-size: var(--rs-text-body);
  }
  .checkbox-row { font-size: var(--rs-text-2xs); }
}