/* ===================================================
   Digital Intakes — Jul 2026 frontend refresh
   ---------------------------------------------------
   Additive overlay on top of custom-style-front.css.
   Loaded AFTER the original, so these rules win.

   Rules are scoped under body.home-index so they apply
   only to the home page, not other frontend pages.
   Sections not yet rebuilt keep their existing styling.

   Source: htm_frontend_jul_2026_deliverable/css/custom-style-front.css
   =================================================== */


/* TYPOGRAPHY
   -------------------------
   The new design switches the body typeface from GTwalsheim-Regular
   to Noto Sans. Headings stay GTwalsheim-Bold in both, so only body
   copy changes here. Scoped to the home page. */
body.home-index {
	font-family: 'Noto Sans', sans-serif;
}

body.home-index p {
	color: #4B4B4B;
	font-weight: 400;
}

body.home-index li {
	color: #4B4B4B;
}

/* Scoped away from the footer: body.home-index h4 (2 selectors) would
   otherwise beat .footer-custom h4 (1 selector) and turn the footer
   column headings dark on the home page only. */
body.home-index h1,
body.home-index h2,
body.home-index h3,
body.home-index h5,
body.home-index h6 {
	color: #1A202C;
}

body.home-index .section-intro h4,
body.home-index .blurb h4,
body.home-index .addons-module h4,
body.home-index .gettingstarted-module h4,
body.home-index .introfeature-module h4 {
	color: #1A202C;
}

/* The original sets `b { font-family: GTwalsheim-Bold }`; the new
   design uses plain weight-700 Noto Sans instead. */
body.home-index b {
	font-family: inherit;
	font-weight: 700;
}


/* NAV
   -------------------------
   Unscoped on purpose: _frontend_header.html.erb is shared by
   every frontend page, so its styling must match everywhere. */
.bt-green-out {
	background-color: transparent;
	border: 2px solid #00ADB3;
	color: #00ADB3 !important;
	border-radius: 60px;
	padding: 10px 20px;
}
.bt-green-out:hover,
.bt-green-out:focus,
.bt-green-out.focus,
.bt-green-out:active,
.bt-green-out.active {
	background-color: transparent;
	border: 2px solid #00ADB3;
	color: #00ADB3 !important;
}

/* The original stylesheet sets `.nav-bt-special { color: white !important }`
   plus uppercase / 10px radius / border:0 for the old solid nav button.
   Those beat the outlined pill on specificity, so the overrides below
   need !important to win. Scoped to .bt-green-out so any other
   .nav-bt-special button keeps its existing look. */
.nav-bt-special.bt-green-out {
	padding: 9px 16px !important;
	margin-top: 5px;
	font-size: 14px;
	border-radius: 60px !important;
	text-transform: none !important;
	border: 2px solid #00ADB3 !important;
	color: #00ADB3 !important;
	background-color: transparent !important;
}
.nav-bt-special.bt-green-out:hover,
.nav-bt-special.bt-green-out:focus,
.nav-bt-special.bt-green-out:active {
	border: 2px solid #00ADB3 !important;
	color: #00ADB3 !important;
	background-color: transparent !important;
}


/* HERO
   ------------------------- */
