/* GatherUp look (gatherup.com/request-a-demo): Merriweather headings, Source Sans 3 body,
   hero copy on the left, form card on the right, light theme only.
   Fonts are self-hosted (SIL OFL 1.1). */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/merriweather-400.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --text: #3e494c;
  --heading: #1f5a4f;
  --heading-dark: #22282d;
  --lead: #123a34;
  --muted: #66717a;
  --border: #e3e8eb;
  --input-border: #cdd5da;
  --accent: #1f5a4f;
  --accent-hover: #17493f;
  --band: #e4f0ec;
  --link: #038391;
  --error: #b93e4c;
  --error-bg: #ffe7ea;
  --warn: #a85a0f;
  --warn-bg: #ffead6;
  --info-bg: #edf5d9;
  --radius: 8px;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
}

[hidden] { display: none !important; }

/* the recipient page swaps the hero copy (app.js sets body[data-mode]) */
body[data-mode="view"] .for-create,
body:not([data-mode="view"]) .for-view { display: none; }

/* ---------- hero ---------- */

.hero {
  flex: 1;
  padding: 40px 64px 112px;
  /* the request-a-demo hero: colour washes over a lime-to-white fade */
  background-color: #ffffff;
  background-image:
    linear-gradient(216.77deg, rgba(227, 90, 104, 0.3) 2.12%, rgba(255, 255, 255, 0.3) 15.8%),
    linear-gradient(201.22deg, rgba(242, 140, 40, 0.3) 10.53%, rgba(255, 255, 255, 0.3) 23.83%),
    linear-gradient(143.02deg, rgba(31, 90, 79, 0.3) 2.35%, rgba(255, 255, 255, 0.3) 15.79%),
    linear-gradient(156.42deg, rgba(168, 207, 69, 0.3) 9.66%, rgba(255, 255, 255, 0.3) 22.88%),
    linear-gradient(180deg, rgba(58, 111, 176, 0.2) 3.35%, rgba(255, 255, 255, 0.2) 20.88%),
    linear-gradient(180deg, #a8cf45 6.48%, #f3f8e3 17.06%, #ffffff 21.93%);
  background-repeat: no-repeat;
  background-size: 100% max(100%, 900px);
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 40px 64px;
  align-items: start;
}

.brand-row { margin-bottom: 64px; }

.brand { display: inline-flex; }
.brand .logo { height: 36px; width: auto; display: block; }

.eyebrow {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--lead);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.2;
  color: var(--heading);
  margin: 0;
}

.lead {
  max-width: 481px;
  margin: 32px 0 0;
  font-size: 22px;
  line-height: 1.6;
  color: var(--lead);
}

.points {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
}
.points li { display: flex; align-items: flex-start; gap: 12px; }
.points svg { flex: none; width: 24px; height: 24px; margin-top: 3px; fill: var(--accent); }

/* ---------- form card ---------- */

.card {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(18, 58, 52, 0.08);
  padding: 48px;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--heading-dark);
  margin: 0 0 12px;
}
.muted { color: var(--muted); }
.card > .muted { margin: 0; }

form { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }

.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field > span:first-child { font-weight: 600; font-size: 14px; color: var(--heading-dark); }

textarea, input[type="text"], input[type="password"], select {
  font: inherit;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  width: 100%;
}

input[type="text"], input[type="password"], select { height: 48px; font-size: 16px; }

textarea, #link { font-family: var(--mono); font-size: 14px; }
textarea { resize: vertical; min-height: 160px; }

/* focus as on the request-a-demo form */
textarea:focus, input:focus, select:focus {
  outline: 2px solid rgba(31, 90, 79, 0.35);
  outline-offset: 0;
  border-color: var(--accent);
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.counter { align-self: flex-end; font-size: 13px; }
.counter.over { color: var(--error); }

.pw { display: flex; gap: 8px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* buttons as on the request-a-demo form (green, 8px corners) */
button { font: inherit; cursor: pointer; border-radius: var(--radius); }
button:disabled { opacity: 0.6; cursor: progress; }

.primary {
  background: var(--accent);
  color: #ffffff;
  border: 0;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  transition: background-color 0.15s;
}
.primary:hover:not(:disabled) { background: var(--accent-hover); }

.ghost {
  background: transparent;
  color: var(--heading);
  border: 2px solid var(--accent);
  padding: 0 20px;
  font-weight: 600;
  white-space: nowrap;
}
.ghost:hover:not(:disabled) { background: var(--band); }

form > .primary { align-self: flex-start; }

.copy-row { display: flex; gap: 8px; margin: 24px 0 20px; }
.copy-row input { flex: 1; min-width: 0; }

.actions { display: flex; gap: 8px; margin-top: 12px; }

.facts { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }

.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--info-bg);
}
.notice.error { background: var(--error-bg); color: var(--error); }
.notice.warn { background: var(--warn-bg); color: var(--warn); margin-top: 16px; }

#view .muted { margin: 0 0 16px; }
#revealed { margin: 20px 0 0; }

a { color: var(--link); }

/* ---------- footer (bottom of the gatherup.com footer) ---------- */

.bottom {
  color: rgba(228, 240, 236, 0.84);
  background-color: #091f1b;
  background-image:
    radial-gradient(at bottom left, rgba(168, 207, 69, 0.2) 0%, rgba(168, 207, 69, 0) 55%),
    radial-gradient(at top center, #1d5c50 0%, #091f1b 80%);
  font-size: 15px;
}

.bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 64px 24px;
}

.bottom-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.bottom .logo { width: 150px; height: auto; display: block; }
.bottom p { margin: 0; }

.bottom-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(228, 240, 236, 0.1);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(228, 240, 236, 0.55);
}
.bottom-legal nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.bottom-legal a { color: inherit; text-decoration: none; }
.bottom-legal a:hover, .bottom-legal a:focus-visible { color: #ffffff; }

/* ---------- responsive (breakpoints follow the source page) ---------- */

@media (max-width: 1366px) {
  .hero { padding-left: 40px; padding-right: 40px; }
  h1 { font-size: 44px; }
  .card { padding: 40px; }
}

@media (max-width: 1024px) {
  .hero { padding-bottom: 80px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .brand-row { margin-bottom: 40px; }
  .lead { max-width: none; }
}

@media (max-width: 990px) {
  .hero { padding: 24px 16px 64px; }
  .bottom-inner { padding: 40px 16px 24px; }
  h1 { font-size: 34px; }
  .lead { font-size: 19px; margin-top: 24px; }
  .points { margin-top: 28px; font-size: 17px; }
  .card { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .brand .logo { height: 28px; }
  .copy-row { flex-direction: column; }
}