/*
Theme Name: AIBotKit Child
Template: twentytwentyfive
Version: 1.1.0
*/

/*
 * Header breakpoint — matches the Elementor build, not core's default.
 *
 * Elementor collapsed the header to a hamburger at <= 1024px (its `tablet`
 * breakpoint, measured from kit post 6 in U3). core/navigation's
 * `overlayMenu: "mobile"` collapses at 600px instead, which left 601-1024px
 * rendering a cramped full nav plus two shrunken CTA buttons -- at 390px the
 * button labels wrapped to one letter per line.
 *
 * Rather than fight core's own 600px media queries, the header carries two
 * sibling groups and this file picks one:
 *
 *   .abk-nav-desktop  nav + CTA buttons, `overlayMenu: "never"`   >= 1025px
 *   .abk-nav-mobile   hamburger only,    `overlayMenu: "always"`  <= 1024px
 *
 * The mobile groups reference the dedicated mobile nav posts (5883 / 5885),
 * which already carry the CTAs as menu items -- exactly as the Elementor
 * mobile menu did. Those two posts were built in U4 and referenced by nothing
 * until now.
 *
 * Selectors are deliberately two classes deep. Core emits
 * `body .is-layout-flex { display: flex }` -- specificity 0,1,1 -- so a single
 * `.abk-nav-*` class (0,1,0) loses on specificity no matter where it sits in the
 * cascade. `.wp-block-group.abk-nav-*` is 0,2,0 and wins outright.
 */

.wp-block-group.abk-nav-mobile {
	display: none;
}

@media (max-width: 1024px) {

	.wp-block-group.abk-nav-desktop {
		display: none;
	}

	.wp-block-group.abk-nav-mobile {
		display: flex;
	}
}

/*
 * CTA labels must never wrap. `flexWrap: nowrap` on the buttons group stops the
 * buttons themselves reflowing, but without this a narrow flex line still
 * compresses each button below its text width and breaks the label mid-word.
 */
.wp-block-buttons .wp-block-button__link {
	white-space: nowrap;
}


/*
 * Reclaim content link colour from the saaspricing plugin.
 *
 * saaspricing 1.2.1 (third-party, Elementor pricing widgets) ships this in its
 * button section — assets/css/style.css:559:
 *
 *   .saaspricing-primary-btn, .saaspricing-primary-btn:hover,
 *   .wp-block-post-content a:where(:not(.wp-element-button)),
 *   a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):hover
 *       { color: var(--saaspricing-white); }
 *
 * Two of those selectors are far broader than the button they were written for:
 * `.wp-block-post-content a:where(...)` paints EVERY link in post content white,
 * and `a:not([href])` paints every href-less anchor white. On a block theme that
 * is every link on every converted page — white on a white page, invisible.
 *
 * It went unnoticed until U8a because Elementor-rendered links carry their own
 * colours from the Elementor kit, which outrank it. The first natively converted
 * page exposed it: the support email on refund-policy rendered invisible.
 *
 * The plugin's selector is 0,1,1 and theme.json's link rule is only
 * `a:where(:not(.wp-element-button))` at 0,0,1, so the plugin wins on specificity
 * regardless of load order. Prefixing with `:root` makes ours 0,2,1 and settles it
 * without touching a third-party plugin.
 *
 * Revisit at U10: saaspricing is an Elementor add-on and should leave with it.
 *
 * A `core/html` payload styles its own buttons in its own inline <style>, at one
 * class -- 0,1,0. Ours at 0,2,1 beat those too, so `.sol-btn-primary` on
 * smart-chat-widget rendered #0F6B4E text on its #1E9E5E fill: 2.4:1, and it
 * read as "the button text is not white". Anchors whose class carries `btn`
 * are therefore excluded and left to their own stylesheet. The exclusion sits
 * inside `:where()`, which adds no specificity, so the rule still outranks
 * saaspricing at 0,1,1.
 */

:root .wp-block-post-content a:where(:not(.wp-element-button, [class*="btn"])),
:root .entry-content a:where(:not(.wp-element-button, [class*="btn"])) {
	color: var(--wp--preset--color--brand-primary-aa);
}

:root .wp-block-post-content a:where(:not(.wp-element-button, [class*="btn"])):hover,
:root .entry-content a:where(:not(.wp-element-button, [class*="btn"])):hover {
	color: var(--wp--preset--color--brand-secondary);
}

/*
 * Make the outline button match the filled one.
 *
 * core/button's `is-style-outline` hard-codes its own padding:
 *
 *   .wp-block-button.is-style-outline > .wp-block-button__link {
 *       border: 2px solid;
 *       padding: calc(.667em + 2px) calc(1.333em + 2px);
 *   }
 *
 * That overrides `styles.elements.button.spacing` in theme.json, so "Log in"
 * rendered 52px tall next to a 44px "Start for Free". The padding here is the
 * filled button's 12px/24px minus the 2px border on each side, so both buttons
 * end up exactly 44px.
 *
 * Specificity: core's selector is 0,2,1. The `:root` prefix makes this 0,3,1 so
 * it wins without !important.
 */

:root .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 10px 22px;
}

/**
 * Rank Math FAQ block as an accordion.
 *
 * The block renders a flat always-open list; assets/js/faq-accordion.js adds the
 * button, `aria-expanded` and `hidden`. Everything below is the presentation of
 * that structure, and every rule is scoped to a class the script adds — so with
 * JavaScript off the block keeps the plain readable list it ships with, rather
 * than a half-styled one.
 */

.abk-faq-accordion .abk-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--brand-bg-1);
}

.abk-faq-accordion .rank-math-question {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	/* The question is an <h3>, so it inherits the browser's bold (700). At the
	 * large preset size that reads as a shout -- nine of them stacked is a wall
	 * of heavy text. 500 keeps the question distinct from the answer without
	 * competing with the section heading above it. */
	font-weight: 500;
}

/* The button carries the question text, so it has to fill the row and align left;
   a bare <button> does neither. */
.abk-faq-accordion .abk-faq-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1rem 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* A chevron drawn in CSS rather than an icon font: the only other option here is
   Font Awesome, which leaves with Elementor at U10. */
.abk-faq-accordion .abk-faq-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 150ms ease;
}

.abk-faq-accordion .abk-faq-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.abk-faq-accordion .abk-faq-toggle::after {
		transition: none;
	}
}

.abk-faq-accordion .rank-math-answer {
	padding-bottom: 1rem;
}

.abk-faq-accordion .rank-math-answer > :first-child {
	margin-top: 0;
}

.abk-faq-accordion .rank-math-answer > :last-child {
	margin-bottom: 0;
}

/**
 * support-page's four-card grid.
 *
 * The Elementor original drew thin rules between the quadrants rather than
 * spacing them apart. `core/group`'s grid layout has no divider option, and its
 * `columnCount` emits `repeat(2, minmax(0, 1fr))` at *every* width — there is no
 * breakpoint in core for it — so a 2-up grid stays 2-up on a 390px phone.
 *
 * Both are fixed here. The single-column breakpoint is 781px, which is where
 * core collapses `core/columns`, so the grid and the column beside it change
 * shape at the same width instead of a step apart.
 *
 * Specificity: two classes, per the rule that a single class loses to core's
 * `body .is-layout-grid`.
 */

.wp-block-group.abk-support-grid {
	gap: 0;
}

.wp-block-group.abk-support-grid > * {
	border-color: #e6e6e6;
	border-style: solid;
	border-width: 0;
}

@media (min-width: 782px) {
	/* Left-hand cells get the vertical rule, the top row the horizontal one. */
	.wp-block-group.abk-support-grid > :nth-child(odd) {
		border-right-width: 1px;
	}

	.wp-block-group.abk-support-grid > :nth-child(-n+2) {
		border-bottom-width: 1px;
	}
}

@media (max-width: 781px) {
	.wp-block-group.abk-support-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column, so every card but the last is separated by a horizontal rule. */
	.wp-block-group.abk-support-grid > :not(:last-child) {
		border-bottom-width: 1px;
	}
}

/**
 * Preserved HTML payloads carry fixed-width iframes.
 *
 * The chatbot and onboarding embeds are `<iframe width="600">`, carried across
 * verbatim from Elementor because they are `core/html` payloads. Elementor's
 * container clipped them; a core/group does not, so at 390px the page gained a
 * 630px scroll width — content the reader has to swipe sideways to reach.
 *
 * Width only. Leaving the height alone lets the embed letterbox rather than
 * distort, and these are third-party apps whose own layout we do not control.
 *
 * Specificity: core's constrained-layout rule
 * `.is-layout-constrained > :where(:not(.alignleft)…)` is 0,1,0 and sets
 * max-width to the 1280px content size. `main iframe` is 0,0,2 and loses to it
 * silently — the same trap as the block-layout rule in the header. One class
 * plus one element is 0,1,1 and wins.
 */

.entry-content iframe,
.wp-block-post-content iframe {
	max-width: 100%;
}

/**
 * The one preserved payload that bleeds full width.
 *
 * `quotation-generator`'s demo section is a `core/html` payload carrying its own
 * `<style>` with the classic full-bleed trick:
 *
 *   .abk-demo-section { width: 100vw; margin-left: calc(-50vw + 50%); }
 *
 * Under a block theme the negative margin is overridden — core's constrained
 * layout writes its own margins on every non-aligned child — so the 100vw width
 * survives on its own and the page gained a 1330px scroll width at a 1280px
 * viewport, and 420px at 390px. Overflowing at *both* ends, which is why the
 * desktop screenshot did not give it away.
 *
 * Rebuilt against the theme's root padding instead of the viewport. That spans
 * exactly the parent's padding box, so it is edge to edge without 100vw's
 * scrollbar problem. `!important` matches what it is overriding.
 *
 * The only payload on the site that does this — checked across all 50.
 */

.entry-content .abk-demo-section {
	width: auto !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}

/* The negative margins alone were not enough on `quotation-generator`. Core's
 * constrained layout also writes `max-width: 1280px` on every non-aligned
 * child, so the band was pulled left to x=0 and then capped at 1280 — a
 * 160px white gutter down the right-hand side. That selector is wrapped in
 * `:where()` and carries zero specificity, so this needs no `!important`. */
