/* Generated growth pages (tools/, industries/): breadcrumbs, the "what one real thread showed" block,
   steps, the AI prompt, job tiles and related links. Built on styles.css tokens. */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span::before { content: "/"; margin-right: 8px; color: var(--faint); }

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.facts li { list-style: none; font: 500 13px/1 var(--mono); color: var(--ink2); padding: 9px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); background: var(--raised); }

/* "What one real thread showed" */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
.source { display: flex; flex-direction: column; gap: 14px; }
.source .from { font: 500 12px/1.4 var(--mono); color: var(--data); text-transform: uppercase; letter-spacing: .08em; }
.source h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.source a.thread-link { font-size: 14px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.stats div { padding: 12px; border-radius: 12px; background: var(--raised2); box-shadow: var(--shadow-sm); }
.stats small { display: block; font: 500 11px/1.2 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.stats b { display: block; margin-top: 6px; font: 600 24px/1 var(--mono); color: var(--data); }

.themes { display: flex; flex-direction: column; gap: 4px; }
.theme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.theme:first-child { border-top: 0; padding-top: 0; }
.theme h4 { margin: 0; font-size: 15.5px; font-weight: 600; }
.theme .n { font: 500 13px/1.4 var(--mono); color: var(--muted); }
.theme .meter { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--raised3); overflow: hidden; }
.theme .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); }
.theme blockquote { grid-column: 1 / -1; margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--line2); font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.theme blockquote cite { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); font-style: normal; color: var(--faint); }

.takeaway { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--data-dim); color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.takeaway b { color: var(--data); font-weight: 600; }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { list-style: none; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 10px; font: 500 13px/1 var(--mono); color: var(--accent); }

/* Prompt */
.prompt { position: relative; }
.prompt pre { margin: 0; padding: 54px 18px 18px; border-radius: 12px; background: #05070D; box-shadow: var(--shadow-sm); font: 400 13.5px/1.65 var(--mono); color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt .copy { position: absolute; top: 10px; right: 10px; }

/* Job tiles on a hub */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jobs { grid-template-columns: 1fr; } }
.job { display: flex; flex-direction: column; gap: 10px; }
.job .eg { margin-top: auto; font: 400 12.5px/1.5 var(--mono); color: var(--faint); }

/* Where to look */
.where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
@media (max-width: 640px) { .where { grid-template-columns: 1fr; } }
.where li { list-style: none; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink2); }
.where li b { font: 500 13.5px/1.5 var(--mono); color: var(--data); }

/* Related links */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .related { grid-template-columns: 1fr; } }
.related a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--raised); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); font-weight: 500; }
.related a small { font: 400 12px/1.4 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.related a:hover { box-shadow: 0 0 0 1px var(--line2) inset; }

.page-head .updated { margin: 0; font: 400 12.5px/1.4 var(--mono); color: var(--faint); }

/* Short answer near the top */
.answer { display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--accent); }
.answer h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.answer p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink2); max-width: 78ch; }

/* The thread in numbers */
.numbers .summary { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--ink2); }
.numbers h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.method { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.method a { color: var(--muted); overflow-wrap: anywhere; }
.dtbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
.dtbl caption { text-align: left; padding: 0 0 10px; font: 500 11.5px/1.4 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.dtbl th, .dtbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.dtbl thead th { font: 500 11px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dtbl tbody th { font-weight: 500; color: var(--ink); }
.dtbl td { color: var(--ink2); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.dtbl.wide { margin: 0; }
.dtbl.wide.cols { min-width: 640px; }
.dtbl.wide td { font-family: inherit; font-size: 14px; white-space: normal; }
.dtbl tr:last-child th, .dtbl tr:last-child td { border-bottom: 0; }

/* Question-headed guide */
.guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 760px) { .guide { grid-template-columns: 1fr; } }
.guide h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.guide p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink2); }

/* The words they used */
.langs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; }
.langs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (max-width: 860px) { .langs.two { grid-template-columns: minmax(0, 1fr); } }
.lang h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.lang .dtbl:last-child { margin-bottom: 0; }

/* Where the conversation happened */
.shapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; }
.shapes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (max-width: 860px) { .shapes.two { grid-template-columns: minmax(0, 1fr); } }
.shape { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shape svg { width: 100%; height: auto; display: block; }
.shape .lbl { font: 500 12px var(--mono); fill: var(--muted); }
.shape .val { font: 600 12px var(--mono); fill: var(--data); }
.shape .bar { fill: var(--accent); }
.shape figcaption { font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.shape figcaption b { color: var(--ink); font-weight: 600; }

/* How to find threads */
.dtbl code { font: 500 13px/1.5 var(--mono); color: var(--data); white-space: normal; overflow-wrap: anywhere; }
.more-h { margin: 32px 0 4px; font-size: 17px; font-weight: 600; }
.more-note { margin: 0 0 12px; font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.more { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 760px) { .more { grid-template-columns: minmax(0, 1fr); } }
.more li { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.more a { color: var(--ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.more a:hover { text-decoration: underline; }
.more .meta { font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.more .why { font-size: 14.5px; line-height: 1.55; color: var(--ink2); }

/* Ad hooks guide */
.hook-group { margin-top: 40px; }
.hook-group:first-of-type { margin-top: 0; }
.hook-group > h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--accent); }
.hook-group > p { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.hooks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .hooks { grid-template-columns: minmax(0, 1fr); } }
.hook { display: flex; flex-direction: column; gap: 10px; }
.hook .line { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hook .for { font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.hook blockquote { margin: 4px 0 0; padding-left: 12px; border-left: 2px solid var(--line2); font-size: 14px; line-height: 1.55; color: var(--ink2); }
.hook blockquote cite { display: block; margin-top: 6px; font: 400 12px/1.5 var(--mono); font-style: normal; color: var(--faint); }
.hook blockquote cite a { color: var(--muted); overflow-wrap: anywhere; }
.more.one { grid-template-columns: minmax(0, 1fr); }