/* Colors and sizes follow the bemore.dc.html design in Claude Design, with
   two accessibility changes: the email field border is darker than the
   design's line color, so the field reaches the 3:1 contrast that WCAG asks
   for controls, and focus rings are 2px, because browsers draw the design's
   1.5px as 1px on most screens. */
:root {
  --bg: #f7f6f3;
  --fg: #1c1b19;
  --muted: #66635a;
  --line: #dedbd4;
  --field: #ffffff;
  --field-border: #8f8b80;
  --dot: #1c1b19;
  color-scheme: light;
}

/* Dark colors apply when the visitor chose dark mode on this site, or when
   their system is dark and they have not chosen light mode here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161615;
    --fg: #ecebe6;
    --muted: #8f8c84;
    --line: #2e2d2a;
    --field: #1f1e1c;
    --field-border: #76736b;
    --dot: #ecebe6;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #161615;
  --fg: #ecebe6;
  --muted: #8f8c84;
  --line: #2e2d2a;
  --field: #1f1e1c;
  --field-border: #76736b;
  --dot: #ecebe6;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

p {
  margin: 0;
}

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

a:hover {
  text-decoration-color: currentcolor;
}

input::placeholder {
  color: var(--muted);
  opacity: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

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

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  font-size: 17px;
  line-height: 1.5;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}

.theme-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.theme-toggle:hover {
  text-decoration-color: currentcolor;
}

.theme-toggle[hidden] {
  display: none;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding: 96px 0 80px;
}

.headline {
  margin: 0;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.products {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.product {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.product-name {
  font-weight: 500;
}

.product-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}

.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}

.dot-faint {
  opacity: 0.45;
}

.signup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup-label {
  font-size: 15px;
  color: var(--muted);
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-row input {
  flex: 1 1 200px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--field-border);
  border-radius: 8px;
}

.field-row input[aria-invalid="true"] {
  border-color: var(--fg);
  border-width: 2px;
  padding: 0 13px;
}

.submit {
  height: 44px;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.submit[aria-disabled="true"] {
  cursor: progress;
}

/* The status area announces errors to screen readers. It must stay in the
   page while empty, or screen readers can miss the first message, so an
   empty status is only hidden from view. */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.message-success {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.message-success:focus {
  outline: none;
}

.message-error,
.form-status {
  color: var(--muted);
  font-size: 15px;
}

/* The result messages are hidden until needed. Their wrapper adds no box,
   so a shown message spaces like the other rows of the form. */
.results {
  display: contents;
}

.results > p {
  display: none;
}

/* After a confirmed sign-up, the success message replaces the field. */
.signup[data-state="success"] .field-row {
  display: none;
}

.signup[data-state="success"] #signup-done {
  display: block;
}

/* Without JavaScript, the endpoint redirects to a message by its #id, and
   :target shows it. app.js adds the js class once it handles the form, which
   turns this off, so an old or shared link cannot show an old result. */
html:not(.js) .results > p:target {
  display: block;
}

html:not(.js) .signup:has(#signup-done:target) .field-row {
  display: none;
}

/* Hidden trap for automated form fillers. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  text-wrap: pretty;
}

.footer a {
  color: inherit;
}

/* The coded founding year. A fixed width keeps the line from shifting while
   app.js swaps between its two forms: five characters plus their letter
   spacing. The design's 5ch alone is 0.1em too narrow for "0x7E_". Copied
   text gets the plain "2026" beside it instead of the code. */
.since-year {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
  min-width: calc(5ch + 0.1em);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.02em;
}

/* 404 page. */
.notice {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.notice h1 {
  margin: 0;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
}