/*
Theme Name: AI Dust
Theme URI: https://aidust.io/
Author: AI Dust
Description: A production-ready directory theme for AI tools, editorial content, and founder stories. Converted from the original AI Dust frontend.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-dust
Tags: custom-logo, custom-menu, featured-images, translation-ready, blog
*/

/* =========================================================
   AI Dust — design tokens
   Typography/weights/letter-spacing/radii measured from a
   reference SaaS directory site; palette is white/black/grey.
   ========================================================= */
:root{
  --black: #121214;
  --black-soft: #1b1b1e;
  --white: #ffffff;
  --canvas: #e5e5e2;
  --grey-50: #f6f6f5;
  --grey-100: #efefee;
  --grey-150: #e8e8e6;
  --grey-200: #d8d8d5;
  --grey-300: #c3c3c0;
  --grey-400: #9d9d99;
  --grey-500: #7c7c78;
  --grey-600: #57574f;
  --grey-700: #3a3a37;

  --orange: #ff4713;
  --orange-dark: #d93a0a;
  --orange-tint: #fff0e8;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.09);
  --shadow-lg: 0 22px 50px rgba(0,0,0,.14);

  --ease: cubic-bezier(.4,0,.2,1);
  --container: 1216px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; font-size:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--black); color:var(--white);
  padding:10px 16px; z-index:200; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
}

/* Site-wide soft orange wash under the header, on every page */
main{ position:relative; }
main::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%;
  height:220px;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,71,19,.09) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* =========================================================
   Buttons / pills / tags
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  font-size:14px;
  font-weight:500;
  border-radius:var(--r-md);
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn--dark{ background:var(--black); color:var(--white); }
.btn--dark:hover{ background:#000; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--light{ background:var(--white); color:var(--black); }
.btn--light:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn--sm{ padding:9px 16px; font-size:13px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:var(--r-md);
  background:transparent;
  border:1px solid transparent;
  color:var(--black);
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ background:var(--grey-100); border-color:var(--grey-200); }

.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  font-size:13px;
  font-weight:500;
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  color:var(--grey-700);
  background:var(--white);
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.pill:hover{ border-color:var(--orange); color:var(--orange-dark); background:var(--orange-tint); }

.tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:500;
  padding:5px 10px;
  border-radius:var(--r-full);
  background:var(--grey-100);
  color:var(--grey-700);
}
.tag--ghost{ background:transparent; border:1px solid var(--grey-200); }
.tag--orange{ background:var(--orange-tint); color:var(--orange-dark); }
.tag--dark{ background:var(--black); color:var(--white); }

.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--grey-500);
  margin-bottom:10px;
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:var(--black);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s var(--ease), gap .15s var(--ease);
}
.link-arrow svg{ width:15px; height:15px; }
.link-arrow:hover{ color:var(--orange-dark); border-color:var(--orange); gap:10px; }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.is-scrolled{
  border-bottom-color:var(--grey-200);
  box-shadow:var(--shadow-sm);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.logo{ display:inline-flex; align-items:center; gap:9px; }
.logo__mark{ width:22px; height:22px; }
.logo__word{ font-size:17px; font-weight:700; letter-spacing:-0.02em; }

.nav__links{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav__links a{
  font-size:14px;
  font-weight:500;
  color:var(--grey-700);
  transition:color .15s var(--ease);
}
.nav__links a:hover{ color:var(--orange-dark); }

/* Submit dropdown — sits in the main nav links row, replacing FAQ */
.nav__dropdown{ position:relative; }
.nav__dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--grey-700);
  cursor:pointer;
  transition:color .15s var(--ease);
}
.nav__dropdown-toggle:hover,
.nav__dropdown.is-open .nav__dropdown-toggle{ color:var(--orange-dark); }
.nav__dropdown-toggle svg{ width:12px; height:12px; transition:transform .2s var(--ease); }
.nav__dropdown.is-open .nav__dropdown-toggle svg{ transform:rotate(180deg); }
.nav__dropdown-menu{
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%);
  min-width:230px;
  background:var(--black);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:50;
}
.nav__dropdown-menu[hidden]{ display:none; }
.nav__dropdown-menu a{
  display:block;
  padding:9px 12px;
  border-radius:var(--r-sm);
  font-size:13.5px;
  font-weight:500;
  color:var(--white);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.nav__dropdown-menu a:hover{ background:rgba(255,113,49,.14); color:var(--orange); }

.nav__actions{ display:flex; align-items:center; gap:10px; }
.nav__cta{ margin-left:4px; }
.nav__burger{ display:none; }

.nav__mobile{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 24px 20px;
  border-top:1px solid var(--grey-200);
}
.nav__mobile a{
  padding:12px 4px;
  font-size:15px;
  font-weight:500;
  color:var(--black);
  border-bottom:1px solid var(--grey-150);
}
.nav__mobile .btn{ margin-top:12px; width:100%; }
.nav__mobile.is-open{ display:flex; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:88px 0 64px;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grey-150) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grey-150) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 10px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  font-size:13px;
  font-weight:500;
  color:var(--grey-700);
  background:var(--white);
  margin-bottom:24px;
  transition:border-color .15s var(--ease);
}
.badge:hover{ border-color:var(--orange); }
.badge__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
}

.hero__title{
  font-size:clamp(2.25rem, 5.4vw, 3.5rem);
  max-width:820px;
  margin-bottom:20px;
}
.hero__sub{
  max-width:560px;
  font-size:16px;
  color:var(--grey-600);
  margin-bottom:36px;
}

.search{
  display:flex;
  align-items:center;
  width:100%;
  max-width:640px;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  padding:6px 6px 6px 18px;
  box-shadow:var(--shadow-lg);
  transition:border-color .15s var(--ease);
}
.search:focus-within{ border-color:var(--orange); box-shadow:var(--shadow-lg), 0 0 0 3px var(--orange-tint); }
.search__icon{ width:17px; height:17px; color:var(--grey-500); flex-shrink:0; }
.search input{
  flex:1;
  border:none;
  outline:none;
  padding:12px 10px;
  font-size:14px;
  background:transparent;
  min-width:0;
}
.search__divider{ width:1px; height:24px; background:var(--grey-200); flex-shrink:0; }
.search__select{
  border:none;
  background:transparent;
  font-size:13px;
  font-weight:500;
  color:var(--grey-700);
  padding:8px 6px;
  outline:none;
  max-width:150px;
}
.search__btn{ flex-shrink:0; }

.marquee-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--grey-400);
  margin-top:36px;
  margin-bottom:14px;
}
.marquee{
  position:relative;
  width:100%;
  max-width:720px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:32px;
  width:max-content;
  animation:marqueeScroll 24s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--grey-500);
  white-space:nowrap;
}
.marquee__item-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:6px;
  background:var(--black);
  color:var(--white);
  font-size:10px;
  font-weight:700;
  flex-shrink:0;
}

/* =========================================================
   Stats
   ========================================================= */
.stats{
  background:var(--black);
  color:var(--white);
}
.stats__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:40px 24px;
}
.stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:0 12px;
  border-left:1px solid rgba(255,255,255,.12);
}
.stat:first-child{ border-left:none; }
.stat__num{
  font-size:clamp(1.6rem, 3vw, 2.25rem);
  font-weight:700;
  letter-spacing:-0.02em;
}
.stat__label{
  font-size:13px;
  color:rgba(255,255,255,.6);
}

/* =========================================================
   Sections (generic)
   ========================================================= */
