/* Foorent landing page. Values come from Figma "Foorent Website" › Landing Page (node 1:2), drawn at 1440 wide. */
:root {
  --ink: #281361;            /* headings and body text */
  --brand: #6831ba;          /* "foorent" in headings, current nav link */
  --deep: #1f005f;           /* schemes/on-primary-fixed */
  --deep-text: #ccbdff;      /* schemes/primary-fixed-dim */
  --lilac: #d6c9ff;          /* schemes/secondary-container */
  --on-lilac: #403569;       /* schemes/on-secondary-container */
  --secondary: #62568d;      /* schemes/secondary */
  --primary-container: #eaddff;
  --on-primary-container: #4f378a;
  --button-primary: #4f378b; /* schemes/on-primary-fixed-variant */
  --card: #fbfafe;
  --page-grey: #efeff2;
  --strip: #f7f1fd;          /* surface-container-low */
  --card-shadow: 0 18px 62.6px 7px rgba(0, 0, 0, 0.07);
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--page-grey);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1344px, 100% - 96px); margin-inline: auto; }

/* Brand: 45×54 mark, 13 gap, Plus Jakarta Sans 32 with "foo" ExtraBold and "rent" Regular. */
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { position: relative; width: 45px; height: 54px; overflow: hidden; flex: none; }
.brand-mark img { position: absolute; max-width: none; width: 157.36%; height: 131.49%; left: -27.35%; top: -8.15%; }
.wordmark { font: 400 32px/1.25 "Plus Jakarta Sans", sans-serif; letter-spacing: 1.6px; color: var(--ink); }
.wordmark b { font-weight: 800; }
.brand-word { color: var(--brand); font-weight: 400; }
.brand-word b { font-weight: 700; }

