/* Industry sub-pages (/industries/<trade>/): the component styles their markup uses.
 *
 * Why this file exists. On 2026-06-19 "Industries sub-pages: migrate to design system" (2e430d74f)
 * replaced each page's <style> with rules for a NEW layout (.score-card, .fault-item, .built-for)
 * but kept the OLD markup (.qbox .q, .score .tag, .faults .f, .exempt, .steps .step, .guar,
 * .final .related). From then on those components had no styles at all: the question list, the
 * three score cards, the numbered faults and the steps rendered as bare text, the guarantee came
 * out as white text on a white section (main.css styles .guar for a dark band), and the dark
 * sections had white strips above and below. Found 2026-10-20 on /industries/beauty-aesthetics/.
 *
 * Everything is scoped under body.ind-page, so it outranks both main.css and the page's own
 * <style> without !important, and touches no other page. Inter only, design-system tokens only.
 * The page's own <style> still carries rules for classes the markup never uses; they are inert.
 */

/* ---- Rhythm and width: one container edge for every band ------------------------------- */
.ind-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .ind-page .wrap { padding: 0 32px; } }
.ind-page section { padding: 64px 0; margin: 0; }
@media (max-width: 639px) { .ind-page section { padding: 44px 0; } .ind-page .alt { margin: 0; } }
.ind-page section.alt { background: var(--paper-2); }
.ind-page .eyebrow { margin: 0 0 14px; }
.ind-page .h2 { margin: 0 0 14px; }
.ind-page .lead { margin: 0 0 8px; }

/* ---- Hero ---------------------------------------------------------------------------------- */
.ind-page .hero { padding: 24px 0 64px; }
.ind-page .hero .inner { padding: 0; }
.ind-page .hero .inner > * { max-width: 760px; }
.ind-page .hero .eyebrow { margin-top: 32px; }
.ind-page .hero .byline { margin: 0 0 22px; }
.ind-page .hero .btn-row { justify-content: flex-start; margin: 0; }
.ind-page .hero .btn-ghost,
.ind-page .final .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.ind-page .hero .btn-ghost:hover,
.ind-page .final .btn-ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); }
.ind-page .hero .ticks { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; font-size: 14px; color: rgba(255,255,255,.78); }
.ind-page .hero .ticks span { align-items: center; }
@media (max-width: 639px) { .ind-page .hero .ticks { flex-direction: column; } }

/* ---- "The short version" panel -------------------------------------------------------------- */
.ind-page .tldr { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--geo); border-radius: 14px; padding: 24px 26px; margin: -32px 0 0; position: relative; z-index: 2; box-shadow: var(--elev-1); }
.ind-page .tldr .lab { padding-top: 0; margin: 0 0 10px; }
.ind-page .tldr p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; }
@media (max-width: 639px) { .ind-page .tldr { margin-top: -24px; padding: 20px; } .ind-page .tldr p { font-size: 16px; } }

/* ---- The questions people ask --------------------------------------------------------------- */
.ind-page .qbox { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 24px; margin-top: 24px; max-width: 820px; }
.ind-page .qbox .q { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink); }
.ind-page .qbox .q:last-child { border-bottom: none; }
.ind-page .qbox .q svg { width: 18px; height: 18px; color: var(--geo-ink); flex-shrink: 0; margin-top: 3px; }
.ind-page .qbox .q i { font-style: normal; font-weight: 600; color: var(--ink); }
@media (max-width: 639px) { .ind-page .qbox { padding: 4px 16px; } .ind-page .qbox .q { font-size: 15px; } }

/* ---- Three score cards ------------------------------------------------------------------------ */
.ind-page .chips { margin: 20px 0 0; }
.ind-page .trio { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 24px 0 0; }
@media (min-width: 760px) { .ind-page .trio { grid-template-columns: repeat(3, 1fr); } }
.ind-page .score { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 14px; padding: 24px; }
.ind-page .score.geo { border-top-color: var(--geo); }
.ind-page .score.seo { border-top-color: var(--seo); }
.ind-page .score.cro { border-top-color: var(--cro); }
.ind-page .score .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.ind-page .score.geo .tag { color: var(--geo-ink); }
.ind-page .score.seo .tag { color: var(--seo-ink); }
.ind-page .score.cro .tag { color: var(--cro); }
.ind-page .score h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin: 0 0 8px; }
.ind-page .score p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- "Built for how you work" --------------------------------------------------------------- */
.ind-page .exempt { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; margin-top: 20px; max-width: 900px; }
.ind-page .exempt .ic { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--geo), var(--teal-dark)); color: #fff; }
.ind-page .exempt .ic svg { width: 24px; height: 24px; color: #fff; }
.ind-page .exempt .lab { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--geo-ink); margin: 0 0 8px; padding: 0; }
.ind-page .exempt p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 639px) { .ind-page .exempt { flex-direction: column; padding: 20px; } }

