/* The holding page's one stylesheet, for every page in apps/marketing/ (Chad's design, #565). The
   pages' CSP allows styles from this file alone, so a page has no style attribute and no <style>
   element (`pnpm check:marketing` refuses both): every rule is here, as a class. */

/* Roboto for headings and buttons, Roboto Mono for the rest, both served from /fonts/ (the CSP's
   font-src 'self'), each a variable font covering the weights the pages use. */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* The design's palette. No blue or purple anywhere, links and focus included. */
:root {
  --bg: #fffbec;
  --ink: #343434;
  --muted: #535353;
  --text: #494949;
  --rule: #dbd6c6;
  --rule-strong: #c7c4bc;
  --band: #ece9dc;
  --hover: #494949;
  --sans: 'Roboto', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
}

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

html {
  background: var(--bg);
}

/* The header, the main content, which takes the spare height, and the footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--muted);
}

input,
button {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
}

p {
  margin: 0;
}

/* For a screen reader only, such as the email field's label. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every page's header: the wordmark, and the "Launching soon" pill or a link back. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
}

.wordmark {
  display: flex;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: auto;
  height: 26px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The pill's square dot, drawn here so it carries no text. */
.pill::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--ink);
}

.back-home {
  font-size: 13px;
}

/* The hero: the headline, the line under it and the form, beside the mark on a wide screen and
   above it on a phone. */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The sign-up form, where the closing call to action's link lands. */
.waitlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  scroll-margin-top: 24px;
}

.waitlist form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* The email field and the button: side by side when there is room, stacked on a phone. */
.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.email-field {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
}

/* 56px tall and 16px text, so a phone neither zooms in on focus nor makes them hard to tap. */
.email-field input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 2px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  outline-offset: 2px;
}

.email-field input:focus,
.email-field input[aria-invalid='true'] {
  border-color: var(--ink);
}

.signup-row button {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 56px;
  padding: 0 26px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.signup-row button:hover {
  border-color: var(--hover);
  background: var(--hover);
}

/* The consent box and its wording, in the small print under the button. The box is in the ink
   colour rather than the browser's blue, and the whole label ticks it. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.consent label {
  cursor: pointer;
}

.microcopy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* What /invalid/ says went wrong, where the design puts its inline message. */
.problem {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* The honeypot: people never see it, so they leave it empty, and naive bots fill it in. */
.company {
  display: none;
}

/* What /thanks/ shows in place of the form. */
.success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--bg);
}

.success img {
  flex: none;
  width: 22px;
  height: auto;
  margin-top: 2px;
}

.success p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.back {
  font-size: 14px;
}

/* The hero's mark: three copies, the back two faint, over a grid that fades out at the edges. */
.hero-visual {
  display: grid;
  place-items: center;
  padding: 24px 0;
}

.mark-stack {
  display: grid;
  position: relative;
  place-items: center;
  width: min(100%, 360px);
  aspect-ratio: 1;
}

.mark-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(circle at center, #000 45%, transparent 80%);
  mask-image: radial-gradient(circle at center, #000 45%, transparent 80%);
}

.mark {
  position: absolute;
  width: 44%;
  height: auto;
}

.mark-back {
  opacity: 0.12;
  transform: translate(-30%, -24%);
}

.mark-middle {
  opacity: 0.28;
  transform: translate(-15%, -12%);
}

.mark-front {
  position: relative;
}

/* The page's sections under the hero: how it works and who it's for. */
.section {
  border-top: 1px solid var(--rule);
}

.section-alt {
  background: var(--band);
}

.section-inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 20px;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-heading h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

/* How it works: three numbered cards, in a row when there is room. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
}

.step-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.steps h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Who it's for: three cells in one bordered block, the gaps drawn as hairlines. */
.audiences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--rule-strong);
}

.audience {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  background: var(--bg);
}

.audience h3 {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* The closing call to action: light on dark, its focus ring inverted to match. */
.cta {
  border-top: 1px solid var(--rule);
  background: var(--ink);
  color: var(--bg);
}

.cta :focus-visible {
  outline-color: var(--bg);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 20px;
  text-align: center;
}

.cta-mark {
  width: 36px;
  height: auto;
}

.cta h2 {
  max-width: 30ch;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.cta-link:hover {
  background: var(--band);
  color: var(--ink);
}

/* The privacy notice: one readable column, each heading close to the text it introduces. */
.notice {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
}

.notice > * {
  margin: 0;
  text-wrap: pretty;
}

.notice > * + * {
  margin-top: 20px;
}

.notice > h2 {
  margin-top: 40px;
}

.notice > h2 + * {
  margin-top: 12px;
}

.notice h1 {
  color: var(--ink);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.notice h2 {
  color: var(--ink);
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.notice ul {
  padding-left: 1.25em;
}

.notice li + li {
  margin-top: 4px;
}

.notice li::marker {
  color: var(--ink);
}

/* Every page's footer: the small wordmark, then the copyright, the report link and the privacy
   link, and on the privacy notice its version. */
footer {
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
  color: var(--muted);
  font-size: 12px;
}

.footer-inner img {
  display: block;
  width: auto;
  height: 18px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}