/* ============ Design tokens ============ */
:root {
  --background: hsl(38 40% 98%);
  --foreground: hsl(200 30% 12%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(200 30% 12%);
  --popover: hsl(0 0% 100%);
  --primary: hsl(196 75% 28%);
  --primary-foreground: hsl(38 40% 98%);
  --secondary: hsl(38 35% 94%);
  --secondary-foreground: hsl(200 30% 12%);
  --muted: hsl(38 25% 95%);
  --muted-foreground: hsl(200 12% 42%);
  --accent: hsl(28 90% 55%);
  --accent-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 72% 51%);
  --border: hsl(38 25% 88%);
  --rating: hsl(142 55% 42%);
  --star: hsl(38 95% 55%);
  --success: hsl(158 64% 38%);
  --success-soft: hsl(152 55% 94%);
  --cta: hsl(8 78% 58%);
  --cta-foreground: hsl(0 0% 100%);
  --gradient-hero: linear-gradient(135deg, hsl(196 75% 28%) 0%, hsl(196 65% 38%) 60%, hsl(180 50% 45%) 100%);
  --gradient-warm: linear-gradient(180deg, hsl(38 40% 98%) 0%, hsl(38 35% 94%) 100%);
  --shadow-soft: 0 4px 20px -8px hsl(196 60% 20% / 0.15);
  --shadow-card: 0 2px 12px -4px hsl(196 40% 20% / 0.08);
  --radius: 0.75rem;
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-family: 'Inter', system-ui, sans-serif; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em; line-height: 1.2; font-weight: 700; }

/* ============ Layout primitives ============ */
.container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 2rem; }
@media (max-width: 640px) { .container { padding-inline: 1rem; } }

.section { padding-block: 2.5rem; }
.section-sm { padding-block: 2rem; }
.section-lg { padding-block: 4rem; }

