:root {
  --lp-bg: #f2eee9;
  --lp-ink: #000000;
  --lp-accent: #fe5f55;
  --lp-mustard: #d5a021;
  --lp-olive: #636940;
  --lp-card-bg: #ffffff;

  /* 12-column grid, 40px page margins, 20px gutters (matches the Figma frame) */
  --lp-max: 1440px;
  --lp-margin: 40px;
  --lp-gutter: 20px;
}

* { box-sizing: border-box; }

html {
  /* Anchor scrolling is animated manually in landing.js (with a slower,
     controllable duration) — leaving this "smooth" would double up with
     that and fight it, since window.scrollTo() would itself get smoothed. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  /* macOS browsers subpixel-antialias text by default, which renders web
     fonts visibly heavier than the same weight looks in Figma's own text
     engine. This is the standard correction — it doesn't change the
     weight, just how thin/crisp it renders. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Figma's "Auto" line-height (exported as lineHeight: 100, which is NOT
     literally 100%/1.0 — it's Figma's placeholder for "use the font's own
     natural metrics") measures out to ~1.25-1.3x on this file's fonts,
     which is exactly what the browser's own `normal` default already gives
     these fonts — so no override needed here. */
}

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

h1, h2, h3 {
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
}

h1 { font-weight: 700; font-size: clamp(32px, 5vw, 53px); }
h2 { font-weight: 700; font-size: clamp(26px, 3.5vw, 35px); }
h3 { font-weight: 500; font-size: 25px; }

p { margin: 0; }

a { color: inherit; }

.lp-body-lg { font-size: clamp(18px, 2.5vw, 30px); font-weight: 300; max-width: 670px; color: #02020b; }
.lp-intro { font-size: 25px; font-weight: 300; max-width: 555px; margin-top: 13px; }
.lp-intro.lp-center { max-width: 670px; margin-top: 11px; }
.lp-caption { font-size: 12px; font-weight: 300; margin-top: 4px; color: rgba(0, 0, 0, 0.85); }
.lp-center { text-align: center; margin-left: auto; margin-right: auto; }

/* Buttons */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.lp-btn-primary {
  background: var(--lp-accent);
  color: #000;
}

.lp-btn-primary:hover { opacity: 0.9; }

.lp-text-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 300;
  font-size: 16px;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.lp-coming-soon {
  opacity: 0.45;
  cursor: not-allowed;
}

.lp-coming-soon:hover { opacity: 0.45; }

.lp-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp-cta-center { margin: 40px auto 0; }

/* Nav */

.lp-nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lp-bg);
  width: 100%;
}

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 20px var(--lp-margin);
  flex-wrap: wrap;
}

.lp-logo img { width: 157.72px; height: auto; }

.lp-nav-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 300;
}

.lp-nav-links a { text-decoration: none; }
.lp-nav-links a:hover { text-decoration: underline; }

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Hero */

.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 20px var(--lp-margin) 60px;
}

.lp-hero-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 40px;
  overflow: hidden;
}

.lp-hero-image video {
  width: 100%;
  height: auto;
  display: block;
}

.lp-hero-content {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-hero-content h1 { margin-bottom: 19px; }
.lp-hero-content .lp-body-lg { margin-bottom: 20px; }

/* Sections */

.lp-section {
  padding: 80px var(--lp-margin);
  max-width: var(--lp-max);
  margin: 0 auto;
}

/* How it works */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-gutter);
  margin-top: 33px;
}

.lp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.lp-step img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.lp-step p { font-size: 25px; font-weight: 300; max-width: 440px; }

/* Feature rows (How is Friendly different) */

.lp-feature-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 80px;
}

.lp-feature-row:first-of-type { margin-top: 72px; }
.lp-feature-row-reverse + .lp-feature-row { margin-top: 89px; }

.lp-feature-row-reverse { flex-direction: row-reverse; }

.lp-feature-media {
  /* Fixed to Figma's exact 785px — the row doesn't fill edge to edge, the
     leftover space is intentional (falls on the outer side, mirrored for
     the reversed row by row-reverse's own packing direction). */
  flex: 0 0 785px;
  border-radius: 20px;
  overflow: hidden;
}

.lp-feature-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.lp-feature-row .lp-feature-media {
  border: 2px solid var(--lp-mustard);
}

