/* Online Class Helpers Reviews — hand written stylesheet, no build step.

   Class names use camelCase on purpose rather than kebab case, so nothing in
   this file's own selectors uses a hyphen. Hyphens still appear where CSS
   itself requires them (background-color, font-family, and so on) since those
   are the property spec, not a naming choice.

   Design notes, so later edits do not flatten the thing back out:
   - Page sits on warm paper, not pure white. Cards are white, so they lift off
     the background without needing heavy shadows.
   - The hero is dark ink green. It is the only dark block above the footer, so
     it anchors the top of the page instead of fading into a pale wash.
   - Headlines and the verdict block are serif, everything else is sans. That
     single mix does most of the work of making the page read as edited rather
     than generated.
   - Section headings are left aligned with a short rule above them. Centering
     every heading is what made the earlier version feel machine set.
   - Scores use tabular figures so columns of numbers line up.
*/

:root {
  --emerald50: #ecfdf5;
  --emerald100: #d1fae5;
  --emerald200: #a7f3d0;
  --emerald300: #6ee7b7;
  --emerald400: #34d399;
  --emerald500: #10b981;
  --emerald600: #059669;
  --emerald700: #047857;
  --emerald800: #065f46;

  --amber50: #fffbeb;
  --amber100: #fef3c7;
  --amber200: #fde68a;
  --amber400: #fbbf24;
  --amber500: #f59e0b;
  --amber600: #d97706;
  --amber800: #92400e;

  --red50: #fef2f2;
  --red100: #fee2e2;
  --red400: #f87171;
  --red500: #ef4444;
  --red600: #dc2626;
  --orange400: #fb923c;

  --indigo50: #eef2ff;
  --indigo200: #c7d2fe;
  --indigo700: #4338ca;

  /* Warm neutral ramp. Slightly yellow rather than blue grey, which is what
     keeps the page from looking like a default component library. */
  --paper: #faf9f6;
  --paperDeep: #f4f2ed;
  --gray50: #f7f6f3;
  --gray100: #eeece7;
  --gray200: #e2dfd8;
  --gray300: #cfcbc1;
  --gray400: #9c988e;
  --gray500: #6f6b62;
  --gray600: #55524b;
  --gray700: #3c3a35;
  --gray800: #262521;
  --gray900: #16150f;

  --ink: #0c1f1b;
  --inkSoft: #14322b;
  --inkLine: rgba(255, 255, 255, 0.12);
  --white: #ffffff;

  --maxWidth: 1180px;

  --radiusSm: 6px;
  --radiusMd: 10px;
  --radiusLg: 14px;
  --radiusXl: 18px;
  --radiusFull: 999px;

  --shadowSm: 0 1px 2px rgba(22, 21, 15, 0.06);
  --shadowMd: 0 8px 20px -8px rgba(22, 21, 15, 0.16);
  --shadowLg: 0 24px 48px -20px rgba(22, 21, 15, 0.3);

  --fontSans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fontSerif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fontMono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fontSans);
  color: var(--gray800);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 0 18px;
}

@media (min-width: 640px) {
  .container {
    padding: 0 28px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }
}

/* Shared small caps label used above headings and inside panels. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fontSans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--emerald700);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--emerald500);
}

/* ---------- Header ---------- */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--gray200);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -18px rgba(15, 23, 42, 0.28);
}

.headerInner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 0;
}

@media (min-width: 900px) {
  .headerInner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 15px 0;
  }
}

.headerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.navToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  color: var(--gray700);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.navToggle:hover {
  background: var(--gray50);
  border-color: var(--gray300);
}

@media (min-width: 900px) {
  .navToggle {
    display: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.brand.active .brandName {
  color: var(--emerald700);
}

.brand:hover {
  opacity: 0.82;
}

.brand svg {
  flex-shrink: 0;
  display: block;
  padding: 5px;
  box-sizing: content-box;
  border-radius: var(--radiusMd);
  background: var(--emerald50);
  border: 1px solid var(--emerald100);
}

.brandName {
  font-family: var(--fontSerif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray900);
  white-space: nowrap;
}

.updatedPill {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--white);
  color: var(--gray600);
  border: 1px solid var(--gray200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: var(--radiusFull);
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .updatedPill {
    display: inline-flex;
  }
}

.updatedDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald500);
  box-shadow: 0 0 0 3px var(--emerald100);
}

/* Mobile: a collapsed drawer toggled by #navToggle. Desktop: a plain inline
   row. Structurally one markup block either way, styled differently per
   breakpoint, so there is nothing to keep in sync between "mobile nav" and
   "desktop nav" — they are the same nav. */
.primaryNav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: var(--radiusMd);
  padding: 8px;
  box-shadow: var(--shadowMd);
}

.primaryNav.open {
  display: flex;
}

@media (min-width: 900px) {
  .primaryNav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
}

.primaryNav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--gray600);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: var(--radiusSm);
  transition: color 0.15s ease, background 0.15s ease;
}

@media (min-width: 900px) {
  .primaryNav a {
    padding: 8px 14px;
    border-radius: var(--radiusFull);
  }
}

.primaryNav a:hover {
  color: var(--gray900);
  background: rgba(15, 23, 42, 0.05);
}

/* Current page marker: both aria-current="page" and a plain .active class
   are set together in header.js, so either selector alone would work — kept
   as one rule since they always match the same link. */
.primaryNav a[aria-current="page"],
.primaryNav a.active {
  color: var(--emerald800);
  background: var(--emerald50);
  font-weight: 700;
}

.navCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: var(--radiusFull);
  background: var(--emerald600);
  color: var(--white) !important;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}

.navCta:hover {
  background: var(--emerald700);
  transform: translateY(-1px);
}

@media (min-width: 900px) {
  .navCta {
    margin-top: 0;
    margin-left: 6px;
    padding: 9px 16px;
    font-size: 13.5px;
  }
}

.navSpacer {
  margin-left: auto;
}

/* ---------- Hero ---------- */

/* ---------------------------------------------------------------------
   Homepage hero — search-led directory entry point. Flat dark ink block,
   no radial gradients or blur: the two live snapshot cards on the right
   carry the visual weight instead of decorative glow. Grades reuse the
   same .gradeChip scale as the directory cards below (see gradeFor() in
   main.js), so a score never reads differently here than it does two
   seconds later in the grid.
   ------------------------------------------------------------------- */

.indexHero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
  padding: 34px 0 40px;
  border-bottom: 1px solid var(--inkLine);
}

@media (min-width: 900px) {
  .indexHero {
    padding: 48px 0 52px;
  }
}

/* Faint emerald glow behind the headline — purely decorative, sits behind
   .indexHeroInner via z-index so it never interferes with text contrast. */
.indexHero::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  width: 900px;
  height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.16), transparent);
  pointer-events: none;
}

.indexHeroInner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.categoryBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radiusFull);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.categoryBadgeDot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--emerald400);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
  animation: categoryBadgePulse 2.2s ease-in-out infinite;
}

/* Reduced-motion users get this switched off by the site-wide
   prefers-reduced-motion rule further down, same as every other animation. */
@keyframes categoryBadgePulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.12);
  }
}

.indexHero h1 {
  font-family: var(--fontSerif);
  margin: 16px 0 0;
  font-size: clamp(26px, 4.6vw, 40px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}

.indexHeroSub {
  max-width: 60ch;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

@media (min-width: 640px) {
  .indexHeroSub {
    font-size: 15.5px;
  }
}

/* Quick filter tags — text only, no icons. Mix of <button> (in-page
   directory filters) and <a> (links to safety-guide / editorial-team),
   same look either way. */
.quickFilterTags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 0;
}

.quickFilterTag {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border-radius: var(--radiusFull);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.quickFilterTag:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.quickFilterTag:focus-visible {
  outline: 2px solid var(--emerald400);
  outline-offset: 2px;
}

.quickFilterTag.active {
  border-color: var(--emerald400);
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald300);
}

/* 4-column trust/metric grid. Real, dynamically-populated numbers only —
   "Services Audited" reads off window.SITE_DATA via [data-total-services],
   same as everywhere else on the site, rather than a hardcoded figure. */
.heroTrustGrid {
  margin: 22px auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .heroTrustGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.heroTrustItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radiusMd);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.heroTrustItem:hover {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.heroTrustIcon {
  color: var(--emerald400);
  margin-bottom: 2px;
}

.heroTrustValue {
  font-family: var(--fontSerif);
  font-size: 19px;
  font-weight: 700;
  color: var(--emerald400);
  font-variant-numeric: tabular-nums;
}

.heroTrustLabel {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

.indexHeroCtas {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.indexHeroLink {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.indexHeroLink:hover {
  color: var(--white);
}

.indexHeroNote {
  margin: 18px auto 0;
  padding: 10px 16px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--inkLine);
  background: rgba(255, 255, 255, 0.035);
  max-width: 620px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.indexHeroNote a {
  color: var(--emerald300);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: var(--radiusMd);
  background: var(--emerald500);
  color: #04241c;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(4, 36, 28, 0.12), 0 8px 20px -8px rgba(16, 185, 129, 0.55);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btnPrimary:hover {
  background: var(--emerald400);
  box-shadow: 0 1px 2px rgba(4, 36, 28, 0.14), 0 10px 24px -8px rgba(16, 185, 129, 0.65);
  transform: translateY(-1px);
}

/* ---------- Rating pillars strip ---------- */

.pillarStrip {
  background: var(--white);
  border-bottom: 1px solid var(--gray200);
  padding: 30px 0;
}

.pillarStripHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

.pillarStripHead p {
  margin: 0;
  font-size: 13px;
  color: var(--gray500);
}

.pillarStripHead a {
  color: var(--emerald700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--emerald200);
}

.pillarStripHead a:hover {
  border-bottom-color: var(--emerald600);
}

.pillarGrid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gray200);
  border: 1px solid var(--gray200);
  border-radius: var(--radiusLg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .pillarGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .pillarGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pillarItem {
  min-width: 0;
  background: var(--white);
  padding: 18px;
}

.pillarNum {
  font-family: var(--fontMono);
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald600);
}

.pillarItem h3 {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray900);
  letter-spacing: -0.01em;
}

.pillarItem p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray500);
}

/* ---------- Section heading pattern ---------- */

.sectionHead {
  max-width: 62ch;
}

.sectionHead .sectionHeading {
  margin: 12px 0 0;
}

.sectionHeading {
  font-family: var(--fontSerif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--gray900);
  margin: 0;
}

@media (min-width: 640px) {
  .sectionHeading {
    font-size: 33px;
  }
}

.sectionSub {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray600);
}

.sectionSub a {
  color: var(--emerald700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--emerald200);
}

/* ---------- Category filters ---------- */

.filters {
  position: sticky;
  top: 61px;
  z-index: 40;
  background: rgba(250, 249, 246, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--gray200);
  border-bottom: 1px solid var(--gray200);
  padding: 14px 0;
}

