/* ===================================================================
   AI Tools Insider — editorial review magazine design system
   Display: Fraunces · Body: Hanken Grotesk · Accent: vermilion on paper
   Compatible with both plain text cards and thumbnail (.card-cover) cards.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:#FBF8F2; --paper-2:#F3EEE2; --card:#FFFFFF;
  --ink:#181510; --body:#46413A; --muted:#6E685A; --line:#E8E1D2;
  --accent:#F0451F; --accent-d:#CE3411; --blue:#1C3A63; --green:#0E8C5A; --red:#C13A24;
  --radius:18px; --maxw:1200px;
  --shadow:0 1px 2px rgba(24,21,16,.04), 0 8px 24px rgba(24,21,16,.06);
  --shadow-lg:0 4px 12px rgba(24,21,16,.05), 0 24px 64px rgba(46,26,12,.13);
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:var(--body); background:var(--paper);
  font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; position:relative;
}
/* Branded selection + a crisp, accessible focus ring (premium polish, sitewide) */
::selection { background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
h1,h2,h3,h4 { font-family:'Fraunces',Georgia,serif; color:var(--ink); line-height:1.1; letter-spacing:-.015em; font-weight:600; }
a { color:var(--ink); text-decoration:none; transition:color .15s,opacity .15s; }
img { max-width:100%; display:block; }

.container { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow { font-family:'Hanken Grotesk',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-d); }

/* ===== Header / masthead ===== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line);
}
.site-header > .container, .site-header { padding-top:20px; padding-bottom:20px; }
.site-header > .container { display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; }
/* atlas-robot-logo */
.logo::before { content:""; width:26px; height:26px; flex-shrink:0; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PGNpcmNsZSBjeD0nMTInIGN5PScyLjYnIHI9JzEuNicgZmlsbD0nI0YwNDUxRicvPjxyZWN0IHg9JzExLjQnIHk9JzMuNycgd2lkdGg9JzEuMicgaGVpZ2h0PScyJyBmaWxsPScjMTgxNTEwJy8+PHJlY3QgeD0nNCcgeT0nNS42JyB3aWR0aD0nMTYnIGhlaWdodD0nMTMnIHJ4PSc0JyBmaWxsPScjMTgxNTEwJy8+PGNpcmNsZSBjeD0nOScgY3k9JzExLjQnIHI9JzEuOCcgZmlsbD0nI0YwNDUxRicvPjxjaXJjbGUgY3g9JzE1JyBjeT0nMTEuNCcgcj0nMS44JyBmaWxsPScjRjA0NTFGJy8+PHJlY3QgeD0nOC40JyB5PScxNScgd2lkdGg9JzcuMicgaGVpZ2h0PScxLjUnIHJ4PScuNzUnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9Jy42Jy8+PHJlY3QgeD0nOS40JyB5PScxOScgd2lkdGg9JzInIGhlaWdodD0nMi42JyByeD0nLjYnIGZpbGw9JyMxODE1MTAnLz48cmVjdCB4PScxMi42JyB5PScxOScgd2lkdGg9JzInIGhlaWdodD0nMi42JyByeD0nLjYnIGZpbGw9JyMxODE1MTAnLz48L3N2Zz4=") center/contain no-repeat; border-radius:0; transform:none; box-shadow:none; }
.site-header nav { display:flex; gap:28px; flex-wrap:wrap; }
.site-header nav a { color:var(--body); font-weight:600; font-size:.96rem; }
.site-header nav a:hover { color:var(--accent); }

/* Responsive header — keep ALL nav links visible/reachable on narrow widths.
   Below ~900px the 8-link row no longer fits beside the logo and used to
   overflow off the right edge (links clipped, no hamburger). Stack the header
   into a centered column so the nav wraps onto its own centered rows instead. */
@media (max-width:900px){
  /* Left-align (not center) the stacked header so the logo + nav share the
     SAME left gutter as the hero/body content below — otherwise a centered
     header reads as misaligned against the left-aligned page. */
  .site-header > .container{ flex-direction:column; align-items:flex-start; gap:14px; }
  .site-header nav{ width:100%; justify-content:flex-start; gap:14px 22px; }
}
@media (max-width:480px){
  .site-header nav{ gap:12px 16px; }
  .site-header nav a{ font-size:.9rem; }
}

/* ===== Hero ===== */
.hero { padding:80px 0 52px; text-align:center; }
.hero .eyebrow { display:block; margin-bottom:18px; }
.hero h1 { font-size:clamp(2.4rem,5.6vw,4.4rem); font-weight:600; max-width:18ch; margin:0 auto; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero-sub { font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--muted); max-width:56ch; margin:22px auto 0; }
.trust-bar { display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center; margin-top:30px; font-size:.92rem; font-weight:600; color:var(--body); }
.trust-bar span { display:inline-flex; align-items:center; gap:8px; }
.trust-bar span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 20%,transparent); }