.entry-content .abk-demo-section {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * U8d — blog templates (templates/home.html, archive.html, single.html)
 *
 * These replace Elementor theme-builder templates 2662 (archive) and 3320
 * (single). 3320 ran in *canvas* mode, so single posts rendered with no site
 * header and no footer at all; the block templates put the real chrome back.
 *
 * Every rule that fights a block layout is at least two classes deep. Core
 * emits `body .is-layout-flex { display: flex }` at 0,1,1 and
 * `.is-layout-constrained > :where(...)` with `margin-left: auto !important`,
 * so a one-class rule loses silently. See STATE.md, standing procedure 4.
 * ------------------------------------------------------------------------ */

/* Post title band. The Elementor original was a #026F34 gradient fading to
 * near-black over a 250px minimum height; reproduced here rather than flattened
 * to a palette solid, because it is the one piece of the old single template
 * that reads as deliberate design. */
.wp-block-group.abk-post-hero {
	background-image: linear-gradient(180deg, #026F34 0%, #0B2A20 100%);
	min-height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-block-group.abk-post-hero .wp-block-post-title {
	margin: 0;
}

.wp-block-group.abk-post-body .wp-block-post-featured-image img {
	border-radius: 12px;
	width: 100%;
	height: auto;
}

/* The date sits directly above the body copy; give it room without a margin
 * collapse fight with the first paragraph of post-content. */
.wp-block-group.abk-post-body .wp-block-post-date {
	margin-bottom: 2rem;
}

/* Post navigation: two links that must wrap, not overlap, on a phone. */
.wp-block-group.abk-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
	font-weight: 600;
}

.wp-block-group.abk-post-nav .wp-block-post-navigation-link a {
	text-decoration: none;
}

.wp-block-group.abk-post-nav .wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.wp-block-group.abk-post-nav .wp-block-post-navigation-link {
		max-width: 100%;
	}
}

/* Blog cards. The featured image is the first child and must reach the card's
 * rounded corners, so the card carries no top padding and the image clips. */
.wp-block-group.abk-blog-card {
	overflow: hidden;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.wp-block-group.abk-blog-card .wp-block-post-featured-image {
	margin-left: -1.25rem;
	margin-right: -1.25rem;
}

.wp-block-group.abk-blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-group.abk-blog-card .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-group.abk-blog-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wp-block-group.abk-blog-card .wp-block-read-more:hover {
	text-decoration: underline;
}

/* A card with no featured image must not collapse to a ragged height next to
 * one that has an image. */
.wp-block-group.abk-blog-card {
	height: 100%;
}

/* Wide tables must scroll, not crush. Core sets `overflow-x: auto` on the
 * figure but the table itself is `width: 100%`, so it shrinks to fit instead
 * of overflowing and there is nothing to scroll. At 390px a 7-column
 * comparison table was rendering 38px per cell.
 *
 * A min-width larger than the mobile content column gives the figure something
 * to scroll; on desktop the table is already wider than this, so nothing moves.
 * Two classes deep so core's own `.wp-block-table table` rule cannot win. */
.wp-block-post-content .wp-block-table table,
.entry-content .wp-block-table table {
	min-width: 34rem;
}

.wp-block-post-content .wp-block-table,
.entry-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* The comparison tables carry no <thead>, so the first row is the header row
 * by convention only. Give it weight and a rule so it reads as one. */
.wp-block-post-content .wp-block-table tr:first-child td,
.wp-block-post-content .wp-block-table thead th {
	border-bottom: 2px solid currentColor;
	vertical-align: bottom;
}

/* ---------------------------------------------------------------------------
 * U9 — contact-us (1623)
 *
 * The Elementor original painted a #008858 -> white gradient on a container
 * with a fixed height while the form overflowed it, so the green stopped in a
 * hard horizontal line partway down the form. Reproduced here as a gradient
 * across the whole section, which is what it was evidently meant to be.
 * ------------------------------------------------------------------------ */
.wp-block-group.abk-contact-hero {
	/* The fade has to finish in the gap between the intro paragraph and the first
	 * form label, or one of them sits on a mid-tone that no single text colour
	 * reads against.
	 *
	 * This was originally pinned to percentages from the TOP, and it drifted off
	 * target -- the band ended up cutting through the intro's last line. The
	 * percentage is not stable, because the hero's height and the intro's wrap
	 * both change with the viewport. Measured across 360-1440px:
	 *
	 *   intro ends, from the TOP       24.6% .. 36.3%   <- swings 12 points
	 *   intro ends, from the BOTTOM    662px (<768)     <- constant
	 *                                  482px (>=768)    <- constant
	 *
	 * So anchor the gradient to the BOTTOM in pixels. `to top` makes every stop
	 * an offset from the bottom edge, and the two stable numbers become the two
	 * stops. The form's own height is what sets them, and that does not depend
	 * on how long the intro copy is -- which is exactly what drifted last time.
	 *
	 *   0 .. 452px    white, behind the form (10px clearance above the first label)
	 *   452 .. 482px  the fade, wholly inside the gap
	 *   above 482px   solid green, behind the heading and intro
	 *
	 * The breakpoint is 768px, where the form stops stacking. Re-measure only if
	 * the FORM's field count changes; intro copy edits no longer matter. */
	background-color: #008858;
	background-image: linear-gradient(to top,
		#FFFFFF 0, #FFFFFF 632px, #E3FFF6 647px, #008858 662px);
}

@media (min-width: 768px) {
	.wp-block-group.abk-contact-hero {
		background-image: linear-gradient(to top,
			#FFFFFF 0, #FFFFFF 452px, #E3FFF6 467px, #008858 482px);
	}
}

/* Fluent Forms ships its own control styling. These four rules only carry the
 * site's type and brand colour onto it; nothing here changes layout. */
.abk-contact-hero .fluentform .ff-el-input--label label {
	font-weight: 600;
	color: var(--wp--preset--color--brand-heading);
}

.abk-contact-hero .fluentform .ff-el-form-control {
	border-radius: 8px;
	border: 1px solid rgba(20, 59, 45, 0.25);
	background: #FFFFFF;
	padding: 0.7rem 0.9rem;
}

.abk-contact-hero .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--brand-primary-aa);
	outline: 2px solid var(--wp--preset--color--brand-primary-aa);
	outline-offset: 1px;
}

.abk-contact-hero .fluentform .ff-btn-submit {
	border-radius: 8px;
	padding: 0.8rem 1.6rem;
	font-weight: 600;
	min-height: 44px;
}

/* The intro paragraph and heading sit on the solid part of the gradient; the
 * form sits on the light part, so its labels must not inherit the white. */
.abk-contact-hero .fluentform,
.abk-contact-hero .fluentform p {
	color: var(--wp--preset--color--brand-text);
}

/* Contact details row. Four cells: social, address, email, phone. Grid cells
 * stretch by default, which centred the social icons against the headings
 * beside them. */
.wp-block-group.abk-contact-details > .wp-block-group {
	align-items: start;
}

.wp-block-group.abk-contact-details .wp-block-social-links {
	margin-top: 0.25rem;
}

.wp-block-group.abk-contact-details a {
	color: var(--wp--preset--color--brand-primary-aa);
}

/* Body type is pinned to Roboto in theme.json, not DM Sans.
 *
 * Elementor's kit (post 6) set `body_typography_font_family: Roboto` and that
 * stylesheet outranked theme.json on every page. Production renders in Roboto
 * today — verified against aibotkit.io — so leaving theme.json on DM Sans would
 * have changed the body font of the whole site the moment Elementor was removed,
 * silently and after sign-off. Alpesh chose Roboto, 2026-08-25, so U10 changes
 * nothing visible.
 *
 * Headings and navigation are DM Sans with and without Elementor, so they were
 * left alone. Buttons inherit the body font and follow it.
 *
 * U3 chose DM Sans by measurement; that decision now applies to headings only.
 * Moving the body back to DM Sans is a deliberate brand change, not a migration
 * step — one line in theme.json when it is wanted.
 */

/* Recovered Elementor CSS carries fixed pixel widths that assumed Elementor's
 * container widths. `.chatbot-wrapper` is `width: 360px` inside a wrapper that is
 * 234px at a 390px viewport, so it ran 48px past the edge of the screen on the
 * homepage, ai-chatbot-for-wordpress and smart-chat-widget, and quotation-generator
 * overflowed by 13px the same way.
 *
 * Capping descendants of the recovered-CSS wrappers keeps the intended width
 * wherever there is room and lets it shrink where there is not. Excludes SVG
 * internals, where `max-width` on a child breaks the drawing, and anything
 * absolutely positioned, which is placed against its own containing block.
 *
 * Page-level `overflow-x: hidden` was deliberately NOT used: it hides the symptom,
 * makes the next one invisible, and traps horizontal scroll inside real scrollers
 * like the wide comparison tables.
 */
/* `.stacking-cards-wrapper` is excluded because its own 980px cap is stricter
 * than 100%, and this guard outranks it: the `:not()` chain puts this
 * selector at roughly 0,4,2, so a two-class rule on a descendant loses. */
.wp-block-group[class*="abk-el-"] :not(svg):not(svg *):not(.stacking-cards-wrapper):not([style*="position:absolute"]):not([style*="position: absolute"]) {
	max-width: 100%;
}

.wp-block-group[class*="abk-el-"] iframe {
	max-width: 100%;
}

/* quotation-generator, two separate escapes at 390px.
 *
 * 1. `.best-seller-ribbon` is `position: absolute; right: -64px; transform:
 *    rotate(45deg)` — a diagonal ribbon designed to be clipped by the card it sits
 *    on. Elementor's container supplied the clipping; the block group does not, so
 *    the ribbon hung 13px past the screen edge.
 * 2. `.abk-right` computed 406px inside a 390px flex column — 390 plus its own
 *    16px of padding, i.e. content-box sizing.
 */
.wp-block-group.pricing-plan-card {
	position: relative;
	overflow: hidden;
}

.abk-demo-section .abk-right,
.abk-demo-container .abk-right {
	box-sizing: border-box;
	max-width: 100%;
}

/* support-page: the search row looked like it "added width" on mobile.
 *
 * It does not. Nothing overflows the viewport at any width from 320 to 1440 --
 * measured. The real fault is a mismatched inset that only shows once the
 * columns stack (below 782px):
 *
 *   hero heading, paragraph, search form   left 30px, width 330px
 *   Getting Started / Pricing / FAQ cards  left 60px, width 270px
 *
 * Each card group carries its own 30px padding on top of the 30px the section
 * already has. The hero has no such wrapper, so it sits 30px further out. The
 * search form is a solid, high-contrast shape, so it is where that 30px
 * becomes obvious -- it reads as the box breaking out of the card.
 *
 * The card groups are transparent and border-free, so their horizontal padding
 * buys nothing while stacked. Remove it there and every left edge on the page
 * lines up at 30px. The vertical padding stays -- it is the gap between the
 * stacked cards.
 *
 * `!important` is load-bearing here, and is not laziness. That padding is an
 * INLINE style attribute on the block --
 * `padding-left:var(--wp--preset--spacing--50)` -- set in the editor and
 * written into post_content. No selector at any specificity beats an inline
 * style; `!important` is the only mechanism CSS provides. Editing the block
 * markup instead would not work, because the padding is correct above 782px,
 * where the grid is two columns and it acts as the gutter. That is also why
 * the rule is bounded to the stacked state.
 */
@media (max-width: 781px) {
	.abk-support-grid > .wp-block-group.has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Blog card: the title rendered green and looked like body copy that happened
 * to be a link.
 *
 * `wp:post-title` carries `textColor: brand-heading`, and the <h2> does get
 * that colour -- measured rgb(20,59,45). But `isLink: true` puts an <a> inside
 * it, and the link colour wins on the <a>: rgb(15,107,78). The heading's own
 * colour never reaches the text, because the text is not in the heading, it is
 * in the anchor. Colour the anchor instead, and keep green for hover so the
 * card still reads as clickable.
 *
 * The featured image now sits 1.25rem below the card's top edge (set in
 * templates/home.html and templates/archive.html, not here), so it needs a
 * radius of its own -- a square image inside a 12px-rounded card looks like a
 * mistake once it is no longer flush to the edges. */
.abk-blog-card .wp-block-post-title a {
	color: var(--wp--preset--color--brand-heading);
	text-decoration: none;
}

.abk-blog-card .wp-block-post-title a:hover,
.abk-blog-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--brand-primary-aa);
	text-decoration: underline;
}

.abk-blog-card .wp-block-post-featured-image img {
	border-radius: 8px;
}

/* Focus rings: keyboard only.
 *
 * Clicking anything -- a button, a link, a card title -- left a 2px near-black
 * rectangle around it. Two rules stack to produce that:
 *
 *   theme.json  styles.elements.link/button :focus
 *               -> 2px solid var(--wp--preset--color--brand-ink)  (#1A1A1A)
 *   twentytwentyfive/style.css line 27
 *               -> :where(.wp-site-blocks *:focus) { outline: 2px solid }
 *
 * `:focus` fires for the mouse as well as the keyboard, so every click painted
 * the ring. `:focus-visible` fires only when the browser judges the ring is
 * genuinely needed -- keyboard navigation, and never a plain mouse click.
 *
 * DO NOT "fix" this with a blanket `outline: none`. That would remove the ring
 * for keyboard users too, and a keyboard user with no visible focus cannot see
 * where they are on the page. The ring is not removed here; it is made
 * conditional, and recoloured to the brand green so it belongs to the design.
 *
 * theme.json cannot express this -- its elements support :hover, :focus and
 * :active only, not :focus-visible -- so it has to live in CSS.
 *
 * Specificity note: theme.json emits `:root :where(a…:focus)` at 0,1,0. The
 * suppressor below is 0,2,0 and the ring is 0,1,1, so both win without
 * `!important` and without depending on stylesheet order. */
:where(.wp-site-blocks) :focus:not(:focus-visible) {
	outline: none;
}

.wp-site-blocks :focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-primary-aa);
	outline-offset: 2px;
}

/* Real-estate hero: the illustration dwarfed the copy beside it.
 *
 * `WP-mobile-hero-image.png` is 1440x1911 -- a PORTRAIT source, taller than it
 * is wide. The column is 615px, so the image rendered 615x816 and set the
 * column height. The heading, intro, buttons and microcopy together are much
 * shorter than that, so the text column looked top-heavy with a long empty gap
 * under it, and the section grew to 956px.
 *
 * Cap the image rather than the column: 420px wide keeps the widget legible,
 * makes it 557px tall, and lets the two columns balance. Centred, because a
 * capped image in a wider column otherwise hugs the left edge.
 *
 * The cap is on the hero only. The same file is used elsewhere at full size.
 *
 * `width: 100%` is load-bearing, not decoration. With `max-width` alone the
 * image keeps its natural 1440px width and clamps to 420px -- which is wider
 * than the 330px content box at 390px viewport, so the page scrolled sideways.
 * `width: 100%` makes the rendered width min(container, 420px). Caught by the
 * overflow sweep after the fix, not before it. */
.abk-re-hero .wp-block-image img {
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
	display: block;
}

/* Microcopy under the buttons: it was `brand-text` at 16px, identical to the
 * intro paragraph above the buttons, so the two read as equal in weight. This
 * line is a reassurance strip, not body copy -- it belongs below the buttons in
 * the hierarchy, not level with the intro.
 *
 * There is no muted token in the palette yet. #5C6B64 is a desaturated
 * brand-text; it holds 5.6:1 on white, so it passes AA for normal text.
 * TODO: promote this to a `brand-text-muted` preset when the design system
 * lands, and delete the literal. */
.abk-hero-microcopy {
	color: #5C6B64;
	font-size: 0.9375rem;
}

/* Live chatbot demo: the iframe rendered at 300x150 and looked broken.
 *
 * The preserved Elementor markup is:
 *
 *   <iframe src="https://app.aibotkit.io/chatbot/..." frameborder="0"
 *           style="height:100%"></iframe>
 *
 * Two faults, and they compound:
 *
 * 1. NO WIDTH. An <iframe> is a replaced element. With no width in the markup
 *    and none in CSS, it falls back to the HTML default of 300x150 -- not to
 *    its container's width, the way a <div> would.
 * 2. `height:100%` RESOLVES TO NOTHING. A percentage height needs a parent with
 *    a definite height. The parent group is auto-height, so the percentage is
 *    indefinite and the iframe keeps the 150px default. The parent then sizes
 *    itself around that 150px, which is the circular part -- each waits for the
 *    other, and 300x150 wins.
 *
 * Elementor's container supplied both the width and the definite height. Both
 * left with it.
 *
 * Give the iframe a real width and a real height in absolute units. 700px
 * matches the live page and is tall enough for the greeting plus the composer.
 *
 * `height` needs `!important` because `height:100%` is an INLINE style
 * attribute inside the preserved core/html payload. No selector beats an
 * inline style. The width does not need it -- there is no inline width, which
 * is the whole reason the iframe defaulted to 300px. Remove both when this
 * payload is converted to blocks and the inline style goes with it.
 */
.ai-botkit-template-chatbot iframe {
	display: block;
	width: 100%;
	height: 700px !important;
	border: 0;
	border-radius: 8px;
}

/* Column proportions: the demo sat in a 50/50 split, so the screenshot beside
 * it was as wide as the chatbot. On the live page the chatbot is the larger
 * half -- it is the thing the section asks you to use, and the image is
 * context. Roughly 44/56, matching the live proportions.
 *
 * `flex-basis` is the lever here, not `width`. Core emits the columns as a flex
 * container, and each column already carries `flex-grow:1; flex-basis:0`, so a
 * width would be overridden by the grow. Bounded to the two-column state; below
 * 782px they stack and the split is meaningless.
 */
@media (min-width: 782px) {
	.ai-botkit-template-chatbot > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 44%;
		flex-grow: 0;
	}

	.ai-botkit-template-chatbot > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 56%;
		flex-grow: 0;
	}
}

@media (max-width: 781px) {
	.ai-botkit-template-chatbot iframe {
		height: 560px !important;
	}
}

/* Testimonial attribution: avatar, name and company were three columns.
 *
 * The block is a flex row with `flexWrap: nowrap` holding three items -- the
 * avatar, "<strong>Rohan Thakrae</strong>", and "Samarra Banquets & Lawns".
 * Flex puts all three side by side, so in a 280px card each got roughly 90px
 * and both text items wrapped mid-word: "Rohan Thakr / ae".
 *
 * The name and the company belong in one column, stacked -- the name reads
 * first, the company qualifies it.
 *
 * Grid, not flex, and no markup change: the avatar spans both rows of column
 * one, and the two paragraphs fall into column two in source order. Flex cannot
 * express that without a wrapper element around the two paragraphs.
 *
 * TWO classes on the selector, not one. Core emits
 * `body .is-layout-flex { display: flex }` at specificity 0,1,1. A single-class
 * `.abk-quote-by` is 0,1,0 and loses regardless of source order -- and it fails
 * SILENTLY, because `display` is the only declaration that gets overridden, so
 * the grid placement rules below still apply to a flex box and do nothing
 * visible. `.wp-block-group.abk-quote-by` is 0,2,0 and wins.
 */
.wp-block-group.abk-quote-by {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.85rem;
	row-gap: 0.1rem;
	align-items: center;
}

.wp-block-group.abk-quote-by > figure {
	grid-row: 1 / span 2;
	margin: 0;
}

.wp-block-group.abk-quote-by > p {
	margin: 0;
}

/* The company line is supporting text, so it should not carry the same weight
 * as the name directly above it. */
.wp-block-group.abk-quote-by > p:last-child {
	color: #5C6B64;
}