body.home-index .hero {
	background: url(../img/hero_bk.png) no-repeat center bottom;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.home-index .hero-box {
	padding-top: 40px;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-box {
	padding-top: 80px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .hero-box {
	margin-top:-10px;
}
}

body.home-index .hero-box h1 {
	margin-bottom:10px;
	font-size: 58px;
	line-height: 65px;
	color: white;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-box h1 {
	font-size: 40px;
	line-height: 40px;
	margin-bottom:15px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .hero-box h1 {
	font-size: 30px;
	line-height: 30px;
	margin-bottom:10px;
}
}

body.home-index .hero-box p {
	font-size:16px;
	line-height: 24px;
	padding-bottom:10px;
	color: white;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-box p {
	font-size:14px;
	line-height: 22px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .hero-box p {
	font-size:14px;
	line-height: 20px;
}
}

body.home-index .hero-box-bullets {
	padding-bottom: 20px;
}

/* No line-height here on purpose: the design leaves these inheriting
   Bootstrap's 1.42857143. Setting one makes the rows taller than the
   mockup. */
body.home-index .hero-box-bullets li {
	color: white;
	font-size: 16px;
	/* keep the check icon on the first text line when the label wraps */
	display: flex;
	align-items: flex-start;
}

body.home-index .hero-box-bullets img {
	width: 15px;
	margin-right: 10px;
	/* flex-basis stops the icon squashing when the label wraps;
	   the small offset centres it on the first line's cap-height */
	flex: 0 0 15px;
	margin-top: 2px;
}

/* The new design drops .bt-custom-front and shapes buttons via
   .bt-orange / .bt-green alone (pill, 60px radius). The original
   .bt-custom-front is still on the markup for other pages, and it
   forces border-radius:15px — so override it here on the home hero. */
body.home-index .hero-box .btn {
	font-size: 18px;
	margin-top: 10px;
	padding: 16px 24px;
	border-radius: 60px;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-box .btn {
	font-size: 14px;
}
}

body.home-index .hero-content {
	padding-top: 90px;
	padding-bottom: 140px;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-content {
	padding-top: 60px;
	padding-bottom: 70px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .hero-content {
	padding-top: 50px;
	padding-bottom: 100px;
}
}

body.home-index .hero-divider {
	padding-bottom: 15px;
}

body.home-index .google-eyebrow-hero {
	display: inline;
	color: white;
}

body.home-index .google-eyebrow-hero img {
	margin-left: 6px;
	margin-right: 6px;
	margin-top: -4px;
}

/* HERO ARTWORK (right column)
   -------------------------
   hero_pic-2026.png (laptop + phone, HIPAA badge baked in) with the
   Sirv "Limited Time Offer" sign overlaid on top.

   Layout follows the deliverable's .hero-right spec; the sign is an
   extra layer on top, positioned in % of .hero-right so it tracks the
   artwork as the column scales. */
/* Design's own .hero-right rules, applied verbatim. */
body.home-index .hero-right {
	position: relative;
}

body.home-index .hero-right img.hero-computer {
	padding-top: 140px;
	padding-left: 30px;
}
@media only screen and (max-width : 992px) {
body.home-index .hero-right img.hero-computer {
	padding-top: 140px;
	padding-left: 0;
}
}
@media only screen and (max-width : 767px) {
body.home-index .hero-right img.hero-computer {
	padding-top: 50px;
	padding-left: 40px;
	padding-right: 40px;
}
}

/* The original stylesheet absolutely positions .hero-computer
   (position:absolute; top:95px). The design has it in normal flow,
   so that has to be undone here. */
body.home-index .hero-computer {
	position: static;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
}

/* "Limited Time Offer" sign overlaid on the artwork — not part of the
   deliverable, layered on top so the promo is kept. Offsets are in %
   of .hero-right so it tracks the artwork as the column scales. */
body.home-index .hero-art-sign {
	position: absolute;
	top: 12%;
	left: 0;
	z-index: 3;
	width: 56%;
	display: block;
}

body.home-index .hero-art-sign .figure {
	width: 100%;
}

body.home-index .hero-art-sign .figure img {
	width: 100%;
	height: auto;
}

/* Mobile: same overlay, tighter offsets */
body.home-index .hero-art-mob {
	position: relative;
	padding-top: 30px;
}

@media only screen and (max-width : 767px) {
body.home-index .hero-art-sign {
	top: 6%;
	left: -3%;
	width: 66%;
}
}


/* SECTION INTRO (shared heading block for new sections)
   ------------------------- */
body.home-index .section-intro {
	text-align: center;
}

body.home-index .section-intro h2 {
	font-size: 44px;
	line-height: 52px;
}

body.home-index .section-intro p {
	font-size: 18px;
	line-height: 26px;
}

body.home-index .section-intro-eyebrow {
	padding: 5px 12px;
	border-radius: 60px;
	font-size: 12px;
	color: #009BA0;
	border: 1px solid #009BA0;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-block;
	margin-bottom: 10px;
	letter-spacing: 1px;
}


/* SECTION INTROFEATURES
   ------------------------- */
body.home-index .section-introfeatures {
	padding-bottom: 50px;
	border-bottom: 1px solid #DADADA;
}

body.home-index .introfeature-modules {
	padding-top: 50px;
}

body.home-index .introfeature-module {
	background-color: #E4FEFF;
	padding: 30px 0;
	text-align: center;
	border-radius: 16px;
	margin-bottom: 10px;
}

body.home-index .introfeature-module p {
	font-size: 18px;
	line-height: 24px;
	padding-top: 15px;
	font-weight: 600;
}

body.home-index .introfeature-module img {
	height: 40px;
}


/* SECTION PRESENTATION
   ------------------------- */
body.home-index .section-presentation {
	padding-top: 100px;
	padding-bottom: 100px;
}
@media only screen and (max-width : 767px) {
body.home-index .section-presentation {
	padding-top: 50px;
	padding-bottom: 50px;
}
}

body.home-index .section-presentation h2 {
	font-size: 44px;
	line-height: 48px;
	padding-top: 50px;
}

body.home-index .section-presentation p {
	font-size: 20px;
	line-height: 28px;
}

body.home-index .section-presentation ul {
	padding-top: 15px;
}
@media only screen and (max-width : 767px) {
body.home-index .section-presentation ul {
	padding-bottom: 20px;
}
}

body.home-index .section-presentation li {
	padding-bottom: 5px;
	font-size: 16px;
	/* keep the check icon on the first line when the label wraps */
	display: flex;
	align-items: flex-start;
}

body.home-index .section-presentation li img {
	width: 16px;
	margin-right: 10px;
	flex: 0 0 16px;
	margin-top: 4px;
}

body.home-index .section-presentation-pic img {
	display: block;
	width: 100% !important;
	height: 600px !important;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
}
@media (max-width: 767px) {
body.home-index .section-presentation-pic img {
	height: 420px !important;
}
}

body.home-index .section-presentation-left {
	padding-right: 50px;
}
@media only screen and (max-width : 767px) {
body.home-index .section-presentation-left {
	padding-right: 15px;
}
}


/* SECTION VIDEO
   -------------------------
   The original .section-video also sets margin-top/bottom: 70px and a
   different background image (video_bk.jpg); both are overridden here
   so the section matches the deliverable. */
body.home-index .section-video {
	background: url("../img/video_section_bk.png") repeat center top;
	background-size: contain;
	background-position: 0% 0%;
	padding-top: 70px;
	padding-bottom: 40px;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}
@media only screen and (max-width : 767px) {
body.home-index .section-video {
	background: none;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
}

body.home-index .video-wrapper {
	width: min(100%, 990px);
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}

body.home-index .video-wrapper iframe {
	width: 100%;
	height: 100%;
	display: block;
}

/* aspect-ratio fallback for older browsers: without it the wrapper
   collapses to zero height and the iframe disappears. */
@supports not (aspect-ratio: 16 / 9) {
body.home-index .video-wrapper {
	position: relative;
	padding-top: 56.25%;
	height: 0;
}
body.home-index .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
}
}


/* SECTION GETTING STARTED
   -------------------------
   The original .section-gettingstarted sets margin-top:-30px and
   text-align:center for the old video + step-diagram layout; both are
   reset here for the deliverable's card grid. */
body.home-index .section-gettingstarted {
	background-color: #FAFAFA;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-top: 0;
	text-align: left;
}
@media only screen and (max-width : 767px) {
body.home-index .section-gettingstarted {
	padding-top: 50px;
	padding-bottom: 50px;
}
}

body.home-index .section-gettingstarted-intro {
	padding-left: 150px;
	padding-right: 150px;
}
@media (max-width: 992px) {
body.home-index .section-gettingstarted-intro {
	padding-left: 15px;
	padding-right: 15px;
}
}

body.home-index .section-gettingstarted-modules {
	padding-top: 50px;
}

body.home-index .gettingstarted-module {
	background-color: white;
	border-top: 3px solid #00ADB3;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 2px 2px #DFE2E7;
	min-height: 220px;
}
@media only screen and (max-width : 767px) {
body.home-index .gettingstarted-module {
	margin-bottom: 30px;
}
}

body.home-index .gettingstarted-module h3 {
	font-size: 30px;
}

body.home-index .gettingstarted-module h4 {
	font-size: 20px;
}

/* The original sets .section-gettingstarted p { font-size:14px }, which
   would otherwise beat the module's own paragraph size. */
body.home-index .gettingstarted-module p {
	font-size: 17px;
	line-height: 25px;
}


/* SECTION BLURBS
   ------------------------- */
body.home-index .section-blurbs {
	padding-bottom: 140px;
}
@media only screen and (max-width : 767px) {
body.home-index .section-blurbs {
	padding-top: 50px;
	padding-bottom: 0;
}
}

body.home-index .section-blurbs h2 {
	font-size: 48px;
	line-height: 58px;
	text-align: left !important;
	padding-top: 300px;
}
@media only screen and (max-width : 992px) {
body.home-index .section-blurbs h2 {
	font-size: 30px;
	line-height: 35px;
	padding-top: 150px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .section-blurbs h2 {
	padding-top: 0;
	padding-bottom: 30px;
}
}

body.home-index .blurb-bk {
	position: absolute;
	width: 900px;
	left: 0;
}
@media only screen and (max-width : 992px) {
body.home-index .blurb-bk {
	position: absolute;
	width: 600px;
	left: 0;
}
}
@media only screen and (max-width : 767px) {
body.home-index .blurb-bk {
	display: none;
}
}

body.home-index .allblurbs {
	padding-top: 150px;
}
@media only screen and (max-width : 992px) {
body.home-index .allblurbs {
	padding-top: 0;
}
}

body.home-index .blurb {
	padding-right: 10px;
	height: 160px;
}
@media only screen and (max-width : 992px) {
body.home-index .blurb {
	padding-right: 0;
	height: 160px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .blurb {
	height: auto;
	padding: 0 15px 30px 15px;
}
}

body.home-index .blurb h4 {
	font-size: 20px;
	padding-bottom: 0;
}
@media only screen and (max-width : 992px) {
body.home-index .blurb h4 {
	margin-bottom: 5px;
}
}

body.home-index .blurb p {
	font-size: 15px;
	line-height: 22px;
}
@media only screen and (max-width : 992px) {
body.home-index .blurb p {
	font-size: 14px;
	line-height: 22px;
	color: #484848;
}
}


/* SECTION SECURITY
   -------------------------
   The original uses a security_bk.jpg background image and 100px
   padding; the design replaces it with flat orange, so background and
   padding are both overridden here. */
body.home-index .section-security {
	background: #FF7200;
	background-image: none;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 30px 50px 70px 50px;
	border-radius: 20px;
	color: white;
}
@media only screen and (max-width : 992px) {
body.home-index .section-security {
	padding: 50px 30px;
}
}

body.home-index .security-img {
	text-align: right;
}
@media only screen and (max-width : 992px) {
body.home-index .security-img img {
	opacity: 0.2;
}
}

body.home-index .section-security-intro {
	padding-bottom: 20px;
	margin-top: -90px;
}

body.home-index .section-security-intro h2 {
	color: white;
	font-size: 48px;
}
@media only screen and (max-width : 992px) {
body.home-index .section-security-intro h2 {
	font-size: 38px;
}
}

body.home-index .section-security-intro p {
	color: white;
	font-size: 22px;
	line-height: 32px;
}
@media only screen and (max-width : 992px) {
body.home-index .section-security-intro p {
	font-size: 18px;
	line-height: 26px;
}
}

body.home-index .security-bullets {
	padding-bottom: 30px;
}

body.home-index .security-bullets img {
	height: 16px;
	margin-right: 10px;
}

/* The original also forces GTwalsheim-Bold on these; the design uses
   the inherited body face. */
body.home-index .section-security li {
	color: white !important;
	font-size: 18px;
	line-height: 30px;
	font-family: inherit;
	display: flex;
	align-items: flex-start;
}
@media only screen and (max-width : 992px) {
body.home-index .section-security li {
	font-size: 14px;
	line-height: 20px;
}
}
@media only screen and (max-width : 767px) {
body.home-index .section-security li {
	font-size: 16px;
	line-height: 24px;
}
}

body.home-index .section-security .bt-white-out {
	border-radius: 60px;
	padding: 10px 20px;
}


/* SECTION PRACTICES
   ------------------------- */
body.home-index .section-practices h3 {
	font-size: 24px;
	line-height: 28px;
}

body.home-index .section-practices-left img {
	display: block;
	width: 100% !important;
	height: auto !important;
}
@media only screen and (max-width : 767px) {
body.home-index .section-practices-left img {
	padding-left: 30px;
	padding-right: 30px;
}
}

body.home-index .practices-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

body.home-index .label-practice {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-size: 13px;
	line-height: 1.2;
	border: 1px solid #00ADB3;
	border-radius: 60px;
	color: #1A202C;
	background-color: transparent;
	margin: 0;
	font-weight: normal;
	text-decoration: none;
}
/* Labels that link through to a vertical landing page. */
body.home-index a.label-practice:hover,
body.home-index a.label-practice:focus {
	background-color: #00ADB3;
	color: white;
	text-decoration: none;
}

body.home-index .section-practices-right {
	font-size: 16px;
	padding-top: 50px;
}

body.home-index .section-practices-right li {
	margin-bottom: 5px;
	display: flex;
	align-items: flex-start;
}

body.home-index .section-practices-right img {
	height: 16px;
	margin-right: 5px;
	flex: 0 0 16px;
	margin-top: 3px;
}

body.home-index .section-practices-right ul {
	margin-bottom: 15px;
}

body.home-index .section-practices-right p {
	font-size: 12px;
}


/* SECTION TESTIMONIAL
   -------------------------
   The original puts the teal background + radius on .section-testimonial
   itself; the design moves that onto the inner .section-testimonial-bann
   so the heading sits outside the banner. Reset the outer one here. */
body.home-index .section-testimonial {
	text-align: center;
	background-color: transparent;
	border-radius: 0;
	color: inherit;
	/* No margin-bottom: the design has none, and the original's 70px
	   stacked on top of the pricing section's 100px padding. */
	margin-bottom: 0;
}

body.home-index .google-eyebrow {
	border: 1px solid #00ADB3;
	padding: 5px 15px;
	border-radius: 60px;
	display: inline;
	color: #1A202C;
}

body.home-index .google-eyebrow img {
	margin-left: 6px;
	margin-right: 6px;
}

body.home-index .section-testimonial-intro {
	text-align: center;
	padding-bottom: 20px;
}

body.home-index .section-testimonial-intro h2 {
	padding-top: 20px;
}

body.home-index .section-testimonial-bann {
	border-radius: 20px;
	color: white;
	margin-bottom: 30px;
	background-color: #00ADB3;
	text-align: left;
	position: relative;
}

body.home-index .testimonial-mis {
	top: -5px;
	right: 0;
	width: 60px;
	position: absolute;
}
@media only screen and (max-width : 767px) {
body.home-index .testimonial-mis {
	display: none;
}
}

@media only screen and (max-width : 767px) {
body.home-index .section-testimonial-bann img {
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
}
body.home-index .section-testimonial-txt {
	padding-top: 20px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 40px;
}
}

body.home-index .section-testimonial-txt p {
	color: white;
	font-size: 32px;
	line-height: 42px;
	font-family: 'Neuton', serif;
	padding-top: 10px;
}
@media only screen and (max-width : 992px) {
body.home-index .section-testimonial-txt p {
	font-size: 20px;
	line-height: 25px;
}
}

body.home-index .section-testimonial-txt .fa-star {
	color: #f4c62f;
	font-size: 30px;
}
@media only screen and (max-width : 992px) {
body.home-index .section-testimonial-txt .fa-star {
	font-size: 20px;
}
}

body.home-index .section-testimonial-txt h4 {
	color: white;
	font-family: 'GTwalsheim-Regular', sans-serif;
}
@media only screen and (max-width : 992px) {
body.home-index .section-testimonial-txt h4 {
	font-size: 16px;
}
}


/* SECTION PRICING
   ------------------------- */
body.home-index .section-pricinghome {
	padding-top: 100px;
	padding-bottom: 100px;
}

body.home-index .section-pricinghome-intro {
	padding-bottom: 30px;
}

body.home-index .pricinghome-box-plan {
	background-color: #F1FEFF;
	border: 3px solid #00ADB3;
	padding: 30px;
	border-radius: 16px;
}

body.home-index .pricinghome-box-plan h3 {
	font-size: 30px;
}

body.home-index .pricing-features li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

body.home-index .pricing-features .check {
	text-align: right;
}

body.home-index .pricinghome-box-plan-bot {
	padding-top: 20px;
}

body.home-index .pricinghome-box-plan-bot .btn {
	display: block;
	margin-top: 20px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 60px;
}

body.home-index .pricinghome-box-plan-bot-num {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -1px;
}

body.home-index .pricinghome-box-addon {
	background-color: #FFF8F2;
	border: 3px solid #FF7200;
	padding: 30px;
	border-radius: 16px;
	margin-top: 40px;
}

body.home-index .pricinghome-box-addon-num {
	color: #FF7200;
	font-weight: bold;
}

body.home-index .pricinghome-box-addon-bot {
	padding-top: 20px;
}

body.home-index .pricinghome-box-addon-bot .btn {
	display: block;
	margin-top: 20px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 60px;
	color: white;
}


/* SECTION CTA BANNER
   ------------------------- */
body.home-index .section-ctabann {
	margin-bottom: 100px;
}

body.home-index .ctabann {
	padding: 40px 70px;
	border-radius: 20px;
	background-color: aliceblue;
}
@media only screen and (max-width : 767px) {
body.home-index .ctabann {
	padding: 40px 20px;
}
}

body.home-index .ctabann h2 {
	font-size: 40px;
	line-height: 46px;
}

body.home-index .ctabann p {
	font-size: 18px;
	line-height: 26px;
}

body.home-index .ctabann .btn {
	font-size: 18px;
	margin-top: 10px;
	padding: 18px 38px;
	border-radius: 60px;
}

body.home-index .ctabann-right {
	text-align: right;
}

body.home-index .ctabann-right img {
	height: 250px;
	max-width: 100%;
}
@media only screen and (max-width : 767px) {
body.home-index .ctabann-right {
	text-align: center;
	padding-top: 30px;
}
body.home-index .ctabann-right img {
	height: auto;
}
}


/* SECTION LOGOSTRIP
   -------------------------
   Heading follows the deliverable; the strip itself stays the live
   database-driven ticker rather than the static logostrip.png. */
body.home-index .section-logostrip {
	margin-top: 100px;
	margin-bottom: 100px;
	text-align: center;
}
@media only screen and (max-width : 767px) {
body.home-index .section-logostrip {
	margin-top: 50px;
	margin-bottom: 50px;
}
}

body.home-index .section-logostrip p {
	margin-bottom: 20px;
}


/* SECTION ADDONS
   ------------------------- */
body.home-index .section-addons {
	padding-top: 100px;
	padding-bottom: 70px;
	border-radius: 100px;
	background: linear-gradient(180deg, #FFF1E4 0%, rgba(255, 241, 228, 0) 100%);
}

body.home-index .section-addons-intro {
	padding-left: 150px;
	padding-right: 150px;
}
@media only screen and (max-width : 767px) {
body.home-index .section-addons-intro {
	padding-left: 0;
	padding-right: 0;
}
}

body.home-index .section-addons-modules {
	padding-top: 30px;
}

body.home-index .addons-module {
	background-color: white;
	border-left: 3px solid #FF7200;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 2px 2px #DFE2E7;
	margin-bottom: 30px;
}
@media only screen and (max-width : 992px) {
body.home-index .addons-module {
	min-height: 200px;
}
}

body.home-index .addons-module h4 {
	font-size: 20px;
}

body.home-index .addons-module p {
	font-size: 17px;
	line-height: 25px;
}


/* FOOTER
   -------------------------
   Unscoped: _footer.html.erb is shared by every frontend page, so the
   styling has to apply everywhere the partial renders. */
.footer-custom {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #1D2331;
	border-top-left-radius: 100px;
	color: white;
}
@media only screen and (max-width : 767px) {
.footer-custom {
	border-top-left-radius: 0;
}
}

.footer-custom h4 {
	color: #00C9D0;
	font-size: 16px;
	margin-bottom: 5px;
}

.footer-custom p {
	color: white;
}

.footer-custom a {
	color: white;
}

.footer-custom a:hover,
.footer-custom a:focus {
	color: #00C9D0;
}

@media only screen and (max-width : 767px) {
.footer-custom-col {
	margin-bottom: 20px;
}
}

/* Col 1 */
.footer-custom-col1 img {
	width: 160px;
	margin-bottom: 20px;
}

.footer-custom-col1 li img {
	height: 40px;
	width: 40px;
	margin-bottom: 0;
}

.footer-custom-col1 p {
	margin-bottom: 20px;
}

/* Col 5 */
.footer-custom-col5 .btn {
	padding: 8px 15px;
	font-size: 12px;
	border-radius: 60px;
}

.footer-custom-col5 ul {
	padding-bottom: 15px;
}

.footer-custom-col5 p {
	font-size: 12px;
}


/* Pricing add-on box: row separators + the info note that replaces
   the deliverable's "Get Add-Ons" button. */
body.home-index .pricinghome-box-addon .pricing-features li {
	padding-bottom: 10px;
	border-bottom: 1px solid #F3E2D3;
	align-items: center;
}
body.home-index .pricinghome-box-addon .pricing-features li:first-child,
body.home-index .pricinghome-box-addon .pricing-features li:last-child {
	border-bottom: 0;
}

body.home-index .pricinghome-box-addon-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 30px;
	padding: 16px 18px;
	border-radius: 12px;
	background-color: #FDEEE0;
	font-size: 14px;
	line-height: 20px;
	color: #1A202C;
}

body.home-index .pricinghome-box-addon-note .fa-info-circle {
	color: #FF7200;
	font-size: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
}


/* Pricing layout refinements to match the approved comp:
   - the two cards sit side by side, equal width and equal height
   - the add-on card is not offset downward (deliverable had margin-top:40px)
   - roomier feature rows, and a clearer price block */
body.home-index .section-pricinghome .row {
	display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width : 767px) {
body.home-index .section-pricinghome .row {
	display: block;
}
}

body.home-index .section-pricinghome .row > [class*='col-'] {
	display: flex;
}

body.home-index .pricinghome-box-plan,
body.home-index .pricinghome-box-addon {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 35px 40px;
}

/* Cancel the deliverable's downward offset so both cards align at the top. */
body.home-index .pricinghome-box-addon {
	margin-top: 0;
}
@media only screen and (max-width : 767px) {
body.home-index .pricinghome-box-addon {
	margin-top: 30px;
}
}

body.home-index .pricinghome-box-plan h3,
body.home-index .pricinghome-box-addon h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

body.home-index .pricinghome-box-plan .pricing-features li {
	margin-bottom: 14px;
	align-items: center;
}

/* Push the price block to the bottom so both cards end level. */
body.home-index .pricinghome-box-plan-bot {
	margin-top: auto;
}

body.home-index .pricinghome-box-plan-bot-num {
	line-height: 1;
}

/* The note sits at the bottom of the add-on card. */
body.home-index .pricinghome-box-addon-note {
	margin-top: auto;
}

/* "Pricing" column label: right-aligned header row, no separator. */
body.home-index .pricinghome-box-addon .pricing-features li:first-child {
	margin-bottom: 6px;
}

/* Trial line reads as its own line between the price and the button. */
body.home-index .pricinghome-box-plan-bot {
	font-size: 15px;
	line-height: 22px;
}

/* The original forces `.blurb h4 { text-transform: uppercase }`; the
   design uses sentence case ("Secure", not "SECURE"). */
body.home-index .blurb h4 {
	text-transform: none;
	color: #1A202C;
}

/* SECTION FAQ
   ------------------------- */
body.home-index .section-faq {
	padding-top: 90px;
	padding-bottom: 90px;
}

body.home-index .faq-intro {
	text-align: center;
	padding-bottom: 30px;
}

/* Security alignment/spacing fixes.
   The original centres .section-security-intro and stretches the CTA
   with `padding: 0 9%`; the design is left-aligned with a normal pill
   button, so both are reset here. */
body.home-index .section-security-intro {
	text-align: left;
}

body.home-index .section-security .btn {
	margin-top: 0;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 60px;
}

/* The icon sits top-right and overlaps the heading block; the design
   pulls the intro up under it via margin-top:-90px. Keep the icon a
   consistent size so that overlap lands predictably. */
body.home-index .security-img img {
	width: 120px;
	height: auto;
}
@media only screen and (max-width : 992px) {
body.home-index .security-img img {
	width: 90px;
}
}

/* Bullets: two even columns with the check aligned to the first line. */
body.home-index .security-bullets img {
	flex: 0 0 16px;
	margin-top: 6px;
}


/* Footer column headings must stay teal on every page, including the
   home page where body.home-index heading rules are more specific. */
body .footer-custom h4,
body.home-index .footer-custom h4 {
	color: #00C9D0 !important;
}

body .footer-custom p,
body.home-index .footer-custom p,
body .footer-custom a,
body.home-index .footer-custom a {
	color: white;
}

body .footer-custom a:hover,
body.home-index .footer-custom a:hover {
	color: #00C9D0;
}

/* The original adds `.section-addons h2 { padding-bottom: 50px }` for
   the old layout, which opens a large gap between the heading and its
   intro paragraph. The design has no such gap. */
body.home-index .section-addons h2 {
	padding-top: 0;
	padding-bottom: 0;
}

/* Stale offsets from the original stylesheet that the design omits.
   Found by diffing old vs new declarations per selector — these survive
   silently and shift sections out of alignment. */
body.home-index .hero-box h1 {
	margin-top: 0;
}

body.home-index .section-blurbs {
	margin-top: 0;
}

body.home-index .section-blurbs h2 {
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
}

body.home-index .section-addons {
	margin-top: 0;
}

/* The design's .bt-green sets `color: white`; the original omits it, so
   Bootstrap's `.btn-default { color: #333 }` wins and the label renders
   dark on the teal fill. Applies to every solid green button. */
body.home-index .bt-green,
body.home-index .bt-green:hover,
body.home-index .bt-green:focus,
body.home-index .bt-green:active {
	color: white;
}


/* ===================================================
   MOBILE LAYOUT (<= 767px)
   ---------------------------------------------------
   Single-column reading order, consistent gutters, and
   no horizontal overflow at 320 / 375 / 430px.
   =================================================== */
@media only screen and (max-width : 767px) {

/* Nothing may push the page wider than the viewport. */
body.home-index {
	overflow-x: hidden;
}

/* Consistent left/right gutters so text never touches the edges. */
body.home-index .container {
	padding-left: 20px;
	padding-right: 20px;
}

/* --- HERO ---------------------------------------- */

/* The desktop rule leaves a 100px void under the illustration. */
body.home-index .hero-content {
	padding-top: 20px;
	padding-bottom: 40px;
}

/* Bootstrap's .row uses -15px side margins, which cancel the
   container's padding and leave text ~5px from the edge. Zero the row
   margins and let the column keep its own 15px gutter. */
body.home-index .hero-content,
body.home-index .section-presentation .row,
body.home-index .section-practices .row,
body.home-index .section-pricinghome .row,
body.home-index .ctabann .row {
	margin-left: 0;
	margin-right: 0;
}

/* The 992px rule sets .hero-box { padding-top: 80px } and also applies
   at mobile widths — that plus .hero-content's padding is the large
   empty gap under the illustration. */
body.home-index .hero-box {
	margin-top: 0;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Natural reading order: rating -> headline -> description ->
   benefits -> CTA. The eyebrow is inline on desktop, which makes it
   wrap oddly in a narrow column, so give it its own block. */
body.home-index .google-eyebrow-hero {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 22px;
}

body.home-index .google-eyebrow-hero img {
	margin-left: 0;
	margin-right: 6px;
	vertical-align: middle;
}

/* Benefits sit below the description, full width — not a side column. */
body.home-index .hero-box-bullets {
	width: 100%;
	padding-bottom: 24px;
}

body.home-index .hero-box-bullets li {
	font-size: 15px;
	line-height: 22px;
	margin-bottom: 8px;
}

body.home-index .hero-box .btn {
	display: inline-block;
	width: auto;
	font-size: 16px;
	padding: 14px 28px;
}

/* Hero artwork: tighten the gap it leaves underneath. */
body.home-index .hero-art-mob {
	padding-top: 10px;
	margin-bottom: 0;
	line-height: 0;      /* kill inline-image descender space */
	font-size: 0;
}

body.home-index .hero-art-mob img {
	width: 100%;
	height: auto;
}

/* .figure is a fixed 360px, which overflows a 320px viewport. */
body.home-index .figure {
	width: 100%;
	max-width: 100%;
}

/* The original has `.hero img { padding: 20px 70px 0 }` for the old
   single hero image. It now hits EVERY image in the hero — the check
   bullets render 140px wide and the Google logo/stars get squashed.
   Reset it, then restore the intended inset on the artwork only. */
body.home-index .hero img {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	margin-top: 0;
}

body.home-index .hero-art-mob > img {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

body.home-index .hero-box-bullets img {
	width: 15px;
	max-width: 15px;
	height: auto;
}

body.home-index .google-eyebrow-hero img {
	width: auto;
	max-width: none;
	height: 16px;
}

/* Hero eyebrow: an inline box fragments across lines when it wraps,
   which splits the logo, stars and "reviews" onto separate rows.
   Flex keeps them on one baseline and lets the row wrap as a unit. */
body.home-index .google-eyebrow-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	white-space: normal;
}

body.home-index .google-eyebrow-hero img {
	margin: 0;
	flex: 0 0 auto;
	height: 16px;
	width: auto;
	vertical-align: middle;
}

/* --- TESTIMONIAL EYEBROW -------------------------- */

/* Same problem, worse: the bordered pill fragments into several
   boxes. Make it a block-level pill that wraps cleanly inside. */
body.home-index .google-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

/* Same trap as `.hero img`: the original sets
   `.section-testimonial-bann img { padding: 40px }` at mobile, which
   also lands on the eyebrow's logo/stars and collapses them. */
body.home-index .google-eyebrow img {
	margin: 0;
	flex: 0 0 auto;
	height: 16px;
	width: auto;
	max-width: none;
	padding: 0 !important;
}

/* --- INTROFEATURE TILES --------------------------- */

/* Two tiles per row on mobile (col-xs-6). Tighter padding and type so
   the labels fit the narrower column, and a min-height so tiles in the
   same row stay level whether their label wraps to one line or two. */
body.home-index .introfeature-module {
	padding: 20px 8px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

body.home-index .introfeature-module p {
	font-size: 14px;
	line-height: 19px;
	padding-top: 10px;
	margin-bottom: 0;
}

body.home-index .introfeature-module img {
	height: 32px;
}

/* --- ACCESSIBILITY WIDGET ------------------------- */

/* The widget is position:fixed bottom-right (54px + 20px inset), so it
   floats over whatever is at the bottom of the viewport. Two guards:
   reserve space at the end of the page, and keep the hero CTA clear of
   the bottom-right corner where the button sits. */
body.home-index .footer-custom {
	padding-bottom: 110px;
}

/* Hero CTA is the element most likely to sit under the button on a
   short viewport; keep it left-aligned and away from the corner. */
body.home-index .hero-box .btn {
	margin-right: 80px;
}

/* The accessibility toggle is position:fixed, so it necessarily floats
   over whatever scrolls beneath it. It cannot be "moved out of the
   way" by page CSS — instead make it smaller and semi-transparent
   until touched, so it stops obscuring headings mid-scroll. */
#accessibility-toggle {
	width: 44px !important;
	height: 44px !important;
	bottom: 14px !important;
	right: 14px !important;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

#accessibility-toggle:hover,
#accessibility-toggle:focus,
#accessibility-toggle:active {
	opacity: 1;
}

}