/**
 * CherryBerry ERP — core stylesheet.
 *
 * 1.  Design tokens
 * 2.  Reset and base elements
 * 3.  Layout primitives
 * 4.  Buttons and links
 * 5.  Header, mega menu and mobile drawer
 * 6.  Page header and breadcrumbs
 * 7.  Cards and shared components
 * 8.  Product screenshot frames
 * 9.  Testimonials
 * 10. Blog cards
 * 11. Forms
 * 12. Final CTA band
 * 13. Footer
 * 14. Motion and utilities
 * 15. Responsive
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
	/* Brand — taken from the Cherry Berry ERP logo. */
	--cherry: #CE1338;
	--cherry-deep: #9E0E2A;
	--cherry-soft: #FCE7EC;
	--berry: #E85D7A;

	/* Neutrals */
	--ink: #0F1729;
	--ink-2: #1E293B;
	--slate: #516079;
	--slate-2: #66707F;
	--bg: #FFFFFF;
	--bg-soft: #F7F8FB;
	--bg-soft-2: #F1F4F9;
	--line: #E7EAF0;
	--line-2: #EEF1F6;

	/* Support colours */
	--green: #16A34A;
	--green-soft: #E7F6ED;
	--amber: #B45309;
	--amber-soft: #FBF0DC;
	--blue: #2563EB;
	--blue-soft: #E7EEFE;
	--red: #B91C1C;
	--red-soft: #FDECEC;

	/* Radii */
	--radius-s: 12px;
	--radius: 16px;
	--radius-l: 22px;

	/* Elevation */
	--shadow-s: 0 1px 2px rgba(15, 23, 41, .06), 0 1px 3px rgba(15, 23, 41, .05);
	--shadow: 0 6px 20px -6px rgba(15, 23, 41, .14), 0 2px 6px rgba(15, 23, 41, .06);
	--shadow-l: 0 24px 60px -18px rgba(15, 23, 41, .26), 0 8px 24px -12px rgba(15, 23, 41, .12);

	--grad-cherry: linear-gradient(135deg, var(--cherry) 0%, var(--berry) 100%);

	/* Layout */
	--maxw: 1200px;
	--maxw-text: 760px;
	--gutter: clamp(18px, 4vw, 40px);

	/* Type */
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--slate);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	color: var(--ink);
	line-height: 1.15;
	margin: 0;
	letter-spacing: -.02em;
	font-weight: 800;
}

p { margin: 0; }

a {
	color: var(--cherry);
	text-decoration: none;
}

a:hover { color: var(--cherry-deep); }

img,
svg,
video,
iframe {
	max-width: 100%;
	display: block;
}

img { height: auto; }

ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }

button { font: inherit; }

/* A visible, high-contrast focus ring on every interactive element. */
:focus-visible {
	outline: 3px solid var(--cherry);
	outline-offset: 2px;
	border-radius: 6px;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 500;
	background: var(--cherry);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 10px 0;
	font-weight: 600;
}

.skip:focus {
	left: 0;
	color: #fff;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.screen-reader-text:focus {
	background: #fff;
	clip: auto;
	clip-path: none;
	color: var(--ink);
	display: block;
	height: auto;
	left: 6px;
	padding: 14px 22px;
	top: 6px;
	width: auto;
	z-index: 100000;
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.cb-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 110px); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }

.center {
	text-align: center;
	margin-inline: auto;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--cherry);
	background: var(--cherry-soft);
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.eyebrow .cb-icon { width: 15px; height: 15px; }

.h-lead {
	font-size: clamp(28px, 3.6vw, 44px);
	margin-bottom: 16px;
	max-width: 20ch;
}

.center .h-lead { margin-inline: auto; }

.lead-sub {
	font-size: clamp(16px, 1.5vw, 18px);
	color: var(--slate);
	max-width: 62ch;
}

.center .lead-sub { margin-inline: auto; }

.split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(34px, 5vw, 64px);
	align-items: center;
}

.split.rev { grid-template-columns: 1.1fr 1fr; }
.split > * { min-width: 0; }

.mt28 { margin-top: 28px; }
.mt40 { margin-top: 40px; }