@media (min-width: 900px) {
  .filters {
    top: 65px;
  }
}

.filterRow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filterRow::-webkit-scrollbar {
  display: none;
}

.filterButton {
  flex-shrink: 0;
  border-radius: var(--radiusFull);
  border: 1px solid var(--gray200);
  background: var(--white);
  color: var(--gray600);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.filterButton:hover {
  border-color: var(--gray300);
  color: var(--gray900);
}

.filterButton.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* ---------- Directory ---------- */

.directory {
  padding: 34px 0 56px;
}

.resultCount {
  margin: 0 0 20px;
  font-family: var(--fontMono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gray500);
}

.serviceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.serviceCard.compact {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width: auto, which measures the min-content size
     of descendants and ignores min-width: 0 set further down the tree. Without
     this, the long unbroken domain names force the card, and the page, wider
     than the viewport on narrow screens. */
  min-width: 0;
  border-radius: var(--radiusMd);
  background: var(--white);
  border: 1px solid var(--gray200);
  box-shadow: var(--shadowSm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.serviceCard.compact:hover {
  border-color: var(--gray300);
  box-shadow: var(--shadowMd);
  transform: translateY(-2px);
}

.serviceCard.compact.rankOne {
  border-color: var(--emerald300);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.13), var(--shadowSm);
}

.serviceCard.compact.rankOne:hover {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), var(--shadowMd);
}

.serviceCard.compact.rankTwo {
  border-color: var(--amber200);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13), var(--shadowSm);
}

.serviceCard.compact.rankTwo:hover {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), var(--shadowMd);
}

.serviceCard.compact.rankThree {
  border-color: #bae6fd;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.13), var(--shadowSm);
}

.serviceCard.compact.rankThree:hover {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), var(--shadowMd);
}

/* Thumbnail: a plain screenshot, not the full browser mockup frame used on
   review pages, since a mock address bar adds height a compact card can't
   spare. object-fit: cover crops rather than squashes the capture. */
.cardThumb {
  position: relative;
  display: block;
  height: 150px;
  overflow: hidden;
  background: var(--gray100);
}

.cardThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s ease;
}

.serviceCard.compact:hover .cardThumb img {
  transform: scale(1.04);
}

.gradientRankOne {
  background: linear-gradient(140deg, var(--emerald400), var(--emerald700));
}

.gradientRankTwo {
  background: linear-gradient(140deg, var(--amber400), var(--amber600));
}

.gradientDefault {
  background: linear-gradient(140deg, #7d8a86, #3d4a46);
}

.mockupFallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--white);
}

.mockupFallback .initials {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mockupFallback .domainLabel {
  font-family: var(--fontMono);
  font-size: 10px;
  opacity: 0.85;
  padding: 0 12px;
  text-align: center;
  word-break: break-all;
}

/* Rank flag sits over the thumbnail. */
.rankBadgeTop {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radiusSm);
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadowMd);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.serviceCard.compact:hover .rankBadgeTop {
  transform: translateY(-1px);
}

.rankBadgeTop.winner {
  background: var(--emerald500);
  color: #04241c;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 2px 10px rgba(16, 185, 129, 0.35);
}

.rankBadgeTop.runnerUp {
  background: var(--amber400);
  color: #3d2500;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22), 0 2px 10px rgba(251, 191, 36, 0.3);
}

.rankBadgeTop.thirdPick {
  background: #38bdf8;
  color: #052a3d;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22), 0 2px 10px rgba(56, 189, 248, 0.3);
}

/* Browser mockup — used on individual review pages (reviewHeroMedia), not on
   the compact directory cards, which use the plainer .cardThumb instead. */

.mockupFrame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mockupBar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--gray100);
  border-bottom: 1px solid var(--gray200);
  padding: 8px 11px;
}

.mockupDots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.mockupDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mockupDot.red {
  background: #f0736a;
}

.mockupDot.amber {
  background: #f4bd4f;
}

.mockupDot.green {
  background: #61c454;
}

.mockupUrl {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: var(--radiusSm);
  padding: 3px 10px;
  font-family: var(--fontMono);
  font-size: 10.5px;
  color: var(--gray500);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
}

.mockupImage {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--gray100);
}

.mockupImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Compact card body */

.cardCompactBody {
  min-width: 0;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cardCompactHead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cardCompactHead .serviceLogo {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--gray200);
  background: var(--white);
  object-fit: contain;
  padding: 2px;
}

.cardCompactHead .serviceLogoFallback {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radiusSm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.cardCompactHead h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--gray900);
  text-transform: lowercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardCompactHead h3 a {
  color: inherit;
  text-decoration: none;
}

.cardCompactHead h3 a:hover {
  text-decoration: underline;
}

.scorePill {
  flex-shrink: 0;
  font-family: var(--fontMono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--emerald700);
  background: var(--emerald50);
  border: 1px solid var(--emerald100);
  padding: 3px 8px;
  border-radius: var(--radiusFull);
  white-space: nowrap;
}

.scorePill.notRated {
  color: var(--gray500);
  background: var(--gray100);
  border-color: var(--gray200);
}

/* Real, sourced Trustpilot citation — only rendered when a service has a
   verified trustpilotUrl in js/data.js. Uses Trustpilot's own brand green
   so it reads as a distinct third-party citation, not our own score pill. */
.trustpilotBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--fontMono);
  font-size: 11px;
  font-weight: 700;
  color: #00674c;
  background: #e7fbf3;
  border: 1px solid #b7f0da;
  padding: 3px 8px;
  border-radius: var(--radiusFull);
  text-decoration: none;
  white-space: nowrap;
}