/* "Who we are" testimonial card lost its background entirely.
 *
 * The card sits on the section's dark green (#005034). Its own background --
 * #CDECE1 on production, element c32723e -- lived in Elementor's CSS and left
 * with it. Without it the card is transparent, so the quote (#333) and the
 * reviewer's name (#143B2D) render dark-on-dark and are effectively invisible.
 * This is the worst kind of loss: not ugly, unreadable.
 *
 * Values taken from production's live post-3221.css:
 *   background-color: #CDECE1
 *   border-radius:    24px
 *   box-shadow:       2px 2px 30px rgba(4, 228, 149, 0.46)
 *
 * Padding is not in that rule -- Elementor's own container default supplied it,
 * so 2.5rem is chosen to match the live proportions rather than copied.
 */
.wp-block-columns.abk-quote-card {
	background-color: #CDECE1;
	border-radius: 24px;
	box-shadow: 2px 2px 30px rgba(4, 228, 149, 0.46);
	padding: 2.5rem;
	margin-top: 2.5rem;
}

/* FAQ width: the block ran the full 1280px content width, so the answers were
 * single long lines and hard to scan.
 *
 * 780px is not a guess -- it is the `contentSize` this theme already uses for
 * long-form reading in `templates/single.html` (`.abk-post-body`). Reusing it
 * keeps one measure for body text across the site instead of inventing a
 * second one, and it lands in the 65-75 character range that reads well.
 *
 * The hook is `.abk-faq-accordion`, our own class on the list, NOT Rank Math's
 * `.rank-math-block` wrapper. That wrapper is shared with the FAQ, HowTo and
 * schema blocks, so capping it would narrow anything else Rank Math renders.
 */
.abk-faq-accordion {
	max-width: 780px;
	margin-inline: auto;
}

/* "Who we are" heading row: the quote mark and the heading were a 50/50 split,
 * so the comma sat hard left and the heading hard right with a void between
 * them. On the live page they are one unit, centred, with the comma directly
 * beside the text.
 *
 * The hook is `.abk-whoweare`, added to the payload wrapper that holds the
 * "Who we are ?" label on all 7 pages that have this section. The wrapper's own
 * `abk-el-*` id differs per page, so an id-based selector fixed one page and
 * silently missed six.
 *
 * The columns keep their natural width instead of splitting the row: the comma
 * column shrinks to its image, the heading column to its text, and the pair is
 * centred together.
 */
.abk-whoweare > .wp-block-heading {
	text-align: center;
}

.abk-whoweare + .wp-block-columns {
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
}

.abk-whoweare + .wp-block-columns > .wp-block-column {
	flex: 0 1 auto;
}

.abk-whoweare + .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 auto;
}

.abk-whoweare + .wp-block-columns .wp-block-heading {
	text-align: left;
}

/* Mobile padding: two cards spend most of a 390px screen on their own margins.
 *
 * Measured at 390px, before this rule:
 *
 *   live-demo card   330px wide, 30px padding  -> iframe gets 270px
 *   closing CTA card 330px wide, 96px padding  -> content gets 138px
 *
 * 96px was chosen for a 1280px canvas, where it is generous framing. At 330px
 * it consumes 58% of the card and forces the heading into six lines.
 *
 * Both need `!important`: the padding is an INLINE style attribute written into
 * post_content by the block editor (`padding:96px` and
 * `padding:var(--wp--preset--spacing--40)`), and no selector beats an inline
 * style. Block attributes cannot be made responsive, so the breakpoint has to
 * live in CSS -- the desktop values stay exactly as the editor set them.
 *
 * Both selectors are structural and shared, so this covers every page that uses
 * these two patterns, not only the real-estate page.
 */
@media (max-width: 781px) {
	/* Live chatbot demo: give the iframe the width back. */
	.ai-botkit-template-chatbot .wp-block-group.has-base-background-color {
		padding: 12px !important;
	}

	/* Closing CTA: the mint card inside the green band. */
	.wp-block-group.alignfull.has-brand-primary-background-color
		> .wp-block-group.has-brand-bg-1-background-color {
		padding: 32px 20px !important;
	}
}

/* Bento grid: four illustrations sat in one row of four equal columns.
 *
 * They are not four equal things. Measured at source:
 *
 *   Frame-20429.webp     2560x1341   wide
 *   Frame-20388.webp     1760x1760   square
 *   Frame-20388-2.webp   1760x1760   square
 *   Frame-20429-2.webp   2560x1341   wide
 *
 * The design is a bento: wide + square on the first row, square + wide on the
 * second. Forced into four equal columns, the two wide images shrink to a
 * quarter of the width and their captions become unreadable, while the two
 * square ones leave dead space.
 *
 * A 3-column grid restores it -- the wide images span 2, the square ones span 1.
 * Grid, not flex, because the spans are the whole point.
 *
 * Two classes on the selector: core emits `body .is-layout-flex { display:flex }`
 * at 0,1,1, which beats a single class silently.
 */
@media (min-width: 782px) {
	.wp-block-columns.abk-bento {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.wp-block-columns.abk-bento > .wp-block-column {
		flex-basis: auto;
	}

	.wp-block-columns.abk-bento > .wp-block-column:nth-child(1),
	.wp-block-columns.abk-bento > .wp-block-column:nth-child(4) {
		grid-column: span 2;
	}
}

/* Live demo without a companion image: on the pages where the chatbot has no
 * screenshot beside it, the iframe stretched the full 1120px content width. A
 * chat window that wide is mostly empty space -- the conversation column stays
 * narrow whatever the frame does. Cap and centre it.
 *
 * 600px is a no-op where the demo sits in a 44/56 split (real-estate renders it
 * at 573px), so one rule covers both layouts.
 *
 * `!important` is needed, and the reason is worth writing down. An earlier rule
 * in this file constrains everything inside a preserved payload:
 *
 *   .wp-block-group[class*="abk-el-"]
 *     :not(svg):not(svg *):not([style*="position:absolute"]):not([style*="position: absolute"])
 *
 * `:not()` takes the specificity of its argument, and two attribute `:not()`s
 * push that selector to 0,4,2. No reasonable selector for this one iframe gets
 * near it, and raising specificity to compete would be worse to read than the
 * `!important`. It came from the payload-containment work and is doing its job;
 * this is a deliberate, narrow exception to it.
 */
.wp-block-group.ai-botkit-template-chatbot iframe {
	max-width: 600px !important;
	margin-inline: auto;
}

/* Partner cards: 4 + 2 instead of 3 + 3.
 *
 * The payload's own inline <style> sets
 * `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))` inside an
 * 1100px box. auto-fit fits four 260px tracks, so six cards break 4 + 2 and the
 * second row looks abandoned.
 *
 * Fixed three columns gives 3 + 3. The payload also has `padding: 10px` and no
 * top margin, so the cards touched the heading above them.
 */
.who-join {
	margin-top: 2.5rem !important;
}

@media (min-width: 900px) {
	.who-join {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 600px) and (max-width: 899px) {
	.who-join {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	.who-join {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Testimonial attribution, the nested-columns variant.
 *
 * There are two shapes of this block on the site. The flex one is handled by
 * `.abk-quote-by` above. This one uses a nested `wp:columns` inside the quote
 * card: the avatar in column one, the name and company in column two.
 *
 * Both columns take an equal half of the card's left side -- 263px each on a
 * 1440px canvas -- but the avatar is only 83px wide. That leaves a **230px gap**
 * between the face and the name it belongs to, which reads as two unrelated
 * items rather than one attribution.
 *
 * Size column one to its content and let column two take the rest. Measured on
 * all 6 pages carrying this card: the gap was 230px on every one.
 */
.wp-block-columns.abk-quote-card .wp-block-columns {
	gap: 0.85rem;
	align-items: center;
}

.wp-block-columns.abk-quote-card .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 auto;
}

.wp-block-columns.abk-quote-card .wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 auto;
}

/* Platform logos: six 414x255 images rendered at full size in a gallery grid.
 *
 * The source PNGs already contain the white tile, the rounded corner and the
 * logo. At full size each is 414px wide, so six of them wrap into a grid of
 * large panels. On the live page they are a single row of small tiles -- a
 * trust strip, not a feature grid. The logos are the content; the tile is
 * chrome.
 *
 * Cap each to 185px and let the row wrap only when it must. Flex, not grid,
 * so the tiles centre themselves on the last row instead of leaving a hole.
 *
 * The selectors have to mirror core's, including `.is-cropped`. Core stacks
 * three rules of increasing specificity here, and the deciding one is
 * `.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img`
 * at 0,4,2, which sets `width: 100%; flex-basis: 0%; flex-grow: 1`. The failure
 * is circular rather than obvious: the figure is `auto` so it sizes to the
 * image, the image is `100%` so it sizes to the figure, and both settle on the
 * natural 414px.
 *
 * `!important` is unavoidable here. Core writes the gallery's own width rule as
 *
 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
 *
 * and `:not(#individual-image)` contributes ID specificity -- 1,3,2. That is a
 * deliberate guard in core, not an accident, and no class-based selector can
 * outrank an ID. Matching it would mean inventing a fake ID in our own
 * selector, which is worse. `.is-cropped` stays in the selector anyway so the
 * intent is legible next to core's rule.
 */
.wp-block-gallery.abk-platform-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.wp-block-gallery.has-nested-images.abk-platform-strip figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-cropped.abk-platform-strip figure.wp-block-image img {
	width: 185px !important;
	height: auto;
	max-width: 100%;
	flex: none !important;
}

@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images.is-cropped.abk-platform-strip figure.wp-block-image img {
		width: 140px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Hero split, rating row and outline button
 *
 * Three pages share one hero: smart-chat-widget (4442), the homepage (4558) and
 * ai-chatbot-for-wordpress (4925). Measured in their Elementor payloads:
 * the copy container is width 40%, the demo container is width 60%. The
 * converter wrote two plain `wp:column` blocks, which core gives
 * `flex-basis: 0; flex-grow: 1` -- so both rendered at 565px of 1130px.
 * Two classes are necessary: core's rule sits at 0,1,1.
 * ------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-columns.abk-hero-split > .wp-block-column:first-child {
		flex-basis: 40%;
		flex-grow: 0;
	}

	.wp-block-columns.abk-hero-split > .wp-block-column:last-child {
		flex-basis: 60%;
		flex-grow: 0;
	}
}

/* The rating row. Elementor had one flex row, gap 20px, with a 1px top border
 * in #EFEFED. The converter wrote a two-column block, so the stars sat 258px
 * from their own caption. `flex: 0 0 auto` collapses each column to its
 * content, which is what puts the caption back beside the stars. */
.wp-block-columns.abk-hero-rating {
	flex-wrap: nowrap;
	gap: 20px;
	align-items: center;
	border-top: 1px solid #EFEFED;
	padding-top: 20px;
	margin-top: 8px;
}

.wp-block-columns.abk-hero-rating > .wp-block-column {
	flex: 0 0 auto;
	margin-block-start: 0;
}

.wp-block-columns.abk-hero-rating > .wp-block-column p {
	margin: 0;
}

/* The hero secondary button. The original is white with a 1px #C8C8C4 border
 * and #111110 text -- not the light-green fill the Tier 3 sweep applied to the
 * `See Pricing` buttons elsewhere. Only these three pages carry this variant. */
.wp-block-button.abk-btn-outline > .wp-block-button__link {
	background-color: #FFFFFF;
	color: #111110;
	border: 1px solid #C8C8C4;
}

.wp-block-button.abk-btn-outline > .wp-block-button__link:hover,
.wp-block-button.abk-btn-outline > .wp-block-button__link:focus-visible {
	border-color: #111110;
}

/* Core stacks every columns block below 782px with
 * `flex-basis: 100% !important`, so the rating row broke into two lines at
 * 768px. Elementor kept it a row at every width. `!important` is necessary
 * here -- it is the only way past core's own `!important`. Below 600px the
 * row is left to stack, because 330px does not hold both parts. */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns.abk-hero-rating {
		flex-wrap: nowrap;
	}

	.wp-block-columns.abk-hero-rating > .wp-block-column {
		flex-basis: auto !important;
	}
}

/* The hero band. The Elementor original gives the outer container
 * `padding: 0` and puts the space on the copy container instead —
 * `80px 56px 80px 64px` desktop, `40px 16px` mobile. The converter moved that
 * space to the band, which pushed the green demo panel 70px down from the top
 * of the section and left a white strip above it. Removing the band padding
 * in `post_content` restores the original; the copy keeps its own.
 *
 * `align-items: stretch` is necessary because the columns block is
 * `are-vertically-aligned-center`: without it the green panel is centred and
 * stops short of the band edges instead of filling them. */
.wp-block-columns.abk-hero-split {
	align-items: stretch;
}

.wp-block-columns.abk-hero-split > .wp-block-column:first-child {
	padding: 80px 56px 80px 64px;
}

/* Desktop only. As a flex column this group takes its cross size from its own
 * min-content, and at 390px that is 360px inside a 294px box -- a 48px
 * overflow. The stacked layout does not need the centring, so the rule is
 * scoped to the width where the two columns sit side by side. */
@media (min-width: 782px) {
	.wp-block-columns.abk-hero-split > .wp-block-column:last-child > .wp-block-group {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.abk-hero-split > .wp-block-column:first-child {
		padding: 40px 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Pricing cards — PRICE-2
 *
 * The toggle works again (PRICE-1) but the card skin did not survive the
 * conversion: Elementor held the border, the icon list and the outline button
 * as widget settings, and settings are not markup. Every value below is
 * measured from production's own computed styles, not guessed.
 *
 * Hooks already in `post_content`: `.pricing-plan-card` on every card,
 * `.abk-popular-card` on the highlighted one, `.abk-pricing-card` on the top
 * block, `.product-name` on all three headings, `.product-cta` on the button.
 * ------------------------------------------------------------------------- */

/* The card shell. Production: 1px #E5E7EB on the plain cards, 2px #17976E
 * plus a soft shadow on the popular one. `height: 100%` keeps the three level
 * in the grid — ours ran uneven. */
.wp-block-group.pricing-plan-card > .wp-block-group {
	border: 1px solid #E5E7EB;
	height: 100%;
}

.wp-block-group.pricing-plan-card.abk-popular-card > .wp-block-group {
	border: 2px solid #17976E;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Headings. The plan name sits left in the original; `Features` and
 * `Everything in ... and` are centred. The green one is identified by having
 * no colour of its own — the other two carry `has-text-color` — so the rule
 * does not depend on the words in it. */
.wp-block-group.pricing-plan-card .product-name p {
	text-align: center;
}

.wp-block-group.pricing-plan-card .abk-pricing-card .product-name p {
	text-align: left;
}

.wp-block-group.pricing-plan-card .product-name p:not(.has-text-color) {
	color: #17976E;
}

/* The feature lists. Production uses an Elementor icon list: no bullet, a
 * 14px #008858 check, 14px #4B5858 text. The check is the same Font Awesome
 * glyph, inlined as a mask so it takes its colour from the rule. */
.wp-block-group.pricing-plan-card ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-block: 12px;
}

.wp-block-group.pricing-plan-card ul.wp-block-list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5858;
	margin-bottom: 10px;
}

.wp-block-group.pricing-plan-card ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 14px;
	height: 14px;
	background-color: #008858;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>") no-repeat center / contain;
}

/* The call to action. Only the popular card keeps the solid green fill;
 * the others are outline buttons — transparent, #374151 text, 1px #D1D5DB,
 * radius 4px — and all three run the full width of the card. */
.wp-block-group.pricing-plan-card .product-cta .wp-block-button {
	width: 100%;
}

.wp-block-group.pricing-plan-card .product-cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 4px;
	font-weight: 600;
}

.wp-block-group.pricing-plan-card:not(.abk-popular-card) .product-cta .wp-block-button__link {
	background-color: transparent;
	color: #374151;
	border: 1px solid #D1D5DB;
}

/* The feature block is a sibling of `.abk-pricing-card`, which carries its own
 * 24px inset. Without this it ran to the card edge while the copy above it did
 * not. Production insets both by the same 24px. */
.wp-block-group.pricing-plan-card > .wp-block-group > .wp-block-group:not(.abk-pricing-card) {
	padding-inline: 24px;
}

/* Three corrections found by measuring the result rather than trusting it.
 *
 * 1. The popular card computes `overflow: hidden`, so its `Most Popular`
 *    badge -- an `::before` at `top: -12px` -- was cut in half.
 * 2. `.abk-year-note` holds a bare text node after the script writes to it,
 *    so the `has-text-align-left` class that used to be on its paragraph is
 *    gone and the note drifted to the centre.
 * 3. Core emits preset colour classes with `!important`, so the outline
 *    button lost to `.has-brand-primary-background-color`. This is the
 *    documented case where `!important` is the only way through. */
.wp-block-group.pricing-plan-card.abk-popular-card {
	overflow: visible;
}

.wp-block-group.pricing-plan-card .abk-year-note {
	text-align: left;
}

.wp-block-group.pricing-plan-card:not(.abk-popular-card) .product-cta .wp-block-button__link {
	background-color: transparent !important;
	color: #374151 !important;
}

/* ---------------------------------------------------------------------------
 * /aibotkit-pricing-page/ — the four faults Alpesh reported, 2026-08-30
 * ------------------------------------------------------------------------- */

/* 1. The eyebrow is a green pill in the original: the heading sits inside a
 * container with `background: #D7FFF2`, `border-radius: 15px` and
 * `padding: 10px 5px`, and the text is `#008858`. The conversion kept the
 * heading and dropped the container, so it rendered as plain grey copy across
 * the full 1280px. `inline-block` inside a centred block gives the same
 * shrink-to-fit result without adding a wrapper element. */
.wp-block-heading.abk-eyebrow-pill {
	display: table;
	margin-inline: auto;
	padding: 10px 5px;
	min-width: 275px;
	border-radius: 15px;
	background-color: #D7FFF2;
	color: #008858;
	text-align: center;
}

/* 2. The plan grid held five tracks for four cards, so the row was squeezed to
 * 241px each and left an empty column on the right. Core's grid layout emits
 * `repeat(auto-fill, …)`, which keeps empty tracks; `auto-fit` collapses them.
 * The cards then take the full 1280px between them. */
.wp-block-group.is-layout-grid:has(> .pricing-plan-card) {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* 3. This page's FAQ is `core/details`, not `rank-math/faq-block`, so the
 * accordion styling never reached it and it rendered as bare disclosure
 * triangles. These are genuine accordions, not the tab-shaped ones TABS-1
 * says to leave alone, so they are styled to match the FAQ everywhere else.
 * Scoped to `abk-faq-details` — a shared class, never the per-page
 * `abk-el-*` id. */
.wp-block-group.abk-faq-details {
	max-width: 780px;
	margin-inline: auto;
}

.wp-block-group.abk-faq-details .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--brand-bg-1);
}

.wp-block-group.abk-faq-details .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle through a pseudo-element, which `list-style`
 * alone does not remove. */
.wp-block-group.abk-faq-details .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* The same CSS chevron the rank-math accordion uses, so the two match. */
.wp-block-group.abk-faq-details .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 150ms ease;
}