/* ============================================================
   4. BUTTONS AND LINKS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 15px;
	padding: 13px 22px;
	min-height: 46px;
	border-radius: 12px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
	white-space: nowrap;
	text-align: center;
}

.btn .cb-icon { width: 18px; height: 18px; }

.btn-primary {
	background: var(--cherry);
	color: #fff;
	box-shadow: 0 8px 18px -6px rgba(206, 19, 56, .5);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--cherry-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -8px rgba(206, 19, 56, .55);
}

.btn-ghost {
	background: #fff;
	color: var(--ink);
	border-color: var(--line);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	border-color: var(--cherry);
	color: var(--cherry);
	transform: translateY(-2px);
}

.btn-light {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: rgba(255, 255, 255, .32);
}

.btn-light:hover,
.btn-light:focus-visible {
	background: rgba(255, 255, 255, .24);
	color: #fff;
}

.btn-white { background: #fff; color: var(--cherry); }

.btn-white:hover,
.btn-white:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	color: var(--cherry-deep);
}

.cb-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cherry);
	font-weight: 600;
	font-size: 15px;
	/* Keeps the hit area comfortably tappable without changing the visual. */
	min-height: 44px;
}

.link-arrow .cb-icon {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.link-arrow:hover .cb-icon,
.link-arrow:focus-visible .cb-icon { transform: translateX(4px); }

/* ============================================================
   5. HEADER, MEGA MENU AND DRAWER
   ============================================================ */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
}

.header.scrolled {
	box-shadow: 0 4px 24px -10px rgba(15, 23, 41, .18);
	border-bottom-color: var(--line-2);
	background: rgba(255, 255, 255, .95);
}

.nav {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 74px;
}

.brand,
.custom-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--ink);
	min-height: 44px;
}

.brand img {
	height: 42px;
	width: auto;
	object-fit: contain;
}

.brand-text {
	font-family: var(--display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.02em;
}

.brand-text span { color: var(--cherry); }

.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

.nav-links > li { position: relative; }

.nav-links > li > a,
.nav-links > li > button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 15px;
	color: var(--ink-2);
	padding: 9px 13px;
	border-radius: 9px;
	background: none;
	border: none;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
	position: relative;
}

.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > button:focus-visible {
	color: var(--cherry);
	background: var(--cherry-soft);
}

.nav-links > li > a.active,
.nav-links > li.is-current > a { color: var(--cherry); }

.nav-links > li > a.active::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 2px;
	height: 2px;
	background: var(--cherry);
	border-radius: 2px;
}

.caret {
	width: 15px;
	height: 15px;
	transition: transform .25s ease;
}

.nav-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.nav-cta .btn {
	padding: 11px 18px;
	font-size: 14.5px;
	min-height: 42px;
}

/* Standard dropdown for menu items with children, centred under the item. */
.nav-links .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-l);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 120;
}

.nav-links > li:hover > .sub-menu,
.nav-links > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nav-links .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14.5px;
	color: var(--ink-2);
	font-weight: 500;
}

.nav-links .sub-menu a:hover { background: var(--bg-soft); color: var(--cherry); }

/* Mega menu, populated from the ERP module post type.
   The panel is positioned against the header rather than the menu item so it
   spans the full content width and stays centred on the page. */
.nav-links > li.has-mega { position: static; }

.mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: min(940px, calc(100vw - (var(--gutter) * 2)));
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-l);
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, transform .24s ease, visibility .24s;
	z-index: 120;
}

/* Bridges the gap under the trigger so the panel survives the pointer crossing it. */
.mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.has-mega:hover .caret,
.has-mega.is-open .caret { transform: rotate(180deg); }

.mega-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.mega-item {
	display: flex;
	gap: 12px;
	padding: 11px;
	border-radius: 12px;
	transition: background-color .18s ease, box-shadow .18s ease;
	color: inherit;
}

.mega-item:hover,
.mega-item:focus-visible { background: var(--bg-soft); }

.mega-ic {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	background: var(--cherry-soft);
	color: var(--cherry);
}

.mega-ic .cb-icon { width: 20px; height: 20px; }

.mega-txt { min-width: 0; }

.mega-title {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	font-family: var(--sans);
	margin-bottom: 1px;
}

.mega-sub {
	display: block;
	font-size: 12.5px;
	color: var(--slate-2);
	line-height: 1.4;
}

/* A module with children keeps its group together on a full-width row. The
   columns and gap match the grid above, so the row is indistinguishable from
   the others and the tiles stay on the same column lines. */
.mega-group {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

/* Child tiles read as one step down: a smaller chip and a lighter title,
   with the same palette as every other tile. */
.mega-item-sub .mega-ic {
	width: 32px;
	height: 32px;
	border-radius: 9px;
}

.mega-item-sub .mega-ic .cb-icon { width: 17px; height: 17px; }

.mega-item-sub .mega-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
}

.mega-item-sub .mega-sub { font-size: 12px; }

.mega-foot {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.mega-foot > span { font-size: 14px; color: var(--slate); }

.burger {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	width: 46px;
	height: 46px;
	cursor: pointer;
	color: var(--ink);
	align-items: center;
	justify-content: center;
}

.burger .cb-icon { width: 22px; height: 22px; }

/* Mobile drawer */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 150;
	visibility: hidden;
	pointer-events: none;
}

.drawer-bg {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 41, .5);
	opacity: 0;
	transition: opacity .3s ease;
	border: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

.drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(360px, 86vw);
	background: #fff;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.drawer.open {
	visibility: visible;
	pointer-events: auto;
}

.drawer.open .drawer-bg { opacity: 1; }
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.drawer-top img { height: 38px; width: auto; }

.drawer-close {
	background: var(--bg-soft);
	border: none;
	border-radius: 10px;
	width: 44px;
	height: 44px;
	cursor: pointer;
	color: var(--ink);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.drawer-close .cb-icon { width: 22px; height: 22px; }

.drawer-nav a {
	display: block;
	padding: 13px 12px;
	min-height: 48px;
	font-weight: 600;
	color: var(--ink);
	border-radius: 10px;
	font-size: 16px;
}

.drawer-nav a:hover,
.drawer-nav a:focus-visible { background: var(--bg-soft); color: var(--cherry); }
.drawer-nav a.is-current { color: var(--cherry); }

.drawer-nav details summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 12px;
	min-height: 48px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	border-radius: 10px;
	font-size: 16px;
}

.drawer-nav details summary::-webkit-details-marker { display: none; }
.drawer-nav details[open] summary .caret { transform: rotate(180deg); }

.drawer-nav .sub a {
	padding: 11px 12px 11px 24px;
	font-weight: 500;
	font-size: 15px;
	color: var(--slate);
	min-height: 44px;
}

.drawer-nav .sub a.is-sub {
	padding-left: 42px;
	font-size: 14.5px;
	position: relative;
}

.drawer-nav .sub a.is-sub::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: var(--line);
}

.drawer-cta {
	margin-top: auto;
	padding-top: 20px;
	display: grid;
	gap: 10px;
}

.drawer-cta .btn { width: 100%; }

/* ============================================================
   6. PAGE HEADER AND BREADCRUMBS
   ============================================================ */
.page-hero {
	position: relative;
	padding-block: clamp(40px, 6vw, 72px) clamp(36px, 5vw, 60px);
	background:
		radial-gradient(620px 340px at 85% -20%, rgba(232, 93, 122, .13), transparent 60%),
		radial-gradient(520px 380px at 5% 0%, rgba(206, 19, 56, .07), transparent 55%),
		var(--bg);
	border-bottom: 1px solid var(--line-2);
}

.page-hero h1 {
	font-size: clamp(30px, 4.4vw, 48px);
	margin-bottom: 14px;
	max-width: 22ch;
}

.page-hero .lead-sub { max-width: 66ch; }
.page-hero.center h1 { margin-inline: auto; }

.crumbs { margin-bottom: 18px; }

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--slate-2);
}

.crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--cherry); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

.crumb-sep {
	width: 13px;
	height: 13px;
	color: var(--slate-2);
	opacity: .7;
}

/* ============================================================
   7. CARDS AND SHARED COMPONENTS
   ============================================================ */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 44px;
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 44px;
}

/* Value proposition card */
.vcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 26px;
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.vcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

.vcard .vic {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--cherry-soft);
	color: var(--cherry);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.vcard .vic .cb-icon { width: 24px; height: 24px; }
.vcard h3 { font-size: 18px; margin-bottom: 8px; }
.vcard p { font-size: 14.5px; line-height: 1.6; }

/* ERP module card */
.mod-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 44px;
}

.mod {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 24px;
	transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mod::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 100%;
	background: var(--grad-cherry);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.mod:hover,
.mod:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--shadow-l);
	border-color: transparent;
}

.mod:hover::after,
.mod:focus-within::after { transform: scaleX(1); }

.mod-ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	background: linear-gradient(135deg, var(--cherry-soft), #fff);
	color: var(--cherry);
	border: 1px solid var(--line-2);
}