/* Buttons: 56 high, 16 radius, DM Sans 16/24. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 16px; border-radius: 16px;
  font: 400 16px/24px var(--sans); color: #fff; white-space: nowrap;
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-black { background: #000; width: 210px; }
.btn-primary { background: var(--button-primary); }
.store-buttons { display: flex; gap: 17px; }
.store-buttons.fill .btn { flex: 1; width: auto; }
span.btn[aria-disabled] { cursor: default; }
span.btn[aria-disabled]:hover { opacity: 1; }
.store-note { margin-top: 12px; font: 400 14px/20px var(--sans); color: var(--secondary); }

/* ---------- Hero (1024 high) ---------- */
.hero { position: relative; background: #fff; overflow: hidden; min-height: 1024px; }
.hero-shadow { position: absolute; left: -543px; top: 99px; width: 2307px; height: 999px; max-width: none; pointer-events: none; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 56px; }
.nav-links { display: flex; gap: 24px; font: 500 16px/normal var(--sans); }
.nav-links a { color: #000; }
.nav-links a:hover, .nav-links a.is-current { color: var(--brand); }
.hero-body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 44px; padding: 171px 0 102px; }
.hero-copy { width: 663px; flex: none; }
.hero-title { display: flex; flex-direction: column; gap: 20px; font-weight: 700; }
.hero-title > span { position: relative; display: block; white-space: nowrap; }
.hero-title > span > span { position: relative; }
.line1 { font: 700 53px/normal var(--sans); }
.line2 { font: 400 60px/normal "Inter", sans-serif; }
.hl { position: absolute; max-width: none; }
.hl-borrow { left: -3px; top: 6px; width: 193px; height: 64px; }
.hl-lend { left: -9px; top: 7.5px; width: 157.5px; height: 69.5px; }
.hero-text { margin-top: 40px; width: 593px; font: 400 20px/32px var(--sans); }
.hero-text b { font-weight: 700; }
.hero-copy .store-buttons { margin-top: 48px; }
.hero-art { width: 637px; height: 637px; flex: none; object-fit: cover; }

/* ---------- Section headings: 53 Bold, 16 gap, 20/28 intro ---------- */
.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.section-head h2 { font: 700 53px/normal var(--sans); }
.section-head p { max-width: 610px; font: 400 20px/28px var(--sans); }
.section-head.narrow p { max-width: 504px; }

/* ---------- How it works (942 high) ---------- */
.how { background: #fff; padding: 112px 0; }
.steps { display: flex; justify-content: space-between; gap: 24px; margin-top: 88px; }
.step-card {
  position: relative; flex: 0 1 413px; height: 489px; overflow: hidden;
  background: var(--card); border: 1px solid #fff; border-radius: 24px; box-shadow: var(--card-shadow);
}
.step-top { position: absolute; left: 31px; top: 72px; width: 349px; display: flex; flex-direction: column; gap: 16px; }
.step-num {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 6px solid var(--card); border-radius: 999px; background: var(--lilac);
  font: 400 20px/28px var(--sans); color: var(--on-lilac);
}
.step-top h3 { font: 700 24px/24px var(--sans); }
.step-top p { font: 400 18px/28px var(--sans); }
.step-note { position: absolute; left: 31px; top: 360px; width: 275px; font: 400 15px/28px var(--sans); }
.step-art { position: absolute; object-fit: cover; }
.art-dress { left: 359px; top: 329px; width: 107px; height: 107px; }
.art-mic { left: 319.5px; top: 400px; width: 115px; height: 115px; }
.art-garden { left: 349px; top: 277px; width: 111px; height: 111px; }

/* ---------- Trust (983 high) ---------- */
.trust { background: linear-gradient(to bottom, #fff, var(--page-grey) 50%, #fff); padding: 88px 0; }
.globe { width: 422px; height: 422px; margin: 52px auto 56px; object-fit: cover; }
.features { display: flex; gap: 16px; }
.feature {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; padding: 24px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  background: var(--card); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 19px 62.6px 7px rgba(0, 0, 0, 0.07);
}
.feature h3 { font: 700 20px/24px var(--sans); }
.feature p { font: 400 16px/28px var(--sans); color: var(--secondary); }
.feature.is-dark { background: var(--deep); border-color: var(--deep); box-shadow: 0 39.133px 39.133px rgba(0, 0, 0, 0.25); justify-content: flex-start; }
.feature.is-dark h3, .feature.is-dark p { color: var(--deep-text); }
.feature-bar { position: absolute; left: 0; bottom: 0; width: 78px; height: 6px; background: var(--deep-text); }

/* ---------- Why Foorent (1057 high) ---------- */
.why { background: #fff; padding: 88px 0; }
.why-row { position: relative; display: flex; gap: 48px; }
.why-row.row1 { margin-top: 72px; }
.why-row.row2 { margin-top: 48px; }
.why-card { position: relative; flex: 1 1 0; min-width: 0; height: 310px; overflow: hidden; border-radius: 24px; box-shadow: 0 19px 62.6px 7px rgba(0, 0, 0, 0.07); }
.why-card.w504 { flex: 0 0 504px; }
.why-card.dark { background: var(--deep); color: var(--deep-text); }
.why-card.light { background: var(--lilac); }
.why-text { position: absolute; display: flex; flex-direction: column; gap: 16px; }
.why-text h3 { font: 700 32px/24px var(--sans); }
.why-text p { font: 400 18px/28px var(--sans); }
.why-card.light h3 { color: var(--ink); }
.why-card.light p { color: var(--on-lilac); }
.row1 .why-text.at-bottom { left: 40px; top: 174px; right: 40px; }
.row1 .why-text.at-bottom p { font-size: 16px; }
.row1 .why-text.at-top { left: 40px; top: 40px; width: min(513px, 100% - 80px); }
.row2 .why-text.at-bottom { left: 32px; top: 162px; right: 32px; }
/* Illustrations overlap the cards; each is a crop of a larger render, as in Figma. */
.why-art { position: absolute; overflow: hidden; pointer-events: none; z-index: 1; }
.why-art img { position: absolute; max-width: none; }
.art-leaf { left: 371px; top: -53px; width: 153px; height: 200px; }
.art-leaf img { width: 170.38%; height: 130.45%; left: -35.44%; top: -15.92%; }
.art-piggy { right: -32px; top: 81px; width: 241px; height: 254px; }
.art-piggy img { width: 129.79%; height: 123.05%; left: -11.3%; top: -12.01%; }
.art-tools { left: -15px; top: -32px; width: 208px; height: 177px; }
.art-tools img { width: 114.34%; height: 134.67%; left: -8.3%; top: -17.78%; }
.art-people { left: calc(50% + 4px); top: -32px; width: 174px; height: 170px; }
.art-people img { width: 117.81%; height: 120.4%; left: -8.61%; top: -10%; }

/* ---------- Quiz card (1344 × 380) ---------- */
.quiz-wrap { padding: 89px 0 88px; background: var(--page-grey); }
.quiz {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(1344px, 100% - 96px); margin-inline: auto; padding: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  background: #fff; border: 1px solid #e4e4e4; border-radius: 24px; box-shadow: 0 24px 128px rgba(48, 48, 52, 0.14);
}
.quiz-glow { position: absolute; right: -0.93px; top: 50%; width: 928px; height: 776px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: -1; }
.quiz-glow > span { position: relative; width: 553.457px; height: 735.749px; flex: none; transform: rotate(-16.5deg) scaleY(.96) skewX(16.18deg); }
.quiz-glow img { position: absolute; inset: -6.31% -8.39%; width: 116.78%; height: 112.62%; max-width: none; }
.quiz-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.quiz-head h2 { font: 600 53px/normal "Inter", sans-serif; }
.quiz-head p { font: 400 20px/28px var(--sans); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.chips li {
  display: flex; align-items: center; height: 40px; padding: 4px 16px; border-radius: 12px;
  background: var(--primary-container); color: var(--on-primary-container); font: 500 16px/24px var(--sans);
}

/* ---------- Footer ---------- */
.footer { background: #fff; }
.footer-top { display: flex; align-items: flex-start; gap: 17px; padding-top: 48px; }
.footer-brand { width: 323px; flex: none; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.footer-brand > p { font: 400 14px/28px var(--sans); }
.footer-label { font: 600 16px/normal var(--sans); letter-spacing: .8px; }
.social { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.social ul { display: flex; gap: 16px; }
.social img { width: 24px; height: 24px; }
.footer-links { display: flex; gap: 16px; padding-top: 8px; font: 400 16px/normal var(--sans); }
.footer-links ul { width: 210px; display: flex; flex-direction: column; gap: 16px; }
.footer-col-pair { display: flex; flex-direction: column; gap: 40px; }
.footer-head { font-weight: 800; letter-spacing: .8px; }
.footer-links a { opacity: .7; }
.footer-links a:hover { opacity: 1; }
.footer-side { width: 437px; margin-left: auto; display: flex; flex-direction: column; gap: 40px; }
.newsletter .footer-label { height: 40px; display: flex; align-items: center; }
.newsletter-help { font: 400 12px/normal var(--sans); letter-spacing: .04px; color: #49454f; }
.email-field {
  position: relative; display: block; height: 64px; margin-top: 8px;
  background: var(--card); border: 1px solid var(--primary-container); border-radius: 999px;
  filter: drop-shadow(0 18px 31.3px rgba(0, 0, 0, 0.07));
}
.email-text { position: absolute; left: 23px; top: 15px; font: 400 15px/32px "Inter", sans-serif; color: var(--secondary); }
.email-field:hover, .email-field:focus-visible { border-color: var(--on-primary-container); }
.email-send { position: absolute; right: 12px; top: 11px; display: flex; padding: 4px; border-radius: 100px; background: var(--primary-container); }
.email-send img { width: 24px; height: 24px; margin: 4px; }
.footer-side .footer-label + .store-buttons { margin-top: 8px; }

.footer-strip { display: flex; align-items: center; gap: 39px; margin-top: 147px; padding: 16px; border-radius: 16px; background: var(--strip); overflow: hidden; }
.made-in { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--deep); color: #e7deff; box-shadow: 0 19px 62.6px 7px rgba(0, 0, 0, 0.07); flex: none; }
.made-in div { display: flex; flex-direction: column; gap: 4px; }
.made-title { font: 800 16px/normal var(--sans); letter-spacing: .8px; }
.made-sub { font: 400 14px/normal var(--sans); letter-spacing: .04px; }
.coming { display: flex; flex-direction: column; gap: 8px; }
.coming-title { padding-left: 48px; font: 800 16px/21px var(--sans); letter-spacing: .8px; }
.coming ul { display: flex; flex-wrap: wrap; gap: 8px 76px; }
.coming li { width: 226px; display: flex; align-items: center; gap: 16px; color: var(--on-lilac); }
.coming li img { width: 32px; height: 32px; }
.coming li p { font: 400 14px/28px var(--sans); }
.coming li p:first-child { font: 500 16px/28px var(--sans); }

.footer-bottom { margin-top: 37px; border-top: 1px solid #98a2b3; padding: 40px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.legal-lines { display: flex; flex-direction: column; gap: 8px; font: 400 16px/normal var(--sans); }
.link-buttons { display: flex; gap: 24px; flex: none; }
.link-buttons a, .link-buttons span { display: flex; align-items: center; gap: 8px; font: 400 16px/24px var(--sans); color: var(--on-primary-container); }
.link-buttons a { text-decoration: underline; }
.link-buttons img { width: 24px; height: 24px; }

/* ---------- Narrower screens (Figma only has the 1440 layout) ---------- */
@media (max-width: 1280px) {
  .hero-copy { width: auto; flex: 1; }
  .hero-text { width: auto; max-width: 593px; }
  .hero-art { width: 46%; height: auto; }
  .hero-body { padding: 120px 0 96px; }
  .art-piggy { right: -16px; }
  .footer-top { flex-wrap: wrap; }
  .footer-side { margin-left: 0; }
}

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hero { min-height: 0; }
  .hero-body { flex-direction: column; align-items: flex-start; padding: 64px 0 72px; }
  .hero-copy { width: 100%; }
  .hero-art { width: min(520px, 100%); align-self: center; }
  .steps, .features { flex-direction: column; align-items: center; }
  .step-card { flex: none; width: min(413px, 100%); }
  .feature { flex: none; width: 100%; }
  .why-row { flex-direction: column; }
  .why-card, .why-card.w504 { flex: none; height: 310px; }
  .art-leaf { left: auto; right: 16px; }
  .art-piggy { top: auto; bottom: -32px; }
  .art-people { left: auto; right: 0; top: calc(50% - 8px); }
  .footer-strip { flex-direction: column; align-items: flex-start; }
  .coming-title { padding-left: 0; }
}

@media (max-width: 700px) {
  .wrap, .quiz { width: calc(100% - 32px); }
  .hero-title > span { white-space: normal; }
  .line1 { font-size: 32px; }
  .line2 { font-size: 36px; }
  .hero-title { gap: 12px; }
  .hl-borrow { width: 124px; height: 41px; top: 3px; }
  .hl-lend { width: 100px; height: 44px; top: 4px; }
  .hero-text { margin-top: 24px; font-size: 17px; line-height: 28px; }
  .hero-copy .store-buttons { margin-top: 32px; }
  .store-buttons .btn { width: auto; flex: 1; min-width: 0; }
  .section-head h2, .quiz-head h2 { font-size: 34px; }
  .quiz-head h2 { white-space: normal; }
  .section-head p, .quiz-head p { font-size: 17px; }
  .how, .trust, .why { padding: 64px 0; }
  .steps { margin-top: 48px; }
  .step-top { left: 24px; right: 24px; width: auto; top: 40px; }
  .step-note { left: 24px; right: 112px; width: auto; top: auto; bottom: 32px; }
  .art-dress { left: auto; right: -16px; top: auto; bottom: 24px; }
  .art-mic { left: auto; right: -12px; top: auto; bottom: -28px; }
  .art-garden { left: auto; right: -24px; top: auto; bottom: 64px; }
  .globe { width: 280px; height: 280px; margin: 32px auto; }
  .why-card, .why-card.w504 { height: 280px; }
  .why-text h3 { font-size: 26px; line-height: 30px; }
  .row1 .why-text.at-bottom, .row2 .why-text.at-bottom { left: 24px; right: 24px; top: auto; bottom: 28px; }
  .row1 .why-text.at-top { left: 24px; top: 28px; width: calc(100% - 48px); }
  .art-leaf { width: 115px; height: 150px; top: -32px; }
  .art-piggy { width: 160px; height: 169px; right: -12px; bottom: -40px; }
  .art-tools { width: 156px; height: 133px; }
  .art-people { width: 130px; height: 127px; }
  .quiz { padding: 40px 20px; }
  .quiz-wrap { padding: 56px 0; }
  .footer-brand, .footer-side, .footer-links ul { width: 100%; }
  .footer-links { flex-direction: column; gap: 40px; padding-top: 32px; }
  .footer-side { padding-top: 40px; }
  .footer-strip { margin-top: 56px; }
  .coming li { width: 100%; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Text pages (privacy, terms, help, guidelines, account deletion) ---------- */
.page { background: #fff; }
.page-header { border-bottom: 1px solid var(--primary-container); }
.page-header .nav { padding: 24px 0; }
.page-header .wordmark { font-size: 28px; }
.page-header .brand-mark { transform: scale(.85); transform-origin: left center; }
.back-link { font: 500 16px/normal var(--sans); color: var(--brand); }
.doc { width: min(760px, 100% - 32px); margin: 0 auto; padding: 56px 0 88px; }
.doc h1 { font: 700 44px/1.15 var(--sans); }
.doc .updated { margin-top: 12px; color: var(--secondary); font-size: 15px; }
.doc .lead { margin-top: 24px; font: 400 20px/32px var(--sans); }
.doc h2 { margin-top: 48px; font: 700 26px/1.25 var(--sans); scroll-margin-top: 24px; }
.doc h3 { margin-top: 28px; font: 700 19px/1.35 var(--sans); }
.doc p, .doc li { font: 400 17px/28px var(--sans); color: #2e2550; }
.doc p { margin-top: 14px; }
.doc ul, .doc ol { margin-top: 12px; padding-left: 22px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--on-primary-container); text-decoration: underline; }
.doc table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.doc th, .doc td { padding: 10px 12px; border-bottom: 1px solid #e4e4e4; text-align: left; vertical-align: top; }
.doc th { color: var(--ink); background: var(--strip); }
.doc .note { margin-top: 24px; padding: 16px 20px; border-radius: 16px; background: var(--strip); }
.doc .note p:first-child { margin-top: 0; }
.doc .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.doc .cards a { display: block; padding: 20px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); }
.doc .cards b { display: block; font-size: 18px; }
.doc .cards span { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--secondary); }
.page-footer { border-top: 1px solid #98a2b3; padding: 32px 0 40px; }
.page-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 15px; }
.page-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.page-footer a { color: var(--on-primary-container); text-decoration: underline; }
@media (max-width: 700px) {
  .doc { padding: 40px 0 64px; }
  .doc h1 { font-size: 34px; }
  .doc .lead { font-size: 18px; line-height: 29px; }
}