.muted { color: var(--muted-foreground); }
.kicker { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.lead { font-size: 1.125rem; color: var(--muted-foreground); margin-top: 1rem; line-height: 1.6; }
.text-center { text-align: center; }
.text-primary { color: var(--primary); }

.display { font-family: 'Fraunces', Georgia, serif; }
.heading-sm { font-size: 1.125rem; font-weight: 700; }
.heading-md { font-size: 1.25rem; font-weight: 700; }
.heading-lg { font-size: 1.5rem; font-weight: 700; }
.heading-xl { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 768px) {
  .heading-xl { font-size: 2.25rem; }
  .heading-lg { font-size: 1.75rem; }
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }

/* Responsive helpers */
.show-sm-up { display: none; }
@media (min-width: 640px) {
  .show-sm-up { display: inline; }
  .hide-sm-up { display: none; }
}

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: hsl(38 40% 98% / 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(38 25% 88% / 0.6);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: var(--foreground); }
.brand__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0.5rem; background: var(--gradient-hero); color: var(--primary-foreground); box-shadow: var(--shadow-soft); flex-shrink: 0; }
.brand__icon svg { width: 20px; height: 20px; }
.brand__icon--sm { width: 32px; height: 32px; }
.brand__icon--sm svg { width: 16px; height: 16px; }
.brand__text { font-size: 1rem; line-height: 1.1; }
@media (min-width: 640px) { .brand__text { font-size: 1.25rem; } }
.brand__accent { color: var(--primary); }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; transition: opacity .15s, background-color .15s, transform .15s; cursor: pointer; }
.btn--pill { border-radius: 9999px; }
.btn--compact { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
@media (min-width: 640px) { .btn--compact { padding: 0.5rem 1rem; font-size: 0.875rem; } }
.btn--lg { padding: 0.75rem 1.5rem; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--secondary { background: var(--secondary); color: var(--foreground); border: 1px solid var(--border); }
.btn--secondary:hover { background: var(--muted); }
.btn--accent { background: var(--accent); color: var(--accent-foreground); box-shadow: var(--shadow-soft); }
.btn--accent:hover { opacity: 0.95; }
.btn--outline { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.btn--outline:hover { background: var(--secondary); }
.btn--card { background: var(--card); color: var(--foreground); border: 1px solid var(--border); padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--card:hover { background: var(--secondary); }
.btn--cta { background: var(--cta); color: var(--cta-foreground); border-radius: 0.75rem; box-shadow: var(--shadow-card); padding: 0.75rem 1.5rem; }
.btn--cta:hover { opacity: 0.95; }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; background: var(--gradient-warm); }
.hero__bg { position: absolute; inset: 0 0 auto 0; height: 18rem; background: var(--gradient-hero); opacity: 0.95; }
.hero__inner { position: relative; z-index: 10; padding-top: 2.5rem; padding-bottom: 3rem; }
.hero__breadcrumb { font-size: 0.75rem; color: hsl(38 40% 98% / 0.8); margin-bottom: 1.5rem; }
.hero__breadcrumb a:hover { text-decoration: underline; }
.hero__breadcrumb span { margin: 0 0.5rem; }
.hero__breadcrumb-current { color: var(--primary-foreground); margin: 0 !important; }
.hero__card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-soft); padding: 1.5rem; }
@media (min-width: 768px) { .hero__card { padding: 2rem; } }
.hero__top { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .hero__top { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.hero__identity { display: flex; align-items: flex-start; gap: 1.25rem; }
.hero__logo { width: 80px; height: 80px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; }
.hero__logo img { width: 110%; height: 110%; object-fit: contain; }
.hero__meta { display: flex; flex-direction: column; gap: 0.5rem; }
.hero__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hero__rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.hero__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.meta-item--link { color: var(--primary); }
.meta-item--link:hover { text-decoration: underline; }
.hero__ctas { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; }
@media (min-width: 768px) { .hero__ctas { align-items: flex-end; } }

/* Tags / badges */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge--rating { background: hsl(142 55% 42% / 0.1); color: var(--rating); }
.badge--primary { background: hsl(196 75% 28% / 0.1); color: var(--primary); padding: 0.25rem 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.badge--secondary { background: var(--secondary); color: var(--secondary-foreground); padding: 0.25rem 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.badge--success { background: var(--success-soft); color: var(--success); padding: 0.375rem 1rem; font-size: 0.875rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag { padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--secondary); font-size: 0.75rem; font-weight: 500; color: var(--secondary-foreground); }

/* ============ Stars ============ */
.stars { display: inline-flex; align-items: center; gap: 1px; }
.stars[data-size="sm"] svg { width: 16px; height: 16px; }
.stars[data-size="md"] svg { width: 20px; height: 20px; }
.stars[data-size="lg"] svg { width: 28px; height: 28px; }
.stars__star { position: relative; display: inline-block; }
.stars__star svg.bg { color: var(--border); fill: none; }
.stars__star .fg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stars__star .fg svg { color: var(--star); fill: var(--star); }

/* ============ Layout grid (reviews + side) ============ */
.layout-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .layout-grid { grid-template-columns: 1fr 340px; align-items: start; } }
.layout-main { display: flex; flex-direction: column; gap: 1.5rem; }
.layout-side { position: relative; }
@media (min-width: 1024px) { .layout-side { position: sticky; top: 6rem; align-self: start; } }

/* ============ Card ============ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 1.5rem; }
.card--warm { background: var(--gradient-warm); }
.card--block { padding: 1.5rem; }
@media (min-width: 768px) { .card--block { padding: 2rem; } }
.card--red { border-color: hsl(0 72% 51% / 0.3); }
.card--green { border-color: hsl(142 55% 42% / 0.3); }
.card__header-flex { display: flex; align-items: center; gap: 0.5rem; }
.icon-with-text { display: inline-flex; align-items: center; gap: 0.5rem; }
.icon-with-text--primary { color: var(--primary); }
.icon-with-text h2 { color: var(--primary); }

/* Review summary grid */
.summary-grid { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .summary-grid { grid-template-columns: 1fr 1fr; } }
.summary-cell { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; }
.summary-cell__head { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.summary-cell__head--positive { color: var(--rating); }
.summary-cell__head--negative { color: var(--destructive); }
.summary-cell p { font-size: 0.875rem; line-height: 1.6; color: hsl(200 30% 12% / 0.85); }
.hashtag-list { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hashtag { padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

/* Filters */
.row-between { display: flex; align-items: baseline; justify-content: space-between; }
.filters { display: flex; justify-content: flex-end; }
.dropdown { position: relative; }
.dropdown__menu { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 12rem; background: var(--popover); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow-soft); overflow: hidden; z-index: 30; }
.dropdown__menu button { display: block; width: 100%; text-align: left; padding: 0.5rem 1rem; font-size: 0.875rem; }
.dropdown__menu button:hover { background: var(--secondary); }
.dropdown__menu button.is-active { color: var(--primary); font-weight: 600; }

/* Review list */
.review-list { display: flex; flex-direction: column; gap: 1rem; }
.review { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card); transition: box-shadow .2s; }
.review:hover { box-shadow: var(--shadow-soft); }
.review__head { display: flex; align-items: flex-start; gap: 1rem; }
.review__avatar { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: var(--secondary); color: var(--primary); font-weight: 600; }
.review__id { flex: 1; min-width: 0; }
.review__name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.review__name { font-weight: 600; color: var(--foreground); }
.review__verified { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--rating); }
.review__loc { font-size: 0.75rem; color: var(--muted-foreground); }
.review__date { font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; }
.review__title-row { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.review__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: var(--foreground); line-height: 1.25; }
.review__body { margin-top: 0.75rem; line-height: 1.65; color: hsl(200 30% 12% / 0.85); }
.review__foot { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid hsl(38 25% 88% / 0.7); font-size: 0.875rem; }
.review__helpful { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1px solid var(--border); color: var(--muted-foreground); transition: color .15s, background-color .15s; }
.review__helpful:hover { background: var(--secondary); color: var(--foreground); }
.review__helpful strong { color: var(--foreground); font-weight: 500; }
.review__icons { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); }
.review__icons button:hover { color: var(--foreground); }

.row-center { display: flex; justify-content: center; padding-top: 1rem; }

/* Side CTA */
.cta-card { background: var(--gradient-hero); color: var(--primary-foreground); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-soft); }
.cta-card__pill { display: inline-block; background: hsl(38 40% 98% / 0.15); padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cta-card__title { margin-top: 0.75rem; }
.cta-card__sub { margin-top: 0.5rem; font-size: 0.875rem; color: hsl(38 40% 98% / 0.85); }
.cta-card .btn { margin-top: 1rem; }

/* ============ Inline CTA ============ */
.inline-cta { border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .inline-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; } }
.inline-cta--primary { background: var(--gradient-hero); color: var(--primary-foreground); }
.inline-cta--primary p { color: hsl(38 40% 98% / 0.85); }
.inline-cta--warm { background: var(--gradient-warm); border: 1px solid var(--border); color: var(--foreground); }
.inline-cta--warm p { color: var(--muted-foreground); }
.inline-cta__text { max-width: 36rem; }
.inline-cta__text p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; }

/* ============ Bands ============ */
.band { border-top: 1px solid var(--border); background: var(--background); }
.band--warm { background: var(--gradient-warm); }
.band--soft { background: hsl(38 35% 94% / 0.4); }

.centered-narrow { max-width: 48rem; margin-inline: auto; }

/* ============ Info table ============ */
.info-table { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); overflow: hidden; }
.info-table__head { background: var(--gradient-warm); padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.info-table__head p { margin-top: 0.25rem; font-size: 0.875rem; }
.info-row { padding: 1rem 1.5rem; display: grid; gap: 0.5rem; border-top: 1px solid var(--border); }
.info-row:first-child { border-top: 0; }
@media (min-width: 640px) { .info-row { grid-template-columns: 220px 1fr; align-items: center; } }
.info-row dt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
.info-row dd { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.info-row__icon { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--primary); }

/* ============ Quote ============ */
.quote { max-width: 48rem; margin-inline: auto; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 2rem; }
@media (min-width: 768px) { .quote { padding: 2.5rem; } }
.quote__mark { width: 32px; height: 32px; color: var(--primary); }
.quote blockquote { margin-top: 1rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; line-height: 1.6; color: var(--foreground); }
@media (min-width: 768px) { .quote blockquote { font-size: 1.5rem; } }
.quote__author { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.quote__author img { width: 64px; height: 64px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px var(--border); }
.quote__name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.quote__role { font-size: 0.75rem; color: var(--muted-foreground); }

/* ============ Reasons / Why lawyer ============ */
.reasons-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .reasons-grid { grid-template-columns: 1fr 1fr; } }
.reason-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0.75rem; background: hsl(196 75% 28% / 0.1); color: var(--primary); }
.reasons-grid h3 { margin-top: 1rem; }
.reasons-grid p { margin-top: 0.5rem; line-height: 1.65; color: hsl(200 30% 12% / 0.8); }

.card--block { margin-top: 3rem; }
.prose { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; line-height: 1.65; color: hsl(200 30% 12% / 0.85); }

.flag-grid { margin-top: 2rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .flag-grid { grid-template-columns: 1fr 1fr; } }
.flag-head { display: flex; align-items: center; gap: 0.5rem; }
.flag-head--red { color: var(--destructive); }
.flag-head--green { color: var(--rating); }
.bullet-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.bullet-list li { display: flex; gap: 0.5rem; font-size: 0.875rem; color: hsl(200 30% 12% / 0.85); }
.bullet-list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 9999px; margin-top: 0.45rem; }
.bullet-list--red li::before { background: var(--destructive); }
.bullet-list--green li::before { background: var(--rating); }

.video-wrap { margin-top: 3rem; }
.video { aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.video iframe { width: 100%; height: 100%; border: 0; }

.text-center { margin-top: 3rem; }

/* ============ Recommended ============ */
.recommended { max-width: 56rem; margin: 2rem auto 0; background: var(--card); border: 2px solid hsl(158 64% 38% / 0.3); border-radius: 1rem; box-shadow: var(--shadow-soft); overflow: hidden; }
.recommended__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid hsl(158 64% 38% / 0.2); background: hsl(152 55% 94% / 0.6); }
.recommended__verified { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--success); }
.recommended__clients { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }
.recommended__body { display: grid; gap: 1.5rem; padding: 1.5rem; }
@media (min-width: 768px) { .recommended__body { grid-template-columns: 220px 1fr; padding: 2rem; } }
.recommended__left { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.recommended__logo-box { width: 100%; height: 128px; border: 1px solid var(--border); background: hsl(38 35% 94% / 0.5); border-radius: 0.75rem; padding: 1rem; display: flex; align-items: center; justify-content: center; }
.recommended__logo-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.recommended__score { text-align: center; }
.recommended__stars { margin-top: 0.375rem; display: flex; justify-content: center; }
.recommended__reviews { display: inline-block; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--success); }
.recommended__reviews:hover { text-decoration: underline; }
.recommended__right { display: flex; flex-direction: column; gap: 1.25rem; }
.recommended__right > p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.65; }
@media (min-width: 768px) { .recommended__right > p { font-size: 1rem; } }

.features { display: grid; gap: 1rem; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
.features li { display: flex; gap: 0.75rem; }
.features__icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: var(--success-soft); color: var(--success); }
.features__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.features__desc { font-size: 0.75rem; color: var(--muted-foreground); }

/* ============ Steps ============ */
.steps { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.steps .card { display: flex; gap: 1rem; align-items: flex-start; }
.step-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: hsl(196 75% 28% / 0.1); color: var(--primary); }
.steps h3 { margin-top: 0.25rem; }
.steps p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.source-line { margin-top: 1.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.source-line a { text-decoration: underline; }
.source-line a:hover { color: var(--foreground); }

/* ============ Related ============ */
.related-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }
.related-item { padding: 1.25rem; transition: transform .15s, box-shadow .15s; }
.related-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.related-item__avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 0.75rem; background: var(--gradient-hero); color: var(--primary-foreground); font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.related-item h3 { margin-top: 0.75rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: var(--foreground); }
.related-item__rating { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.related-item__rating .muted { font-size: 0.75rem; }

/* ============ Alternatives ============ */
.alternatives { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 3rem; }
.alternative { padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.alternative:last-child, .alternative--last { border-bottom: 0; padding-bottom: 0; }
.alternative h3 { margin-top: 0.5rem; }
.alternative p { margin-top: 1rem; font-size: 15px; line-height: 1.7; color: hsl(200 30% 12% / 0.8); }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--border); background: var(--card); padding-block: 2.5rem; }
.site-footer__row { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .site-footer__row { flex-direction: row; align-items: center; justify-content: space-between; } }
.brand--footer { font-size: 1.125rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.site-footer__nav a:hover { color: var(--foreground); }
.site-footer__copy { margin-top: 1.5rem; font-size: 0.75rem; color: var(--muted-foreground); }