/* UI refresh 2026-10 of the public pages (O-94, mockup "5. Home, pricing, extensions, blog", owner 2026-10-05).
   Loaded after the theme (original-style.css) and domcop.css by layouts/marketing.blade.php. Sections:
   1 type, 2 header, 3 footer, 4 testimonials, 5 home, 6 blog article, 7 phones. Owner's rules for these pages:
   the visitor scans, so one idea per screen with an illustration beside it; one testimonial at a time with a
   large face; the tall header image stays. */

/* 1. Type: the application's face on the public pages too. */
body.landing-page,
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6,
body.landing-page p,
body.landing-page li,
body.landing-page td,
body.landing-page th,
body.landing-page input,
body.landing-page button,
body.landing-page .btn {
	font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
body.landing-page .hero-title,
body.landing-page .page-title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* 2. The header: the same bar as in the application, laid over the page's header image. */
.mk-hd {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
.mk-hd-in {
	display: flex;
	align-items: center;
	gap: 8px 22px;
	max-width: 1392px;
	min-height: 54px;
	margin: 0 auto;
	padding: 0 24px;
}
.mk-logo img {
	display: block;
	height: 36px;
	width: auto;
}
.mk-nav,
.mk-right {
	display: flex;
	align-items: center;
	gap: 2px;
}
.mk-right {
	margin-left: auto;
	gap: 6px;
}
.mk-hd a {
	color: #e6eaf6;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
.mk-nav > a,
.mk-right > a,
.mk-help > a {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 54px;
	padding: 0 12px;
}
.mk-hd a:hover,
.mk-hd a:focus {
	color: #ffffff;
}
.mk-nav > a.mk-on {
	color: #ffffff;
	font-weight: 600;
	box-shadow: inset 0 -3px 0 #ffffff;
}
.mk-search {
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	gap: 8px;
	max-width: 340px;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
	color: #e6eaf6;
}
.mk-hd .mk-search input,
.mk-hd .mk-search input:focus {
	flex: 1;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	/* the theme paints every text box dark on white */
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	caret-color: #ffffff;
	font-size: 13px;
}
.mk-search i {
	cursor: pointer;
}
.mk-search:focus-within {
	background: rgba(255, 255, 255, 0.24);
}
.mk-hd .mk-search input::placeholder {
	color: #c9d3ea;
	-webkit-text-fill-color: #c9d3ea;
	opacity: 1;
}
.mk-right > a.mk-signup {
	height: 34px;
	padding: 0 14px;
	border: 1px solid #ffffff;
	border-radius: 6px;
	color: #ffffff;
	font-weight: 600;
}
.mk-right > a.mk-signup:hover {
	background: #ffffff;
	color: #17204d;
}
.mk-help {
	position: relative;
}
.mk-help ul {
	display: none;
	position: absolute;
	top: 46px;
	right: 0;
	min-width: 210px;
	margin: 0;
	padding: 6px 0;
	border: 1px solid #dde3ec;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(23, 32, 77, 0.18);
	list-style: none;
}
.mk-help:hover ul,
.mk-help:focus-within ul {
	display: block;
}
.mk-help ul a {
	display: block;
	padding: 8px 16px;
	color: #1a2233;
}
.mk-help ul a:hover,
.mk-help ul a:focus {
	background: #f2f5f9;
	color: #1a2233;
}

/* 3. The footer: public/assets/css/public-footer.css (shared with the application layout for a visitor). */

/* 4. Testimonials: one at a time, the face first. */
section.testimonial .testimonial-holder .user img,
section.testimonial .testimonial-holder .user img.avatar {
	width: 152px;
	height: 152px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #dde3ec;
}
/* Owner 2026-10-05: the quotes are long, so they take the width of the page (the text column was 8 of 12 on the
   home page and the holder 1,100 px). */
section.testimonial .container {
	width: auto;
	max-width: 1320px;
}
section.testimonial .testimonial-holder {
	align-items: center;
	gap: 0 20px;
	max-width: 1240px;
	padding-right: 44px;
	box-sizing: border-box;
}
section.testimonial .testimonial-holder .user {
	flex: 0 0 auto;
}
section.testimonial .testimonial-holder .testimonial.content {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
}
/* 5. Pricing and the other pages with questions: the list takes more width too. */
body.landing-page .panel-group.accordion {
	max-width: 1100px;
}
section.testimonial .testimonial-holder .testimonial.content p {
	font-size: 18px;
	line-height: 1.6;
	color: #1a2233;
}

/* 7. Phones: one line of links under the logo, no look-up box, nothing wider than the screen. */
@media (max-width: 991px) {
	.mk-search {
		display: none;
	}
}
@media (max-width: 767px) {
	.mk-hd-in {
		flex-wrap: wrap;
		gap: 0 6px;
		min-height: 0;
		padding: 6px 12px 0;
	}
	.mk-logo img {
		height: 32px;
	}
	.mk-nav {
		order: 3;
		flex: 1 1 100%;
		justify-content: space-between;
		gap: 0;
	}
	.mk-nav > a,
	.mk-right > a,
	.mk-help > a {
		height: 40px;
		padding: 0 4px;
		font-size: 13.5px;
	}
	.mk-right > a.mk-signup {
		height: 32px;
		padding: 0 10px;
	}
	.mk-help ul {
		top: 38px;
	}
	section.testimonial .testimonial-holder .user img,
	section.testimonial .testimonial-holder .user img.avatar {
		width: 120px;
		height: 120px;
	}
	section.testimonial .testimonial-holder .testimonial.content p {
		font-size: 16px;
	}
	section.testimonial .testimonial-holder {
		padding-right: 0;
	}
	section.testimonial .testimonial-holder .testimonial.content {
		flex: 0 1 auto;
		width: 100%;
	}
}

/* 5. Home: one idea per screen. Bigger headings, a short text beside each illustration, room between the rows. */
body.landing-page #hero {
	padding-top: 8px;
}
body.landing-page .illustration-section .illustr-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 36px 0;
}
body.landing-page .illustration-section .illustr-block h5 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #17204d;
}
body.landing-page .illustration-section .illustr-block p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: #333c4d;
}
body.landing-page .about-section h3,
body.landing-page .five-steps > h3 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
}
body.landing-page h3.above-table {
	margin: 0 0 20px;
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	color: #17204d;
}
body.landing-page .features-section h5.heading,
body.landing-page article h5.heading {
	font-size: 17px;
	font-weight: 600;
	color: #17204d;
}
/* Owner 2026-10-05: the five ways take more width (the first one wrapped onto four lines in 817 px). */
body.landing-page #five-steps > .container {
	max-width: 1280px !important;
	width: auto;
}
body.landing-page #five-steps article p {
	font-size: 16.5px;
	line-height: 1.6;
}
body.landing-page .five-steps article h3 {
	font-weight: 300;
	color: #1f6fb5;
}
@media (max-width: 767px) {
	/* The two-row phone header needs its own room above the page title. */
	body.landing-page #hero {
		padding-top: 52px;
	}
	body.landing-page .illustration-section .illustr-block {
		padding: 18px 0;
	}
	body.landing-page .illustration-section .illustr-block h5 {
		font-size: 23px;
	}
	body.landing-page .illustration-section .illustr-block p {
		font-size: 16px;
	}
	body.landing-page .about-section h3,
	body.landing-page .five-steps > h3 {
		font-size: 24px;
	}
}

/* 6. Blog article: a reading column with the Contents box and the call to action beside it. */
.post-layout.post-layout-rail {
	display: grid;
	grid-template-columns: minmax(0, 720px) 300px;
	justify-content: center;
	gap: 0 56px;
	max-width: 1140px;
	padding-top: 40px;
}
.post-layout-rail .post-rail {
	position: sticky;
	top: 20px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.post-layout-rail .post-toc {
	margin: 0;
	padding: 18px 20px 12px;
	border: 1px solid #dfe6ef; /* owner 2026-10-05: no accent on the Contents box */
	background: #ffffff;
}
.post-layout-rail .post-toc ol {
	columns: 1;
	font-size: 14px;
}
/* The sign-up card (owner 2026-10-05: "make this widget look a little better"): the dark card of the ranking
   pages' side column, heading first, one full-width button. */
.post-layout-rail .post-cta {
	margin: 0;
	padding: 24px 22px 22px;
	border-radius: 10px;
	background: #17204d linear-gradient(160deg, #1d2a66 0%, #17204d 55%, #3a2452 100%);
	box-shadow: 0 10px 28px rgba(23, 32, 77, 0.18);
	text-align: left;
}
.post-layout-rail .post-cta strong {
	margin: 0 0 8px;
	font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #ffffff;
}
.post-layout-rail .post-cta p {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #c9d3ea;
	opacity: 1;
}
.post-layout-rail .post-cta .btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 16px;
	border-radius: 6px;
	background: #2f9e44;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #ffffff;
}
.post-layout-rail .post-cta .btn:hover,
.post-layout-rail .post-cta .btn:focus {
	background: #268a39;
	color: #ffffff;
}
.post-layout-rail .post-footer {
	grid-column: 1 / -1;
}
/* Owner 2026-10-05: "The blog text font for the article itself is much nicer on the original website": the article
   keeps the original site's faces, sizes and weights (Source Sans Pro text, Roboto headings). */