.section{ padding:88px 0; }
.section--white{
  background:var(--white);
  border-top:1px solid var(--grey-200);
  border-bottom:1px solid var(--grey-200);
}
.section--muted{ background:var(--grey-50); }
.section--dark{
  background:var(--black);
  color:var(--white);
}
.section--dark .eyebrow{ color:rgba(255,255,255,.45); }
.section--dark .section__title{ color:var(--white); }
.section--dark .section__sub{ color:rgba(255,255,255,.6); }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:44px;
}
.section__head--center{
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.section__title{ font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:10px; }
.section__sub{ font-size:15px; color:var(--grey-600); max-width:460px; margin:0; }

/* =========================================================
   Category grid
   ========================================================= */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.cat-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:22px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cat-card:hover{
  border-color:var(--orange);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.cat-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:var(--r-md);
  background:var(--grey-100);
  color:var(--black);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.cat-card:hover .cat-card__icon{ background:var(--black); color:var(--white); }
.cat-card__icon svg{ width:19px; height:19px; }
.cat-card__name{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; }
.cat-card__count{ font-size:12.5px; color:var(--grey-500); }

/* =========================================================
   Trending — filter tabs
   ========================================================= */
.filter-tabs{
  display:inline-flex;
  align-items:center;
  height:44px;
  gap:4px;
  padding:4px;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
}
.filter-tab{
  padding:8px 16px;
  border:none;
  background:transparent;
  border-radius:var(--r-full);
  font-size:13px;
  font-weight:600;
  color:var(--grey-600);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.filter-tab:hover{ color:var(--orange-dark); }
.filter-tab.is-active{ background:var(--black); color:var(--white); }
.filter-tab.is-active:hover{ color:var(--white); }

/* =========================================================
   Podium — top 3 ranked tools
   ========================================================= */
.podium{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin-bottom:20px;
}
.podium-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:28px 20px 24px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.podium-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.podium-card--1{ order:2; background:var(--black); border-color:var(--black); color:var(--white); transform:translateY(-16px); box-shadow:var(--shadow-lg); }
.podium-card--1:hover{ transform:translateY(-19px); }
.podium-card--2{ order:1; }
.podium-card--3{ order:3; }
.podium-card__rank{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--grey-500);
}
.podium-card--1 .podium-card__rank{ color:var(--orange); }
.podium-card__rank svg{ width:13px; height:13px; }
.podium-card__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r-md);
  background:var(--black); color:var(--white);
  font-size:17px; font-weight:700;
}
.podium-card--1 .podium-card__mark{ background:var(--white); color:var(--black); }
.podium-card__name{ font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.podium-card__desc{ font-size:13px; color:var(--grey-600); margin:0; line-height:1.5; }
.podium-card--1 .podium-card__desc{ color:rgba(255,255,255,.65); }
.podium-card__meta{ display:flex; align-items:center; gap:14px; margin-top:4px; }

/* =========================================================
   Trending — browser-window tool cards
   ========================================================= */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.tool-window{
  display:flex;
  flex-direction:column;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  overflow:hidden;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tool-window:hover{
  border-color:var(--orange);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.tool-window.is-hidden{ display:none; }

.tool-window__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:var(--black);
}
.tool-window__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tool-window__dot--red{ background:#ff5f56; }
.tool-window__dot--amber{ background:var(--orange); }
.tool-window__dot--green{ background:#27c93f; }
.tool-window__url{
  margin-left:6px;
  font-size:11px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--white);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tool-window__bar-arrow{
  margin-left:auto;
  width:13px; height:13px;
  color:var(--white);
  flex-shrink:0;
  transition:color .2s var(--ease);
}
.tool-window:hover .tool-window__bar-arrow{ color:var(--orange); }

.tool-window__preview{
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--grey-50);
  background-image:repeating-linear-gradient(45deg, var(--grey-150) 0 1.5px, transparent 1.5px 11px);
  border-bottom:1px solid var(--grey-150);
}
.tool-window__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md);
  background:var(--black); color:var(--white);
  font-size:16px; font-weight:700;
  box-shadow:var(--shadow-md);
}

.tool-window__body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
}
.tool-window__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tool-window__name{ font-size:15.5px; font-weight:600; letter-spacing:-0.01em; }
.tool-window__desc{ font-size:13px; color:var(--grey-600); margin:0; }
.tool-window__meta{ display:flex; align-items:center; justify-content:space-between; }

.upvote{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--grey-700);
  font-size:12.5px;
  font-weight:600;
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.upvote svg{ width:13px; height:13px; }
.upvote:hover{ border-color:var(--orange); color:var(--orange-dark); background:var(--orange-tint); }
.upvote.is-voted{ border-color:var(--orange); color:var(--orange-dark); background:var(--orange-tint); }

.tool-card__mark--sm{ width:34px; height:34px; font-size:13px; border-radius:var(--r-sm); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--black); color:var(--white); font-weight:700; }

.rating{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12.5px;
  font-weight:600;
  color:var(--grey-700);
}
.rating svg{ width:13px; height:13px; color:var(--orange); }
.podium-card--1 .rating{ color:rgba(255,255,255,.85); }

/* =========================================================
   How it works
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.step{
  position:relative;
  padding:32px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  background:var(--black-soft);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.step:hover{ border-color:var(--orange); transform:translateY(-3px); }
.step__num{
  position:absolute;
  top:24px; right:24px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.3);
  letter-spacing:.04em;
}
.step__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--r-md);
  background:var(--orange);
  color:var(--white);
  margin-bottom:20px;
}
.step__icon svg{ width:20px; height:20px; }
.step h3{ font-size:16px; margin-bottom:8px; color:var(--white); }
.step p{ font-size:13.5px; color:rgba(255,255,255,.55); margin:0; line-height:1.6; }

/* =========================================================
   Recently added
   ========================================================= */
.recent-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--white);
}
.recent-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--grey-150);
  transition:background .15s var(--ease);
}
.recent-list .recent-row:last-child{ border-bottom:none; }
.recent-row:hover{ background:var(--orange-tint); }
.recent-row__info{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.recent-row__name{ font-size:14.5px; font-weight:600; }
.recent-row__desc{
  font-size:13px;
  color:var(--grey-600);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recent-row__date{ font-size:12.5px; color:var(--grey-500); flex-shrink:0; }
.recent-row__arrow{ width:16px; height:16px; color:var(--grey-400); flex-shrink:0; transition:color .15s var(--ease), transform .15s var(--ease); }
.recent-row:hover .recent-row__arrow{ color:var(--orange-dark); transform:translate(2px,-2px); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:56px;
  align-items:start;
}
.faq-layout__intro{ position:sticky; top:96px; }
.faq-layout__intro .section__sub{ max-width:none; }

.faq-contact{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:32px;
  padding:16px;
  border-radius:var(--r-lg);
  background:var(--black);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-contact:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.faq-contact__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--orange); color:var(--black);
  flex-shrink:0;
}
.faq-contact__icon svg{ width:17px; height:17px; }
.faq-contact__body{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; font-size:12.5px; color:rgba(255,255,255,.6); }
.faq-contact__body strong{ font-size:13.5px; font-weight:600; color:var(--white); }
.faq-contact__arrow{ width:16px; height:16px; color:rgba(255,255,255,.5); flex-shrink:0; transition:transform .2s var(--ease), color .2s var(--ease); }
.faq-contact:hover .faq-contact__arrow{ color:var(--orange); transform:translate(2px,-2px); }

.faq-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--grey-200);
}
.faq-item{ border-bottom:1px solid var(--grey-200); }
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 2px;
  background:none;
  border:none;
  text-align:left;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--black);
}
.faq-item__q-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--grey-300);
  color:var(--grey-500);
  flex-shrink:0;
  transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.faq-item__q-icon svg{ width:13px; height:13px; }
.faq-item.is-open .faq-item__q-icon{
  transform:rotate(45deg);
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
}
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s var(--ease);
}
.faq-item__a p{
  margin:0 0 22px;
  padding-right:50px;
  font-size:14px;
  line-height:1.7;
  color:var(--grey-600);
}

/* =========================================================
   Simple listings — light, minimal directory rows
   ========================================================= */
