/* Houzy — the same palette the app uses, so the site and the product do not
   look like two different companies. */
:root {
  --primary: #0f5c5a;
  --primary-light: #3b807e;
  --ink: #14201f;
  --ink-secondary: #5a6b69;
  --surface: #ffffff;
  --background: #f7f6f3;
  --border: #e6e4de;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

.bar {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  text-decoration: none;
}

/* Width and height are set on the tag as well, so the header does not reflow
   when the image loads. This only caps it against a large default font. */
.wordmark img {
  height: 28px;
  width: auto;
}

/* One italic word per heading. Enough to give a line a shape without
   reaching for a second typeface or a colour that would compete with the
   mark. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--primary);
}

/* ---- Call to action ---- */
/* The button needs room around it to read as an invitation rather than as
   the next line of the paragraph.
   Scoped `.hero .cta` rather than plain `.cta`, which quietly did nothing:
   `.hero p` further down is a class *and* an element, so it outranks a lone
   class and reset the margin to zero. Two classes outrank it back. The
   `!important` that used to be on .cta-note was the same collision, patched
   rather than diagnosed. */
.hero .cta { margin: 44px auto 0; }

.button {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.button:hover { background: var(--primary-light); }

.hero .cta-note {
  margin: 20px auto 0;
  font-size: 15px;
  color: var(--ink-secondary);
}

/* ---- Platforms ----
   Deliberately not the App Store and Google Play badges.
   Both Apple and Google require their badge to link to a live listing, and
   Houzy has neither yet. A badge that goes nowhere breaks their guidelines
   and, worse, tells a visitor the app is available when it is not — which is
   the one impression this page cannot afford to give.
   When the listings exist, replace this block with the real badges. The
   markup slot and the spacing are already correct. */
.platforms {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 24px auto 0;
  list-style: none;
  padding: 0;
}

.platforms li {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-secondary);
  background: var(--background);
}

.hero.closing {
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding-bottom: 64px;
}

.hero.closing h2 {
  margin: 0 auto 12px;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.03em;
}

/* ---- Claims ---- */
.claims {
  padding: 64px 24px;
  border-top: 1px solid var(--border);
}

.claims h2,
.faq h2 {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.03em;
}

.claims-lead {
  margin: 0 auto 40px;
  max-width: 54ch;
  text-align: center;
  font-size: 18px;
  color: var(--ink-secondary);
}

.claims-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.claims-grid h3 { margin: 0 0 8px; font-size: 18px; }

.claims-grid p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-secondary);
}

/* ---- FAQ ----
   Left as plain headings and paragraphs rather than collapsible panels. An
   accordion hides the answers, and the answers are the point — they are what
   somebody deciding whether to trust this with their home actually reads. */
.faq {
  padding: 64px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.faq .wrap { padding: 0; }

.qa {
  max-width: 62ch;
  margin: 0 auto;
  padding: 24px 0;
}

.qa + .qa { border-top: 1px solid var(--border); }

.qa h3 { margin: 0 0 8px; font-size: 18px; }

.qa p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-secondary);
}

/* ---- Screenshots ----
   This replaced a horizontal scrolling rail, which was wrong twice over. It
   left four of five screenshots behind a gesture nobody performs, and on a
   wide screen the row overflowed its container and sat visibly off-centre —
   a flex row that overflows cannot be centred with justify-content, because
   centring clips the start where the scroll begins.

   So: one hero shot on its own, then each remaining screenshot beside the
   sentence it is evidence for. */
.showcase {
  padding: 48px 24px 16px;
  background: var(--surface);
  /* The cluster is wider than the viewport on a phone. Clipping here rather
     than letting it overflow the page stops the whole document gaining a
     horizontal scrollbar, which is the single most obvious sign of a
     layout nobody checked. */
  overflow: hidden;
}

/* Three phones, centred, middle one forward.
   Flexbox centres this correctly because nothing overflows its container —
   the widths are viewport-relative, so the cluster shrinks rather than
   spilling. That was the flaw in the scrolling rail: an overflowing flex row
   cannot be centred, because centring clips the start. */