.trustpilotBadge:hover {
  background: #d3f6e8;
}

.gradeChip {
  width: 34px;
  height: 34px;
  border-radius: var(--radiusSm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--white);
}

.gradeAPlus,
.gradeA {
  background: var(--emerald600);
}

.gradeBPlus {
  background: #74a72c;
}

.gradeB {
  background: var(--amber500);
}

.gradeC {
  background: var(--orange400);
}

.gradeD {
  background: var(--red500);
}

.notRated {
  flex-shrink: 0;
  background: var(--gray100);
  color: var(--gray500);
  border-radius: var(--radiusSm);
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
}

.badgeChip {
  display: inline-block;
  background: var(--indigo50);
  color: var(--indigo700);
  border: 1px solid var(--indigo200);
  border-radius: var(--radiusSm);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
}

.verdictLine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gray600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subjectPills {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.subjectPills li {
  border: 1px solid var(--gray200);
  background: var(--gray50);
  border-radius: var(--radiusSm);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray600);
}

/* Structural delivery model badge for the five non owned listings, amber for
   the two models that come with a real tradeoff (bidding, quote based
   pricing). Reuses the same distinction as the review page, compacted. */
.subjectPills li.caution {
  border-color: var(--amber200);
  background: var(--amber50);
  color: var(--amber800);
}

.compactActions {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  gap: 7px;
}

.visitButton {
  display: flex;
  flex: 1;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radiusMd);
  background: var(--emerald600);
  color: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.visitButton:hover {
  background: var(--emerald700);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}

.visitButton:active {
  transform: translateY(0);
}

.visitButton:focus-visible {
  outline: 2px solid var(--emerald800);
  outline-offset: 2px;
}

.serviceCard.compact.rankOne .visitButton {
  background: var(--emerald500);
}

.serviceCard.compact.rankOne .visitButton:hover {
  background: var(--emerald600);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.reviewButton {
  display: flex;
  flex: 1;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radiusMd);
  background: var(--white);
  color: var(--gray800);
  border: 1px solid var(--gray200);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.reviewButton:hover {
  border-color: var(--gray300);
  background: var(--gray50);
  transform: translateY(-1px);
}

.reviewButton:focus-visible {
  outline: 2px solid var(--emerald600);
  outline-offset: 2px;
}

/* ---------- Modal ---------- */

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 31, 27, 0.55);
  backdrop-filter: blur(3px);
  padding: 16px;
}

.modalOverlay.open {
  display: flex;
}

.modalCard {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radiusXl);
  padding: 22px;
  box-shadow: var(--shadowLg);
}

@media (min-width: 640px) {
  .modalCard {
    padding: 26px;
  }
}

.modalHeadRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modalHeadRow h3 {
  font-family: var(--fontSerif);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--gray900);
}

.modalSub {
  font-size: 13px;
  color: var(--gray500);
  margin: 4px 0 0;
}

.modalClose {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radiusSm);
  border: none;
  background: var(--gray50);
  color: var(--gray500);
  cursor: pointer;
  font-size: 15px;
}

.modalClose:hover {
  background: var(--gray100);
  color: var(--gray900);
}

.modalBody p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray600);
}

/* Form controls, shared by the review modal. */

.formLabel {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray600);
  margin-top: 16px;
}

.formInput {
  margin-top: 6px;
  width: 100%;
  min-height: 46px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray300);
  background: var(--white);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gray900);
}

textarea.formInput {
  min-height: 0;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

.formInput:focus {
  outline: 2px solid var(--emerald400);
  outline-offset: 1px;
  border-color: var(--emerald400);
}

.formNote {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gray500);
  margin-top: 14px;
}

.formSubmit {
  width: 100%;
  margin-top: 12px;
}

.reviewThanks {
  text-align: center;
  padding: 24px 0;
}

.reviewThanks .thanksHead {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray900);
  margin: 0;
}

.reviewThanks .thanksNote {
  font-size: 12.5px;
  color: var(--gray500);
  margin: 8px 0 0;
}

/* ---------- Shared sections: FAQ / scam alert / checklist ---------- */

.sectionBlock {
  padding: 54px 0;
}

.sectionBlock.tinted {
  background: var(--white);
  border-top: 1px solid var(--gray200);
}

.sectionBlock.amberTinted {
  background: var(--amber50);
  border-top: 1px solid var(--amber200);
  border-bottom: 1px solid var(--amber200);
}

.sectionBlock.amberTinted .eyebrow {
  color: var(--amber800);
}

.sectionBlock.amberTinted .eyebrow::before {
  background: var(--amber500);
}

.sectionBlock.amberTinted .sectionSub a {
  color: var(--amber800);
  border-bottom-color: var(--amber200);
}

/* Red flag teaser on the homepage. Titles only, the detail lives on the safety
   guide, so this section has substance without duplicating that page. */
.flagList {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--amber200);
  border: 1px solid var(--amber200);
  border-radius: var(--radiusMd);
  overflow: hidden;
}

@media (min-width: 700px) {
  .flagList {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .flagList {
    grid-template-columns: repeat(5, 1fr);
  }
}

.flagList li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  background: var(--white);
  padding: 15px 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gray800);
}

.flagNum {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber100);
  border: 1px solid var(--amber200);
  color: var(--amber800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontMono);
  font-size: 11px;
  font-weight: 700;
}

.flagCta {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber800);
  text-decoration: none;
  border-bottom: 1px solid var(--amber200);
  padding-bottom: 1px;
}

