/* Gituationship. Olivia's Figma: 01 Landing, 02 Submit, 03 Matches. */
:root {
  --bg: #171513;
  --surface: #24211f;
  --surface-pink: #382331;
  --rule: #302b28;
  --cream: #f3e9d9;
  --text: #faf5ec;
  --body: #c4b9af;
  --muted: #a39a92;
  --pink: #f52ad5;
  --pink-soft: #fba5ec;
  --plum: #694360;
  --display: "Poppins", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --page: 1280px;
  --gutter: 80px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Header and footer */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.wordmark img { width: 290px; height: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px; font: 700 15px/1 var(--display); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-cream { background: var(--cream); color: var(--bg); }
.btn-pink { background: var(--pink); color: var(--bg); }
.btn-dark { background: #000; color: var(--text); border: 1px solid var(--rule); }
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--pink-soft); outline-offset: 3px; }
.btn[aria-disabled="true"] { cursor: default; }
.foot { border-top: 1px solid var(--rule); margin-top: 96px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 48px; padding-bottom: 48px; }
.foot strong { display: block; font: 700 18px/1.3 var(--display); margin-bottom: 12px; }
.foot p { margin: 4px 0; color: var(--body); font-size: 13px; }
.foot a.universe { color: var(--body); font-size: 13px; text-decoration: none; }
.foot a.universe:hover { color: var(--text); }

/* Type */
.eyebrow { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-soft); }
.eyebrow.dim { color: var(--muted); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.03em; }
.hero-h { font-size: clamp(44px, 5.4vw, 78px); line-height: 1.05; }
.hero-h .pink { color: var(--pink); }
.page-h { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.08; }
.sec-h { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; }
.lede { margin: 0; color: var(--body); font-size: 20px; line-height: 1.5; max-width: 640px; }
.fine { margin: 0; color: var(--body); font-size: 12px; }

