:root{
  --rl-green:#1D5C49; --rl-green-dark:#14483A; --rl-green-deep:#17402F;
  --rl-ink:#182B23; --rl-muted:#4A5A50; --rl-muted-2:#5C6B62;
  --rl-bg:#FAF7F1; --rl-card:#FDFBF6; --rl-cream:#F3EFE4;
  --rl-line:#F0EADC; --rl-sand:#EDE5D6; --rl-terracotta:#C25F38;
  --rl-tint:#E3EEE6; --rl-tint-2:#C9DAD2; --rl-sel:#DCEBE0;
  /* Status colors (spec V3): green means paid/completed/signed — nothing
     else; orange means late rent or maintenance pending. */
  --rl-success:#22C55E; --rl-success-ink:#15803D; --rl-success-soft:#DCFCE7;
  --rl-warn:#F59E0B; --rl-warn-ink:#92400E; --rl-warn-soft:#FEF3C7;
  /* Warm dusk accents, in sync with the property renders: lamplit windows
     against cream stone at golden hour. */
  --rl-amber:#F5BE72; --rl-amber-glow:rgba(245,183,95,.55);
  --rl-font-display:'Manrope',sans-serif;
  --rl-font-body:'Inter',system-ui,sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--rl-font-body);background:var(--rl-bg);color:var(--rl-ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--rl-green)}a:hover{color:var(--rl-green-dark)}
::selection{background:var(--rl-sel)}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sway{from{transform:rotateZ(-8deg)}to{transform:rotateZ(8deg)}}
@keyframes rise3d{from{opacity:0;transform:scale3d(.04,.04,.04)}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes platIn{from{opacity:0;transform:translateZ(-30px)}to{opacity:1;transform:translateZ(0)}}
@keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}html{scroll-behavior:auto}}

/* ===== shared ===== */

/* Section container width (header, why, product, how, nobloat, trial, footer) */
.rl-container {
  max-width: 1160px;
}

/* Section eyebrow label (why, product, how, nobloat, faq) */
.rl-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rl-terracotta);
  margin-bottom: 14px;
}

/* Section lead paragraph (why, product, how, nobloat) */
.rl-lead {
  font-size: 18px;
  color: var(--rl-muted);
  line-height: 1.65;
}

/* ===== header ===== */

/* --- Announcement bar (off by default, remove [hidden] to show) --- */
.announce {
  background: var(--rl-green-deep);
  color: var(--rl-cream);
  text-align: center;
  font-size: 14px;
  padding: 9px 16px;
}

.announce__link {
  color: #F5C09E;
  font-weight: 600;
}

/* --- Navbar shell --- */
.header__navbar {
  background: rgba(250, 247, 241, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #EDE5D4;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* --- Brand --- */
.header__brand {
  gap: 10px;
  color: var(--rl-ink);
}

.header__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--rl-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(29, 92, 73, .6);
}

.header__brand-name {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* --- Mobile toggler --- */
.header__toggler {
  border-color: #DDD3BF;
}

/* --- Primary nav links --- */
.header__nav {
  gap: 6px;
}

.header__nav-link {
  color: #3A4A41;
  font-weight: 500;
}

.header__nav-link:hover {
  color: var(--rl-green-dark);
}

/* --- Right-side actions --- */
.header__actions {
  gap: 10px;
}

.header__signin {
  color: var(--rl-ink);
  font-weight: 600;
  padding: 8px 10px;
}

.header__dropdown {
  border-radius: 14px;
  border: 1px solid #EDE5D4;
  box-shadow: 0 18px 40px -18px rgba(24, 43, 35, .35);
  padding: 8px;
  min-width: 230px;
}

.header__dropdown-item {
  gap: 10px;
  border-radius: 9px;
  padding: 10px 12px;
  font-weight: 500;
  color: var(--rl-ink);
}

.header__dropdown-icon {
  color: var(--rl-green);
  font-size: 17px;
}

/* --- CTA button --- */
.header__cta {
  background: var(--rl-green);
  color: #FCFAF4;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(29, 92, 73, .55);
  transition: all .25s;
}

.header__cta:hover {
  background: #164A39;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(29, 92, 73, .6);
  color: #fff;
}

/* --- Mobile menu: both logins are plain, always-visible links (a tenant on
   a phone must never have to discover a dropdown to reach their portal). --- */
.header__mobile-login {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 0 4px;
  border-top: 1px solid var(--rl-line);
  margin-top: 10px;
}

.header__mobile-login-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 2px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--rl-ink);
  text-decoration: none;
}

.header__mobile-login-link:hover {
  color: var(--rl-green);
}

@media (max-width: 991.98px) {
  .header__actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  .header__actions .header__cta {
    text-align: center;
    margin: 8px 0 12px;
  }
}

/* ===== hero ===== */

