/*
 * Blog landing page styles (astra-child).
 * Scoped entirely under .cb-wrap so nothing here can leak onto
 * other pages/templates. Only loaded on the site's Posts page (is_home()).
 * Color / spacing / radius / shadow values match the site's existing
 * Beaver Builder design system tokens (Home page design system,
 * checked via get-design-tokens) so this page stays visually consistent
 * with the rest of the site.
 */

/*
 * Beaver Builder normally injects a `--ds-*` design-token :root block
 * (inline <style id="bb-design-system-css-inline-css">) on pages that
 * have their own assigned design system. /blog/ doesn't have one (it's
 * the WP Posts page, not a BB page), so that block never loads here -
 * which broke the sitewide footer's background/colors specifically on
 * this page (confirmed pre-existing: the footer's CSS references
 * var(--ds-color-surface-brand-deep) etc., which resolved to nothing on
 * /blog/ while working correctly on every BB-built page). This is the
 * exact same block copied verbatim from a live working page (checked
 * against both Home and FAQ, identical on each) so the footer - and
 * anything else on this page referencing these tokens - renders exactly
 * as it does everywhere else on the site. Global (not scoped to
 * .cb-wrap) because the footer sits outside that wrapper; safe because
 * this file only loads on is_home().
 */
:root {
	--ds-color-blue-50: #F2F8FC; --ds-color-blue-100: #E3F0F8; --ds-color-blue-200: #C6E1EF; --ds-color-blue-300: #9CCBE2; --ds-color-blue-400: #6BB2D4; --ds-color-blue-500: #4E94BC; --ds-color-blue-600: #3A7A9B; --ds-color-blue-700: #2A5F7A; --ds-color-blue-800: #1B4A5E; --ds-color-blue-900: #12333F;
	--ds-color-royal-400: #5E88CC; --ds-color-royal-500: #4A76BE; --ds-color-royal-600: #3B60A0; --ds-color-royal-700: #2F4C80;
	--ds-color-stone-50: #FAFAF8; --ds-color-stone-100: #F4F2EF; --ds-color-stone-200: #E8E5E0; --ds-color-stone-300: #D7D3CC; --ds-color-stone-400: #B6B1A8; --ds-color-stone-500: #918B82; --ds-color-stone-600: #6E6961; --ds-color-stone-700: #524E48; --ds-color-stone-800: #3A3732; --ds-color-stone-900: #24221F;
	--ds-color-white: #FFFFFF;
	--ds-color-success-600: #3B7A57; --ds-color-success-100: #E4F0E9; --ds-color-warn-600: #9A6B1F; --ds-color-warn-100: #FBF0DC; --ds-color-danger-600: #A8443A; --ds-color-danger-100: #F7E7E4; --ds-color-info-600: #3A7A9B; --ds-color-info-100: #E3F0F8;
	--ds-color-brand: #6BB2D4; --ds-color-brand-soft: #E3F0F8; --ds-color-brand-deep: #1B4A5E;
	--ds-color-action: #4A76BE; --ds-color-action-hover: #3B60A0; --ds-color-action-press: #2F4C80; --ds-color-action-quiet: #3A7A9B; --ds-color-action-quiet-hover: #2A5F7A;
	--ds-color-ink-display: #4E94BC; --ds-color-ink-heading: #1B4A5E; --ds-color-ink-body: #3A3732; --ds-color-ink-muted: #6E6961; --ds-color-ink-faint: #918B82; --ds-color-ink-on-brand: #12333F; --ds-color-ink-on-deep: #FFFFFF; --ds-color-ink-link: #3A7A9B; --ds-color-ink-link-hover: #1B4A5E;
	--ds-color-surface-page: #FFFFFF; --ds-color-surface-card: #FFFFFF; --ds-color-surface-sunken: #F4F2EF; --ds-color-surface-warm: #FAFAF8; --ds-color-surface-brand-soft: #F2F8FC; --ds-color-surface-brand-tint: #E3F0F8; --ds-color-surface-brand: #6BB2D4; --ds-color-surface-brand-deep: #1B4A5E; --ds-color-surface-brand-deep-overlay: rgba(27,74,94,.94);
	--ds-color-border-hairline: #E8E5E0; --ds-color-border-default: #D7D3CC; --ds-color-border-strong: #B6B1A8; --ds-color-border-brand: #C6E1EF; --ds-color-border-on-deep: rgba(255,255,255,.24);
	--ds-color-focus-ring: #4A76BE;
	--ds-font-display: "Figtree", "Helvetica Neue", Arial, sans-serif; --ds-font-core: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --ds-font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --ds-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
	--ds-text-display-lg: clamp(2.5rem, 5vw, 4rem); --ds-text-display: clamp(2rem, 3.6vw, 3rem); --ds-text-h1: clamp(1.875rem, 3vw, 2.5rem); --ds-text-h2: clamp(1.5rem, 2.2vw, 2rem); --ds-text-h3: 1.375rem; --ds-text-h4: 1.125rem; --ds-text-intro: 1.3125rem; --ds-text-lead: 1.1875rem; --ds-text-body-lg: 1.0625rem; --ds-text-body: 1.0625rem; --ds-text-body-sm: 1.0625rem; --ds-text-caption: .8125rem; --ds-text-eyebrow: .75rem;
	--ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
	--ds-line-tight: 1.1; --ds-line-snug: 1.25; --ds-line-heading: 1.2; --ds-line-body: 1.7; --ds-line-intro: 1.8; --ds-line-loose: 1.8;
	--ds-letter-eyebrow: .12em; --ds-letter-nav: .06em; --ds-letter-heading: -0.01em; --ds-letter-display: -0.02em; --ds-letter-body: 0;
	--ds-space-0: 0; --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-7: 32px; --ds-space-8: 40px; --ds-space-9: 48px; --ds-space-10: 64px; --ds-space-11: 80px; --ds-space-12: 96px; --ds-space-13: 128px; --ds-space-section: clamp(56px, 7vw, 104px); --ds-space-gutter: clamp(20px, 4vw, 48px);
	--ds-width-container: 1200px; --ds-width-narrow: 760px; --ds-width-wide: 1400px;
	--ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-xl: 20px; --ds-radius-pill: 999px; --ds-radius-card: 8px; --ds-radius-control: 4px; --ds-radius-button: 4px;
	--ds-shadow-none: none; --ds-shadow-sm: 0 1px 2px rgba(18,51,63,.05); --ds-shadow-card: 0 1px 2px rgba(18,51,63,.04), 0 6px 16px -8px rgba(18,51,63,.10); --ds-shadow-raised: 0 2px 6px rgba(18,51,63,.06), 0 14px 28px -12px rgba(18,51,63,.16); --ds-shadow-overlay: 0 24px 56px -16px rgba(18,51,63,.32); --ds-shadow-focus: 0 0 0 3px rgba(74,118,190,.35); --ds-shadow-inset-hairline: inset 0 -1px 0 #E8E5E0; --ds-shadow-scrim-image: linear-gradient(180deg, rgba(18,51,63,0) 35%, rgba(18,51,63,.70) 100%); --ds-shadow-scrim-hero: linear-gradient(90deg, rgba(18,51,63,.78) 0%, rgba(18,51,63,.45) 55%, rgba(18,51,63,.08) 100%); --ds-shadow-scrim-hero-wide: linear-gradient(90deg, rgba(18,51,63,.84) 0%, rgba(18,51,63,.72) 55%, rgba(18,51,63,.64) 100%);
	--ds-transition-ease-standard: cubic-bezier(.2,.6,.2,1); --ds-transition-ease-out: cubic-bezier(.16,1,.3,1); --ds-transition-ease-in-out: cubic-bezier(.6,0,.4,1); --ds-transition-ease-entrance: cubic-bezier(.16,1,.3,1); --ds-transition-instant: 80ms; --ds-transition-fast: 140ms; --ds-transition-base: 220ms; --ds-transition-slow: 360ms; --ds-transition-reveal: 600ms; --ds-transition-entrance: 600ms; --ds-transition-entrance-stagger: 90ms; --ds-transition-entrance-rise: 18px; --ds-transition-lift-hover: translateY(-2px); --ds-transition-press-scale: scale(.98);
	--ds-system-root-font-size: 16px;
}

