/* ══════════════════════════════════════════════════════════════════
   hub-page.css — section index pages: /guides, /use-cases, /vs, /tools

   WHY THESE PAGES EXIST
     The site had 72 pages sitting in /guides (12), /use-cases (37),
     /vs (17) and /free-tools (6) with no index page for any of them.
     The header said "Guides" and went to a single article; it said
     "Free tools" and went to a single tool. There was no way to see
     what else existed, so most of the site was unreachable unless you
     arrived on it from Google.

   WHY IT DOESN'T LOOK LIKE THE ARTICLE PAGES
     An index is scanned, not read. So these use a denser grid, a
     smaller type ramp, and grouping — nothing borrowed from the
     long-form article layout, which is tuned for reading one column
     of prose top to bottom.

   Loaded after marketing-page.css, so it wins where they overlap.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --hub-max:1120px;
  --hub-pad:clamp(20px,4vw,40px);
  --hub-ez:cubic-bezier(.25,1,.35,1);
}

/* ── head ────────────────────────────────────────────────────────
   The section's name, one line, and the honest count. The count is
   the most useful thing in the header: it tells you whether this is
   worth browsing before you scroll. */
.hub-head{
  max-width:var(--hub-max); margin-inline:auto;
  padding:clamp(40px,5vw,64px) var(--hub-pad) 0;
}
.hub-head h1{
  font-family:var(--font-body);
  font-size:clamp(29px,3.6vw,41px); font-weight:700;
  letter-spacing:-.038em; line-height:1.08; color:var(--ink);
}
.hub-head p{
  margin-top:12px; max-width:60ch;
  font-size:16px; font-weight:450; color:var(--ink-mute);
  line-height:1.6; letter-spacing:-.014em;
}
.hub-count{
  display:inline-block; margin-top:16px;
  font-size:12.5px; font-weight:500; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.hub-body{
  max-width:var(--hub-max); margin-inline:auto;
  padding:clamp(28px,3.5vw,40px) var(--hub-pad) clamp(64px,8vw,96px);
}

/* ── group heading ─────────────────────────────────────────────── */
.hub-group{ margin-top:clamp(36px,4vw,52px); }
.hub-group:first-child{ margin-top:0; }
.hub-group > h2{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 var(--s-4);
  padding-bottom:10px; box-shadow:inset 0 -1px 0 var(--line);
}
/* the count tells you the size of the group before you scan it */
.hub-n{
  font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink-faint); opacity:.7; font-variant-numeric:tabular-nums;
}
.hub-n::before{ content:'('; }
.hub-n::after{ content:')'; }