.flagCta:hover {
  border-bottom-color: var(--amber600);
}

/* FAQ / red flag list, in two columns on wide screens so a long list does not
   turn into an endless single file column. */
.accordionList {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
}

@media (min-width: 900px) {
  .accordionList.twoUp {
    grid-template-columns: 1fr 1fr;
  }
}

.accordionItem {
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  overflow: hidden;
  align-self: start;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.accordionItem:has(.accordionTrigger[aria-expanded="true"]) {
  border-color: var(--emerald200);
  box-shadow: var(--shadowSm);
}

.accordionItem.amber {
  border-color: var(--amber200);
}

.accordionTrigger {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 13px 16px;
  text-align: left;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--gray900);
  transition: background 0.15s ease;
}

.accordionTrigger:hover {
  background: var(--gray50);
}

.accordionNumber {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radiusSm);
  background: var(--amber100);
  border: 1px solid var(--amber200);
  color: var(--amber800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontMono);
  font-size: 11.5px;
  font-weight: 700;
}

.accordionTrigger .questionText {
  flex: 1;
  min-width: 0;
}

.accordionChevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--gray400);
  font-size: 10px;
}

.accordionItem.amber .accordionChevron {
  color: var(--amber600);
}

.accordionTrigger[aria-expanded="true"] .accordionChevron {
  transform: rotate(180deg);
}

.accordionPanel {
  display: none;
  border-top: 1px solid var(--gray100);
  padding: 14px 16px;
}

.accordionItem.amber .accordionPanel {
  border-top-color: var(--amber100);
}

.accordionPanel.open {
  display: block;
}

.accordionPanel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray600);
}

.noteBox {
  margin: 24px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 14px 16px;
}

.noteBox p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--gray500);
}

/* Safe payment checklist */

.checklistProgress {
  margin: 14px 0 0;
  font-family: var(--fontMono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--emerald700);
}

.checklist {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

@media (min-width: 900px) {
  .checklist {
    grid-template-columns: 1fr 1fr;
  }
}

.checklistButton {
  display: flex;
  min-height: 52px;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  gap: 11px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 13px 15px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checklistButton:hover {
  border-color: var(--gray300);
  box-shadow: var(--shadowSm);
}

.checklistButton.checked {
  border-color: var(--emerald300);
  background: var(--emerald50);
}

.checklistButton .icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 15px;
}

.checklistButton .safeIcon {
  color: var(--emerald600);
}

.checklistButton .unsafeIcon {
  color: var(--red500);
}

.checklistButton span.text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray700);
}

/* ---------- Content pages ---------- */

.pageHeroSmall {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  padding: 48px 0 52px;
}

.pageHeroSmall::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 130% at 82% 0%, rgba(16, 185, 129, 0.24), transparent 62%);
}

.pageHeroSmall.amber::before {
  background: radial-gradient(60% 130% at 82% 0%, rgba(245, 158, 11, 0.26), transparent 62%);
}

.pageHeroSmall .eyebrow {
  color: var(--emerald300);
}

.pageHeroSmall .eyebrow::before {
  background: var(--emerald400);
}

.pageHeroSmall.amber .eyebrow {
  color: var(--amber200);
}

.pageHeroSmall.amber .eyebrow::before {
  background: var(--amber400);
}

/* Used on pages whose body is a narrow .docPage column, so the hero text lines
   up with the prose underneath instead of starting further left. */
.pageHeroSmall.narrow .container {
  max-width: 760px;
  padding: 0 18px;
}

@media (min-width: 640px) {
  .pageHeroSmall.narrow .container {
    padding: 0 28px;
  }
}

.pageHeroSmall .emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 6px;
}

.pageHeroSmall h1 {
  font-family: var(--fontSerif);
  max-width: 30ch;
  margin: 14px 0 0;
  font-size: clamp(26px, 4.6vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--white);
}

.pageHeroSmall p {
  max-width: 58ch;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

/* Small stat chip row under a pageHeroSmall intro, and the anchor quick nav
   beneath it. Shared by any page long enough to benefit from jump links. */
.guideStatRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.guideStatRow li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radiusFull);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.guideNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 26px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.guideNav a {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.guideNav a:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* Extortion / blackmail section — deliberately red, distinct from the amber
   "red flags" section, since this is a different and more serious risk
   category (a criminal act against the student, not just a bad purchase). */
.sectionBlock.redTinted {
  background: var(--red50, #fef2f2);
  border-top: 1px solid var(--red200, #fecaca);
  border-bottom: 1px solid var(--red200, #fecaca);
}

.sectionBlock.redTinted .eyebrow {
  color: var(--red700, #b91c1c);
}

.sectionBlock.redTinted .eyebrow::before {
  background: var(--red500, #ef4444);
}

.sectionBlock.redTinted .noteBox {
  border-color: var(--red200, #fecaca);
  background: var(--white);
}

.calloutCard {
  margin: 22px 0 0;
  border-radius: var(--radiusMd);
  border: 1px solid var(--red200, #fecaca);
  background: var(--white);
  padding: 18px 20px;
}

.calloutCard h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray900);
}

.calloutCard p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray600);
}

.calloutCard p:last-child {
  margin-bottom: 0;
}

/* Numbered action steps, e.g. "if you already paid a scam". */
.stepList {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 700px) {
  .stepList {
    grid-template-columns: 1fr 1fr;
  }
}

.stepList li {
  display: flex;
  gap: 13px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 15px 16px;
}

.stepNum {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontMono);
  font-size: 12px;
  font-weight: 700;
}

.stepList h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray900);
}

.stepList p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray600);
}

