/* The landing page, the beta page and the privacy page: what Schmoozle is, for someone who has never
   heard of it, how to try it, and what it keeps. Their colours and type follow the app, as DESIGN.md sets them out. They keep their
   own stylesheet so the profile pages' one can change without moving them. */

:root {
  color-scheme: light dark;

  --color-paper: #f9f9f6;
  --color-surface: #ffffff;
  --color-chip: #ffffff;
  --color-ink: #191917;
  --color-ink-inverse: #fafaf7;
  --color-graphite: #5c5c56;
  --color-muted: #878780;
  --color-terracotta: #9b5428;
  --color-terracotta-tint: rgba(155, 84, 40, 0.12);
  --color-gilt: #e3b84d;
  --color-status: #16a34a;
  --color-sage: #4a785d;
  --color-hairline: rgba(26, 26, 24, 0.08);
  --color-border-subtle: #e6e6df;
  --color-border-strong: #d2d2c8;

  --ambient-rgb: 230, 189, 128;
  --ambient-leading: 0.20;
  --ambient-trailing: 0.10;

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-chip: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-code: 0 6px 16px rgba(0, 0, 0, 0.08);

  --font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-prose: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-value: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --page-margin: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #111110;
    --color-surface: #181817;
    --color-chip: #21211f;
    --color-ink: #f5f5f0;
    --color-ink-inverse: #191917;
    --color-graphite: #9c9c94;
    --color-muted: #6e6e68;
    --color-terracotta: #df8a55;
    --color-terracotta-tint: rgba(223, 138, 85, 0.16);
    --color-gilt: #dbbd47;
    --color-status: #22c55e;
    --color-sage: #84be9d;
    --color-hairline: rgba(245, 245, 240, 0.08);
    --color-border-subtle: #292926;
    --color-border-strong: #292926;

    --ambient-rgb: 92, 158, 128;
    --ambient-leading: 0.14;
    --ambient-trailing: 0.07;

    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-chip: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-code: 0 6px 16px rgba(0, 0, 0, 0.35);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-paper);
}

body {
  min-height: 100vh;
  background-color: var(--color-paper);
  background-image: linear-gradient(to bottom right,
      rgba(var(--ambient-rgb), var(--ambient-leading)) 0%,
      rgba(var(--ambient-rgb), 0) 55%,
      rgba(var(--ambient-rgb), var(--ambient-trailing)) 100%);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-prose);
  font-size: 17px;
  line-height: 1.55;
}

::selection {
  background: var(--color-terracotta-tint);
  color: var(--color-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
  padding-left: max(var(--page-margin), env(safe-area-inset-left));
  padding-right: max(var(--page-margin), env(safe-area-inset-right));
}

/* The gilt strip: bright along its top edge, fading out at the ends named. */
.gilt {
  display: block;
  height: 1px;
  background: var(--color-gilt);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}

.gilt-trailing {
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  mask-image: linear-gradient(to right, #000 70%, transparent);
  opacity: 0.5;
}

/* ---------- Masthead ---------- */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 14px;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: inherit;
  text-decoration: none;
}

.masthead-note {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-graphite);
}

/* ---------- Opening ---------- */
.opening {
  display: grid;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 56px;
  justify-items: center;
  text-align: center;
}

.opening-kicker {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

.opening h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The last word is set as the badge sets a role. */
.opening h1 .set-as-role {
  font-style: italic;
  font-weight: 600;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.opening .gilt {
  width: 88px;
  margin: 22px auto;
}

.lede {
  max-width: 34ch;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-graphite);
  text-wrap: pretty;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 7px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.15s ease-out;
}

a.availability:hover {
  border-color: var(--color-border-strong);
}

a.availability:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

.availability-link {
  color: var(--color-terracotta);
}

.availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-status);
}

/* ---------- Badge specimen ---------- */
.specimen-figure {
  width: 100%;
  max-width: 360px;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 28px;
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: 28px;
  box-shadow: var(--shadow-code);
  text-align: center;
}

.badge-bar {
  align-self: stretch;
  margin: 0 -20px 22px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-hairline);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.6px;
  line-height: 1.2;
  color: var(--color-terracotta);
}

.badge-code {
  width: 176px;
  height: 176px;
  padding: 12px;
  background: #ffffff;
  border: 2px solid var(--color-border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-code);
}

.badge-code svg {
  display: block;
  width: 100%;
  height: 100%;
}

.badge-name {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.6px;
}

.badge-role {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
}

.badge-divider {
  width: 50px;
  height: 1px;
  margin: 20px 0;
  background: var(--color-border-subtle);
}

.badge-kicker {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-terracotta);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 8px;
  list-style: none;
}

.chip {
  padding: 8px 15px;
  background: var(--color-chip);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 9999px;
  box-shadow: var(--shadow-chip);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

.specimen-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-graphite);
  text-align: center;
}

