:root {
  --bg: #0b0c0b;
  --panel: #111311;
  --panel-hi: #161916;
  --line: #2a302a;
  --line-soft: #1e241e;
  --text: #edf0e8;
  --muted: #9ca49b;
  --dim: #687168;
  --acid: #c9ff47;
  --orange: #ff8a52;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  /* Clear Netlify badge + home indicator on phones */
  padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 5.5rem));
  color: var(--text);
  background:
    radial-gradient(circle at 87% 8%, rgba(201,255,71,.08), transparent 25rem),
    radial-gradient(circle at 4% 70%, rgba(255,138,82,.045), transparent 22rem),
    radial-gradient(circle at 50% 95%, rgba(167,139,250,.05), transparent 20rem),
    var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  content: "";
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

a { color: inherit; }
.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--mono);
  letter-spacing: .13em;
}
.wordmark { display: inline-flex; gap: 11px; align-items: center; color: var(--text); text-decoration: none; }
.mark { color: var(--acid); font-size: 17px; letter-spacing: -.2em; }
.slash { color: var(--dim); margin: 0 3px; }
.status { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.status-dot { width: 6px; height: 6px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); }

.intro { padding: 104px 0 70px; max-width: 720px; }
.kicker, .tool-topline, .tool-meta, .footer {
  font: 600 11px/1.2 var(--mono);
  letter-spacing: .14em;
}
.kicker { margin: 0 0 21px; color: var(--acid); }
h1 { margin: 0; font-size: clamp(3.4rem, 9vw, 7.5rem); font-weight: 650; letter-spacing: -.085em; line-height: .87; }
h1 em { color: var(--acid); font-style: normal; }
.intro-copy { max-width: 540px; margin: 31px 0 0 5px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }


/* --- Taxon flagship + secondary row (hub hierarchy) --- */
.flagship { margin: 0 0 28px; }
.tool-card-flagship {
  min-height: 0;
  padding: 32px 34px 30px;
  border-color: rgba(201,255,71,.35);
  box-shadow: 0 0 0 1px rgba(201,255,71,.08), 0 24px 60px rgba(0,0,0,.25);
}
.tool-card-flagship .tool-heading { margin-top: 48px; }
.tool-card-flagship h2 { font-size: clamp(3.2rem, 7vw, 6rem); }
.tool-card-flagship .tool-caps { max-width: 640px; }
.tool-card-flagship .actions { margin-top: 22px; gap: 28px; }
.tool-card-flagship .button-primary { padding: 16px 20px; font-size: 13px; }

.also-from { margin: 0 0 56px; }
.also-heading {
  margin: 0 0 14px;
  font: 600 11px/1.2 var(--mono) !important;
  letter-spacing: .14em;
  color: var(--dim);
  line-height: 1.2;
}
.also-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tool-card-secondary {
  min-height: 0;
  padding: 20px 22px 22px;
}
.tool-card-secondary::after { opacity: .18; width: 160px; height: 160px; right: -40px; bottom: -80px; }
.tool-card-secondary .tool-heading { margin-top: 36px; }
.tool-card-secondary h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.tool-card-secondary .tool-glyph { width: 40px; height: 40px; font-size: 12px; }
.tool-card-secondary .tagline { margin-top: 18px; font-size: .98rem; }
.tool-card-secondary .description { margin-top: 12px; font-size: .86rem; max-width: 360px; }
.tool-card-secondary .tool-meta { padding-top: 22px; gap: 16px; }
.tool-card-secondary .actions { margin-top: 14px; gap: 16px; }
.tool-card-secondary .button { padding: 12px 14px; font-size: 11px; }

.intro-copy strong { color: var(--text); font-weight: 600; }

/* Legacy equal grid kept for any non-hub pages that still use it */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 960px) {
  .also-grid { grid-template-columns: 1fr; }
  .tool-card-flagship::after,
  .tool-card-secondary::after { display: none; }
}

@media (max-width: 700px) {
  .tool-card-flagship { padding: 24px 20px; }
  .tool-card-flagship .tool-heading { margin-top: 40px; }
  .tool-card-secondary .tool-heading { margin-top: 28px; }
  .also-from { margin-bottom: 40px; }
}

