.features-shell {
	--features-ink: #171426;
	--features-copy: #50505c;
	--features-muted: #74727e;
	--features-line: #e7e5ea;
	--features-accent: #644aff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: var(--features-ink);
}

.features-header {
	position: relative;
	z-index: 20;
}

.features-wrap {
	width: min(calc(100% - 48px), 1200px);
	margin: 0 auto;
}

.features-eyebrow {
	margin: 0;
	color: var(--features-accent);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
}

.features-hero {
	padding: 164px 0 94px;
	border-bottom: 1px solid var(--features-line);
}

.features-hero h1 {
	max-width: 900px;
	margin: 18px 0 24px;
	font-size: clamp(2.55rem, 5.4vw, 4.65rem);
	font-weight: 620;
	letter-spacing: -0.07em;
	line-height: 0.98;
	text-wrap: balance;
}

.features-lead {
	max-width: 720px;
	color: var(--features-copy);
	font-size: clamp(1.08rem, 2vw, 1.3rem);
	line-height: 1.62;
}

.features-directory {
	padding: 88px 0 112px;
}

.features-growth h2 {
	max-width: 760px;
	font-size: clamp(2rem, 4vw, 3.35rem);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 1.02;
	text-wrap: balance;
}

.feature-index-row:focus-visible,
.feature-button:focus-visible {
	outline: 3px solid rgba(100, 74, 255, 0.28) !important;
	outline-offset: 3px;
}