.mod-ic .cb-icon { width: 26px; height: 26px; }
.mod h3 { font-size: 19px; margin-bottom: 9px; }
.mod h3 a { color: inherit; }
.mod h3 a:hover { color: var(--cherry); }

/* The title link is stretched over the whole card, so the tap target is the
   card itself rather than a 24px line of text. */
.mod h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mod .feats,
.mod .link-arrow {
	position: relative;
	z-index: 2;
}
.mod > p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

.mod .feats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.mod .feats span {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--bg-soft);
	border: 1px solid var(--line-2);
	padding: 5px 10px;
	border-radius: 8px;
}

.mod .link-arrow { margin-top: auto; }

/* Feature checklist */
.feat-list {
	margin-top: 26px;
	display: grid;
	gap: 16px;
}

.feat-list li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.feat-list .ck {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--green-soft);
	color: var(--green);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.feat-list .ck .cb-icon { width: 15px; height: 15px; }

.feat-list b {
	color: var(--ink);
	font-family: var(--display);
	font-size: 15.5px;
	display: block;
}

.feat-list span { font-size: 14px; color: var(--slate); }

/* Trust strip */
.strip {
	border-top: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
	background: var(--bg-soft);
}

.strip .wrap {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block: 26px;
}

.strip p { font-size: 13.5px; color: var(--slate-2); font-weight: 500; }

.strip .pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 14px;
}

.pill .cb-icon { width: 15px; height: 15px; color: var(--cherry); }

/* ============================================================
   8. PRODUCT SCREENSHOT FRAMES
   ============================================================ */
.frame {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-l);
	overflow: hidden;
}

.frame-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line-2);
	background: linear-gradient(180deg, #fff, #fbfcfe);
}

.frame-bar .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.frame-url {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: 6px;
	background: var(--bg-soft);
	border: 1px solid var(--line-2);
	border-radius: 8px;
	padding: 5px 11px;
	font-size: 12px;
	color: var(--slate-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.frame-url .cb-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--green);
}

.frame-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--green);
	background: var(--green-soft);
	border-radius: 999px;
	padding: 4px 10px;
}

.frame-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

.frame-view {
	position: relative;
	background: #fff;
	line-height: 0;
}

.frame-view img { width: 100%; height: auto; }

/* Wide screenshots scroll sideways rather than shrinking to illegibility. */
.frame-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.frame-scroll img { min-width: 100%; }

.shot { margin: 0; }

.shot-cap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	justify-content: center;
	margin-top: 14px;
	font-size: 13px;
	color: var(--slate-2);
}

.shot-cap b {
	font-family: var(--display);
	font-weight: 700;
	color: var(--ink-2);
	font-size: 13.5px;
}

.swipe-hint { display: none; }

/* ============================================================
   9. TESTIMONIALS
   ============================================================ */
.tst-viewport {
	overflow: hidden;
	margin-top: 44px;
}

.tst-track {
	display: flex;
	gap: 20px;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.tst {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 28px;
	flex: 0 0 calc(33.333% - 14px);
	box-shadow: var(--shadow-s);
	display: flex;
	flex-direction: column;
	margin: 0;
}

.tst .stars {
	display: flex;
	gap: 2px;
	color: #D98500;
	margin-bottom: 14px;
}

.tst .stars .cb-icon { width: 17px; height: 17px; }

.tst blockquote {
	margin: 0;
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.6;
	flex: 1;
}

.tst .who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line-2);
}

.tst .av {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-weight: 800;
	color: #fff;
	font-size: 16px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--cherry);
}

.tst .av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tst .who b {
	font-family: var(--display);
	font-size: 15px;
	color: var(--ink);
	display: block;
}

/* Scoped to the text column so it never recolours the avatar initials,
   which sit on the brand red and must stay white. */
.tst .who > div > span { font-size: 12.5px; color: var(--slate-2); }
.tst .who .av { color: #fff; }

.tst-nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}

.tst-nav button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	color: var(--ink);
	display: grid;
	place-items: center;
	transition: border-color .2s ease, color .2s ease;
}

.tst-nav button:hover { border-color: var(--cherry); color: var(--cherry); }
.tst-nav .cb-icon { width: 20px; height: 20px; }

/* ============================================================
   10. BLOG CARDS
   ============================================================ */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.post-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	overflow: hidden;
	transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
	display: flex;
	flex-direction: column;
}

