/* ==========================================================================
   Industry templates
   Used by: /industries/ (hub) and industry-*.html (one page per industry,
   /industries/real-estate/ is the reference instance).
   Prefix: .ind-  Only tokens from site.css. No raw colour values.
   ========================================================================== */

/* ---------- Hero (shared) ---------- */
.ind-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(20px, 2.4vw, 32px) clamp(56px, 6vw, 96px); }
.ind-hero .gridlines { z-index: -1; }
.ind-hero .breadcrumbs { margin-bottom: clamp(24px, 3.2vw, 44px); }
/* 44px hit area on breadcrumb links without changing the row height */
.ind-hero .breadcrumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.ind-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ind-hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ind-hero__copy h1 { max-width: 15ch; }
.ind-hero__copy .lead { max-width: 54ch; }
.ind-hero__cta { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.ind-hero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
/* Standalone text links get a 44px touch target */
.ind-hero__sub .link-arrow, .ind-case__copy .link-arrow { min-height: 44px; }
/* Row-head link: 44px hit area via padding, so its text still sits on the heading baseline */
.ind-grid-head .link-arrow { padding-block: 10px; margin-block: -10px; }
.ind-form-error { color: var(--danger); font-size: var(--fs-xs); margin-top: -6px; }
.ind-hero__logos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 48px; align-items: center; margin-top: clamp(56px, 6vw, 88px); padding-top: 28px; border-top: 1px solid var(--line); }
.ind-hero__logos .logo-strip { justify-content: space-between; }
.ind-kicker { text-wrap: balance; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* Row heads: keep the heading column narrow enough that the intro sits beside it at desktop */
.ind-head > :first-child { max-width: 640px; }
.ind-head > p { padding-bottom: 6px; }
/* Phones: tighter hero rhythm so the form, trust line and secondary link clear the fixed bottom UI */
@media (max-width: 520px) {
  .ind-hero__copy { gap: 16px; }
  .ind-hero__cta { gap: 12px; margin-top: 4px; }
  .ind-hero .breadcrumbs { margin-bottom: 20px; }
}
@media (max-width: 960px) {
  .ind-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ind-hero__copy h1 { max-width: 18ch; }
  .ind-hero__logos { grid-template-columns: minmax(0, 1fr); }
  .ind-hero__logos .logo-strip { justify-content: flex-start; gap: 14px 32px; }
}

/* ---------- Hero visual: SERP snippet with the client climbing (per industry content) ---------- */
.ind-visual { position: relative; min-width: 0; }
.ind-serp { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.ind-serp__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.ind-serp__q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; }
.ind-serp__q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-serp__q .i { width: 16px; height: 16px; color: var(--text-3); }
.ind-serp__loc { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.ind-serp__list { list-style: none; margin: 0; padding: 0; }
.ind-serp__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 13px 16px; }
.ind-serp__row + .ind-serp__row { border-top: 1px solid var(--line); }
.ind-serp__pos { grid-column: 1; grid-row: 1 / span 2; align-self: start; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); padding-top: 1px; }
.ind-serp__url { grid-column: 2; grid-row: 1; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-serp__title { grid-column: 2; grid-row: 2; font-size: .96rem; font-weight: 500; color: var(--info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-serp__title .nw { white-space: nowrap; }
.ind-serp__tag { grid-column: 3; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.ind-serp__row.is-you { background: var(--brand-tint); }
.ind-serp__row.is-you .ind-serp__pos { color: var(--brand-ink); font-weight: 500; }
.ind-serp__row.is-you .ind-serp__url { color: var(--brand-ink); }
.ind-serp__row.is-you .badge { grid-column: 3; grid-row: 1 / span 2; }
.ind-serp__row.is-you .badge .i { width: 14px; height: 14px; }
.ind-serp__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.ind-serp__move { display: flex; flex-direction: column; gap: 4px; }
.ind-serp__move b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ind-serp__move b em { font-style: normal; color: var(--brand); }
.ind-visual .ind-serp__foot { padding-bottom: 44px; } /* room for the overlapping placement card */
.ind-spark { justify-self: end; width: 100%; max-width: 260px; height: auto; overflow: visible; }
.ind-visual__float .placement__domain, .ind-src .placement__domain { white-space: normal; }
.ind-visual__float .placement__anchor, .ind-src .placement__anchor { align-items: baseline; }
.ind-visual__float .placement__anchor code, .ind-src .placement__anchor code { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.ind-spark__grid { stroke: var(--line); stroke-width: 1; }
.ind-spark__p1 { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ind-spark__line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ind-spark__dot { fill: var(--paper); stroke: var(--brand); stroke-width: 2; }
.ind-spark__end { fill: var(--brand); stroke: var(--paper); stroke-width: 2; }
.ind-spark__txt { font-family: var(--font-mono); font-size: 10px; fill: var(--text-3); }
.ind-visual__float { position: relative; z-index: 1; width: min(380px, 86%); margin: -30px 0 0 -40px; }
@media (max-width: 1100px) {
  .ind-visual__float { margin-left: -16px; }
  .ind-serp__title { white-space: normal; line-height: 1.35; }
}
@media (max-width: 960px) {
  .ind-visual { max-width: 620px; }
  .ind-visual__float { margin: -30px 12px 0 auto; width: min(420px, 92%); }
}
@media (max-width: 520px) {
  .ind-serp__loc, .ind-serp__tag { display: none; }
  .ind-serp__row { padding: 12px 14px; column-gap: 10px; }
  .ind-serp__title { font-size: .92rem; line-height: 1.35; white-space: normal; }
  .ind-serp__url { white-space: normal; overflow-wrap: anywhere; }
  /* Stack the position figure above the sparkline so the chart and its "page 1" label stay legible */
  .ind-serp__foot { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ind-spark { justify-self: stretch; max-width: none; }
  .ind-visual__float { margin: -28px auto 0; width: calc(100% - 24px); }
}

/* ---------- Case study (per industry) ---------- */
.ind-case { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ind-case__copy { display: flex; flex-direction: column; gap: 18px; }
.ind-case + .ledger { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 960px) { .ind-case { grid-template-columns: minmax(0, 1fr); } }

/* Column chart, drawn to scale. Set --max on .ind-axis and --v on each .ind-bar. */
.ind-chart { gap: 20px; }
.ind-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ind-chart__title { font-weight: 600; font-size: 1rem; }
.ind-chart__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ind-axis { --h: 200px; --n: 6; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
.ind-axis__y { position: relative; height: var(--h); font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ind-axis__y span { position: absolute; right: 0; bottom: calc(var(--v) / var(--max) * 100%); transform: translateY(50%); line-height: 1; }
.ind-plot { position: relative; height: var(--h, 200px); display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); column-gap: 10px; border-bottom: 1px solid var(--line-strong); }
.ind-plot--grid { background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% calc(100% / var(--rows, 3)); }
.ind-plot__col { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.ind-bar { position: relative; display: block; width: min(40px, 72%); height: calc(var(--v) / var(--max) * 100%); min-height: 2px; background: var(--line-strong); border-radius: 4px 4px 0 0; }
.ind-bar.is-key { background: var(--brand); }
.ind-bar__val { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-plot__col.is-marker::before { content: ""; position: absolute; left: -5px; top: 18px; bottom: 0; border-left: 1px dashed var(--text-3); }
.ind-plot__flag { position: absolute; top: 0; left: -5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); white-space: nowrap; padding-left: 6px; line-height: 1.2; }
.ind-xrow { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); column-gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.ind-xrow > * { min-width: 0; }
.ind-axis .ind-xrow { grid-column: 2; padding-top: 8px; }
.ind-xrow--data { color: var(--text); font-size: 12px; padding-top: 6px; }
.ind-axis__rowlabel { grid-column: 1; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); align-self: center; padding-top: 6px; }
.ind-chart__note { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Where links come from (per industry) ---------- */
.ind-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; margin-top: clamp(40px, 5vw, 64px); }
/* Subgrid: head, copy and placement card share rows, so sibling cards start and end on the same lines */
.ind-src { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
.ind-src__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ind-range { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ind-range b { color: var(--text); font-weight: 500; }
.ind-src p { font-size: var(--fs-sm); color: var(--text-2); }
.ind-src .placement { box-shadow: var(--shadow-xs); grid-template-rows: auto auto 1fr; }
.ind-src .placement__anchor { align-self: end; }
.ind-src__body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Narrow phones: the Live badge drops under the metrics so the site name keeps the full width */
@media (max-width: 400px) {
  .ind-visual__float, .ind-src .placement { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "fav domain" "fav meta" "fav status" "anchor anchor"; }
  .ind-src .placement { grid-template-rows: auto auto auto 1fr; }
  .ind-visual__float .placement__fav, .ind-src .placement__fav { align-self: start; }
  .ind-visual__float .placement__status, .ind-src .placement__status { justify-self: start; margin-top: 4px; }
}
.ind-ar { font-family: var(--font-arabic); }
code.ind-ar { font-family: var(--font-arabic); font-size: 12.5px; }
.ind-mid-cta { margin-top: clamp(48px, 6vw, 80px); }
/* Two columns from 1100px: at three columns the placement cards crush the site name and metrics */
@media (max-width: 1100px) { .ind-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ind-sources { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- Keyword opportunity table (per industry) ---------- */
.ind-tablebox { margin-top: clamp(32px, 4vw, 48px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ind-kw { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.ind-kw th, .ind-kw td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; background: var(--paper); }
.ind-kw th:first-child { padding-left: 20px; }
.ind-kw th:last-child, .ind-kw td:last-child { padding-right: 20px; }
.ind-kw__meta { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-3); white-space: normal; }
.ind-kw tbody tr:last-child > * { border-bottom: 0; }
.ind-kw thead th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; background: var(--mist); border-bottom-color: var(--line); padding-block: 12px; }
.ind-kw tbody th { font-weight: 600; color: var(--text); }
.ind-kw td { color: var(--text-2); }
.ind-kw .r { text-align: right; }
.ind-kw .num { color: var(--text); }
.ind-kw__kw[lang="ar"] { font-family: var(--font-arabic); font-size: 1rem; }
.ind-kw tbody tr:hover > * { background: var(--mist); }
.ind-kd { display: inline-flex; align-items: center; gap: 10px; }
.ind-kd__n { min-width: 2ch; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.ind-kd__bar { position: relative; width: 56px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ind-kd__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--text-2); border-radius: 4px; }
.ind-scroll-hint { display: none; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ind-scroll-hint .i { width: 14px; height: 14px; }
.ind-footnote { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-3); max-width: 90ch; }
@media (max-width: 1040px) { .ind-scroll-hint { display: flex; } }
/* Small screens: the keyword column stays pinned while the metrics scroll */
@media (max-width: 760px) {
  .ind-kw tbody th, .ind-kw thead th:first-child { position: sticky; left: 0; z-index: 1; white-space: normal; min-width: 172px; max-width: 188px; box-shadow: 1px 0 0 var(--line); }
  .ind-kw thead th:first-child { background: var(--mist); }
  .ind-kw th:first-child { padding-left: 16px; }
}

/* ---------- "What makes this industry different" (ink section, per industry) ---------- */
.ind-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 64px; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ink-3); }
.ind-diff__col { position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 14px; padding-top: 32px; min-width: 0; }
.ind-diff__col + .ind-diff__col::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; border-left: 1px solid var(--ink-3); }
.ind-diff__col h3 { color: var(--text-on-dark); }
.ind-diff__col > p { color: var(--text-on-dark-2); font-size: var(--fs-sm); }
.ind-viz { margin-top: 10px; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-md); }
.ind-viz__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-2); }
.ind-viz .check-list { gap: 10px; }
.ind-viz .check-list li { color: var(--text-on-dark); }
.ind-viz .ind-plot { --h: 132px; border-bottom-color: var(--ink-3); column-gap: 4px; }
.ind-viz__note { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ink-3); font-size: var(--fs-xs); color: var(--text-on-dark-2); }
.ind-viz .ind-bar { width: 100%; background: var(--text-on-dark-2); opacity: .55; border-radius: 3px 3px 0 0; }
.ind-viz .ind-bar.is-key { background: var(--brand-bright); opacity: 1; }
.ind-viz .ind-xrow { column-gap: 4px; color: var(--text-on-dark-2); font-size: 10.5px; }
.ind-viz .ind-xrow span:first-child { text-align: left; }
.ind-viz .ind-xrow span:last-child { text-align: right; }
.ind-viz .ind-plot__col.is-marker::before { display: none; }
.ind-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ind-hbars li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: var(--fs-sm); color: var(--text-on-dark); }
.ind-hbars__track { height: 8px; border-radius: 4px; background: var(--ink-3); overflow: hidden; }
.ind-hbars__fill { display: block; height: 100%; width: calc(var(--v) / var(--max, 100) * 100%); background: var(--text-on-dark-2); border-radius: 4px; }
.ind-hbars__n { text-align: right; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-on-dark); }
.ind-hbars small { display: block; font-size: 11px; color: var(--text-on-dark-2); line-height: 1.2; }
/* Tablets: one row per topic, copy left and its visual right */
@media (max-width: 1100px) {
  .ind-diff { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ind-diff__col { grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 48px; padding: 32px 0 40px; }
  .ind-diff__col > h3 { grid-column: 1; grid-row: 1; }
  .ind-diff__col > p { grid-column: 1; grid-row: 2; align-self: start; }
  .ind-diff__col > .ind-viz { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: start; }
  .ind-diff__col + .ind-diff__col::before { left: 0; right: 0; bottom: auto; border-left: 0; border-top: 1px solid var(--ink-3); }
}
@media (max-width: 700px) {
  .ind-diff__col { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 28px 0 36px; }
  .ind-diff__col > .ind-viz { grid-column: 1; grid-row: auto; margin-top: 10px; }
}

/* ---------- Industry packages ---------- */
.ind-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
/* Subgrid: head, price, per-link, DR mix, features and button share rows, so baselines line up across cards */
.ind-prices .price-card { min-width: 0; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 20px; }
.ind-prices .price-card > .btn { align-self: end; }
.ind-perlink { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); margin-top: -10px; }
.ind-perlink b { color: var(--brand); font-weight: 500; }
.ind-perlink .nw { white-space: nowrap; }
.ind-mix { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-block: 1px solid var(--line); }
.ind-mix__bar { display: flex; gap: 2px; height: 10px; }
.ind-mix__bar span { flex: 1; background: var(--line-strong); }
.ind-mix__bar span:first-child { border-radius: 4px 0 0 4px; }
.ind-mix__bar span:last-child { border-radius: 0 4px 4px 0; }
.ind-mix__bar .t2 { background: var(--text-3); }
.ind-mix__bar .t3 { background: var(--ink); }
.ind-mix__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.ind-mix__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ind-mix__legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong); }
.ind-mix__legend .t2 { background: var(--text-3); }
.ind-mix__legend .t3 { background: var(--ink); }
.ind-assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.ind-assure > div { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ind-assure .i { width: 22px; height: 22px; color: var(--brand); margin-top: 1px; }
.ind-assure p { font-size: var(--fs-sm); line-height: 1.5; }
.ind-assure strong { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 2px; }
.ind-assure span { font-size: var(--fs-sm); color: var(--text-2); }
.ind-prices__note { margin-top: 20px; font-size: var(--fs-xs); color: var(--text-3); }
.ind-prices__note a { display: inline-block; padding: 14px 4px; margin: -14px -4px; color: var(--text-2); font-weight: 600; }
@media (max-width: 1240px) {
  .ind-prices .price-card { padding: 28px 24px; }
  .ind-prices .price-card__flag { left: 24px; }
  .ind-prices .price-card__amount { font-size: 2.375rem; }
}
@media (max-width: 1100px) {
  .ind-prices { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ind-prices .price-card--featured { order: -1; } /* lead with the recommended tier when stacked */
  /* Tablets: each card is a full-width row, details left and features + button right */
  .ind-prices .price-card { grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 48px; row-gap: 16px; }
  .ind-prices .price-card > * { grid-column: 1; }
  .ind-prices .price-card > .check-list { grid-column: 2; grid-row: 1 / span 3; }
  .ind-prices .price-card > .btn { grid-column: 2; grid-row: 4; align-self: end; }
}
@media (max-width: 700px) {
  .ind-prices .price-card { display: flex; }
  .ind-prices .price-card > .btn { margin-top: auto; }
}
/* Below 900px three guarantee columns get too narrow and the titles break; stack them */
@media (max-width: 900px) { .ind-assure { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 520px) { .ind-prices .price-card { padding: 28px 22px 24px; } .ind-prices .price-card__flag { left: 22px; } }

/* ---------- Testimonial (per industry) ---------- */
.ind-quote { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ind-quote .quote__text { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.42; letter-spacing: -0.015em; }
.ind-quote__mark { width: 32px; height: 32px; color: var(--text-3); }
.ind-quote__aside { display: flex; flex-direction: column; gap: 20px; padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--line-strong); }
.ind-quote__aside .stat__value { color: var(--brand); }
.ind-quote__aside hr { border: 0; border-top: 1px solid var(--line-strong); margin: 0; }
.ind-quote .quote__avatar { background: var(--paper); border: 1px solid var(--line); }
@media (max-width: 860px) {
  .ind-quote { grid-template-columns: minmax(0, 1fr); }
  .ind-quote__aside { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--line-strong); }
}

/* ---------- FAQ + named strategist (shared structure) ---------- */
.ind-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ind-faq__aside { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 20px; }
.ind-person { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.ind-person__avatar { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; letter-spacing: .02em; }
.ind-person__name { font-weight: 600; }
.ind-person__role { font-size: var(--fs-xs); color: var(--text-3); }
.ind-person__note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-2); }
.ind-person__note .live-dot { margin-top: 6px; }
.ind-person__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ind-person__actions .btn { flex: 1 1 auto; min-height: 44px; }
@media (max-width: 960px) {
  .ind-faq { grid-template-columns: minmax(0, 1fr); }
  .ind-faq__aside { position: static; }
}

/* ---------- Industry tiles: hairline ledger grid (hub grid + related industries) ---------- */
.ind-tiles { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }
.ind-tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 30px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; transition: background-color .18s var(--ease); }
.ind-tile:hover { background: var(--mist); }
.ind-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ind-tile__tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-align: right; line-height: 1.3; }
.ind-tile__tag b { color: var(--text-2); font-weight: 500; }
.ind-tile h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; }
.ind-tile__link { color: inherit; text-decoration: none; }
.ind-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ind-tile__link:focus-visible { outline: none; }
.ind-tile__link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -3px; }
.ind-tile:hover .ind-tile__link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ind-tile__angle { font-size: var(--fs-sm); color: var(--text-2); }
.ind-tile__proof { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.ind-tile__proof b { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ind-tile__proof small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ind-tile__go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.ind-tile__go .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.ind-tile:hover .ind-tile__go { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.ind-tile:hover .ind-tile__go .i { transform: translateX(2px); }
.ind-tile__note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.ind-tiles--compact .ind-tile { gap: 10px; }
.ind-tiles--compact .ind-tile__angle { margin-bottom: 8px; }
.ind-tiles--compact .ind-tile__proof { align-items: center; }
.ind-tiles--4 { --cols: 4; }
@media (max-width: 1040px) { .ind-tiles { --cols: 2; } }
/* Phones: icon beside the name so twelve tiles don't become a very long scroll */
@media (max-width: 640px) {
  .ind-tiles { --cols: 1; }
  .ind-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 20px; }
  .ind-tile__top { display: contents; }
  .ind-tile__top .icon-tile { grid-column: 1; grid-row: 1 / span 2; }
  .ind-tile h3 { grid-column: 2; grid-row: 1; }
  .ind-tile__tag { grid-column: 2; grid-row: 2; text-align: left; }
  .ind-tile__angle { grid-column: 1 / -1; margin-top: 12px; }
  .ind-tile__proof { grid-column: 1 / -1; margin-top: 14px; padding-top: 12px; }
  .ind-tiles--compact .ind-tile__angle { grid-column: 2; grid-row: 2; margin: 0; }
}

/* Filter chips (hub). Hidden until JS runs, so no-JS visitors see all industries and no dead controls. */
.ind-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-filter .chip { min-height: 44px; }
.ind-filter .chip__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ind-filter .chip.is-active .chip__n { color: var(--text-on-dark-2); }
.ind-grid-head { margin-bottom: clamp(28px, 3.5vw, 40px); }
.ind-empty-cta { margin-top: clamp(32px, 4vw, 48px); }
/* Two buttons beside the copy squeeze it into a thin column on tablets; stack instead */
@media (max-width: 900px) { .ind-empty-cta { grid-template-columns: minmax(0, 1fr); } }
.ind-steps { margin-top: clamp(40px, 5vw, 64px); }
.ind-faq__aside > p { text-wrap: pretty; }

/* ---------- Hub hero visual: publisher supply by niche ---------- */
.ind-supply { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2.4vw, 28px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.ind-supply__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ind-supply__head strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.ind-supply__head > div > span { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-3); }
.ind-supply__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ind-supply__table th, .ind-supply__table td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: middle; }
.ind-supply__table thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 0; }
.ind-supply__table tbody th { white-space: nowrap; padding-right: 16px; color: var(--text); font-weight: 500; }
.ind-supply__table .r { text-align: right; padding-left: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-supply__table td.r { color: var(--text); }
.ind-supply__table td.dr { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.ind-supply__bar { width: 100%; }
.ind-supply__bar span { display: block; height: 8px; width: calc(var(--v) / var(--max) * 100%); background: var(--ink); border-radius: 0 4px 4px 0; }
.ind-supply__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: var(--fs-xs); color: var(--text-3); }
.ind-supply__foot b { color: var(--text); font-weight: 600; }
@media (max-width: 520px) {
  .ind-supply__table .dr, .ind-supply__table th.dr { display: none; }
  .ind-supply__table tbody th { padding-right: 12px; }
}