/* Подключает фирменные шрифты одной корректной CSS-директивой. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap');

:root{
--paper:#f6f0e3;
--ink:#242b25;
--green:#075a2d;
--wine:#2b78a6;
--purple:#8b6ba0;
--line:#cfc7b7;
--shell:87vw
}

*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
color:var(--ink);
font-family:'DM Sans',Arial,sans-serif;
background:#f5efe2 url('../images/main/beige_bg.JPEG') repeat;
background-size:520px auto
}
.site-shell{
width:var(--shell);
margin-inline:auto
}
.site-header{
background:rgba(255,253,248,.88);
border-bottom:1px solid #d9d2c6
}
.header-row{
min-height:106px;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}
.brand img{
display:block;
width:clamp(170px,18vw,285px);
height:auto
}
.brand-pair{
display:flex;
align-items:center;
gap:20px
}
.brand-pair>i,.partnership i{
height:54px;
width:1px;
background:#ada99e
}
.brand-pair>img{
width:clamp(120px,13vw,205px);
mix-blend-mode:normal
}
.main-nav{
display:flex;
align-items:center;
gap:clamp(13px,1.7vw,31px);
font-size:clamp(12px,.92vw,16px);
font-weight:600
}
.main-nav a{
color:inherit;
text-decoration:none;
white-space:nowrap
}
.main-nav>a:not(.nav-contact):hover{
color:var(--green)
}
.nav-contact{
display:flex;
align-items:center;
gap:7px
}
.nav-contact img{
width:17px;
height:17px
}
.menu-button{
display:none;
background:none;
border:0;
font-size:28px
}
.audience-nav{
height:91px;
display:grid;
grid-template-columns:repeat(3,1fr);
border-bottom:1px solid var(--line)
}
.audience-nav a{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:16px;
text-transform:uppercase;
text-decoration:none;
font-family:Lora,serif;
font-size:clamp(13px,1.25vw,20px);
font-weight:700
}
.audience-nav a:not(:last-child):after{
content:"";
position:absolute;
right:0;
width:1px;
height:38%;
background:var(--line)
}
.audience-nav img{
width:30px;
height:30px
}
.audience-nav .tenant{
color:var(--wine)
}
.audience-nav .owner{
color:#357554
}
.audience-nav .investor{
color:var(--purple)
}
.audience-nav .active:before{
content:"";
position:absolute;
bottom:-1px;
width:74%;
height:3px;
background:currentColor
}
.hero{
height:clamp(310px,32vw,570px);
position:relative;
overflow:hidden
}
.hero>img{
width:100%;
height:100%;
object-fit:cover
}
.hero-copy{
position:absolute;
left:4.3%;
top:20%;
z-index:1
}
.hero-copy h1{
font:700 clamp(47px,5.4vw,94px)/1 Lora,serif;
color:#075a2d;
margin:0 0 28px
}
.hero-copy p{
font-size:clamp(15px,1.35vw,23px);
line-height:1.65;
margin:0
}
.hero-copy i,.feature-card .card-content>i,.steps i{
display:block;
width:62px;
height:3px;
background:currentColor;
margin-top:24px
}
.tenant-hero .hero-copy i{
color:var(--wine)
}
.service-grid{
display:grid;
gap:18px;
margin-top:18px
}
.tenant-services{
grid-template-columns:repeat(3,1fr)
}
.owner-services{
grid-template-columns:repeat(2,1fr)
}
.feature-card{
min-width:0;
min-height:540px;
border:1px solid rgba(117,105,87,.3);
border-radius:16px;
overflow:hidden;
position:relative;
background:rgba(255,255,255,.35)
}
.card-content{
position:relative;
height:100%;
display:flex;
align-items:center;
flex-direction:column;
text-align:center;
padding:clamp(24px,3vw,54px) clamp(18px,3vw,50px);
z-index:1
}
.round-icon{
display:grid;
place-items:center;
width:80px;
height:80px;
border:1px solid rgba(120,100,80,.25);
border-radius:50%;
background:rgba(255,255,255,.52)
}
.round-icon img{
width:47px;
height:47px
}
.feature-card h2{
font:700 clamp(25px,2.25vw,39px)/1.15 Lora,serif;
margin:20px 0 0;
color:var(--green)
}
.tenant-services .feature-card:first-child h2{
color:var(--wine)
}
.emergency-card h2{
color:#a51d29
}
.feature-card .card-content>i{
width:48px;
height:2px;
margin:17px 0 25px
}
.feature-card p{
font-size:clamp(14px,1.05vw,18px);
line-height:1.55;
max-width:390px;
margin:0 auto 20px
}
.primary-button,.outline-button{
min-height:53px;
border-radius:7px;
border:0;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:11px 24px;
text-decoration:none;
font:700 clamp(13px,1.05vw,18px) 'DM Sans',sans-serif;
cursor:pointer
}
.primary-button{
color:white;
background:var(--green)
}
.tenant-page .portal-card .primary-button{
background:linear-gradient(90deg,#b20b3e,#e7164e)
}
.primary-button img,.outline-button img{
width:20px;
height:20px
}
.feature-card .primary-button{
width:100%;
margin-top:auto
}
.primary-button.emergency{
background:linear-gradient(90deg,#b91d19,#ec3d21)
}
.outline-button{
width:100%;
margin-top:auto;
color:var(--green);
background:rgba(255,255,255,.45);
border:2px solid currentColor
}
.feature-card small{
display:block;
margin-top:14px;
font-size:13px;
color:#595951
}
.emergency-card ul{
list-style:none;
margin:0 auto 20px;
padding:0;
width:100%;
text-align:left;
max-width:280px
}
.emergency-card li{
display:flex;
align-items:center;
gap:12px;
margin:11px 0
}
.emergency-card li img,address img{
width:19px;
height:19px
}
.feature-card address{
width:100%;
font-style:normal;
text-align:left;
margin:6px auto 22px;
max-width:335px
}
.feature-card address span{
display:flex;
align-items:center;
gap:14px;
margin:14px 0
}
.feature-card address a,.feature-card address b{
color:inherit;
text-decoration:none;
font-weight:500
}
.documents{
margin-top:18px;
border:1px solid rgba(117,105,87,.3);
border-radius:14px;
overflow:hidden;
background:rgba(255,255,255,.45)
}
.documents>header{
text-align:center;
padding:13px
}
.documents h2{
display:flex;
justify-content:center;
align-items:center;
gap:11px;
font:700 clamp(26px,2.2vw,39px) Lora,serif;
color:var(--purple);
margin:0
}
.documents h2 img{
width:34px
}
.documents header p{
margin:4px 0 0
}
.document-grid{
display:grid;
grid-template-columns:repeat(3,1fr)
}
.document-grid article{
min-height:300px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:30px clamp(18px,3vw,50px);
background-image:var(--doc-bg);
background-size:cover;
background-position:center;
border-top:1px solid rgba(117,105,87,.22)
}
.document-grid article:not(:last-child){
border-right:1px solid rgba(117,105,87,.22)
}
.document-grid article>img{
width:53px;
height:53px
}
.document-grid h3{
font:700 clamp(20px,1.6vw,27px) Lora,serif;
color:var(--wine);
margin:12px 0 5px
}
.document-grid p{
line-height:1.5;
margin:0 auto 16px
}
.document-grid a{
margin-top:auto;
padding:9px 22px;
border:1px solid var(--wine);
border-radius:5px;
color:var(--wine);
text-decoration:none;
font-weight:600
}
.thanks-banner{
min-height:235px;
margin-top:18px;
position:relative;
overflow:hidden;
border:1px solid rgba(117,105,87,.3);
border-radius:14px
}
.thanks-banner>div{
position:relative;
margin-left:39%;
padding:42px 5%
}
.thanks-banner h2{
font:700 clamp(27px,2.5vw,43px) Lora,serif;
color:var(--green);
margin:0 0 12px
}
.thanks-banner p{
font-size:clamp(14px,1.15vw,19px);
line-height:1.55
}
.owner-services .feature-card{
min-height:610px
}
.owner-services .card-content{
padding-inline:14%
}
.owner-services .feature-card p{
max-width:320px
}
.owner-contact h2{
color:var(--purple)
}
.owner-contact .outline-button{
color:var(--purple)
}
.owner-contact address{
max-width:390px
}
.how-it-works{
min-height:390px;
position:relative;
margin-top:18px;
border:1px solid rgba(117,105,87,.3);
border-radius:14px;
overflow:hidden;
padding:20px 5% 30px
}
.how-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover
}
.how-it-works h2{
position:relative;
text-align:center;
font:700 clamp(29px,2.6vw,44px) Lora,serif;
color:var(--green);
margin:0 0 20px
}
.how-it-works h2 span{
font-size:.65em
}
.steps{
position:relative;
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr;
align-items:center;
text-align:center
}
.steps article{
padding:0 8%
}
.steps article>b{
display:inline-grid;
place-items:center;
width:44px;
height:44px;
border-radius:50%;
background:#dfe4bd;
color:var(--green);
font-size:22px
}
.steps article>img{
display:block;
width:62px;
height:62px;
margin:7px auto
}
.steps h3{
font:700 clamp(17px,1.45vw,24px) Lora,serif;
color:var(--green);
margin:7px 0
}
.steps i{
width:42px;
height:2px;
margin:10px auto
}
.steps p{
font-size:clamp(12px,.95vw,16px);
line-height:1.5
}
.steps em{
font-style:normal;
color:var(--green);
font-size:30px
}
.partnership{
margin:18px auto;
min-height:210px;
padding:28px;
text-align:center;
border:1px solid rgba(117,105,87,.3);
border-radius:14px;
background:rgba(255,255,255,.34)
}
.partnership>div{
display:flex;
justify-content:center;
align-items:center;
gap:35px
}
.partnership img{
width:min(26%,340px);
mix-blend-mode:normal
}
.partnership p{
font:500 clamp(14px,1.15vw,19px)/1.7 Lora,serif
}
.site-footer{
margin-top:18px;
background:rgba(255,255,255,.5)
}
.footer-main{
min-height:155px;
display:grid;
grid-template-columns:1.3fr .7fr 1fr auto;
align-items:center;
gap:35px
}
.footer-main>img{
width:min(100%,270px)
}
.footer-main address{
display:flex;
flex-direction:column;
gap:7px;
font-style:normal
}
.footer-main address a{
color:inherit;
text-decoration:none
}
.socials{
display:flex;
gap:13px
}
.socials img{
width:39px;
height:39px
}
.footer-bar{
background:#00592f;
color:white
}
.footer-bar>div{
min-height:62px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
font-size:13px
}
.compact{
margin-top:0
}
.toast{
position:fixed;
z-index:20;
top:20px;
left:50%;
transform:translateX(-50%);
background:var(--green);
color:white;
padding:14px 24px;
border-radius:8px;
box-shadow:0 8px 30px #0003
}
.contact-modal{
width:min(92vw,570px);
border:0;
border-radius:16px;
padding:35px;
color:var(--ink);
background:var(--paper);
box-shadow:0 20px 70px #0005
}
.contact-modal::backdrop{
background:#182018aa
}
.modal-close{
position:absolute;
right:18px;
top:13px;
border:0;
background:none;
font-size:32px;
cursor:pointer
}
.contact-modal h2{
font:700 31px Lora,serif;
color:var(--green);
margin:0
}
.contact-modal form{
display:grid;
gap:14px;
margin-top:23px
}
.contact-modal label{
font-weight:700
}
.contact-modal input,.contact-modal textarea{
display:block;
width:100%;
margin-top:6px;
border:1px solid #aaa18f;
border-radius:6px;
background:#fffdf7;
padding:12px;
font:inherit
}
.contact-modal .primary-button{
width:100%
}

@media(max-width:1100px){
:root{
--shell:92vw
}
.header-row{
min-height:85px
}
.main-nav{
position:absolute;
display:none;
z-index:10;
top:85px;
right:4vw;
min-width:250px;
flex-direction:column;
align-items:flex-start;
padding:24px;
background:#fffaf0;
border:1px solid var(--line);
box-shadow:0 12px 30px #0002
}
.main-nav.open{
display:flex
}
.menu-button{
display:block
}
.tenant-services .card-content{
padding-inline:20px
}
.feature-card{
min-height:520px
}
.footer-main{
grid-template-columns:1fr 1fr
}
.socials{
justify-self:end
}

}

@media(max-width:760px){
:root{
--shell:94vw
}
.header-row{
min-height:74px
}
.brand img{
width:165px
}
.brand-pair>img,.brand-pair>i{
display:none
}
.main-nav{
top:74px
}
.audience-nav{
height:68px
}
.audience-nav a{
gap:6px;
font:700 10px 'DM Sans',sans-serif
}
.audience-nav img{
width:21px;
height:21px
}
.hero{
height:270px
}
.hero-copy{
left:5%;
top:17%;
max-width:58%
}
.hero-copy h1{
font-size:clamp(38px,11vw,59px);
margin-bottom:15px
}
.hero-copy p{
font-size:13px;
line-height:1.45
}
.hero-copy i{
margin-top:14px
}
.tenant-services,.owner-services{
grid-template-columns:1fr
}
.feature-card,.owner-services .feature-card{
min-height:500px
}
.tenant-services .feature-card{
min-height:560px
}
.document-grid{
grid-template-columns:1fr
}
.document-grid article:not(:last-child){
border-right:0
}
.thanks-banner{
min-height:290px
}
.thanks-banner>div{
margin-left:34%;
padding:42px 5%
}
.steps{
grid-template-columns:1fr
}
.steps em{
transform:rotate(90deg);
line-height:1
}
.steps article{
padding:12px 12%
}
.how-it-works{
padding-block:22px
}
.partnership img{
width:42%
}
.partnership>div{
gap:15px
}
.footer-main{
grid-template-columns:1fr;
text-align:center;
padding:30px
}
.footer-main>img{
margin:auto
}
.footer-main address{
align-items:center
}
.socials{
justify-self:center
}
.footer-bar>div{
padding:18px 0;
flex-direction:column;
text-align:center
}
.contact-modal{
padding:28px 20px
}

}

@media(max-width:430px){
.audience-nav a{
flex-direction:column;
gap:3px
}
.hero{
height:230px
}
.hero>img{
object-position:58% center
}
.hero-copy{
max-width:60%
}
.hero-copy h1{
font-size:37px
}
.hero-copy p{
font-size:11px
}
.feature-card,.owner-services .feature-card,.tenant-services .feature-card{
min-height:520px
}
.thanks-banner>div{
margin-left:25%;
padding-left:10%
}
.thanks-banner h2{
font-size:25px
}

}



/* Turns the feature icon holder into a two-layer composition. */
.feature-card .round-icon {
/* Creates a positioning context for both independent image layers. */
position:relative;
/* Removes the old generated circle border. */
border:0;
/* Removes the old generated circle fill. */
background:transparent;
/* Prevents either image layer from being clipped. */
overflow:visible;
}