/* ── card grid ─────────────────────────────────────────────────── */
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s-3);
}
.hub-grid.wide{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.hub-card{
  display:flex; flex-direction:column; gap:6px;
  padding:19px 20px; border-radius:var(--r-3);
  background:var(--paper-warm);
  box-shadow:inset 0 0 0 1px var(--line);
  color:inherit; text-decoration:none;
  transition:box-shadow .2s var(--hub-ez), transform .2s var(--hub-ez);
}
.hub-card:hover{
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 10px 24px -18px rgba(11,11,15,.3);
  transform:translateY(-1px);
}
.hub-card h3{
  font-family:var(--font-body);
  font-size:14.5px; font-weight:600; letter-spacing:-.02em; line-height:1.35;
  color:var(--ink); margin:0;
}
.hub-card p{
  font-size:13px; font-weight:450; color:var(--ink-mute);
  line-height:1.5; margin:0;
}

/* ── card top strip ──
   Carries whatever helps you decide before clicking: the guide's
   position in the sequence and how long it takes, or what a tool
   needs from you. Both sit above the title, quiet, in one line. */
.hub-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:2px;
}
.hub-ord{
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.hub-meta{
  font-size:11.5px; font-weight:500; color:var(--ink-faint);
  white-space:nowrap;
}

/* ── compact card (use cases) ──
   37 categories in name-only boxes was a wall you had to read every
   word of. The hook line means you can scan for yours. */
.hub-grid.tight{ grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px; }
.hub-card.compact{ padding:15px 16px; gap:4px; }
.hub-card.compact h3{ font-size:14px; }
.hub-card.compact p{ font-size:12.5px; color:var(--ink-faint); }

/* ── compact row list (comparisons — a long set of near-identical
      items, where cards would be 17 boxes of visual noise) ─────── */
.hub-rows{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-6); }
.hub-row{
  display:flex; align-items:center; gap:var(--s-4);
  padding:14px 2px; box-shadow:inset 0 -1px 0 var(--line);
  color:inherit; text-decoration:none;
  transition:opacity .18s var(--hub-ez);
}
.hub-row:hover{ opacity:.6; }
.hub-row-t{ flex:1; min-width:0; }
.hub-row-t strong{
  display:block; font-size:14px; font-weight:600; letter-spacing:-.018em; color:var(--ink);
}
.hub-row-t span{
  display:block; margin-top:2px;
  font-size:12.5px; font-weight:450; color:var(--ink-mute); line-height:1.45;
}
.hub-row svg{
  flex:none; width:14px; height:14px; color:var(--ink-faint);
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* What the other tool actually is. Seventeen comparisons all sound
   alike until you can see "design tool" next to "template editor" —
   this column is what lets you skip fifteen of them. */
.hub-kind{
  flex:none; padding:3px 9px; border-radius:var(--pill);
  background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--line);
  font-size:11px; font-weight:500; letter-spacing:-.008em; color:var(--ink-mute);
  white-space:nowrap;
}
@media (max-width:560px){ .hub-kind{ display:none; } }

/* ── tool card — free tools get a badge, because "free, no signup"
      is the single reason someone clicks one ────────────────────── */
.hub-card .free-tag{
  align-self:flex-start; margin-top:2px;
  padding:2px 8px; border-radius:var(--pill);
  background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--line);
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ── closing band ──────────────────────────────────────────────── */
.hub-cta{
  margin-top:clamp(48px,5vw,68px);
  padding:clamp(30px,4vw,42px) var(--s-5); border-radius:var(--r-4);
  text-align:center; background:var(--paper-deep);
  box-shadow:inset 0 0 0 1px var(--line);
}
.hub-cta h2{
  font-family:var(--font-body);
  font-size:clamp(20px,2.4vw,26px); font-weight:700;
  letter-spacing:-.032em; color:var(--ink); margin:0;
}
.hub-cta p{
  margin:9px auto 0; max-width:46ch;
  font-size:14.5px; font-weight:450; color:var(--ink-mute); line-height:1.6;
}
.hub-cta-btns{ display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap; margin-top:var(--s-5); }
.hub-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:42px; padding:0 22px; border-radius:var(--pill);
  font-size:14px; font-weight:600; letter-spacing:-.015em;
  text-decoration:none; transition:opacity .18s var(--hub-ez), box-shadow .18s var(--hub-ez);
}
.hub-btn-ink{ background:var(--ink); color:#fff; }
.hub-btn-ink:hover{ opacity:.87; }
.hub-btn-line{ box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); }
.hub-btn-line:hover{ box-shadow:inset 0 0 0 1px var(--ink); }

/* ── crumb ─────────────────────────────────────────────────────── */
.hub-crumb{
  max-width:var(--hub-max); margin-inline:auto;
  padding:var(--s-5) var(--hub-pad) 0;
  font-size:12.5px; font-weight:450; color:var(--ink-faint);
}
.hub-crumb a{ color:var(--ink-faint); text-decoration:none; transition:color .18s var(--hub-ez); }
.hub-crumb a:hover{ color:var(--ink); }
.hub-crumb span{ margin:0 7px; opacity:.6; }

@media (max-width:760px){
  .hub-rows{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; }
}