.cluster {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cropped, not shrunk.
   A phone screenshot is about 2.25:1. At any width where the interface is
   still readable, the full screen is enormous vertically — a 260px-wide
   phone is nearly 600px tall, which is most of a laptop viewport spent on
   one picture.
   So the top of each screen is shown and the rest is cut. The top is where
   the information is; the bottom is a navigation bar repeated on every
   screenshot. */
.cluster img {
  display: block;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.cluster .lead {
  width: clamp(219px, 30vw, 301px);
  height: clamp(339px, 46vw, 466px);
  /* Above the two beside it, and overlapping them slightly so the group
     reads as one object rather than three separate pictures. */
  position: relative;
  z-index: 2;
  margin: 0 -2vw;
  box-shadow: 0 10px 28px rgba(20, 32, 31, 0.12);
}

.cluster .side {
  width: clamp(182px, 24vw, 248px);
  height: clamp(282px, 38vw, 384px);
  /* Set back: smaller, slightly faded, pushed down. The eye lands on the
     middle screen first and the others read as context. */
  opacity: 0.9;
  transform: translateY(20px);
}

@media (max-width: 560px) {
  /* Three phones at this width are three unreadable slivers. One legible
     screen says more than three that cannot be read. */
  .cluster .side { display: none; }
  .cluster .lead {
    width: min(78vw, 299px);
    height: min(120vw, 460px);
    margin: 0;
  }
}

.feature {
  background: var(--surface);
  padding: 8px 24px 64px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 940px;
  /* Centres the row itself. The old rail could not do this, which is what
     made it look broken on a desktop. */
  margin: 0 auto;
  padding: 48px 0;
}

.feature-row + .feature-row { border-top: 1px solid var(--border); }

/* Text first in the markup on every row, so a screen reader and a narrow
   screen both get heading-then-picture. `row-reverse` flips only the
   painting order, never the reading order. */
.feature-row.reversed { flex-direction: row-reverse; }

.feature-text { flex: 1 1 0; }

.feature-text h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
}

.feature-text p {
  margin: 0;
  font-size: 17px;
  color: var(--ink-secondary);
  max-width: 46ch;
}

.feature-shot { flex: 0 0 210px; }

/* Cropped for the same reason as the cluster — see above. Slightly taller
   here than in the hero, because these screens are the point of the row
   rather than a supporting image. */
.feature-shot img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 20px;
}

/* Below this the two columns have nowhere to go, so they stack and the
   screenshot shrinks to something a thumb-width page can still hold. */
@media (max-width: 720px) {
  .feature-row,
  .feature-row.reversed {
    flex-direction: column;
    gap: 28px;
    padding: 36px 0;
    text-align: center;
  }
  .feature-text p { margin: 0 auto; }
  .feature-shot { flex: 0 0 auto; width: min(60vw, 200px); }
  .feature-shot img { height: 300px; }
}

/* ---- Landing ---- */
.hero {
  padding: 72px 24px 56px;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Scales with the heading rather than sitting at a fixed pixel size, so the
   mark and the words stay in proportion as the viewport narrows. Width and
   height are on the tag too, so the hero does not jump when it loads. */
.hero-mark {
  display: block;
  margin: 0 auto 24px;
  height: clamp(56px, 9vw, 88px);
  width: auto;
}

.hero h1 {
  margin: 0 auto 16px;
  max-width: 14ch;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--ink-secondary);
}

.wrap { max-width: 880px; margin: 0 auto; padding: 56px 24px; }

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--ink-secondary); }

.note {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--ink-secondary);
}

/* ---- Legal pages ---- */
.prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: 48px 24px 24px;
  background: var(--surface);
}

.prose h1 { font-size: 32px; letter-spacing: -0.02em; }
.prose h2 { font-size: 21px; margin-top: 40px; }
.prose li { margin-bottom: 8px; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

.foot {
  padding: 32px 24px 56px;
  text-align: center;
  color: var(--ink-secondary);
  font-size: 15px;
}

.foot a { color: var(--ink-secondary); }