AMP - Send Postcard Only - No Rent Range Report
This setup is basically the same as normal except the form on Step 2 will be a standard NestHub form instead of the AMP form.
Form Import
Make sure this form submits to /amp-success or whatever success page url you set up.
eyJuYW1lIjoiQU1QIFN0ZXAgMiIsInNsdWciOiJhbXAtc3RlcC0yIiwic3VjY2Vzc01lc3NhZ2UiOm51bGwsImlzTGVhZCI6IjEiLCJhdHRyaWJ1dGVzIjpudWxsLCJmaWVsZHMiOlt7ImZpZWxkVHlwZUlEIjoiOCIsImxhYmVsIjoiUHJvcGVydHkgSW5mb3JtYXRpb24iLCJzbHVnIjoicHJvcGVydHktaW5mb3JtYXRpb24iLCJzZXR0aW5ncyI6IntcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQWRkcmVzcyIsInNsdWciOiJhZGRyZXNzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyIiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjQiLCJsYWJlbCI6IlByb3BlcnR5IFR5cGUiLCJzbHVnIjoicHJvcGVydHktdHlwZSIsInNldHRpbmdzIjoie1wib3B0aW9uc1wiOlwiQXBhcnRtZW50XFxyXFxuU2luZ2xlIEZhbWlseSBIb21lXFxyXFxuQ29uZG9cXHJcXG5EdXBsZXhcXHJcXG5Mb2Z0XFxyXFxuTW9iaWxlIEhvbWVcXHJcXG5NdWx0aXBsZXhcXHJcXG5Ub3duaG91c2VcXHJcXG5PdGhlclwiLFwiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjYiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiNCIsImxhYmVsIjoiU3RhdHVzIiwic2x1ZyI6InN0YXR1cyIsInNldHRpbmdzIjoie1wib3B0aW9uc1wiOlwiVmFjYW50XFxyXFxuT2NjdXBpZWQgQnkgVGVuYW50XFxyXFxuT2NjdXBpZWQgQnkgT3duZXJcIixcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjciLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgVmFsdWUiLCJzbHVnIjoicHJvcGVydHktdmFsdWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjgiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiOCIsImxhYmVsIjoiQ29udGFjdCBJbmZvcm1hdGlvbiIsInNsdWciOiJjb250YWN0LWluZm9ybWF0aW9uIiwic2V0dGluZ3MiOiJ7XCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI5IiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IllvdXIgTmFtZSIsInNsdWciOiJ5b3VyLW5hbWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxMCIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIzIiwibGFiZWwiOiJFbWFpbCIsInNsdWciOiJlbWFpbCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjExIiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjEwIiwibGFiZWwiOiJQaG9uZSIsInNsdWciOiJwaG9uZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTIiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMiIsImxhYmVsIjoiQ29tbWVudHMiLCJzbHVnIjoiY29tbWVudHMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEzIiwiYXR0cmlidXRlcyI6bnVsbH1dfQ==
Step 1
Step 1 HTML
Note: Make sure the data-success-url has the correct url for the step 2 page.
<div class="amp">
<div class="amp__lead">GET YOUR FREE RENTAL PRICE ANALYSIS</div>
<p class="amp__sub">
Call us today at {% snippet name='contact' type='phone' amp='true' %} or enter your address below.
</p>
<div class="amp__form" data-ion="amp" data-name="slug-name" data-step="1" data-success-url="/services-step-2" data-placeholder="Enter your property address here*"></div>
</div>
Add this Google API script to the bottom of the page
On newer sites, for the services pages, you may add the script to the footer snippet in the "AMP FOOTER GOES HERE" section at the bottom so it only loads on templates that have the footer snippet set to amp='true'.
Please note: if you add it to the script to the footer, you will need to remove it from the bottom of the /services-step-2 page. The form will not load if you have the script on there twice.
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOwigZ96jQoEOmJz_soxC-FuThsWo71KA&sensor=false&libraries=places&callback=ION_initGoogleMaps"></script>
Add AMP Postcard Only script to the bottom of the page
<script defer src="https://resources.nesthub.com/js/amp-postcard-only.js"></script>
Step 1 CSS
/* AMP Step 1
============================================================================= */
.amp { text-align: center; }
.amp a { color: inherit; }
.amp a:hover { color: var(--primary); }
.amp__lead { font-size: 42px; line-height: 1.2; margin-top: 15px; }
.amp__sub { font-size: 24px; font-family: var(--secondary-font); line-height: 1.2; }
.amp__form { max-width: 800px; margin: 0 auto; min-height: 50px; }
.amp__form .ion-amp-form { display: flex; }
.amp__form .ion-amp-form .ion-form-group { margin: 0; flex: 1 1 auto; }
.amp__form .ion-amp-form label { display: none; }
.amp__form .ion-amp-form input { border: 0; height: 50px; padding: 0 15px; border-radius: 0!important; border: 0!important; }
.amp__form .ion-amp-form button { background: var(--primary); border: 1px solid var(--primary); font-weight: bold; white-space: nowrap; opacity: 1!important; text-transform: uppercase; flex: 0 1 150px; }
.amp__form .ion-amp-form button:hover { background: #fff; color: var(--primary); }
@media (max-width: 600px){
.amp__lead { font-size: 34px; }
.amp__sub { font-size: 20px; }
.amp__form .ion-amp-form { flex-wrap: wrap; }
.amp__form .ion-amp-form button { width: 100%; }
}
Step 2
Step 2 HTML
Note: Make sure that you use only one version of the AMP Step 2 CSS - you may need to remove/replace amp-v2.css from the services-step-2 template if you are using that template.
<html>
<head>
<title>Property Management Services</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="/css/amp-postcard-only.css">
</head>
<body class="no-hero">
<section class="amp-step-2">
<div class="amp-step-2__header">
<h1>Almost There!</h1>
<p>
We just need a few more details about
<u class="ion-amp-lead-address">your property address here</u>
for your personalized property evaluation.
</p>
</div>
<div class="amp-step-2__form">
{% form name='amp-step-2' %}
</div>
<div class="amp-step-2__footer">
<h2>What Do I Get Out Of This?</h2>
<div class="row justify-content-center">
<div class="col-lg-5 pr-lg-5 pb-5">
<div class="amp-step-2__icon amp-step-2__icon--email">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 57.29"><path d="M41,39.13A5.45,5.45,0,0,1,37.67,38L10.73,16.64A1,1,0,0,1,12,15.07L38.91,36.43a3.44,3.44,0,0,0,4.18,0L70,15.34a1,1,0,0,1,1.41.17,1,1,0,0,1-.17,1.4L44.33,38A5.45,5.45,0,0,1,41,39.13Z"/><path d="M1,13a1,1,0,0,1-1-1A12,12,0,0,1,12,0h19.1a1,1,0,1,1,0,2H12A10,10,0,0,0,2,12,1,1,0,0,1,1,13Z"/><path d="M70,57.29H37a1,1,0,0,1,0-2H70a10,10,0,0,0,10-10,1,1,0,0,1,2,0A12,12,0,0,1,70,57.29Z"/><path d="M69.07,52H12.93a7.63,7.63,0,0,1-7.62-7.63V12.93a7.63,7.63,0,0,1,7.62-7.62H69.07a7.63,7.63,0,0,1,7.62,7.62V44.35A7.63,7.63,0,0,1,69.07,52ZM12.93,7.31a5.62,5.62,0,0,0-5.62,5.62V44.35A5.63,5.63,0,0,0,12.93,50H69.07a5.63,5.63,0,0,0,5.62-5.63V12.93a5.62,5.62,0,0,0-5.62-5.62Z"/><path d="M11.57,42.43a1,1,0,0,1-.78-.37,1,1,0,0,1,.15-1.41l15.9-12.8a1,1,0,0,1,1.41.16,1,1,0,0,1-.16,1.4l-15.9,12.8A1,1,0,0,1,11.57,42.43Z"/><path d="M70.43,42.43a1,1,0,0,1-.62-.22L54,29.47a1,1,0,1,1,1.26-1.56L71.06,40.65a1,1,0,0,1,.15,1.41A1,1,0,0,1,70.43,42.43Z"/><path d="M50.14,2h-.87a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2ZM44.07,2H43.2a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2ZM38,2h-.87a1,1,0,0,1,0-2H38a1,1,0,0,1,0,2ZM31.93,2h-.87a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2Z"/><path d="M37,57.29h-.87a1,1,0,0,1,0-2H37a1,1,0,0,1,0,2Zm-6.07,0H30a1,1,0,0,1,0-2h.87a1,1,0,1,1,0,2Zm-6.07,0H24a1,1,0,1,1,0-2h.87a1,1,0,0,1,0,2Zm-6.07,0H18a1,1,0,1,1,0-2h.79a1,1,0,1,1,0,2Z"/></svg>
</div>
<p>
Shortly after submitting your information, you'll be contacted by one of our team of experts with a personalized evaluation of your
home.
</p>
</div>
<div class="col-lg-7 pl-lg-5 pb-5">
<div class="amp-step-2__icon amp-step-2__icon--support">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.92 82"><path d="M14.55,39.66a1,1,0,0,1-.9-.55,26.54,26.54,0,0,1-1.85-4.83,1,1,0,1,1,1.93-.53,24,24,0,0,0,1.71,4.46A1,1,0,0,1,15,39.55,1.06,1.06,0,0,1,14.55,39.66Z"/><path d="M27,49.41a11.67,11.67,0,0,1-6.78-2.33,1,1,0,0,1-.24-1.4,1,1,0,0,1,1.39-.23,9.71,9.71,0,0,0,5.63,2c6.14,0,11.39-7,13.21-13.58a1,1,0,0,1,1.92.54C40,41.84,34.17,49.41,27,49.41Z"/><path d="M13.08,82a1,1,0,0,1-1-1V70.76a1,1,0,0,1,2,0V81A1,1,0,0,1,13.08,82Z"/><path d="M48.65,82H5.27A5.27,5.27,0,0,1,0,76.73v-.59C0,63.57,5.7,57,19.05,54.19a1,1,0,0,1,.78.16L27,59.3l7.13-4.95a1,1,0,0,1,.77-.16c13.36,2.81,19.06,9.38,19.06,22v.59A5.27,5.27,0,0,1,48.65,82ZM19.05,56.24C7,58.89,2,64.68,2,76.14v.59A3.26,3.26,0,0,0,5.27,80H48.65a3.27,3.27,0,0,0,3.27-3.27v-.59c0-11.46-5-17.25-17.05-19.9l-7.34,5.1a1,1,0,0,1-1.14,0Z"/><path d="M40.83,82a1,1,0,0,1-1-1V70.76a1,1,0,0,1,2,0V81A1,1,0,0,1,40.83,82Z"/><path d="M19.26,56.17a1,1,0,0,1-.77-.36,1,1,0,0,1,.13-1.41c1.07-.89,1.56-5.07,1.56-7.76a1,1,0,0,1,2,0c0,1.24-.11,7.5-2.28,9.3A1,1,0,0,1,19.26,56.17Z"/><path d="M34.66,56.17a1,1,0,0,1-.64-.23c-2.17-1.8-2.28-8.06-2.28-9.3a1,1,0,0,1,2,0c0,2.69.49,6.87,1.56,7.76a1,1,0,0,1,.13,1.41A1,1,0,0,1,34.66,56.17Z"/><path d="M41.33,35.13A1.77,1.77,0,0,1,39.6,33.8c-.83-3-1.94-9-2-9.22,0,0,0-.09,0-.13,0-.25-.3-.31-.45-.32-4.48-.05-9.24-2.41-10.57-3.12L28.5,26.2a1,1,0,0,1-1.4,1.23l-9.17-4.84a1.18,1.18,0,0,0-1.23.08l-2.37,11A1.73,1.73,0,0,1,12.54,35a1.77,1.77,0,0,1-1.73-1.41c-2.36-10.84-1.91-17.82,1.43-22,2.67-3.31,7-4.87,14.15-5a3.13,3.13,0,0,1,.53,0,3.13,3.13,0,0,1,.53,0c7.13.12,11.53,1.69,14.21,5,3.36,4.16,3.81,11.16,1.44,22a1.78,1.78,0,0,1-1.71,1.42ZM39.59,24.27c.11.58,1,5.26,1.73,8.2,2-9.74,1.65-16-1.22-19.52-2.33-2.9-6.41-4.22-13.18-4.27S16.12,10,13.8,12.92c-2.84,3.53-3.24,9.7-1.22,19.38l2.23-10.36a1,1,0,0,1,.23-.45,3.17,3.17,0,0,1,3.82-.67l6.85,3.62-1.14-3.07,0-.13A1.87,1.87,0,0,1,25,19.53,2,2,0,0,1,26.91,19a1,1,0,0,1,.3.11c.05,0,5.32,3,9.95,3.05A2.39,2.39,0,0,1,39.59,24.27Z"/><path d="M8.94,39.22A4,4,0,0,1,5.06,36.1l-2-8.94a4,4,0,0,1,7.77-1.72l2,8.94a4,4,0,0,1-3,4.74h0A3.67,3.67,0,0,1,8.94,39.22Zm.64-1.07h0ZM7,24.32a2,2,0,0,0-.42.05A2,2,0,0,0,5,26.73l2,8.94a2,2,0,0,0,2.36,1.5h0a2,2,0,0,0,1.5-2.36l-2-8.94A2,2,0,0,0,7,24.32Z"/><path d="M6.13,37.22H6l-2.76-.45a2.28,2.28,0,0,1-2-1.69L.05,29.71a2.27,2.27,0,0,1,1.09-2.37l2.3-1.54a1,1,0,1,1,1.11,1.66L2.24,29c-.18.12-.24.24-.24.27l1.19,5.36a.47.47,0,0,0,.32.14l2.78.45a1,1,0,0,1-.16,2Z"/><path d="M45,39.22a3.61,3.61,0,0,1-.86-.1h0a4,4,0,0,1-3-4.74l2-8.94a4,4,0,0,1,1.75-2.5,3.91,3.91,0,0,1,3-.52,4,4,0,0,1,3,4.74l-2,8.94A4,4,0,0,1,45,39.22Zm-.43-2a2,2,0,0,0,2.36-1.5l2-8.94a2,2,0,0,0-1.5-2.36A2,2,0,0,0,45,25.87l-2,8.94a2,2,0,0,0,1.5,2.36Z"/><path d="M47.79,37.22a1,1,0,0,1-.16-2l2.76-.45c.24,0,.33-.12.34-.14l1.19-5.37s-.05-.14-.24-.26l-2.31-1.55a1,1,0,1,1,1.11-1.66l2.31,1.54a2.28,2.28,0,0,1,1.08,2.37l-1.19,5.36a2.29,2.29,0,0,1-2,1.69L48,37.21Z"/><path d="M3.79,27.77a1,1,0,0,1-1-.9,24.29,24.29,0,1,1,48.45-2.58,24.49,24.49,0,0,1-.13,2.58,1,1,0,0,1-2-.21,23.36,23.36,0,0,0,.12-2.37,22.3,22.3,0,0,0-44.59,0,23.21,23.21,0,0,0,.13,2.37,1,1,0,0,1-.89,1.1Z"/><path d="M16.87,43.94a8.36,8.36,0,0,1-6.7-3.35L8.79,38.75a1,1,0,1,1,1.59-1.21l1.39,1.84A6.37,6.37,0,0,0,18,41.83l5.06-.91a1,1,0,1,1,.35,2l-5.06.91A8.57,8.57,0,0,1,16.87,43.94Z"/><path d="M24.71,44.55a2.38,2.38,0,0,1-2.36-2l-.19-1.22a2.39,2.39,0,0,1,2-2.72L27,38.15a2.36,2.36,0,0,1,1.78.43,2.4,2.4,0,0,1,.95,1.57l.18,1.22a2.33,2.33,0,0,1-.43,1.77,2.37,2.37,0,0,1-1.57,1l-2.8.43Zm2.62-4.43h-.06l-2.8.43a.4.4,0,0,0-.33.45l.19,1.22a.4.4,0,0,0,.15.26.49.49,0,0,0,.29.07l2.81-.43h0a.45.45,0,0,0,.26-.16.42.42,0,0,0,.07-.29l-.19-1.22a.4.4,0,0,0-.16-.26A.39.39,0,0,0,27.33,40.12Z"/></svg>
</div>
<p>
Your property's location, condition and amenities will determine the actual value of your home. In order
to get the most accurate value possible, please speak with one of our market analysis experts by calling
<span class="amp-step-2__phone" data-ion="amp" data-mode="calls" data-link="1" data-delimiter="." data-name="slug-name">111-111-1111</span>.
</p>
</div>
</div>
<a href="/{% snippet name='market-1' toUrl='true' %}-property-management#contact" class="btn">Contact Us</a>
</div>
</section>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOwigZ96jQoEOmJz_soxC-FuThsWo71KA&sensor=false&libraries=places&callback=ION_initGoogleMaps"></script>
<script defer src="https://resources.nesthub.com/js/amp-postcard-only.js" type="text/javascript"></script>
</body>
</html>
Step 2 CSS
You can keep the default colors or hide the variables to match the site's colors (on newer sites)
File name: amp-postcard-only.css
/* Set Design Standards & Colors Here */
.amp-step-2 {
/*
--primary: #0b2c75;
--secondary: #f4ac00;
--dark: #0b2c75;
--light: #51b4cf;
--gray: #f3f3f3;
--body-text: #000;
--primary-font: 'darkmode-off', sans-serif;
--secondary-font: 'depot-new-web', sans-serif;
--header-height: 149px;
*/
}
body.no-hero main { margin-top: var(--header-height); }
body.no-hero #secondary-banner { display: none; }
body.no-hero .body-container { width: 100%; max-width: 100%; padding: 0; }
.amp-step-2 { text-align: center; font-family: var(--primary-font); letter-spacing: .05em; }
.amp-step-2__header { position: relative; padding: 90px 15px 60px; background: var(--dark); color: #fff; font-weight: 500; letter-spacing: .05em; }
.amp-step-2__header h1 { font-size: 70px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: inherit; margin: 0 0 20px; }
.amp-step-2__header p { font-size: 22px; color: inherit; width: 800px; max-width: 100%; margin: 0 auto 70px; }
.amp-step-2__form { position: relative; background: #fff; padding: 50px 55px; border-radius: 20px; width: 1072px; max-width: 95vw; margin: 0 auto; letter-spacing: .05em; box-shadow: 0px 6px 43px 0px rgba(0, 0, 0, 0.17); transform: translateY(-20px); z-index: 2; }
.amp-step-2__form .ion-form-group-break h3 { font-size: 22px; text-transform: uppercase; font-weight: 500; letter-spacing: .05em; margin: 40px 0 20px; }
.amp-step-2__form .ion-form-group-break:first-of-type h3 { margin-top: 0; }
.amp-step-2__form .ion-form .ion-form-group label { font-size: 20px; letter-spacing: .05em; font-weight: 400; font-family: var(--secondary-font); margin: 0 12px 12px; }
.amp-step-2__form input, .amp-step-2__form select, .amp-step-2__form textarea { background: var(--gray)!important; border: 0!important; border-radius: 0!important; height: 54px!important; padding: 12px!important; font-size: 20px; font-family: var(--secondary-font); }
.amp-step-2__form textarea { height: 4em!important; }
.amp-step-2__form .ion-btn { font-size: 0; color: #000; background-color: var(--secondary); border-color: var(--secondary); display: block; height: 47px; line-height: 47px; padding: 0 20px; text-transform: uppercase; font-weight: 500; border-radius: 10px; width: 270px; letter-spacing: .05em; margin: 58px 10px 10px auto; }
.amp-step-2__form .ion-btn::after { content: 'send my free report!'; font-size: 18px; }
.amp-step-2__form .ion-btn:hover { border-color: var(--secondary); color: #000; }
.amp-step-2__footer { font-size: 18px; padding: 50px 15px 70px; width: 1072px; max-width: 95vw; margin: 0 auto; line-height: 1.66em; }
.amp-step-2__footer h2 { font-size: 60px; font-family: var(--secondary-font); font-weight: 500; letter-spacing: .05em; margin: 0 0 45px; }
.amp-step-2__footer .amp-step-2__icon { background: var(--gray); height: 90px; width: 90px; border-radius: 50%; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center; }
.amp-step-2__footer .amp-step-2__phone { font-size: 22px; color: var(--body-text); white-space: nowrap; }
.amp-step-2__footer .amp-step-2__phone a { color: var(--body-text); }
.amp-step-2__footer .amp-step-2__phone a:hover { color: var(--primary); }
.amp-step-2__icon { fill: var(--light); }
.amp-step-2__icon--email svg { margin-left: -25px; height: 59px; }
.amp-step-2__icon--support svg { margin-top: -25px; height: 83px; }
.amp-step-2__footer .btn { height: 47px; line-height: 47px; border-radius: 10px; }
@media (min-width: 600px) {
.amp-step-2__form form { display: flex; flex-wrap: wrap; margin: -10px; }
.amp-step-2__form .ion-form-group { flex: 1 1 250px; padding: 10px; margin: 0; }
.amp-step-2__form .ion-form-group:last-of-type { flex-grow: 0; }
.amp-step-2__form .ion-form-group-break, .amp-step-2__form .ion-form-group-textarea, .amp-step-2__form .ion-form-group:has([name*='address']) { flex: 1 1 100%; }
}
@media (max-width: 500px) {
.amp-step-2__header h1 { font-size: 40px; }
.amp-step-2__form { padding: 50px 25px; }
.amp-step-2__footer h2 { font-size: 36px; }
}