/* ===== Sections ===== */
.articles-grid { max-width:var(--maxw); margin:0 auto; padding:8px 32px 16px; }
.section-title { font-size:clamp(1.5rem,3vw,2.2rem); margin:48px 0 6px; padding-bottom:12px; border-bottom:2px solid var(--ink); }
.section-head { max-width:var(--maxw); margin:60px auto 0; padding:0 32px 14px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-bottom:2px solid var(--ink); }
.section-head h2 { font-size:clamp(1.6rem,3vw,2.3rem); }
.section-head a { color:var(--accent-d); font-weight:700; font-size:.95rem; white-space:nowrap; }

/* ===== Card grid (works for .grid and .articles-grid-with-direct-cards) ===== */
.grid, .articles-grid:has(> .card) {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:28px; margin-top:28px; list-style:none;
}
.card {
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); padding:26px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;
}
.card:has(.card-cover) { padding:0; }      /* thumbnail cards manage their own padding */
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }

/* thumbnail cover */
.card-cover { aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; gap:18px; background:linear-gradient(135deg,var(--c1,#2a2a3a),var(--c2,#101018)); overflow:hidden; }
.card-cover::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.18), transparent 60%); }
.logo-chip { width:74px; height:74px; border-radius:18px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.22); position:relative; z-index:1; padding:14px; }
.logo-chip img { width:100%; height:100%; object-fit:contain; }
.logo-chip .lc-letter { display:none; }
.logo-chip.lc-fallback { background:var(--bc,#222); padding:0; }
.logo-chip.lc-fallback .lc-letter { display:block; color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:1.9rem; }
.card-cover .vs { position:relative; z-index:1; font-family:'Fraunces',serif; font-style:italic; font-weight:600; color:#fff; font-size:1.5rem; opacity:.92; }
.cover-glyph { position:relative; z-index:1; font-size:3rem; }
.cover-label { position:absolute; left:0; right:0; bottom:0; z-index:1; text-align:center; padding:10px; font-family:'Fraunces',serif; font-weight:700; font-size:2.2rem; color:rgba(255,255,255,.96); letter-spacing:-.02em; }
.card-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }

/* card text */
.card-tag { display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 12%,var(--paper)); padding:5px 11px; border-radius:999px; margin-bottom:12px; }
.card h3 { font-size:1.3rem; font-weight:600; line-height:1.2; margin-bottom:8px; }
.card h3 a, .card-title { color:var(--ink); }
.card:hover h3 a { color:var(--accent-d); }
.card p { color:var(--body); font-size:.98rem; }
.card-meta { color:var(--muted); font-size:.88rem; margin-top:12px; }

/* featured spanning card */
.card.featured { grid-column:span 2; flex-direction:row; padding:0; }
.card.featured .card-cover { aspect-ratio:auto; width:46%; min-height:280px; }
.card.featured .card-body { justify-content:center; padding:40px; }
.card.featured h3 { font-size:1.9rem; }
@media (max-width:760px){ .card.featured{ flex-direction:column } .card.featured .card-cover{ width:100% } }

/* ===== Article page ===== */
.article-header, .article-body, .article-lede { max-width:760px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; }
.article-header { margin-top:60px; }
.article-tag, .article-header .card-tag { display:inline-block; margin-bottom:16px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-d); background:color-mix(in srgb,var(--accent) 12%,var(--paper)); padding:5px 11px; border-radius:999px; }
.article-header h1 { font-size:clamp(2rem,4.4vw,3.2rem); font-weight:600; }
.article-meta { color:var(--muted); font-size:.94rem; margin-top:16px; display:flex; gap:16px; flex-wrap:wrap; }
.article-lede { margin-top:20px; font-size:1.32rem; line-height:1.5; color:var(--ink); font-family:'Fraunces',serif; }
.article-body { margin-top:32px; padding-bottom:52px; font-size:1.1rem; }
.article-body h2 { font-size:1.8rem; margin:46px 0 14px; }
.article-body h3 { font-size:1.32rem; margin:30px 0 10px; }
.article-body p { margin:0 0 18px; }
.article-body ul, .article-body ol { margin:0 0 18px 1.3em; } .article-body li { margin-bottom:8px; }
.article-body p a, .article-body li a { color:var(--accent-d); font-weight:600; box-shadow:inset 0 -.5em 0 color-mix(in srgb,var(--accent) 12%,transparent); }
.article-body blockquote { border-left:4px solid var(--accent); padding:6px 0 6px 22px; margin:22px 0; font-family:'Fraunces',serif; font-style:italic; font-size:1.25rem; color:var(--ink); }