.tag--light{
  background:var(--grey-50);
  color:var(--grey-600);
  border:1px solid var(--grey-150);
}
.simple-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.simple-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  min-width:0;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.simple-card:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.simple-card__logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--grey-100); color:var(--black);
  font-size:13px; font-weight:700; flex-shrink:0;
}
.simple-card__info{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.simple-card__name{ font-size:13.5px; font-weight:600; letter-spacing:-0.01em; }
.simple-card__line{ font-size:12px; color:var(--grey-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.testimonial-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:26px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.testimonial-card:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.testimonial-card__quote{ width:24px; height:24px; color:var(--orange); }
.testimonial-card__text{ font-size:14.5px; line-height:1.65; color:var(--black); margin:0; flex:1; }
.testimonial-card__author{ display:flex; align-items:center; gap:10px; }
.testimonial-card__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:12px; font-weight:700; flex-shrink:0;
}
.testimonial-card__name{ display:block; font-size:13.5px; font-weight:600; }
.testimonial-card__role{ display:block; font-size:12px; color:var(--grey-500); }

/* =========================================================
   Blog
   ========================================================= */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.blog-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-card:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.blog-card__head{ display:flex; align-items:center; gap:12px; }
.blog-card__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:var(--r-md);
  background:var(--black);
  color:var(--orange);
  flex-shrink:0;
}
.blog-card__mark svg{ width:18px; height:18px; }
.blog-card__meta-col{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.blog-card__meta{ font-size:12px; color:var(--grey-500); }
.blog-card__title{ font-size:15.5px; font-weight:600; letter-spacing:-0.01em; line-height:1.35; margin:0; }
.blog-card__excerpt{ font-size:13.5px; color:var(--grey-600); margin:0; flex:1; }
.blog-card__read{ margin-top:6px; }

/* =========================================================
   Blog page (blog/index.html) — hero, toolbar, post grid
   ========================================================= */
.blog-hero{
  padding:72px 0 8px;
  text-align:center;
}
.blog-hero__title{
  font-size:clamp(2rem, 4.2vw, 3rem);
  margin-bottom:14px;
}
.blog-hero__sub{
  font-size:15.5px;
  color:var(--grey-600);
  max-width:620px;
  margin:0 auto;
}

.blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin:40px 0 44px;
}
.blog-toolbar__right{ display:flex; align-items:center; gap:10px; }
.blog-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  background:var(--white);
  min-width:220px;
  transition:border-color .15s var(--ease);
}
.blog-search:focus-within{ border-color:var(--orange); }
.blog-search svg{ width:15px; height:15px; color:var(--grey-400); flex-shrink:0; }
.blog-search input{ border:none; outline:none; background:transparent; font-size:13.5px; flex:1; min-width:0; }

.post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:none;
  border-radius:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post-card.is-hidden{ display:none; }
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.post-card__cover{
  position:relative;
  border-radius:0;
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  overflow:hidden;
}
.post-card__cover::after{
  content:'';
  position:absolute;
  width:180px; height:180px;
  right:-50px; bottom:-60px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.4;
  border-radius:50%;
  pointer-events:none;
}
.post-card__cover--alt::after{ right:auto; left:-50px; bottom:auto; top:-60px; }
.post-card__cover-icon{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:var(--orange);
}
.post-card__cover-icon svg{ width:22px; height:22px; }
.post-card__body{ display:flex; flex-direction:column; gap:8px; padding:20px; }
.post-card__meta{ display:flex; align-items:center; gap:8px; }
.post-card__title{ font-size:16px; font-weight:600; letter-spacing:-0.01em; line-height:1.35; margin:0; }
.post-card__excerpt{ font-size:13.5px; color:var(--grey-600); margin:0; flex:1; }
.post-card__read{ margin-top:4px; }

/* =========================================================
   Founder Vision
   ========================================================= */
.vision-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.vision-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.vision-card:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.vision-card__head{ display:flex; align-items:center; gap:12px; }
.vision-card__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:13px; font-weight:700; flex-shrink:0;
}
.vision-card__who{ display:flex; flex-direction:column; flex:1; min-width:0; gap:1px; }
.vision-card__name{ font-size:14px; font-weight:600; }
.vision-card__role{ font-size:12px; color:var(--grey-500); }
.vision-card__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--r-sm);
  background:var(--grey-100); color:var(--black);
  font-size:11px; font-weight:700; flex-shrink:0;
}
.vision-card__quote-mark{ width:22px; height:22px; color:var(--orange); }
.vision-card__quote{ font-size:14px; line-height:1.7; color:var(--grey-700); font-style:italic; margin:0; flex:1; }
.vision-card__read{ margin-top:2px; }

/* =========================================================
   Founders listing page (founders/index.html)
   ========================================================= */
.founders-hero{ padding:64px 0 0; }
.founders-hero__title{ font-size:clamp(2.5rem, 6vw, 4rem); margin-bottom:20px; }
.founders-hero__sub{ font-size:16px; color:var(--grey-600); max-width:640px; margin:0 0 32px; }

.founders-toolbar{
  padding-bottom:20px;
  border-bottom:1px solid var(--grey-200);
  margin-bottom:8px;
}

/* =========================================================
   AI Tools listing page (tools/index.html)
   ========================================================= */
/* Full inverted black hero — deliberately different from the plain
   white headers on Blog/Founders/homepage, not just a palette tweak.
   Texture + glow live on the section itself instead of a separate
   banner strip. */
.tools-hero{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding:88px 0 48px;
  overflow:hidden;
}
.tools-hero__texture{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 75% 90% at 50% 0%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse 75% 90% at 50% 0%, #000 30%, transparent 85%);
  pointer-events:none;
}
.tools-hero::after{
  content:'';
  position:absolute;
  width:340px; height:340px;
  right:6%; top:-140px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.5;
  border-radius:50%;
  pointer-events:none;
}
.tools-hero__content{ position:relative; z-index:1; text-align:center; }
.tools-hero__title{ font-size:clamp(2.5rem, 6vw, 4rem); margin-bottom:20px; color:var(--white); }
.tools-hero__sub{ font-size:16px; color:rgba(255,255,255,.65); max-width:640px; margin:0 auto 32px; }
.tools-hero__accent{ color:var(--orange); }

/* Prominent centered search — reuses the shared .search component
   (same neutral shadow at rest, orange-tinted ring on focus) rather
   than the small toolbar search used on the blog listing page. It
   now floats as a bright white pill on the black hero. */
.tools-hero__search{
  margin:8px auto 0;
  transition:box-shadow .2s var(--ease);
}
.tools-hero__search:hover,
.tools-hero__search:focus-within{
  border-color:var(--grey-200);
  box-shadow:0 0 26px rgba(255,71,19,.7);
}

/* Filter tabs live in the white space below the black hero,
   left-aligned — not inside the black box, not centered. */
.tools-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:40px 0 32px;
}

/* Featured / Pricing dropdown, sits to the right of the category tabs
   on the same row. Combines with the category tabs and search (AND
   across groups; OR within the Pricing checkboxes, so "Free" + "Premium"
   checked together shows both, standard faceted-filter behavior). */
.filter-dropdown{ position:relative; }
.filter-dropdown__toggle{
  display:inline-flex;
  align-items:center;
  height:44px;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  background:var(--white);
  font-size:13px;
  font-weight:600;
  transition:border-color .15s var(--ease);
}
.filter-dropdown__toggle-label{ color:var(--grey-400); }
.filter-dropdown__toggle-label.is-active{ color:var(--black); }
.filter-dropdown__toggle:hover{ border-color:var(--orange); }
.filter-dropdown__toggle svg{ width:13px; height:13px; color:var(--grey-400); transition:transform .2s var(--ease), color .15s var(--ease); }
.filter-dropdown__toggle:hover svg{ color:var(--orange); }
.filter-dropdown.is-open .filter-dropdown__toggle{ border-color:var(--black); }
.filter-dropdown.is-open .filter-dropdown__toggle svg{ color:var(--black); transform:rotate(180deg); }
.filter-dropdown__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-full);
  background:var(--orange); color:var(--black);
  font-size:11px; font-weight:700;
}

.filter-dropdown__menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:20;
  width:240px;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.filter-dropdown__menu[hidden]{ display:none; }