/* Sizes the new watercolor PNG layer independently. */
.feature-card .round-icon .round-icon-bg {
/* Positions the watercolor texture behind the SVG symbol. */
position:absolute;
/* Centers the watercolor texture inside the holder. */
inset:50% auto auto 50%;
/* Makes the new texture larger than the symbol. */
width:104px;
/* Keeps the texture perfectly square. */
height:104px;
/* Centers the independently positioned texture. */
transform:translate(-50%,-50%);
/* Preserves the complete transparent circular artwork. */
object-fit:contain;
/* Places the texture behind the symbol. */
z-index:0;
}

/* Sizes the SVG symbol above its watercolor PNG layer. */
.feature-card .round-icon .round-icon-symbol {
/* Keeps the symbol independently scalable. */
width:47px;
/* Keeps the symbol independently scalable. */
height:47px;
/* Preserves the complete SVG artwork. */
object-fit:contain;
/* Places the symbol above the texture. */
position:relative;
/* Gives the symbol the upper stacking level. */
z-index:1;
}

/* Keeps the two-layer icon proportional on narrow phones. */
@media(max-width:600px) {
/* Reduces the watercolor layer without changing page structure. */
.feature-card .round-icon .round-icon-bg {
/* Fits the texture inside compact cards. */
width:88px;
/* Keeps the compact texture square. */
height:88px;
}
}


/* Aligns the Homeowners section title with its new branch SVG files. */
.owner-page .section-heading-with-branches {
/* Places the left branch, title, and right branch on one line. */
display:flex;
/* Vertically centers all three heading elements. */
align-items:center;
/* Centers the full decorative heading. */
justify-content:center;
/* Adds responsive spacing around the title. */
gap:clamp(8px,1.4vw,18px);
}

/* Sizes the independent Homeowners branch images. */
.owner-page .section-heading-with-branches .heading-branch {
/* Gives each horizontal branch a responsive width. */
width:clamp(230px,30vw,410px);
/* Keeps the branch compact beside the title. */
height:120px;
/* Expands the square SVG canvas into its intended horizontal shape. */
object-fit:fill;
}


/* Scales the enlarged Homeowners branches down only on mobile screens. */
@media(max-width:620px) {
/* Keeps both decorative branches inside the phone viewport. */
.owner-page .section-heading-with-branches .heading-branch {
/* Reduces each branch proportionally from its desktop size. */
width:clamp(46px,18vw,72px);
/* Preserves the enlarged branch aspect ratio on phones. */
height:clamp(24px,9.4vw,38px);
}
}


/* Recolors Homeowners branch decorations to the exact neighboring heading color. */
.owner-page .section-heading-with-branches .heading-branch {
/* Uses the heading color as the visible branch color. */
background-color:currentColor;
/* Loads the supplied left branch as the visible shape. */
-webkit-mask:url("/images/homeowners/icon-branch-left.svg") center/100% 100% no-repeat;
/* Loads the supplied left branch in standards-based browsers. */
mask:url("/images/homeowners/icon-branch-left.svg") center/100% 100% no-repeat;
}