/*
 * The :root tokens above are only half of what Beaver Builder's design
 * system normally injects on pages that have one assigned - it also
 * injects the rules that actually *consume* those tokens on `.fl-ds-block`
 * / `.fl-ds-page` (the class every BB-authored sitewide block, including
 * the header and footer, carries). /blog/ never gets that consuming CSS
 * either, so the footer/header fell back to Astra's own theme defaults
 * (Inter / Plus Jakarta Sans, 112.5% root) instead of the site's real
 * fonts. Reproduced verbatim from the homepage's real BB output (see
 * 00-blog-progress-log.md Entry 23). Scoped to .fl-ds-block/.fl-ds-page,
 * which nothing under .cb-wrap ever carries, so this cannot affect the
 * blog's own hero/cards/sidebar/etc.
 */
html {
	font-size: var(--ds-system-root-font-size);
}

.fl-ds-block,
.fl-ds-page {
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-body);
	font-weight: var(--ds-weight-regular);
	line-height: var(--ds-line-body);
}

.fl-ds-block h1, .fl-ds-block h2, .fl-ds-block h3, .fl-ds-block h4, .fl-ds-block h5,
.fl-ds-page h1, .fl-ds-page h2, .fl-ds-page h3, .fl-ds-page h4, .fl-ds-page h5 {
	font-family: var(--ds-font-display);
	font-weight: var(--ds-weight-medium);
	line-height: var(--ds-line-heading);
	letter-spacing: var(--ds-letter-heading);
}

/* Footer "From the blog" heading: tighten the gap to the first article
   by ~16px. The 40px gap is the heading's own 20px margin-bottom (from
   the sitewide h1-h6 reset) plus .ft-blog's 20px flex gap; only the
   margin half is touched here, so .ft-blog's own gap (and therefore the
   rows-to-"All articles" spacing) and .ft-rows' own row-to-row gap are
   both untouched. See 00-blog-progress-log.md Entry 24. */
#site-footer .ft-blog h3 {
	margin-bottom: 4px;
}

.cb-wrap {
	--cb-blue-50: #F2F8FC;
	--cb-blue-100: #E3F0F8;
	--cb-blue-200: #C6E1EF;
	--cb-blue-400: #6BB2D4;
	--cb-blue-500: #4E94BC;
	--cb-blue-600: #3A7A9B;
	--cb-blue-800: #1B4A5E;
	--cb-blue-900: #12333F;

	--cb-royal-500: #4A76BE;
	--cb-royal-600: #3B60A0;

	--cb-stone-200: #E8E5E0;
	--cb-stone-500: #918B82;
	--cb-stone-600: #6E6961;
	--cb-stone-800: #3A3732;

	--cb-white: #FFFFFF;

	--cb-font-display: "Figtree", "Helvetica Neue", Arial, sans-serif;
	--cb-font-core: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

	--cb-shadow-card: 0 1px 2px rgba(18, 51, 63, .04), 0 6px 16px -8px rgba(18, 51, 63, .10);
	--cb-radius-card: 8px;

	position: relative;
	width: 100%;
	background: var(--cb-white);
	color: var(--cb-stone-800);
	font-family: var(--cb-font-core);
}

.cb-wrap a {
	text-decoration: none;
}

/* Hero */

.cb-hero {
	position: relative;
	z-index: 2;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 48px) 64px;
}

/* Sibling of .cb-hero and .cb-body (not a child of .cb-hero), sized
   independently of the hero's own content height so the ring can bleed
   down behind the top rows of the card grid, matching Blog landing.html's
   own structure (see 00-blog-progress-log.md Entry 22). */
.cb-hero__decowrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1120px;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.cb-hero__deco {
	position: absolute;
	right: -300px;
	top: 60px;
	width: 1000px;
	height: auto;
	opacity: .13;
	pointer-events: none;
}

.cb-hero__deco .ring-art,
.cb-card__icon .ring-art {
	display: block;
	width: 100%;
	height: 100%;
	isolation: isolate;
}

.cb-hero__deco .ring-art path,
.cb-card__icon .ring-art path {
	mix-blend-mode: multiply;
}

.cb-hero__container {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
}

.cb-hero__inner {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}

.cb-eyebrow {
	font-family: var(--cb-font-core);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cb-blue-600);
}

.cb-hero__title {
	font-family: var(--cb-font-display);
	font-weight: 500;
	font-size: clamp(40px, 5vw, 64px);
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--cb-blue-500);
	margin: 0;
}

.cb-hero__intro {
	font-family: var(--cb-font-core);
	font-size: 17px;
	line-height: 1.8;
	color: var(--cb-blue-900);
	margin: 0;
	max-width: 640px;
}

/* Body layout */

.cb-body {
	position: relative;
	z-index: 2;
	padding: 0 clamp(20px, 4vw, 48px) clamp(56px, 7vw, 104px);
}

