/* "Food Industry Careers & Students" blog series (scripts/build-careers-blog.js).
   Only these pages load this file. Diagrams are flat HTML/SVG in the site palette. */

.careers-wrap { max-width: 820px; }
.careers-article .article-meta { font-size: 13px; color: #6e6170; margin: -12px 0 26px; }
.careers-article .article__body h2 { font-family: var(--serif); font-size: clamp(21px, 3vw, 25px); color: var(--brand); margin: 34px 0 14px; line-height: 1.3; }
.careers-article .article__body h3 { font-family: var(--serif); font-size: 18.5px; color: var(--brand-dark); margin: 24px 0 8px; }
.careers-article .article__body p.lead-in { margin-bottom: 6px; }
.careers-article .article__body p.series-next { margin-top: 26px; font-size: 15px; }
.careers-article .article__body a { color: var(--brand); font-weight: 600; }
.careers-article .article__body code { font-size: 0.92em; }
.article__body .example { padding: 10px 14px; border-radius: 8px; font-size: 15px; margin: 0 0 10px; }
.article__body .example--bad { background: #f7e5e2; }
.article__body .example--good { background: #e8f3ea; margin-bottom: 20px; }

/* callouts (the content's > blocks) */
.article__body blockquote.callout-note { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: #3a2f38; }
.article__body blockquote.callout-note--tip { border-left-color: #3f6b7a; background: #e6eff1; }
.article__body blockquote.callout-note--warn { border-left-color: var(--red); background: #f7e5e2; }
.article__body blockquote.callout-note--money { border-left-color: #2f7a46; background: #e8f3ea; font-size: 16px; }
.article__body blockquote.callout-note--example { font-family: var(--serif); }

/* tables scroll sideways on phones instead of breaking the layout */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.article-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; line-height: 1.5; }
.article-table th, .article-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article-table thead th { background: var(--cream-deep); color: var(--brand-dark); font-size: 13px; letter-spacing: 0.02em; }
.article-table tbody tr:last-child > * { border-bottom: 0; }
.article-table tbody th { color: var(--ink); white-space: nowrap; }

/* ---------- Behind the Hairnet box + inline mention ---------- */
.book-cta { display: flex; gap: 22px; align-items: center; margin: 34px 0 22px; padding: 22px 24px; border-radius: 14px; background: var(--brand-dark); color: var(--cream); }
.book-cta__cover { flex: 0 0 130px; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.book-cta__cover:hover { transform: translateY(-3px); }
.book-cta__cover img { display: block; width: 100%; height: auto; }
.book-cta__text { flex: 1; min-width: 0; }
@media (max-width: 560px) { .book-cta { flex-direction: column; align-items: flex-start; } .book-cta__cover { flex-basis: auto; width: 140px; } }
.book-cta p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: rgba(250, 246, 238, 0.92); }
.book-cta .book-cta__title { font-family: var(--serif); font-size: 20px; color: var(--cream); }
.book-cta em { color: var(--gold-light); }
.book-cta__btn { display: inline-block; width: auto; margin-top: 4px; background: var(--gold-light); color: var(--brand-dark); border-color: var(--gold-light); }
.book-cta__btn:hover { background: var(--cream); color: var(--brand-dark); }
.article__body .book-inline { font-size: 14.5px; background: var(--cream-deep); border: 1px dashed var(--brand-mid); border-radius: 8px; padding: 9px 14px; }

/* ---------- series navigation ---------- */
.series-badge { text-transform: none; letter-spacing: 0.01em; }
.series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 8px; }
.series-nav__link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-decoration: none; color: var(--ink); }
.series-nav__link:hover { border-color: var(--brand-mid); box-shadow: var(--shadow); }
.series-nav__link span { font-size: 12px; font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: 0.04em; }
.series-nav__link strong { font-family: var(--serif); font-size: 15px; color: var(--brand); line-height: 1.35; }
.series-nav__link--next { text-align: right; grid-column: 2; }
.series-all { text-align: center; font-size: 14px; margin: 14px 0 6px; }
.series-all a, .series-contact a { color: var(--brand); font-weight: 600; }
.series-contact { text-align: center; font-size: 13.5px; color: #5a4a58; margin: 18px 0 40px; }
@media (max-width: 560px) {
  .series-nav { grid-template-columns: 1fr; }
  .series-nav__link--next { grid-column: 1; text-align: left; }
  .series-nav__spacer { display: none; }
}

/* ---------- category page ---------- */
.careers-hero .breadcrumb { justify-content: center; }
.careers-list { padding: 10px 16px 20px; max-width: 980px; }
.careers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.careers-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow 0.15s, transform 0.15s; }
.careers-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.careers-card__thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; color: var(--white); }
.careers-card__thumb .ic { width: 58px; height: 58px; stroke-width: 1.5; }
.careers-card__thumb::before, .careers-card__thumb::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.careers-card__thumb::before { width: 120px; height: 120px; right: -30px; top: -40px; }
.careers-card__thumb::after { width: 70px; height: 70px; left: 18px; bottom: -28px; }
.careers-card__thumb--1, .careers-card__thumb--5 { background: var(--brand); }
.careers-card__thumb--2, .careers-card__thumb--6 { background: #3f6b7a; }
.careers-card__thumb--3, .careers-card__thumb--7 { background: #5f7a4a; }
.careers-card__thumb--4, .careers-card__thumb--8 { background: #a5562e; }
.careers-card__part { position: absolute; left: 14px; top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0, 0, 0, 0.2); padding: 3px 9px; border-radius: 999px; }
.careers-card__body { display: flex; flex-direction: column; padding: 16px 18px 18px; flex: 1; }
.careers-card__meta { font-size: 12px; font-weight: 700; color: var(--gold-text); margin-bottom: 6px; }
.careers-card__title { font-family: var(--serif); font-size: 18px; color: var(--brand); line-height: 1.3; margin: 0 0 8px; }
.careers-card__excerpt { font-size: 13.5px; line-height: 1.55; color: #5a4a58; margin: 0 0 12px; flex: 1; }
.careers-list .book-cta { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ================= diagrams ================= */
.cd-tone-a { --tone: #7a5c2b; --tone-bg: #f3eadb; }
.cd-tone-b { --tone: #9a6a12; --tone-bg: #fbf1dc; }
.cd-tone-c { --tone: #a5562e; --tone-bg: #f8e8df; }
.cd-tone-d { --tone: #4f6b3c; --tone-bg: #e9f0e2; }
.cd-tone-e { --tone: #3f6b7a; --tone-bg: #e4eef1; }

.cd { margin: 10px 0 30px; padding: 20px 18px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.cd figcaption { margin-top: 14px; font-size: 13px; color: #6e6170; text-align: center; line-height: 1.5; font-style: italic; }
.cd .ic { width: 22px; height: 22px; flex: none; }
.cd strong { color: var(--ink); }
.cd ul, .cd ol { list-style: none; margin: 0; padding: 0; }
.cd li { margin: 0; padding: 0; background: none; border-radius: 0; font-size: inherit; line-height: inherit; }
.cd li::before { content: none !important; }
.cd-chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--cream-deep); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--brand-dark); line-height: 1.3; }

/* arrows: right on wide screens, down when a flow stacks */
.cd-arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--brand-mid); }
.cd-arrow::before { content: '→'; font-size: 18px; font-weight: 700; line-height: 1; }
.cd-arrow--down::before { content: '↓'; }

/* Post 1: plant as a city */
.cd-city__walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 3px solid var(--brand-mid); border-radius: 16px; background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 10px, var(--cream-deep) 10px, var(--cream-deep) 20px); }
.cd-city__tile, .cd-city__hub { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; background: var(--tone-bg); border: 1px solid rgba(0, 0, 0, 0.06); }
.cd-city__tile .ic { color: var(--tone); width: 26px; height: 26px; }
.cd-city__tile strong { font-size: 14px; line-height: 1.25; }
.cd-city__tile span:last-child, .cd-city__hub span, .cd-city__gov div span { font-size: 12px; color: #5a4a58; line-height: 1.35; }
.cd-city__num { position: absolute; top: 6px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--tone, var(--brand)); color: var(--white); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cd-city__hub { justify-content: center; background: var(--brand); color: var(--cream); }
.cd-city__hub .ic { width: 34px; height: 34px; color: var(--gold-light); }
.cd-city__hub strong { color: var(--cream); font-family: var(--serif); font-size: 17px; }
.cd-city__hub span { color: var(--gold-light) !important; }
.cd-city__gate { display: flex; justify-content: center; margin: -3px 0 0; }
.cd-city__gate span { background: var(--white); border: 3px solid var(--brand-mid); border-top: 0; border-radius: 0 0 10px 10px; padding: 2px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.cd-city__gov { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px auto 0; max-width: 460px; padding: 12px 14px 12px 38px; border-radius: 12px; background: var(--tone-bg); border: 1px dashed var(--tone); }
.cd-city__gov .cd-city__num { top: 50%; transform: translateY(-50%); left: 10px; }
.cd-city__gov .ic { color: var(--tone); width: 28px; height: 28px; }
.cd-city__gov div { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 480px) {
  .cd-city__walls { gap: 6px; padding: 8px; }
  .cd-city__tile, .cd-city__hub { padding: 22px 4px 8px; }
  .cd-city__tile strong { font-size: 12.5px; }
  .cd-city__tile span:last-child { font-size: 10.5px; }
  .cd-city__hub strong { font-size: 14px; }
}

/* Post 1: education → role */
.cd-edu { display: flex; flex-direction: column; gap: 10px; }
.cd-edu__row { display: grid; grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr); align-items: center; gap: 10px; }
.cd-edu__level { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; color: var(--white); }
.cd-edu__level strong { color: var(--white); font-size: 14px; line-height: 1.3; }
.cd-edu__level span { font-size: 12px; opacity: 0.9; line-height: 1.35; }
.cd-edu__row--1 .cd-edu__level { background: #b98b3e; }
.cd-edu__row--2 .cd-edu__level { background: #a07432; }
.cd-edu__row--3 .cd-edu__level { background: #8a6630; }
.cd-edu__row--4 .cd-edu__level { background: #7a5c2b; }
.cd-edu__row--5 .cd-edu__level { background: #5e4520; }
.cd-edu__roles { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) {
  .cd-edu__row { grid-template-columns: 1fr; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
  .cd-edu__row:last-child { border-bottom: 0; }
  .cd-edu__row .cd-arrow { display: none; }
}

/* Post 2: university vs college */
.cd-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.cd-vs__col { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--tone-bg); }
.cd-vs__head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--tone); }
.cd-vs__head strong { color: var(--white); font-family: var(--serif); font-size: 18px; }
.cd-vs__head .ic { color: var(--white); }
.cd-vs__cell { padding: 10px 14px; font-size: 14px; line-height: 1.45; border-top: 1px solid rgba(0, 0, 0, 0.06); color: #3a2f38; }
.cd-vs__cell:first-of-type { border-top: 0; }
.cd-vs__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tone); margin-bottom: 2px; }
.cd-vs__or { align-self: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--cream); font-family: var(--serif); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cd-vs__both { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--brand-mid); font-size: 14px; color: #3a2f38; text-align: left; }
.cd-vs__both .ic { color: var(--brand); }
@media (max-width: 520px) {
  .cd-vs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cd-vs__or { display: none; }
  .cd-vs__cell { padding: 8px 10px; font-size: 12.5px; }
  .cd-vs__head strong { font-size: 15px; }
}

/* Post 2: student roadmap (and shared horizontal-flow pattern) */
.cd-road, .cd-flow { display: flex; align-items: stretch; gap: 6px; }
.cd-road > .cd-arrow, .cd-flow > .cd-arrow { align-self: center; }
.cd-road__step, .cd-flow__box { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 16px 10px 14px; border-radius: 12px; background: var(--tone-bg); border-top: 4px solid var(--tone); }
.cd-road__step .ic, .cd-flow__box .ic { color: var(--tone); width: 28px; height: 28px; }
.cd-road__step strong, .cd-flow__box strong { font-size: 15px; }
.cd-road__step > span:last-child, .cd-flow__box span { font-size: 12.5px; color: #5a4a58; line-height: 1.4; }
.cd-road__n { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--tone); color: var(--white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cd-road { padding-top: 12px; }
@media (max-width: 600px) {
  .cd-road, .cd-flow { flex-direction: column; align-items: stretch; gap: 4px; }
  .cd-road > .cd-arrow::before, .cd-flow > .cd-arrow::before { content: '↓'; }
  .cd-road__step { flex-direction: row; text-align: left; flex-wrap: wrap; padding: 12px 14px 12px 46px; border-top: 0; border-left: 4px solid var(--tone); }
  .cd-road__step > span:last-child { flex-basis: 100%; }
  .cd-road__n { top: 50%; left: 12px; transform: translateY(-50%); }
  .cd-road { padding-top: 0; }
  .cd-flow__box { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; border-top: 0; border-left: 4px solid var(--tone); padding: 12px 14px; }
  .cd-flow__box span { flex-basis: 100%; }
}

/* Post 3: career paths */
.cd-paths__root { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--brand); color: var(--cream); font-weight: 700; font-size: 14px; }
.cd-paths__root .ic { color: var(--gold-light); width: 18px; height: 18px; }
.cd-paths__rows { position: relative; margin: 0 0 0 22px; padding: 8px 0 0 0; border-left: 3px solid var(--brand-mid); }
.cd-paths__row { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px 0 2px 22px; }
.cd-paths__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 2px; }
.cd-paths__start { justify-self: start; }
.cd-paths__row::before { content: ''; position: absolute; left: 0; top: 26px; width: 16px; border-top: 3px solid var(--brand-mid); }
.cd-paths__row:last-child::after { content: ''; position: absolute; left: -3px; top: 29px; bottom: -2px; width: 3px; background: var(--white); }
.cd-paths__start { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--tone); color: var(--white); font-size: 13.5px; font-weight: 700; }
.cd-paths__start .ic { width: 16px; height: 16px; }
.cd-paths .cd-arrow { width: 16px; }
.cd-paths .cd-arrow::before { font-size: 15px; }
.cd-paths__note { grid-column: 2; font-size: 12.5px; color: var(--gold-text); font-weight: 600; padding-left: 4px; }
@media (max-width: 480px) {
  .cd-paths__rows { margin-left: 10px; }
  .cd-paths__row { padding-left: 16px; grid-template-columns: 1fr; gap: 6px; }
  .cd-paths__note { grid-column: 1; }
  .cd-paths__row::before { width: 11px; }
  .cd-chip { font-size: 12px; padding: 4px 8px; }
}

/* Post 3: first 90 days */
.cd-90__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.cd-90__phase { position: relative; padding: 36px 14px 14px; background: var(--tone-bg); border-top: 6px solid var(--tone); }
.cd-90__phase:first-child { border-radius: 12px 0 0 12px; }
.cd-90__phase:last-child { border-radius: 0 12px 12px 0; }
.cd-90__days { position: absolute; top: 10px; left: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tone); }
.cd-90__phase strong { display: block; font-family: var(--serif); font-size: 18px; color: var(--tone); margin-bottom: 6px; }
.cd-90__item { font-size: 13.5px; color: #3a2f38; line-height: 1.45; margin-bottom: 4px; padding-left: 14px; position: relative; }
.cd-90__item::after { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.cd-90__always { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 14px; border-radius: 12px; background: var(--brand); color: var(--cream); font-size: 14px; }
.cd-90__always strong { color: var(--gold-light); }
.cd-90__always .ic { color: var(--gold-light); }
@media (max-width: 560px) {
  .cd-90__phases { grid-template-columns: 1fr; gap: 6px; }
  .cd-90__phase, .cd-90__phase:first-child, .cd-90__phase:last-child { border-radius: 0 12px 12px 0; border-top: 0; border-left: 6px solid var(--tone); padding-top: 30px; }
}

/* Post 4: Venn */
.cd-venn { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; font-family: var(--sans); }
.cd-venn__c { stroke-width: 2; }
.cd-venn__c--qc { fill: rgba(154, 106, 18, 0.16); stroke: #9a6a12; }
.cd-venn__c--qa { fill: rgba(63, 107, 122, 0.16); stroke: #3f6b7a; }
.cd-venn__c--fs { fill: rgba(165, 86, 46, 0.14); stroke: #a5562e; }
.cd-venn text { text-anchor: middle; }
.cd-venn__t { font-family: var(--serif); font-size: 21px; font-weight: 700; fill: var(--ink); }
.cd-venn__s { font-size: 14px; fill: #4a3e48; }
.cd-venn__m { font-size: 13px; font-weight: 700; fill: var(--brand-dark); }
.cd-venn__core { fill: var(--brand); }
.cd-venn__k { font-size: 12px; font-weight: 700; fill: var(--cream); }

/* Post 4: how they work together */
.cd-flow__loop { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border: 2px dashed var(--brand-mid); border-radius: 12px; font-size: 14px; color: #3a2f38; }
.cd-flow__loopicon { font-size: 26px; line-height: 1; color: var(--brand); font-weight: 700; }

/* Post 4: hazards */
.cd-haz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cd-haz__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px; border-radius: 12px; background: var(--tone-bg); }
.cd-haz__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--tone); color: var(--white); display: flex; align-items: center; justify-content: center; }
.cd-haz__icon .ic { width: 30px; height: 30px; }
.cd-haz__card strong { font-size: 15.5px; color: var(--tone); }
.cd-haz__card > span:last-child { font-size: 13px; color: #3a2f38; line-height: 1.45; }
@media (max-width: 480px) {
  .cd-haz { grid-template-columns: 1fr; }
  .cd-haz__card { flex-direction: row; text-align: left; flex-wrap: wrap; column-gap: 12px; }
  .cd-haz__icon { width: 44px; height: 44px; }
  .cd-haz__card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; row-gap: 2px; align-items: center; }
  .cd-haz__icon { grid-row: 1 / 3; }
  .cd-haz__card > strong, .cd-haz__card > span:last-child { grid-column: 2; }
}

/* Post 5: certification staircase */
.cd-stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.cd-stairs__step { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 12px 12px 0 0; background: var(--tone-bg); border-top: 5px solid var(--tone); }
.cd-stairs__step--1 { min-height: 190px; }
.cd-stairs__step--2 { min-height: 250px; }
.cd-stairs__step--3 { min-height: 310px; }
.cd-stairs__lvl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone); }
.cd-stairs__step > strong { font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.cd-stairs__certs { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-stairs__certs .cd-chip { background: var(--white); font-size: 12px; }
.cd-stairs__who { margin-top: auto; font-size: 12px; color: #5a4a58; line-height: 1.4; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, 0.12); }
.cd-stairs::after { content: ''; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--brand); margin-top: -8px; }
@media (max-width: 560px) {
  .cd-stairs { grid-template-columns: 1fr; gap: 6px; }
  .cd-stairs::after { display: none; }
  .cd-stairs__step { min-height: 0 !important; border-radius: 0 12px 12px 0; border-top: 0; border-left: 5px solid var(--tone); }
  .cd-stairs__step--2 { margin-left: 18px; }
  .cd-stairs__step--3 { margin-left: 36px; }
  .cd-stairs { display: flex; flex-direction: column-reverse; }
}

/* Post 6: 8-step roadmap (snake on wide screens, timeline on phones) */
.cd-eight { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; position: relative; padding: 4px 0; }
.cd-eight__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 12px 12px; border-radius: 12px; background: var(--tone-bg); border: 1px solid rgba(0, 0, 0, 0.05); }
.cd-eight__step .ic { color: var(--tone); width: 24px; height: 24px; }
.cd-eight__step div { display: flex; flex-direction: column; gap: 3px; }
.cd-eight__step strong { font-size: 14px; line-height: 1.3; }
.cd-eight__step div span { font-size: 12.5px; color: #5a4a58; line-height: 1.4; }
.cd-eight__n { position: absolute; top: -12px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--tone); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); }
/* row 2 runs right-to-left so the path snakes */
.cd-eight__step:nth-child(5) { grid-row: 2; grid-column: 4; }
.cd-eight__step:nth-child(6) { grid-row: 2; grid-column: 3; }
.cd-eight__step:nth-child(7) { grid-row: 2; grid-column: 2; }
.cd-eight__step:nth-child(8) { grid-row: 2; grid-column: 1; }
.cd-eight__step:nth-child(-n+3)::after { content: '→'; position: absolute; right: -13px; top: 50%; transform: translate(50%, -50%); color: var(--brand-mid); font-weight: 700; font-size: 20px; line-height: 1; }
.cd-eight__step:nth-child(4)::after { content: '↓'; position: absolute; bottom: -15px; left: 50%; transform: translate(-50%, 50%); color: var(--brand-mid); font-weight: 700; font-size: 20px; line-height: 1; }
.cd-eight__step:nth-child(n+5):nth-child(-n+7)::after { content: '←'; position: absolute; left: -13px; top: 50%; transform: translate(-50%, -50%); color: var(--brand-mid); font-weight: 700; font-size: 20px; line-height: 1; }
.cd-eight__goal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 999px; background: var(--brand); color: var(--cream); font-weight: 700; font-size: 14px; }
.cd-eight__goal .ic { color: var(--gold-light); }
@media (max-width: 640px) {
  .cd-eight { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; border-left: 3px solid var(--brand-mid); margin-left: 12px; }
  .cd-eight__step { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .cd-eight__step::after { content: none !important; }
  .cd-eight__n { top: 50%; right: auto; left: -34px; transform: translateY(-50%); }
  .cd-eight__goal { margin-left: 12px; }
}

/* Post 7: HACCP principles */
.cd-haccp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 8px 14px; counter-reset: none; }
.cd-haccp__step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--cream-deep); border-left: 4px solid var(--brand); }
.cd-haccp__step:nth-child(n+5) { border-left-color: #3f6b7a; }
.cd-haccp__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--cream); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cd-haccp__step:nth-child(n+5) .cd-haccp__n { background: #3f6b7a; }
.cd-haccp__step div { display: flex; flex-direction: column; gap: 2px; }
.cd-haccp__step strong { font-size: 14px; line-height: 1.3; }
.cd-haccp__step div span { font-size: 12.5px; color: #5a4a58; font-style: italic; }
@media (max-width: 560px) {
  .cd-haccp { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}

/* Post 7: metal detector decision flowchart */
.cd-metal { display: flex; flex-direction: column; align-items: center; }
.cd-metal__start { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--brand); color: var(--cream); font-weight: 700; font-size: 14px; }
.cd-metal__start .ic { color: var(--gold-light); width: 18px; height: 18px; }
.cd-metal > .cd-arrow { margin: 4px 0; }
.cd-metal__q { width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; text-align: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--gold-light); padding: 40px; font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--brand-dark); }
.cd-metal__branches { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; width: 100%; margin-top: 8px; }
.cd-metal__yes, .cd-metal__no { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cd-metal__ans { align-self: center; padding: 3px 14px; border-radius: 999px; color: var(--white); font-weight: 700; font-size: 13px; }
.cd-metal__ans--yes { background: #2f7a46; }
.cd-metal__ans--no { background: var(--red); }
.cd-metal__ok { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: #e8f3ea; font-size: 14px; font-weight: 600; color: #22502f; }
.cd-metal__ok .ic { color: #2f7a46; }
.cd-metal__steps { display: flex; flex-direction: column; gap: 0; }
.cd-metal__item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 18px; border-radius: 10px; background: #f7e5e2; border-left: 4px solid var(--red); }
.cd-metal__item:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: var(--red); font-weight: 700; font-size: 14px; line-height: 18px; }
.cd-metal__item:last-child { margin-bottom: 0; }
.cd-metal__item.is-key { background: var(--red); }
.cd-metal__item.is-key strong, .cd-metal__item.is-key span, .cd-metal__item.is-key .ic { color: var(--white) !important; }
.cd-metal__steps .ic { color: var(--red); width: 20px; height: 20px; }
.cd-metal__txt { display: flex; flex-direction: column; }
.cd-metal__steps strong { font-size: 14px; }
.cd-metal__steps span { font-size: 12.5px; color: #5a4a58; }
@media (max-width: 560px) {
  .cd-metal__branches { grid-template-columns: 1fr; }
  .cd-metal__q { width: 180px; height: 180px; padding: 34px; font-size: 13px; }
}

/* Post 7: STAR */
.cd-star { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cd-star__card { display: flex; flex-direction: column; gap: 5px; padding: 14px 12px; border-radius: 12px; background: var(--tone-bg); border-top: 4px solid var(--tone); }
.cd-star__l { width: 44px; height: 44px; border-radius: 10px; background: var(--tone); color: var(--white); font-family: var(--serif); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cd-star__card strong { font-size: 15px; color: var(--tone); }
.cd-star__card > span:not(.cd-star__l) { font-size: 13px; color: #3a2f38; line-height: 1.45; }
.cd-star__eg { margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, 0.15); font-size: 12px; color: #5a4a58; line-height: 1.4; }
@media (max-width: 680px) { .cd-star { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .cd-star { grid-template-columns: 1fr; } }

/* Post 8: pay ladder */
.cd-ladder { position: relative; }
.cd-ladder__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; }
.cd-ladder__step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 8px 10px; border-radius: 10px 10px 0 0; color: var(--white); }
.cd-ladder__step strong { color: var(--white); font-size: 13px; line-height: 1.3; }
.cd-ladder__step--1 { min-height: 150px; background: #c9a35a; }
.cd-ladder__step--2 { min-height: 190px; background: #b48a45; }
.cd-ladder__step--3 { min-height: 230px; background: #9a7136; }
.cd-ladder__step--4 { min-height: 270px; background: #7a5c2b; }
.cd-ladder__step--5 { min-height: 310px; background: #5e4520; }
.cd-ladder__n { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cd-ladder__pay { align-self: flex-start; padding: 4px 8px; border-radius: 6px; background: var(--white); color: var(--brand-dark); font-size: 12px; font-weight: 700; }
.cd-ladder__kind { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.cd-ladder__arrow { position: relative; margin-top: 10px; height: 34px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #e7c987, #6b4f26); clip-path: polygon(0 30%, 94% 30%, 94% 0, 100% 50%, 94% 100%, 94% 70%, 0 70%); }
.cd-ladder__arrow span { position: absolute; top: -22px; right: 8%; font-size: 12px; font-weight: 700; color: var(--brand-dark); }
.cd-ladder { padding-bottom: 4px; }
.cd-ladder__arrow { margin-top: 30px; }
@media (max-width: 600px) {
  .cd-ladder { display: grid; grid-template-columns: 1fr 34px; gap: 10px; }
  .cd-ladder__steps { display: flex; flex-direction: column-reverse; gap: 6px; }
  .cd-ladder__step { min-height: 0 !important; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px 10px 38px; border-radius: 10px; }
  .cd-ladder__step strong { flex-basis: 100%; font-size: 14px; }
  .cd-ladder__n { top: 50%; transform: translateY(-50%); }
  .cd-ladder__kind { margin-top: 0; }
  .cd-ladder__step--1 { margin-right: 40%; } .cd-ladder__step--2 { margin-right: 30%; } .cd-ladder__step--3 { margin-right: 20%; } .cd-ladder__step--4 { margin-right: 10%; }
  .cd-ladder__arrow { margin-top: 0; height: auto; background: linear-gradient(0deg, #e7c987, #6b4f26); clip-path: polygon(30% 6%, 0 6%, 50% 0, 100% 6%, 70% 6%, 70% 100%, 30% 100%); }
  .cd-ladder__arrow span { position: static; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--white); font-size: 11.5px; padding: 30px 0 10px; }
}

/* Post 8: what affects your pay */
.cd-factors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cd-factors__tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 8px; border-radius: 12px; background: var(--tone-bg); }
.cd-factors__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--tone); color: var(--white); display: flex; align-items: center; justify-content: center; }
.cd-factors__icon .ic { width: 26px; height: 26px; }
.cd-factors__tile strong { font-size: 14px; }
.cd-factors__tile > span:last-child { font-size: 12px; color: #5a4a58; line-height: 1.4; }
@media (max-width: 680px) { .cd-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cd-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }