/* Build AI Service template (templates/build-ai-service.php).
   Every rule hangs on a bas-* class, so this file is harmless elsewhere
   (it also loads in the block editor). Measures are the Figma's at 1464 px. */

.bas-section {
	--bas-blue: #1655a0;
	--bas-red: #ff1100;
	--bas-tint: rgba(0, 83, 170, 0.03);
	--bas-text: #646464;
	--bas-lato: "Lato", sans-serif;
	--bas-inter: "Inter", sans-serif;
	box-sizing: border-box;
	width: min(1309px, 100% - 40px);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: var(--bas-inter);
	color: #000;
}
.bas-section *,
.bas-section *::before,
.bas-section *::after {
	box-sizing: border-box;
}

/* Block editor: let the inner-blocks wrappers vanish from the layout and
   lift the classic-theme 840 px cap inside these sections. */
.editor-styles-wrapper .bas-section .block-editor-inner-blocks,
.editor-styles-wrapper .bas-section .block-editor-block-list__layout {
	display: contents;
}
.editor-styles-wrapper .bas-section,
.editor-styles-wrapper .bas-section .wp-block {
	max-width: none;
}
.editor-styles-wrapper .bas-section .wp-block {
	margin-left: 0;
	margin-right: 0;
}
.editor-styles-wrapper .bas-steps .bas-buttons {
	align-self: center;
}

/* Page rhythm: 76 px between sections, room for the fixed header on top. */
main.bas {
	padding: 155px 0 100px;
}
.bas-section + .bas-section {
	margin-top: 76px;
}

/* Type */
.bas-section h1,
.bas-section h2,
.bas-section h3,
.bas-section p {
	margin: 0;
	text-transform: none;
}
.bas-section .bas-h1,
.bas-section .bas-h2 {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 42px;
	line-height: 1.2;
	color: #000;
}
.bas-section .bas-h3 {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 25px;
	line-height: 28.2px;
	color: #000;
}
.bas-section p {
	font-family: var(--bas-inter);
	font-size: 19px;
	line-height: 1.21;
	font-weight: 400;
	color: var(--bas-text);
}
.bas-section p a {
	color: var(--bas-blue);
	text-decoration: underline;
	display: inline;
}

/* Button */
.bas-section .bas-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}
.bas-section .bas-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 29px;
	border-radius: 30px;
	background: var(--bas-blue);
	color: #fff;
	font-family: var(--bas-lato);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	border: 0;
}
.bas-section .bas-btn .wp-block-button__link:hover,
.bas-section .bas-btn .wp-block-button__link:focus-visible {
	background: #0f427f;
	color: #fff;
}
.bas-section .bas-btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--bas-blue);
	outline-offset: 3px;
}

/* Images (all optional) */
.bas-section .wp-block-image {
	margin: 0;
}
.bas-section .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero */
.bas-hero {
	gap: 76px;
}
.bas-hero .bas-hero__img img {
	aspect-ratio: 1309 / 715.5;
}

/* Text beside an image; without the image the text takes the full row. */
.bas-split {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}
.bas-split .bas-split__text {
	flex: 0 1 570px; /* 558 in the Figma; its last line runs to 567 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
}
.bas-split .bas-split__text:only-child {
	flex: 1 1 auto;
}
.bas-split__text .bas-h3 + p {
	margin-top: -13px; /* 20 px under a small heading */
}
.bas-split__text .bas-h2 + p {
	margin-top: -13px;
}
.bas-split__text p + p {
	margin-top: -10px; /* one blank line (23 px) between paragraphs */
}
.bas-split .bas-split__img {
	flex: 0 1 581.64px;
	min-width: 0;
}
.bas-split .bas-split__img img {
	aspect-ratio: 581.64 / 478.1;
}

/* Card grids: cards wrap and the last row centers, so a card can be
   duplicated or deleted freely. */
.bas-cards,
.bas-steps,
.bas-plans {
	gap: 50px;
}
.bas-steps {
	align-items: center;
}
.bas-steps .bas-h2 {
	align-self: stretch;
}
.bas-section .bas-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 17px;
	width: 100%;
}
.bas-grid--4 > *,
.bas-grid--4 > .block-editor-block-list__layout > * { flex: 0 0 calc((100% - 51px) / 4); }
.bas-grid--3 > *,
.bas-grid--3 > .block-editor-block-list__layout > * { flex: 0 0 calc((100% - 34px) / 3); }
.bas-grid--2 > *,
.bas-grid--2 > .block-editor-block-list__layout > * { flex: 0 0 calc((100% - 17px) / 2); }

.bas-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 36px 28px;
	border-radius: 10px;
	background: var(--bas-tint);
}
.bas-card p {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.15px;
}
.bas-card p + p {
	margin-top: 14px; /* one blank line (20 px) */
}
.bas-section .bas-card__title {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 20px;
	line-height: 28.2px;
	letter-spacing: -1px;
	color: #000;
}
.bas-card .bas-num,
.bas-card .bas-step__label {
	font-family: var(--bas-lato);
	font-weight: 700;
	line-height: 28.2px;
	letter-spacing: -1px;
	margin-bottom: 17px; /* 23 px to the title */
}
.bas-card .bas-num {
	font-size: 40px;
	color: var(--bas-blue);
}
.bas-step {
	border-top: 11px solid var(--bas-red);
}
.bas-card .bas-step__label {
	font-size: 20px;
	color: var(--bas-red);
}

/* Why trust us */
.bas-trust {
	align-items: center;
	gap: 53px;
	padding: 54px 48px;
	border-radius: 10px;
	background: var(--bas-tint);
}
.bas-trust .bas-h2 {
	align-self: stretch;
}
.bas-trust__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 35px 40px;
	border-radius: 20px;
	background: var(--bas-tint);
}
.bas-trust__card .bas-icon {
	margin-bottom: 32px;
}
.bas-trust__card .bas-icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.bas-section .bas-trust__title {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: #000;
}
.bas-trust__card p {
	padding: 10px 41px 10px 0;
	font-family: var(--bas-lato);
	font-size: 18px;
	line-height: 1.2;
	color: #000;
}

/* FAQ */
.bas-faq {
	align-items: center;
	gap: 53px;
}
.bas-faq .bas-h2 {
	align-self: stretch;
}
.bas-faq__list {
	width: calc(100% - 52px);
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fff;
}
.bas-faq__item + .bas-faq__item {
	border-top: 1px solid #e5e5e5;
}
.bas-faq__item summary {
	position: relative;
	display: block;
	padding: 20px 60px 20px 20px;
	font-family: var(--bas-inter);
	font-size: 18px;
	line-height: 26px;
	color: #222;
	cursor: pointer;
	list-style: none;
}
.bas-faq__item summary::-webkit-details-marker {
	display: none;
}
.bas-faq__item summary::after {
	content: "";
	position: absolute;
	right: 26px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid #222;
	border-bottom: 1.5px solid #222;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.2s ease;
}
.bas-faq__item[open] summary::after {
	transform: translateY(-25%) rotate(225deg);
}
.bas-faq__item summary:focus-visible {
	outline: 2px solid var(--bas-blue);
	outline-offset: -2px;
}
.bas-faq__item p {
	padding: 0 60px 20px 20px;
	font-size: 17px;
	line-height: 1.5;
}

/* Tablet */
@media (max-width: 1100px) {
	.bas-grid--4 > *,
.bas-grid--4 > .block-editor-block-list__layout > *,
	.bas-grid--3 > *,
.bas-grid--3 > .block-editor-block-list__layout > * { flex-basis: calc((100% - 17px) / 2); }
	.bas-section .bas-h1,
	.bas-section .bas-h2 { font-size: 36px; }
}
@media (max-width: 900px) {
	main.bas { padding-top: 120px; }
	.bas-section + .bas-section { margin-top: 56px; }
	.bas-split { flex-direction: column; align-items: stretch; gap: 32px; }
	.bas-split .bas-split__text,
	.bas-split .bas-split__img { flex: 1 1 auto; }
	.bas-hero { gap: 40px; }
	.bas-trust { padding: 40px 24px; }
	.bas-grid--2 > *,
.bas-grid--2 > .block-editor-block-list__layout > * { flex-basis: 100%; }
}
/* Phone */
@media (max-width: 640px) {
	.bas-grid--4 > *,
.bas-grid--4 > .block-editor-block-list__layout > *,
	.bas-grid--3 > *,
.bas-grid--3 > .block-editor-block-list__layout > * { flex-basis: 100%; }
	.bas-section .bas-h1,
	.bas-section .bas-h2 { font-size: 30px; }
	.bas-section .bas-h3 { font-size: 22px; }
	.bas-text p,
	.bas-split__text p { font-size: 17px; }
	.bas-trust__card { padding: 28px 24px; }
	.bas-trust__card p { padding-right: 0; }
	.bas-faq__list { width: 100%; }
}

/* Editor: no extra block margins between cards (the grid gap does it). */
.editor-styles-wrapper .bas-grid > .block-editor-block-list__layout > .wp-block {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Long-form landing pages: lead line, sub-headings, lists, intro/outro
   text around grids, option labels, plan cards, closing call to action.
   --------------------------------------------------------------------- */
.bas-section strong {
	font-weight: 700;
}
.bas-section .bas-lead {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.3;
	color: #000;
}
.bas-hero .bas-h1 + .bas-lead {
	margin-top: -56px; /* 20 px under the title */
}
.bas-hero .bas-lead {
	text-align: center;
}
.bas-section .bas-h4 {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 20px;
	line-height: 28.2px;
	letter-spacing: -0.5px;
	color: #000;
}
.bas-text .bas-h4 {
	margin-top: 12px;
}
.bas-text .bas-buttons {
	margin-top: 13px;
}
.bas-section .bas-note {
	font-style: italic;
}
.bas-section ul.wp-block-list {
	margin: 0;
	padding-left: 1.3em;
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bas-section ul.wp-block-list li {
	margin: 0;
	font-family: var(--bas-inter);
	font-size: 19px;
	line-height: 1.35;
	color: var(--bas-text);
}
.bas-card ul.wp-block-list {
	gap: 6px;
	margin-top: 8px;
}
.bas-card ul.wp-block-list + p,
.bas-card ul.wp-block-list + .bas-note {
	margin-top: 14px;
}
.bas-section .bas-h1,
.bas-section .bas-h2,
.bas-section .bas-lead {
	text-wrap: balance;
}
.bas-card ul.wp-block-list li {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.15px;
}

/* Centered text before and after a grid. */
.bas-section .bas-intro,
.bas-section .bas-outro {
	align-self: center;
	width: 100%;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.bas-section .bas-intro p,
.bas-section .bas-outro p {
	text-align: center;
}
.bas-section .bas-h2 + .bas-intro {
	margin-top: -26px;
}
.bas-section .bas-outro .bas-buttons {
	justify-content: center;
}

/* "Option 1" style label on a card. */
.bas-card .bas-label {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 20px;
	line-height: 28.2px;
	letter-spacing: -0.5px;
	color: var(--bas-blue);
	margin-bottom: 17px;
}

/* Plan cards: name, price, tagline, includes list, button at the bottom. */
.bas-plan {
	border-top: 11px solid var(--bas-blue);
}
.bas-section .bas-plan .bas-card__title {
	font-size: 24px;
}
.bas-card .bas-price {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -1px;
	color: var(--bas-blue);
	margin: 4px 0 6px;
}
.bas-card .bas-plan__tag {
	font-family: var(--bas-lato);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: #000;
}
.bas-plan .bas-buttons {
	margin-top: auto;
	padding-top: 24px;
}
.bas-plan .bas-btn .wp-block-button__link {
	font-size: 16px;
}

/* Closing call to action with the contact form. */
.bas-cta {
	align-items: center;
	padding: 54px 48px;
	border-radius: 10px;
	background: var(--bas-tint);
	text-align: center;
	scroll-margin-top: 120px;
}
.bas-cta > .bas-h2 {
	align-self: stretch;
	margin-bottom: 6px;
}
.bas-cta p {
	max-width: 900px;
	text-align: center;
}
.bas-cta .bas-buttons {
	justify-content: center;
	margin-top: 13px;
}
.bas-cta .gform_wrapper,
.bas-cta .wp-block-gravityforms-form {
	width: 100%;
	max-width: 900px;
	margin-top: 20px;
	text-align: left;
}

/* The form's submit button looks like the page's buttons. */
.bas-cta .gform_wrapper .gform_footer {
	margin-top: 24px;
	padding: 0;
}
.bas-cta .gform_wrapper .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 9px 36px;
	border: 0;
	border-radius: 30px;
	background: var(--bas-blue);
	color: #fff;
	font-family: var(--bas-lato);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.bas-cta .gform_wrapper .gform_footer .gform_button:hover,
.bas-cta .gform_wrapper .gform_footer .gform_button:focus-visible {
	background: #0f427f;
}
.bas-cta .gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 2px solid var(--bas-blue);
	outline-offset: 3px;
}
.bas-cta .gform_wrapper .gform_footer .gform_button:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Editor: the add buttons under the grids, no generic appender there. */
.editor-styles-wrapper .bas-grid > .block-editor-block-list__layout > .block-list-appender,
.editor-styles-wrapper .bas-faq__list > .block-editor-block-list__layout > .block-list-appender {
	display: none;
}
.bas-add {
	display: flex;
	justify-content: center;
	align-self: stretch;
}
.bas-add__button {
	padding: 8px 20px;
	border: 1px dashed #1655a0;
	border-radius: 30px;
	background: #fff;
	color: #1655a0;
	font: 500 14px/1.4 "Inter", sans-serif;
	cursor: pointer;
}
.bas-add__button:hover,
.bas-add__button:focus-visible {
	background: #1655a0;
	color: #fff;
}

@media (max-width: 900px) {
	.bas-cta { padding: 40px 24px; }
	.bas-hero .bas-h1 + .bas-lead { margin-top: -20px; }
}
@media (max-width: 640px) {
	.bas-section .bas-lead { font-size: 21px; }
	.bas-hero .bas-h1 + .bas-lead { margin-top: -24px; }
	.bas-section ul.wp-block-list li { font-size: 17px; }
	.bas-card ul.wp-block-list li { font-size: 14px; }
}