/* ---- What holds sites back (numbered) ------------------------------------------------------- */
.ind-page .faults { margin: 20px 0 0; max-width: 900px; }
.ind-page .faults .f { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ind-page .faults .f:last-child { border-bottom: none; }
.ind-page .faults .f .n { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--geo-ink); background: rgba(34,211,238,.12); }
.ind-page .faults .f b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.ind-page .faults .f p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; }

/* ---- Dark proof band ------------------------------------------------------------------------ */
.ind-page section.dark { background: var(--ink); color: #fff; margin: 0; padding: 64px 0; }
.ind-page section.dark .eyebrow { color: var(--geo); }
.ind-page section.dark .h2 { color: #fff; margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 36px); }
.ind-page section.dark .h2 em, .ind-page section.dark em.s { color: var(--geo); }
.ind-page section.dark p { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.ind-page .proof-strip { margin-top: 28px; align-items: center; }

/* ---- How it works --------------------------------------------------------------------------- */
.ind-page .steps { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 24px; counter-reset: none; }
@media (min-width: 720px) { .ind-page .steps { grid-template-columns: repeat(3, 1fr); } }
.ind-page .step { background: #fff; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.ind-page .step .n { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; background: var(--action-blue); }
.ind-page .step b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.ind-page .step p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- 30-day guarantee (light section: dark ink, not main.css's on-dark white) ---------------- */
.ind-page .guar { display: flex; gap: 20px; align-items: flex-start; text-align: left; max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.ind-page .guar .ic { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--seo), #059669); color: #fff; }
.ind-page .guar .ic svg { width: 26px; height: 26px; color: #fff; }
.ind-page .guar .lab { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--seo-ink); margin: 0 0 8px; padding: 0; }
.ind-page .guar .big { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); margin: 0; }
@media (max-width: 639px) { .ind-page .guar { flex-direction: column; padding: 22px; } }

/* ---- FAQ ------------------------------------------------------------------------------------ */
.ind-page .faq { max-width: 860px; margin: 8px 0 0; }

/* ---- Final dark CTA ------------------------------------------------------------------------- */
.ind-page section.final { text-align: center; padding: 72px 0; }
.ind-page section.final .h2 { max-width: 22ch; margin: 0 auto 14px; font-size: clamp(28px, 4vw, 44px); }
.ind-page section.final .lead { max-width: 52ch; margin: 0 auto 26px; }
.ind-page section.final .btn-row { justify-content: center; }
.ind-page .final .related { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px 0 0; padding: 0; }
.ind-page .final .related a { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.78); text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; transition: color .15s, border-color .15s; }
.ind-page .final .related a:hover { color: #fff; border-color: var(--geo); }

/* ---- Data tables inside a dark band (care homes): the page styles .lboard with dark ink, which
        was invisible on the navy section. --------------------------------------------------- */
.ind-page section.dark .lboard th { color: rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,.18); }
.ind-page section.dark .lboard td { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.08); }
.ind-page section.dark .lboard .city-stat { color: #fff; }
.ind-page section.dark .lboard .city-avg { color: rgba(255,255,255,.65); }
.ind-page section.dark .proof-label { color: var(--geo); }
@media (max-width: 639px) { .ind-page .lboard { display: block; overflow-x: auto; } }

/* ---- The "Live: N analysed - average M/100" pill (data-niche-pulse) ------------------------
        Its inline style is display:inline-flex, so on a phone each bare text run between the
        bold numbers became its own flex column ("UK dental / practices / analysed"). Below
        640px it flows as one wrapped line instead. !important only because the rule it
        overrides is an inline style on the element. --------------------------------------- */
@media (max-width: 639px) {
  .ind-page [data-niche-pulse] { display: block !important; line-height: 1.5 !important; border-radius: 14px !important; padding: 9px 14px !important; }
  .ind-page [data-niche-pulse] > span:first-child { display: inline-block !important; vertical-align: middle; margin-right: 8px; }
}