/* Landing */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center; padding-top: 96px; }
.hero-copy h1 { max-width: 640px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.bubble { background: var(--cream); color: var(--bg); border-radius: 24px 24px 24px 0; padding: 48px 22px 40px; font: 600 16px/1.4 var(--display); }
.bubble.small { padding: 24px; border-radius: 24px 24px 24px 0; }
.bubble.small .eyebrow { color: var(--bg); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; margin-bottom: 10px; }
.bubble.small p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.robots { width: 300px; height: auto; margin: 56px 0 0 16px; image-rendering: pixelated; }
.robots-movie { display: block; aspect-ratio: 1208 / 760; }
.match-movie { width: min(360px, 100%); height: auto; margin: 16px auto 0; }
.section { padding-top: 112px; display: flex; flex-direction: column; gap: 32px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 22px; line-height: 1.2; }
.card p { margin: 0; color: var(--body); line-height: 1.6; }
.card .num { font: 400 12px var(--mono); color: var(--pink-soft); letter-spacing: 0.1em; }
.pair { display: grid; grid-template-columns: 1fr 320px 1fr; gap: 16px; align-items: stretch; }
.pair .middle { background: var(--surface-pink); align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 32px; }
.pair .middle p { color: var(--text); font-size: 14px; }
.arrow { color: var(--pink-soft); font-size: 28px; line-height: 1; }
.chip { display: inline-block; border: 1px solid var(--pink-soft); color: var(--pink-soft); border-radius: 999px; padding: 6px 14px; font: 600 12px var(--sans); }
.chip.solid { background: var(--surface-pink); border-color: var(--plum); }
.card h3.big { font-size: 28px; }

/* Submit */
.crumbs { padding-top: 56px; display: flex; flex-direction: column; gap: 20px; }
.submit-grid { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 64px; align-items: center; margin-top: 48px; }
.form-card { background: var(--surface); border-radius: 32px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.form-card h2 { font-size: 28px; }
.form-card .sub { margin: -12px 0 0; color: var(--body); }
.form-card label { font-weight: 600; font-size: 15px; margin-top: 12px; }
.form-card input { width: 100%; padding: 20px 16px; border-radius: 16px; border: 1px solid #3a3531; background: var(--bg); color: var(--text); font: 15px var(--sans); }
.form-card input::placeholder { color: var(--body); }
.form-card .hint { margin: -8px 0 8px; color: var(--body); font-size: 12px; }
.error { margin: 0; color: #ffb3c8; font-size: 14px; }
.judged { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.judged img { width: 56px; }
.judged strong { display: block; font: 600 15px var(--display); }
.judged span { color: var(--body); font-size: 13px; }
.dot-row { display: flex; align-items: center; gap: 24px; justify-content: center; }
.dot-frame { flex: none; width: 240px; height: 240px; border: 2px dashed var(--cream); border-radius: 24px; overflow: hidden; background: #000; }
.dot-frame img { width: 100%; height: 100%; object-fit: cover; }
.dot-row .bubble.small { max-width: 232px; }
.nudge { margin-top: 48px; padding-top: 40px; border-top: 1px solid #4a4440; }
.nudge h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 12px; }
.nudge p { margin: 0; color: var(--body); line-height: 1.6; }

/* Matches */
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 48px; }
.review-grid .dot-row { justify-content: flex-start; }
.review-grid .dot-frame { width: 200px; height: 200px; }
.project-card { background: var(--surface); border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.project-card h2 { font-size: 30px; }
.project-card .url { font: 12px var(--mono); color: var(--body); }
.project-card hr { border: 0; border-top: 1px solid #4a4440; width: 100%; margin: 8px 0; }
.label { font: 700 12px var(--sans); color: var(--pink-soft); text-transform: uppercase; letter-spacing: 0.02em; }
.project-card .take { margin: 0; color: var(--text); }
.project-card a { color: var(--pink-soft); font-weight: 600; font-size: 14px; }
.gaps { list-style: none; margin: 0; padding: 0; }
.gaps li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid #4a4440; }
.gaps strong { display: block; font-weight: 500; font-size: 17px; margin-bottom: 4px; }
.gaps span { color: var(--body); font-size: 13px; }
.sev { flex: none; border-radius: 999px; padding: 6px 12px; font: 600 12px var(--sans); border: 1px solid #5a5450; }
.sev.major { background: var(--cream); color: var(--bg); }
.sev.notable { background: #3a3531; color: var(--text); }
.sev.minor { background: #2e2a27; color: var(--text); }
.featured { background: var(--cream); color: var(--bg); border-radius: 28px; padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.featured .eyebrow { color: #4a443f; font-size: 11px; }
.featured h3 { font-size: 40px; }
.featured p { margin: 0; }
.featured hr { border: 0; border-top: 1px solid #cfc4b2; width: 100%; margin: 8px 0; }
.featured .chip.solid { background: var(--surface-pink); color: var(--pink-soft); }
.corner { position: absolute; top: 28px; right: 28px; font-size: 20px; color: inherit; }
.card .corner { color: var(--pink-soft); }
.bring { font: 700 12px var(--sans); text-transform: uppercase; }
.featured .bring + p, .card .bring + p { font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cards2 .card { padding: 36px 24px 28px; position: relative; gap: 14px; }
.cards2 .card hr { border: 0; border-top: 1px solid #4a4440; width: 100%; margin: 6px 0; }
.cards2 .eyebrow { color: var(--muted); font-size: 11px; }
.btn-row { display: flex; }

/* Phone and tablet */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero, .submit-grid, .review-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 440px; }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .wordmark img { width: 180px; }
  .btn { padding: 12px 18px; font-size: 14px; }
  .hero { padding-top: 56px; }
  .section { padding-top: 72px; }
  .cards3, .cards2 { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
  .dot-row { flex-direction: column; align-items: flex-start; }
  .dot-frame, .review-grid .dot-frame { width: 160px; height: 160px; }
  .robots { width: 240px; }
  .featured h3 { font-size: 32px; }
  .lede { font-size: 18px; }
}