/* Hausmatch — hausmatch.co
   Dark-first on purpose: the brand marks are a glowing flame whose halo falls
   off to near-black, so they only read correctly on a dark ground. The palette
   below is lifted from the app's own dark mesh (AnimatedMeshBackground in
   DesignSystem.swift) and Brand.coral, so the site and the app match.
   Coral is the emotional layer and never lands on body text. */

:root {
  --coral: #fc4d6b;
  --flame: #ff8a3d;
  --coral-dim: rgba(252, 77, 107, .14);
  --accent: #4d9bff;

  --ink: #fdf7f8;
  --ink-2: #b9a9ae;
  --ink-3: #8a7a80;

  --bg: #120a0d;
  --surface: rgba(255, 255, 255, .038);
  --surface-solid: #1c1015;
  --line: rgba(255, 255, 255, .095);

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .5);
  --radius: 20px;
  --wrap: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
    Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* The ember wash — the web echo of the app's dark mesh gradient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(62rem 44rem at 76% -14%, rgba(252, 77, 107, .30), transparent 60%),
    radial-gradient(42rem 32rem at 88% 6%, rgba(255, 138, 61, .16), transparent 58%),
    radial-gradient(52rem 40rem at -6% 12%, rgba(190, 40, 90, .16), transparent 62%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  background: rgba(18, 10, 13, .72);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
}

.brand { display: flex; align-items: center; }
.brand img { height: 34px; width: auto; }
.brand:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 620px) {
  .nav a.hide-sm { display: none; }
  .brand img { height: 28px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--coral), #ff6a4d);
  color: #fff;
  box-shadow: 0 8px 30px rgba(252, 77, 107, .38);
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(252, 77, 107, .52); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .075); }

/* ---------- Hero ---------- */

.hero { padding: 76px 0 56px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero { padding: 48px 0 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.hero-mark { height: 92px; width: auto; margin: 0 0 4px -10px; }

@media (max-width: 900px) { .hero-mark { height: 76px; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ff8f9f;
  background: var(--coral-dim);
  border: 1px solid rgba(252, 77, 107, .26);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 22px;
}

h1 {
  font-size: clamp(38px, 5.8vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.034em;
  margin: 0 0 20px;
  font-weight: 750;
  color: var(--ink);
}

.lede {
  font-size: clamp(17px, 2.1vw, 19.5px);
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 34ch;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-size: 14px; color: var(--ink-3); margin-top: 18px; }

/* ---------- Phone frames ---------- */

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
}

/* Device frame. The screenshots are bare screen captures, which read as flat
   rectangles on their own — the titanium rail, the bezel, and the side buttons
   are what make them look like a phone. Built in CSS rather than baked into
   the images so a re-capture never needs re-compositing. */
.phone {
  position: relative;
  width: 240px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 50px;
  background: linear-gradient(150deg, #6d6d73 0%, #2a2a2e 18%, #17171a 42%, #37373c 72%, #75757b 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .62),
    0 0 60px rgba(252, 77, 107, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* Inner bezel: the black rim between the rail and the glass. */
.phone::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 45px;
  background: #000;
  z-index: 0;
}

.phone img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 41px;
}

/* Side buttons: volume pair + action button left, power right. */
.phone .buttons,
.phone .buttons::before,
.phone .buttons::after {
  position: absolute;
  background: linear-gradient(180deg, #5c5c62, #303035);
  border-radius: 2px;
}
.phone .buttons {
  left: -2px;
  top: 21%;
  width: 3px;
  height: 7%;
}
.phone .buttons::before {
  content: "";
  left: 0;
  top: 128%;
  width: 3px;
  height: 100%;
}
.phone .buttons::after {
  content: "";
  left: 0;
  top: -62%;
  width: 3px;
  height: 42%;
}
.phone .power {
  position: absolute;
  right: -2px;
  top: 30%;
  width: 3px;
  height: 11%;
  background: linear-gradient(180deg, #5c5c62, #303035);
  border-radius: 2px;
}

.phone-back {
  width: 200px;
  opacity: .88;
  transform: translateY(28px) rotate(-4deg);
}
.phone-front { transform: translateY(-6px); z-index: 2; }

@media (max-width: 900px) {
  .phone { width: 212px; }
  .phone-back { width: 178px; }
}
@media (max-width: 520px) {
  .phone-back { display: none; }
  .phone { width: min(74vw, 260px); }
}

/* ---------- Sections ---------- */

section { padding: 66px 0; }

.section-head { max-width: 640px; margin: 0 0 42px; }

h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
  font-weight: 720;
  color: var(--ink);
}

.section-head p { color: var(--ink-2); font-size: 18px; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card .ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--coral-dim);
  border: 1px solid rgba(252, 77, 107, .22);
  margin-bottom: 16px;
  font-size: 20px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* Alternating feature rows */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 44px 0;
}
.feature.flip .feature-media { order: -1; }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 34px; padding: 28px 0; }
  .feature.flip .feature-media { order: 0; }
}

.feature h3 {
  font-size: clamp(23px, 3vw, 30px);
  letter-spacing: -0.024em;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--ink);
}
.feature p { color: var(--ink-2); margin: 0 0 16px; }
.feature ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.feature ul li { margin-bottom: 7px; }
.feature ul li::marker { color: var(--coral); }

.feature-media { display: flex; justify-content: center; }

/* ---------- Disclosure band ---------- */

.disclosure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius);
  padding: 30px 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.disclosure h3 { margin: 0 0 10px; font-size: 19px; font-weight: 650; }