/* Verification checklist — same visual language as the payment checklist,
   but a plain reference list rather than an interactive tap target. */
.verifyList {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

@media (min-width: 900px) {
  .verifyList {
    grid-template-columns: 1fr 1fr;
  }
}

.verifyList li {
  display: flex;
  gap: 11px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gray700);
}

.verifyList .icon {
  flex-shrink: 0;
  font-size: 15px;
}

.docPage {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 18px 60px;
}

@media (min-width: 640px) {
  .docPage {
    padding: 56px 28px 72px;
  }
}

.backLink {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray500);
  text-decoration: none;
}

.backLink:hover {
  color: var(--gray900);
}

.docPage h1 {
  font-family: var(--fontSerif);
  margin: 16px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gray900);
}

@media (min-width: 640px) {
  .docPage h1 {
    font-size: 36px;
  }
}

.docPage .lastUpdated {
  margin: 10px 0 0;
  font-family: var(--fontMono);
  font-size: 11.5px;
  color: var(--gray400);
}

.docPage .intro {
  margin: 18px 0 0;
  font-family: var(--fontSerif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray600);
}

.docSection {
  margin-top: 30px;
  padding: 26px 24px 30px;
  background: var(--paperDeep);
  border: 1px solid var(--gray200);
  border-radius: var(--radiusLg);
}

@media (min-width: 640px) {
  .docSection {
    margin-top: 36px;
    padding: 32px 36px 36px;
  }
}

.docSection h2 {
  position: relative;
  padding-left: 16px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray900);
  margin: 0;
}

.docSection h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: var(--radiusFull);
  background: var(--emerald500);
}

@media (min-width: 640px) {
  .docSection h2 {
    font-size: 22px;
  }
}

.docSection h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--gray900);
  margin: 26px 0 0;
}

.docSection h3::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radiusFull);
  background: var(--emerald500);
}

@media (min-width: 640px) {
  .docSection h3 {
    font-size: 17px;
  }
}

.docSection h3:first-of-type {
  margin-top: 20px;
}

.docSection ol {
  counter-reset: docStep;
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.docSection ol li {
  counter-increment: docStep;
  position: relative;
  padding: 12px 14px 12px 46px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray600);
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: var(--radiusMd);
  margin-top: 0;
}

.docSection ol li::before {
  content: counter(docStep);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: var(--radiusFull);
  background: var(--emerald500);
  color: var(--white);
  font-family: var(--fontMono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docSection ol li strong {
  display: block;
  color: var(--gray900);
  font-size: 15.5px;
  margin-bottom: 3px;
}

.docSection p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray600);
}

.docSection ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.docSection li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray600);
  margin-top: 6px;
}

/* Modifier for a closing checklist/CTA section — was applied on a couple of
   pages with no matching rule, so it rendered identical to a plain
   .docSection instead of standing out as the final call to action. */
.docSection.highlightBox {
  background: var(--emerald50);
  border-color: var(--emerald200);
}

.docSection.highlightBox h2 {
  color: var(--emerald800);
}

.docSection code {
  background: var(--gray100);
  border-radius: 4px;
  padding: 2px 5px;
  font-family: var(--fontMono);
  font-size: 12.5px;
}

.disclaimerBox {
  margin-top: 44px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 15px 17px;
}

.disclaimerBox p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--gray500);
}

/* ---------- Footer ---------- */

.siteFooter {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
}

.footerInner {
  padding: 52px 18px 40px;
}

@media (min-width: 640px) {
  .footerInner {
    padding: 60px 28px 44px;
  }
}

.footerTop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .footerTop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 56px;
  }
}

.footerBrand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footerBrand .brandName {
  font-size: 19px;
  color: var(--white);
}

.footerTagline {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
  max-width: 34ch;
}

.disclosureBox {
  border-radius: var(--radiusMd);
  border: 1px solid var(--inkLine);
  background: rgba(255, 255, 255, 0.04);
  padding: 18px;
}

.disclosureBox h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--emerald300);
}

.disclosureBox p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

.disclosureBox strong {
  color: var(--white);
  font-weight: 700;
}

.footerCta {
  display: inline-flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  border-radius: var(--radiusMd);
  background: var(--emerald500);
  color: #04241c;
  border: none;
  padding: 0 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

@media (min-width: 640px) {
  .footerCta {
    width: auto;
  }
}

.footerCta:hover {
  background: var(--emerald400);
}

.footerLinks {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--inkLine);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px 22px;
}

.footerLinks a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footerLinks a:hover {
  color: var(--emerald300);
}

.llmBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--inkLine);
  border-radius: var(--radiusFull);
  padding: 3px 11px;
}

.llmBadge:hover {
  border-color: var(--emerald500);
}

.footerCopy {
  margin: 20px auto 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.38);
  max-width: 92ch;
  text-align: center;
}

/* ---------- Review detail pages (reviews/<id>.html) ---------- */

.breadcrumbNav {
  border-bottom: 1px solid var(--gray200);
  background: var(--white);
}

.breadcrumbInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  font-size: 12.5px;
  color: var(--gray500);
}

.breadcrumbInner a {
  color: var(--gray500);
  text-decoration: none;
}

.breadcrumbInner a:hover {
  color: var(--emerald700);
  text-decoration: underline;
}

.breadcrumbInner [aria-current="page"] {
  color: var(--gray900);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}

.reviewTrustBar {
  background: var(--emerald800);
  color: var(--emerald50);
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}

