/* Industry pages (/websites/<slug>/) and their hub. Loaded only there (lib/industry-page.js).
   The journey and with/without visuals are styled HTML, so their words stay crawlable. */
.industry-prices { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; }
.industry-prices li { font-size:17px; line-height:1.47; }
.industry-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.industry-related ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.industry-related a { display:inline-flex; align-items:center; min-height:44px; font-size:17px; }
.page-body .highlights { margin:0 0 16px; }
.industry-hub { list-style:none; padding:0; }
.industry-hub a.highlight { display:block; height:100%; text-decoration:none; transition:box-shadow .2s; }
.industry-hub a.highlight:hover, .industry-hub a.highlight:focus-visible { box-shadow:inset 0 0 0 1px var(--tile-link); }
.industry-hub a.highlight h3 { color:var(--color-text); }
@media (prefers-reduced-motion: reduce) { .industry-hub a.highlight { transition:none; } }

/* ---------- Journey: search, site, booking ---------- */
.journey { margin:0 0 56px; }
.journey-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:36px; }
.journey-step { position:relative; display:flex; flex-direction:column; }
.journey-step + .journey-step::before {
  content:''; position:absolute; top:-26px; left:50%; width:10px; height:10px; margin-left:-5px;
  border-right:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent); transform:rotate(45deg);
}
.journey-label { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; margin:0 0 12px; }
/* Identity marker instead of a number (owner: no numbered steps). */
.journey-label::before { content:''; flex:none; width:7px; height:18px; background:#F2A93B; transform:skewX(-24.4deg); }
.journey-screen { flex:1; background:var(--color-surface); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:12px; justify-content:center; min-height:150px; }
.journey-screen p { margin:0; }
.journey-searchbar {
  display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid var(--color-border); border-radius:980px;
  padding:10px 16px; font-size:16px; color:var(--color-text);
}
.journey-searchbar svg { width:16px; height:16px; fill:var(--color-text-muted); flex:none; }
.journey-result { display:flex; flex-direction:column; gap:2px; padding:0 4px; }
.journey-url { font-size:13px; color:var(--color-text-muted); }
.journey-title { font-size:16px; color:#1A0DAB; }
.journey-phone { align-items:center; background:#FFFFFF; border:6px solid #1D1D1F; border-radius:26px; max-width:220px; width:100%; margin:0 auto; }
.journey-skeleton { display:block; width:80%; height:10px; border-radius:5px; background:#E8E8ED; }
.journey-skeleton--short { width:55%; }
.journey-cta { background:#F2A93B; color:#000000; font-size:15px; font-weight:600; border-radius:980px; padding:10px 18px; text-align:center; }
.journey-alert p { display:flex; flex-direction:column; gap:4px; background:#FFFFFF; border-left:4px solid #1A7F37; border-radius:12px; padding:14px 16px; box-shadow:0 6px 18px rgba(0, 0, 0, 0.08); }
.journey-alert strong { font-size:16px; color:var(--color-text); }
.journey-alert span { font-size:15px; color:var(--color-text-muted); }
.journey figcaption { margin-top:16px; font-size:14px; color:var(--color-text-muted); text-align:center; }
@media (min-width: 734px) {
  .journey-steps { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; }
  .journey-step + .journey-step::before { top:50%; left:-27px; margin:0; transform:rotate(-45deg); }
}

/* ---------- Without vs with ---------- */
.with-without { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin:48px 0 16px; }
.ww-col { border-radius:18px; padding:28px; }
.ww-col h3 { font-size:21px; margin:0 0 8px; }
.ww-col p { font-size:17px; line-height:1.47; margin:0; }
.ww-without { background:var(--color-surface); }
.ww-without h3, .ww-without p { color:var(--color-text-muted); }
.ww-with { background:var(--color-selected-bg); box-shadow:inset 0 0 0 1px #F2A93B; }
.ww-col h3::before { display:inline-block; width:1.3em; font-weight:700; }
.ww-without h3::before { content:'\2715'; color:#B3261E; }
.ww-with h3::before { content:'\2713'; color:#1A7F37; }
@media (min-width: 734px) { .with-without { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } }