/* Shared styles for the /compare/ pages. Page-specific rules stay inline. */
:root {
  --navy: #071e38;
  --navy-2: #0b3d6f;
  --blue: #1a6db5;
  --blue-ink: #12558f;
  --cream: #f3efe6;
  --paper: #fffdf8;
  --ink: #16233a;
  --muted: #566577;
  --line: #e2e0d6;
  --line-cool: #dbe2ea;
  --white: #ffffff;
  --tint: rgba(26, 109, 181, 0.07);
  --radius: 14px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

/* iPhone paints the status-bar strip with the html background; match the nav. */
html { scroll-behavior: smooth; background: #050d1c; }

/* Safari tints the iPhone status-bar strip with the body layer, so body stays
   dark and the page colour moves onto main inside it. */
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050d1c;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }

p { margin: 0; }

main { background: var(--cream); }

.wrap { width: min(var(--wrap), 100%); margin: 0 auto; }

/* ---------- site nav (mirrors main site) ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  background: linear-gradient(to bottom, rgba(5,13,28,0.94), rgba(5,13,28,0.86));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--white);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.nav-left { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-left img { height: 48px; width: auto; display: block; }
.nav-pill-wrap {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding: 4px;
}
.nav-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  color: rgba(232,238,249,0.78);
  text-decoration: none;
  background: transparent;
  border: none; cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-pill:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-pill.active { background: #fff; color: #0a1830; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.cart-btn {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(232,238,249,0.7);
  padding: 10px 18px;
  cursor: pointer; font-size: 15px; font-family: inherit;
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.cart-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.cart-count {
  background: #fff; color: #0a1830;
  font-size: 11px; font-weight: 700; width: 18px; height: 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.auth-btn {
  background: #fff; color: #0a1830;
  border: none; border-radius: 999px;
  padding: 11px 22px; font-weight: 600; font-size: 15px;
  text-decoration: none;
  display: inline-flex; align-items: center;
  cursor: pointer; font-family: inherit; transition: opacity 0.2s;
}
.auth-btn:hover { opacity: 0.9; }

/* signed-in user menu (mirrors main site) */
.user-menu-wrap { position: relative; }
.user-menu {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(232,238,249,0.82); font-size: 1.1rem; cursor: pointer;
  padding: 0.3rem 0.5rem; border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s; user-select: none;
}
.user-menu:hover { background: rgba(255,255,255,0.07); color: #fff; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem; flex: none;
}

/* Nav dark mode: transparent nav over the dark hero (mirrors main site home page) */
.nav-dark { background: transparent !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav-dark .cart-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #FFFFFF; }
.nav-dark .cart-btn:hover { border-color: rgba(255,255,255,0.3); }
.nav-dark .cart-count { background: #FFFFFF; color: #0B3D6F; }
.nav-dark .auth-btn { background: #FFFFFF; color: #0B3D6F; }
.nav-dark .user-menu { color: rgba(255,255,255,0.7); }
.nav-dark .user-avatar { background: rgba(255,255,255,0.15); color: #FFFFFF; }
.nav-dark .mobile-menu-btn span { background: rgba(255,255,255,0.7); }

/* mobile hamburger */
.mobile-menu-btn {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; margin-right: 0.25rem;
  flex-direction: column; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn span {
  display: block; width: 20px; height: 2px;
  background: rgba(255,255,255,0.7); border-radius: 1px;
  transition: all 0.3s ease;
}
.mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* mobile drawer */
.mobile-nav {
  display: none; position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: #050d1c; z-index: 99;
  padding: 1rem; flex-direction: column; gap: 0.25rem;
  animation: mobileNavIn 0.25s ease;
  overflow-y: auto;
}
.mobile-nav.visible { display: flex; }
@keyframes mobileNavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-nav a {
  display: block; padding: 1rem; color: rgba(255,255,255,0.8);
  text-decoration: none; font-size: 1rem; font-weight: 500;
  border-radius: var(--radius); transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav a:hover, .mobile-nav a:active { background: rgba(255,255,255,0.1); }
.mobile-nav .mobile-nav-divider {
  height: 1px; background: rgba(255,255,255,0.1); margin: 0.5rem 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.btn.primary { background: var(--blue); color: var(--white); box-shadow: 0 8px 20px -10px rgba(26, 109, 181, 0.8); }
.btn.primary:hover { background: var(--blue-ink); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(26, 109, 181, 0.9); }
.btn.primary:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--navy); border-color: rgba(7, 30, 56, 0.28); }
.btn.ghost:hover { border-color: var(--navy); transform: translateY(-1px); }
.btn.light { background: var(--white); color: var(--navy); }
.btn.light:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4); }
.btn.outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.btn.outline-light:hover { border-color: var(--white); transform: translateY(-1px); }

.eyebrow {
  display: inline-block;
  color: var(--blue-ink);
  font: 700 19px/1.2 'Alegreya SC', Georgia, serif;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin-bottom: 20px;
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(26, 109, 181, 0.16), transparent 55%),
    linear-gradient(180deg, var(--navy), var(--navy-2));
  color: var(--white);
  padding: calc(clamp(48px, 7vw, 92px) + 94px) clamp(22px, 5vw, 56px) clamp(180px, 19vw, 240px);
}
.hero .eyebrow { color: #8fc4ff; }
/* The headline runs the full width of the wrap so the hero does not leave
   the right half empty on wide screens. The lead stays capped for reading. */
.hero h1 {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  font-weight: 800;
  text-wrap: balance;
}
.hero h1 .nowrap { white-space: nowrap; }
.hero .lead {
  margin-top: 22px;
  font-size: clamp(17px, 1.7vw, 21px);
  color: rgba(255, 255, 255, 0.76);
  max-width: 62ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* featured overlap: comparison cards rise into the hero */
.section.overlap { padding-top: 0; background: transparent; border: none; }
.section.overlap .matrix-split { margin-top: clamp(-180px, -14vw, -120px); }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 8vw, 92px) clamp(22px, 5vw, 56px); }
.section.paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.06; font-weight: 800; max-width: 18ch; }
.section .sub { margin-top: 16px; color: var(--muted); font-size: 18px; max-width: 60ch; }

/* feature rows */
.rows { margin-top: 40px; border-top: 1px solid var(--line-cool); }
.row {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: clamp(16px, 4vw, 56px);
  padding: 26px 0;
  border-bottom: 1px solid var(--line-cool);
  align-items: baseline;
}
.row h3 { font-size: 21px; font-weight: 700; }
.row p { color: var(--muted); font-size: 16px; }

/* comparison matrix */
.matrix { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 40px; }
.matrix thead th { padding: 0 14px 22px; border-bottom: 1px solid var(--line-cool); vertical-align: bottom; text-align: center; }
.matrix thead th.crit { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; vertical-align: bottom; }
.matrix thead th.lab { width: 27%; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand .bname { font-weight: 800; font-size: clamp(15px, 1.7vw, 19px); color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
.matrix thead .eca-col .bname { color: var(--blue-ink); }
.brand .tag { font: 700 16px/1 'Alegreya SC', Georgia, serif; letter-spacing: 0.05em; text-transform: lowercase; padding: 5px 9px; border-radius: 999px; background: rgba(26, 109, 181, 0.14); color: var(--blue-ink); }
.matrix tbody th { text-align: left; font-weight: 600; font-size: 16px; color: var(--ink); padding: 20px 14px; border-bottom: 1px solid var(--line-cool); overflow-wrap: anywhere; }
.matrix td { text-align: center; padding: 20px 14px; border-bottom: 1px solid var(--line-cool); }
.matrix .eca-col { background: var(--tint); }
.matrix thead th.eca-col { border-bottom-color: rgba(26, 109, 181, 0.4); }
.matrix thead .eca-col { border-radius: 16px 16px 0 0; }
.matrix tbody tr:last-child .eca-col { border-radius: 0 0 16px 16px; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: none; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.cell .q { font-size: 11.5px; color: var(--muted); line-height: 1.3; position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 130%; text-align: center; }
.matrix tr.group th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; padding: 26px 14px 8px; }
.matrix tr.group th, .matrix tr.group td { border-bottom: none; }
.matrix tr.feat-start th, .matrix tr.feat-start td { border-top: 1px solid var(--line-cool); }
.price { display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
.price .amt { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 19px; color: var(--ink); }
.matrix .eca-col .price .amt { color: var(--blue-ink); }
.price .amt.tbd { color: var(--muted); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.price .save { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #1c8557; background: rgba(38, 162, 105, 0.13); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.matrix-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 42px; align-items: stretch; }
.mtx-card { background: var(--white); border: 1px solid var(--line-cool); border-radius: 20px; padding: 22px 24px 14px; box-shadow: 0 34px 70px -44px rgba(7, 30, 56, 0.45); display: flex; flex-direction: column; }
.mtx-card .matrix { flex: 1 1 auto; }
.mtx-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line-cool); }
.mtx-head .bar { width: 4px; height: 20px; border-radius: 999px; background: var(--blue); flex: none; }
.mtx-title { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.matrix.compact { margin-top: 4px; }
.matrix.compact thead th { padding: 16px 10px 14px; }
.matrix.compact thead th.lab { width: 30%; }
.matrix.compact .brand .bname { font-size: 13.5px; }
.brand .blogo { display: block; margin: 0 auto 7px; height: 26px; width: auto; max-width: 100%; }
.matrix.compact tbody th { font-size: 14.5px; padding: 16px 10px; vertical-align: middle; }
.matrix.compact td { padding: 16px 10px; vertical-align: middle; }
/* reserve space below the centered price/icon for the hanging note so it doesn't overlap the next row */
.matrix.compact tr.has-note th, .matrix.compact tr.has-note td { padding-top: 30px; padding-bottom: 30px; }
/* featured ECA column panel inside each card */
.matrix.compact .eca-col { background: rgba(26, 109, 181, 0.07); }
.matrix.compact td.eca-col, .matrix.compact thead th.eca-col { border-left: 1px solid rgba(26, 109, 181, 0.22); border-right: 1px solid rgba(26, 109, 181, 0.22); }
.matrix.compact thead th.eca-col { border-top: 2px solid var(--blue); border-bottom-color: rgba(26, 109, 181, 0.28); }
.matrix.compact tbody tr:last-child td.eca-col { border-bottom: 1px solid rgba(26, 109, 181, 0.22); }
.ic { width: 27px; height: 27px; display: block; }
.ic.yes { color: #26a269; }
.ic.no { color: #d9494f; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.notice {
  margin-top: 26px;
  background: var(--tint);
  padding: 16px 18px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
}

/* price tables */
.price-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ptable { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 30px; font-size: 15.5px; }
.ptable thead th:first-child { width: 52%; }
.ptable thead th.num { width: 24%; }
.ptable caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 13px; padding-top: 14px; max-width: 70ch; }
.ptable thead th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; padding: 0 16px 12px; border-bottom: 1px solid var(--line-cool);
}
.ptable thead th.num, .ptable td.num { text-align: right; }
.ptable tbody th { text-align: left; font-weight: 600; color: var(--ink); padding: 16px; border-bottom: 1px solid var(--line-cool); overflow-wrap: anywhere; }
.ptable td { padding: 16px; border-bottom: 1px solid var(--line-cool); }
.ptable td.eca { text-align: right; font-weight: 800; color: var(--blue-ink); font-family: "JetBrains Mono", monospace; }
.ptable td.jan { text-align: right; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: none; }
.subhead { margin: 46px 0 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }

/* accent tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.tile { border-top: 2px solid var(--blue); padding: 20px 4px 4px; }
.tile h3 { font-size: 18px; font-weight: 700; }
.tile p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color: var(--white);
  padding: clamp(48px, 7vw, 80px) clamp(22px, 5vw, 56px);
}
.cta-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.cta-band .sub { color: rgba(255, 255, 255, 0.74); margin-top: 12px; font-size: 17px; max-width: 44ch; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; }
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.related a {
  border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85);
  border-radius: 999px; padding: 9px 14px; text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.related a:hover { border-color: #8fc4ff; color: #fff; }

footer { background: var(--navy); color: rgba(255, 255, 255, 0.62); padding: 30px clamp(22px, 5vw, 56px); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
footer a { color: rgba(255, 255, 255, 0.85); }

/* motion: progressive, opt-in, reduced-motion safe */
/* Six pills (with Learn) plus the cart and Sign In overflow small laptops and
   tablets in landscape, so tighten them until the phone menu takes over at 768px. */
@media (min-width: 769px) and (max-width: 1120px) {
  nav { padding-left: 20px; padding-right: 20px; gap: 12px; }
  .nav-pill-wrap { gap: 0; }
  .nav-pill { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  .nav-right { gap: 8px; }
  .cart-btn { padding: 9px 12px; }
  .auth-btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 900px) {
  nav .nav-left img { height: 36px !important; }
  .nav-pill { padding: 9px 8px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { opacity: 0; animation: reveal-up both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}

/* responsive */
@media (max-width: 900px) {
  .panels, .cta-inner, .matrix-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 12px 16px; gap: 0.5rem; }
  .nav-pill-wrap { display: none; }
  .nav-left { gap: 6px; }
  .nav-left img { height: 40px; }
  .mobile-menu-btn { display: flex; flex-shrink: 0; padding: 0.4rem; margin-right: 0; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav-right { gap: 0.6rem; flex-shrink: 0; }
  .cart-btn { padding: 0.45rem 0.6rem; font-size: 1rem; min-height: 44px; }
  .auth-btn { padding: 0.45rem 0.75rem; font-size: 1rem; min-height: 44px; }
  .user-menu span { display: none; }
  .user-avatar { width: 30px; height: 30px; font-size: 1rem; }
  .mobile-nav { top: 68px; }
  /* fixed nav is 68px tall on mobile; keep the hero copy clear of it */
  .hero { padding-top: calc(clamp(48px, 7vw, 92px) + 68px); }
}
@media (max-width: 680px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
  .tiles { grid-template-columns: 1fr; }
  .ptable tbody th { width: 46%; }
}

/* While ordering is paused the cart pill reads "Ordering Soon", which is far
   wider than the cart icon. Tighten the bar so the logo, menu, cart and Sign In
   still fit across a 375px screen (iPhone SE / 13 mini). */
@media (max-width: 400px) {
  nav { padding: 10px 12px; }
  .nav-left img { height: 32px; }
  .nav-right { gap: 0.35rem; }
  .cart-btn { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .auth-btn { padding: 0.4rem 0.55rem; font-size: 0.85rem; }
  .mobile-nav { top: 64px; }
}

/* ---------- sources, lab price card, FAQ (pricing pages) ---------- */
.sources { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.sources h3 { font-size: 14px; }
.sources ul { margin: 12px 0; padding-left: 18px; }
.sources li { margin: 6px 0; }
.sources a { color: var(--blue-ink); }
.section.overlap .lab-prices { margin-top: clamp(-180px, -14vw, -120px); }
.lab-prices { padding: clamp(22px, 3vw, 34px); }
.lab-prices h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; font-weight: 800; }
.lab-prices .checked { margin-top: 8px; color: var(--muted); font-size: 14px; }
.lab-prices ul { margin-top: 18px; padding: 0; list-style: none; border-top: 1px solid var(--line-cool); }
.lab-prices li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-cool); font-size: 16px; }
.lab-prices li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-prices .src { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.lab-prices .src a { color: var(--blue-ink); }
.section.after-overlap { padding-top: clamp(28px, 4vw, 44px); }
.faq { margin-top: 32px; border-top: 1px solid var(--line-cool); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line-cool); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { color: var(--blue); font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .ans { padding: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 760px; }