.llmNote {
  position: relative;
  margin-top: 1.1rem;
  padding: 12px 16px 12px 42px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray700);
  background: var(--emerald50);
  border: 1px solid var(--emerald100);
  border-radius: var(--radiusMd);
}

.llmNote::before {
  content: "i";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: var(--radiusFull);
  background: var(--emerald600);
  color: var(--white);
  font-family: var(--fontSerif);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark hero, same ink/grid treatment as the homepage hero and the amber page
   heroes, kept consistent across the site rather than introducing a third
   hero style just for this template. */
.reviewHero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  padding: 36px 0 44px;
}

.reviewHero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(70% 120% at 78% 8%, rgba(16, 185, 129, 0.24), transparent 62%);
}

.reviewHero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(85% 75% at 50% 30%, #000 30%, transparent 100%);
}

.reviewHeroGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .reviewHeroGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 44px;
    align-items: center;
  }
}

.reviewHeroMedia .mockupFrame {
  margin: 0;
  border-radius: var(--radiusXl);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadowLg);
}

.reviewHeroInfo {
  min-width: 0;
}

.reviewHeroInfo h1 {
  font-family: var(--fontSerif);
  margin: 12px 0 0;
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  /* Lowercase suits the domain-style headings most review pages use
     (bestclasstaker.com Review), where the domain is already lowercase. */
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

/* Opt out on pages whose H1 is a real brand name rather than a domain
   (EduBirdie, AllAssignmentHelp) — there the capitalisation is part of the
   name and must render exactly as authored. */
.reviewHeroInfo h1.brandTitle {
  text-transform: none;
}

.reviewHeroSub {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.reviewScoreRow {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.reviewScoreBig {
  font-family: var(--fontMono);
  font-size: 30px;
  font-weight: 700;
  color: var(--white);
}

.reviewScoreBig .scoreMax {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.gradeInline {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radiusSm);
  background: var(--emerald500);
  color: #04241c;
  font-size: 13px;
  font-weight: 800;
}

/* Grade-specific colors on the hero badge. Same rule as the homepage cards:
   the letter grade drives the color, not a flat green for every score. */
.gradeInline.gradeAPlus,
.gradeInline.gradeA {
  background: var(--emerald500);
  color: #04241c;
}

.gradeInline.gradeBPlus {
  background: #74a72c;
  color: #0c1f0a;
}

.gradeInline.gradeB {
  background: var(--amber500);
  color: #2b1600;
}

.gradeInline.gradeC {
  background: var(--orange400);
  color: #2b1300;
}

.gradeInline.gradeD {
  background: var(--red500);
  color: #ffffff;
}

/* Lede paragraph in the review hero — was previously unstyled and fell back
   to default paragraph rendering, out of step with the rest of the hero. */
.heroExtraSummary {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* Same fix as .heroExtraSummary above, for the handful of review pages that
   use an overview line plus a bulleted key-facts box instead — both were
   unstyled and fell back to default rendering against the dark hero. */
.heroAuditOverview {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.heroAuditHighlights {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(16, 185, 129, 0.1);
  border-left: 4px solid var(--emerald500);
  border-radius: var(--radiusSm);
}

.heroAuditHighlights ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.heroAuditHighlights li {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.heroAuditHighlights li strong {
  color: var(--white);
}

.siteRatingBadge {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radiusFull);
  padding: 4px 10px;
}

.safetyBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  border-radius: var(--radiusFull);
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  text-decoration: none;
}

.safetyBadge:hover {
  background: rgba(56, 189, 248, 0.18);
}

.reviewHeroInfo .btnPrimary {
  margin-top: 20px;
}

.reviewHeroInfo .disclosure {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(52, 211, 153, 0.45);
  max-width: 60ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.reviewHeroInfo .disclosure a {
  color: var(--emerald300);
}

.docPage.wide {
  max-width: 860px;
}

/* Head to head comparison hero: two score cards either side of a "vs". */
.compareScoreRow {
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.compareScoreCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 180px;
  padding: 16px 18px;
  border-radius: var(--radiusMd);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.compareScoreName {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.compareScoreVs {
  font-family: var(--fontMono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* Comparison matrix table */
.compareTableWrap {
  margin-top: 18px;
  overflow-x: auto;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
}

.compareTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.compareTable th,
.compareTable td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray200);
  vertical-align: top;
}

.compareTable tbody tr:nth-child(even) td,
.compareTable tbody tr:nth-child(even) th {
  background: var(--gray50);
}

.compareTable thead th {
  background: var(--gray50);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray600);
  white-space: nowrap;
}

.compareTable tbody th {
  font-weight: 700;
  color: var(--gray900);
  background: var(--gray50);
  white-space: nowrap;
}

.compareTable tbody td {
  color: var(--gray700);
  line-height: 1.5;
}

.compareTable tbody tr:last-child th,
.compareTable tbody tr:last-child td {
  border-bottom: none;
}

/* Sub score bars — binary state (published / not stated), not an invented
   percentage. See generate-compare-pages.mjs. */
.subScoreGrid {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.subScoreHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.subScoreLabel {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray800);
}

.subScoreState {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray400);
}

.subScoreState.met {
  color: var(--emerald700);
}

.subScoreTrack {
  margin-top: 6px;
  height: 8px;
  border-radius: var(--radiusFull);
  background: var(--gray100);
  overflow: hidden;
}

.subScoreFill {
  height: 100%;
  border-radius: var(--radiusFull);
  background: var(--gray300);
}

.subScoreFill.met {
  background: var(--emerald500);
}

/* Pros and cons */
.prosConsGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .prosConsGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.prosCol,
.consCol {
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  padding: 16px;
}

.prosCol {
  background: var(--emerald50);
  border-color: var(--emerald100);
}

.consCol {
  background: var(--red50);
  border-color: var(--red100);
}

.prosCol h3,
.consCol h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prosCol h3 {
  color: var(--emerald700);
}

.consCol h3 {
  color: var(--red600);
}

.prosList,
.consList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.prosList li,
.consList li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray700);
}

.tickIcon {
  flex-shrink: 0;
  color: var(--emerald600);
  font-weight: 800;
}

.crossIcon {
  flex-shrink: 0;
  color: var(--red600);
  font-weight: 800;
}

.emptyNote {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--gray500);
  font-style: italic;
}

.factCheckBox {
  background: var(--gray50);
  border-radius: var(--radiusMd);
  padding: 16px;
  border-top: none;
}

.factCheckBox p {
  margin: 0;
  font-size: 13px;
  color: var(--gray600);
}

.relatedGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .relatedGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.relatedCard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  padding: 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.relatedCard:hover {
  border-color: var(--emerald300);
  transform: translateY(-2px);
}

.relatedRank {
  font-family: var(--fontMono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gray400);
}

.relatedName {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray900);
  text-transform: lowercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relatedScore {
  font-family: var(--fontMono);
  font-size: 12px;
  color: var(--emerald700);
  font-weight: 600;
}

/* ---------- Head to head comparison tool (index.html) ---------- */

.compareForm {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.compareField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  flex: 1;
}

.compareLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray500);
}

