/* ===================================================================
   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:#8C8678; --line:#E8E1D2;
  --accent:#F0451F; --accent-d:#CE3411; --blue:#1C3A63; --green:#0E8C5A; --red:#C13A24;
  --radius:18px; --maxw:1200px;
  --shadow:0 2px 4px rgba(24,21,16,.04), 0 12px 32px rgba(24,21,16,.07);
  --shadow-lg:0 8px 16px rgba(24,21,16,.06), 0 28px 60px rgba(46,26,12,.16);
}

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; position:relative;
}
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); }

/* ===== 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; }
.logo::before { content:""; width:13px; height:13px; border-radius:4px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
.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); }

/* ===== 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); 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; }
}