/* Loads the mirrored right Homeowners branch artwork. */
.owner-page .section-heading-with-branches .heading-branch-right {
/* Uses the supplied right branch as the mask. */
-webkit-mask-image:url("/images/homeowners/icon-branch-right.svg");
/* Uses the supplied right branch in standards-based browsers. */
mask-image:url("/images/homeowners/icon-branch-right.svg");
}


/* Aligns the horizontal Homeowners process composition without changing element sizes or section height. */
@media(min-width:761px) {
.owner-page .how-it-works .steps {
transform:translateY(-10%);
align-items:start;
}

.owner-page .how-it-works .steps article {
display:grid;
grid-template-rows:44px 76px 2.4em 22px auto;
align-items:start;
}

.owner-page .how-it-works .steps article > img {
align-self:start;
}

.owner-page .how-it-works .steps h3 {
align-self:start;
margin:7px 0;
}

.owner-page .how-it-works .steps i {
align-self:start;
}

.owner-page .how-it-works .steps p {
align-self:start;
margin:0;
}

.owner-page .how-it-works .steps > em {
align-self:start;
margin-top:119px;
font-size:45px;
line-height:1;
}
}


/* Keeps overlaid copy inside the empty areas intentionally provided by each illustration. */
.tenant-page .contact-card .card-content {
width:64%;
margin-right:auto;
padding-inline:clamp(18px,3vw,42px) clamp(10px,1.5vw,22px);
}