.compareSelect {
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray900);
}

.compareVs {
  flex-shrink: 0;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray400);
}

.compareBtn {
  flex-shrink: 0;
  min-height: 46px;
}

.compareResults {
  margin-top: 8px;
}

.compareResults .docSection:first-child {
  margin-top: 30px;
  padding-top: 26px;
}

.compareEmpty {
  margin-top: 26px;
}

.compareHero {
  border-radius: var(--radiusLg);
  border: 1px solid var(--gray200);
  border-top: 1px solid var(--gray200);
  background: var(--gray50);
  padding: 20px !important;
}

.compareHeroGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

@media (min-width: 700px) {
  .compareHeroGrid {
    grid-template-columns: 1fr auto 1fr;
  }
}

.compareHeroSide {
  text-align: center;
}

.compareHeroSide h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray900);
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.compareHeroSide p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gray600);
}

.compareVsBig {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray400);
}

.compareProsCons {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .compareProsCons {
    grid-template-columns: 1fr 1fr;
  }
}

.compareCard {
  border-radius: var(--radiusMd);
  border: 1px solid var(--gray200);
  padding: 16px;
}

.compareCard h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray900);
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.compareCard h4 {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray500);
}

.compareCard h4:first-of-type {
  margin-top: 0;
}

/* ---------- Editorial audit callouts ----------
   Attribution boxes crediting the editorial team's per-provider audits
   (Lyra Montgomery's review/sentiment forensics, Valerie Chen's billing
   audits). Dropped inline into review page prose near the section they
   back up — ratings for Lyra, pricing for Valerie — plus one combined
   version on the homepage. Distinct emerald-tinted box so it reads as a
   verification stamp rather than more review body copy. */

.editorialAuditNote {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--emerald200);
  border-left: 4px solid var(--emerald600);
  border-radius: var(--radiusMd);
  background: var(--emerald50);
}

.editorialAuditNote .auditNoteEyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald700);
  margin-bottom: 6px;
}

.editorialAuditNote .auditNoteByline {
  margin: 0 0 8px;
  font-family: var(--fontSerif);
  font-size: 16px;
  font-weight: 600;
  color: var(--gray900);
}

.editorialAuditNote .auditNoteByline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--emerald300);
  text-underline-offset: 3px;
}

.editorialAuditNote .auditNoteByline span {
  font-weight: 500;
  color: var(--gray600);
  font-size: 13px;
}

.editorialAuditNote .auditNoteBody {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray800);
}

.editorialAuditNote .auditNoteLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorialAuditNote .auditNoteLinks a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emerald700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editorialAuditNote .auditNoteLinks a:hover {
  color: var(--emerald800);
}

/* ---------- Homepage team teaser ----------
   Photo + one-line brief per auditor, replacing the text-only audit note
   that used to sit here — a visual "who's behind this" strip linking out
   to the full editorial-team profiles instead of restating their bios. */

.teamTeaserSection {
  padding: 28px 18px 0;
}

.teamTeaser {
  border: 1px solid var(--gray200);
  border-radius: var(--radiusLg);
  background: var(--white);
  padding: 24px;
  box-shadow: var(--shadowSm);
}

.teamTeaserIntro p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--gray600);
  max-width: 56ch;
}

.teamTeaserGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .teamTeaserGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.teamTeaserCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--gray200);
  border-radius: var(--radiusMd);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.teamTeaserCard:hover {
  border-color: var(--emerald400);
  transform: translateY(-1px);
}

.teamTeaserPhoto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gray200);
  margin-bottom: 8px;
}

.teamTeaserName {
  font-family: var(--fontSerif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gray900);
}

.teamTeaserRole {
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald700);
}

.teamTeaserBrief {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gray600);
  line-height: 1.5;
}

.teamTeaserLink {
  display: inline-block;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--emerald700);
}

/* ---------- Utility ---------- */

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}