.wp-block-group.abk-faq-details .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.abk-faq-details .wp-block-details > summary::after {
		transition: none;
	}
}

.wp-block-group.abk-faq-details .wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

/* 4. The site header. Production runs it `position: fixed; top: 0; z-index: 99`,
 * so the comparison table's own sticky `<th>` row — which sits at `top: 130px`
 * on both sites — slides under an opaque header. Ours was static, so the rows
 * scrolled over open ground and the table header looked like it was leaking.
 *
 * `sticky` rather than `fixed`: it keeps its place in the flow, so nothing
 * below has to be shifted down to compensate. z-index 120 clears the table's
 * 110 and 100. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 120;
	background-color: var(--wp--preset--color--base, #FFFFFF);
}

/* The FAQ is split across two groups on this page, and the group's default
 * block gap pushed the rows apart. The rows carry their own 1rem padding, so
 * the gap is removed and the two groups read as one list. */
.wp-block-group.abk-faq-details {
	row-gap: 0;
}

.wp-block-group.abk-faq-details > * + * {
	margin-block-start: 0;
}

/* The two groups sit next to each other, so the parent's block gap left a
 * visible break in the middle of one list. */
.wp-block-group.abk-faq-details + .wp-block-group.abk-faq-details {
	margin-block-start: 0;
}

/* The Free card. Its price is the word FREE, not a number, so the pricing
 * script never touches it and it kept the body's 16px grey. Production renders
 * `<span class="abk-price">FREE</span>` at 38.4px/700 in #17976E. The class is
 * `abk-price-free` rather than `abk-price`, which also wraps the currency and
 * amount on the paid cards — a font-size there would fight their own. */
.wp-block-group.pricing-plan-card p.abk-price-free {
	margin-block: 0.5rem 0;
	color: #17976E;
	font-size: 38.4px;
	font-weight: 700;
	line-height: 1.1;
}

/* On the paid cards the note is plain grey text; on the Free card production
 * draws it as a small outlined pill. Measured: 1px #6B7280, radius 24px,
 * padding 2px 8px, 10px/600. */
.wp-block-group.pricing-plan-card .abk-note-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid #6B7280;
	border-radius: 24px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* The two closing lines under the Free card's feature list are cards in the
 * original: 12px radius, 10px 12px of padding and a soft drop shadow, one
 * green and one grey. The conversion left them as bare paragraphs. */
.wp-block-group.pricing-plan-card p.abk-note-card {
	padding: 10px 12px;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	font-size: 14px;
	line-height: 1.5;
}

.wp-block-group.pricing-plan-card p.abk-note-card--green {
	background-color: #E6F4EF;
	color: #008858;
}

.wp-block-group.pricing-plan-card p.abk-note-card--grey {
	background-color: #F9FAFB;
	color: #6B7280;
}

/* FAQ question size, both accordions together.
 *
 * `large` is 1.25rem and renders at 22px. Alpesh asked for one notch down —
 * "maybe 2px or 4px". The `medium` preset is 1rem, which lands at 16px: a 6px
 * drop, small beside a 40px section heading. 1.125rem is 18px, the 4px drop he
 * described, so the size is set literally rather than by preset.
 *
 * Applied to the Rank Math accordion and the `core/details` one together, so
 * the two FAQ designs stay identical. */
.abk-faq-accordion .rank-math-question,
.wp-block-group.abk-faq-details .wp-block-details > summary {
	font-size: 1.125rem;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * "How it comes together" — the vertical tab list
 *
 * The interactivity survived the conversion; the appearance did not, for two
 * separate reasons.
 *
 * 1. `extract-elementor-css.py` FLATTENED the `@keyframes tabFill` block. Its
 *    `from` and `to` were pulled out as ordinary rules and prefixed with the
 *    body selector -- `body.page-id-4558 from { transform: scaleY(0); }` -- and
 *    the `@keyframes` wrapper was lost. `tabFill` is referenced on SEVEN pages
 *    and defined on none, so the coloured progress bar stayed at `scaleY(0)`
 *    and never appeared. The keyframes are restored here, once, for all of them.
 *
 * 2. The rest of the look was Elementor container and icon-widget SETTINGS, not
 *    CSS, so there was nothing for the extractor to recover: the 20px row
 *    padding, the icon chip, the pill borders, the row/column split. Those are
 *    rebuilt below from production's computed values.
 *
 * The recovered per-page CSS still owns the active state -- the title colour,
 * the `max-height` reveal and the three `:after` bar colours. Only what it
 * cannot reach is added here, plus the icon-chip rules it aims at
 * `.elementor-icon`, an element this markup does not have.
 * ------------------------------------------------------------------------- */

@keyframes tabFill {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.wp-block-group.tab-item-list {
	display: flex;
	flex-direction: column;
}

/* The converter left a constrained wrapper between `.tab-item` and its header,
 * which contributed the theme's global padding. */
.wp-block-group.tab-item > .wp-block-group {
	padding: 0;
}

.wp-block-group.tab-item {
	padding: 20px;
	border: 0 solid #E5E7EB;
}

/* Production draws a hairline above and below the open row only. */
.wp-block-group.tab-item[data-tab-active="true"] {
	border-block-width: 1px;
}

/* Icon and title share a row: the icon shrinks to its chip, the title takes
 * the rest. Core's columns would otherwise split them 50/50, which is why the
 * icon sat at the far left and the title at the far right. */
.wp-block-group.tab-item__header .wp-block-columns {
	flex-wrap: nowrap;
	gap: 12px;
	margin-block: 0;
}

.wp-block-group.tab-item__header .wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 auto;
}

.wp-block-group.tab-item__header .wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 auto;
}

/* The icon chip. Elementor drew this with `elementor-view-stacked` and
 * `elementor-shape-rounded`; measured white on a 10px radius with 8px of
 * padding around a 20px glyph. */
.wp-block-group.tab-item__icon {
	display: inline-flex;
	padding: 8px;
	border-radius: 10px;
	background-color: #FFFFFF;
	transition: background-color 200ms ease;
}

.wp-block-group.tab-item__icon figure {
	margin: 0;
	line-height: 0;
}

.wp-block-group.tab-item__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

/* The three colour variants. The recovered CSS carries these but aims them at
 * `.elementor-icon`, which does not exist in block markup. */
.wp-block-group.tab-item.blue[data-tab-active="true"] .tab-item__icon,
.wp-block-group.tab-item.blue:hover .tab-item__icon {
	background-color: #DBEAFE;
}

.wp-block-group.tab-item.yellow[data-tab-active="true"] .tab-item__icon,
.wp-block-group.tab-item.yellow:hover .tab-item__icon {
	background-color: #FDF9C3;
}

.wp-block-group.tab-item.green[data-tab-active="true"] .tab-item__icon,
.wp-block-group.tab-item.green:hover .tab-item__icon {
	background-color: #D4F4E2;
}

/* The body sits under the title, not under the icon. */
.wp-block-group.tab-item .tab-item__content {
	padding-left: 48px;
}

.wp-block-group.tab-item .tab-item__content > .wp-block-group {
	padding: 0;
}

/* The format pills. They arrive as a four-column block, so each one stretched
 * to a quarter of the row. Production sets them as a wrapping row of
 * shrink-to-fit chips: 1px #E5E7EB, radius 6px, 2px 12px. */
.wp-block-group.tab-item .tab-item__content .wp-block-columns {
	flex-wrap: wrap;
	gap: 8px;
	margin-block: 12px 0;
}

.wp-block-group.tab-item .tab-item__content .wp-block-columns > .wp-block-column {
	flex: 0 0 auto;
	padding: 2px 12px;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
}

.wp-block-group.tab-item .tab-item__content .wp-block-columns > .wp-block-column p {
	margin: 0;
}

/* Below 782px core stacks every columns block with `flex-basis: 100%
 * !important`. That put the icon above the title and stretched each format
 * pill to the full row, so the pills ran past the edge of the card. Both rows
 * are small enough to stay as rows at 390px, so the stacking is overridden --
 * `!important` is the only thing that reaches core's own `!important`. */
@media (max-width: 781px) {
	.wp-block-group.tab-item__header .wp-block-columns > .wp-block-column,
	.wp-block-group.tab-item .tab-item__content .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
	}

	.wp-block-group.tab-item .tab-item__content {
		padding-left: 0;
	}

	.wp-block-group.tab-item {
		padding: 16px;
	}
}

/* Two corrections to the tab rows, both measured.
 *
 * 1. The title sat 6px above the icon's centre — icon centre 239px, title
 *    centre 233px. The columns block carries `are-vertically-aligned-center`
 *    but computed `align-items: normal` once the row was made `nowrap`.
 * 2. A closed row measured 95px against production's 83px. The header is 36px
 *    and the padding 40px; the remaining 19.2px was the collapsed content's
 *    own `margin-top`. `max-height: 0` removes a block's height, never its
 *    margin — so the gap survived the collapse. The margin now belongs to the
 *    open state only. */
.wp-block-group.tab-item__header .wp-block-columns {
	align-items: center;
}

.wp-block-group.tab-item .tab-item__content {
	margin-block: 0;
}

.wp-block-group.tab-item[data-tab-active="true"] .tab-item__content {
	margin-block-start: 12px;
}

/* The hero demo panel on mobile.
 *
 * The panel group carries `padding: 48px` as an inline attribute, which the
 * block editor cannot make responsive. At 390px that leaves the chat demo
 * 234px wide inside a 330px column. Elementor's own `padding_mobile` for this
 * container is `32px 0` — vertical only — so the demo runs the full width of
 * the column and the page's own gutter provides the side spacing.
 *
 * `!important` is required: the value is an inline `style` attribute, which no
 * selector outranks. This is the responsive-settings gap in STATE.md, closed
 * for the one container where it is most visible. */
@media (max-width: 781px) {
	.wp-block-columns.abk-hero-split > .wp-block-column:last-child > .wp-block-group {
		padding: 32px 0 !important;
	}
}

/* `align-items` on the row was not enough: the column still stretched and its
 * heading rendered at the top of it. Centring the column itself, and zeroing
 * the heading's own margins, puts the title on the icon's centre line. */
.wp-block-group.tab-item__header .wp-block-columns > .wp-block-column {
	align-self: center;
}

.wp-block-group.tab-item__title,
.wp-block-group.tab-item__title > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * "Why businesses choose us" — the stacking agent cards
 *
 * Three faults, measured against the Elementor payload rather than guessed.
 *
 * 1. The stack did not stack. Elementor holds `sticky: top` with per-card
 *    `sticky_offset` 280 / 300 / 320 and `z_index` 9 / 19 / 29, on desktop and
 *    tablet only. Those are container settings, so nothing survived. The
 *    page's own script is intact and still scales each card as the next one
 *    arrives -- it was scaling cards that never pinned. Native
 *    `position: sticky` reproduces Elementor's effect and, unlike Elementor's
 *    JS, survives U10.
 * 2. The white card, its 20px radius and its 32px/48px padding sat on an INNER
 *    group, while `.border-top:before` -- the blue/yellow/green rule -- draws
 *    on the outer one. The bar therefore floated above the card instead of
 *    capping it. The skin moves out to `.stacking-card` and the inner group is
 *    neutralised.
 * 3. Each feature's icon, title and description were LOOSE siblings of a grid,
 *    so the grid laid out twelve cells instead of four blocks of three. Fixed
 *    in `post_content` by wrapping each triple in `.abk-agent-feature` -- the
 *    same fault, and the same fix, as ABT-1 on /about-us/.
 * ------------------------------------------------------------------------- */