/* -- section shell -- */
.hero{position:relative;overflow:hidden;padding:72px 0 84px;}
.hero__glow{position:absolute;right:-160px;top:-180px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle, #F6E7CF 0%, #EFE9DC 45%, rgba(239,233,220,0) 68%);}
.hero__container{max-width:1160px;position:relative;z-index:1;}

/* -- left column: copy -- */
.hero__badge{animation:fadeUp .7s ease both;display:inline-flex;align-items:center;gap:8px;background:#F3ECDD;border:1px solid #E7DCC5;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9A5B33;}
.hero__title{animation:fadeUp .7s ease .09s both;font-family:var(--rl-font-display);font-weight:700;letter-spacing:-0.025em;font-size:clamp(2.7rem,4.6vw,4.1rem);line-height:1.05;margin:22px 0 20px;}
.hero__title-highlight{color:var(--rl-green);background:linear-gradient(to top, var(--rl-sel) 38%, transparent 38%);padding:0 2px;}
.hero__lede{animation:fadeUp .7s ease .18s both;font-size:20px;line-height:1.6;color:var(--rl-muted);max-width:34rem;margin-bottom:30px;}
.hero__cta-row{animation:fadeUp .7s ease .27s both;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero__cta-primary{background:var(--rl-green);color:#FCFAF4;text-decoration:none;border-radius:999px;padding:15px 30px;font-weight:600;font-size:17px;box-shadow:0 14px 28px -10px rgba(29,92,73,.55);transition:all .25s;display:inline-flex;align-items:center;gap:10px;}
.hero__cta-primary:hover{background:#164A39;transform:translateY(-2px);box-shadow:0 20px 34px -12px rgba(29,92,73,.6);color:#fff;}
.hero__cta-secondary{background:#fff;border:1.5px solid #DCD2BE;color:var(--rl-ink);text-decoration:none;border-radius:999px;padding:14px 26px;font-weight:600;font-size:17px;transition:all .25s;display:inline-flex;align-items:center;gap:9px;}
.hero__cta-secondary:hover{border-color:var(--rl-green);color:var(--rl-green-dark);transform:translateY(-2px);}
.hero__checks{animation:fadeUp .7s ease .36s both;display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:14.5px;color:var(--rl-muted-2);font-weight:500;}
.hero__check-icon{color:var(--rl-green);margin-right:6px;}

/* -- scene stage -- */
.hero__scenewrap{position:relative;width:100%;height:590px;}
.hero__scenestage{position:absolute;left:50%;top:0;margin-left:-320px;width:640px;height:590px;transform-origin:top center;}
.hero__ground-shadow{position:absolute;left:90px;top:398px;width:460px;height:130px;background:radial-gradient(closest-side, rgba(23,42,32,.22), rgba(23,42,32,0));}
.hero__persp{position:absolute;inset:0;perspective:1500px;}
.hero__board{position:absolute;left:50px;top:10px;width:540px;height:540px;transform:rotateX(57deg) rotateZ(45deg);transform-style:preserve-3d;}
.hero__sway{position:absolute;inset:0;transform-style:preserve-3d;animation:sway 18s ease-in-out infinite alternate;}

/* -- shared 3d helpers -- */
.hero__obj{position:absolute;transform:translateZ(22px);transform-style:preserve-3d;}
.hero__obj-anim{position:absolute;inset:0;transform-style:preserve-3d;}
.hero__face-x{position:absolute;transform-origin:top;transform:rotateX(90deg);}
.hero__face-z{position:absolute;transform-origin:top left;transform:rotateZ(90deg) rotateX(90deg);}
/* Lamplit windows — the warm dusk glow from the brand renders. The gentle
   breathing is decorative; the global reduced-motion rule stills it. */
.hero__win{position:absolute;background:var(--rl-amber);border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 0 9px var(--rl-amber-glow);
  animation:winGlow 5.5s ease-in-out infinite alternate;}
.hero__house1-win2,.hero__house3-win1{animation-delay:1.6s;}
.hero__house1-gwin,.hero__house4-win1{animation-delay:3.1s;}
@keyframes winGlow{
  from{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 0 6px var(--rl-amber-glow);}
  to{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 0 14px var(--rl-amber-glow);}
}

/* -- platform -- */
.hero__plat{position:absolute;inset:0;transform-style:preserve-3d;animation:platIn .7s ease-out .05s both;}
.hero__plat-n{left:0;top:0;width:540px;height:22px;background:#8CA87E;}
.hero__plat-s{left:0;top:540px;width:540px;height:22px;background:#93B084;}
.hero__plat-w{left:0;top:0;width:540px;height:22px;background:#86A178;}
.hero__plat-e{left:540px;top:0;width:540px;height:22px;background:#8CA87E;}
.hero__plat-top{position:absolute;inset:0;background:#A3C295;transform:translateZ(22px);}

/* -- ground details -- */
.hero__grass{position:absolute;border-radius:50%;}
.hero__grass--1{left:60px;top:120px;width:150px;height:110px;background:#ACC99E;opacity:.7;}
.hero__grass--2{left:320px;top:380px;width:170px;height:120px;background:#ACC99E;opacity:.6;}
.hero__grass--3{left:40px;top:400px;width:120px;height:90px;background:#9CBE8E;opacity:.8;}
.hero__road-v{position:absolute;left:248px;top:0;width:44px;height:540px;background:#C7B9A2;}
.hero__road-v-dash{position:absolute;left:268px;top:0;width:3px;height:540px;margin-left:-1px;background:repeating-linear-gradient(to bottom,#EFE6CF 0 16px,transparent 16px 34px);}
.hero__road-h{position:absolute;left:0;top:248px;width:540px;height:44px;background:#C7B9A2;}
.hero__road-h-dash{position:absolute;left:0;top:268px;width:540px;height:3px;margin-top:-1px;background:repeating-linear-gradient(to right,#EFE6CF 0 16px,transparent 16px 34px);}
.hero__road-x{position:absolute;left:248px;top:248px;width:44px;height:44px;background:#C7B9A2;}
.hero__pond{position:absolute;left:430px;top:26px;width:78px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #C2DEE4, #93BECB);box-shadow:inset 0 0 0 4px rgba(255,255,255,.25);}
.hero__tshadow{position:absolute;border-radius:50%;}
.hero__tshadow--1{left:62px;top:58px;width:104px;height:88px;background:radial-gradient(closest-side, rgba(31,54,38,.16), rgba(31,54,38,0));}
.hero__tshadow--2{left:330px;top:80px;width:88px;height:70px;background:radial-gradient(closest-side, rgba(31,54,38,.15), rgba(31,54,38,0));}
.hero__tshadow--3{left:58px;top:346px;width:114px;height:72px;background:radial-gradient(closest-side, rgba(31,54,38,.15), rgba(31,54,38,0));}
.hero__tshadow--4{left:344px;top:336px;width:86px;height:74px;background:radial-gradient(closest-side, rgba(31,54,38,.16), rgba(31,54,38,0));}

/* -- house 1 -- */
.hero__house1{left:70px;top:64px;width:84px;height:68px;}
.hero__house1-anim{animation:rise3d .85s cubic-bezier(.3,1.45,.45,1) .25s both;}
.hero__house1-wall-n{left:0;top:0;width:84px;height:44px;background:#E8DAC2;}
.hero__house1-wall-s{left:0;top:68px;width:84px;height:44px;background:#F7EFDF;}
.hero__house1-door{position:absolute;left:14px;top:0;width:16px;height:26px;background:var(--rl-green);border-radius:0 0 5px 5px;}
.hero__house1-win1{left:42px;top:14px;width:16px;height:14px;}
.hero__house1-win2{left:64px;top:14px;width:14px;height:14px;}
.hero__house1-gable-w{left:0;top:0;width:68px;height:74px;background:#EFE3CE;clip-path:polygon(0 0,100% 0,100% 59.5%,50% 100%,0 59.5%);}
.hero__house1-gwin{left:28px;top:52px;width:12px;height:12px;border-radius:50%;}
.hero__house1-gable-e{left:84px;top:0;width:68px;height:74px;background:#E4D6BC;clip-path:polygon(0 0,100% 0,100% 59.5%,50% 100%,0 59.5%);}
.hero__house1-roof-a{position:absolute;left:-5px;top:34px;width:94px;height:47px;background:#DD8055;transform-origin:top;transform:translateZ(74px) rotateX(-41deg);}
.hero__house1-roof-b{position:absolute;left:-5px;top:34px;width:94px;height:47px;background:#B96341;transform-origin:top;transform:translateZ(74px) rotateX(-139deg);}

/* -- house 2 -- */
.hero__house2{left:336px;top:84px;width:64px;height:52px;}
.hero__house2-anim{animation:rise3d .85s cubic-bezier(.3,1.45,.45,1) .4s both;}
.hero__house2-wall-n{left:0;top:0;width:64px;height:36px;background:#CBD8C4;}
.hero__house2-wall-s{left:0;top:52px;width:64px;height:36px;background:#DFE9D8;}
.hero__house2-door{position:absolute;left:10px;top:0;width:14px;height:22px;background:#C96A47;border-radius:0 0 4px 4px;}
.hero__house2-win1{left:36px;top:12px;width:16px;height:12px;}
.hero__house2-gable-w{left:0;top:0;width:52px;height:58px;background:#D6E1CE;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);}
.hero__house2-gable-e{left:64px;top:0;width:52px;height:58px;background:#C6D3BE;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);}
.hero__house2-roof-a{position:absolute;left:-5px;top:26px;width:74px;height:37px;background:#46604F;transform-origin:top;transform:translateZ(58px) rotateX(-40deg);}
.hero__house2-roof-b{position:absolute;left:-5px;top:26px;width:74px;height:37px;background:#35493C;transform-origin:top;transform:translateZ(58px) rotateX(-140deg);}

/* -- shed -- */
.hero__shed{left:408px;top:96px;width:34px;height:30px;}
.hero__shed-anim{animation:rise3d .8s cubic-bezier(.3,1.45,.45,1) .8s both;}
.hero__shed-wall-n{left:0;top:0;width:34px;height:18px;background:#E0D2B8;}
.hero__shed-wall-s{left:0;top:30px;width:34px;height:18px;background:#EFE5D0;}
.hero__shed-door{position:absolute;left:6px;top:0;width:22px;height:12px;background:#C4B594;border-radius:2px 2px 0 0;}
.hero__shed-wall-w{left:0;top:0;width:30px;height:18px;background:#E8DBC2;}
.hero__shed-wall-e{left:34px;top:0;width:30px;height:18px;background:#D9C9AC;}
.hero__shed-top{position:absolute;left:0;top:0;width:34px;height:30px;background:#D7C8AC;transform:translateZ(18px);}

/* -- house 3 -- */
.hero__house3{left:64px;top:352px;width:96px;height:54px;}
.hero__house3-anim{animation:rise3d .85s cubic-bezier(.3,1.45,.45,1) .55s both;}
.hero__house3-wall-n{left:0;top:0;width:96px;height:32px;background:#E7D9C1;}
.hero__house3-wall-s{left:0;top:54px;width:96px;height:32px;background:#F6EDDB;}
.hero__house3-door{position:absolute;left:40px;top:0;width:15px;height:22px;background:var(--rl-green);border-radius:0 0 4px 4px;}
.hero__house3-win1{left:12px;top:10px;width:16px;height:12px;}
.hero__house3-win2{left:66px;top:10px;width:16px;height:12px;}
.hero__house3-gable-w{left:0;top:0;width:54px;height:52px;background:#F0E5CF;clip-path:polygon(0 0,100% 0,100% 61.5%,50% 100%,0 61.5%);}
.hero__house3-gable-e{left:96px;top:0;width:54px;height:52px;background:#E2D4BA;clip-path:polygon(0 0,100% 0,100% 61.5%,50% 100%,0 61.5%);}
.hero__house3-roof-a{position:absolute;left:-5px;top:27px;width:106px;height:35px;background:#CE6E49;transform-origin:top;transform:translateZ(52px) rotateX(-36.5deg);}
.hero__house3-roof-b{position:absolute;left:-5px;top:27px;width:106px;height:35px;background:#B05A39;transform-origin:top;transform:translateZ(52px) rotateX(-143.5deg);}

/* -- house 4 -- */
.hero__house4{left:352px;top:340px;width:66px;height:56px;}
.hero__house4-anim{animation:rise3d .85s cubic-bezier(.3,1.45,.45,1) .7s both;}
.hero__house4-wall-n{left:0;top:0;width:66px;height:42px;background:#DFD0B4;}
.hero__house4-wall-s{left:0;top:56px;width:66px;height:42px;background:#EFE4CD;}
.hero__house4-door{position:absolute;left:11px;top:0;width:15px;height:25px;background:#C96A47;border-radius:0 0 4px 4px;}
.hero__house4-win1{left:38px;top:13px;width:17px;height:13px;}
.hero__house4-gable-w{left:0;top:0;width:56px;height:68px;background:#E9DCC2;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);}
.hero__house4-gable-e{left:66px;top:0;width:56px;height:68px;background:#DACAAB;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);}
.hero__house4-roof-a{position:absolute;left:-5px;top:28px;width:76px;height:41px;background:#4A6553;transform-origin:top;transform:translateZ(68px) rotateX(-43deg);}
.hero__house4-roof-b{position:absolute;left:-5px;top:28px;width:76px;height:41px;background:#394F41;transform-origin:top;transform:translateZ(68px) rotateX(-137deg);}

/* -- crate -- */
.hero__crate{left:462px;top:440px;width:30px;height:24px;}
.hero__crate-anim{animation:rise3d .8s cubic-bezier(.3,1.45,.45,1) .85s both;}
.hero__crate-wall-n{left:0;top:0;width:30px;height:16px;background:#CBBC9E;}
.hero__crate-wall-s{left:0;top:24px;width:30px;height:16px;background:#DCCFB4;}
.hero__crate-wall-w{left:0;top:0;width:24px;height:16px;background:#D5C7AA;}
.hero__crate-wall-e{left:30px;top:0;width:24px;height:16px;background:#C6B698;}
.hero__crate-top{position:absolute;left:0;top:0;width:30px;height:24px;background:#C3B294;transform:translateZ(16px);}

/* -- trees -- */
.hero__tree1{left:180px;top:28px;width:40px;height:40px;}
.hero__tree1-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) .8s both;}
.hero__tree1-a{left:0;top:20px;width:40px;height:52px;border-radius:50% 50% 46% 46%;background:#5E9150;}
.hero__tree1-b{left:20px;top:0;width:40px;height:52px;border-radius:50% 50% 46% 46%;background:#548346;}
.hero__tree2{left:26px;top:170px;width:36px;height:36px;}
.hero__tree2-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) .9s both;}
.hero__tree2-a{left:0;top:18px;width:36px;height:44px;border-radius:50% 50% 46% 46%;background:#6FA05E;}
.hero__tree2-b{left:18px;top:0;width:36px;height:44px;border-radius:50% 50% 46% 46%;background:#639254;}
.hero__tree3{left:206px;top:192px;width:28px;height:28px;}
.hero__tree3-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) 1s both;}
.hero__tree3-a{left:0;top:14px;width:28px;height:26px;border-radius:50%;background:#7FAF6C;}
.hero__tree3-b{left:14px;top:0;width:28px;height:26px;border-radius:50%;background:#71A05F;}
.hero__tree4{left:318px;top:462px;width:38px;height:38px;}
.hero__tree4-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) .95s both;}
.hero__tree4-a{left:0;top:19px;width:38px;height:48px;border-radius:50% 50% 46% 46%;background:#6FA05E;}
.hero__tree4-b{left:19px;top:0;width:38px;height:48px;border-radius:50% 50% 46% 46%;background:#639254;}
.hero__tree5{left:496px;top:314px;width:34px;height:34px;}
.hero__tree5-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) 1.05s both;}
.hero__tree5-a{left:0;top:17px;width:34px;height:42px;border-radius:50% 50% 46% 46%;background:#5E9150;}
.hero__tree5-b{left:17px;top:0;width:34px;height:42px;border-radius:50% 50% 46% 46%;background:#548346;}
.hero__tree6{left:140px;top:468px;width:28px;height:28px;}
.hero__tree6-anim{animation:rise3d .7s cubic-bezier(.3,1.45,.45,1) 1.1s both;}
.hero__tree6-a{left:0;top:14px;width:28px;height:26px;border-radius:50%;background:#7FAF6C;}
.hero__tree6-b{left:14px;top:0;width:28px;height:26px;border-radius:50%;background:#71A05F;}

/* -- floating cards -- */
.hero__card{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid #EDE5D4;border-radius:16px;padding:13px 16px;box-shadow:0 22px 44px -18px rgba(24,43,35,.28);display:flex;align-items:center;gap:12px;}
.hero__card--rent{left:-4px;top:58px;width:236px;animation:cardIn .7s ease 1.15s both, bobY 7s ease-in-out 2s infinite;}
.hero__card--repair{right:-8px;top:236px;width:238px;animation:cardIn .7s ease 1.35s both, bobY 8s ease-in-out 2.6s infinite;}
.hero__card--lease{left:22px;bottom:26px;width:242px;animation:cardIn .7s ease 1.55s both, bobY 7.5s ease-in-out 3s infinite;}

/* -- hero photos: the brand renders at dusk, layered like prints on a desk.
   The floating notification cards ride on top and reflect real product
   moments; everything drifts gently (stilled under reduced motion). -- */
.hero__photos{position:relative;animation:fadeUp .8s ease .12s both;padding:0 0 84px;}
.hero__photo{display:block;border-radius:24px;}
.hero__photo--main{width:100%;height:auto;box-shadow:0 34px 70px -26px rgba(23,24,15,.5);animation:bobY 9s ease-in-out infinite;}
.hero__photo--cottage{position:absolute;left:-30px;bottom:0;width:44%;height:auto;
  border:6px solid #FBFAF4;box-shadow:0 26px 55px -22px rgba(23,24,15,.5);
  animation:bobY 11s ease-in-out 1.4s infinite;}
.hero__photos .hero__card--rent{left:auto;right:4%;top:-22px;}
.hero__photos .hero__card--repair{right:-14px;top:44%;}
.hero__photos .hero__card--lease{left:auto;right:16%;bottom:44px;top:auto;}
@media (max-width: 575.98px){
  .hero__photo--cottage{left:-8px;}
  .hero__photos .hero__card--rent{right:2px;top:-18px;width:206px;}
  .hero__photos .hero__card--repair{right:2px;top:30%;width:206px;}
  .hero__photos .hero__card--lease{left:auto;right:4%;bottom:6px;width:212px;}
}
.hero__card-bubble{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.hero__card-bubble--check{position:relative;background:var(--rl-tint);}
.hero__card-bubble--tools{background:#F7E7DC;}
.hero__card-bubble--file{background:var(--rl-tint);}
.hero__card-icon-check{color:var(--rl-success);font-size:20px;}
.hero__card-icon-tools{color:var(--rl-warn);font-size:19px;}
.hero__card-icon-file{color:var(--rl-terracotta);font-size:19px;}
.hero__card-ping{position:absolute;inset:0;border-radius:12px;border:2px solid var(--rl-success);animation:ping 2.8s ease-out 2.4s infinite;}
.hero__card-title{display:block;font-size:14.5px;}
.hero__card-sub{font-size:13px;color:var(--rl-muted-2);}

/* -- hero background film (V3.1) --
   The five renders play as one continuous background clip: real-time
   crossfades under a single slow camera drift, with a light sweep at each
   cut. The finale layers the green line, the three tickets and the coin
   meter step by step. js/main.js (initFilm) drives the timeline and sizes
   the stage to the frames' cover box, so every overlay coordinate below is
   a percentage of the 1672x941 frame — overlays stay glued to the building
   at any viewport size. The stage font-size is set to width/1672*16px, so
   all overlay type and spacing is in em and scales with the image. -- */
.hero__film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--rl-bg);}
.hero__film-stage{position:absolute;inset:0;transform-origin:63% 52%;animation:filmDrift 26s ease-in-out infinite alternate;will-change:transform;}
.hero__film--static .hero__film-stage{animation:none;}
.hero__film--held .hero__film-stage,.hero__film--held .hero__film-sweep{animation-play-state:paused;}
@keyframes filmDrift{from{transform:scale(1.03) translateX(0.5%)}to{transform:scale(1.09) translateX(-0.7%)}}
.hero__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;opacity:0;transition:opacity 1.7s cubic-bezier(.45,.05,.35,.95);}
.hero__frame.is-on{opacity:1;}
.hero__frame.is-instant{transition:none;}

/* Cinematic grade: cream protection behind the copy, soft top light,
   a fade into the next section and a gentle vignette. */
.hero__film-grade{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(250,247,241,.98) 0%, rgba(250,247,241,.88) 30%, rgba(250,247,241,.38) 48%, rgba(250,247,241,0) 62%),
  linear-gradient(180deg, rgba(250,247,241,.55) 0%, rgba(250,247,241,0) 16%),
  linear-gradient(180deg, rgba(250,247,241,0) 80%, rgba(250,247,241,.92) 97%),
  radial-gradient(130% 100% at 68% 40%, rgba(0,0,0,0) 58%, rgba(64,46,26,.10) 100%);}

/* Light sweep: a soft warm band that crosses the frame on every cut. */
.hero__film-sweep{position:absolute;top:-12%;bottom:-12%;left:-45%;width:60%;opacity:0;
  background:linear-gradient(102deg, rgba(255,244,224,0) 0%, rgba(255,244,224,.32) 46%, rgba(255,250,240,.48) 50%, rgba(255,244,224,.32) 54%, rgba(255,244,224,0) 100%);}
.hero__film-sweep.is-sweeping{animation:filmSweep 2.3s cubic-bezier(.5,.1,.3,.9) both;}
@keyframes filmSweep{0%{transform:translateX(-40%);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(420%);opacity:0}}

/* Finale overlays: hidden until the cutaway scene goes live. */
.hero__story{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;font-family:var(--rl-font-display);}
.hero__story.is-live{opacity:1;}
.hero__story.is-out{opacity:0;transition:opacity .9s ease;}
.hero__film--static .hero__story,.hero__film--static .hero__film-sweep{display:none;}
.hero__story-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hero__story-line{stroke:#2FC77C;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 7px rgba(46,199,124,.7));}
.is-drawing .hero__story-line{animation:storyDraw 2.6s cubic-bezier(.45,.05,.3,.95) both;}
@keyframes storyDraw{to{stroke-dashoffset:0}}

/* Tickets pop in one by one over the ground-floor units, then bob. */
.hero__ticket{position:absolute;display:inline-flex;align-items:center;gap:.55em;background:rgba(255,255,255,.95);border:1px solid #EDE5D4;border-radius:.95em;padding:.55em .95em .55em .55em;font-weight:700;font-size:1.5em;letter-spacing:.01em;color:var(--rl-ink);box-shadow:0 1.5em 2.8em -1.2em rgba(24,43,35,.45);opacity:0;transform:translate(-50%,-50%) scale(.55);}
.hero__ticket.is-in{animation:ticketPop .62s cubic-bezier(.25,1.4,.4,1) both, ticketBob 6s ease-in-out .9s infinite;}
@keyframes ticketPop{0%{opacity:0;transform:translate(-50%,-8%) scale(.55)}70%{opacity:1;transform:translate(-50%,-54%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ticketBob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
.hero__ticket--rent{left:52.2%;top:57.6%;}
.hero__ticket--repair{left:64.6%;top:56.6%;}
.hero__ticket--renew{left:76.8%;top:57.4%;}
.hero__ticket-bubble{width:1.85em;height:1.85em;border-radius:.6em;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.hero__ticket--rent .hero__ticket-bubble{background:var(--rl-success-soft);color:var(--rl-success-ink);}
.hero__ticket--repair .hero__ticket-bubble{background:var(--rl-warn-soft);color:var(--rl-warn-ink);}
.hero__ticket--renew .hero__ticket-bubble{background:var(--rl-tint);color:var(--rl-terracotta);}

/* Coins rise from the rent ticket toward the meter. */
.hero__coins{position:absolute;left:43.8%;top:26%;width:3%;height:28%;}
.hero__coins span{position:absolute;left:50%;bottom:0;width:1.15em;height:1.15em;margin-left:-.6em;border-radius:50%;background:var(--rl-success-soft);border:1px solid rgba(34,197,94,.5);color:var(--rl-success-ink);font-size:1.05em;font-weight:800;line-height:1.15em;text-align:center;opacity:0;box-shadow:0 0 .8em rgba(34,197,94,.35);}
.hero__coins span::after{content:"$";font-size:.72em;}
.is-coins .hero__coins span{animation:coinRise 3.4s cubic-bezier(.3,.2,.4,1) infinite;}
.hero__coins span:nth-child(2){left:22%;animation-delay:.55s;}
.hero__coins span:nth-child(3){left:74%;animation-delay:1.1s;}
.hero__coins span:nth-child(4){left:38%;animation-delay:1.7s;}
.hero__coins span:nth-child(5){left:62%;animation-delay:2.25s;}
.hero__coins span:nth-child(6){left:30%;animation-delay:2.8s;}
@keyframes coinRise{0%{opacity:0;transform:translateY(0) scale(.7)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(-13em) scale(1)}}

/* Rent meter pill that the coins feed. */
.hero__meter{position:absolute;left:43.6%;top:20.5%;transform:translate(-50%,-50%) scale(.7);display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.95);border:1px solid #DFF3E4;border-radius:999px;padding:.5em .55em .5em .85em;box-shadow:0 1.2em 2.4em -1em rgba(24,43,35,.35), 0 0 1.6em rgba(34,197,94,.18);opacity:0;transition:opacity .7s ease, transform .7s cubic-bezier(.25,1.3,.4,1);}
.hero__meter.is-in{opacity:1;transform:translate(-50%,-50%) scale(1);}
.hero__meter-track{width:6.5em;height:.62em;border-radius:999px;background:#EAF6EC;overflow:hidden;}
.hero__meter-fill{display:block;height:100%;width:12%;border-radius:999px;background:linear-gradient(90deg,#4ADE80,#22C55E);transition:width 2.6s cubic-bezier(.3,.1,.3,1) .25s;}
.hero__meter.is-in .hero__meter-fill{width:86%;}
.hero__meter-coin{width:1.7em;height:1.7em;border-radius:50%;background:var(--rl-success-soft);color:var(--rl-success-ink);display:inline-flex;align-items:center;justify-content:center;font-size:1.1em;}

/* Layout: full-bleed backdrop on desktop; a flush edge-to-edge strip under
   the copy on smaller screens (still borderless, still the same clip). */
@media (min-width: 992px){
  /* Height tracks width so the frames' cover box stays width-driven: the
     whole 1672-wide frame fits the viewport and the copy sits on the
     cream left side of the artwork instead of on the building. */
  .hero{min-height:clamp(560px, 52vw, 820px);display:flex;align-items:center;}
  .hero__container{width:100%;}
}
@media (max-width: 991.98px){
  .hero{padding-bottom:0;}
  .hero__film{position:relative;inset:auto;margin-top:44px;height:clamp(300px, 76vw, 480px);}
  .hero__film-grade{background:
    linear-gradient(180deg, rgba(250,247,241,.9) 0%, rgba(250,247,241,0) 14%),
    linear-gradient(180deg, rgba(250,247,241,0) 84%, rgba(250,247,241,.9) 100%);}
  .hero__frame{object-position:100% 30%;}
}

/* Pause/play for the background film (WCAG 2.2.2) — a quiet ghost chip in
   the hero's corner, the same pattern hero videos use. */
.hero__film-toggle{position:absolute;right:18px;bottom:16px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid #E3DAC6;background:rgba(253,251,246,.88);color:var(--rl-muted);display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1;cursor:pointer;box-shadow:0 10px 22px -12px rgba(24,43,35,.35);transition:color .2s, border-color .2s, background .2s;}
.hero__film-toggle:hover{color:var(--rl-green-dark);border-color:var(--rl-green);background:#fff;}
.hero__film-toggle:focus-visible{outline:2px solid var(--rl-green);outline-offset:2px;}

/* ===== why ===== */

/* Section shell */
.why {
  background: #fff;
  padding: 104px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid var(--rl-line);
}

/* Intro block */
.why__intro {
  max-width: 640px;
}

.why__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 18px;
}

/* Card grid */
.why__grid {
  margin-top: 26px;
}

.why__card {
  background: var(--rl-bg);
  border: 1px solid var(--rl-sand);
  border-radius: 20px;
  padding: 30px 28px;
  height: 100%;
  transition: all .3s;
}

.why__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -20px rgba(24, 43, 35, .22);
  border-color: #DCD2BE;
}

.why__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--rl-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.why__icon .bi {
  color: var(--rl-green);
  font-size: 22px;
}

.why__card-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 10px;
}

.why__card-text {
  color: var(--rl-muted);
  line-height: 1.65;
  margin: 0;
}

/* ===== product ===== */

/* --- Section shell & header --- */
.product {
  padding: 110px 0;
  scroll-margin-top: 88px;
}

.product__header {
  max-width: 640px;
  margin-bottom: 64px;
}

.product__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 18px;
}

/* --- Feature rows (rent / maintenance) --- */
.product__feature {
  margin-bottom: 84px;
}

.product__feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.product__feature-icon--green {
  background: var(--rl-tint);
}

.product__feature-icon--green > i {
  color: var(--rl-green);
  font-size: 22px;
}

.product__feature-icon--terra {
  background: #F7E7DC;
}

.product__feature-icon--terra > i {
  color: var(--rl-terracotta);
  font-size: 22px;
}

.product__feature-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.product__feature-text {
  font-size: 17px;
  color: var(--rl-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.product__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
}

.product__checklist li > i {
  color: var(--rl-green);
  font-size: 19px;
  margin-right: 9px;
}

/* --- Shared demo card --- */
.product__demo-card {
  background: #fff;
  border: 1px solid var(--rl-sand);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 28px 56px -24px rgba(24, 43, 35, .25);
}

/* --- Rent collection demo --- */
.product__rent-wrap {
  position: relative;
}

.product__rent-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.product__rent-title {
  font-size: 16px;
}

.product__rent-count {
  font-size: 13px;
  color: var(--rl-muted-2);
  background: #F3ECDD;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
}

.product__rent-list {
  display: grid;
  gap: 10px;
}

.product__rent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: 13px;
  padding: 12px 16px;
}

.product__rent-unit {
  font-weight: 600;
  font-size: 15px;
}

.product__rent-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product__rent-amount {
  font-weight: 600;
  font-size: 15px;
}

.product__pill {
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
}

.product__pill--paid {
  color: var(--rl-success-ink);
  background: var(--rl-success-soft);
  border: 1px solid rgba(34, 197, 94, .35);
}

.product__pill--reminder {
  color: var(--rl-warn-ink);
  background: var(--rl-warn-soft);
  border: 1px solid rgba(245, 158, 11, .35);
}

.product__rent-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--rl-muted-2);
}

.product__rent-note > i {
  color: var(--rl-terracotta);
}

.product__autopay {
  position: absolute;
  right: -10px;
  top: -18px;
  background: var(--rl-green-deep);
  color: var(--rl-cream);
  border-radius: 13px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 16px 32px -14px rgba(23, 64, 47, .6);
}

.product__autopay > i {
  margin-right: 7px;
  color: #9CC7AE;
}

/* --- Maintenance demo --- */
.product__maint-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.product__maint-photo {
  width: 86px;
  height: 86px;
  flex: none;
  border-radius: 14px;
  background: repeating-linear-gradient(45deg, #EFE9DB 0 8px, #F7F2E7 8px 16px);
  border: 1px solid #E7DFCC;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product__maint-photo-label {
  font-family: monospace;
  font-size: 10px;
  color: #8A8271;
  line-height: 1.3;
}

.product__maint-body {
  flex: 1;
}

.product__maint-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product__maint-title {
  font-size: 16px;
}

.product__maint-priority {
  font-size: 12px;
  font-weight: 700;
  color: var(--rl-warn-ink);
  background: var(--rl-warn-soft);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 999px;
  padding: 3px 10px;
  flex: none;
}

.product__maint-meta {
  font-size: 13.5px;
  color: var(--rl-muted-2);
  margin-top: 3px;
}

.product__maint-vendor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
}

.product__maint-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rl-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--rl-green);
}

.product__maint-vendor-name {
  font-weight: 600;
}

.product__maint-vendor-note {
  color: var(--rl-muted-2);
}

.product__progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
}

.product__progress-seg {
  flex: 1;
  height: 5px;
  border-radius: 99px;
}

.product__progress-seg--on {
  background: var(--rl-green);
}

.product__progress-seg--off {
  background: #E7E0D2;
}

.product__progress-gap {
  width: 8px;
}

.product__progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--rl-muted-2);
  margin-top: 8px;
  font-weight: 600;
}

.product__progress-label--active {
  color: var(--rl-green);
}

/* --- Pillar cards (leases / portal / money) --- */
.product__pillar-card {
  background: #fff;
  border: 1px solid var(--rl-sand);
  border-radius: 20px;
  padding: 28px;
  height: 100%;
  transition: all .3s;
}

.product__pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -20px rgba(24, 43, 35, .2);
}

.product__pillar-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--rl-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.product__pillar-icon > i {
  color: var(--rl-green);
  font-size: 21px;
}

.product__pillar-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 10px;
}

.product__pillar-text {
  color: var(--rl-muted);
  line-height: 1.65;
  font-size: 15.5px;
}

/* --- Lease widget --- */
.product__lease {
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: 13px;
  padding: 13px 15px;
  margin-top: 6px;
}

.product__lease-head {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
}

.product__lease-date {
  color: var(--rl-muted-2);
}

.product__lease-track {
  height: 6px;
  border-radius: 99px;
  background: #EDE6D6;
  margin-top: 9px;
  overflow: hidden;
}

.product__lease-fill {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--rl-green);
  border-radius: 99px;
}

.product__lease-reminder {
  font-size: 12.5px;
  color: #A05A2C;
  font-weight: 600;
  margin-top: 8px;
}

.product__lease-reminder > i {
  margin-right: 5px;
}

/* --- Tenant portal widget --- */
.product__portal {
  background: var(--rl-green-deep);
  border-radius: 16px;
  padding: 15px;
  margin-top: 6px;
  color: var(--rl-cream);
}

.product__portal-greeting {
  font-size: 13px;
  color: #9CC7AE;
  font-weight: 600;
}

.product__portal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
}

.product__portal-amount {
  font-size: 19px;
}

.product__portal-pay {
  background: #F5F1E6;
  color: var(--rl-green-deep);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 700;
}

.product__portal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
}

.product__portal-chip {
  background: rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 5px 9px;
}

.product__portal-chip > i {
  margin-right: 5px;
}

/* --- Income chart widget --- */
.product__chart {
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: 13px;
  padding: 15px;
  margin-top: 6px;
}

.product__chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 58px;
}

.product__chart-bar {
  flex: 1;
  border-radius: 5px 5px 0 0;
}

.product__chart-bar--1 {
  height: 42%;
  background: #BCD3C4;
}

.product__chart-bar--2 {
  height: 58%;
  background: #9CC0A9;
}

.product__chart-bar--3 {
  height: 50%;
  background: #BCD3C4;
}

.product__chart-bar--4 {
  height: 74%;
  background: #63947C;
}

.product__chart-bar--5 {
  height: 66%;
  background: #9CC0A9;
}

.product__chart-bar--6 {
  height: 88%;
  background: var(--rl-green);
}

.product__chart-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rl-muted-2);
}

.product__chart-sync {
  color: var(--rl-green);
}

.product__chart-sync > i {
  margin-right: 4px;
}

/* ===== how ===== */

/* Section shell */
.how {
  background: #fff;
  padding: 104px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid var(--rl-line);
}

/* Section header */
.how__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 58px;
}

.how__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 16px;
}

/* Steps */
.how__step {
  padding: 8px 12px;
}

.how__num {
  font-family: var(--rl-font-display);
  font-weight: 800;
  font-size: 52px;
  color: #E8D8C6;
  line-height: 1;
}

.how__step-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 21px;
  margin: 14px 0 10px;
}

.how__step-text {
  color: var(--rl-muted);
  line-height: 1.65;
  font-size: 15.5px;
  margin: 0;
}

/* Setup-time pill */
.how__cta {
  text-align: center;
  margin-top: 44px;
}

.how__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #F3ECDD;
  border: 1px solid #E7DCC5;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  color: #7A4A28;
}

/* ===== nobloat ===== */

/* Section layout */
.nobloat {
  padding: 110px 0;
}

/* Header block */
.nobloat__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
}

.nobloat__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 16px;
}

/* Comparison cards */
.nobloat__card {
  border-radius: 22px;
  padding: 32px;
  height: 100%;
}

.nobloat__card--in {
  background: #EAF2EA;
  border: 1px solid #D3E2D4;
}

.nobloat__card--out {
  background: var(--rl-bg);
  border: 1px dashed #DCD2BE;
}

.nobloat__card-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 18px;
}

.nobloat__card-title--in {
  color: var(--rl-green-dark);
}

.nobloat__card-title--out {
  color: #8A8271;
}

.nobloat__title-icon {
  margin-right: 9px;
}

/* Feature lists */
.nobloat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 16px;
}

.nobloat__list--in {
  color: #22382E;
}

.nobloat__list--out {
  color: #8A8271;
}

.nobloat__icon {
  margin-right: 9px;
  font-size: 18px;
}

.nobloat__icon--check {
  color: var(--rl-green);
}

/* ===== faq ===== */

.faq {
  background: #fff;
  padding: 104px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid var(--rl-line);
}

.faq__container {
  max-width: 820px;
}

.faq__head {
  text-align: center;
  margin-bottom: 48px;
}

.faq__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
}

/* accordion (Bootstrap variable overrides) */

.faq__accordion {
  --bs-accordion-active-bg: #EAF2EA;
  --bs-accordion-active-color: var(--rl-green-dark);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(29, 92, 73, .12);
  --bs-accordion-border-color: var(--rl-sand);
  --bs-accordion-btn-padding-y: 1.1rem;
}

.faq__item.accordion-item,
.faq__item.accordion-item:first-of-type,
.faq__item.accordion-item:last-of-type {
  border-radius: 15px;
  margin-bottom: 12px;
  border: 1px solid var(--rl-sand);
  overflow: hidden;
}

.faq__item.accordion-item:not(:first-of-type) {
  border-top: 1px solid var(--rl-sand);
}

.faq__item:last-child {
  margin-bottom: 0;
}

/* Bootstrap 5.3 specificity overrides — the original inline styles beat these
   framework rules, so restore them at higher specificity */

.faq__accordion .faq__item:not(:first-of-type) {
  border-top: 1px solid var(--rl-sand);
}

.faq__accordion .faq__item:first-of-type {
  border-radius: 15px;
}

.faq__accordion .faq__item:last-of-type {
  border-radius: 15px;
}

.faq__q.accordion-button,
.faq__q.accordion-button:not(.collapsed) {
  font-weight: 600;
  font-size: 16.5px;
  background: #fff;
  border-radius: 0;
}

.faq__item.accordion-item > .accordion-header .faq__q.accordion-button {
  border-radius: 0;
}

.faq__accordion .faq__q:not(.collapsed) {
  background-color: #fff;
}

.faq__accordion .faq__item > .accordion-header .faq__q.accordion-button {
  border-radius: 0;
}

.faq__a {
  color: var(--rl-muted);
  line-height: 1.7;
}

/* ===== trial ===== */

/* --- Section shell --- */
.trial {
  padding: 110px 0;
  scroll-margin-top: 88px;
}

.trial__panel {
  background: linear-gradient(135deg, var(--rl-green) 0%, #143D31 100%);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 40px 80px -32px rgba(23, 64, 47, .55);
}

/* --- Intro column --- */
.trial__intro {
  color: var(--rl-cream);
}

.trial__title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: 16px;
}

.trial__lead {
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(243, 239, 228, .85);
  margin-bottom: 28px;
}

.trial__steps {
  display: grid;
  gap: 16px;
}

.trial__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.trial__step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.trial__step-text {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(243, 239, 228, .9);
}

.trial__contact {
  margin-top: 30px;
  font-size: 14.5px;
  color: rgba(243, 239, 228, .65);
}

.trial__contact-link {
  color: #F5C09E;
  font-weight: 600;
}

.trial__contact-link:hover {
  color: #F5C09E;
}

/* --- Form card --- */
.trial__form {
  background: var(--rl-card);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 30px 60px -20px rgba(10, 26, 20, .5);
}

.trial__form-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 22px;
}

.trial__field {
  margin-bottom: 16px;
}

.trial__field--last {
  margin-bottom: 24px;
}

.trial__label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.trial__input,
.trial__select {
  border-radius: 12px;
  border: 1.5px solid #E3DAC7;
  font-size: 16px;
}

.trial__input {
  background: #fff;
}

.trial__select {
  background-color: #fff;
}

.trial__input:focus,
.trial__select:focus {
  border-color: var(--rl-green);
  box-shadow: 0 0 0 .2rem rgba(29, 92, 73, .14);
}

.trial__submit {
  width: 100%;
  background: #D9764C;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 14px 28px -10px rgba(217, 118, 76, .55);
  transition: all .25s;
}

.trial__submit:hover {
  background: #C4623B;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(217, 118, 76, .6);
}

.trial__fineprint {
  text-align: center;
  font-size: 13px;
  color: #8A8271;
  margin-top: 14px;
}

/* --- Success card --- */
.trial__success {
  background: var(--rl-card);
  border-radius: 20px;
  padding: 48px 36px;
  box-shadow: 0 30px 60px -20px rgba(10, 26, 20, .5);
  text-align: center;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.trial__success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rl-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.trial__success-check {
  color: var(--rl-green);
  font-size: 32px;
}

.trial__success-title {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 12px;
}

.trial__success-text {
  color: var(--rl-muted);
  line-height: 1.65;
  max-width: 26rem;
  margin: 0;
}

/* ===== footer ===== */

/* Section shell */
.footer {
  background: #12241D;
  color: var(--rl-cream);
  padding: 72px 0 32px;
}

/* Brand block */
.footer__brand {
  gap: 10px;
  margin-bottom: 16px;
}

.footer__logo-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--rl-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__logo-text {
  font-family: var(--rl-font-display);
  font-weight: 700;
  font-size: 22px;
}

.footer__tagline {
  color: rgba(243, 239, 228, .7);
  font-size: 15px;
  line-height: 1.65;
  max-width: 20rem;
}

/* Link columns */
.footer__heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 239, 228, .45);
  margin-bottom: 16px;
}

.footer__links {
  display: grid;
  gap: 11px;
  font-size: 15px;
}

.footer__link {
  color: rgba(243, 239, 228, .75);
  text-decoration: none;
}

.footer__link:hover {
  color: #fff;
}

.footer__link-icon {
  margin-right: 8px;
}

.footer__link--cta {
  color: #F5C09E;
  text-decoration: none;
  font-weight: 600;
}

.footer__link--cta:hover {
  color: #fff;
}

/* Bottom legal bar */
.footer__bottom {
  border-top: 1px solid rgba(243, 239, 228, .14);
  margin-top: 52px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(243, 239, 228, .5);
}

.footer__legal {
  display: flex;
  gap: 20px;
}

.footer__legal-link {
  color: rgba(243, 239, 228, .5);
  text-decoration: none;
}

.footer__legal-link:hover {
  color: #fff;
}