/* ---------- Beta sign-up ---------- */
/* Takes the specimen's place in the opening: a raised card holding one field and the one action. */
.signup {
  width: 100%;
  max-width: 360px;
  padding: 24px 20px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.signup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-graphite);
}

/* The field is text set on the card, as in the app: no box, a hairline beneath, and a terracotta
   mark in the margin while it is being typed in. */
.signup-field {
  position: relative;
  border-bottom: 1px solid var(--color-border-strong);
}

.signup-field::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -12px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-terracotta);
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.signup-field:focus-within::before {
  opacity: 1;
}

.signup-field input {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-value);
  font-size: 17px;
  line-height: 1.3;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.signup-field input::placeholder {
  font-style: italic;
  color: var(--color-muted);
  opacity: 1;
}

.signup-field input[aria-invalid="true"] {
  color: var(--color-terracotta);
}

/* Left where a person cannot see it or tab to it; a script that fills in every field fills it in. */
.signup-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup-error {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-terracotta);
}

.signup-error:empty {
  display: none;
}

.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  border: 0;
  border-radius: 9999px;
  background: var(--color-terracotta);
  color: var(--color-ink-inverse);
  font-family: var(--font-value);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}

.button-primary:active {
  transform: scale(0.98);
}

.button-primary:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

.button-primary:disabled:not([aria-busy="true"]) {
  opacity: 0.4;
}

.button-primary:disabled {
  cursor: default;
  transform: none;
}

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.button-primary[aria-busy="true"] .spinner {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

.signup-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-graphite);
  text-wrap: pretty;
}

.signup-done:focus {
  outline: none;
}

.signup-done-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.signup-done .gilt {
  width: 88px;
  margin: 14px 0;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  mask-image: linear-gradient(to right, #000 70%, transparent);
}

.signup-done p {
  color: var(--color-graphite);
  text-wrap: pretty;
}

.signup-address {
  font-family: var(--font-value);
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* ---------- What it does ---------- */
.section-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.section-rule h2,
.section-rule .rule-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-terracotta);
}

.section-rule .gilt {
  flex: 1;
}

.section-rule .rule-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-graphite);
}

.point {
  display: grid;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.point:last-child {
  border-bottom: none;
}

.point h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.point-highlight {
  font-style: italic;
  color: var(--color-sage);
}

.point p {
  max-width: 46ch;
  margin-top: 10px;
  color: var(--color-graphite);
  text-wrap: pretty;
}

.point .chips {
  justify-content: flex-start;
}

.people {
  padding: 16px 16px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.people ul {
  list-style: none;
}

.person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.person:last-child {
  border-bottom: none;
}

.person-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-terracotta-tint);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-terracotta);
}

.person-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.person-note {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-graphite);
}

/* ---------- What to expect (beta) ---------- */
.steps {
  list-style: none;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-hairline);
  counter-increment: step;
}

.step:last-child {
  border-bottom: none;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  padding-top: 7px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-graphite);
}

.step h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.step p {
  grid-column: 2;
  max-width: 46ch;
  margin-top: 8px;
  color: var(--color-graphite);
  text-wrap: pretty;
}

/* ---------- Privacy ---------- */
/* One column of plain reading under the same rules as the other pages' sections. */
.policy-date {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-graphite);
}

.policy {
  max-width: 640px;
}

.policy section + section {
  padding-top: 48px;
}

.policy h3 {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-wrap: balance;
}

.policy p,
.policy ul {
  margin-top: 14px;
  color: var(--color-graphite);
  text-wrap: pretty;
}

.policy h3 + p {
  margin-top: 8px;
}

.policy ul {
  padding-left: 20px;
}

.policy li + li {
  margin-top: 8px;
}

/* The names of the app's own screens and switches, so they can be found as written. */
.policy strong {
  font-weight: 500;
  color: var(--color-ink);
}

.policy a {
  color: var(--color-terracotta);
  text-underline-offset: 3px;
}

.policy a:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

/* ---------- Foot ---------- */
.foot {
  margin-top: 48px;
  padding-top: 18px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-graphite);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.foot a {
  color: inherit;
  text-underline-offset: 3px;
}

.foot a:hover {
  color: var(--color-ink);
}

.foot a:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

/* ---------- Wider screens ---------- */
@media (min-width: 860px) {
  .opening {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
    justify-items: start;
    gap: 64px;
    padding-top: 64px;
    padding-bottom: 80px;
    text-align: left;
  }

  .opening .gilt {
    margin-left: 0;
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
    mask-image: linear-gradient(to right, #000 70%, transparent);
  }

  .lede {
    margin-left: 0;
    font-size: 22px;
  }

  .point {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding: 44px 0;
  }

  .point h3 {
    font-size: 32px;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 32px 0 0;
    border-bottom: none;
  }

  .step::before {
    padding-top: 0;
    padding-bottom: 12px;
  }

  .step p {
    grid-column: auto;
  }
}