/* ===== Comparison table ===== */
.comparison-table { width:100%; border-collapse:separate; border-spacing:0; margin:26px 0; font-size:1rem; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.comparison-table th { background:var(--ink); color:#fff; font-family:'Hanken Grotesk',sans-serif; font-weight:700; text-align:left; padding:14px 18px; }
.comparison-table td { padding:13px 18px; border-top:1px solid var(--line); }
.comparison-table tr:nth-child(even) td { background:var(--paper-2); }
.win,.yes { color:var(--green); font-weight:700; } .lose,.no { color:var(--red); font-weight:700; }

/* ===== Callouts ===== */
.verdict-box { background:linear-gradient(135deg,#fff,var(--paper-2)); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:24px 26px; margin:32px 0; box-shadow:var(--shadow); }
.verdict-box h3 { margin-top:0; font-size:1.35rem; }

.affiliate-cta { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff !important; font-weight:700; padding:14px 26px; border-radius:12px; margin:10px 0; box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 40%,transparent); transition:transform .15s,box-shadow .15s,background .15s; }
.affiliate-cta::after { content:"→"; transition:transform .15s; } .affiliate-cta:hover::after{ transform:translateX(3px); }
.affiliate-cta:hover { transform:translateY(-2px); background:var(--accent-d); color:#fff; }
.affiliate-cta.secondary { background:transparent; color:var(--ink) !important; border:1.5px solid var(--ink); box-shadow:none; } .affiliate-cta.secondary:hover{ background:var(--ink); color:#fff !important; }
.disclosure, .fine-print { font-size:.88rem; color:var(--muted); background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:24px 0; }

/* ===== Newsletter ===== */
.newsletter { max-width:var(--maxw); margin:76px auto; padding:54px 40px; background:var(--ink); color:#fff; border-radius:26px; text-align:center; position:relative; overflow:hidden; }
.newsletter::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% -20%, color-mix(in srgb,var(--accent) 50%,transparent), transparent 60%); }
.newsletter h2, .newsletter .section-title { color:#fff; border:0; font-size:clamp(1.7rem,3vw,2.4rem); position:relative; }
.newsletter p { color:rgba(255,255,255,.72); position:relative; margin-top:10px; }
.newsletter-form { display:flex; gap:10px; justify-content:center; max-width:480px; margin:24px auto 0; flex-wrap:wrap; position:relative; }
.newsletter-form input { flex:1; min-width:220px; padding:15px 18px; border:0; border-radius:11px; font-size:1rem; font-family:inherit; }
.newsletter-form button { background:var(--accent); color:#fff; border:0; padding:15px 26px; border-radius:11px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .15s; }
.newsletter-form button:hover { background:var(--accent-d); }

/* ===== Article search ===== */
.search-wrap { max-width:560px; margin:26px auto 0; position:relative; }
.search-wrap svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:19px; height:19px; stroke:var(--muted); pointer-events:none; }
.search-box { width:100%; box-sizing:border-box; padding:15px 18px 15px 48px; font-size:1.02rem; font-family:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s; }
.search-box::placeholder { color:var(--muted); }
.search-box:focus { outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.search-count { text-align:center; margin:14px auto 0; color:var(--muted); font-size:.92rem; min-height:1.2em; }
.search-empty { text-align:center; margin:48px auto; color:var(--muted); font-family:'Fraunces',serif; font-size:1.3rem; }
.card.is-hidden, .section-title.is-hidden, .grid.is-hidden { display:none; }

/* ===== Footer ===== */
.site-footer { border-top:1px solid var(--line); margin-top:40px; padding:46px 32px; text-align:center; color:var(--muted); font-size:.92rem; }
.site-footer .logo { font-size:1.2rem; margin-bottom:12px; justify-content:center; }
.site-footer a { color:var(--muted); font-weight:600; } .site-footer a:hover{ color:var(--accent); }

@media (max-width:640px){
  body{ font-size:17px; }
  .hero{ padding:56px 0 40px; }
  .container,.articles-grid,.article-body,.article-header,.article-lede,.section-head{ padding-left:22px; padding-right:22px; }
}

/* ============================================================
   Homepage polish — hands 2026-06-15 (OWNER: "improve our website")
   ============================================================ */

/* Newsletter fine-print must NOT inherit the boxed disclosure look
   (it was rendering as an empty cream bar on the dark section). */
.newsletter .fine-print {
  background:none; border:0; padding:0; margin:16px 0 0;
  color:rgba(255,255,255,.5); position:relative;
}

/* Richer, more "designed" article-card covers (applies site-wide).
   Subtle dot-grid + bottom vignette so covers read as intentional
   art, not flat placeholder blocks. */
.card-cover { box-shadow:inset 0 -56px 56px -30px rgba(0,0,0,.42); }
.card-cover::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px);
  background-size:15px 15px; opacity:.55;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 28%, #000 32%, transparent 76%);
          mask-image:radial-gradient(120% 120% at 50% 28%, #000 32%, transparent 76%);
}

/* Glyph covers: bigger, with depth + a soft glow halo behind. */
.cover-glyph {
  font-size:3.4rem;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.38));
  transition:transform .25s ease;
}
.card:hover .cover-glyph { transform:scale(1.07); }

/* Logo chips lift slightly on hover for a tactile feel. */
.logo-chip { transition:transform .25s ease, box-shadow .25s ease; }
.card:hover .logo-chip { transform:translateY(-3px) scale(1.04); box-shadow:0 12px 28px rgba(0,0,0,.28); }

/* ============================================================
   Apple-clean pass — hands 2026-06-19
   (OWNER: "improve the images + better look and feel, more slick,
   more Apple-like.") Real-photo covers replace emoji placeholders;
   calmer motion, more air, glassier surfaces site-wide.
   ============================================================ */

/* Real-photo article covers: clean photo + soft bottom scrim + a glass
   category pill. Overrides the gradient/dot-grid placeholder treatment. */
.card-cover.photo { background:#ECE6D8; }
.card-cover.photo img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-cover.photo img { transform:scale(1.045); }
.card-cover.photo::before { content:none; }            /* kill dot-grid on photos */
.card-cover.photo::after {                              /* legibility scrim (bottom) */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(20,16,11,.55) 0%, rgba(20,16,11,.10) 34%, transparent 60%);
}
.cover-pill {
  position:absolute; z-index:2; top:13px; left:13px;
  font-family:'Hanken Grotesk',sans-serif; font-size:.66rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(22,18,12,.40); -webkit-backdrop-filter:blur(8px) saturate(150%);
  backdrop-filter:blur(8px) saturate(150%);
  border:1px solid rgba(255,255,255,.20); border-radius:999px; padding:6px 13px;
}

/* Calmer, more premium card motion (Apple-subtle, not bouncy). */
.card { transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.card:hover { transform:translateY(-4px); }

/* A little more air between cards. */
.grid, .articles-grid:has(> .card) { gap:30px; }

/* Crisper rounded corners on media for the Apple feel. */
.card:has(.card-cover) { border-radius:20px; }
.card-cover { border-radius:0; }