.post-card:hover,
.post-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--shadow-l);
	border-color: transparent;
}

.post-card .thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	position: relative;
	background: var(--bg-soft-2);
	display: block;
}

.post-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.post-card:hover .thumb img { transform: scale(1.06); }

/* Most migrated articles have no image on the source site, so the card falls
   back to a subject-matched icon on a branded ground rather than a stock photo. */
.post-card .thumb-fallback {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 15% 10%, rgba(232, 93, 122, .18), transparent 60%),
		linear-gradient(135deg, var(--cherry-soft), var(--bg-soft-2));
	color: var(--cherry);
	overflow: hidden;
}

.post-card .thumb-fallback::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(206, 19, 56, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(206, 19, 56, .05) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
	mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

.post-card .thumb-fallback .cb-icon {
	position: relative;
	width: 54px;
	height: 54px;
	opacity: .62;
	transition: transform .5s ease;
}

.post-card:hover .thumb-fallback .cb-icon { transform: scale(1.08); }

.post-card .cat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, .94);
	color: var(--cherry);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 8px;
}

.post-card .pbody {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-card .pmeta {
	font-size: 12.5px;
	color: var(--slate-2);
	margin-bottom: 10px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.post-card .pmeta .cb-icon { width: 13px; height: 13px; }

.post-card h3 {
	font-size: 17.5px;
	line-height: 1.3;
	margin-bottom: 10px;
}

.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--cherry); }

/* Same stretched-link treatment as the module cards. */
.post-card { position: relative; }

.post-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-card .cat,
.post-card .pfoot { position: relative; z-index: 2; }

.post-card p {
	font-size: 13.5px;
	line-height: 1.6;
	margin-bottom: 16px;
	flex: 1;
}

.post-card .pfoot { margin-top: auto; }

/* ============================================================
   11. FORMS
   ============================================================ */
.cb-form {
	display: grid;
	gap: 18px;
}

.cb-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cb-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 7px;
}

.cb-field .req { color: var(--cherry); }

.cb-field input,
.cb-field select,
.cb-field textarea {
	width: 100%;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 13px 15px;
	min-height: 50px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.cb-field textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus {
	outline: none;
	border-color: var(--cherry);
	box-shadow: 0 0 0 3px rgba(206, 19, 56, .14);
}

.cb-field input::placeholder,
.cb-field textarea::placeholder { color: var(--slate-2); }

.cb-field.has-error input,
.cb-field.has-error textarea,
.cb-field.has-error select { border-color: var(--red); }

.cb-field .field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--red);
	font-weight: 500;
}

/* Honeypot — visually hidden but not display:none, so bots still see it. */
.cb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cb-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--radius);
	font-size: 14.5px;
	line-height: 1.55;
}

.cb-notice .cb-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cb-notice--success { background: var(--green-soft); color: #14532D; border: 1px solid #BBE7CB; }
.cb-notice--error { background: var(--red-soft); color: #7F1D1D; border: 1px solid #F5C2C2; }

/* ============================================================
   12. FINAL CTA BAND
   ============================================================ */
.cta-final {
	position: relative;
	overflow: hidden;
	background: var(--ink);
}

.cta-final::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(680px 400px at 82% 10%, rgba(232, 93, 122, .35), transparent 60%),
		radial-gradient(600px 460px at 10% 90%, rgba(206, 19, 56, .4), transparent 55%);
}

.cta-final::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .5;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
	mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}

.cta-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding-block: clamp(64px, 9vw, 104px);
}

.cta-inner h2 {
	color: #fff;
	font-size: clamp(30px, 4.4vw, 48px);
	margin-bottom: 18px;
}

.cta-inner p {
	color: rgba(255, 255, 255, .82);
	font-size: clamp(16px, 1.6vw, 19px);
	max-width: 60ch;
	margin: 0 auto 32px;
}

.cta-inner .cb-ctas { justify-content: center; }
.cta-inner .btn { padding: 15px 28px; font-size: 16px; }

/* ============================================================
   13. FOOTER
   ============================================================ */
.footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .72);
	padding-top: 64px;
}

.f-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.3fr 1fr 1.4fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.f-brand img {
	height: 52px;
	width: auto;
	margin-bottom: 18px;
}