.wp-block-group.stacking-cards-wrapper {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.wp-block-group.stacking-card {
	background-color: #FFFFFF;
	border-radius: 20px;
	padding: 32px 48px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* The inner group held the skin; it would otherwise draw a second card inside
 * the first. Its background comes from a preset class, which core emits with
 * `!important`, and its padding and radius are inline attributes. */
.wp-block-group.stacking-card > .wp-block-group {
	padding: 0 !important;
	border-radius: 0;
	background-color: transparent !important;
}

/* The recovered page CSS sets `body.page-id-4558 .border-top { position:
 * relative }` at 0,2,1, which beat a two-class rule and pinned the cards to
 * `relative` — `top` and `z-index` applied and did nothing visible. Adding
 * `.border-top` here takes ours to 0,3,0. */
@media (min-width: 768px) {
	.wp-block-group.stacking-card.border-top {
		position: sticky;
	}

	.wp-block-group.stacking-card.border-top:nth-child(1) { top: 280px; z-index: 9; }
	.wp-block-group.stacking-card.border-top:nth-child(2) { top: 300px; z-index: 19; }
	.wp-block-group.stacking-card.border-top:nth-child(3) { top: 320px; z-index: 29; }
}

@media (max-width: 767px) {
	.wp-block-group.stacking-cards-wrapper {
		gap: 40px;
	}

	.wp-block-group.stacking-card {
		padding: 24px;
	}
}

/* Each feature: icon chip, then title, then description -- stacked, two to a
 * row. The grid previously received twelve loose children. */
.wp-block-group.stacking-card .wp-block-group.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.wp-block-group.abk-agent-feature > figure {
	display: inline-flex;
	margin: 0 0 16px;
	padding: 12px;
	border-radius: 16px;
	line-height: 0;
}

.wp-block-group.abk-agent-feature > figure img {
	display: block;
	width: 40px;
	height: 40px;
}

/* The chip takes the card's own colour, the same palette as the tab icons. */
.wp-block-group.stacking-card.blue   .abk-agent-feature > figure { background-color: #DBEAFE; }
.wp-block-group.stacking-card.yellow .abk-agent-feature > figure { background-color: #FDF9C3; }
.wp-block-group.stacking-card.green  .abk-agent-feature > figure { background-color: #D4F4E2; }
.wp-block-group.stacking-card.purple .abk-agent-feature > figure { background-color: #EDE9FE; }

.wp-block-group.abk-agent-feature > h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.33;
	color: #1F2937;
}

.wp-block-group.abk-agent-feature > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #4B5563;
}

@media (max-width: 767px) {
	.wp-block-group.stacking-card .wp-block-group.is-layout-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Three corrections after Alpesh's second look, all measured on production.
 *
 * 1. The section heading scrolled away. Elementor gives `.stacking-header`
 *    `sticky: top` with `sticky_offset: 120` and `z_index: 9`, desktop and
 *    tablet only. The page's script already fades it out as the last card
 *    arrives -- which only makes sense for a pinned header, and was another
 *    piece of behaviour running against an element that never pinned.
 * 2. The feature titles rendered at 22px against production's 18px. The
 *    heading carries `has-large-font-size`, and core emits preset font-size
 *    classes with `!important`, so the earlier 18px rule lost silently.
 * 3. The icon chip was 64px around a 40px glyph. Production is 44px around a
 *    20px glyph, radius 12px.
 *
 * The cards are 980px wide on production and were running the full 1280px
 * layout here. */
.wp-block-group.stacking-cards-wrapper,
.wp-block-group.stacking-header {
	max-width: 980px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.wp-block-group.stacking-header {
		position: sticky;
		top: 120px;
		z-index: 9;
	}
}

.wp-block-group.abk-agent-feature > h3 {
	font-size: 18px !important;
}

/* The image block carries `width: 40px` as an inline attribute, so the chip
 * measured 64x44 -- 40px of declared width plus the padding, against a 20px
 * glyph. The figure shrinks to its content instead. */
.wp-block-group.abk-agent-feature > figure {
	width: auto !important;
	padding: 12px;
	border-radius: 12px;
}

/* The image block writes `width: 40px` as an inline style on the `<img>`
 * itself, which no selector outranks. Production's glyph is 20px. */
.wp-block-group.abk-agent-feature > figure img {
	width: 20px !important;
	height: 20px !important;
}

/* ---------------------------------------------------------------------------
 * Inline feature rows — "CRM Ready Export", "Instant Triggers", "Custom Forms"
 * and their equivalents in Lead Capture, Customization and the two chatbot
 * pages' hero lists.
 *
 * Same fault as CARD-1: Elementor built these as icon-box widgets, one unit
 * each, and the converter wrote the icon and the title as loose siblings. The
 * title therefore dropped to its own line at the `large` preset size, and the
 * icon lost its chip.
 *
 * Production, measured: chip 34px — 8px of padding around an 18px glyph —
 * radius 10px, 12px to the title, title 14px/600. Note these are SMALLER than
 * the agent-card features (44px chip, 18px/700 title); the two look alike and
 * are not the same component.
 * ------------------------------------------------------------------------- */

.wp-block-group.abk-inline-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block: 12px;
}

.wp-block-group.abk-inline-feature > figure {
	flex: 0 0 auto;
	display: inline-flex;
	width: auto !important;
	margin: 0;
	padding: 8px;
	border-radius: 10px;
	line-height: 0;
}

.wp-block-group.abk-inline-feature > figure img {
	display: block;
	width: 18px !important;
	height: 18px !important;
}

.wp-block-group.abk-inline-feature > h3 {
	margin: 0;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.4;
}

/* The chip colour cycles blue → yellow → green → purple down each list, which
 * is the order the icons themselves are drawn in. Adjacent-sibling chaining is
 * used rather than `nth-child`, because the rows share a parent with headings
 * and paragraphs — and it restarts naturally at the top of the next list. */
.wp-block-group.abk-inline-feature > figure {
	background-color: #DBEAFE;
}

.abk-inline-feature + .wp-block-group.abk-inline-feature > figure {
	background-color: #FDF9C3;
}

.abk-inline-feature + .abk-inline-feature + .wp-block-group.abk-inline-feature > figure {
	background-color: #D4F4E2;
}

.abk-inline-feature + .abk-inline-feature + .abk-inline-feature + .wp-block-group.abk-inline-feature > figure {
	background-color: #ECE2FF;
}

/* The inline rows come in two shapes. Some carry a description, some do not,
 * and a grid holds both without a second wrapper: the chip spans two rows in
 * column one, the title takes row one of column two and the description row
 * two. With no description, row two collapses to nothing. Same technique as
 * `abk-quote-by`. */
.wp-block-group.abk-inline-feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}

.wp-block-group.abk-inline-feature > figure {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
}

.wp-block-group.abk-inline-feature > h3 { grid-column: 2; grid-row: 1; }

.wp-block-group.abk-inline-feature > p {
	grid-column: 2;
	grid-row: 2;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4B5563;
}

/* The stacked variant: chip on its own line, then the title, then the copy.
 * Production runs these at 44px with an 18px title -- the same proportions as
 * the agent cards, and deliberately larger than the inline rows above.
 * Production has a 48px sub-variant on three of them; the 4px is not
 * reproduced. */
.wp-block-group.abk-feature-row {
	margin-block: 20px;
}

.wp-block-group.abk-feature-row > figure {
	display: inline-flex;
	width: auto !important;
	margin: 0 0 12px;
	padding: 12px;
	border-radius: 12px;
	line-height: 0;
	background-color: #DBEAFE;
}

.wp-block-group.abk-feature-row > figure img {
	display: block;
	width: 20px !important;
	height: 20px !important;
}

.wp-block-group.abk-feature-row > h3 {
	margin: 0 0 8px;
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.33;
	color: #1F2937;
}

.wp-block-group.abk-feature-row > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #4B5563;
}

/* Same blue → yellow → green → purple cycle as the inline rows. */
.abk-feature-row + .wp-block-group.abk-feature-row > figure { background-color: #FDF9C3; }
.abk-feature-row + .abk-feature-row + .wp-block-group.abk-feature-row > figure { background-color: #D4F4E2; }
.abk-feature-row + .abk-feature-row + .abk-feature-row + .wp-block-group.abk-feature-row > figure { background-color: #ECE2FF; }

/* ---------------------------------------------------------------------------
 * "Why AI Botkit" and "Security" — the bordered feature cards
 *
 * `.border-top` is the same hook the stacking cards use, and it had the same
 * problem: the recovered CSS draws the 6px colour bar on this element, while
 * the white card, its radius and its padding sat on an inner group — and on
 * the wide "Human Handoff" card the converter produced no inner group at all,
 * so there was no card to see.
 *
 * Production, measured: white, `border-radius: 14px`, `padding: 32px`,
 * `1px solid #DEE2E6`, with the 6px bar across the top.
 * ------------------------------------------------------------------------- */

.wp-block-group.border-top:not(.stacking-card) {
	background-color: #FFFFFF;
	border: 1px solid #DEE2E6;
	border-radius: 14px;
	padding: 32px;
}

/* Where an inner white group does exist, it would draw a second card inside
 * the first. Its background comes from a preset class, which core emits with
 * `!important`; its padding and radius are inline attributes. */
.wp-block-group.border-top:not(.stacking-card) > .wp-block-group.has-background {
	background-color: transparent !important;
	border-radius: 0;
	padding: 0 !important;
}

.wp-block-group.border-top .abk-feature-row {
	margin-block: 0;
}

/* The security row is four cards in a grid that core lays out with
 * `repeat(auto-fill, …)`, which keeps an empty fifth track and squeezes the
 * four. Same fault as the pricing table — `auto-fit` collapses it. */
.wp-block-group.is-layout-grid:has(> .border-top) {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* The colour bar sat 32px in from the left and overshot the right. The
 * recovered rule uses `left: 0; width: 100%`, and once the card took 32px of
 * padding the used values stopped matching the card edge. Pinning both edges
 * removes the dependency on the padding. */
.wp-block-group.border-top:not(.stacking-card)::before {
	left: 0;
	right: 0;
	width: auto;
}

/* The chip colour follows the card, not its position in a list. These cards are
 * each their own element, so the adjacent-sibling cycle used for the inline
 * rows never advanced and every chip stayed blue. */
.border-top.blue   .abk-feature-row > figure,
.border-top.blue   .abk-inline-feature > figure { background-color: #DBEAFE; }
.border-top.yellow .abk-feature-row > figure,
.border-top.yellow .abk-inline-feature > figure { background-color: #FDF9C3; }
.border-top.green  .abk-feature-row > figure,
.border-top.green  .abk-inline-feature > figure { background-color: #D4F4E2; }
.border-top.purple .abk-feature-row > figure,
.border-top.purple .abk-inline-feature > figure { background-color: #ECE2FF; }

/* ---------------------------------------------------------------------------
 * "How it works" — the three numbered steps
 *
 * The number is a 64px tinted tile in the original, and the step title and
 * copy are centred under it. The tile size and radius survive in the recovered
 * page CSS as `.bullet-point .elementor-heading-title`, an element block
 * markup does not have; here the number is a plain paragraph. The tint itself
 * was an Elementor setting, so nothing survived it.
 * ------------------------------------------------------------------------- */

.wp-block-group.bullet-point > p {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 16px;
	font-size: 28px;
	font-weight: 800;
}

/* The number already carries its own colour inline; only the tile behind it
 * was lost. Keyed on position in the grid, which is where the sequence lives —
 * there is no colour class on these blocks to read. */
.wp-block-group.is-layout-grid > *:nth-child(1) .bullet-point > p { background-color: #DBEAFE; }
.wp-block-group.is-layout-grid > *:nth-child(2) .bullet-point > p { background-color: #FDF9C3; }
.wp-block-group.is-layout-grid > *:nth-child(3) .bullet-point > p { background-color: #D4F4E2; }

.wp-block-group.bullet-point ~ h3,
.wp-block-group.bullet-point ~ p {
	text-align: center;
}

.wp-block-group.bullet-point ~ h3 {
	font-size: 18px !important;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Testimonials
 *
 * Three faults. The grid held a fifth empty track and squeezed four cards into
 * 241px each, so every quote wrapped to eight lines. The card was drawn twice —
 * a grey outer and a white bordered inner, where production has one grey card
 * at `#F9FAFB`, radius 14px, `padding: 28px`. And the rating arrived as the
 * literal text "5 out of 5" where the original shows five stars.
 * ------------------------------------------------------------------------- */

.wp-block-group.is-layout-grid:has(> .testimonial) {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.wp-block-group.testimonial > .wp-block-group {
	background-color: #F9FAFB;
	border-radius: 14px;
	padding: 28px;
	height: 100%;
}

/* The inner card would otherwise draw a second box inside the first. */
.wp-block-group.testimonial .wp-block-group.has-base-background-color {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0;
	padding: 0 !important;
}

/* Five stars in place of the rating sentence. The text stays in the markup for
 * screen readers and for the schema; only its rendering changes. */
.wp-block-group.testimonial > .wp-block-group > p:first-child {
	font-size: 0;
	margin-bottom: 12px;
}

.wp-block-group.testimonial > .wp-block-group > p:first-child::before {
	content: "\2605\2605\2605\2605\2605";
	font-size: 18px;
	letter-spacing: 2px;
	color: #F59E0B;
}

/* ---------------------------------------------------------------------------
 * FAQ — the two-column `core/details` list
 *
 * Same component as the pricing page's, so it takes the same hook. The class
 * sits on each column rather than the columns block, so the two-column layout
 * is kept and the 780px reading measure has no effect at this width.
 * ------------------------------------------------------------------------- */

.wp-block-column.abk-faq-details {
	max-width: none;
}

/* The accordion rules above are written for `.wp-block-group.abk-faq-details`,
 * the shape the pricing page has. Here the hook sits on a `wp-block-column`, so
 * the same rules are repeated for that element rather than lowering the
 * original selectors and risking a fight with core elsewhere. */
.wp-block-column.abk-faq-details .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--brand-bg-1);
}

.wp-block-column.abk-faq-details .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.wp-block-column.abk-faq-details .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-column.abk-faq-details .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 150ms ease;
}

.wp-block-column.abk-faq-details .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-column.abk-faq-details .wp-block-details > summary::after {
		transition: none;
	}
}

.wp-block-column.abk-faq-details .wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

/* ---------------------------------------------------------------------------
 * The closing call-to-action banner
 *
 * Measured against production: the banner is 960px wide, not the full 1280px
 * layout; the eyebrow is a solid blue pill, not white text sitting invisibly
 * on the pale blue panel; and the button is #009440 at radius 10 with 32px of
 * side padding, where ours had picked up the generic brand-primary button.
 * ------------------------------------------------------------------------- */

.wp-block-group.abk-cta-banner {
	max-width: 960px;
	margin-inline: auto;
}

/* The pill. Production draws it on the wrapper around the sparkle and the
 * label: #2563EB, fully rounded, `4px 16px`. Ours rendered white 12px text
 * directly on the #DBEAFE panel — legible only because the panel is pale. */
.wp-block-group.abk-cta-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 16px;
	border-radius: 1000px;
	background-color: #2563EB;
}

/* The columns block inside the pill would otherwise split the sparkle and the
 * label 50/50 across the banner. */
.wp-block-group.abk-cta-pill .wp-block-columns {
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	margin-block: 0;
}

.wp-block-group.abk-cta-pill .wp-block-column {
	flex: 0 0 auto;
	margin: 0;
}

.wp-block-group.abk-cta-pill p {
	margin: 0;
	white-space: nowrap;
}

.wp-block-group.abk-cta-pill figure {
	margin: 0;
	line-height: 0;
}

.wp-block-group.abk-cta-pill img {
	display: block;
	width: 16px;
	height: 16px;
}

/* The pill is a block-level group, so it needs its own centring rather than
 * inheriting the banner's text alignment. */
.wp-block-group.abk-cta-banner > .wp-block-group.abk-cta-pill {
	display: table;
	margin-inline: auto;
}

/* The button: #009440, radius 10, 14px/600, 12px 32px. */
.wp-block-group.abk-cta-banner .wp-block-button__link {
	background-color: #009440 !important;
	border-radius: 10px;
	padding: 12px 32px;
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * HERO-3 — the dark hero on restaurant-ai-chatbot (5115) and
 * real-estate-chatbot (5027)
 *
 * The band rendered WHITE, so the white headline was invisible and only the
 * yellow span showed. Cause: the gradient lives in Elementor *custom CSS* on
 * container `17b53c3b`, `extract-elementor-css.py` recovered it correctly into
 * `assets/css/pages/page-<id>.css`, but the converter never wrote the
 * `abk-el-17b53c3b` class the rule selects. The CSS was on the page and
 * matched nothing. 13 hooks are orphaned this way across 7 pages; this is the
 * only one that carries a background.
 *
 * Every value below is read from the payload, not estimated:
 *   band   40px 24px, boxed 1200, flex row, gap 60, align center
 *   demo   `.container` is max-width 375px, so the column is pinned to 375
 *   copy   gap 10; buttons margin-top 22; trust row margin-top 16
 * ------------------------------------------------------------------------- */

.wp-block-group.abk-hero-dark {
	background: linear-gradient(157.96deg, #0B1120 0%, #0F172A 60%, #1F2937 100%);
	padding: 40px 24px;
}

.wp-block-group.abk-hero-dark > .wp-block-columns {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-columns.abk-hero-split-dark {
	gap: 60px;
	align-items: center;
}

/* The split is 50/50, which is what Elementor's two unsized row containers
 * produce: 1200 boxed minus the 60px gap, so 570px each. An earlier pass
 * pinned the demo column to 375px -- the width of the `.container` bot on
 * restaurant and real-estate. That was wrong. `whatsapp-ai-chatbot-builder`
 * puts a 660px illustration in the same column, and at 375px its absolutely
 * positioned social icons (`left: 0`) landed on top of the phone and the three
 * connector lines (`left: 68px`, width 230px) were clipped away.
 *
 * The bot pages are unaffected: a 375px bot inside a 570px column simply
 * centres, which is where the original puts it. */
@media (min-width: 782px) {
	.wp-block-columns.abk-hero-split-dark > .wp-block-column {
		flex: 1 1 0;
		min-width: 0;
	}

	.wp-block-columns.abk-hero-split-dark > .wp-block-column:last-child {
		display: flex;
		justify-content: center;
	}
}

/* Copy stack. Elementor gave the copy container `gap: 10px` and no margins;
 * core's constrained layout gives every child a block gap instead. */
.wp-block-columns.abk-hero-split-dark > .wp-block-column:first-child > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

/* Core's constrained layout gives every child `margin-left: auto; margin-right:
 * auto`. Inside a flex column an auto margin CENTRES the item, so the whole
 * copy stack sat in the middle of its own column while the original is left
 * aligned. Resetting the margins is the fix; `align-items` alone is not. */
.wp-block-columns.abk-hero-split-dark > .wp-block-column:first-child > .wp-block-group > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

.abk-hero-dark .wp-block-buttons {
	margin-top: 12px;
}

/* Buttons. The primary is #009440 here, not the `brand-primary` preset the
 * converter chose; the secondary is transparent with a 1px #FFFFFF26 border,
 * not the mint fill the Tier 3 sweep applies on light pages. Core writes the
 * preset colour classes with `!important`, so both need it back. */
.abk-hero-dark .wp-block-buttons .wp-block-button__link {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	border-radius: 10px;
	padding: 12px 28px 12px 24px;
}

.abk-hero-dark .wp-block-button:first-child .wp-block-button__link {
	background-color: #009440 !important;
	color: #FFFFFF !important;
}

.abk-hero-dark .wp-block-button:nth-child(2) .wp-block-button__link {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.abk-hero-dark .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.abk-hero-dark .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* The `Start for FREE` line is an icon-box widget, not a feature card. The
 * shared `abk-inline-feature` rules give it a 40px tinted tile and a bold
 * heading; the original is a bare 20px icon with 12px #D1D5DB text.
 * Three classes, so this beats the shared rule inside the hero only. */
.abk-hero-dark .wp-block-group.abk-inline-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.abk-hero-dark .wp-block-group.abk-inline-feature > figure {
	background: none !important;
	padding: 0 !important;
	margin: 0;
	width: auto;
	border-radius: 0;
}

.abk-hero-dark .wp-block-group.abk-inline-feature > figure img {
	width: 20px !important;
	height: 20px;
}

.abk-hero-dark .wp-block-group.abk-inline-feature > h3 {
	font-size: 12px !important;
	font-weight: 400;
	line-height: 18px;
	color: #D1D5DB;
	margin: 0;
}

/* The trust row. Elementor had one flex row, gap 24, holding the avatars and a
 * 4px-gap stack of the star rating and its caption. The converter wrote a
 * two-column block, so the caption sat 258px from the avatars and the rating
 * widget flattened to the sentence `4.5 out of 5`. */
.wp-block-columns.abk-hero-trust {
	flex-wrap: nowrap;
	gap: 24px;
	align-items: center;
	margin-top: 6px;
}

.wp-block-columns.abk-hero-trust > .wp-block-column {
	flex: 0 0 auto;
	margin-block-start: 0;
}

.wp-block-columns.abk-hero-trust .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wp-block-columns.abk-hero-trust p {
	margin: 0;
}

/* The stars replace the sentence visually. The text stays in the DOM for a
 * screen reader, which is why `font-size: 0` is used and not `display: none`.
 * Payload: 5 icons, 14px, gap 2px, #FACC15. */
.wp-block-columns.abk-hero-trust .wp-block-group > p:first-child {
	font-size: 0 !important;
	line-height: 0;
}

.wp-block-columns.abk-hero-trust .wp-block-group > p:first-child::before {
	content: "\2605\2605\2605\2605\2605";
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #FACC15;
}

.wp-block-columns.abk-hero-trust .wp-block-group > p:last-child {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #D1D5DB;
}

/* Core stacks every columns block below 782px with `flex-basis: 100%
 * !important`. Elementor kept the trust row a row down to the tablet
 * breakpoint. Below 600px it is left to stack. */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns.abk-hero-trust > .wp-block-column {
		flex-basis: auto !important;
	}
}

@media (max-width: 781px) {
	.wp-block-group.abk-hero-dark {
		padding: 40px 16px;
	}
}

/* ---------------------------------------------------------------------------
 * WA-2 — whatsapp-ai-chatbot-builder, three corrections after Alpesh's second
 * look. All three are measured, none is a guess.
 * ------------------------------------------------------------------------- */

/* 1. The hero illustration broke at 390px.
 *
 * The payload's own `@media (max-width: 768px)` block DOES apply -- the icons
 * go to a row, `.abk-benefits` goes `position: static`. That is the problem.
 * `.abk-flow-wrap` is `display: flex` in the row direction, so the moment the
 * benefits stop being absolute they become a SECOND flex item beside the
 * phone, and the phone shrinks from 300px to 148px. The chat header then wraps
 * one word per line.
 *
 * Elementor never showed this because its container supplied the column
 * direction. The payload has no `flex-direction` for mobile, so it has to come
 * from here. */
@media (max-width: 768px) {
	.abk-flow-wrap {
		flex-direction: column;
		justify-content: flex-start;
		min-height: 0;
	}

	.abk-flow-wrap > .abk-phone,
	.abk-flow-wrap > .abk-benefits {
		flex: 0 0 auto;
	}
}

/* 2. The first stacking card covered the second line of the sub-heading.
 *
 * `.stacking-header` pins at 120px and the first card at 280px, which leaves
 * 160px for the header. Measured heights: the front page 126px, restaurant
 * 150px -- both fit. This page is 194px, because its `<h2>` takes two lines
 * AND its paragraph takes two, so 34px of the paragraph sat under the card.
 *
 * Two changes. The header container is `flex_gap: 8` in the payload and was
 * running on core's default block gap, which is 16px larger. That recovers
 * 16px. The remaining 18px comes from a modifier on this section only --
 * moving the shared offsets would push the front page's cards down too. */
.wp-block-group.stacking-header > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wp-block-group.stacking-header > .wp-block-group > * {
	margin-block: 0;
}

@media (min-width: 768px) {
	.abk-stack-tall .wp-block-group.stacking-card.border-top:nth-child(1) { top: 300px; }
	.abk-stack-tall .wp-block-group.stacking-card.border-top:nth-child(2) { top: 320px; }
	.abk-stack-tall .wp-block-group.stacking-card.border-top:nth-child(3) { top: 340px; }
}

/* 3. The three feature lists rendered as one icon and then a column of loose
 * labels. Each label is an `icon-box` widget in the payload -- icon 18px,
 * 8px padding, radius 10, gap 12, label 14px / 600 #1F2937, tile cycling
 * #DBEAFE → #FDF9C3 → #D4F4E2. The shared `abk-inline-feature` rules already
 * carry all of that; the labels just needed wrapping, which is done in
 * `post_content`.
 *
 * One shape is new here: these rows have NO `<h3>`, only a `<p>`. The shared
 * grid puts a lone `<p>` in row two and styles it as a description. Pulled
 * back to row one and given the title's weight and colour. */
.wp-block-group.abk-inline-feature:not(:has(> h3)) > p {
	grid-row: 1;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #1F2937;
}

.wp-block-group.abk-inline-feature > h3 {
	color: #1F2937;
}

/* FA-1 — explicit tile colours where the sibling cycle disagrees with the
 * payload. The cycle runs blue → yellow → green → purple down each list, which
 * is right on the homepage but wrong for three rows on
 * `whatsapp-ai-chatbot-builder`: two lists end yellow-yellow and one ends
 * green-green.
 *
 * `!important` is necessary, not lazy. The cycle's last step is
 * `.abk-inline-feature + .abk-inline-feature + .abk-inline-feature +
 * .wp-block-group.abk-inline-feature > figure` — specificity 0,4,0 — so a
 * two-class modifier loses to it however it is written. */
.wp-block-group.abk-inline-feature.abk-tile-blue   > figure { background-color: #DBEAFE !important; }
.wp-block-group.abk-inline-feature.abk-tile-yellow > figure { background-color: #FDF9C3 !important; }
.wp-block-group.abk-inline-feature.abk-tile-green  > figure { background-color: #D4F4E2 !important; }
.wp-block-group.abk-inline-feature.abk-tile-purple > figure { background-color: #ECE2FF !important; }

/* ---------------------------------------------------------------------------
 * QG-1 — quotation-generator, the pricing section
 *
 * Alpesh: "the pricing section is completely broken". Five separate causes,
 * all measured against the Elementor payload.
 * ------------------------------------------------------------------------- */

/* 1. The plan row. Elementor's `pricing-plans` container is `flex_direction:
 * row` with `flex_gap: 0` -- three cards touching, which is what the recovered
 * `nth-child` radius rules assume. The converter wrote a GRID with
 * `minimumColumnWidth: 22rem`, so it laid out five tracks, filled two, and
 * pushed the third card onto a second row at 608px wide. */
.wp-block-group.pricing-plans > .wp-block-group {
	display: flex;
	flex-direction: row;
	gap: 0;
	align-items: stretch;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

@media (max-width: 1023px) {
	.wp-block-group.pricing-plans > .wp-block-group {
		flex-wrap: wrap;
	}

	.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card {
		flex: 1 1 22rem;
	}
}

/* 2. Both prices, both tenures and BOTH `Buy Now` buttons rendered at once.
 *
 * The toggle mechanism is `.annual` / `.lifetime` plus `.selected`, and the
 * recovered page CSS has `.annual, .lifetime { display: none }`. The classes
 * survived on the text-editor widgets but NOT on the two `button` widgets --
 * a converter gap, now repaired in `post_content`.
 *
 * The page CSS then reveals the selected one with `display: inline-block`.
 * That is right for a button and wrong for the price and tenure blocks: as
 * Elementor containers they were full width, and as inline-block block groups
 * they shrank and sat side by side, which is why `per business license` and
 * `per year` floated to the right of the price. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.annual.selected,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.lifetime.selected {
	display: block;
}

/* Core emits `.wp-block-buttons > .wp-block-button { display: inline-block }`
 * at 0,2,0, which beat the page CSS's `.lifetime { display: none }` at 0,1,0 —
 * so both `Buy Now` buttons stayed visible even after the classes came back.
 * Three classes takes ours to 0,3,0. */
.wp-block-group.pricing-plans .wp-block-buttons > .wp-block-button.annual:not(.selected),
.wp-block-group.pricing-plans .wp-block-buttons > .wp-block-button.lifetime:not(.selected) {
	display: none;
}

/* 3. The feature list. Elementor's toggle became `core/details`, so every row
 * shows a disclosure triangle and none shows the green tick that used to sit
 * in the tab title as an inline `<svg>`. The recovered CSS styles
 * `.elementor-toggle-item`, which no longer exists on the page.
 *
 * The tick is the payload's own `fa-check` path at its own colour, #008858,
 * 15x15 -- redrawn as a mask so one rule covers every row. Title metrics are
 * the widget's: Open Sans 14 / 400, #4B5858, padding 8px 48px. */
.wp-block-group.pricing-plans .pricing-features .wp-block-details {
	border: 0;
	margin: 0;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 48px;
	font-family: "Open Sans", var(--wp--preset--font-family--dm-sans), sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #4B5858;
	list-style: none;
	cursor: default;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background-color: #008858;
	-webkit-mask: var(--abk-tick) center / contain no-repeat;
	mask: var(--abk-tick) center / contain no-repeat;
}

.wp-block-group.pricing-plans .pricing-features {
	--abk-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>');
}

/* Only the rows that actually carry sub-features open. `hide-arrows` in the
 * payload hides the caret on every other row, which is why they must not look
 * clickable either. */
.wp-block-group.pricing-plans .pricing-features .wp-block-details:has(.plan-feature) > summary {
	cursor: pointer;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details:has(.plan-feature) > summary::after {
	content: "";
	margin-left: auto;
	width: 10px;
	height: 10px;
	background-color: #333333;
	-webkit-mask: var(--abk-caret) center / contain no-repeat;
	mask: var(--abk-caret) center / contain no-repeat;
	transition: transform .2s;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details[open]:has(.plan-feature) > summary::after {
	transform: rotate(180deg);
}

.wp-block-group.pricing-plans .pricing-features {
	--abk-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>');
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details:not(:has(.plan-feature)) > summary {
	pointer-events: none;
}

/* 4. The card. Elementor gives it `flex_gap: 8`, `padding: 0` and a 4px
 * radius; the border and the 38rem cap come from the recovered page CSS. The
 * shared PRICE-2 rule puts a second border on the inner group, which on this
 * page draws a box inside the card. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card > .wp-block-group {
	border: 0;
	height: 100%;
}

/* 5. The toggle row sits left. Elementor centres the whole column
 * (`flex_justify_content: center` on the section, `flex_align_items: center`
 * on the header). */
.wp-block-group .wp-block-group.abk-el-aa0ce98 {
	display: flex;
	justify-content: center;
}

/* 6. Spacing. Elementor gives the card and every container inside it
 * `flex_gap: 8`, and the toggle's own rows no gap at all. Core's default block
 * gap is 19.2px, which stacked up to 198px between the price and the button
 * and made the feature list twice as tall as production's.
 *
 * The gap comes from theme.json as a literal, not from
 * `--wp--style--block-gap`, so redefining the variable does nothing. Core's
 * own selector is wrapped in `:where()` and therefore carries ZERO
 * specificity, so a plain rule is enough. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group > * {
	margin-block-start: 0;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-features > *,
.wp-block-group.pricing-plans .wp-block-group.pricing-features .plan-feature,
.wp-block-group.pricing-plans .wp-block-group.pricing-features .wp-block-details > * {
	margin-block-start: 0;
}

/* 7. The three cards ran to different heights, so their bottom borders did not
 * line up. `align-items: stretch` alone cannot fix it: the recovered page CSS
 * sets `height: 100%` on the card, and against an auto-height row that
 * resolves to `auto` and cancels the stretch. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card {
	height: auto;
	align-self: stretch;
}

/* The hero eyebrow on `quotation-generator` is an `inline-flex` pill inside a
 * `core/html` payload. The copy stack gives every child `width: 100%`, and the
 * pill is `content-box`, so its 16px of side padding pushed it 18px past a
 * 390px screen. */
.abk-hero-dark .aibk-pill {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* The first security card's title is the page's single `<h1>` — an approved
 * deviation from U8 — and TT5 gives an `h1` its own size, so it rendered at
 * 22px beside three 18px siblings. The heading level carries the SEO meaning;
 * the size should not. */
.wp-block-group h1.wp-block-heading.has-large-font-size {
	font-size: 18px !important;
}

/* ---------------------------------------------------------------------------
 * QG-2 — the pricing table, measured against Alpesh's screenshot of the
 * original rather than against the payload alone.
 * ------------------------------------------------------------------------- */

/* 1. The whole card header is centred in the original: plan name, price,
 * tenure and button. Elementor's container carried the alignment; block groups
 * inherit the page's left alignment instead. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card > .wp-block-group > .wp-block-group {
	text-align: center;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-buttons {
	justify-content: center;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .center {
	justify-content: center;
	line-height: 1;
}

/* `.price-before` is 40px and the body line-height is 1.6, so the price row
 * measured 64px against the original's 40. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .center .price-before,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .center .txt-l {
	line-height: 1;
}

/* 2. `per business license per year` is ONE line in the original. The
 * converter wrote the two halves as separate paragraphs. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .annual-license-tenure,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .lifetime-license-tenure {
	font-size: 14px;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .annual-license-tenure p,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .lifetime-license-tenure p {
	display: inline;
	margin: 0;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .annual-license-tenure p + p::before,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .lifetime-license-tenure p + p::before {
	content: " ";
}

/* 3. `.price-diff-percent` is `opacity: 0` in the recovered page CSS — a
 * deliberately hidden block — but it still occupied 26px, which opened a gap
 * between the price and the tenure that the original does not have. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .price-diff-percent {
	display: none;
}

/* 4. The buttons. The recovered rules target `.elementor-button`, which no
 * longer exists on the page, so all three rendered as the generic solid green
 * block button. Values are that CSS's own: padding 8px 32px, weight 600,
 * radius 4, a 2px #008858 border, `btn-primary` filled and `btn-secondary`
 * outlined. `!important` because core writes the preset colour classes with
 * it. */
.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-primary .wp-block-button__link,
.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-secondary .wp-block-button__link {
	padding: 8px 32px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	border: 2px solid #008858;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-primary .wp-block-button__link {
	background-color: #008858 !important;
	color: #FFFFFF !important;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-secondary .wp-block-button__link {
	background-color: transparent !important;
	color: #008858 !important;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-primary .wp-block-button__link:hover {
	background-color: transparent !important;
	color: #008858 !important;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-button.btn-secondary .wp-block-button__link:hover {
	background-color: #008858 !important;
	color: #FFFFFF !important;
}

/* 5. The feature rows. The original runs them 26px apart -- 20px of line plus
 * 3px of padding each side. The widget's own `title_padding` of 8px would give
 * 36px, half again as tall, so the screenshot is taken as authoritative. The
 * caret follows its label immediately rather than being pushed to the far
 * edge. */
.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary {
	padding: 3px 48px;
	line-height: 1.4;
}

.wp-block-group.pricing-plans .pricing-features .wp-block-details:has(.plan-feature) > summary::after {
	margin-left: 6px;
	width: 9px;
	height: 9px;
}

.wp-block-group.pricing-plans .pricing-features .plan-feature {
	padding-block: 2px;
}

/* Three corrections after comparing with Alpesh's screenshot of the original.
 *
 * 1. `.price-diff-percent` kept its 26px because the page CSS reveals it with
 *    `.annual.selected { display: inline-block }` and the QG-1 rule that turns
 *    that into `block` sits at 0,4,0. Matching that weight.
 * 2. The feature rows carried the card's own 8px gap on top of their padding,
 *    so they ran 34px apart against the original's 26.
 * 3. The third card's inner group started 8px lower than the other two, which
 *    pushed its whole header out of line. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.price-diff-percent {
	display: none;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.pricing-features > * {
	margin-block-start: 0;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card > .wp-block-group {
	margin-block-start: 0;
}

/* The third card sat 8px lower than the other two. Its `post_content` carries
 * whitespace text nodes around the inner group, and inside a block container
 * those form an anonymous line box. Making the card a flex column drops
 * whitespace-only nodes entirely, and lets the inner group fill the card. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card {
	display: flex;
	flex-direction: column;
}

.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card > .wp-block-group {
	flex: 1 1 auto;
}

/* The hidden discount block again. The QG-1 reveal rule
 * `.wp-block-group.pricing-plan-card .wp-block-group.annual.selected` is
 * 0,5,0; matching that weight rather than reaching for `!important`. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.annual.price-diff-percent,
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .wp-block-group.lifetime.price-diff-percent {
	display: none;
}

/* The `Best Seller` ribbon is the first child of the third card's header, and
 * it is absolutely positioned, so it takes no space — but the heading after it
 * is no longer `:first-child` and picked up the card's 8px gap. That put the
 * whole third card 8px out of line with the other two. */
.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card .best-seller-ribbon + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * QG-3 — the pricing table, third pass. Every number below is the Elementor
 * container's own setting, not an estimate from a screenshot.
 * ------------------------------------------------------------------------- */

/* 1. The Annual / Lifetime toggle and the `Save up to 60%` line are
 * `hidden_desktop`, `hidden_tablet` AND `hidden_mobile` in the payload — they
 * do not appear on the original at any width. The converter never reads
 * Elementor's responsive visibility settings, so both rendered.
 *
 * Hidden rather than deleted: the toggle's script still runs `showAnnualPrice()`
 * on load, which is what keeps `.annual.selected` on the visible prices. */
.wp-block-group.abk-hidden-in-original {
	display: none;
}

/* 2. Card spacing, from the containers themselves:
 *
 *   card        `6c3e13f`  gap 8, padding 0, radius 4
 *   header      `2c610c1`  padding 12 0 8, margin 16 0 8, column, centre, gap 16
 *   price wrap  `8e54c51`  centre, gap 8
 *   button wrap `1474b28`  centre, gap 4
 *   features    `4aa7281`  padding 24 0 32, centre
 *
 * The blanket 8px gap that replaced core's 19.2px was closer than the default
 * but still wrong in three places at once. */
.wp-block-group.pricing-plans .pricing-plan-card > .wp-block-group > .wp-block-group:not(.pricing-features) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 12px 0 8px;
	margin: 16px 0 8px;
}

.wp-block-group.pricing-plans .pricing-plan-card > .wp-block-group > .wp-block-group:not(.pricing-features) > .wp-block-group:not(.best-seller-ribbon) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-buttons {
	gap: 4px;
	margin: 0;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-group.pricing-features {
	padding: 24px 0 32px;
}

.wp-block-group.pricing-plans .pricing-plan-card .wp-block-separator {
	margin: 0;
	width: 100%;
}

/* The tenure line carries `padding: 0 48px` in the payload. */
.wp-block-group.pricing-plans .pricing-plan-card .annual-license-tenure,
.wp-block-group.pricing-plans .pricing-plan-card .lifetime-license-tenure {
	padding-inline: 48px;
}

/* 3. The `Best Seller` ribbon. The band, its colour and its type are widget
 * settings — `_background_color: #008858`, `text_color: #FFFFFF`, Open Sans
 * 14 / 700, `_padding: 6px` — so none of it survived; only the geometry,
 * which lives in the page's custom CSS, did. It rendered as grey 16px text on
 * nothing. */
/* `width: 200px` is in the recovered page CSS, but the header rule above gives
 * every `.wp-block-group` child a full width, which stretched the band to
 * 425px — a green diagonal across half the card instead of a corner ribbon. */
.wp-block-group.pricing-plans .pricing-plan-card .best-seller-ribbon {
	background-color: #008858;
	padding: 6px;
	text-align: center;
	width: 200px;
}

.wp-block-group.pricing-plans .pricing-plan-card .best-seller-ribbon p {
	margin: 0;
	color: #FFFFFF;
	font-family: "Open Sans", var(--wp--preset--font-family--dm-sans), sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * MOB-1 — the mobile pricing gap, the mobile menu and the mobile footer.
 * Measured against production rendered at 390px, not against the desktop.
 * ------------------------------------------------------------------------- */

/* 1. The pricing cards stack with no gap below 1024px, because the desktop row
 * deliberately has `flex_gap: 0` — the three cards are meant to touch and share
 * borders. Stacked, that reads as one long box. */
@media (max-width: 1023px) {
	.wp-block-group.pricing-plans > .wp-block-group {
		gap: 24px;
	}

	.wp-block-group.pricing-plans .wp-block-group.pricing-plan-card {
		border-radius: 4px;
	}
}

/* 2. The mobile menu.
 *
 * Production drops a white panel below the header with the links LEFT aligned
 * at 24px, top-level items only, and `Log In` / `Start for Free` as real
 * buttons. Ours rendered right-aligned, because the navigation block carried
 * `justifyContent: right` — that setting is meant for the collapsed hamburger,
 * which is positioned by its wrapper group instead. Changed to `left` in
 * `parts/header.html` and `parts/header-ads.html`; the rest is here. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 4px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	color: #111827;
	text-align: left;
}

/* Sub-items stay visible — we have no disclosure script — but they are
 * indented and quieter, so the two levels read as a hierarchy rather than as
 * one flat list. Production collapses them behind a caret. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 16px;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 7px 0;
	font-size: 14px;
	color: #4B5563;
}

/* `Log In` and `Start for Free` are menu items here, not buttons. Matched to
 * the header's own buttons and identified by their destination, so the rule
 * does not depend on the label. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="app.aibotkit.io/dashboard"],
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="app.aibotkit.io/sign-up"] {
	display: inline-block;
	margin-top: 12px;
	padding: 11px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="app.aibotkit.io/dashboard"] {
	border: 1px solid #C8C8C4;
	color: #111827;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="app.aibotkit.io/sign-up"] {
	background-color: #17976E;
	color: #FFFFFF;
}

/* The toggle's own mobile padding, from the widget: `title_padding_mobile`
 * is 8px 24px against the desktop's 8px 48px. At 48px the longer labels
 * wrapped to two lines and the tick floated to the middle of them. */
@media (max-width: 767px) {
	.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary {
		padding-inline: 24px;
		align-items: flex-start;
	}

	.wp-block-group.pricing-plans .pricing-features .wp-block-details > summary::before {
		margin-top: 3px;
	}

	.wp-block-group.pricing-plans .pricing-features .plan-feature {
		padding-inline: 24px;
	}
}

/* ==========================================================================
 * The footer, replicated from production. Measured at 1440px on
 * `https://aibotkit.io/about-us/`, 2026-08-31.
 *
 * Supersedes MOB-1 point 3 and all of MOB-2, which built the footer as one
 * four-column grid. Production is not four columns — it is TWO halves: a brand
 * block on the left and a three-column menu group on the right, with a wide gap
 * between them that the equal-column version could never produce.
 *
 *   container   1140px, x 150..1290
 *   brand       x 160, content 265 wide
 *   menu group  x 720, 570 wide — exactly the right half
 *   menu cols   x 745 / 935 / 1125 — 190px pitch, 140px wide
 *   headings    16px / 600 / #00D68B
 *   links       16px / line-height 24px, 24px pitch — no extra gap
 *   blurb       14px / 21px / #EEEEEE, 265px wide
 *   social      5 icons, 38px, ~5px apart
 *   rule        1px #666666, full 1140
 *   copyright   16px / #FFFFFF, LEFT aligned
 * ========================================================================== */

/* 1140px, not `alignwide`. theme.json sets `wideSize: 1440px`, so an alignwide
 * group fills a 1440px viewport edge to edge and the brand block sits at x=24
 * instead of production's x=160. Capping here rather than changing `wideSize`,
 * which every page on the site reads. */
.wp-block-group.abk-footer-top,
.wp-block-group.abk-footer-legal {
	max-width: 1140px;
	margin-inline: auto;
}

.wp-block-group.abk-footer-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

/* Production insets the brand content 10px inside the container. */
.wp-block-group.abk-footer-brand {
	padding-left: 10px;
}

/* The brand column. Production insets its content 10px from the container
 * edge and holds the blurb to 265px, which is what gives the paragraph its
 * four lines rather than two long ones. */
.wp-block-group.abk-footer-brand > * {
	max-width: 265px;
	margin-top: 0;
}

.wp-block-group.abk-footer-brand > .wp-block-image {
	margin-bottom: 21px;
}

p.abk-footer-blurb {
	font-size: 14px;
	line-height: 21px;
	color: #EEEEEE;
	margin-bottom: 24px;
}

.wp-block-social-links.abk-footer-social {
	gap: 5px;
	margin-bottom: 0;
}

.wp-block-social-links.abk-footer-social .wp-social-link {
	width: 38px;
	height: 38px;
}

/* The three menu columns, in the right half. 3 x 190px is 570px, which is
 * exactly the half — so the columns land on production's x positions without
 * any nudging. */
.wp-block-group.abk-footer-menus {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	padding: 0 25px;
}

/* The group keeps its `is-layout-flow` class even though this rule makes it a
 * grid, so core's `:where(.is-layout-flow) > * { margin-block-start: 1.2rem }`
 * still fires — on children 2 and 3 only, because child 1 is exempt. The
 * result was the second and third columns sitting 19.2px lower than the first,
 * which reads as a wonky footer and has no obvious cause in this file. */
.wp-block-group.abk-footer-menus > .wp-block-group,
.wp-block-group.abk-footer-top > .wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-group.abk-footer-menus > .wp-block-group > h2.wp-block-heading {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #00D68B;
}

/* Core gives a vertical navigation the theme's block gap, which spaced these
 * links about 12px further apart than production and made the column read as
 * a list of paragraphs. Production runs them at a flat 24px pitch — the
 * line-height and nothing else. */
.wp-block-group.abk-footer-menus .wp-block-navigation {
	gap: 0;
	font-size: 16px;
	line-height: 24px;
}

.wp-block-group.abk-footer-menus .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0;
}

/* The rule and the copyright. Production left-aligns the copyright under a
 * full-width hairline; ours centred it with no rule at all. */
.wp-block-group.abk-footer-legal {
	margin-top: 58px;
	padding-top: 25px;
	border-top: 1px solid #666666;
}

.wp-block-group.abk-footer-legal p {
	margin: 0;
	font-size: 16px;
	color: #FFFFFF;
	text-align: left;
}

/* Below the breakpoint the two halves stack, each menu takes its own row, and
 * the brand block goes LAST — the order Alpesh asked for on 2026-08-31. The
 * brand is first in the markup because that is the desktop order; `order`
 * moves it here rather than a second copy of the markup. */
@media (max-width: 781px) {
	.wp-block-group.abk-footer-top {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.wp-block-group.abk-footer-brand {
		order: 1;
	}

	.wp-block-group.abk-footer-brand > * {
		max-width: none;
	}

	.wp-block-group.abk-footer-menus {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-left: 0;
	}

	.wp-block-group.abk-footer-brand {
		padding-left: 0;
	}

	.wp-block-group.abk-footer-legal {
		margin-top: 2.5rem;
	}
}

/* ==========================================================================
 * ABT-1 … ABT-4 — /about-us/ (post 113)
 *
 * Every value below is measured, not chosen: from `elementor-payloads/113.json`
 * and from production's `post-113.css`, then confirmed against the live page
 * at 1280px. The four sections were Elementor `icon-box` widgets, whose skin
 * lived entirely in widget settings — so the conversion carried the words
 * across and left nothing behind that IS a card.
 * ========================================================================== */

/* ABT-4 — the hero. Production is one centred flex row: a 43.89px sparkle
 * beside a 42px heading, NOT the 50/50 column pair the converter produced.
 * The 3.851% width in `post-113.css` resolves to 43.89px in a 1140px
 * container; 44px is that number, fixed, so it cannot drift with the layout. */
.wp-block-group.abk-about-hero {
	gap: 12px;
}

.wp-block-group.abk-about-hero .abk-about-sparkle {
	flex: 0 0 auto;
	margin: 0;
}

/* The heading was a raw HTML widget carrying its own <style>: 42px, weight
 * 900, #14382D, with the product name in #00B686. The converter kept the
 * widget's typography panel (56px / 500) and dropped the inline block, so the
 * page showed the wrong size AND lost the green. */
h1.abk-about-title {
	margin: 0;
	font-size: 42px;
	font-weight: 900;
	line-height: 1.2;
	color: #14382D;
}

h1.abk-about-title span {
	color: #00B686;
}

@media (max-width: 781px) {
	h1.abk-about-title {
		font-size: 30px;
	}

	.wp-block-group.abk-about-hero .abk-about-sparkle img {
		width: 32px;
	}
}

/* ABT-2 — the three row-1 cards. The wrapper survived with its 12px padding
 * and 10px radius; the shadow, the 230px floor and the column alignment did
 * not. `border-style:none` is explicit in production — do not add a border. */
.wp-block-columns.abk-card-grid {
	gap: 20px;
}

.wp-block-group.abk-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 230px;
	box-shadow: 1px 1px 20px 0 rgba(0, 136, 88, 0.07);
	border: none;
}

/* Core's constrained layout writes `margin: auto` on every child. Inside a
 * flex column an auto margin CENTRES the item, so the card contents would
 * drift to the middle while production keeps them hard left. */
.wp-block-group.abk-card > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* The card groups carry `"layout":{"type":"default"}`, NOT `constrained`.
 * That is deliberate and load-bearing. Core prints
 * `.is-layout-constrained > :where(:not(.alignleft)...) { margin-left: auto
 * !important; margin-right: auto !important }` -- `!important`, so no
 * specificity wins against it and every card icon sat centred. Flow layout
 * emits no such rule. Do not switch these groups back to constrained.
 * Production puts the icon hard left with a 15px gap under it. */
.wp-block-group.abk-card > figure.wp-block-image,
.wp-block-group.abk-card--green > figure.wp-block-image {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 15px;
}

.wp-block-group.abk-card > h3.wp-block-heading,
.wp-block-group.abk-card--green > h3.wp-block-heading {
	margin-top: 0;
}

/* 30px / 600 / #143B2D, line-height 2.1rem. The `large` preset the converter
 * chose is 24px and core emits it with `!important`, so the preset class has
 * to be beaten on specificity, not on weight. */
.wp-block-group.abk-card > h3.wp-block-heading {
	font-size: 30px;
	font-weight: 600;
	line-height: 2.1rem;
	color: #143B2D;
	margin-bottom: 16px;
	text-align: left;
}

/* ABT-1 — the four green cards. Without this block the row reads as empty:
 * those four SVGs are `stroke="white"`, drawn to sit on the gradient. */
.wp-block-columns.abk-card-grid--green {
	gap: 20px;
}

.wp-block-group.abk-card--green {
	padding: 24px;
	border-radius: 10px;
	background-image: linear-gradient(180deg, #01B475 0%, #006A44 100%);
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
	height: 100%;
}

.wp-block-group.abk-card--green > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.wp-block-group.abk-card--green > h3.wp-block-heading {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5rem;
	color: #FFFFFF;
	margin-top: 0;
	margin-bottom: 1rem;
}

.wp-block-group.abk-card--green > p {
	font-size: 14px;
	line-height: 1.5;
	color: #FFFFFF;
	margin-bottom: 0;
}

/* Four cards do not fit at 1280px on a phone. Production wraps to one column
 * and takes the widget to 100%, which core's column stacking already does —
 * this only keeps the equal-height rule from stretching a lone card. */
@media (max-width: 781px) {
	.wp-block-group.abk-card--green {
		height: auto;
	}

	.wp-block-group.abk-card {
		min-height: 0;
	}
}

/* `:where(...is-layout-flow) > *` sets `margin-block-start: 1.2rem`. It is
 * `:where()`-wrapped, so it carries zero specificity and a plain rule wins.
 * Production runs the paragraph straight on from the title. */
.wp-block-group.abk-card > p,
.wp-block-group.abk-card--green > p {
	margin-top: 0;
}

/* ABT-5 — the "Legacy of Innovation" stat tiles, reported by Alpesh 2026-08-30.
 *
 * The converter gave this row the full 1170px content width, so each 258x120
 * tile stretched to about 275px and the row filled the page edge to edge.
 * Production holds the row and its paragraph to a 900px band, centred:
 *
 *   row       190 -> 1090 in a 1280px viewport, padding 10px, gap 20px
 *   each tile 204 x 96  (the 258 x 120 source, scaled to 0.79)
 *   spacing   20px under the heading, 20px over the paragraph
 *
 * The band is what makes the tiles smaller. Do not scale the images instead —
 * they would then stop lining up with the paragraph below them. */
.wp-block-columns.abk-stats-row,
p.abk-legacy-intro {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-columns.abk-stats-row {
	gap: 20px;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

p.abk-legacy-intro {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* The tiles are the only content in their columns, so the column can shrink
 * to the image and the image can fill the column. */
.wp-block-columns.abk-stats-row .wp-block-image img {
	width: 100%;
	height: auto;
}

/* No breakpoint of our own here. The band is a max-width, so between 782px
 * and 900px the row simply narrows with the page — measured 183 x 85 per tile
 * at a 900px viewport, which still reads. Core stacks the columns at 781px. */

/* ==========================================================================
 * POST-1 — the two-column single post and its table of contents.
 *
 * Replaces Elementor Pro's `table-of-contents.default` widget, which lived in a
 * theme-builder template and so left nothing in the database to convert. The
 * block is `aibotkit/table-of-contents` (`blocks/table-of-contents/`) and it is
 * rendered from the post's own headings on every request.
 *
 * Measured from production at 1280px:
 *   content column   709px    rail 389px    total 1168px, gap ~70px
 *   box              #F4FCF1, radius 50px, padding 20px 0
 *   header           padding 20px, 1px bottom border #9DA5AE
 *   title            16px / 400 / #008858
 *   list             padding 20px, items 16px / line-height 24px / #333, 8px apart
 * ========================================================================== */

.wp-block-columns.abk-post-columns {
	gap: 70px;
}

/* The rail follows the reader. Production's does NOT — measured, it scrolls
 * away at 2,470px and never comes back, which makes a 15-entry index useless
 * past the first screen. A deliberate improvement, not a parity miss.
 *
 * `position: sticky` goes on the BOX, not on the column. A sticky element only
 * travels inside its own containing block, so a sticky column whose height is
 * its content height has nowhere to travel — it scrolls away exactly like a
 * static one, silently. The column must stretch (do not set `align-items:
 * flex-start` on the row) and the box inside it is what sticks. */
.wp-block-column.abk-post-rail > .abk-toc {
	position: sticky;
	top: 96px;
}

.abk-toc {
	background: #F4FCF1;
	border-radius: 24px;
	padding: 20px 0;
	font-size: 16px;
	color: #333333;
}

.abk-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 20px 20px;
	border-bottom: 1px solid #9DA5AE;
}

h2.abk-toc__title {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #008858;
}

.abk-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #008858;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.abk-toc__toggle:focus-visible {
	outline: 2px solid #008858;
	outline-offset: 2px;
}

/* Open, the chevron points up, as production's does. Closed, it flips. The
 * class comes from `data-wp-class--abk-toc--closed`, so the arrow and the list
 * can never disagree — both read the same piece of state. */
.abk-toc--closed .abk-toc__toggle {
	transform: rotate(180deg);
}

.abk-toc--closed .abk-toc__header {
	border-bottom-color: transparent;
	padding-bottom: 0;
}

/* Hierarchical numbering — 1., 2., then 2.1., 2.2. — the way production reads.
 * `counters()` with a "." separator produces it from real `<ol>` nesting and
 * from nothing else, which is why `render.php` builds a tree rather than a flat
 * list with indent classes. A flat list can only ever count 1 to 15. */
ol.abk-toc__list,
ol.abk-toc__sublist {
	margin: 0;
	list-style: none;
	counter-reset: abk-toc;
}

ol.abk-toc__list {
	padding: 20px 20px 0;
}

ol.abk-toc__sublist {
	padding: 8px 0 0 20px;
}

.abk-toc__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
	margin-bottom: 8px;
	line-height: 24px;
	counter-increment: abk-toc;
}

.abk-toc__item > .abk-toc__link::before {
	content: counters(abk-toc, ".") ". ";
	float: left;
	margin-left: -30px;
	width: 30px;
	color: #333333;
}

.abk-toc__item > .abk-toc__link {
	grid-column: 2;
	margin-left: 30px;
}

.abk-toc__item > ol {
	grid-column: 1 / -1;
}

.abk-toc__item:last-child {
	margin-bottom: 0;
}

a.abk-toc__link {
	color: #333333;
	text-decoration: none;
}

a.abk-toc__link:hover,
a.abk-toc__link:focus-visible {
	color: #008858;
	text-decoration: underline;
}

/* A jump to an anchor must not put the heading under the sticky header. */
.abk-post-main :is(h2, h3, h4)[id] {
	scroll-margin-top: 96px;
}

/* Below the columns breakpoint core stacks the two columns, which puts the
 * index above the article — the right order. Production minimises the box on
 * tablet for the same reason; ours collapses to the header row instead, which
 * is the same idea with one less state to explain. */
@media (max-width: 781px) {
	.wp-block-columns.abk-post-columns {
		gap: 32px;
	}

	.wp-block-column.abk-post-rail {
		position: static;
		order: -1;
	}

	.abk-toc {
		border-radius: 16px;
	}
}

/* ---------------------------------------------------------------------------
   TABS-1 · the "Sound familiar?" tab control — 3699, 3791
   Production renders this through Elementor's nested-tabs widget: a centred
   pill row, the active pill filled green, one panel visible. The conversion
   left three bare <details>. Measured on production 2026-08-31:
   role="tab" / aria-selected / aria-controls, so the JS builds the same.

   Everything here is scoped to .abk-tabs--ready, the class assets/js/tabs.js
   adds. WITHOUT JS none of it applies and the section stays an accordion —
   which is the point: no rule may hide content that JS did not un-hide.
   --------------------------------------------------------------------------- */
.wp-block-group.abk-tabs--ready > .abk-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}

.wp-block-group.abk-tabs--ready .abk-tabs__tab {
	appearance: none;
	border: 1px solid #D1FAE5;
	background: #F0FDF4;
	color: #065F46;
	border-radius: 999px;
	padding: 10px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wp-block-group.abk-tabs--ready .abk-tabs__tab:hover {
	background: #DCFCE7;
}

.wp-block-group.abk-tabs--ready .abk-tabs__tab[aria-selected="true"] {
	background: #01B475;
	border-color: #01B475;
	color: #fff;
}

/* A visible focus ring is not optional on a control that is keyboard-driven. */
.wp-block-group.abk-tabs--ready .abk-tabs__tab:focus-visible {
	outline: 2px solid #006A44;
	outline-offset: 2px;
}

/* The summary is the tab label once the pill row exists. Hidden, not removed,
   so the <details> keeps working if the JS is ever pulled. */
.wp-block-group.abk-tabs--ready .abk-tabs__panel > summary {
	display: none;
}

.wp-block-group.abk-tabs--ready .abk-tabs__panel {
	border: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.wp-block-group.abk-tabs--ready .abk-tabs__tab {
		padding: 9px 16px;
		font-size: 14px;
	}
}