/* OneAppleFall · AI Tools hub — page content styles, scoped to .oaf-hub.
   Uses the theme's own tokens (v2.4.1) so it reads as part of the site. */
.oaf-hub { --hub-wide: min(1180px, calc(100vw - 40px)); color: var(--oaf-text, #1a1a1a); font-family: var(--font-body, 'DM Sans', sans-serif); }
.oaf-hub * { box-sizing: border-box; }
.oaf-hub .oaf-hub__wide { width: var(--hub-wide); margin-left: calc((100% - var(--hub-wide)) / 2); }
.oaf-hub ul { list-style: none; margin: 0; padding: 0; }
.oaf-hub h2, .oaf-hub h3 { font-family: var(--font-display, 'Clash Display', sans-serif); color: var(--oaf-text, #1a1a1a); margin: 0; }

/* ── Intro ───────────────────────────────────────────────────────── */
.oaf-hub__intro { text-align: center; max-width: 760px; margin: -8px auto 40px; }
.oaf-hub__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px;
  background: var(--oaf-mint-2, #eef2ff); color: var(--oaf-primary, #4f46e5); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; }
.oaf-hub__lead { font-size: 19px; line-height: 1.7; color: #4b5563; margin: 0 0 22px; }
.oaf-hub__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oaf-hub__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--oaf-surface, #fff); border: 1px solid var(--oaf-border-med, rgba(26,26,26,.14));
  font-size: 14px; font-weight: 600; color: var(--oaf-text, #1a1a1a); line-height: 1; }
.oaf-hub__chips svg { width: 16px; height: 16px; color: var(--oaf-green, #16a34a); flex: none; }

/* ── Tool cards ──────────────────────────────────────────────────── */
.oaf-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-bottom: 64px; }
.oaf-tool { display: flex; flex-direction: column; background: var(--oaf-surface, #fff); border: 1px solid var(--oaf-border, rgba(26,26,26,.08));
  border-radius: var(--oaf-radius-lg, 20px); overflow: hidden; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -20px rgba(30,27,75,.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) {
  .oaf-tool:hover { transform: translateY(-4px); border-color: rgba(79,70,229,.28);
    box-shadow: 0 2px 4px rgba(26,26,26,.04), 0 24px 48px -22px rgba(79,70,229,.45); }
  .oaf-tool:hover .oaf-tool__media img { transform: scale(1.04); }
}
.oaf-tool__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111827; }
.oaf-tool__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; margin: 0 !important; border-radius: 0 !important; }
.oaf-tool__badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: #1a1a1a; font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.oaf-tool__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--oaf-green, #16a34a); }
.oaf-tool__badge--app i { background: var(--oaf-accent, #f59e0b); }
.oaf-tool__pair { position: absolute; top: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(17,24,39,.72);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.oaf-tool__pair--l { left: 12px; } .oaf-tool__pair--r { right: 12px; }
.oaf-tool__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.oaf-tool__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--oaf-secondary, #7c3aed); }
.oaf-hub h2.oaf-tool__title { font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0 0 10px; }
.oaf-tool__title a { color: inherit !important; text-decoration: none; }
.oaf-tool__desc { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: #4b5563; }
.oaf-tool__points { display: grid; gap: 9px; margin-bottom: 22px !important; }
.oaf-tool__points li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: #374151; }
.oaf-tool__points li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--oaf-mint-2, #eef2ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.oaf-tool__cta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.oaf-hub a.oaf-tool__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--oaf-primary, #4f46e5), var(--oaf-secondary, #7c3aed)); color: #fff !important;
  font-size: 14.5px; font-weight: 600; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.oaf-hub a.oaf-tool__btn:hover { box-shadow: 0 10px 26px -8px rgba(79,70,229,.6); transform: translateY(-1px); }
.oaf-hub a.oaf-tool__more { font-size: 14px; font-weight: 600; color: var(--oaf-text-muted, #6b7280) !important; text-decoration: none; }
.oaf-hub a.oaf-tool__more:hover { color: var(--oaf-primary, #4f46e5) !important; }

/* ── How the tools work ──────────────────────────────────────────── */
.oaf-hub__how { margin-bottom: 64px; padding: 40px 36px; border-radius: var(--oaf-radius-xl, 28px);
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #4f46e5 100%); color: #e0e7ff; }
.oaf-hub__how h2 { color: #fff !important; font-size: 26px; text-align: center; margin: 0 0 28px; }
.oaf-hub__how ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.oaf-hub__how li { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.oaf-hub__how svg { width: 30px; height: 30px; color: #c7d2fe; margin-bottom: 12px; }
.oaf-hub__how h3 { color: #fff !important; font-size: 18px; margin: 0 0 6px; }
.oaf-hub__how p { margin: 0; font-size: 15px; line-height: 1.65; color: #c7d2fe; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.oaf-hub__faq { max-width: 760px; margin: 0 auto 56px; }
.oaf-hub__faq > h2 { font-size: 26px; text-align: center; margin: 0 0 20px; }
.oaf-hub__faq details { border: 1px solid var(--oaf-border-med, rgba(26,26,26,.14)); border-radius: 14px; background: var(--oaf-surface, #fff);
  margin-bottom: 12px; overflow: hidden; }
.oaf-hub__faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative; font-weight: 600; font-size: 16.5px; color: #1a1a1a; }
.oaf-hub__faq summary::-webkit-details-marker { display: none; }
.oaf-hub__faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px;
  font-weight: 400; color: var(--oaf-primary, #4f46e5); transition: transform .2s; }
.oaf-hub__faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.oaf-hub__faq details p { margin: 0; padding: 0 20px 18px; font-size: 15.5px; line-height: 1.7; color: #4b5563; }

/* ── Suggest a tool ──────────────────────────────────────────────── */
.oaf-hub__suggest { max-width: 760px; margin: 0 auto; text-align: center; padding: 34px 26px; border-radius: 22px;
  border: 1px dashed rgba(79,70,229,.35); background: var(--oaf-mint-2, #eef2ff); }
.oaf-hub__suggest h2 { font-size: 22px; margin: 0 0 8px; }
.oaf-hub__suggest p { margin: 0 0 18px; font-size: 16px; color: #4b5563; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1080px) { .oaf-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .oaf-hub__grid, .oaf-hub__how ul { grid-template-columns: 1fr; }
  .oaf-hub__how { padding: 30px 20px; }
  .oaf-hub__lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .oaf-tool, .oaf-tool__media img, .oaf-hub a.oaf-tool__btn { transition: none; } }