.lp-feature-row-reverse .lp-feature-media {
  border: 2px solid var(--lp-olive);
}

.lp-feature-content {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.lp-feature-content p:not(.lp-caption) { font-size: 25px; font-weight: 300; }

.lp-feature-content ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 25px;
  font-weight: 300;
}

.lp-feature-content .lp-cta { align-self: center; margin-top: 8px; }

/* FAQ */

.lp-faq {
  display: flex;
  gap: var(--lp-gutter);
  margin-top: 20px;
  align-items: flex-start;
}

.lp-faq-image {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
}

.lp-faq-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.lp-faq-list {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lp-faq-item dt {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  font-size: 25px;
  margin-bottom: 8px;
}

.lp-faq-item dd {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}

/* Banner */

.lp-banner {
  background: var(--lp-mustard);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.lp-banner p {
  max-width: 670px;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
}

/* Pricing */

.lp-pricing-cards {
  display: flex;
  gap: var(--lp-gutter);
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.lp-pricing-card {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 30px;
  width: 325px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-pricing-card .lp-caption { margin-top: 5px; }

.lp-price {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 35px;
}

.lp-price-detail { font-size: 17px; font-weight: 300; margin-top: 0; margin-bottom: 33px; }

/* Footer */

.lp-footer {
  max-width: var(--lp-max);
  margin: 40px auto 0;
  padding: 20px var(--lp-margin) 40px;
}

.lp-footer-top, .lp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 300;
}

.lp-footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 21px;
  flex-wrap: wrap;
}

.lp-footer-brand img { width: 157.72px; height: auto; }

.lp-footer-brand nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.lp-footer-brand nav a { text-decoration: none; }
.lp-footer-brand nav a:hover { text-decoration: underline; }

.lp-footer-pages {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.lp-footer-pages a { color: inherit; text-decoration: none; }
.lp-footer-pages a:hover { text-decoration: underline; }

/* Only used at the mobile breakpoint, where the footer reorders into a
   single centered stack with an explicit divider between the two groups
   of links — desktop/tablet use a border on .lp-footer-bottom instead. */
.lp-footer-divider {
  display: none;
  border: none;
  margin: 0;
}

/* Responsive */

/* .lp-feature-media/.lp-feature-content are fixed at 785px + 440px to match
   Figma exactly at the design width — that combo (plus gap and page margins)
   needs roughly 1325px to avoid overflowing, well above the general 900px
   breakpoint below, so it gets its own. */
@media (max-width: 1325px) {
  .lp-feature-row, .lp-feature-row-reverse {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-feature-media, .lp-feature-content {
    flex-basis: auto;
  }
}

@media (max-width: 900px) {
  .lp-steps { grid-template-columns: 1fr; }
  .lp-faq { flex-direction: column; }
  .lp-nav { justify-content: center; text-align: center; }
  .lp-nav-links { justify-content: center; }
  .lp-section { padding: 60px 24px; }
}

/* Tablet — from the dedicated Figma tablet frame (iPad 11" portrait = 834px
   exactly), not a squeezed-down desktop: its own type scale, two-column
   sections stay two-column but with symmetric 367/367 proportions instead
   of desktop's asymmetric 785/440 fixed split, and the nav drops its link
   row entirely rather than wrapping. Lower bound is 834px, not the more
   common 768px tablet convention — the fixed 367+367+20px column math only
   fits from 834px up, and there's no design reference yet for anything
   narrower (that's the upcoming mobile pass). Upper bound 1024px covers
   the standard tablet range above the iPad 11" width. Placed after the two
   blocks above so it wins the cascade for the overlap. */
@media (min-width: 834px) and (max-width: 1024px) {
  :root { --lp-ink: #02020b; }

  .lp-section { padding: 80px var(--lp-margin); }

  .lp-nav { justify-content: space-between; text-align: left; }
  .lp-nav-links { display: none; }
  .lp-footer-brand nav { display: none; }

  h1 { font-size: 45px; }
  h2 { font-size: 30px; }
  h3 { font-size: 21px; }

  .lp-body-lg { font-size: 26px; max-width: 625px; }
  .lp-hero-image { margin-bottom: 0; }

  .lp-intro { font-size: 21px; margin-top: 20px; }

  .lp-steps { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
  .lp-step { gap: 0; }
  .lp-step p { font-size: 21px; }

  .lp-feature-row, .lp-feature-row-reverse {
    flex-direction: row;
    align-items: center;
    margin-top: 80px;
  }
  .lp-feature-row-reverse { flex-direction: row-reverse; }
  .lp-feature-row:first-of-type { margin-top: 42px; }
  .lp-feature-media, .lp-feature-content {
    flex: 0 0 367px;
  }
  .lp-feature-content p:not(.lp-caption) { font-size: 21px; }
  .lp-feature-content ul { font-size: 21px; }

  .lp-faq { flex-direction: row; }
  .lp-faq-item dt { font-size: 21px; }
  .lp-faq-item dd { font-size: 14px; }

  .lp-price { font-size: 30px; }
  .lp-price-detail { font-size: 14px; }

  .lp-caption { font-size: 10px; }

  .lp-footer-top, .lp-footer-bottom { font-size: 14px; }
}

/* Mobile — from the dedicated Figma mobile frame (402px). A real redesign,
   not just smaller type: page margin drops to 20px, nav logo shrinks (the
   footer logo doesn't), everything stacks to one column, most text —
   including body copy and bullet lists, this is literally what the file
   specifies, not a guess — becomes centered, the FAQ photo is dropped
   entirely, and the footer reorders into one centered stack with an
   explicit divider. Below the tablet's 834px floor. */
@media (max-width: 833px) {
  :root { --lp-margin: 20px; }

  .lp-section { padding: 80px var(--lp-margin); text-align: center; }
  .lp-hero { padding: 20px var(--lp-margin) 60px; }

  .lp-nav { justify-content: space-between; text-align: left; }
  .lp-nav-links { display: none; }
  .lp-nav .lp-logo img { width: 121px; height: 40px; }

  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  h3 { font-size: 18px; }

  .lp-body-lg { font-size: 21px; max-width: 362px; }
  .lp-hero-image { margin-bottom: 0; }

  .lp-intro { font-size: 18px; margin-top: 20px; }

  .lp-steps { grid-template-columns: 1fr; gap: 40px; margin-top: 20px; }
  .lp-step { gap: 10px; }
  .lp-step p { font-size: 18px; }

  .lp-feature-row, .lp-feature-row-reverse {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }
  .lp-feature-row:first-of-type { margin-top: 40px; }
  .lp-feature-row-reverse + .lp-feature-row { margin-top: 40px; }
  .lp-feature-media, .lp-feature-content { flex: 1 1 auto; width: 100%; }
  .lp-feature-content { align-items: center; }
  .lp-feature-content p:not(.lp-caption) { font-size: 18px; }
  .lp-feature-content ul { font-size: 18px; }

  .lp-faq-image { display: none; }
  .lp-faq-list { align-items: center; }
  .lp-faq-item dt { font-size: 18px; }
  .lp-faq-item dd { font-size: 14px; }

  .lp-price { font-size: 25px; }
  .lp-price-detail { font-size: 14px; }

  .lp-caption { font-size: 12px; }

  .lp-pricing-cards { flex-direction: column; align-items: center; }
  .lp-pricing-card { width: 100%; max-width: 362px; }

  /* Footer reorders into one centered stack: logo, About, Contact,
     divider, Terms of service, Privacy policy, copyright — not the
     desktop/tablet two-row arrangement. display:contents unwraps the two
     row wrappers so their children become direct flex items here, letting
     `order` place all of them in one flat sequence. */
  .lp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 80px var(--lp-margin);
    margin-top: 0;
    text-align: center;
  }
  .lp-footer-top, .lp-footer-bottom { display: contents; }
  .lp-footer-brand {
    flex-direction: column;
    align-items: center;
    order: 1;
  }
  .lp-footer-brand nav { display: none; }
  .lp-footer-top .lp-footer-pages { order: 2; flex-direction: column; align-items: center; gap: 20px; }
  .lp-footer-divider {
    display: block;
    order: 3;
    width: 100%;
    max-width: 362px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
  .lp-footer-bottom .lp-footer-pages { order: 4; flex-direction: column; align-items: center; gap: 20px; }
  .lp-footer-bottom p { order: 5; }
  .lp-footer-bottom { border-top: none; }
  .lp-footer-top, .lp-footer-bottom { font-size: 16px; }
}