.cb-layout {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

/* Sidebar */

.cb-sidebar {
	position: sticky;
	top: 32px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-right: 8px;
}

.cb-catgroup {
	display: flex;
	flex-direction: column;
}

.cb-sidebar__eyebrow {
	font-family: var(--cb-font-core);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cb-stone-600);
	padding: 8px 0;
}

.cb-catlink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	margin: 0 -14px;
	border-radius: 4px;
	font-family: var(--cb-font-core);
	font-size: 17px;
	font-weight: 400;
	color: var(--cb-stone-800);
	transition: background-color 140ms ease, color 140ms ease;
}

.cb-catlink:hover {
	background: var(--cb-blue-50);
	color: var(--cb-blue-600);
}

.cb-catlink--all {
	font-weight: 600;
}

.cb-catlink.is-active {
	background: var(--cb-blue-50);
	color: var(--cb-blue-600);
	font-weight: 600;
}

.cb-catlink__count {
	font-size: 14px;
	font-weight: 400;
	color: var(--cb-stone-500);
}

.cb-catlink.is-active .cb-catlink__count {
	color: var(--cb-stone-600);
}

/* Main column */

.cb-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.cb-main__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cb-stone-200);
}

.cb-main__title {
	font-family: var(--cb-font-display);
	font-weight: 500;
	font-size: 30px;
	color: var(--cb-blue-500);
}

.cb-main__count {
	font-family: var(--cb-font-core);
	font-size: 17px;
	color: var(--cb-stone-600);
	white-space: nowrap;
}

.cb-empty {
	font-family: var(--cb-font-core);
	color: var(--cb-stone-600);
}

/* Card grid */

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

.cb-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 340px;
	padding: 32px;
	border-radius: var(--cb-radius-card);
	background: var(--cb-white);
	border: 1px solid var(--cb-stone-200);
	box-shadow: var(--cb-shadow-card);
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.cb-card:hover {
	background: var(--ds-color-surface-brand-soft);
	box-shadow: 0 2px 6px rgba(18, 51, 63, .06), 0 14px 28px -12px rgba(18, 51, 63, .16);
	transform: translateY(-2px);
}

.cb-card__icon {
	position: absolute;
	right: -122px;
	top: 100%;
	width: 300px;
	height: 300px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 220ms ease;
	/* Anchored to .cb-card__body's own bottom edge (top:100%), not the
	   card's, so the visible top of the ring is always excerpt-bottom
	   for THAT card - adaptive per post, zero overlap by construction.
	   right compensates for .cb-card__body having 0 padding vs .cb-card's
	   32px, so the ring lands in the same on-screen spot horizontally.
	   See 00-blog-progress-log.md Entry 21. */
}

.cb-card:hover .cb-card__icon {
	opacity: .18;
}

.cb-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.cb-card__cat {
	font-family: var(--cb-font-core);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cb-blue-600);
}

.cb-card__title {
	font-family: var(--cb-font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.3;
	color: var(--cb-blue-500);
}

.cb-card__excerpt {
	font-family: var(--cb-font-core);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--cb-stone-800);
	margin: 0;
}

.cb-card__footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cb-card__date {
	font-family: var(--cb-font-core);
	font-size: 17px;
	color: var(--cb-stone-600);
}

.cb-card__arrow {
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: var(--cb-royal-500);
	-webkit-mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@0.544.0/icons/arrow-right.svg");
	mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@0.544.0/icons/arrow-right.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 220ms ease;
}

.cb-card:hover .cb-card__arrow {
	transform: translateX(4px);
}

/* Pagination */

.cb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 8px;
}

.cb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--cb-font-core);
	font-size: 17px;
	color: var(--cb-blue-800);
	border: 1px solid var(--cb-stone-200);
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.cb-pagination a.page-numbers:hover {
	background: var(--cb-blue-50);
	border-color: var(--cb-blue-200);
	color: var(--cb-blue-600);
}

.cb-pagination .page-numbers.current {
	background: var(--cb-royal-500);
	border-color: var(--cb-royal-500);
	color: var(--cb-white);
}

.cb-pagination .page-numbers.dots {
	border: none;
	color: var(--cb-stone-500);
}

/* Reviews band (real testimonial content reused from the Home page's
   live "Patient Reviews" section - not fabricated). Static single-quote
   reproduction of the design's carousel default state, no JS. */

.cb-reviews {
	background: var(--cb-blue-400);
	padding: clamp(56px, 7vw, 104px) 0;
}

.cb-reviews__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px 300px;
	gap: 80px;
	align-items: stretch;
}

.cb-reviews__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	justify-content: space-between;
}

