/* Rentlor — brand tokens mirrored from Rentlor-iOS/Rentlor/DesignSystem/RLColor.swift
   Navy #00536D · Forest #003C44 · Lemon #A7E000 · Poppins (self-hosted, OFL) */

@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #00536D;
  --forest: #003C44;
  --lemon: #A7E000;
  --on-lemon: #003C44;
  --bg: #F4F7F7;
  --surface: #FFFFFF;
  --hairline: #E1E7E7;
  --text: #08232A;
  --text-2: #4C5A5E;
  --text-3: #7C8B8E;
  --positive: #1E8E5A;
  --radius: 16px;
  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Poppins", -apple-system, "SF Pro Text", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing — the <img> tags carry width/height attributes so
   the browser can reserve space and avoid layout shift, and without this the
   attribute height wins over the CSS width and every screenshot renders at its
   full intrinsic height. */
img { max-width: 100%; display: block; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Nav */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(244, 247, 247, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--text); }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand:hover { text-decoration: none; }
nav.links { display: flex; gap: 22px; font-size: 15px; font-weight: 600; }
nav.links a { color: var(--text-2); }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--forest) 0%, var(--navy) 90%);
  color: #EAF3F4; overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 0; }
.hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.15; font-weight: 700; color: #fff; }
.hero h1 em { font-style: normal; color: var(--lemon); }
.hero p.lead { margin-top: 18px; font-size: 18px; color: #C3D6D9; max-width: 46ch; }
.hero .eyebrow { margin-bottom: 16px; }
.hero .cta-row { margin: 28px 0 14px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.badge-soon {
  display: inline-block; background: var(--lemon); color: var(--on-lemon);
  font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 12px;
}
.hero .note { font-size: 14px; color: #9DB0B4; margin-bottom: 56px; }
.hero .shot { align-self: end; }
.hero .shot img {
  width: min(320px, 80%); margin: 0 auto; border-radius: 36px 36px 0 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45); border: 6px solid #0C2329; border-bottom: 0;
}

/* Icons — one inline sprite, stroked so a single set works on any background. */
.sprite { display: none; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75;
     stroke-linecap: round; stroke-linejoin: round; }

/* Trust strip under the hero */
.strip { padding: 0; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.strip-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 14px 32px; padding: 20px 0;
}
.strip-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--text-2);
}
.strip-list .i { width: 19px; height: 19px; color: var(--navy); flex: none; }

/* Sections */
section { padding: 76px 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--hairline); }
h2.sec { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; text-align: center; letter-spacing: -.01em; }
p.sec-sub { text-align: center; color: var(--text-2); max-width: 60ch; margin: 12px auto 0; }

.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lemon); margin-bottom: 14px;
}
.eyebrow.dark { color: var(--navy); }

/* Group label inside the feature section */
h3.group {
  margin: 52px 0 -20px; font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 14px;
}
h3.group::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.grid { display: grid; gap: 20px; margin-top: 44px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 60, 68, .08); border-color: #CBD8D8; }
section.alt .card { background: var(--bg); }
.card .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 14px; background: var(--forest); color: var(--lemon);
}
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.card p { font-size: 14.5px; color: var(--text-2); }

/* Alternating deep-dive rows */
.row {
  display: grid; grid-template-columns: 1fr .85fr; gap: 56px; align-items: center;
  padding: 56px 0; border-bottom: 1px solid var(--hairline);
}
.row:last-child { border-bottom: 0; padding-bottom: 8px; }
.row.reverse .row-copy { order: 2; }
.row h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
.row-copy > p { color: var(--text-2); font-size: 16px; max-width: 54ch; }
.ticks { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.ticks li {
  position: relative; padding-left: 30px; font-size: 15px; color: var(--text-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--lemon);
}
.ticks li::after {
  content: ""; position: absolute; left: 5.5px; top: 11px; width: 7px; height: 3.5px;
  border-left: 2px solid var(--forest); border-bottom: 2px solid var(--forest);
  transform: rotate(-45deg);
}
.row-shot { display: grid; place-items: center; }
.row-shot img {
  width: min(300px, 100%); border-radius: 30px;
  border: 1px solid var(--hairline); box-shadow: 0 18px 44px rgba(0, 60, 68, .15);
}

/* Ecosystem */
.ecosystem { background: var(--surface); border-block: 1px solid var(--hairline); }

/* Pricing */
.price-card { text-align: left; position: relative; display: flex; flex-direction: column; }
.price-card .tier { font-weight: 700; font-size: 19px; }
.price-card .amount { font-size: 34px; font-weight: 700; margin: 8px 0 2px; }
.price-card .amount span { font-size: 15px; font-weight: 600; color: var(--text-3); }
.price-card .annual { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; }
.price-card ul { list-style: none; margin-top: 6px; }
.price-card li { font-size: 14.5px; color: var(--text-2); padding: 5px 0 5px 26px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--positive); font-weight: 700; }
.price-card .trial { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.price-card.featured { border: 2px solid var(--navy); }
.price-card.featured::after {
  content: "Most popular"; position: absolute; top: -13px; right: 18px;
  background: var(--lemon); color: var(--on-lemon); font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
p.pricing-legal { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 26px; max-width: 72ch; margin-inline: auto; }

/* Trust */
.trust { background: var(--forest); color: #C3D6D9; }
.trust h2 { color: #fff; }
.trust .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.trust .card h3 { color: #fff; }
.trust .card p { color: #9DB0B4; }
.trust .card .ico { background: var(--lemon); color: var(--on-lemon); }

/* Footer */
footer.site { padding: 48px 0 64px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text-2); }
footer.site .cols { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
footer.site .foot-links { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
footer.site .disclaimer { margin-top: 26px; font-size: 12.5px; color: var(--text-3); max-width: 88ch; }

/* Legal pages */
main.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
main.legal h1 { font-size: 34px; font-weight: 700; margin-bottom: 4px; }
main.legal .updated { color: var(--text-3); font-size: 14px; margin-bottom: 36px; }
main.legal h2 { font-size: 21px; font-weight: 600; margin: 34px 0 10px; }
main.legal p, main.legal li { font-size: 15.5px; color: var(--text-2); margin-bottom: 12px; }
main.legal ul { padding-left: 22px; margin-bottom: 12px; }
main.legal .callout {
  background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--lemon);
  border-radius: 10px; padding: 16px 18px; margin: 18px 0;
}

@media (max-width: 980px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 56px; }
  .hero p.lead { margin-inline: auto; }
  .hero .cta-row { justify-content: center; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  nav.links { display: none; }
  /* Stack the deep-dive rows, copy always above its screenshot. */
  .row { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
  .row.reverse .row-copy { order: 0; }
  .row-copy > p, .ticks { margin-inline: auto; }
  .strip-list { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  h3.group { margin-top: 40px; }
  .strip-list { flex-direction: column; gap: 10px; }
}