.features-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.feature-index-row {
	display: flex;
	min-height: 260px;
	padding: 30px;
	border: 1px solid var(--features-line);
	border-radius: 20px;
	flex-direction: column;
	align-items: flex-start;
	background: #ffffff;
	color: var(--features-ink);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.feature-index-category {
	color: var(--features-accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.feature-index-copy {
	margin-top: 36px;
}

.feature-index-copy h3 {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	font-weight: 620;
	letter-spacing: -0.045em;
	line-height: 1.05;
}

.feature-index-copy p {
	max-width: 56ch;
	margin-top: 13px;
	color: var(--features-copy);
	font-size: 0.95rem;
	line-height: 1.58;
}

.feature-index-arrow {
	display: block;
	margin: auto 0 0 auto;
	padding-top: 26px;
	color: var(--features-ink);
	font-size: 1.35rem;
	transition: transform 180ms ease;
}

.feature-index-row:hover {
	border-color: #d7d1fa;
	box-shadow: 0 16px 40px rgba(23, 20, 38, 0.08);
	transform: translateY(-3px);
}

.feature-index-row:hover .feature-index-arrow {
	transform: translateX(4px);
}

.feature-accent--violet { --feature-soft: #f0edff; --feature-tone: #644aff; }
.feature-accent--blue { --feature-soft: #eaf2ff; --feature-tone: #3975da; }
.feature-accent--rose { --feature-soft: #fff0f4; --feature-tone: #c94f78; }
.feature-accent--amber { --feature-soft: #fff5dd; --feature-tone: #aa7411; }
.feature-accent--mint { --feature-soft: #e9f8f1; --feature-tone: #258164; }
.feature-accent--lilac { --feature-soft: #f5edff; --feature-tone: #8153b7; }
.feature-accent--coral { --feature-soft: #fff0eb; --feature-tone: #bd654a; }
.feature-accent--sky { --feature-soft: #eaf7fb; --feature-tone: #247b98; }

.features-growth {
	padding: 104px 0;
	border-top: 1px solid var(--features-line);
	background: #fbfafc;
}

.features-growth-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.84fr) minmax(440px, 1.16fr);
	gap: clamp(56px, 8vw, 104px);
}

.features-growth h2 {
	margin-top: 16px;
}

.growth-steps {
	border-top: 1px solid var(--features-line);
}

.growth-steps > div {
	display: grid;
	grid-template-columns: 42px 120px 1fr;
	gap: 18px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--features-line);
}

.growth-steps span,
.growth-steps h3 {
	font-size: 0.9rem;
	font-weight: 700;
}

.growth-steps span {
	color: var(--features-accent);
}

.growth-steps p {
	color: var(--features-copy);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Feature detail */
.feature-detail-main {
	flex: 1;
	padding: 120px 0 104px;
}

.feature-article {
	--feature-soft: #f0edff;
	--feature-tone: #644aff;
	min-width: 0;
}

.feature-article-hero {
	position: relative;
	display: block;
	padding: 38px 0 104px;
	background: #ffffff;
}

.feature-hero-copy {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.feature-article-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--feature-tone);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	justify-content: center;
}

.feature-article-kicker span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
}

.feature-article-hero h1 {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 26px 0 22px;
	font-size: clamp(2.5rem, 5.2vw, 4rem);
	font-weight: 620;
	letter-spacing: -0.065em;
	line-height: 0.98;
	text-wrap: balance;
}

.feature-article-hero .feature-hero-copy > p {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
	color: #45434d;
	font-size: clamp(1rem, 1.8vw, 1.16rem);
	line-height: 1.65;
}

.feature-hero-actions {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 32px;
	justify-content: center;
}

.feature-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 700;
}

.feature-button--dark {
	background: var(--features-ink);
	color: #ffffff;
	box-shadow: 0 14px 28px rgba(23, 20, 38, 0.16);
}

.feature-button--text {
	padding-inline: 0;
	color: var(--features-ink);
}

.feature-button--text span {
	margin-left: 8px;
}

.feature-hero-visual {
	position: relative;
	width: min(100%, 1060px);
	min-height: 560px;
	margin: 72px auto 0;
	padding: 78px clamp(24px, 6vw, 72px) 54px;
	overflow: hidden;
	border: 1px solid rgba(23, 20, 38, 0.07);
	border-radius: 34px;
	background: #f5f3f8;
	box-shadow: 0 28px 80px rgba(23, 20, 38, 0.08);
	text-align: left;
}

.feature-visual-topline {
	position: absolute;
	top: 24px;
	left: 30px;
	right: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	z-index: 4;
}

.feature-visual-topline > span {
	color: rgba(23, 20, 38, 0.62);
	font-size: 0.68rem;
	font-weight: 760;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.feature-visual-topline > strong {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	border: 1px solid rgba(23, 20, 38, 0.08);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--features-ink);
	font-size: 0.66rem;
	font-weight: 720;
	backdrop-filter: blur(12px);
}

.feature-visual-topline > strong i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #31a36d;
	box-shadow: 0 0 0 4px rgba(49, 163, 109, 0.12);
}

.visual-spark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: var(--feature-tone);
	color: #ffffff;
	font-size: 1.15rem;
}

/* AI Calling: phone call and live intent notes */
.feature-hero-visual--ai-calling {
	background: radial-gradient(circle at 20% 15%, #8b75ff 0, transparent 30%), linear-gradient(135deg, #221a54, #161228 68%);
}

.feature-hero-visual--ai-calling .feature-visual-topline > span,
.feature-hero-visual--ai-calling .feature-visual-topline > strong { color: #ffffff; }

.feature-hero-visual--ai-calling .feature-visual-topline > strong { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); }

.visual-call-layout {
	display: grid;
	grid-template-columns: minmax(230px, 0.78fr) minmax(300px, 1.22fr);
	gap: clamp(34px, 7vw, 92px);
	align-items: center;
	max-width: 840px;
	margin: 0 auto;
}

.visual-call-phone {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 410px;
	padding: 46px 24px 30px;
	border: 7px solid #0b0912;
	border-radius: 42px;
	flex-direction: column;
	background: linear-gradient(165deg, #372b73, #151124);
	color: #ffffff;
	box-shadow: 0 30px 64px rgba(4, 2, 13, 0.45);
}

.visual-phone-speaker {
	position: absolute;
	top: 13px;
	width: 72px;
	height: 18px;
	border-radius: 999px;
	background: #09070e;
}

.visual-call-avatar {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-top: 26px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 24px;
	background: linear-gradient(145deg, #8c78ff, #4c31e5);
	font-size: 1.25rem;
	font-weight: 800;
	box-shadow: 0 14px 30px rgba(99, 73, 255, 0.34);
}

.visual-call-phone > small { margin-top: 19px; color: #bdb5dc; font-size: 0.68rem; }
.visual-call-phone > strong { max-width: 220px; margin-top: 7px; font-size: 1rem; line-height: 1.35; text-align: center; }

.visual-call-wave { display: flex; align-items: center; gap: 5px; height: 50px; margin-top: 30px; }
.visual-call-wave i { width: 4px; height: 14px; border-radius: 8px; background: #9a88ff; animation: feature-wave 1.2s ease-in-out infinite; }
.visual-call-wave i:nth-child(2), .visual-call-wave i:nth-child(6) { height: 30px; animation-delay: -0.2s; }
.visual-call-wave i:nth-child(3), .visual-call-wave i:nth-child(5) { height: 42px; animation-delay: -0.45s; }
.visual-call-wave i:nth-child(4) { height: 24px; animation-delay: -0.7s; }

@keyframes feature-wave { 50% { transform: scaleY(0.45); opacity: 0.55; } }

.visual-call-live { margin-top: 20px; padding: 8px 12px; border-radius: 999px; background: rgba(122, 98, 255, 0.18); color: #d8d2ff; font-size: 0.65rem; font-weight: 700; }
.visual-call-notes { display: grid; gap: 12px; }
.visual-call-notes > div { display: grid; grid-template-columns: 95px 1fr; gap: 4px 16px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: #ffffff; backdrop-filter: blur(14px); }
.visual-call-notes span { grid-row: span 2; color: #a9a0c8; font-size: 0.62rem; font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; }
.visual-call-notes strong { font-size: 0.9rem; line-height: 1.3; }
.visual-call-notes small { color: #9b8dff; font-size: 0.68rem; }

/* AI SMS: conversational phone with an AI insight card */
.feature-hero-visual--ai-sms { background: linear-gradient(145deg, #e8f1ff, #f8fbff 55%, #dfeaff); }
.visual-sms-layout { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(240px, 0.7fr); gap: clamp(34px, 7vw, 86px); align-items: center; max-width: 790px; margin: 0 auto; }
.visual-sms-phone { overflow: hidden; border: 7px solid #181c26; border-radius: 40px; background: #ffffff; box-shadow: 0 30px 60px rgba(31, 69, 122, 0.2); }
.visual-sms-contact { display: flex; align-items: center; gap: 11px; padding: 28px 20px 14px; border-bottom: 1px solid #edf0f5; }
.visual-sms-contact > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #3975da; color: #fff; font-size: 0.68rem; font-weight: 800; }
.visual-sms-contact div { display: flex; flex-direction: column; gap: 2px; }
.visual-sms-contact strong { font-size: 0.78rem; }
.visual-sms-contact small { color: #35a373; font-size: 0.58rem; }
.visual-sms-thread { display: grid; gap: 12px; min-height: 310px; padding: 22px 16px; align-content: center; background: #fafbfc; }
.visual-sms-message { width: 82%; padding: 11px 13px; border-radius: 15px 15px 15px 4px; background: #e9edf3; }
.visual-sms-message.is-agent { margin-left: auto; border-radius: 15px 15px 4px; background: #3975da; color: #ffffff; }
.visual-sms-message small { display: block; margin-bottom: 4px; color: #72798a; font-size: 0.52rem; font-weight: 700; }
.visual-sms-message.is-agent small, .visual-sms-message.is-agent span { color: rgba(255, 255, 255, 0.72); }
.visual-sms-message p { font-size: 0.7rem; line-height: 1.4; }
.visual-sms-message > span { display: block; margin-top: 5px; color: #8b909a; font-size: 0.52rem; text-align: right; }
.visual-sms-compose { display: flex; align-items: center; gap: 10px; padding: 12px 16px 20px; background: #fff; }
.visual-sms-compose > span, .visual-sms-compose > strong { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf2fa; color: #3975da; font-size: 0.65rem; }
.visual-sms-compose i { height: 28px; border: 1px solid #e2e6ed; border-radius: 999px; flex: 1; }
.visual-sms-insight { position: relative; padding: 28px; border: 1px solid rgba(57, 117, 218, 0.13); border-radius: 24px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 20px 42px rgba(39, 80, 140, 0.12); }
.visual-sms-insight::before { content: ''; position: absolute; left: -52px; top: 50%; width: 52px; border-top: 1px dashed rgba(57, 117, 218, 0.32); }
.visual-sms-insight p { margin-top: 18px; color: #3f4b60; font-size: 0.86rem; line-height: 1.58; }

/* AI Rebooking: schedule gap paired with a client match */
.feature-hero-visual--ai-rebooking { background: linear-gradient(135deg, #fff0f4, #fff9fa 55%, #f5e4ee); }
.visual-rebooking-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.78fr); gap: clamp(30px, 6vw, 72px); align-items: center; max-width: 850px; margin: 18px auto 0; }
.visual-rebooking-calendar { padding: 24px; border: 1px solid rgba(77, 31, 51, 0.09); border-radius: 22px; background: #ffffff; box-shadow: 0 28px 55px rgba(102, 44, 69, 0.13); }
.visual-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; }
.visual-calendar-head strong { font-size: 0.82rem; }
.visual-calendar-head button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff0f4; color: #a83d64; }
.visual-calendar-grid { display: grid; grid-template-columns: 30px 1fr; gap: 8px 12px; align-items: center; }
.visual-calendar-grid span { color: #95909a; font-size: 0.6rem; text-align: right; }
.visual-calendar-grid i { display: grid; place-items: center; min-height: 34px; border: 1px dashed #e6dfe3; border-radius: 8px; color: #c94f78; font-size: 1rem; font-style: normal; }
.visual-calendar-grid i.is-booked { border: 0; background: #ecebf1; }
.visual-calendar-grid i.is-open { border: 1px solid #e8a2ba; background: #fff0f4; }
.visual-rebooking-match { position: relative; padding: 32px; border-radius: 24px; background: #25202a; color: #ffffff; box-shadow: 0 25px 50px rgba(56, 33, 44, 0.2); }
.visual-rebooking-match .visual-spark { margin-bottom: 28px; background: #c94f78; }
.visual-rebooking-match > small { color: #bcb4bd; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.visual-rebooking-match h3 { margin-top: 7px; font-size: 1.25rem; line-height: 1.16; }
.visual-rebooking-match p { margin-top: 10px; color: #cfc8d0; font-size: 0.75rem; }
.visual-rebooking-match button { width: 100%; margin-top: 30px; padding: 12px; border: 0; border-radius: 10px; background: #c94f78; color: #fff; font-size: 0.7rem; font-weight: 750; }

/* Online booking: full booking browser */
.feature-hero-visual--online-booking { background: linear-gradient(160deg, #fff5dd, #fffdfa); }
.visual-booking-browser, .visual-website-browser { overflow: hidden; max-width: 850px; margin: 12px auto 0; border: 1px solid rgba(77, 57, 17, 0.12); border-radius: 22px; background: #ffffff; box-shadow: 0 30px 65px rgba(114, 83, 28, 0.14); }
.visual-browser-bar { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid #ece9e3; background: #f8f7f4; }
.visual-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d7d3ca; }
.visual-browser-bar i:first-child { background: var(--feature-tone); }
.visual-browser-bar span { margin-left: 12px; padding: 6px 18px; border-radius: 999px; background: #ffffff; color: #8a857c; font-size: 0.6rem; flex: 1; text-align: center; }
.visual-booking-body { max-width: 650px; margin: 0 auto; padding: 40px 38px 34px; }
.visual-booking-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.visual-booking-progress i { height: 4px; border-radius: 999px; background: #eeeae0; }
.visual-booking-progress i.is-active { background: #aa7411; }
.visual-booking-body h3 { margin-top: 26px; font-size: 1.45rem; text-align: center; }
.visual-booking-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.visual-booking-options > div { display: flex; min-height: 120px; padding: 16px; border: 1px solid #ece8de; border-radius: 13px; flex-direction: column; background: #fffefa; }
.visual-booking-options span { color: #8a8170; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.visual-booking-options strong { margin-top: auto; font-size: 0.76rem; line-height: 1.3; }
.visual-booking-options small { margin-top: 6px; color: #aa7411; font-size: 0.58rem; }
.visual-booking-body > button { display: flex; justify-content: space-between; width: min(100%, 250px); margin: 24px auto 0; padding: 13px 16px; border: 0; border-radius: 9px; background: #1b1820; color: #ffffff; font-size: 0.7rem; font-weight: 720; }

/* Portfolio website: branded website canvas */
.feature-hero-visual--websites { padding-inline: clamp(18px, 4vw, 48px); background: linear-gradient(135deg, #e9f8f1, #f7fcfa); }
.visual-website-browser { max-width: 920px; margin-top: 0; border-color: rgba(29, 105, 78, 0.13); box-shadow: 0 30px 65px rgba(37, 129, 100, 0.14); }
.visual-website-page { padding: 0 26px 24px; }
.visual-website-page nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; }
.visual-website-page nav > strong { font-size: 0.76rem; letter-spacing: 0.16em; }
.visual-website-page nav > span { color: #6b746f; font-size: 0.62rem; }
.visual-website-page button { padding: 8px 13px; border: 0; border-radius: 999px; background: #1d6d53; color: #ffffff; font-size: 0.58rem; font-weight: 700; }
.visual-website-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 250px; overflow: hidden; border-radius: 18px; background: #e9f8f1; }
.visual-website-hero > div:first-child { display: flex; align-items: flex-start; justify-content: center; padding: 32px; flex-direction: column; }
.visual-website-hero small { color: #258164; font-size: 0.55rem; font-weight: 760; text-transform: uppercase; }
.visual-website-hero h3 { max-width: 310px; margin-top: 9px; font-size: 1.6rem; line-height: 1.02; }
.visual-website-hero p { max-width: 320px; margin-top: 10px; color: #58665f; font-size: 0.68rem; line-height: 1.48; }
.visual-website-hero button { margin-top: 18px; }
.visual-website-photo { position: relative; overflow: hidden; background: linear-gradient(145deg, #7aa995, #295d4b); }
.visual-website-photo::before, .visual-website-photo::after { content: ''; position: absolute; border-radius: 50% 50% 42% 58%; }
.visual-website-photo::before { width: 190px; height: 260px; left: 18%; bottom: -60px; background: #d6aa8c; transform: rotate(8deg); }
.visual-website-photo::after { width: 130px; height: 170px; right: -20px; top: 16px; background: #173f33; transform: rotate(-18deg); }
.visual-website-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.visual-website-services > div { display: flex; padding: 13px; border: 1px solid #e7ece9; border-radius: 10px; flex-direction: column; }
.visual-website-services small { color: #7d8983; font-size: 0.52rem; text-transform: uppercase; }
.visual-website-services strong { margin-top: 4px; font-size: 0.66rem; }

/* Clients: CRM list and relationship profile */
.feature-hero-visual--client-management { background: linear-gradient(145deg, #f5edff, #fcfaff); }
.visual-client-layout { display: grid; grid-template-columns: 250px minmax(330px, 1fr); overflow: hidden; max-width: 850px; margin: 12px auto 0; border: 1px solid rgba(82, 46, 117, 0.12); border-radius: 22px; background: #ffffff; box-shadow: 0 30px 60px rgba(94, 60, 128, 0.14); }
.visual-client-list { padding: 18px 12px; border-right: 1px solid #ece7f1; background: #faf8fc; }
.visual-client-list > div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 11px; }
.visual-client-list > div.is-selected { background: #eee3fb; }
.visual-client-list > div > span, .visual-client-profile header > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #8153b7; color: #fff; font-size: 0.6rem; font-weight: 760; }
.visual-client-list p { display: flex; min-width: 0; flex-direction: column; }
.visual-client-list strong { overflow: hidden; font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.visual-client-list small { margin-top: 3px; color: #8b8590; font-size: 0.56rem; }
.visual-client-profile { padding: 28px; }
.visual-client-profile header { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid #eeeaf1; }
.visual-client-profile header > span { width: 54px; height: 54px; font-size: 0.75rem; }
.visual-client-profile header > div { flex: 1; }
.visual-client-profile header small { color: #8c8592; font-size: 0.58rem; text-transform: uppercase; }
.visual-client-profile header h3 { margin-top: 3px; font-size: 1.1rem; }
.visual-client-profile header button { border: 0; background: transparent; color: #8c8592; }
.visual-client-details { display: grid; gap: 0; }
.visual-client-details > div { display: grid; grid-template-columns: 105px 1fr; gap: 3px 16px; padding: 16px 0; border-bottom: 1px solid #eeeaf1; }
.visual-client-details span { grid-row: span 2; color: #88818e; font-size: 0.57rem; text-transform: uppercase; }
.visual-client-details strong { font-size: 0.72rem; }
.visual-client-details small { color: #8153b7; font-size: 0.58rem; }
.visual-client-profile > p { margin-top: 20px; color: #716a76; font-size: 0.68rem; line-height: 1.5; }

/* POS Integration: physical terminal and connected receipt */
.feature-hero-visual--payments-pos { background: radial-gradient(circle at 16% 12%, #ffb69f 0, transparent 28%), linear-gradient(145deg, #4d2620, #1d1717 68%); }
.feature-hero-visual--payments-pos .feature-visual-topline > span,
.feature-hero-visual--payments-pos .feature-visual-topline > strong { color: #ffffff; }
.feature-hero-visual--payments-pos .feature-visual-topline > strong { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.09); }
.visual-pos-layout { display: grid; grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1fr); gap: clamp(34px, 7vw, 88px); align-items: center; max-width: 820px; margin: 10px auto 0; }
.visual-pos-terminal { position: relative; width: min(100%, 300px); min-height: 430px; margin: 0 auto; padding: 20px 18px 44px; border: 1px solid #4b4544; border-radius: 34px 34px 48px 48px; background: linear-gradient(145deg, #292525, #111010); box-shadow: 0 34px 64px rgba(0,0,0,.42); }
.visual-pos-screen { display: flex; align-items: center; min-height: 280px; padding: 28px 20px; border-radius: 22px; flex-direction: column; background: linear-gradient(160deg, #fff8f5, #f1e4df); }
.visual-pos-screen > small { color: #806f69; font-size: 0.58rem; text-transform: uppercase; }
.visual-pos-screen > strong { margin-top: 32px; color: #231d1b; font-size: 2.35rem; letter-spacing: -0.06em; }
.visual-pos-screen > span { margin-top: 8px; padding: 7px 10px; border-radius: 999px; background: #e8d5ce; color: #815342; font-size: 0.58rem; }
.visual-pos-screen > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: auto; }
.visual-pos-screen i { height: 32px; border-radius: 8px; background: #ffffff; box-shadow: inset 0 0 0 1px #e4d8d3; }
.visual-pos-contactless { margin-top: 20px; color: #a39894; font-size: 1rem; letter-spacing: -0.18em; text-align: center; transform: rotate(90deg); }
.visual-pos-slot { position: absolute; bottom: 22px; left: 32%; right: 32%; height: 5px; border-radius: 999px; background: #050505; }
.visual-pos-receipt { padding: 28px; border-radius: 20px; background: #fffdfc; box-shadow: 0 26px 55px rgba(0,0,0,.25); }
.visual-pos-receipt header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px dashed #d8d0cd; }
.visual-pos-receipt header span { color: #bd654a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; }
.visual-pos-receipt header strong { font-size: 0.72rem; }
.visual-pos-receipt > div { display: grid; grid-template-columns: 90px 1fr; gap: 3px 12px; padding: 14px 0; border-bottom: 1px solid #eee9e7; }
.visual-pos-receipt > div span { grid-row: span 2; color: #8c837f; font-size: 0.55rem; text-transform: uppercase; }
.visual-pos-receipt > div strong { font-size: 0.68rem; }
.visual-pos-receipt > div small { color: #bd654a; font-size: 0.56rem; }
.visual-pos-receipt footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.visual-pos-receipt footer span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e7f5ee; color: #258164; }
.visual-pos-receipt footer p { color: #746c69; font-size: 0.62rem; line-height: 1.45; }

/* AI Marketing: campaign workspace and score */
.feature-hero-visual--marketing { background: linear-gradient(145deg, #eaf7fb, #f8fcfd); }
.visual-marketing-layout { display: grid; grid-template-columns: 72px minmax(0, 1fr); overflow: hidden; max-width: 880px; margin: 8px auto 0; border: 1px solid rgba(36, 123, 152, 0.12); border-radius: 22px; background: #ffffff; box-shadow: 0 30px 65px rgba(42, 112, 135, 0.14); }
.visual-marketing-sidebar { display: flex; align-items: center; gap: 18px; padding: 20px 0; flex-direction: column; background: #182f37; }
.visual-marketing-sidebar strong { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #36a2c4; color: #fff; }
.visual-marketing-sidebar i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.09); }
.visual-marketing-sidebar i.is-active { background: #36a2c4; box-shadow: 0 0 0 5px rgba(54,162,196,.13); }
.visual-marketing-workspace { padding: 28px; }
.visual-marketing-workspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.visual-marketing-workspace header small { color: #7f8b8f; font-size: 0.58rem; text-transform: uppercase; }
.visual-marketing-workspace header h3 { margin-top: 4px; font-size: 1.15rem; }
.visual-marketing-workspace header button { padding: 9px 12px; border: 0; border-radius: 8px; background: #247b98; color: #fff; font-size: 0.6rem; font-weight: 700; }
.visual-marketing-score { display: grid; grid-template-columns: 40px 150px 1fr; gap: 14px; align-items: center; margin-top: 26px; padding: 18px; border-radius: 14px; background: #eaf7fb; }
.visual-marketing-score > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #247b98; color: #fff; }
.visual-marketing-score > div { display: flex; flex-direction: column; }
.visual-marketing-score small { color: #6c7e84; font-size: 0.56rem; }
.visual-marketing-score strong { margin-top: 2px; font-size: 1.25rem; }
.visual-marketing-score > i { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(36,123,152,.12); }
.visual-marketing-score b { display: block; width: 84%; height: 100%; border-radius: inherit; background: #247b98; }
.visual-marketing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.visual-marketing-cards > div { display: flex; min-height: 125px; padding: 15px; border: 1px solid #e7edef; border-radius: 12px; flex-direction: column; }
.visual-marketing-cards span { color: #76858a; font-size: 0.55rem; text-transform: uppercase; }
.visual-marketing-cards strong { margin-top: auto; font-size: 0.7rem; line-height: 1.35; }
.visual-marketing-cards small { margin-top: 6px; color: #247b98; font-size: 0.56rem; }

.feature-spotlight {
	padding: 110px 0;
	border-bottom: 1px solid var(--features-line);
	text-align: center;
}

.feature-spotlight blockquote {
	max-width: 800px;
	margin: 18px auto 0;
	font-size: clamp(1.75rem, 3.25vw, 2.5rem);
	font-weight: 570;
	letter-spacing: -0.05em;
	line-height: 1.1;
	text-wrap: balance;
}

.feature-content-section {
	padding: 110px 0;
	border-bottom: 1px solid var(--features-line);
}

.feature-section-intro {
	display: block;
	max-width: 790px;
	margin: 0 auto 54px;
	text-align: center;
}

.feature-section-intro h2,
.feature-benefits h2 {
	font-size: clamp(1.8rem, 3.3vw, 2.65rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1.06;
	text-wrap: balance;
}

.feature-section-intro h2 {
	margin-top: 15px;
}

.feature-capabilities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px clamp(48px, 7vw, 86px);
}

.feature-capabilities > div {
	min-height: 0;
	display: block;
	padding: 0;
	background: transparent;
}

.feature-capabilities > div:nth-child(even) {
	padding: 0;
	border: 0;
}

.feature-capabilities h3 {
	margin: 0 0 9px;
	font-size: 1.18rem;
	font-weight: 680;
	letter-spacing: -0.025em;
}

.feature-capabilities p {
	color: var(--features-copy);
	font-size: 0.92rem;
	line-height: 1.62;
}

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

.feature-outcomes > div {
	min-height: 250px;
	padding: 30px;
	border: 0;
	border-radius: 22px;
	background: #f6f6f7;
}

.feature-outcomes span {
	color: var(--feature-tone);
	font-size: 0.72rem;
	font-weight: 750;
}

.feature-outcomes h3 {
	margin: 58px 0 12px;
	font-size: 1.2rem;
	font-weight: 680;
	letter-spacing: -0.025em;
}

.feature-outcomes p,
.feature-workflow p {
	color: var(--features-copy);
	font-size: 0.92rem;
	line-height: 1.58;
}

.feature-workflow {
	border-top: 1px solid var(--features-line);
	list-style: none;
}

.feature-workflow-section {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
	gap: clamp(54px, 8vw, 110px);
	align-items: center;
	margin: 110px 0;
	padding: clamp(48px, 7vw, 88px);
	border: 0;
	border-radius: 32px;
	background: var(--feature-soft);
}

.feature-workflow-section .feature-section-intro {
	margin: 0;
	text-align: left;
}

.feature-workflow-section .feature-workflow {
	border-top-color: color-mix(in srgb, var(--feature-tone) 18%, transparent);
}

.feature-workflow li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 22px;
	padding: 28px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--feature-tone) 18%, transparent);
}

.feature-workflow li > span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--feature-soft);
	color: var(--feature-tone);
	font-size: 0.78rem;
	font-weight: 750;
}

.feature-workflow-section .feature-workflow li > span {
	background: rgba(255, 255, 255, 0.78);
}

.feature-workflow h3 {
	margin: 1px 0 7px;
	font-size: 1.08rem;
	font-weight: 680;
}

.feature-merchant-example {
	display: grid;
	grid-template-columns: minmax(150px, 0.28fr) minmax(0, 0.72fr);
	gap: 42px;
	padding: clamp(36px, 6vw, 64px);
	border-radius: 22px;
	background: var(--feature-soft);
	margin: 0 0 110px;
}

.feature-example-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.feature-example-label > span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.74);
	color: var(--feature-tone);
	font-size: 0.72rem;
	font-weight: 750;
}

.feature-example-label p {
	padding-top: 9px;
	color: var(--feature-tone);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.feature-example-copy h2 {
	max-width: 670px;
	font-size: clamp(1.75rem, 3.2vw, 2.55rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1.07;
	text-wrap: balance;
}

.feature-example-copy > p {
	max-width: 720px;
	margin-top: 18px;
	color: var(--features-copy);
	font-size: 1rem;
	line-height: 1.68;
}

.feature-example-copy > strong {
	display: block;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--feature-tone) 18%, transparent);
	color: var(--features-ink);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.55;
}

.feature-benefits {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr);
	gap: 70px;
	padding: 110px 0;
	border-bottom: 1px solid var(--features-line);
}

.feature-benefits h2 {
	margin-top: 16px;
}

.feature-benefits ul {
	display: grid;
	gap: 12px;
}

.feature-benefits li {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 19px 20px;
	border-radius: 14px;
	background: #f6f6f7;
	color: var(--features-copy);
	font-size: 0.93rem;
}

.feature-benefits li span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--feature-soft);
	color: var(--feature-tone);
	font-size: 0.72rem;
	font-weight: 800;
}

.feature-related,
.feature-faq-section {
	padding: 110px 0;
	border-bottom: 1px solid var(--features-line);
}

.feature-related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.feature-related-grid > a {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: 32px;
	border: 0;
	border-radius: 22px;
	background: #f6f6f7;
	color: var(--features-ink);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.feature-related-grid > a:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--feature-tone) 28%, #ffffff);
	box-shadow: 0 18px 42px rgba(23, 20, 38, 0.07);
}

.feature-related-grid > a > span {
	color: var(--feature-tone);
	font-size: 0.7rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.feature-related-grid h3 {
	margin: 28px 0 9px;
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: -0.04em;
}

.feature-related-grid p {
	color: var(--features-copy);
	font-size: 0.9rem;
	line-height: 1.58;
}

.feature-related-grid > a > strong {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 24px;
	font-size: 0.84rem;
	font-weight: 700;
}

.feature-faq-list {
	max-width: 900px;
	margin: 0 auto;
	border-top: 1px solid var(--features-line);
}

.feature-faq-list details {
	border-bottom: 1px solid var(--features-line);
}

.feature-faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	color: var(--features-ink);
	font-size: 1rem;
	font-weight: 680;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.feature-faq-list summary::-webkit-details-marker {
	display: none;
}

.feature-faq-list summary > span {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.feature-faq-list summary > span::before,
.feature-faq-list summary > span::after {
	content: '';
	position: absolute;
	top: 9px;
	left: 4px;
	width: 12px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--features-ink);
	transition: transform 160ms ease;
}

.feature-faq-list summary > span::after {
	transform: rotate(90deg);
}

.feature-faq-list details[open] summary > span::after {
	transform: rotate(0deg);
}

.feature-faq-list details > p {
	max-width: 760px;
	padding: 0 48px 25px 0;
	color: var(--features-copy);
	font-size: 0.94rem;
	line-height: 1.67;
}

@media (max-width: 960px) {
	.features-growth-grid,
	.feature-section-intro,
	.feature-benefits {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.feature-hero-visual {
		width: 100%;
	}

	.visual-call-layout,
	.visual-sms-layout,
	.visual-rebooking-layout,
	.visual-pos-layout {
		gap: 32px;
	}

	.feature-capabilities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feature-workflow-section {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.feature-outcomes {
		grid-template-columns: 1fr;
	}

	.feature-outcomes h3 {
		margin-top: 22px;
	}
}

@media (max-width: 720px) {
	.features-wrap {
		width: min(calc(100% - 32px), 1200px);
	}

	.features-hero {
		padding: 126px 0 66px;
	}

	.features-hero h1 {
		font-size: clamp(2.35rem, 12vw, 3.4rem);
	}

	.features-directory,
	.features-growth {
		padding: 66px 0 78px;
	}

	.feature-index-row {
		min-height: 230px;
		padding: 26px;
	}

	.features-index {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.feature-index-copy {
		margin-top: 28px;
	}

	.growth-steps > div {
		grid-template-columns: 34px 90px 1fr;
		gap: 10px;
	}

	.feature-detail-main {
		padding: 104px 0 74px;
	}

	.feature-article-hero {
		padding: 30px 10px 76px;
	}

	.feature-article-hero h1 {
		font-size: clamp(2.1rem, 10vw, 2.8rem);
	}

	.feature-hero-visual {
		min-height: 0;
		margin-top: 52px;
		padding: 76px 14px 28px;
		border-radius: 24px;
	}

	.feature-visual-topline {
		top: 20px;
		left: 18px;
		right: 18px;
	}

	.feature-visual-topline > strong {
		max-width: 55%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.visual-call-layout,
	.visual-sms-layout,
	.visual-rebooking-layout,
	.visual-pos-layout {
		grid-template-columns: 1fr;
	}

	.visual-call-phone,
	.visual-sms-phone,
	.visual-pos-terminal {
		width: min(100%, 310px);
		margin-inline: auto;
	}

	.visual-call-notes {
		width: 100%;
	}

	.visual-call-notes > div {
		grid-template-columns: 82px 1fr;
		padding: 16px;
	}

	.visual-sms-insight::before {
		display: none;
	}

	.visual-booking-body {
		padding: 30px 16px 24px;
	}

	.visual-booking-options,
	.visual-website-services,
	.visual-marketing-cards {
		grid-template-columns: 1fr;
	}

	.visual-booking-options > div,
	.visual-marketing-cards > div {
		min-height: 96px;
	}

	.visual-website-page {
		padding: 0 12px 14px;
	}

	.visual-website-page nav > span {
		display: none;
	}

	.visual-website-hero {
		grid-template-columns: 1fr;
	}

	.visual-website-photo {
		min-height: 190px;
	}

	.visual-client-layout {
		grid-template-columns: 1fr;
	}

	.visual-client-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-right: 0;
		border-bottom: 1px solid #ece7f1;
	}

	.visual-client-list > div {
		padding: 8px;
	}

	.visual-client-list p small {
		display: none;
	}

	.visual-client-profile {
		padding: 22px 16px;
	}

	.visual-client-details > div {
		grid-template-columns: 88px 1fr;
	}

	.visual-marketing-layout {
		grid-template-columns: 1fr;
	}

	.visual-marketing-sidebar {
		display: none;
	}

	.visual-marketing-workspace {
		padding: 22px 14px;
	}

	.visual-marketing-score {
		grid-template-columns: 40px 1fr;
	}

	.visual-marketing-score > i {
		grid-column: 1 / -1;
	}

	.visual-pos-receipt {
		padding: 22px 16px;
	}

	.feature-hero-actions {
		align-items: center;
		flex-direction: column;
		gap: 8px;
	}

	.feature-button--text {
		min-height: 40px;
	}

	.feature-spotlight,
	.feature-content-section,
	.feature-benefits,
	.feature-related,
	.feature-faq-section {
		padding: 58px 0;
	}

	.feature-capabilities,
	.feature-related-grid {
		grid-template-columns: 1fr;
	}

	.feature-capabilities {
		gap: 32px;
	}

	.feature-capabilities > div {
		min-height: 0;
		padding: 0;
		border: 0;
	}

	.feature-capabilities > div:nth-child(even) {
		padding: 0;
		border: 0;
	}

	.feature-workflow-section {
		margin: 76px 0;
		padding: 40px 24px;
		border-radius: 24px;
	}

	.feature-workflow-section .feature-section-intro {
		text-align: center;
	}

	.feature-merchant-example {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 24px;
		margin-bottom: 76px;
	}

	.feature-related-grid > a {
		min-height: 210px;
	}

	.feature-spotlight blockquote {
		font-size: clamp(1.65rem, 8vw, 2.2rem);
	}

}

@media (prefers-reduced-motion: reduce) {
	.feature-index-row,
	.feature-index-arrow {
		transition: none;
	}
}