/* clashengine.com: IFC Checker's look (docs/brand/tokens/tokens.css), the values this page uses copied here so the site
   stays one static folder. A change to a token there is copied here. Light only, like IFC Checker. */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-latin-600-normal.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --ink: #1a1a1a;
  --paper: #ffffff;
  --neutral-50: #f7f7f7;
  --neutral-300: #cccccc;
  --neutral-600: #5c5c5c;
  --neutral-700: #424242;
  --font-sans: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 2px;
  --radius-2: 4px;
  --neutral-400: #8f8f8f;
  --neutral-500: #707070;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1a1a1a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }

/* The bar: ifcchecker.com's top bar as built (apps/web/src/components/components.css, .ifc-nav), the name kept on phones. */
.bar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 max(var(--space-8), env(safe-area-inset-right)) 0 max(var(--space-8), env(safe-area-inset-left));
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font: 600 24px/32px var(--font-sans); white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.out { padding: 4px 0; border-bottom: 2px solid transparent; font: 400 16px/24px var(--font-sans); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .out:hover { border-bottom-color: var(--neutral-300); } }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8) max(var(--space-4), env(safe-area-inset-right)) 56px max(var(--space-4), env(safe-area-inset-left));
}
.hero-mark { width: 200px; max-width: 52vw; height: auto; margin-bottom: var(--space-4); }
.status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
}
.status-glyph { flex: none; color: var(--ink); }
/* IFC Checker's roadmap glyphs (apps/web/src/help/RoadmapGlyph.tsx): in development is Building, the left half filled. */
.status-glyph circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.status-glyph path { fill: currentColor; }
h1 { margin: 0; font: 600 48px/56px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.lead { margin: 0; max-width: 36ch; font: 400 20px/30px var(--font-sans); color: var(--neutral-700); text-wrap: balance; }

/* The waiting list's form: ifcchecker.com's short form (IFC Checker's apps/web/src/waitlist/waitlist.css and the field,
   control and button of components.css) in its box, left-aligned under the centred line. */
.signup { box-sizing: border-box; width: 100%; max-width: 480px; margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-2); display: flex; flex-direction: column; gap: var(--space-3); text-align: left; overflow-wrap: anywhere; }
.signup[hidden] { display: none; }
.signup p { margin: 0; }
.signup-intro { font: 400 14px/22px var(--font-sans); }
.signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; }
.signup-label { grid-area: 1 / 1 / 2 / -1; margin-bottom: 4px; font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-600); }
.signup-input { grid-area: 2 / 1; box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--neutral-400); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 400 14px/22px var(--font-sans); }
.signup-input::placeholder { color: var(--neutral-500); }
.signup-input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--ink); box-shadow: var(--focus-ring); }
.signup-button { grid-area: 2 / 2; appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 var(--space-4); border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 500 14px/22px var(--font-sans); cursor: pointer; white-space: nowrap; }
.signup-button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.signup-button[aria-disabled="true"] { cursor: not-allowed; border-color: var(--neutral-300); background: var(--neutral-50); color: var(--neutral-500); }
.signup .signup-error { grid-area: 3 / 1 / 4 / -1; margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; font: 500 12px/18px var(--font-sans); color: var(--ink); }
.signup .signup-error[hidden] { display: none; }
.signup-privacy { font: 400 12px/18px var(--font-sans); color: var(--neutral-600); }
.signup-privacy a { color: var(--ink); }
/* Turnstile's box: 0 high while Cloudflare checks, so it takes back its gap until it asks a person to tick. */
.signup-challenge { margin-top: calc(-1 * var(--space-3)); }
.signup-challenge[data-asking] { margin-top: 0; }
/* The status line is always there, so screen readers hear it change; empty, it takes back its gap. */
.signup .signup-status { font: 400 12px/18px var(--font-sans); color: var(--neutral-600); }
.signup .signup-status:empty { margin-top: calc(-1 * var(--space-3)); }
.signup .signup-status.is-refused { display: flex; gap: 6px; align-items: flex-start; font-weight: 500; color: var(--ink); }
.signup-error::before, .signup-status.is-refused::before { content: "!"; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 9px/1 var(--font-sans); }
.signup-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-sent { gap: 4px; }
.signup-sent:focus { outline: none; }
.signup-sent-heading { font: 600 16px/24px var(--font-sans); }
.signup-sent p:last-child { font: 400 14px/22px var(--font-sans); color: var(--neutral-700); }

/* The footer: ifcchecker.com's as built (apps/web/src/styles/app.css, .app-footer). */
.foot {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--space-8) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
  font: 400 16px/24px var(--font-sans);
  color: var(--neutral-600);
  text-align: center;
}
.foot p { margin: 0; }
.foot a { color: var(--neutral-600); white-space: nowrap; }
.foot .copy { font: 400 12px/18px var(--font-sans); }

@media (max-width: 640px) {
  .bar { gap: var(--space-4); min-height: 56px; padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); }
}
@media (max-width: 480px) {
  /* The button goes under the field, the width of the field, as on ifcchecker.com. */
  .signup-row { grid-template-columns: minmax(0, 1fr); }
  .signup-button { grid-area: 4 / 1; margin-top: var(--space-2); width: 100%; }
  .signup .signup-error { grid-area: 3 / 1; }
  h1 { font-size: 36px; line-height: 44px; }
  .lead { font-size: 17px; line-height: 26px; }
}
/* On a 320 px phone: smaller gaps and 14 px link text, as ifcchecker.com's bar below 360 px. */
@media (max-width: 359px) {
  .bar { gap: var(--space-2); padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); }
  .out { font-size: 14px; }
  .brand { font-size: 20px; line-height: 28px; }
}
/* Touch screens: 44 px to tap, as ifcchecker.com (apps/web/src/styles/touch.css). */
@media (pointer: coarse) {
  /* 44 px to tap, and 16 px in a text field so a phone does not zoom in, as on ifcchecker.com. */
  .signup-input, .signup-button { height: 44px; }
  .signup-input { font-size: 16px; }
  .brand { min-width: 44px; min-height: 44px; }
  /* A flex item drops the text's trailing space, so the gap keeps the room before the arrow. */
  .out { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; min-height: 44px; }
}