.filter-dropdown__group{ display:flex; flex-direction:column; gap:10px; }
.filter-dropdown__label{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-500);
}
.filter-dropdown__option{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--grey-500); cursor:pointer;
}
.filter-dropdown__option:has(input:checked){ color:var(--black); font-weight:600; }
.filter-dropdown__option input{
  width:16px; height:16px; accent-color:var(--black); cursor:pointer; flex-shrink:0;
}
.filter-dropdown__clear{
  align-self:flex-start;
  padding:0; border:none; background:none;
  font-size:12.5px; font-weight:600; color:var(--grey-500);
  border-bottom:1px solid transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.filter-dropdown__clear:hover{ color:var(--orange-dark); border-color:var(--orange); }

/* Image-only card on this page needs a real webpage-screenshot
   proportion (tall/portrait, like saaspo's full-page previews) —
   not the short 120px strip sized for a card with a body below it
   (still correct on the homepage's Trending section, untouched).
   aspect-ratio scales with the card's width at every breakpoint,
   instead of a fixed px height that stays wrong on resize. */
#toolsGrid .tool-window__preview{ height:auto; aspect-ratio: 4 / 5; }
#toolsGrid .tool-window__mark{ width:64px; height:64px; font-size:22px; }

/* Alternatives grid on a tool's own detail page — same image-only card,
   taller than the default 120px strip but keeps the same landscape
   proportions as the header's own hero preview (.tool-detail-header__preview,
   540x300 ≈ 16:9) instead of the full directory's portrait 4:5 cards —
   the tool-window "screenshot" shape should stay consistent wherever it
   reappears on the page, not squash into a squarer ratio in this section. */
#altToolsGrid .tool-window__preview{ height:auto; aspect-ratio: 16 / 9; }
#altToolsGrid .tool-window__mark{ width:56px; height:56px; font-size:20px; }

/* This grid is the page's main content, not a below-the-fold
   discovery — the black hero pushes it below the fold on load, so
   the scroll-reveal system (correct/intentional on other grids like
   the homepage's Trending section) was leaving it blank until the
   user scrolled. Opt this one grid out: show cards immediately,
   no fade-in. ID beats the shared .tool-grid class rules regardless
   of source order, no !important needed. */
#toolsGrid > *{ opacity:1; transform:none; }

/* Reusable "about this page" black box — a compact, page-specific
   description (not the site's generic "About"), meant to be reused
   on other listing pages with each page's own ~200-word content. */
.page-about-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:32px;
  background:var(--black);
  border-radius:var(--r-lg);
  padding:40px;
  width:100%;
  overflow:hidden;
}
.page-about-box__thumbs{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  flex-shrink:0;
  width:176px;
}
.page-about-box__thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:53px; height:80px;
  background:var(--black-soft);
  border:2px solid var(--orange);
  color:var(--orange);
}
.page-about-box__thumb svg{ width:18px; height:18px; }
.page-about-box__body{ position:relative; z-index:1; flex:1; min-width:0; }
.page-about-box::after{
  content:'';
  position:absolute;
  width:320px; height:320px;
  right:-90px; bottom:-120px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.35;
  border-radius:50%;
  pointer-events:none;
}
.page-about-box__label{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--orange);
  margin-bottom:14px;
}
.page-about-box__label-icon{
  display:inline-flex;
  color:var(--orange);
  transform:rotate(-12deg);
}
.page-about-box__label-icon svg{ width:22px; height:22px; }
.page-about-box p{
  position:relative;
  z-index:1;
  font-size:15px;
  font-weight:400;
  line-height:1.8;
  color:rgba(255,255,255,.8);
  margin:0;
}
.page-about-box__lead{ color:var(--orange); font-weight:400; }
.page-about-box__cta-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-start;
  margin-top:20px;
}
.page-about-box__cta-row .btn{ font-weight:700; }
.btn--orange{ background:var(--orange); color:var(--black); }
.btn--orange:hover{ background:var(--orange-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* Founder Vision promo — points readers of this page to the
   founders/index.html listing. Reuses the sitewide avatar-circle
   pattern, stacked and overlapping as a "meet them" teaser. */
.founders-promo{
  display:flex;
  align-items:center;
  gap:32px;
  padding:40px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-xl);
}
.founders-promo__avatars{ display:flex; flex-shrink:0; width:176px; }
.founders-promo__avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  font-size:15px;
  font-weight:700;
  border:3px solid var(--orange);
  margin-left:-16px;
}
.founders-promo__avatar:first-child{ margin-left:0; }
.founders-promo__body .eyebrow{ color:var(--orange); }
.founders-promo__body{ flex:1; min-width:0; }
.founders-promo__body .section__sub{ margin:8px 0 20px; max-width:520px; }

.founder-list{ display:flex; flex-direction:column; }
.founder-row{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:48px;
  padding:44px 0;
}
.founder-row.is-hidden{ display:none; }

.founder-row__image{
  position:relative;
  flex-shrink:0;
  width:240px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  overflow:hidden;
}
.founder-row__image::after{
  content:'';
  position:absolute;
  width:200px; height:200px;
  right:-50px; bottom:-60px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.4;
  border-radius:50%;
}
.founder-row__avatar{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--white); color:var(--black);
  font-size:26px; font-weight:700;
}

.founder-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.founder-row__name{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); font-weight:700; letter-spacing:-0.01em; margin:0; }
.founder-row__role{ font-size:13px; color:var(--grey-500); }
.founder-row__quote{ font-size:15px; line-height:1.7; color:var(--grey-700); font-style:italic; margin:0; max-width:540px; }
.founder-row__meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--grey-500); }
.founder-row__meta-dot{ width:3px; height:3px; border-radius:50%; background:var(--grey-400); }

/* Small "listed on AI Tools" link, sits between the meta row and "Read their story" */
.founder-row__tool-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  font-size:12.5px;
  font-weight:600;
  color:var(--grey-600);
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  padding:4px 12px 4px 4px;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.founder-row__tool-link:hover{ border-color:var(--orange); color:var(--orange-dark); }
.founder-row__tool-link-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  font-size:9px;
  font-weight:700;
  flex-shrink:0;
}

/* =========================================================
   Founder article page (founders/<slug>/index.html)
   ========================================================= */
.founder-article-header{ padding:56px 0 0; max-width:760px; margin:0 auto; text-align:center; }
.founder-article-header__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:88px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:28px; font-weight:700;
  margin-bottom:20px;
}
.founder-article-header h1{ font-size:clamp(1.8rem, 4vw, 2.6rem); margin:0 0 10px; }
.founder-article-header__role{ display:block; font-size:15px; color:var(--grey-600); margin-bottom:18px; }
.founder-article-header__meta{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
  font-size:13px; color:var(--grey-500);
}

/* Full-width pull-quote band right after the header */
.founder-pullquote{
  position:relative;
  background:var(--black);
  padding:64px 0;
  margin-top:32px;
  overflow:hidden;
}
.founder-pullquote::after{
  content:'';
  position:absolute;
  width:320px; height:320px;
  left:-100px; top:-120px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.4;
  border-radius:50%;
}
.founder-pullquote__mark{
  position:relative; z-index:1;
  display:block;
  width:26px; height:26px;
  margin:0 auto 20px;
  color:var(--orange);
}
.founder-pullquote blockquote{
  position:relative; z-index:1;
  font-size:clamp(1.25rem, 3vw, 1.75rem);
  font-style:italic;
  font-weight:500;
  color:var(--white);
  max-width:760px;
  margin:0 auto;
  text-align:center;
  line-height:1.5;
}
.founder-pullquote cite{
  position:relative; z-index:1;
  display:block;
  margin-top:22px;
  font-size:13px;
  font-style:normal;
  color:rgba(255,255,255,.55);
}

/* Sidebar "visit the tool" mini-card, reuses the black-box language */
.founder-article-toc__cta{
  display:block;
  margin-top:28px;
  padding:18px;
  border-radius:var(--r-lg);
  background:var(--black);
  color:var(--white);
}
.founder-article-toc__cta strong{ display:block; font-size:13.5px; margin-bottom:4px; }
.founder-article-toc__cta span{ display:block; font-size:12px; color:rgba(255,255,255,.6); margin-bottom:12px; }

/* Related founders — compact 3-up, distinct from the full founder-row listing */
.related-founders{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.related-founder-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:26px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.related-founder-card:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.related-founder-card__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:15px; font-weight:700;
}
.related-founder-card__name{ font-size:14.5px; font-weight:600; }
.related-founder-card__role{ font-size:12px; color:var(--grey-500); margin-top:-6px; }

/* Pagination — shared, reusable on any listing page */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:44px;
}
.pagination__arrow, .pagination__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 6px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  background:var(--white);
  color:var(--grey-700);
  font-size:13.5px;
  font-weight:600;
  transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.pagination__arrow svg{ width:15px; height:15px; }