.disclosure p { margin: 0 0 12px; color: var(--ink-2); font-size: 15.5px; }
.disclosure p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 60px;
  margin-top: 32px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { color: var(--ink-2); font-size: 15px; }
.footer-links a:hover { color: var(--ink); }

.fine {
  color: var(--ink-3);
  font-size: 13.5px;
  margin-top: 26px;
  max-width: 78ch;
  line-height: 1.65;
}

/* ---------- Legal / long-form documents ---------- */

.doc { max-width: 760px; margin: 0 auto; padding: 54px 24px 84px; }

.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 10px; }

.doc h2 {
  font-size: 21px;
  margin: 38px 0 12px;
  letter-spacing: -0.017em;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-weight: 680;
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }

.doc h3 { font-size: 17px; margin: 26px 0 8px; font-weight: 650; }

.doc p { color: var(--ink-2); margin: 0 0 16px; }
.doc ul { color: var(--ink-2); padding-left: 22px; margin: 0 0 18px; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--coral); }
.doc strong { color: var(--ink); font-weight: 640; }

.doc .effective {
  display: inline-block;
  font-size: 14px;
  color: #ff9dab;
  background: var(--coral-dim);
  border: 1px solid rgba(252, 77, 107, .24);
  border-radius: 999px;
  padding: 6px 15px;
  margin-bottom: 30px;
}

.doc .backlink { font-size: 15px; display: inline-block; margin-bottom: 26px; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 22px;
}
.callout p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* The back phone is rendered smaller, so its radii have to scale with it. */
.phone-back { padding: 7px; border-radius: 42px; }
.phone-back::after { inset: 5px; border-radius: 38px; }
.phone-back img { border-radius: 34px; }

@media (max-width: 520px) {
  .phone { padding: 8px; border-radius: 46px; }
  .phone::after { border-radius: 41px; }
  .phone img { border-radius: 38px; }
}

/* ---------- llm-info fact list ---------- */

.lede-doc {
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 0 34px;
  max-width: 62ch;
}

.facts { margin: 0; }

.facts dt {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--coral);
  margin: 30px 0 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.facts dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.facts dd {
  margin: 0;
  color: var(--ink-2);
  max-width: 68ch;
  line-height: 1.62;
}

@media (min-width: 780px) {
  .facts {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 28px;
  }
  .facts dt { grid-column: 1; margin-top: 0; }
  .facts dd { grid-column: 2; padding-top: 22px; border-top: 1px solid var(--line); }
  .facts dt { padding-top: 22px; }
  .facts dd:first-of-type { border-top: 0; padding-top: 0; }
}