.cb-reviews__quote {
	margin: 0;
	font-family: var(--cb-font-display);
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	font-size: clamp(32px, 3.6vw, 48px);
	color: var(--cb-blue-900);
	max-width: 26ch;
}

.cb-reviews__byline {
	font-family: var(--cb-font-core);
	font-size: 17px;
	color: var(--cb-blue-900);
}

.cb-reviews__rule {
	display: block;
	background: rgba(255, 255, 255, .34);
}

.cb-reviews__score-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding-top: 6px;
}

.cb-reviews__eyebrow {
	font-family: var(--cb-font-core);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cb-blue-900);
}

.cb-reviews__score {
	font-family: var(--cb-font-display);
	font-size: 76px;
	line-height: 1;
	font-weight: 500;
	color: var(--cb-white);
}

.cb-reviews__stars {
	display: flex;
	gap: 4px;
}

.cb-reviews__stars span {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
	background: var(--cb-white);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.cb-reviews__meta {
	font-family: var(--cb-font-core);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cb-blue-900);
}

/* Useful Links (real destinations: ACC Claims / Fees / FAQ pages that
   already exist on the site; real photo already on the site, the same
   one used in the identical section on the About page). */

.cb-useful {
	background: var(--cb-white);
	padding: clamp(56px, 7vw, 104px) 0;
}

.cb-useful__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 560px;
	gap: 110px;
	align-items: center;
}

.cb-useful__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cb-useful__photo {
	width: 560px;
	height: 560px;
	max-width: 100%;
	object-fit: cover;
	object-position: 58% 45%;
	border-radius: 8px;
	display: block;
}

.cb-useful__title {
	font-family: var(--cb-font-display);
	font-weight: 500;
	font-size: clamp(32px, 3.6vw, 48px);
	color: var(--cb-blue-500);
	margin: 0;
}

.cb-useful__intro {
	font-family: var(--cb-font-core);
	font-size: 17px;
	line-height: 1.7;
	color: var(--cb-stone-800);
	max-width: 52ch;
	margin: 0;
}

.cb-useful__rows {
	align-self: stretch;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
}

.cb-useful__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px;
	gap: 32px;
	align-items: center;
	padding: 30px 0;
	border-top: 1px solid var(--cb-stone-200);
}

.cb-useful__row-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cb-useful__row-title {
	font-family: var(--cb-font-display);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--cb-blue-500);
}

.cb-useful__row-desc {
	font-family: var(--cb-font-core);
	font-size: 17px;
	line-height: 1.7;
	color: var(--cb-stone-800);
}

.cb-useful__row-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid var(--ds-color-stone-300);
	background-color: var(--cb-royal-500);
	-webkit-mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@0.544.0/icons/arrow-right.svg");
	mask-image: url("https://cdn.jsdelivr.net/npm/lucide-static@0.544.0/icons/arrow-right.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px;
	mask-size: 20px;
	transition: transform 220ms ease;
}

.cb-useful__row:hover .cb-useful__row-go {
	transform: translateX(3px);
}

/* Tablet - matches astra_tablet_breakpoint (1024px) */

@media (max-width: 1024px) {
	.cb-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cb-useful__container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cb-useful__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}

	.cb-sidebar {
		position: static;
		max-height: none;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		padding-right: 0;
	}

	.cb-catgroup {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.cb-sidebar__eyebrow {
		flex-basis: 100%;
		padding: 0;
	}

	.cb-catlink {
		margin: 0;
		border: 1px solid var(--cb-stone-200);
	}

	.cb-catlink__count {
		margin-left: 4px;
	}

	.cb-reviews__container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cb-reviews__rule {
		height: 1px;
	}

	.cb-reviews__quote {
		max-width: none;
	}

	.cb-reviews__score-col {
		padding-top: 0;
	}

	.cb-useful__row {
		grid-template-columns: minmax(0, 1fr) 44px;
		gap: 20px;
	}

	.cb-useful__row-go {
		width: 44px;
		height: 44px;
	}
}

/* Mobile - matches astra_mobile_breakpoint (767px) */

@media (max-width: 767px) {
	.cb-grid {
		grid-template-columns: 1fr;
	}

	.cb-card {
		min-height: 0;
		padding: 24px;
	}

	.cb-main__heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.cb-hero__deco {
		display: none;
	}

	.cb-reviews__score {
		font-size: 60px;
	}

	.cb-useful__row-title {
		font-size: 24px;
	}
}