.tenant-page .contact-card address {
width:100%;
max-width:100%;
overflow-wrap:anywhere;
}

.document-grid article:nth-child(1) {
padding-left:28%;
padding-right:12%;
}

.document-grid article:nth-child(2) {
padding-left:28%;
padding-right:28%;
}

.document-grid article:nth-child(3) {
padding-left:24%;
padding-right:24%;
}

.owner-page .owner-portal .card-content {
width:58%;
margin-left:42%;
padding-inline:clamp(14px,2.5vw,38px);
}

.owner-page .owner-contact .card-content {
width:58%;
margin-right:auto;
padding-inline:clamp(14px,2.5vw,38px);
}

.owner-page .owner-contact address {
width:100%;
max-width:100%;
overflow-wrap:anywhere;
}

.owner-page .how-it-works .steps article p {
width:78%;
margin-inline:auto;
}

@media(max-width:760px) {
.tenant-page .contact-card .card-content,
.owner-page .owner-portal .card-content,
.owner-page .owner-contact .card-content {
padding-inline:clamp(12px,3vw,24px);
}

.document-grid article:nth-child(1) {
padding-left:30%;
padding-right:12%;
}

.document-grid article:nth-child(2) {
padding-left:29%;
padding-right:29%;
}

.document-grid article:nth-child(3) {
padding-left:25%;
padding-right:25%;
}
}

/* Keeps the complete document actions above the painted lower edge of every card. */
.tenant-page .document-grid a {
margin-top:0;
}

/* Uses the clear right-hand area of the tenant thank-you illustration. */
.tenant-page .thanks-banner > div {
margin-left:47%;
padding-left:2%;
padding-right:4%;
}

/* Moves the two outer Homeowners steps away from the painted trees symmetrically. */
@media(min-width:761px) {
.owner-page .how-it-works .steps article:first-of-type {
transform:translateX(14%);
}

.owner-page .how-it-works .steps article:last-of-type {
transform:translateX(-14%);
}
}

@media(max-width:760px) {
.tenant-page .thanks-banner > div {
margin-left:42%;
padding-left:3%;
padding-right:3%;
}
}


