/* ==========================================================================
   Free Tool template styles — ported from the Claude Design system
   (project: "Tahir Shahzad Website (Template)"). Depends on tokens.css.
   Scope: page hero/breadcrumb, Ikigai content sections (what/elements/who),
   FAQ accordion, related articles, CTA band. Header/footer come from the
   theme; the interactive tool is styled by the ts-ikigai-finder plugin.
   ========================================================================== */
.page-hero { background:var(--grad-lavender-fade); border-bottom:1px solid #E9E3FB; padding:44px var(--gutter) 48px; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; right:-90px; top:-90px; width:380px; height:380px; background:radial-gradient(circle,rgba(196,181,253,.28),transparent 70%); border-radius:50%; pointer-events:none; }
.page-hero::after { content:""; position:absolute; left:-60px; bottom:-120px; width:280px; height:280px; background:radial-gradient(circle,rgba(253,164,175,.16),transparent 70%); border-radius:50%; pointer-events:none; }
.hero-inner { max-width:var(--container-max); margin:0 auto; position:relative; z-index:1; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-3); margin-bottom:22px; flex-wrap:wrap; }
.crumbs a { color:var(--fg-3); text-decoration:none; transition:color var(--d-fast); }
.crumbs a:hover { color:var(--ts-plum-600); }
.crumbs .sep svg { width:14px; height:14px; vertical-align:middle; }
.crumbs .current { color:var(--ts-plum-700); font-weight:600; }
.hero-grid { display:grid; grid-template-columns:1fr auto; gap:64px; align-items:center; }
.hero-eyebrow { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ts-plum-600); margin:0 0 12px; }
.hero-title { font-family:var(--font-display); font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:-.025em; line-height:1.08; color:var(--fg-1); margin:0 0 16px; }
.hero-title .accent { color:var(--ts-plum-600); }
.hero-lede { font-size:17px; line-height:1.65; color:var(--fg-2); margin:0 0 24px; max-width:560px; }
.hero-meta { display:flex; gap:22px; flex-wrap:wrap; }
.hero-meta .hm { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--fg-3); }
.hero-meta .hm svg { width:15px; height:15px; color:var(--ts-plum-500); }
.hero-meta .hm strong { color:var(--ts-plum-700); font-weight:700; }
.hero-badges { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.h-badge { background:#fff; border:1px solid var(--border-2); border-radius:var(--r-card); padding:14px 20px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-sm); min-width:200px; }
.h-badge-ic { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.h-badge-ic.purple { background:var(--ts-plum-100); color:var(--ts-plum-600); }
.h-badge-ic.coral { background:var(--ts-coral-50); color:var(--ts-coral-500); }
.h-badge-ic svg { width:18px; height:18px; stroke-width:2; }
.h-badge-text .val { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--fg-1); line-height:1; }
.h-badge-text .lbl { font-size:12px; color:var(--fg-3); margin-top:2px; }
.what-section { padding:72px var(--gutter); background:#fff; }
.what-inner { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.what-copy .ts-eyebrow { display:inline-block; margin-bottom:14px; }
.what-copy h2 { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; color:var(--fg-1); letter-spacing:-.015em; margin:0 0 16px; line-height:1.15; }
.what-copy p { font-size:15px; line-height:1.7; color:var(--fg-2); margin:0 0 14px; }
.what-copy p:last-child { margin-bottom:0; }
.what-venn { display:flex; flex-direction:column; align-items:center; gap:18px; }
.venn-diagram { position:relative; width:220px; height:220px; }
/* Animated breathing Venn — mirrors the Ikigai tool's intro venn (pure CSS,
   overlapping circles with multiply blending + a staggered breathe loop). */
.vd-venn { position:absolute; top:0; left:0; width:200px; height:200px; }
.vd-c { position:absolute; width:136px; height:136px; border-radius:50%; mix-blend-mode:multiply; opacity:.78; animation:vd-breathe 4s ease-in-out infinite; }
.vd-c.love  { background:#fbcfe8; top:0px; left:45px; animation-delay:0s; }
.vd-c.good  { background:#fef08a; top:45px; left:0px; animation-delay:.4s; }
.vd-c.world { background:#bfdbfe; top:45px; left:90px; animation-delay:.8s; }
.vd-c.paid  { background:#a7f3d0; top:90px; left:45px; animation-delay:1.2s; }
@keyframes vd-breathe { 0%,100% { transform:scale(1); opacity:.74; } 50% { transform:scale(1.06); opacity:.92; } }
@media (prefers-reduced-motion: reduce) { .vd-c { animation:none; } }
.vd-label { position:absolute; width: 100px; font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1.25; }
.vd-label.love { bottom: 100%; left:50%; margin-left:-50px; color:#8C281A; }
.vd-label.good { top:50%; margin-top:-12px; right:100%; color:#93830e; }
.vd-label.world { left:100%; top:50%; margin-top:-12px; color:#1a7ffc; }
.vd-label.paid { top:100%; left:50%; margin-left: -50px; color:#14d97e; }
.venn-legend { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.venn-legend.vl-stack { grid-template-columns:1fr; }
.vl-title { font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2); width:100%; margin:22px 0 0; }
.vl-item { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--fg-2); }
.vl-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.elements-section { padding:72px var(--gutter); background:var(--ts-plum-50); border-top:1px solid #E9E3FB; border-bottom:1px solid #E9E3FB; }
.section-head { text-align:center; max-width:600px; margin:0 auto 52px; }
.section-head .ts-eyebrow { display:inline-block; margin-bottom:14px; }
.section-head h2 { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:-.015em; color:var(--fg-1); margin:0 0 12px; }
.section-head p { font-size:16px; line-height:1.55; color:var(--fg-2); margin:0; }
.elements-grid { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.el-card { background:#fff; border:1px solid var(--border-1); border-radius:var(--r-card); padding:24px; }
.el-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.el-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.el-num { font-family:var(--font-mono); font-size:11px; color:var(--fg-4); }
.el-card h3 { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--fg-1); margin:0 0 8px; }
.el-card p { font-size:13px; line-height:1.6; color:var(--fg-2); margin:0 0 12px; }
.el-intersects { display:flex; flex-direction:column; gap:5px; }
.el-int { font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; width:fit-content; }
.el-int svg { width:11px; height:11px; }
.for-section { padding:72px var(--gutter); background:#fff; }
.for-grid { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.for-card { background:var(--ts-ink-50); border:1px solid var(--border-1); border-radius:var(--r-card); padding:26px; }
.for-ic { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.for-ic svg { width:22px; height:22px; stroke-width:2; }
.for-ic.purple { background:var(--ts-plum-100); color:var(--ts-plum-600); }
.for-ic.coral { background:var(--ts-coral-50); color:var(--ts-coral-500); }
.for-ic.teal { background:#CCFBF1; color:#0F766E; }
.for-card h3 { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--fg-1); margin:0 0 8px; }
.for-card p { font-size:13.5px; line-height:1.6; color:var(--fg-2); margin:0; }
/* FAQ accordion styles moved to the ts-category-extend plugin
   (assets/css/faq-accordion.css), enqueued wherever render_accordion() runs, so
   they are no longer duplicated here. */
.related-section { padding:72px var(--gutter); background:#fff; }
.related-grid { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rel-card { border:1px solid var(--border-1); border-radius:var(--r-card); overflow:hidden; background:#fff; cursor:pointer; transition:box-shadow var(--d-base),transform var(--d-base),border-color var(--d-base); }
.rel-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-2px); border-color:var(--ts-plum-200); }
.rel-thumb { height:140px; position:relative; overflow:hidden; }
.rel-thumb.t1 { background:linear-gradient(135deg,#2A1E30 0%,#6D4F72 100%); }
.rel-thumb.t2 { background:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%); }
.rel-thumb.t3 { background:linear-gradient(135deg,#FBBF24 0%,#F0553F 100%); }
.rel-pill { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--ts-plum-700); font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.rel-body { padding:16px 18px 18px; }
.rel-body h3 { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--fg-1); line-height:1.35; margin:0 0 8px; letter-spacing:-.01em; }
.rel-body p { font-size:13px; line-height:1.55; color:var(--fg-2); margin:0 0 14px; }
.rel-meta { font-size:12px; color:var(--fg-3); display:flex; align-items:center; gap:12px; padding-top:10px; border-top:1px solid var(--ts-ink-100); }
.rel-meta span { display:inline-flex; align-items:center; gap:5px; }
.rel-meta svg { width:12px; height:12px; }
.rel-meta .arr { margin-left:auto; color:var(--ts-plum-600); }
/* CTA band — now shared: see .fp-cta-* in bootstrap-theme-child/assets/css/front-page.css */

@media (max-width: 900px) {
  .hero-grid, .what-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-badges { flex-direction: row; }
  .elements-grid { grid-template-columns: repeat(2, 1fr); }
  .for-grid, .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hero-badges, .elements-grid { display: none; }
}

/* ── Template scaffolding (not in the original mockup) ───────────────────── */
.ts-free-tool { background: var(--bg-0); }
.ts-free-tool .ts-ft-content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--gutter);
}
.ts-free-tool .ts-ft-content > * { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   PMF Diagnostic — unique content sections (How It Works, The Five Signals).
   Appended for the PMF Free Tool page; shared chrome lives above.
   ========================================================================== */
.how-section { padding: 72px var(--gutter); background:#fff; }
.steps-row { max-width: var(--container-max); margin:0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap:32px; position:relative; }
.steps-row::before { content:""; position:absolute; top:36px; left:calc(16.6% + 20px); right:calc(16.6% + 20px); height:2px; background: repeating-linear-gradient(90deg, var(--ts-plum-200) 0 8px, transparent 8px 16px); }
.step-card { text-align:center; padding: 0 16px; }
.step-num { width:72px; height:72px; border-radius:50%; background: var(--ts-plum-600); color:#fff; font-family:var(--font-display); font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; position:relative; z-index:1; }
.step-card:nth-child(2) .step-num { background: var(--ts-plum-500); }
.step-card:nth-child(3) .step-num { background: var(--ts-coral-400); box-shadow: var(--shadow-cta); }
.step-card h3 { font-family:var(--font-display); font-size:18px; font-weight:700; color: var(--fg-1); margin:0 0 10px; letter-spacing:-.01em; }
.step-card p { font-size:14px; line-height:1.6; color: var(--fg-2); margin:0; }
.signals-section { padding: 72px var(--gutter); background: var(--ts-plum-50); border-top:1px solid #E9E3FB; border-bottom:1px solid #E9E3FB; }
.signals-inner { max-width: var(--container-max); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.signals-copy h2 { font-family:var(--font-display); font-size: var(--fs-h2); font-weight:700; color: var(--fg-1); letter-spacing:-.015em; margin:0 0 14px; line-height:1.18; }
.signals-copy p { font-size:15px; line-height:1.65; color: var(--fg-2); margin:0 0 24px; }
.signal-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.signal-list li { display:flex; align-items:flex-start; gap:12px; }
.signal-list li .si { width:32px; height:32px; border-radius:8px; background:#fff; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--ts-plum-600); }
.signal-list li .si svg { width:16px; height:16px; }
.signal-list li .st { font-size:14px; color: var(--fg-1); line-height:1.5; }
.signal-list li .st strong { display:block; font-weight:600; margin-bottom:1px; }
.signals-visual { display:flex; flex-direction:column; gap:14px; }
.sig-row { background:#fff; border:1px solid var(--border-2); border-radius: var(--r-card); padding:16px 18px; }
.sig-row-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sig-row-name { font-family:var(--font-display); font-size:13px; font-weight:600; color: var(--fg-1); display:flex; align-items:center; gap:8px; }
.sig-row-name svg { width:14px; height:14px; color: var(--ts-plum-600); }
.sig-pill { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.sig-pill.weak { background: var(--ts-danger-soft); color: #991B1B; }
.sig-pill.ok { background: var(--ts-warning-soft); color: #92400E; }
.sig-pill.strong-p { background: var(--ts-success-soft); color: #065F46; }
.sig-bar-wrap { height:6px; background: var(--ts-ink-100); border-radius:3px; overflow:hidden; }
.sig-bar { height:100%; border-radius:3px; }

@media (max-width: 900px) {
  .steps-row::before { display: none; }
  .steps-row { grid-template-columns: 1fr; gap: 28px; }
  .signals-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   Free Tools hub (page-free-tools.php) — auto-generated grid of every page
   using the Free Tool template. New tool pages need no CSS changes here.
   ========================================================================== */
.ts-tools-hub .tools-section { padding: 8px var(--gutter) 72px; }
.ts-tools-hub .tools-wrap { max-width: var(--container-max); margin: 0 auto; }
.ts-tools-hub .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ts-tools-hub .tool-card { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: var(--r-card); padding: 24px; background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.ts-tools-hub .tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.ts-tools-hub .tool-card-kicker { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-coral-500); }
.ts-tools-hub .tool-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--fg-1); margin: 8px 0; letter-spacing: -.01em; }
.ts-tools-hub .tool-card p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0 0 16px; }
.ts-tools-hub .tool-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.ts-tools-hub .tool-card-more svg { width: 16px; height: 16px; }
.ts-tools-hub .tools-empty { color: var(--fg-3); }

@media (max-width: 900px) {
  .ts-tools-hub .tools-grid { grid-template-columns: 1fr; }
}