/* The Mate homepage in the moat8.space identity, and what the page adds around the Claude Design
   export: the site footer below it, the consent banner and the waitlist form. The identity is the
   one of the Vault landing and the legal pages: Archivo headings, heavy and in capitals; JetBrains
   Mono for labels, navigation and buttons; square corners; orange (#ff935d) on the main action.
   scripts/build-mate.py renames the fonts and squares the corners; this file does the rest. */

/* The runtime sizes its root to the viewport for full-screen previews; here the page is followed by
   the site footer, so the root grows with its content. */
html, body { height: auto !important; }
#dc-root, #dc-root > .sc-host { height: auto !important; }
body.mate-page { margin: 0; background: #ffffff; color: #131312; }

/* ---- type ---- */
/* "M8 Display" is the export's display face (Cal Sans), renamed by the build and drawn in Archivo. */
.mate-page [style*="M8 Display"] { font-weight: 800 !important; letter-spacing: -0.01em !important; }
.mate-page h1[style*="M8 Display"], .mate-page h2[style*="M8 Display"] {
  font-weight: 900 !important; text-transform: uppercase; letter-spacing: -0.01em !important; line-height: 1.02 !important;
}

/* ---- hero headline: "AI teammate that" + five rotating endings, all at one size ---- */
/* The lead is set light and the ending heavy, so the eye goes to the part that changes. The lead is
   9.3em wide in the regular weight, so it keeps one line at every width; only the endings break. */
/* The size follows the width of the text column (container units), so the widest ending fits its
   line with 3% to spare. Measured in Archivo 900 capitals at -0.01em: "starts the work before you
   ask" is 19.8em wide (20.4 with the margin) and its first half "starts the work" 10.3em (10.6).
   Narrow columns set every ending in its two fixed halves under the lead, three lines in all, up to 56px; from the
   column where the whole ending fits a line at 56px (20.4 x 56 = 1140px) the headline is two lines,
   the lead and the ending, growing to 63px. So the size never steps down as the screen grows, each
   ending keeps the shape of the others, and the endings are never smaller than the lead. They share
   one grid cell that takes the size of the tallest, so nothing below moves as they change. */
.mate-page .mate-hero-text { container: mate-hero / inline-size; }
.mate-page .mate-hero-title { font-size: 32px !important; font-size: clamp(24px, 100cqi / 10.6, 56px) !important; }
.mate-page .mate-hero-half { display: block; }
.mate-page .mate-hero-lead { font-weight: 400; }
@container mate-hero (min-width: 1140px) {
  .mate-page .mate-hero-title { font-size: min(100cqi / 20.4, 64px) !important; }
  .mate-page .mate-hero-half { display: inline; }
}

/* ---- buttons: square, JetBrains Mono in capitals, as .btn on the Vault landing ---- */
.mate-page .btn-shine {
  border-radius: 0 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.08em; text-transform: uppercase;
  transform: none !important;
}
@media (max-width: 600px) { .mate-page .btn-shine { font-size: 12px !important; letter-spacing: 0.04em; } }

/* ---- header: the site's lockup (moat8 wordmark | MATE) and its navigation type ---- */
.mate-page header nav a, .mate-page header a:not(.btn-shine), .mate-page header button:not(.btn-shine) {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; letter-spacing: 0.06em;
}
/* The navbar keeps the logo's place with a transparent spacer image; the lockup is laid over it.
   site-shell.css (.site-brand) loads after this file, hence the .mate-page prefix. */
.mate-page .mate-brand { color: #131312; }
.mate-page .mate-brand .site-brand-label { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* The header action is orange, as on every other page of the site. */
.mate-page header .btn-shine { white-space: nowrap; background: #ff935d !important; box-shadow: inset 0 0 0 1px #ff935d !important; color: #131312 !important; }
@media (max-width: 640px) {
  .mate-page header img { width: 140px !important; }
  .mate-page .mate-brand { gap: 10px; }
  .mate-page .mate-brand img { width: 90px; }
  .mate-page .mate-brand .site-brand-divider { height: 14px; transform: translateY(2px); }
  .mate-page .mate-brand .site-brand-label { font-size: 10px; padding-bottom: 1px; }
}
@media (max-width: 359px) {
  .mate-page header img { width: 118px !important; }
  .mate-page .mate-brand { gap: 7px; }
  .mate-page .mate-brand img { width: 76px; }
  .mate-page header .btn-shine { font-size: 10px !important; letter-spacing: 0.03em; padding-left: 10px !important; padding-right: 10px !important; }
}

.mate-noscript { max-width: 640px; margin: 80px auto; padding: 0 20px; font: 400 15px/1.75 'JetBrains Mono', ui-monospace, monospace; color: #131312; }

/* ---- waitlist form ---- */
.mate-waitlist { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); box-sizing: border-box; padding: 36px 32px 28px; border: 1px solid #131312; border-radius: 0; background: #ffffff; color: #131312; box-shadow: 0 24px 64px rgba(19, 19, 18, 0.24); font: 400 16px/24px 'Archivo', ui-sans-serif, system-ui, sans-serif; }
.mate-waitlist::backdrop { background: rgba(19, 19, 18, 0.55); }
.mate-waitlist [hidden] { display: none !important; }
.mate-waitlist h2 { margin: 0 0 12px; font: 900 30px/1.02 'Archivo', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.mate-waitlist-eyebrow { margin: 0 0 12px; font: 500 12px/16px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #cc4400; }
.mate-waitlist-lead { margin: 0 0 24px; font: 400 14px/1.75 'JetBrains Mono', ui-monospace, monospace; color: #2b2b28; text-wrap: pretty; }
.mate-waitlist-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 0; background: transparent; color: #66665f; font-size: 24px; line-height: 1; cursor: pointer; }
.mate-waitlist-close:hover { background: #f6f5f0; color: #131312; }
.mate-waitlist-form { display: flex; flex-direction: column; gap: 14px; }
.mate-waitlist-form > .mate-waitlist-lead { margin-bottom: 10px; }
.mate-waitlist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mate-waitlist-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 600 12px/16px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.mate-waitlist-field em { font-style: normal; font-weight: 400; color: #66665f; text-transform: none; letter-spacing: 0; }
.mate-waitlist-field input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #deddd5; border-radius: 0; background: #ffffff; font: 400 16px/1 'Archivo', ui-sans-serif, system-ui, sans-serif; color: #131312; text-transform: none; letter-spacing: 0; }
.mate-waitlist-field input:focus { outline: none; border-color: #131312; box-shadow: inset 0 0 0 1px #131312; }
.mate-waitlist-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mate-waitlist-submit { display: inline-flex; align-items: center; justify-content: center; height: 52px; margin-top: 6px; padding: 0 26px; border: 0; border-radius: 0; background: #ff935d; color: #131312; font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.mate-waitlist-submit:hover { background: #131312; color: #ffffff; }
.mate-waitlist-submit:disabled { opacity: 0.6; cursor: default; }
.mate-waitlist-status { min-height: 20px; margin: 0; font: 400 13px/20px 'JetBrains Mono', ui-monospace, monospace; color: #66665f; }
.mate-waitlist-status[data-kind="error"] { color: #c4381c; }
.mate-waitlist-note { margin: 0; font: 400 12px/18px 'JetBrains Mono', ui-monospace, monospace; color: #66665f; }
.mate-waitlist-note a { color: inherit; }
.mate-waitlist-done { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 520px) {
  .mate-waitlist { padding: 32px 20px 24px; }
  .mate-waitlist h2 { font-size: 26px; }
  .mate-waitlist-row { grid-template-columns: 1fr; }
}