/* UseKUSA marketing landing (usekusa.com). Standalone from the portal's
   styles.css -- this is the public brand surface (navy/gold, Playfair + Inter),
   distinct from the app's warm dashboard palette. */
:root {
  --navy: #1f365c;
  --gold: #b3833b;
  --bg: #f8fafc;
  --text: #1f2937;
  --muted: #64748b;
  --line: #e5e7eb;
  --radius: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px/1.6 Inter, Arial, sans-serif;
  background: #fff;
  color: var(--text);
}
h1,
h2,
h3 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
.container {
  max-width: 1180px;
  margin: auto;
  padding: 0 24px;
}
.section-pad {
  padding: 72px 24px;
}

/* Top bar / nav */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-mark {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.logo-word {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.logo-word span {
  color: var(--gold);
}
nav {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}
nav a:hover {
  color: var(--navy);
}

/* Buttons */
.btn {
  background: var(--gold);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover {
  filter: brightness(0.95);
}
/* .btn sets display:inline-block, which beats the [hidden] default -- so the
   "Sign up" buttons stayed visible after revealing their form. */
.btn[hidden] {
  display: none;
}
.btn.ghost {
  background: #fff;
  color: var(--navy);
  border: 1px solid #ccc;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  letter-spacing: 0.15em;
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
}
h1 {
  font-size: 3rem;
  line-height: 1.1;
  color: var(--navy);
  margin: 12px 0 16px;
}
.hero-copy p {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 48ch;
}
.placeholder {
  height: 380px;
  border: 2px dashed #bbb;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(31, 54, 92, 0.18);
}

/* Sections */
h2 {
  color: var(--navy);
  font-size: 2rem;
  margin: 0 0 24px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}
.card h3 {
  color: var(--navy);
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.card p {
  margin: 0;
  color: var(--muted);
}
.tint {
  background: var(--bg);
}

/* Workflow */
.workflow ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.workflow li {
  background: var(--bg);
  padding: 18px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-weight: 600;
  color: var(--navy);
}
.workflow li::before {
  counter-increment: step;
  content: '0' counter(step);
  display: block;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
}

/* Split (about) */
.split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
}
.split ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.split .card h3 {
  font-size: 1.1rem;
}

/* Get started / signup */
.signup-card h3 {
  color: var(--navy);
  margin: 6px 0 6px;
  font-size: 1.25rem;
}
.signup-card > p {
  color: var(--muted);
  font-size: 0.95rem;
}
.signup-card form {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.signup-card label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--navy);
  font-weight: 600;
}
.signup-card input {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font: inherit;
  width: 100%;
}
.form-status {
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.form-status.success {
  color: #166534;
}
.form-status.error {
  color: #b91c1c;
}
.form-status a {
  color: var(--navy);
}
.badge-soon {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Footer */
footer {
  margin-top: 32px;
  background: var(--navy);
  color: #fff;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 24px;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand .logo-mark {
  height: 44px;
  width: 44px;
}
.footer strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
}
.footer p {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 0.9rem;
}
.footer a {
  color: #fff;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* ---- Interior marketing pages (features / solutions / company / contact) ---- */
.page-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.page-hero h1 {
  font-size: 2.7rem;
}
.page-hero .lead {
  font-size: 1.15rem;
  color: var(--muted);
}
.section-tint {
  background: var(--bg);
}
nav a.active {
  color: var(--navy);
  font-weight: 700;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.feature-list li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 9px;
  color: var(--muted);
}
.feature-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.card-icon {
  font-size: 1.7rem;
  display: block;
  margin-bottom: 8px;
}
.audience-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.contact-form {
  display: grid;
  gap: 14px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9rem;
}
.contact-form input,
.contact-form textarea {
  padding: 11px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font: inherit;
  width: 100%;
}
.contact-side p {
  color: var(--muted);
}
.contact-side a {
  color: var(--navy);
  font-weight: 600;
}

@media (max-width: 768px) {
  .page-hero h1 {
    font-size: 2.1rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  nav a:not(.btn) {
    display: none;
  }
  .hero,
  .split {
    grid-template-columns: 1fr;
  }
  h1 {
    font-size: 2.2rem;
  }
  .placeholder {
    height: 240px;
  }
  .footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* --- Home dashboard illustration (for-your-home hero) ----------------------
   Drawn in markup instead of a screenshot. The page used to show
   assets/shot-admin.png -- the PROPERTY MANAGER dashboard -- which was the
   wrong first impression for someone looking after their own home, and would
   have gone stale the moment either dashboard changed.

   Every label matches the real homeowner dashboard, so this stays honest: it
   illustrates the product rather than depicting screens that do not exist. */
.home-shot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 50px rgba(31, 54, 92, 0.18);
  overflow: hidden;
}

.home-shot-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: #f4f6fa;
  border-bottom: 1px solid var(--line);
}

.home-shot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d7ddea;
}

.home-shot-body { padding: 22px 22px 24px; }

.home-shot-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #b3833b);
  font-weight: 700;
}

.home-shot-title {
  margin: 6px 0 2px;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--navy, #1f365c);
}

.home-shot-sub { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }

.home-shot-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.home-shot-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  background: #fbfcfe;
}

.home-shot-icon { font-size: 1.1rem; display: block; }

.home-shot-tile strong {
  display: block;
  font-size: 1.35rem;
  color: var(--navy, #1f365c);
  line-height: 1.2;
}

.home-shot-tile span:last-child {
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
}

.home-shot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--navy, #1f365c);
}

.home-shot-chip {
  background: #eef2f8;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}

/* On a phone the four tiles are unreadable in one row. */
@media (max-width: 640px) {
  .home-shot-tiles { grid-template-columns: repeat(2, 1fr); }
}


/* The four ways in, directly under the hero.

   The hero used to promise "Run your entire property business", which is one
   audience out of four, and on a phone the next thing after it was a row of
   feature cards written for that same audience. A cleaning pro could read the
   whole first screen and never learn the platform was for them too. */
.audience-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.audience-path {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 16px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.audience-path h3 {
  color: var(--navy, #1f365c);
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.audience-path p {
  margin: 0 0 18px;
  color: var(--muted, #64748b);
  font-size: 0.95rem;
  /* Push the buttons to a common baseline so the row of cards does not look
     ragged when one description runs a line longer. */
  flex: 1 1 auto;
}

.audience-path-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* The signup switcher.

   This was four large buttons repeating the question the audience cards at the
   top of the page had already asked. A dropdown states the answer they gave and
   lets them change it, which is one decision instead of two. */
.signup-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 24px;
  font-weight: 600;
  color: var(--navy, #1f365c);
}

.signup-switch select {
  font: inherit;
  font-weight: 500;
  color: var(--text, #1f2937);
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  /* Big enough to read as a control on a phone rather than a stray form field,
     since it is the only way to switch forms now. */
  min-height: 48px;
  min-width: 260px;
  max-width: 100%;
}

.signup-switch select:focus-visible {
  outline: 2px solid var(--gold, #b3833b);
  outline-offset: 2px;
}

/* ---- The choices come first ------------------------------------------------
   The hero is now the headline alone, so the four paths start near the top of a
   phone instead of 1.65 screens down. */
.hero-choose {
  padding-bottom: 8px;
}

.hero-choose h1 {
  max-width: 16ch;
  margin-bottom: 0;
}

/* The explanation and the dashboard, in the slot the hero used to occupy --
   below the decision rather than in front of it. */
.what-this-is {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.what-this-is-copy p:not(.eyebrow) {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 48ch;
}

/* A mark per path. Drawn, not photographed: a stock image of a cleaner or a
   contractor is reassurance-by-association, and it reads as a template. These
   exist to make four cards tellable apart WITHOUT reading them, which is the
   job that was actually missing. */
.path-mark {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 10px;
}

/* One decision per card. This was a second button, so the section asked you to
   choose a role AND then choose between two buttons -- eight of them in a
   block whose whole purpose is a single easy choice. */
.path-more {
  align-self: center;
  color: var(--navy);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .what-this-is {
    grid-template-columns: 1fr;
  }

  /* The screenshot is a property manager's dashboard. It is worth showing, but
     not to a cleaning pro before she has been asked what she does -- and on a
     phone it is a whole screen of scrolling. */
  .what-this-is .hero-shot {
    order: 2;
  }

  .hero-choose h1 {
    font-size: 2.1rem;
    max-width: none;
  }
}

/* On a phone the choices have to LOOK like a list of four, not like one card
   with something below it. Measured: the section's 72px top padding, a
   two-line h2 and 24px card padding put the first card's foot 150px past the
   fold, so exactly one option was in view.

   These reductions apply only where the room is not there. Desktop keeps the
   original spacing, where nothing was wrong with it. */
@media (max-width: 768px) {
  .hero-choose {
    padding-top: 28px;
    padding-bottom: 0;
  }

  #who-its-for {
    padding-top: 20px;
  }

  #who-its-for h2 {
    font-size: 1.5rem;
    margin-bottom: 14px;
  }

  .audience-path {
    padding: 16px 18px;
  }

  .audience-path p {
    margin-bottom: 12px;
    font-size: 0.92rem;
  }

  .path-mark {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
  }

  .audience-paths {
    gap: 12px;
  }
}

/* The header was 156px on a phone -- nearly a quarter of the viewport before
   the page has said anything. nav is `flex-wrap: wrap` with a 22px gap, and the
   two buttons that survive the mobile rules were wrapping onto separate rows.
   Side by side they take one. */
@media (max-width: 768px) {
  header nav {
    gap: 10px;
    flex-wrap: nowrap;
  }

  header nav .btn {
    padding: 10px 14px;
    white-space: nowrap;
  }
}

/* Keep the primary action on one baseline across the row even when one
   description runs longer than the rest. */
.audience-path-actions {
  align-items: center;
}