body.landing-page .post-body,
body.landing-page .post-body p,
body.landing-page .post-body li,
body.landing-page .post-body td,
body.landing-page .post-body th,
body.landing-page .post-body figcaption,
body.landing-page .post-body blockquote {
	font-family: 'Source Sans Pro', sans-serif;
}
body.landing-page .post-body h1,
body.landing-page .post-body h2,
body.landing-page .post-body h3,
body.landing-page .post-body h4,
body.landing-page .post-body h5,
body.landing-page .post-body h6 {
	font-family: 'Roboto', sans-serif;
}
@media (max-width: 991px) {
	.post-layout.post-layout-rail {
		display: flex;
		flex-direction: column;
		gap: 22px;
		padding-top: 22px;
	}
	.post-layout-rail .post-rail {
		display: contents;
	}
	.post-layout-rail .post-toc {
		order: -1;
	}
	.post-layout-rail .post-footer {
		order: 3;
	}
}

/* The Get started / Guides / Videos / Blog strip fits a phone without sideways scrolling. */
@media (max-width: 480px) {
	.learn-nav-inner {
		gap: 0;
		padding: 0 8px;
		justify-content: space-between;
	}
	.learn-nav a {
		padding: 12px 6px;
		font-size: 13px;
	}
	.learn-nav a i {
		display: none;
	}
}
@media (max-width: 767px) {
	/* On a phone every row reads the same way: the illustration, then its heading and one short text. */
	body.landing-page .illustration-section .illustr-block > div {
		width: 100%;
	}
	body.landing-page .illustration-section .illustr-block > div:has(> img.ill) {
		order: -1;
	}
	body.landing-page .illustration-section .illustr-block img.ill {
		max-width: 260px;
		margin: 0 auto 14px;
	}
	body.landing-page .illustration-section .illustr-block h5,
	body.landing-page .illustration-section .illustr-block p {
		text-align: center;
	}
}

/* Owner 2026-10-05: the pricing questions are all open, no accordion, no + and - icons. */
.panel-group.accordion.faq-open .panel-default {
	margin: 0;
	border: 0;
	border-bottom: 1px solid #e6ecf3;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
.panel-group.accordion.faq-open .panel-default:last-of-type {
	border-bottom: 0;
}
.panel-group.accordion.faq-open .panel-heading {
	padding: 0;
	border: 0;
	background: transparent;
}
.panel-group.accordion.faq-open h4.faq-q {
	margin: 0;
	padding: 22px 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #17204d;
}
.panel-group.accordion.faq-open .panel-body {
	padding: 0 0 22px;
	border: 0 !important;
}
.panel-group.accordion.faq-open .panel-body small {
	font-size: 15.5px;
	line-height: 1.65;
	color: #333c4d;
}

/* The Contents box of the guides and the Get Started page (above the text, not in a rail): no accent edge either. */
.post-toc {
	border-left: 1px solid #dfe6ef;
}
/* Owner 2026-10-05: the Contents numbers are plain text, not circles. */
.post-toc li {
	padding-left: 24px;
}
.post-toc li:before {
	content: counter(toc) '.';
	top: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: #5b6678;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: left;
}