/* Interactive Tenant document cards become active only after a PDF is published. */
.tenant-page .document-grid article {
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.tenant-page .document-grid .document-card--active {
cursor:pointer;
}

.tenant-page .document-grid .document-card--active:hover,
.tenant-page .document-grid .document-card--active:focus-visible {
transform:translateY(-6px);
box-shadow:0 14px 30px rgba(62,71,45,.16);
border-color:rgba(92,107,53,.45);
outline:none;
z-index:1;
}

.document-unavailable {
margin-top:0;
padding:9px 18px;
border:1px solid rgba(117,105,87,.35);
border-radius:5px;
color:#777268;
font-size:13px;
font-weight:600;
background:rgba(255,255,255,.58);
}

/* Gives the single-action portal and contact cards the same restrained feedback language. */
.feature-card,
.primary-button,
.outline-button {
transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.feature-card:hover {
box-shadow:0 14px 32px rgba(62,71,45,.12);
}

.primary-button:hover,
.outline-button:hover {
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(62,71,45,.15);
filter:saturate(1.08);
}

@media(prefers-reduced-motion:reduce) {
.tenant-page .document-grid article,
.feature-card,
.primary-button,
.outline-button {
transition:none;
}
}


/* A subtle reveal keeps the Homeowners process explanatory rather than button-like. */
.owner-page .how-it-works .steps article {
opacity:0;
transition:opacity .45s ease;
}

.owner-page .how-it-works.is-visible .steps article {
opacity:1;
}

@media(prefers-reduced-motion:reduce) {
.owner-page .how-it-works .steps article {
opacity:1;
transition:none;
}
}

/* Mobile compositions keep imagery and variable-length HTML copy independent. */
@media (max-width: 760px) {
    .tenant-page .hero,
    .owner-page .hero {
        display: grid;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .tenant-page .hero-copy,
    .owner-page .hero-copy {
        position: relative;
        inset: auto;
        padding: 24px;
        background: #faf6eb;
    }

    .tenant-page .service-grid,
    .owner-page .service-grid {
        grid-template-columns: 1fr;
    }

    .tenant-page .feature-card,
    .owner-page .feature-card,
    .owner-page .owner-services .feature-card {
        display: grid;
        min-height: 0;
        height: auto;
    }

    .tenant-page .feature-card .card-content,
    .owner-page .feature-card .card-content {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 18px 20px 20px;
        box-sizing: border-box;
        background: rgba(250, 246, 235, .98);
    }

    .tenant-page .feature-card h2,
    .owner-page .feature-card h2 {
        font-size: clamp(24px, 7vw, 30px);
    }

    .tenant-page .feature-card p,
    .owner-page .feature-card p {
        font-size: clamp(15px, 4.2vw, 18px);
        line-height: 1.45;
    }

    .tenant-page .feature-card .round-icon,
    .owner-page .feature-card .round-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 4px;
    }

    .tenant-page .feature-card h2,
    .owner-page .feature-card h2 {
        margin-top: 8px;
    }

    .tenant-page .feature-card h2 + i,
    .owner-page .feature-card h2 + i {
        margin-block: 10px 16px;
    }

    .tenant-page .feature-card p,
    .owner-page .feature-card p {
        margin-bottom: 15px;
    }

    .tenant-page .feature-card .outline-button,
    .owner-page .feature-card .outline-button,
    .tenant-page .feature-card .primary-button,
    .owner-page .feature-card .primary-button {
        min-height: 48px;
    }

    .tenant-page .feature-card small,
    .owner-page .feature-card small {
        margin-top: 10px;
    }

    .tenant-page .document-grid { grid-template-columns: 1fr; }

    .tenant-page .document-grid article,
    .tenant-page .document-grid article:nth-child(n) {
        min-height: 0;
        padding: 28px 24px;
        background-image: linear-gradient(rgba(250, 246, 235, .90), rgba(250, 246, 235, .94)), var(--doc-bg);
        background-size: cover;
        overflow-wrap: anywhere;
    }

    .tenant-page .thanks-banner {
        display: grid;
        min-height: 0;
    }

    .tenant-page .thanks-banner > div {
        margin: 0;
        padding: 26px 24px;
        background: #faf6eb;
    }

    .owner-page .how-it-works {
        min-height: 0;
        height: auto;
        padding-bottom: 28px;
    }

    .owner-page .how-it-works .steps {
        position: relative;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .owner-page .how-it-works .steps article {
        opacity: 1;
    }
}