.tool-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 45%), var(--panel);
  border: 1px solid var(--line);
}
.tool-card::after { position: absolute; right: -55px; bottom: -110px; z-index: 0; width: 240px; height: 240px; border: 1px solid var(--line-soft); border-radius: 50%; content: ""; box-shadow: 0 0 0 26px var(--panel), 0 0 0 27px var(--line-soft), 0 0 0 53px var(--panel), 0 0 0 54px var(--line-soft); opacity: .35; pointer-events: none; }
.tool-card-utmend { background: linear-gradient(145deg, rgba(255,138,82,.045), transparent 45%), var(--panel); }
.tool-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--dim); }
.tool-topline span:first-child { color: var(--acid); }
.tool-card-utmend .tool-topline span:first-child { color: var(--orange); }
.tool-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; margin-top: 74px; }
h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.3rem); font-weight: 600; letter-spacing: -.075em; line-height: .9; }
.tool-glyph { display: grid; width: 48px; height: 48px; place-items: center; color: var(--acid); border: 1px solid var(--acid); font: 600 14px var(--mono); transform: rotate(9deg); }
.tool-card-utmend .tool-glyph { color: var(--orange); border-color: var(--orange); transform: rotate(-9deg); }
.tagline { position: relative; z-index: 1; margin: 29px 0 0; color: var(--muted); font-size: 1.07rem; line-height: 1.28; }
.tagline strong { color: var(--text); font-weight: 500; }
.description { position: relative; z-index: 1; max-width: 430px; margin: 20px 0 0; color: var(--muted); font-size: .91rem; line-height: 1.55; }
.tool-caps {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 12px 0 0;
  padding: 0 0 0 1.1em;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
.tool-caps li { margin: 0 0 .35em; }
.tool-caps li:last-child { margin-bottom: 0; }
.tool-caps strong { color: var(--text); font-weight: 600; }
.tool-caps code {
  font: 500 .82em/1.3 var(--mono, ui-monospace, monospace);
  color: var(--acid);
}

.tool-meta { position: relative; z-index: 1; display: flex; gap: 22px; margin-top: auto; padding-top: 35px; color: var(--dim); }
.price-hint { color: var(--acid); }
.tool-card-utmend .price-hint { color: var(--orange); }
.actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 23px; margin-top: 18px; }
.button { display: inline-flex; align-items: center; gap: 18px; padding: 14px 16px; font: 600 12px var(--mono); letter-spacing: .02em; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: #10120d; background: var(--acid); }
.tool-card-utmend .button-primary { background: var(--orange); }
.button span { font-size: 17px; line-height: 10px; }
.text-link { color: var(--muted); font: 600 11px var(--mono); text-decoration: none; }
.text-link:hover, .text-link:focus-visible { color: var(--text); }
.text-link span { margin-left: 5px; color: var(--acid); font-size: 16px; }
.tool-card-utmend .text-link span { color: var(--orange); }

.tool-card-macrow { background: linear-gradient(145deg, rgba(167,139,250,.05), transparent 45%), var(--panel); }
.tool-card-macrow .tool-topline span:first-child { color: var(--violet); }
.tool-card-macrow .tool-glyph { color: var(--violet); border-color: var(--violet); transform: rotate(6deg); }
.tool-card-macrow .price-hint { color: var(--violet); }
.tool-card-macrow .button-primary { background: var(--violet); color: #120f1a; }
.tool-card-macrow .text-link span { color: var(--cyan); }


.privacy-note { display: flex; align-items: center; gap: 15px; max-width: 720px; margin: 52px 0 80px; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.privacy-note strong { color: var(--text); font-weight: 600; }
.privacy-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: var(--acid); border: 1px solid var(--line); font-size: 22px; }
.footer { display: flex; justify-content: space-between; padding: 18px 0 48px; color: var(--dim); border-top: 1px solid var(--line); }


@media (max-width: 960px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card::after { display: none; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 30px, 560px); }
  .masthead { min-height: 68px; }
  .status { font-size: 9px; }
  .intro { padding: 76px 0 54px; }
  h1 { font-size: clamp(3.6rem, 19vw, 6rem); }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card:not(.tool-card-flagship):not(.tool-card-secondary) { min-height: 465px; }
  .tool-card::after { display: none; }
  .tool-heading { margin-top: 58px; }
  .tool-card-flagship .tool-heading { margin-top: 40px; }
  .tool-card-secondary .tool-heading { margin-top: 28px; }
  .description { color: var(--muted); }
  .privacy-note { margin: 38px 0 60px; }
  .footer { padding-bottom: 88px; }
  body { padding-bottom: max(8.5rem, calc(env(safe-area-inset-bottom, 0px) + 6.5rem)); }
}
/* Hide injected Netlify badge if present (belt + suspenders; also disable in site settings) */
a[href*="netlify.com"][style*="position: fixed"],
a[href*="netlify.com"][style*="position:fixed"],
#netlify-badge,
.netlify-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 420px) {
  .wordmark { font-size: 10px; }
  .status { display: none; }
  .tool-card { padding: 21px; }
  .tool-card:not(.tool-card-flagship):not(.tool-card-secondary) .tool-heading { margin-top: 50px; }
  .actions { gap: 15px; }
  .button { padding: 13px 12px; }
}


/* Subtle site nav (journal / discover) */
.mast-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  margin-right: 22px;
}
.mast-nav a {
  color: var(--dim);
  text-decoration: none;
  font: 600 11px/1 var(--mono);
  letter-spacing: .13em;
}
.mast-nav a:hover, .mast-nav a:focus-visible { color: var(--text); }
.mast-nav a[aria-current="page"] { color: var(--acid); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--text); }
.footer .footer-sep { margin: 0 8px; color: var(--line); }
@media (max-width: 700px) {
  .mast-nav { margin-right: 12px; gap: 12px; }
  .mast-nav a { font-size: 9px; }
}
@media (max-width: 420px) {
  .mast-nav { display: none; }
}