.f-brand .brand-text { color: #fff; margin-bottom: 18px; display: block; }
.f-brand .brand-text span { color: var(--berry); }

.f-brand p {
	font-size: 14px;
	line-height: 1.7;
	max-width: 34ch;
	margin-bottom: 20px;
}

.f-social { display: flex; gap: 10px; }

.f-social a {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	display: grid;
	place-items: center;
	color: #fff;
	transition: background-color .2s ease, transform .2s ease;
}

.f-social a:hover {
	background: var(--cherry);
	transform: translateY(-2px);
	color: #fff;
}

.f-social .cb-icon { width: 19px; height: 19px; }

.f-col h2,
.f-col h5 {
	color: #fff;
	font-family: var(--display);
	font-size: 15px;
	margin-bottom: 16px;
	font-weight: 700;
}

.f-col ul { display: grid; gap: 10px; }

.f-col a {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
	transition: color .18s ease, padding-left .18s ease;
}

.f-col a:hover { color: #fff; padding-left: 3px; }

/* Touch devices get a full-height hit area on every footer link. */
@media (max-width: 1024px) {
	.f-col ul { gap: 2px; }

	.f-col a,
	.f-bottom .legal a {
		min-height: 44px;
		padding-block: 4px;
	}
}

.f-contact li {
	display: flex;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 14px;
	align-items: flex-start;
}

.f-contact .cb-icon {
	width: 18px;
	height: 18px;
	color: var(--berry);
	flex-shrink: 0;
	margin-top: 2px;
}

.f-contact a { color: rgba(255, 255, 255, .72); }
.f-contact a:hover { color: #fff; }

.f-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding-block: 24px;
	font-size: 13px;
}

.f-bottom .legal-list {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.f-bottom .legal a { color: rgba(255, 255, 255, .72); }
.f-bottom .legal a:hover { color: #fff; }

/* ============================================================
   14. MOTION AND UTILITIES
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.nav-links,
	.nav-cta { display: none; }

	.burger { display: flex; }

	.split,
	.split.rev { grid-template-columns: 1fr; gap: 40px; }

	.grid-3,
	.mod-grid { grid-template-columns: repeat(2, 1fr); }

	.tst { flex: 0 0 calc(50% - 10px); }

	.f-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.f-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.section { padding-block: clamp(52px, 10vw, 72px); }

	.grid-3,
	.grid-2,
	.mod-grid,
	.blog-grid { grid-template-columns: 1fr; }

	.tst { flex: 0 0 100%; }

	.cb-form-row { grid-template-columns: 1fr; }

	.h-lead { max-width: none; }

	.vcard,
	.mod { padding: 22px; }

	.f-top { grid-template-columns: 1fr; gap: 30px; }
	.f-brand { grid-column: auto; }

	.f-bottom { flex-direction: column; text-align: center; }
	.f-bottom .legal-list { justify-content: center; gap: 16px; }

	.strip .wrap { justify-content: center; text-align: center; }
	.strip .pills { justify-content: center; }

	.cta-inner .btn { width: 100%; min-height: 50px; }
	.cta-inner .cb-ctas { flex-direction: column; }

	.page-hero h1 { max-width: none; }
}

@media (max-width: 480px) {
	.brand img { height: 36px; }
	.nav { height: 66px; gap: 12px; }

	.eyebrow { font-size: 13px; padding: 6px 12px; }
	.lead-sub { font-size: 15.5px; }

	.frame { border-radius: 16px; }
	.frame-bar { padding: 9px 11px; gap: 5px; }
	.frame-bar .dot { width: 8px; height: 8px; }
	.frame-url { font-size: 12px; padding: 4px 8px; margin-left: 2px; }
	.frame-live { font-size: 12px; padding: 3px 8px; }

	.tst,
	.vcard,
	.mod { padding: 20px; }

	.tst-nav button { width: 44px; height: 44px; }

	.shot-cap { justify-content: flex-start; }
}

@media (max-width: 380px) {
	.frame-live { display: none; }
	.pill { font-size: 12px; padding: 7px 11px; }
}

/* ============================================================
   16. TOUCH TARGET REFINEMENTS
   Verified against a scripted audit at 320–1920px: every
   interactive element reaches the 44px minimum.
   ============================================================ */
.f-social a {
	width: 44px;
	height: 44px;
}

.module-aside ul a {
	min-height: 44px;
}

.info-item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.f-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding-block: 11px;
	margin-block: -11px;
}

.info-item .line + .line a { margin-top: 0; }