@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');.fataim-picks{--accent:#f24141;--ink:#111;--muted:#6b7280}.fataim-picks *{box-sizing:border-box}.fataim-picks .title{font-family:Aclonica,system-ui,sans-serif;color:var(--ink);font-weight:400;margin:.25rem 0 .75rem;line-height:1.15}.fataim-picks .title .accent{color:var(--accent)}.fp-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:980px){.fp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.fp-grid{grid-template-columns:1fr}}.fp-card{border:1px solid #eee;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.fp-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.08);border-color:rgba(242,65,65,.35)}.fp-media{position:relative;aspect-ratio:16/10;background:#fff6f6}.fp-media img{width:100%;height:100%;object-fit:cover;display:block}.fp-badge{position:absolute;top:10px;left:10px;background:#fff;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.fp-body{padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}.fp-name{font-weight:700;color:var(--ink);font-size:16px;line-height:1.25}.fp-sub{color:var(--muted);font-size:13.5px}.fp-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}.fp-chip{border:1px dashed rgba(242,65,65,.45);color:var(--accent);padding:2px 8px;border-radius:999px;font-size:12px;background:#fff}.fp-cta{margin-top:6px;display:flex;gap:10px;align-items:center;justify-content:space-between}.fp-btn{appearance:none;border:none;cursor:pointer;text-decoration:none;background:var(--accent);color:#fff;font-weight:700;padding:10px 14px;border-radius:12px;box-shadow:0 6px 16px rgba(242,65,65,.25);transition:filter .2s ease}.fp-btn:hover{filter:brightness(.96)}.fp-learn{font-size:13.5px;color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(242,65,65,.4)}.fp-stars{font-size:13.5px;color:#f5b301;letter-spacing:.5px}.fp-foot{padding:8px 14px 14px;color:var(--muted);font-size:12.5px}
/* tables */
.fataim-wrap{--accent:#f24141;--ink:#111;--muted:#6b7280}.fataim-heading{font-family:Aclonica,system-ui,sans-serif;font-weight:400;color:var(--ink);margin:1.2rem 0 .6rem;line-height:1.2}.fataim-heading .accent{color:var(--accent)}.fataim-table-wrap{border:1px solid #eee;border-radius:14px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.04);background:#fff;margin:.8rem 0 1.6rem}.fataim-table{width:100%;border-collapse:collapse;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15.5px;color:var(--ink)}.fataim-table thead th{text-align:left;font-weight:700;padding:12px 10px;border-bottom:2px solid var(--accent)}.fataim-table tbody td{padding:12px 10px;border-bottom:1px solid #f1f3f5;vertical-align:top}.fataim-table tbody tr:hover{background:#fff6f6}.fataim-note{color:var(--muted);font-size:13px;margin-top:.4rem}.fataim-link{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(242,65,65,.35)}.fataim-link:hover{border-bottom-color:var(--accent)}@media(max-width:760px){.fataim-table-wrap{overflow-x:auto}.fataim-table{min-width:760px}}
/* Dark mode — scoped to FATAIM sections only */
@media (prefers-color-scheme: dark){
  /* Editor’s Picks section keeps WHITE page background */
  .fataim-picks{ --ink:#f5f5f5; --muted:#a3a3a3; background:#fff }
  .fataim-picks .fp-card{ background:#121212; border-color:#222; box-shadow:0 10px 24px rgba(0,0,0,.4) }
  .fataim-picks .fp-card:hover{ box-shadow:0 14px 28px rgba(0,0,0,.5); border-color:rgba(242,65,65,.5) }
  .fataim-picks .fp-media{ background:#1a0e0e }
  .fataim-picks .fp-chip{ background:#0f0f0f; border-color:rgba(242,65,65,.6) }
  .fataim-picks .fp-learn{ border-bottom-color:rgba(242,65,65,.55) }

  /* Comparison/Prices tables section also keeps WHITE page background */
  .fataim-wrap{ --ink:#f5f5f5; --muted:#a3a3a3; background:#fff }
  .fataim-wrap .fataim-table-wrap{ background:#121212; border-color:#222; box-shadow:0 8px 20px rgba(0,0,0,.45) }
  .fataim-wrap .fataim-table tbody tr:hover{ background:#1a0e0e }
  .fataim-wrap .fataim-link{ border-bottom-color:rgba(242,65,65,.55) }
}

/* Force readable prices table colors */
@media (prefers-color-scheme: dark){
  .fataim-table-wrap{background:#1a1a1a !important;border-color:#333 !important}
  .fataim-table thead th{color:#f5f5f5 !important;border-bottom-color:#f24141 !important}
  .fataim-table tbody td{color:#e9e9e9 !important;border-bottom-color:#2a2a2a !important}
  .fataim-table tbody tr:hover{background:#221415 !important}
}

/* On small screens, go light for max contrast */
@media (max-width:640px){
  .fataim-table-wrap{background:#fff !important;border-color:#eee !important}
  .fataim-table thead th,.fataim-table tbody td{color:#111 !important}
}
/* --- Compact TOC (FATAIM) --- */
.fataim-toc{--accent:#f24141;--ink:#111;--muted:#6b7280;margin:.5rem 0 1rem;padding:.5rem .75rem;border:1px solid #eee;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.04);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.fataim-toc .toc-title{font-family:Aclonica,system-ui,sans-serif;color:var(--ink);font-weight:400;margin:.1rem 0 .5rem}
.fataim-toc .toc-row{display:flex;gap:10px;flex-wrap:wrap}
.fataim-toc a{display:inline-block;padding:6px 10px;border-radius:999px;border:1px dashed rgba(242,65,65,.45);color:var(--accent);text-decoration:none;font-size:13.5px;background:#fff}
.fataim-toc a:hover{border-color:var(--accent)}
@media(prefers-color-scheme:dark){
  .fataim-toc{--ink:#f5f5f5;--muted:#a3a3a3;background:#121212;border-color:#222;box-shadow:0 6px 16px rgba(0,0,0,.45)}
  .fataim-toc a{background:#0f0f0f;border-color:rgba(242,65,65,.6)}
}
/* Image safety on older mobiles (no aspect-ratio support) */
@supports not (aspect-ratio: 1 / 1){
  .fp-media{position:relative}
  .fp-media::before{content:"";display:block;padding-top:62.5%} /* 16:10 */
  .fp-media > picture, .fp-media > img{position:absolute;inset:0}
  .fp-media img{display:block;width:100%;height:100%;object-fit:cover}
}
/* Keep everything AFTER the picks white in dark mode */
@media (prefers-color-scheme: dark){
  .fataim-picks ~ * { background:#fff !important; }
}
/* From the Editor's Picks down, keep normal flow and full width */
.fataim-picks,
.fataim-picks ~ *,
.fataim-wrap,
.fataim-wrap ~ *{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  clear:both;
  transform:none !important;
  zoom:1 !important;
}
/* Make sure the grid itself can't collapse or shrink */
.fataim-picks .fp-grid{width:100%; max-width:100%}
/* Heading paint + stacking safety */
.fataim-picks .title{
  color:#111 !important; 
  position:relative; 
  z-index:2; 
  mix-blend-mode:normal; 
  margin-top:0.5rem; 
  margin-bottom:0.75rem;
}
/* Media area should sit behind the heading if overlapping */
.fataim-picks .fp-grid{position:relative; z-index:1}

@media (prefers-color-scheme: dark){
  .fataim-picks{background:#fff !important}
  .fataim-wrap{background:#fff !important}
}
/* FATAIM Compact TOC — contain and reset layout */
.fataim-toc{
  display:block;
  width:100% !important;
  max-width:100% !important;
  margin:12px 0;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  position:relative;
  float:none !important;
  transform:none !important;
  zoom:1 !important;
}
.fataim-toc *{ box-sizing:border-box; max-width:100% }

/* make links wrap nicely without forcing columns */
.fataim-toc .toc-row{ display:flex; flex-wrap:wrap; gap:8px 12px }
.fataim-toc .toc-row a{
  flex:0 1 auto;
  white-space:nowrap;
  text-decoration:none;
  border-bottom:1px dashed rgba(242,65,65,.35);
  color:#f24141;
  padding:2px 0;
}
.fataim-toc .toc-row a:hover{ border-bottom-color:#f24141 }
.fataim-toc .toc-title{
  margin:0 0 6px;
  font:400 18px/1.2 Aclonica,system-ui,sans-serif;
  color:#111;
}

/* clear any accidental floats above/below */
.fataim-toc::after{ content:""; display:block; clear:both }
/* Keep Editor’s Picks at full width and on top of any stray overlays */
.fataim-picks{ width:100% !important; max-width:100% !important; background:#fff }
.fataim-picks .title{ color:#111 !important; position:relative; z-index:2; mix-blend-mode:normal }
.fataim-picks .fp-grid{ position:relative; z-index:1; width:100%; max-width:100% }

/* If *any* earlier block tried to “half” the layout, neutralize it from the TOC onward */
.fataim-toc ~ *{ width:100% !important; max-width:100% !important; float:none !important; transform:none !important; zoom:1 !important }
@media (prefers-color-scheme: dark){
  .fataim-toc{ background:#fff }
  .fataim-picks{ background:#fff !important }
}
/* =========================================================
   FATAIM Pack — TOC, Editor's Picks, Tables (fresh + scoped)
   Paste at the END of your CSS.
   ========================================================= */

/* ---------- Base variables (scoped) ---------- */
.fataim-toc, .fataim-picks, .fataim-wrap{
  --accent:#f24141; --ink:#111; --muted:#6b7280;
  display:block; width:100% !important; max-width:100% !important;
  float:none !important; transform:none !important; zoom:1 !important;
  background:#fff; /* keep white page bg under these sections */
}

/* In case any earlier block halved the layout, neutralize from TOC onward */
.fataim-toc ~ *, .fataim-picks ~ *, .fataim-wrap ~ *{
  width:100% !important; max-width:100% !important; float:none !important; transform:none !important;
}

/* ---------- Compact TOC ---------- */
.fataim-toc{ margin:12px 0; padding:10px 12px; border:1px solid #eee; border-radius:12px; position:relative }
.fataim-toc *{ box-sizing:border-box; max-width:100% }
.fataim-toc .toc-title{ margin:0 0 6px; font:400 18px/1.2 Aclonica,system-ui,sans-serif; color:var(--ink) }
.fataim-toc .toc-row{ display:flex; flex-wrap:wrap; gap:8px 12px }
.fataim-toc .toc-row a{
  flex:0 1 auto; white-space:nowrap; text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  color:var(--accent); padding:2px 0;
}
.fataim-toc::after{ content:""; display:block; clear:both }

/* ---------- Editor's Picks (cards) ---------- */
.fataim-picks *{ box-sizing:border-box }
.fataim-picks .title{ font-family:Aclonica,system-ui,sans-serif; color:var(--ink); font-weight:400; margin:.25rem 0 .75rem; line-height:1.15 }
.fataim-picks .title .accent{ color:var(--accent) }

/* Grid */
.fataim-picks .fp-grid{ display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr)); position:relative; z-index:1 }
@media (max-width:980px){ .fataim-picks .fp-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .fataim-picks .fp-grid{ grid-template-columns:1fr } }

/* Card */
.fataim-picks .fp-card{
  border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fataim-picks .fp-card:hover{
  transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Media area (keeps height even if aspect-ratio unsupported) */
.fataim-picks .fp-media{ position:relative; aspect-ratio:16/10; background:#fff6f6 }
.fataim-picks .fp-media img{ width:100%; height:100%; object-fit:cover; display:block }
.fataim-picks .fp-badge{
  position:absolute; top:10px; left:10px; background:#fff; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; z-index:2
}

/* Content */
.fataim-picks .fp-body{ padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px; color:var(--ink) }
.fataim-picks .fp-name{ font-weight:700; color:var(--ink); font-size:16px; line-height:1.25 }
.fataim-picks .fp-sub{ color:var(--muted); font-size:13.5px }
.fataim-picks .fp-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px }
.fataim-picks .fp-chip{
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent); padding:2px 8px; border-radius:999px; font-size:12px; background:#fff
}
.fataim-picks .fp-cta{ margin-top:6px; display:flex; gap:10px; align-items:center; justify-content:space-between }
.fataim-picks .fp-btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  background:var(--accent); color:#fff; font-weight:700; padding:10px 14px; border-radius:12px;
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 25%, transparent); transition:filter .2s ease
}
.fataim-picks .fp-btn:hover{ filter:brightness(.96) }
.fataim-picks .fp-learn{ font-size:13.5px; color:var(--accent); text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 40%, transparent) }
.fataim-picks .fp-stars{ font-size:13.5px; color:#f5b301; letter-spacing:.5px }
.fataim-picks .fp-foot{ padding:8px 14px 14px; color:var(--muted); font-size:12.5px }

/* ---------- Comparison / Prices tables ---------- */
.fataim-wrap .fataim-heading{
  font-family:Aclonica,system-ui,sans-serif; font-weight:400; color:var(--ink); margin:1.2rem 0 .6rem; line-height:1.2
}
.fataim-wrap .fataim-heading .accent{ color:var(--accent) }

.fataim-wrap .fataim-table-wrap{
  border:1px solid #eee; border-radius:14px; padding:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.04); background:#fff; margin:.8rem 0 1.6rem
}
.fataim-wrap .fataim-table{
  width:100%; border-collapse:collapse;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:15.5px; color:var(--ink)
}
.fataim-wrap .fataim-table thead th{ text-align:left; font-weight:700; padding:12px 10px; border-bottom:2px solid var(--accent) }
.fataim-wrap .fataim-table tbody td{ padding:12px 10px; border-bottom:1px solid #f1f3f5; vertical-align:top }
.fataim-wrap .fataim-table tbody tr:hover{ background:#fff6f6 }
.fataim-wrap .fataim-note{ color:var(--muted); font-size:13px; margin-top:.4rem }
.fataim-wrap .fataim-link{ color:var(--accent); text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--accent) 35%, transparent) }
.fataim-wrap .fataim-link:hover{ border-bottom-color:var(--accent) }
@media (max-width:760px){ .fataim-wrap .fataim-table-wrap{ overflow-x:auto } .fataim-wrap .fataim-table{ min-width:760px } }

/* ---------- Dark mode (SCOPED; page bg remains white) ---------- */
@media (prefers-color-scheme: dark){
  /* TOC stays white for readability */
  .fataim-toc{ background:#fff; border-color:#e8e8e8 }
  .fataim-toc .toc-title{ color:#111 }
  .fataim-toc .toc-row a{ color:var(--accent) }

  /* Editor's Picks: white section, dark cards */
  .fataim-picks{ background:#fff !important; --ink:#111; --muted:#6b7280 }
  .fataim-picks .fp-card{ background:#121212; border-color:#222; box-shadow:0 10px 24px rgba(0,0,0,.4) }
  .fataim-picks .fp-card:hover{ box-shadow:0 14px 28px rgba(0,0,0,.5); border-color:color-mix(in srgb, var(--accent) 50%, transparent) }
  .fataim-picks .fp-media{ background:#1a0e0e }
  .fataim-picks .fp-chip{ background:#0f0f0f; border-color:color-mix(in srgb, var(--accent) 60%, transparent) }
  .fataim-picks .fp-learn{ border-bottom-color:color-mix(in srgb, var(--accent) 55%, transparent) }

  /* Tables: white section, dark table interior if desired */
  .fataim-wrap{ background:#fff !important; --ink:#111; --muted:#6b7280 }
  .fataim-wrap .fataim-table-wrap{ background:#121212; border-color:#222; box-shadow:0 8px 20px rgba(0,0,0,.45) }
  .fataim-wrap .fataim-table{ color:#f5f5f5 }
  .fataim-wrap .fataim-table thead th{ border-bottom-color:var(--accent); color:#fff }
  .fataim-wrap .fataim-table tbody td{ border-bottom-color:#2a2a2a }
  .fataim-wrap .fataim-table tbody tr:hover{ background:#1a0e0e }
  .fataim-wrap .fataim-link{ border-bottom-color:color-mix(in srgb, var(--accent) 55%, transparent) }
}
/* ---------- Mobile fallback if browser lacks aspect-ratio ---------- */
@supports not (aspect-ratio: 1 / 1){
  .fataim-picks .fp-media{ position:relative }
  .fataim-picks .fp-media::before{ content:""; display:block; padding-top:62.5% } /* 16:10 */
  .fataim-picks .fp-media > picture, .fataim-picks .fp-media > img{ position:absolute; inset:0 }
  .fataim-picks .fp-media img{ width:100%; height:100%; object-fit:cover; display:block }
}
/* ---------- Safety: keep the heading visible above any overlays ---------- */
.fataim-picks .title{ position:relative; z-index:2; color:#111 !important; mix-blend-mode:normal }
/* Keep any nav blocks full-width and white */
.fataim-toc{display:block;width:100% !important;max-width:100% !important;background:#fff;}