/* Industry pages (hub + /industries/<slug>/). Loaded after ../pages.css; only blocks pages.css lacks. */
.ind-h2{max-width:22ch}

/* problems: problem in buyer words + what we build */
.probs{list-style:none;display:grid;gap:18px;margin-top:clamp(32px,4vw,48px);counter-reset:p}
.probs li{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(22px,2.6vw,30px);border:1px solid var(--line);border-radius:20px;background:var(--panel);counter-increment:p}
.probs li::before{content:counter(p,decimal-leading-zero);font:600 12.5px/1 var(--body);letter-spacing:.08em;color:var(--gold)}
.probs h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.015em}
.probs p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.probs .we{margin-top:4px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink)}
.probs .we b{display:block;margin-bottom:6px;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
@media (min-width:760px){ .probs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .probs{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* how the work runs */
.steps{list-style:none;display:grid;gap:0;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);counter-reset:s}
.steps li{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--line);counter-increment:s}
.steps h3{display:flex;gap:14px;align-items:baseline;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.steps h3::before{content:counter(s);flex:none;display:grid;place-items:center;width:30px;height:34px;font:600 14px/1 var(--body);color:var(--bg);background:var(--mint);clip-path:var(--hex)}
.steps p{font-size:16px;line-height:1.55;color:var(--muted);padding-left:44px}
.steps-foot{margin-top:22px;font-size:16px;line-height:1.6;color:var(--muted)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;border-top:0} .steps li{border-bottom:0;border-top:1px solid var(--line)} .steps p{padding-left:0} }

/* hub cards */
.inds{list-style:none;display:grid;gap:14px;margin-top:clamp(32px,4vw,48px)}
.inds a{display:grid;gap:10px;align-content:start;height:100%;padding:22px 22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--panel);text-decoration:none;transition:border-color .2s}
.inds a:hover{border-color:rgba(111,242,200,.45)}
.inds strong{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.inds .line{font-size:15px;line-height:1.5;color:var(--muted)}
.inds .tag{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.inds .tag i{width:8px;height:9px;background:currentColor;clip-path:var(--hex);flex:none}
.inds .tag.none{color:var(--muted)}
@media (min-width:700px){ .inds{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .inds{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion: reduce){ .inds a{transition:none} }

/* no-case variant of the case card */
.case .tag.none{color:var(--muted)}

/* skip link (same as services.css) */
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:10px}

/* "If your agency has gone quiet" / "old system" situation block */
.alert-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.alert{display:grid;gap:14px;max-width:820px;padding:clamp(22px,3vw,40px);border:1px solid rgba(232,212,158,.4);border-radius:22px;background:var(--panel)}
.alert h2{font-size:clamp(26px,2.8vw,38px);line-height:1.1}
.alert p{font-size:17px;line-height:1.6;color:var(--muted)}
.alert p:first-of-type{color:var(--ink)}
.alert .links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}

/* industry-specific worked example */
.spot{list-style:none;display:grid;gap:14px;margin-top:clamp(28px,3.5vw,44px);counter-reset:s}
.spot li{position:relative;display:grid;gap:8px;align-content:start;padding:clamp(20px,2.4vw,26px);border-left:2px solid var(--mint);background:var(--panel);border-radius:0 16px 16px 0;counter-increment:s}
.spot li::before{content:"Step " counter(s);font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.spot h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.2}
.spot p{font-size:15.5px;line-height:1.55;color:var(--muted)}
@media (min-width:900px){ .spot{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* case vs "would build" split */
.probs .we.would b{color:var(--gold)}
.would{display:grid;gap:12px;margin-top:22px;padding:clamp(22px,3vw,36px);border:1px dashed rgba(232,212,158,.45);border-radius:22px}
.would h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.15}
.would p{font-size:16px;line-height:1.6;color:var(--muted);max-width:720px}

/* H6: hub cards carry the home minimap glyph (3x3 hex cluster, one lit cell); "no case yet" is a quiet outline chip */
.inds a{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
.inds a > *{grid-column:1 / -1}
.inds a > .tag{grid-column:1;grid-row:1;align-self:center;justify-self:start}
.inds a::after{content:"";grid-column:2;grid-row:1;align-self:center;width:44px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 53 42%22%3E%3Cpolygon points=%229.0,1.8 15.2,5.4 15.2,12.6 9.0,16.2 2.8,12.6 2.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,1.8 29.3,5.4 29.3,12.6 23.1,16.2 16.8,12.6 16.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,1.8 43.4,5.4 43.4,12.6 37.1,16.2 30.9,12.6 30.9,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2216.0,14.0 22.3,17.6 22.3,24.8 16.0,28.4 9.8,24.8 9.8,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2230.1,14.0 36.3,17.6 36.3,24.8 30.1,28.4 23.9,24.8 23.9,17.6%22 fill=%22%236FF2C8%22/%3E%3Cpolygon points=%2244.2,14.0 50.4,17.6 50.4,24.8 44.2,28.4 37.9,24.8 37.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%229.0,26.2 15.2,29.8 15.2,37.0 9.0,40.6 2.8,37.0 2.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,26.2 29.3,29.8 29.3,37.0 23.1,40.6 16.8,37.0 16.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,26.2 43.4,29.8 43.4,37.0 37.1,40.6 30.9,37.0 30.9,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.85;transition:opacity .2s}
.inds li:nth-child(3n+1) a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 53 42%22%3E%3Cpolygon points=%229.0,1.8 15.2,5.4 15.2,12.6 9.0,16.2 2.8,12.6 2.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,1.8 29.3,5.4 29.3,12.6 23.1,16.2 16.8,12.6 16.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,1.8 43.4,5.4 43.4,12.6 37.1,16.2 30.9,12.6 30.9,5.4%22 fill=%22%236FF2C8%22/%3E%3Cpolygon points=%2216.0,14.0 22.3,17.6 22.3,24.8 16.0,28.4 9.8,24.8 9.8,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2230.1,14.0 36.3,17.6 36.3,24.8 30.1,28.4 23.9,24.8 23.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2244.2,14.0 50.4,17.6 50.4,24.8 44.2,28.4 37.9,24.8 37.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%229.0,26.2 15.2,29.8 15.2,37.0 9.0,40.6 2.8,37.0 2.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,26.2 29.3,29.8 29.3,37.0 23.1,40.6 16.8,37.0 16.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,26.2 43.4,29.8 43.4,37.0 37.1,40.6 30.9,37.0 30.9,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E")}
.inds li:nth-child(3n+2) a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 53 42%22%3E%3Cpolygon points=%229.0,1.8 15.2,5.4 15.2,12.6 9.0,16.2 2.8,12.6 2.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,1.8 29.3,5.4 29.3,12.6 23.1,16.2 16.8,12.6 16.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,1.8 43.4,5.4 43.4,12.6 37.1,16.2 30.9,12.6 30.9,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2216.0,14.0 22.3,17.6 22.3,24.8 16.0,28.4 9.8,24.8 9.8,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2230.1,14.0 36.3,17.6 36.3,24.8 30.1,28.4 23.9,24.8 23.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2244.2,14.0 50.4,17.6 50.4,24.8 44.2,28.4 37.9,24.8 37.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%229.0,26.2 15.2,29.8 15.2,37.0 9.0,40.6 2.8,37.0 2.8,29.8%22 fill=%22%236FF2C8%22/%3E%3Cpolygon points=%2223.1,26.2 29.3,29.8 29.3,37.0 23.1,40.6 16.8,37.0 16.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,26.2 43.4,29.8 43.4,37.0 37.1,40.6 30.9,37.0 30.9,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E")}
.inds a:has(.tag:not(.none))::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 53 42%22%3E%3Cpolygon points=%229.0,1.8 15.2,5.4 15.2,12.6 9.0,16.2 2.8,12.6 2.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,1.8 29.3,5.4 29.3,12.6 23.1,16.2 16.8,12.6 16.8,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,1.8 43.4,5.4 43.4,12.6 37.1,16.2 30.9,12.6 30.9,5.4%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2216.0,14.0 22.3,17.6 22.3,24.8 16.0,28.4 9.8,24.8 9.8,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2230.1,14.0 36.3,17.6 36.3,24.8 30.1,28.4 23.9,24.8 23.9,17.6%22 fill=%22%23E8D49E%22/%3E%3Cpolygon points=%2244.2,14.0 50.4,17.6 50.4,24.8 44.2,28.4 37.9,24.8 37.9,17.6%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%229.0,26.2 15.2,29.8 15.2,37.0 9.0,40.6 2.8,37.0 2.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2223.1,26.2 29.3,29.8 29.3,37.0 23.1,40.6 16.8,37.0 16.8,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3Cpolygon points=%2237.1,26.2 43.4,29.8 43.4,37.0 37.1,40.6 30.9,37.0 30.9,29.8%22 fill=%22%236FF2C8%22 fill-opacity=%22.12%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E");opacity:1}
.inds a:hover::after{opacity:1}
.inds li:has(.tag:not(.none)){order:-1}
.inds .tag.none{padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-weight:500;letter-spacing:.06em}
.inds .tag.none i{display:none}
/* H6: no orphan last card in the problems grid */
@media (min-width:760px) and (max-width:1099px){ .probs li:last-child:nth-child(odd){grid-column:1/-1} }
@media (min-width:1100px){ .probs li:last-child:nth-child(3n+1){grid-column:1/-1} }
/* H13 D4: hub split into "Backed by a case" (2x2) and "Also built for" (3x3); cards without a chip put the title on the glyph row */
.inds a > strong:first-child{grid-column:1;grid-row:1;align-self:center}
.also-h{margin-top:clamp(48px,6vw,80px)}
.also-p{margin-top:12px;max-width:62ch;font-size:17px;line-height:1.6;color:var(--muted)}
.inds.nine{margin-top:clamp(24px,3vw,36px)}
@media (min-width:1100px){ .inds.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:700px) and (max-width:1099px){ .inds.nine li:last-child:nth-child(odd){grid-column:1/-1} }