.pagination__arrow:hover:not(:disabled), .pagination__num:hover{ border-color:var(--orange); color:var(--orange-dark); }
.pagination__arrow:disabled{ opacity:.35; cursor:default; }
.pagination__num.is-active{ background:var(--black); border-color:var(--black); color:var(--white); }

/* =========================================================
   Article page (blog/<slug>/index.html)
   ========================================================= */
.breadcrumbs{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
  color:var(--grey-400);
  margin-bottom:22px;
}
.breadcrumbs a{ color:var(--grey-500); transition:color .15s var(--ease); }
.breadcrumbs a:hover{ color:var(--orange-dark); }
.breadcrumbs__current{ color:var(--grey-700); font-weight:500; }

.article-header{ padding:56px 0 0; max-width:760px; margin:0 auto; text-align:center; }
.article-header h1{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  margin:0 0 16px;
}
.article-header__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:var(--grey-500);
}
.article-header__author{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:10.5px; font-weight:700; flex-shrink:0;
}
.article-header__dot{ width:3px; height:3px; border-radius:50%; background:var(--grey-400); }

.article-cover{
  position:relative;
  height:340px;
  margin:32px 0 56px;
  background:var(--black);
  overflow:hidden;
}
.article-cover::after{
  content:'';
  position:absolute;
  width:280px; height:280px;
  right:-70px; bottom:-90px;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  opacity:.4;
  border-radius:50%;
}
.article-cover__icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.article-cover__icon svg{ width:64px; height:64px; color:rgba(255,255,255,.14); }

.article-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:56px;
  align-items:start;
}

/* Prose */
.article-content{ max-width:720px; }
.article-content h2{
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:44px 0 14px;
  scroll-margin-top:100px;
}
.article-content h2:first-child{ margin-top:0; }
.article-content h3{ font-size:17px; font-weight:600; margin:28px 0 10px; scroll-margin-top:100px; }
.article-content p{ font-size:15px; line-height:1.75; color:var(--grey-700); margin:0 0 18px; }
.article-content ul, .article-content ol{ margin:0 0 18px; padding-left:22px; }
.article-content li{ font-size:15px; line-height:1.75; color:var(--grey-700); margin-bottom:8px; }
.article-content strong{ font-weight:600; color:var(--black); }

/* Pro-tip callout — black box per explicit requirement */
.pro-tip{
  background:var(--black);
  color:var(--white);
  border-radius:var(--r-lg);
  padding:24px;
  margin:36px 0;
}
.pro-tip__label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange);
  margin-bottom:10px;
}
.pro-tip__icon{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--orange);
  flex-shrink:0;
  transform:rotate(-12deg);
}
.pro-tip__icon svg{ width:22px; height:22px; }
.pro-tip__body p{ margin:0; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.85); }

/* Table of contents sidebar */
.article-toc{ position:sticky; top:96px; }
.article-toc__label{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--grey-500); margin-bottom:14px; display:block;
}
.article-toc ul{ display:flex; flex-direction:column; border-left:2px solid var(--grey-200); }
.article-toc a{
  display:block;
  padding:8px 0 8px 16px;
  margin-left:-2px;
  border-left:2px solid transparent;
  font-size:13px;
  color:var(--grey-600);
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.article-toc a:hover{ color:var(--black); }
.article-toc a.is-active{ color:var(--orange); font-weight:600; border-left-color:var(--orange); }

.article-toc__cta{
  display:block;
  margin-top:28px;
  padding:18px;
  border-radius:var(--r-lg);
  background:var(--black);
  color:var(--white);
}
.article-toc__cta strong{ display:block; font-size:13.5px; margin-bottom:4px; }
.article-toc__cta span{ display:block; font-size:12px; color:rgba(255,255,255,.6); margin-bottom:12px; }

/* Author card + share row, end of article */
.article-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--grey-200);
}
.article-author{ display:flex; align-items:center; gap:12px; }
.article-author__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--black); color:var(--white);
  font-size:13px; font-weight:700; flex-shrink:0;
}
.article-author__name{ display:block; font-size:13.5px; font-weight:600; }
.article-author__role{ display:block; font-size:12px; color:var(--grey-500); }
.article-share{ display:flex; align-items:center; gap:10px; }

/* Previous / next article navigation — text only, title turns orange on hover */
.article-pager{
  display:grid;
  grid-template-columns:minmax(0, 380px) minmax(0, 380px);
  justify-content:space-between;
  gap:24px;
}
.article-pager__link{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.article-pager__link--next{ align-items:flex-end; text-align:right; }
.article-pager__label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--grey-500);
}
.article-pager__label svg{ width:13px; height:13px; }
.article-pager__title{
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
  color:var(--black);
  transition:color .15s var(--ease);
}
.article-pager__link:hover .article-pager__title{ color:var(--orange); }

/* =========================================================
   Tool detail page (tools/<slug>/index.html)
   ========================================================= */
.tool-detail-header{ padding:48px 0 0; }
.tool-detail-header__inner{
  display:grid;
  grid-template-columns:1fr 540px;
  gap:48px;
  align-items:start;
  margin-top:20px;
}
.tool-detail-top{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.tool-detail-title-row{ display:flex; align-items:center; gap:10px; }
.tool-detail-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--black); color:var(--white);
  font-size:16px; font-weight:700; flex-shrink:0;
}
.tool-detail-header h1{ font-size:clamp(1.6rem, 3.4vw, 2.2rem); margin:0; }
.tool-detail-tagline{
  font-size:15px; color:var(--grey-600); margin:0; max-width:520px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;
}
.tool-detail-tags{ display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.tool-detail-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.tool-detail-actions .btn svg{ width:15px; height:15px; }

.tool-detail-facts{
  display:flex; flex-wrap:wrap; gap:28px;
  padding-top:22px;
  border-top:1px solid var(--grey-200);
}
.tool-detail-fact{ display:flex; flex-direction:column; gap:4px; }
.tool-detail-fact__label{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-500); }
.tool-detail-fact__value{ font-size:14px; font-weight:600; color:var(--black); }
.tool-detail-fact__value a{ color:var(--black); border-bottom:1px solid var(--grey-300); transition:color .15s var(--ease), border-color .15s var(--ease); }
.tool-detail-fact__value a:hover{ color:var(--orange-dark); border-color:var(--orange); }

.tool-detail-header__preview{ position:sticky; top:96px; }
.tool-detail-header__preview .tool-window__preview{ height:300px; }
.tool-detail-header__preview .tool-window__mark{ width:84px; height:84px; font-size:30px; border-radius:var(--r-lg); }

/* Key features — a plain checklist, not cards: keeps the page skimmable
   instead of turning every fact into its own bordered tile. */
.check-list{ display:flex; flex-direction:column; gap:12px; margin:0 0 18px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.6; color:var(--grey-700); }
.check-list__text{ flex:1; min-width:0; }
.check-list__text strong{ font-weight:600; color:var(--black); }
.check-list__icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:var(--orange); color:var(--white);
}
.check-list__icon svg{ width:11px; height:11px; }

/* Pricing — one line + an outbound link, not a fabricated plan table.
   Some listed tools are free, some have complex/changing pricing; linking
   to the tool's own pricing page is more honest than inventing tiers. */
.tool-detail-pricing-line{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--black); margin:14px 0 18px; }
.tool-detail-pricing-line svg{ width:15px; height:15px; color:var(--orange); flex-shrink:0; }

/* Small social-link row next to the header actions */
.tool-detail-social{ display:flex; align-items:center; gap:6px; }
.tool-detail-divider{ width:1px; height:20px; background:var(--grey-200); flex-shrink:0; }

/* Pros & cons */
.proscons-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 18px; }
.proscons-card{ border:1px solid var(--grey-200); border-radius:var(--r-lg); padding:20px; }
.proscons-card h4{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--grey-500); margin:0 0 14px; }
.proscons-card ul{ display:flex; flex-direction:column; gap:10px; }
.proscons-card li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.5; color:var(--grey-700); }
.proscons-card li svg{ width:14px; height:14px; flex-shrink:0; margin-top:2px; }
.proscons-card--pros li svg{ color:var(--orange); }
.proscons-card--cons li svg{ color:var(--grey-400); }

/* Inline founder callout inside the article prose */
.tool-detail-founder{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--grey-200); border-radius:var(--r-lg);
  padding:18px 20px; margin:0 0 28px;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
a.tool-detail-founder:hover{ border-color:var(--orange); transform:translateY(-2px); }
.tool-detail-founder__avatar{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:48px; height:48px; border-radius:50%;
  background:var(--black); color:var(--white); font-size:15px; font-weight:700;
}
.tool-detail-founder__body{ flex:1; min-width:0; }
.tool-detail-founder__label{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-500); margin-bottom:3px; }
.tool-detail-founder__name{ display:block; font-size:14.5px; font-weight:600; }
.tool-detail-founder > svg{ width:15px; height:15px; color:var(--grey-400); flex-shrink:0; transition:color .15s var(--ease), transform .15s var(--ease); }
a.tool-detail-founder:hover > svg{ color:var(--orange); transform:translateX(4px); }

/* =========================================================
   Submit form (submit/index.html)
   ========================================================= */

/* "What happens after you submit" — left: an image placeholder the user
   fills in themselves later; right: a vertical checklist (reuses .check-list
   as-is), replacing the earlier horizontal 3-step band. */
.submit-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
/* Real click-to-upload control (a <label> wrapping a hidden file input,
   same pattern as .form-upload below), not just a static image slot —
   plain orange-outlined box, no fade/gradient effects. Once a file is
   picked, JS sets #previewImage's src to an object URL and adds
   .has-image, which swaps the hint text out for the image. */
.submit-preview{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:var(--black-soft);
  border:1px solid var(--orange);
  border-radius:var(--r-xl);
  width:100%;
  max-width:340px;
  aspect-ratio:3 / 3.5;
  margin:0 auto;
  box-shadow:0 30px 50px -10px rgba(0,0,0,.6);
}
/* The uploaded image fills the box. Hidden until a file is actually picked
   (.has-image added by JS), so there's never a broken/empty <img> showing. */
.submit-preview__image{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.submit-preview.has-image .submit-preview__image{ display:block; }

/* Hint shown until an image is picked — sits above the image layer since
   it's the interactive call-to-action. */
.submit-preview__hint{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px;
  text-align:center;
  pointer-events:none;
}
.submit-preview__hint svg{ width:22px; height:22px; color:var(--orange); }
.submit-preview__hint strong{ font-size:14px; font-weight:600; color:var(--white); }
.submit-preview__hint span{ font-size:12px; color:rgba(255,255,255,.5); line-height:1.5; }
.submit-preview:hover .submit-preview__hint svg{ color:var(--orange); }
.submit-preview.has-image .submit-preview__hint{ display:none; }

.submit-form{ max-width:640px; margin:0 auto; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field label{ font-size:13px; font-weight:600; color:var(--black); }
.form-field__hint{ font-size:14px; color:var(--grey-500); font-weight:400; }
.form-field__hint a{ color:var(--orange-dark); border-bottom:1px solid var(--orange-tint); transition:border-color .15s var(--ease); }
.form-field__hint a:hover{ border-color:var(--orange); }
.form-required{ color:var(--orange-dark); font-weight:700; }
.form-field input[type="text"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  color:var(--black);
  background:var(--white);
  outline:none;
  transition:border-color .15s var(--ease);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ border-color:var(--orange); }
.form-field textarea{ resize:vertical; min-height:100px; line-height:1.6; }
.form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357574f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:38px; }

/* Custom single-select dropdown — replaces native <select> so the open
   option list can be styled (browsers don't allow restyling a native
   <select>'s popup hover color, which defaults to OS blue). */
.custom-select{ position:relative; }
.custom-select__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  background:var(--white);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s var(--ease);
}
.custom-select__toggle:hover,
.custom-select.is-open .custom-select__toggle{ border-color:var(--orange); }
.custom-select__value{ color:var(--grey-400); }
.custom-select__toggle.has-value .custom-select__value{ color:var(--black); }
.custom-select__toggle svg{ width:16px; height:16px; color:var(--grey-500); flex-shrink:0; transition:transform .2s var(--ease); }
.custom-select.is-open .custom-select__toggle svg{ transform:rotate(180deg); }

.custom-select__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  z-index:10;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:6px;
  max-height:240px;
  overflow-y:auto;
}
.custom-select__menu[hidden]{ display:none; }
.custom-select__menu li{
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:14px;
  color:var(--grey-700);
  cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.custom-select__menu li:hover,
.custom-select__menu li.is-selected{
  background:var(--orange-tint);
  color:var(--orange-dark);
}

.form-radio-group{ display:flex; flex-wrap:wrap; gap:8px; }
.form-radio{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-full);
  font-size:13px;
  font-weight:500;
  color:var(--grey-600);
  cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.form-radio input{ position:absolute; opacity:0; pointer-events:none; }
.form-radio:has(input:checked){ background:var(--black); border-color:var(--black); color:var(--white); }
.form-radio:hover{ border-color:var(--orange); color:var(--orange-dark); }
.form-radio:has(input:checked):hover{ color:var(--white); }

.form-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px;
  border:1.5px dashed var(--grey-300);
  border-radius:var(--r-lg);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.form-upload:hover{ border-color:var(--orange); background:var(--orange-tint); }
.form-upload input{ display:none; }
.form-upload svg{ width:22px; height:22px; color:var(--grey-400); }
.form-upload strong{ font-size:13.5px; font-weight:600; color:var(--black); }
.form-upload span{ font-size:12px; color:var(--grey-500); }

/* Portrait variant — sized to the founder listing row's actual photo
   (`.founder-row__image`, 240x320px), for the founder photo upload field. */
.form-upload--portrait{
  width:240px;
  aspect-ratio:3 / 4;
  padding:20px;
}

/* Plain bullet guidance list inside a form field — "write in points"
   instructions (e.g. what to cover in an uploaded article), distinct from
   .check-list (which is for feature-style checkmarked content elsewhere). */
.form-guidance{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:10px 0 0;
  padding:16px 18px;
  background:var(--grey-50);
  border-radius:var(--r-md);
}
.form-guidance li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--grey-700);
}
.form-guidance li::before{
  content:'';
  position:absolute;
  left:0; top:8px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange);
}

.submit-form__submit{ width:100%; justify-content:center; margin-top:8px; }

.form-success{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:56px 24px;
}
.form-success.is-visible{ display:flex; }
.form-success__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--orange-tint); color:var(--orange-dark);
}
.form-success__icon svg{ width:26px; height:26px; }
.form-success h2{ font-size:1.4rem; margin:0; }
.form-success p{ font-size:14.5px; color:var(--grey-600); max-width:420px; margin:0; }

/* =========================================================
   CTA + compact submit workflow
   ========================================================= */
.cta{
  background:var(--black);
  color:var(--white);
}
.cta__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:80px 24px;
}
.cta__title{ font-size:clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom:12px; }
.cta__sub{ font-size:15px; color:rgba(255,255,255,.65); max-width:440px; margin:0 0 40px; }

.submit-flow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  width:100%;
  max-width:720px;
  margin-bottom:40px;
}
.submit-flow__step{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0 14px;
}
.submit-flow__step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:15px;
  left:calc(50% + 25px);
  width:calc(100% - 50px);
  height:1px;
  background:rgba(255,255,255,.14);
}
.submit-flow__step:not(:last-child)::before{
  content:'';
  position:absolute;
  top:15px;
  left:calc(50% + 25px);
  width:calc(100% - 50px);
  height:1.5px;
  background:var(--orange);
  transform-origin:left;
  transform:scaleX(0);
  opacity:0;
  z-index:1;
}
.submit-flow__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--orange); color:var(--black);
  font-size:13px; font-weight:700;
  z-index:2;
  position:relative;
}
.submit-flow__step h4{ font-size:13.5px; font-weight:600; margin:0; }
.submit-flow__step p{ font-size:12px; color:rgba(255,255,255,.55); margin:0; max-width:170px; line-height:1.5; }

/* Vertical variant — same numbered-circle + filling-line component,
   stacked top to bottom instead of left to right (submit/index.html's
   "How it works" column). */
.submit-flow--vertical{
  flex-direction:column;
  align-items:flex-start;
  max-width:360px;
  margin-top:28px;
  margin-bottom:0;
}
.submit-flow--vertical .submit-flow__num{
  width:36px; height:36px;
  font-size:15px;
  flex-shrink:0;
  box-shadow:0 0 0 5px rgba(255,71,19,.14);
}
.submit-flow--vertical .submit-flow__step{
  flex-direction:row;
  align-items:flex-start;
  text-align:left;
  gap:22px;
  padding:0 0 42px;
}
.submit-flow--vertical .submit-flow__step:last-child{ padding-bottom:0; }
.submit-flow--vertical .submit-flow__step h4{ font-size:16px; margin-bottom:5px; }
.submit-flow--vertical .submit-flow__step p{ font-size:14px; line-height:1.65; max-width:none; }
.submit-flow--vertical .submit-flow__step:not(:last-child)::after{
  top:44px; left:17px;
  width:1px; height:calc(100% - 26px);
}
.submit-flow--vertical .submit-flow__step:not(:last-child)::before{
  top:44px; left:17px;
  width:1.5px; height:calc(100% - 26px);
  transform-origin:top;
}

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter{ background:var(--grey-50); }
.newsletter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:48px;
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--r-xl);
}
.newsletter .section__sub{ max-width:420px; }
.newsletter__form{
  display:flex;
  gap:10px;
  flex-shrink:0;
}
.newsletter__form input{
  width:260px;
  padding:12px 16px;
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  font-size:14px;
  outline:none;
  transition:border-color .15s var(--ease);
}
.newsletter__form input:focus{ border-color:var(--black); }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  border-top:1px solid var(--grey-200);
  padding-top:64px;
}
.footer__inner{
  display:grid;
  grid-template-columns:1.6fr repeat(4, 1fr);
  gap:32px;
  padding-bottom:48px;
}
.footer__brand p{
  font-size:13.5px;
  color:var(--grey-600);
  margin:12px 0 0;
  max-width:220px;
}
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col h4{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--grey-500);
  margin-bottom:4px;
}
.footer__col a{
  font-size:14px;
  color:var(--grey-700);
  transition:color .15s var(--ease);
}
.footer__col a:hover{ color:var(--black); }

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  border-top:1px solid var(--grey-200);
  font-size:13px;
  color:var(--grey-500);
}
.footer__social{ display:flex; gap:14px; }
.footer__social svg{ width:16px; height:16px; color:var(--grey-500); transition:color .15s var(--ease); }
.footer__social a:hover svg{ color:var(--black); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .cat-grid{ grid-template-columns:repeat(3, 1fr); }
  .tool-grid{ grid-template-columns:repeat(2, 1fr); }
  .blog-grid, .vision-grid, .testimonial-grid{ grid-template-columns:repeat(2, 1fr); }
  .simple-grid{ grid-template-columns:repeat(3, 1fr); }
  .post-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__cta{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .newsletter__inner{ flex-direction:column; align-items:flex-start; }
  .newsletter__form{ width:100%; }
  .newsletter__form input{ width:100%; flex:1; }
  .podium{ grid-template-columns:1fr; }
  .podium-card--1, .podium-card--2, .podium-card--3{ order:0; transform:none; }
  .podium-card--1:hover{ transform:translateY(-3px); }
  .submit-flow:not(.submit-flow--vertical){ flex-direction:column; gap:24px; max-width:320px; }
  .submit-flow:not(.submit-flow--vertical) .submit-flow__step::after{ display:none; }
  .submit-flow:not(.submit-flow--vertical) .submit-flow__step::before{ display:none; }
  .faq-layout{ grid-template-columns:1fr; gap:28px; }
  .faq-layout__intro{ position:static; }
  .article-layout{ grid-template-columns:1fr; gap:32px; }
  .submit-showcase{ grid-template-columns:1fr; gap:32px; }
  .article-toc{ position:static; padding-bottom:24px; border-bottom:1px solid var(--grey-200); }
  .founder-row{ flex-direction:column; align-items:flex-start; gap:24px; }
  .founder-row__image{ width:100%; height:240px; }
  .tool-detail-header__inner{ grid-template-columns:1fr; gap:28px; }
  .tool-detail-header__preview{ position:static; }
}

@media (max-width: 640px){
  .container{ padding:0 18px; }
  .hero{ padding:56px 0 44px; }
  .search{ flex-wrap:wrap; padding:14px; border-radius:var(--r-lg); }
  .search input{ width:100%; padding:8px 4px; }
  .search__divider{ display:none; }
  .search__select{ max-width:none; flex:1; }
  .search__btn{ width:100%; margin-top:8px; }
  .stats__inner{ grid-template-columns:repeat(2, 1fr); gap:24px 0; }
  .stat{ border-left:none; }
  .stat:nth-child(2n+1){ border-right:1px solid rgba(255,255,255,.12); }
  .cat-grid{ grid-template-columns:repeat(2, 1fr); }
  .tool-grid{ grid-template-columns:1fr; }
  .blog-grid, .vision-grid, .testimonial-grid{ grid-template-columns:1fr; }
  .simple-grid{ grid-template-columns:repeat(2, 1fr); }
  .post-grid{ grid-template-columns:1fr; }
  .blog-toolbar{ align-items:flex-start; }
  .tools-filter-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .filter-dropdown{ align-self:stretch; }
  .filter-dropdown__menu{ left:0; right:auto; width:100%; }
  .section{ padding:56px 0; }
  .section__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .faq-item__a p{ padding-right:0; }
  .recent-row{ flex-wrap:wrap; }
  .recent-row__date{ order:3; margin-left:50px; }
  .article-pager{ grid-template-columns:1fr; }
  .article-pager__link--next{ text-align:left; align-items:flex-start; }
  .founders-promo{ flex-direction:column; align-items:flex-start; text-align:left; }
  .related-founders{ grid-template-columns:1fr; }
  .founders-promo__avatars{ margin-bottom:8px; }
  .page-about-box{ flex-direction:column; align-items:flex-start; }
  .page-about-box__thumbs{ margin-bottom:8px; }
  .tool-detail-facts{ gap:20px; }
  .form-row{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; padding-bottom:32px; }
  .footer__bottom{ flex-direction:column; gap:14px; padding-bottom:28px; }
}

/* =========================================================
   Motion — scroll reveal, hero load-in, micro-interactions
   ========================================================= */
@media (prefers-reduced-motion: no-preference){

  /* Hero load-in */
  .badge, .hero__title, .hero__sub, .search, .marquee-label, .marquee{
    opacity:0;
    animation:heroUp .6s var(--ease) forwards;
  }
  .badge{ animation-delay:.02s; }
  .hero__title{ animation-delay:.10s; }
  .hero__sub{ animation-delay:.18s; }
  .search{ animation-delay:.26s; }
  .marquee-label{ animation-delay:.32s; }
  .marquee{ animation-delay:.38s; }

  @keyframes heroUp{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Scroll-reveal groups: direct children fade/slide up with stagger */
  .cat-grid > *, .podium > *, .tool-grid > *, .steps > *,
  .faq-list > *, .simple-grid > *, .testimonial-grid > *, .blog-grid > *, .vision-grid > *, .post-grid > *, .founder-list > *, .related-founders > *{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .cat-grid.is-visible > *, .podium.is-visible > *, .tool-grid.is-visible > *, .steps.is-visible > *,
  .faq-list.is-visible > *, .simple-grid.is-visible > *, .testimonial-grid.is-visible > *, .blog-grid.is-visible > *, .vision-grid.is-visible > *, .post-grid.is-visible > *, .founder-list.is-visible > *, .related-founders.is-visible > *{
    opacity:1;
    transform:translateY(0);
  }
  .cat-grid > *:nth-child(1), .podium > *:nth-child(1), .tool-grid > *:nth-child(1), .steps > *:nth-child(1),
  .faq-list > *:nth-child(1), .simple-grid > *:nth-child(1), .testimonial-grid > *:nth-child(1), .blog-grid > *:nth-child(1), .vision-grid > *:nth-child(1), .post-grid > *:nth-child(1), .founder-list > *:nth-child(1), .related-founders > *:nth-child(1){ transition-delay:.02s; }
  .cat-grid > *:nth-child(2), .podium > *:nth-child(2), .tool-grid > *:nth-child(2), .steps > *:nth-child(2),
  .faq-list > *:nth-child(2), .simple-grid > *:nth-child(2), .testimonial-grid > *:nth-child(2), .blog-grid > *:nth-child(2), .vision-grid > *:nth-child(2), .post-grid > *:nth-child(2), .founder-list > *:nth-child(2), .related-founders > *:nth-child(2){ transition-delay:.08s; }
  .cat-grid > *:nth-child(3), .podium > *:nth-child(3), .tool-grid > *:nth-child(3), .steps > *:nth-child(3),
  .faq-list > *:nth-child(3), .simple-grid > *:nth-child(3), .testimonial-grid > *:nth-child(3), .blog-grid > *:nth-child(3), .vision-grid > *:nth-child(3), .post-grid > *:nth-child(3), .founder-list > *:nth-child(3), .related-founders > *:nth-child(3){ transition-delay:.14s; }
  .post-grid > *:nth-child(4), .founder-list > *:nth-child(4){ transition-delay:.20s; }
  .post-grid > *:nth-child(5), .founder-list > *:nth-child(5){ transition-delay:.26s; }
  .post-grid > *:nth-child(6), .founder-list > *:nth-child(6){ transition-delay:.32s; }
  .founder-list > *:nth-child(7){ transition-delay:.38s; }
  .founder-list > *:nth-child(8){ transition-delay:.44s; }
  .cat-grid > *:nth-child(4), .tool-grid > *:nth-child(4),
  .faq-list > *:nth-child(4), .simple-grid > *:nth-child(4){ transition-delay:.20s; }
  .cat-grid > *:nth-child(5), .tool-grid > *:nth-child(5),
  .faq-list > *:nth-child(5), .simple-grid > *:nth-child(5){ transition-delay:.26s; }
  .cat-grid > *:nth-child(6), .tool-grid > *:nth-child(6),
  .faq-list > *:nth-child(6), .simple-grid > *:nth-child(6){ transition-delay:.32s; }
  .cat-grid > *:nth-child(7), .simple-grid > *:nth-child(7){ transition-delay:.38s; }
  .cat-grid > *:nth-child(8), .simple-grid > *:nth-child(8){ transition-delay:.44s; }
  .cat-grid > *:nth-child(9){ transition-delay:.50s; }
  .cat-grid > *:nth-child(10){ transition-delay:.56s; }

  /* Simple fade for section headers */
  .section__head, .faq-layout__intro{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .section__head.is-visible, .faq-layout__intro.is-visible{ opacity:1; transform:translateY(0); }

  /* Micro-interactions */
  .tool-window__mark{ transition:transform .3s var(--ease); }
  .tool-window:hover .tool-window__mark{ transform:scale(1.08); }
  .cat-card__icon svg{ transition:transform .3s var(--ease); }
  .cat-card:hover .cat-card__icon svg{ transform:rotate(-8deg) scale(1.05); }

  @keyframes upvoteBump{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.3) rotate(-6deg); }
    100%{ transform:scale(1); }
  }
  .upvote.is-bumped svg{ animation:upvoteBump .4s var(--ease); }

  /* Submit-flow: orange sweeps 1 -> 2 -> 3 once, then the connecting
     lines fade back to their original dim color */
  @keyframes flowFill{
    0%{ transform:scaleX(0); opacity:1; }
    55%{ transform:scaleX(1); opacity:1; }
    100%{ transform:scaleX(1); opacity:0; }
  }
  @keyframes numPulse{
    0%{ box-shadow:0 0 0 0 rgba(255,71,19,.55); }
    70%{ box-shadow:0 0 0 9px rgba(255,71,19,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,71,19,0); }
  }
  .submit-flow.is-visible .submit-flow__step:nth-child(1) .submit-flow__num{
    animation:numPulse .6s var(--ease) 0s;
  }
  .submit-flow.is-visible .submit-flow__step:nth-child(1)::before{
    animation:flowFill 1s var(--ease) .15s forwards;
  }
  .submit-flow.is-visible .submit-flow__step:nth-child(2) .submit-flow__num{
    animation:numPulse .6s var(--ease) .7s;
  }
  .submit-flow.is-visible .submit-flow__step:nth-child(2)::before{
    animation:flowFill 1s var(--ease) .85s forwards;
  }
  .submit-flow.is-visible .submit-flow__step:nth-child(3) .submit-flow__num{
    animation:numPulse .6s var(--ease) 1.4s;
  }

  /* Same sweep, top-to-bottom instead of left-to-right, for the vertical variant */
  @keyframes flowFillVertical{
    0%{ transform:scaleY(0); opacity:1; }
    55%{ transform:scaleY(1); opacity:1; }
    100%{ transform:scaleY(1); opacity:0; }
  }
  /* Vertical variant gets longer delays than the horizontal homepage version —
     this section sits high enough on the page that it's often already inside
     the viewport on load, so the shared reveal observer fires almost
     instantly. A late start (1s+) gives a viewer time to actually be looking
     at it before the sweep plays, instead of it finishing unseen. */
  .submit-flow--vertical.is-visible .submit-flow__step:nth-child(1) .submit-flow__num{
    animation:numPulse .6s var(--ease) 1s;
  }
  .submit-flow--vertical.is-visible .submit-flow__step:nth-child(1)::before{
    animation:flowFillVertical 1s var(--ease) 1.15s forwards;
  }
  .submit-flow--vertical.is-visible .submit-flow__step:nth-child(2) .submit-flow__num{
    animation:numPulse .6s var(--ease) 1.7s;
  }
  .submit-flow--vertical.is-visible .submit-flow__step:nth-child(2)::before{
    animation:flowFillVertical 1s var(--ease) 1.85s forwards;
  }
  .submit-flow--vertical.is-visible .submit-flow__step:nth-child(3) .submit-flow__num{
    animation:numPulse .6s var(--ease) 2.4s;
  }
}
/* ================= WORDPRESS INTEGRATION ================= */
.nav__links > li,
.nav__mobile > li,
.nav__dropdown-menu > li,
.footer__col > li{display:contents;list-style:none}
.custom-logo-link{display:inline-flex;align-items:center}
.custom-logo{display:block;max-width:180px;height:auto;max-height:48px}
.tool-window__image,.post-card__image,.founder-row__photo,.founder-article-header__photo{display:block;width:100%;height:100%;object-fit:cover}
.founder-article-header__photo{width:96px;height:96px;border-radius:50%;margin:0 auto 24px}
.founder-row__photo{border-radius:inherit}
.aidust-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.aidust-form-error{margin:0 0 28px;padding:16px 18px;border:1px solid #c53b2c;background:#fff3f1;color:#7d2017;font-weight:600}
.aidust-empty{padding:72px 24px;text-align:center;border:1px solid var(--grey-200);background:#fff}
.aidust-empty h2{margin:0 0 10px;font-size:28px}
.aidust-empty p{margin:0;color:var(--grey-600)}
.aidust-button-row{display:flex;gap:12px;flex-wrap:wrap}
.aidust-page-content{max-width:820px;margin:0 auto}
.aidust-page-content>*:first-child{margin-top:0}
.aidust-404{min-height:calc(100vh - 80px);display:flex;align-items:center}
.section__foot{display:flex;justify-content:center;margin-top:40px}
.tool-window__bar>svg{width:16px;height:16px;margin-left:auto}
.recent-row>svg,.faq-contact>svg{width:20px;height:20px;flex:0 0 auto}
.form-success{display:none}
.form-success.is-visible{display:block}
.form-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-submit p{margin:0;color:var(--grey-600);font-size:13px;max-width:420px}
.submit-form input.has-file{border-color:var(--orange)}
.wp-block-image img{height:auto}
.alignwide{max-width:1120px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;top:8px;left:8px;z-index:100000;padding:12px;background:#fff;color:#000}

@media(max-width:720px){
  .aidust-button-row,.form-submit{align-items:stretch;flex-direction:column}
  .aidust-button-row .btn,.form-submit .btn{justify-content:center}
}