/* Industry landing pages (/industries/<slug>/). Shared by every industry page;
   per-industry differences live in the content file, not here.
   Values come from the BidPal design system in Figma (Dx2DtUVkqdNgxhFh1AXpoX,
   IT services hero = node 12075-31341); token names are noted beside them.
   Loaded after main.css (which supplies .wrap). */

.industry-page {
    --in-ink: #18181B;          /* Primary Colors/Gray/900 */
    --in-body: #3F3F46;         /* Primary Colors/Gray/700 */
    --in-brand: #482B7B;        /* Primary Colors/Primary/800, action/primary */
    --in-brand-hover: #291944;  /* Primary Colors/Primary/900 */
    --in-accent: #906BE1;       /* Primary Colors/Primary/500 */
    --in-purple-bg: #F3EEFF;    /* Primary Colors/Primary/100 */
    --in-orange-bg: #FEEFC3;    /* Secondary Colors/Orange/100 */
    --in-orange-badge: #FEF0C7; /* Secondary/Warning/100 */
    --in-orange-ink: #7A2E0E;   /* Secondary/Warning/900 */
    --in-orange-text: #B54708;  /* Secondary/Warning/700 */
    --in-neutral-line: #D1D1D6; /* color/border/neutral/default */
    --in-neutral-ink: #26272B;  /* color/text/on-neutral/default */
    /* the brand radial gradient, same stops as the homepage hero h1 span */
    --in-grad-text: radial-gradient(114.54% 123.44% at 0% 3.91%, #FBCF4F 0%, #BF7CBB 22.12%, #995F9C 36.18%, #784580 50.95%, #693B79 57.97%, #5D3274 65.01%, #512A6F 74.34%, #46285D 82.65%, #3A254A 88.8%, #242026 100%);
}

/* ---------------------------------------------------------------- buttons */
/* Figma "Button / Type=Website": primary carries the inset shadow, the
   secondary is the neutral outlined one. */
.industry-page .btn-primary,
.industry-page .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    font: 600 16px / 24px var(--font);
    text-decoration: none;
    transition: background .15s, box-shadow .15s, color .15s;
}
.industry-page .btn-primary,
.industry-page .btn-primary:visited {
    background: var(--in-brand);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 #482B7B, inset 0 3px 1px #704CC6;
}
.industry-page .btn-primary:hover,
.industry-page .btn-primary:focus-visible {
    background: var(--in-brand-hover);
    color: #FFFFFF;
    box-shadow: 0 6px 16px 0 #E3DCF7, inset 0 1px 0 #2C1358, inset 0 3px 1px #5F4195;
}
.industry-page .btn-secondary,
.industry-page .btn-secondary:visited {
    background: #FFFFFF;
    border: 1px solid var(--in-neutral-line);
    color: var(--in-neutral-ink);
    box-shadow: 0 1.4px 1.3px rgba(228, 228, 231, .5), 0 8px 8px rgba(16, 24, 40, .01);
}
.industry-page .btn-secondary:hover,
.industry-page .btn-secondary:focus-visible {
    background: #F4F4F5;
    color: var(--in-neutral-ink);
}
.industry-page .btn-primary:focus-visible,
.industry-page .btn-secondary:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- hero */
.industry-hero {
    /* .header is position:fixed (79px on desktop), so the hero clears it
       itself, the same way .pricing-hero and .partners-hero do; Figma's own
       top padding is 80px below the header. */
    padding: 160px 0 56px;
}
.industry-hero .hero-intro {
    max-width: min(900px, calc(100% - 32px));
    text-align: center;
}
.industry-hero h1 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 60px / 64px var(--font);   /* Headlines/H1/Semibold */
    letter-spacing: -1.8px;
}
.industry-hero h1 span {
    background: var(--in-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.industry-hero .desc {
    margin: 0;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);   /* Body/MD/Regular */
    letter-spacing: -0.16px;
}
.industry-hero .hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
}

/* Figma frame is 1440 with 96px side padding, so the proof row is 1248 wide. */
.industry-hero .hero-proof {
    max-width: min(1248px, calc(100% - 32px));
    margin-top: 88px;
}
.industry-hero .hero-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 32px;
    color: var(--in-accent);
    font: 600 18px / 26px var(--font);   /* Body/LG/Semibold */
    letter-spacing: -0.18px;
    text-align: center;
}
.industry-hero .hero-kicker img {
    flex: none;
}
.industry-hero .hero-grid {
    display: flex;
    gap: 16px;
}
.industry-hero .hero-photo {
    flex: 0 0 63.3%;                     /* 790 of 1248 */
    aspect-ratio: 790 / 639;
    border-radius: 16px;
    overflow: hidden;
}
.industry-hero .hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Figma's crop of the construction photo sits right of centre
   (image 121.38% wide, shifted left 13.53% -> 63% across) */
.industry-hero .hero-photo--construction img {
    object-position: 63% center;
}
.industry-hero .hero-stats {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------------------- stat cards */
.industry-hero .stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    color: var(--in-brand-hover);
}
.industry-hero .stat-card--purple { background: var(--in-purple-bg); }
.industry-hero .stat-card--orange { background: var(--in-orange-bg); color: var(--in-orange-ink); }
.industry-hero .stat-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.industry-hero .stat-title {
    margin: 0 0 1px;
    font: 500 36px / 48px var(--font);   /* Headlines/H3/Medium */
    letter-spacing: -1.08px;
}
.industry-hero .stat-sub {
    margin: 0;
    font: 400 14px / 20px var(--font);   /* Body/SM/Regular */
    letter-spacing: -0.14px;
}
.industry-hero .stat-sub strong {
    font-weight: 700;
}
/* Figma "Badge", Primary / Warning, sm, label + icon */
.industry-hero .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 2px 8px;
    border-radius: 16px;
    background: var(--in-purple-bg);
    color: var(--in-brand);
    font: 500 12px / 18px var(--font);
    mix-blend-mode: multiply;
}
.industry-hero .stat-card--orange .stat-badge {
    background: var(--in-orange-badge);
    color: var(--in-orange-text);
}
.industry-hero .stat-badge img {
    flex: none;
}

/* Chart: a 100px box. Every offset below is Figma's, measured from the box
   edges, so the plot keeps its shape while the card's width changes. */
.industry-hero .stat-chart {
    position: relative;
    height: 100px;
    flex: none;
    font: 400 12px / 18px var(--font);   /* Body/XS/Regular */
}
.industry-hero .stat-chart img {
    position: absolute;
    display: block;
    max-width: none;
}
.industry-hero .stat-chart .grid { height: 1px; }
.industry-hero .stat-chart .g1 { bottom: 24.55px; }
.industry-hero .stat-chart .g2 { bottom: 54.55px; }
.industry-hero .stat-chart .g3 { bottom: 84.55px; }
.industry-hero .stat-card--purple .grid { left: 35px; width: calc(100% - 35px); }
.industry-hero .stat-card--purple .area { left: 35px; top: 2.41px; width: calc(100% - 36.5px); height: 71.54px; }
.industry-hero .stat-card--purple .line { left: 34.06px; top: .88px; width: calc(100% - 35.5px); height: 65.46px; }
.industry-hero .stat-card--orange .grid { left: 41px; width: calc(100% - 41px); }
.industry-hero .stat-card--orange .area { left: 41px; bottom: 24.36px; width: calc(100% - 41px); height: 76px; }
.industry-hero .stat-card--orange .line { left: 40px; bottom: 31.61px; width: calc(100% - 39.6px); height: 69.68px; }
.industry-hero .stat-chart span {
    position: absolute;
    white-space: nowrap;
}
.industry-hero .stat-chart .y { left: 0; color: var(--in-brand-hover); }
.industry-hero .stat-chart .y-hi { top: 6px; }
.industry-hero .stat-chart .y-lo { top: 50px; }
.industry-hero .stat-chart .x { top: 82px; }
.industry-hero .stat-chart .x-6m { left: 60px; transform: translateX(-50%); }
.industry-hero .stat-chart .x-3m { left: calc(50% + 25px); transform: translateX(-50%); }
.industry-hero .stat-chart .x-now { right: 17.5px; transform: translateX(50%); }

/* ------------------------------------------------- "you have a bid team" */
.industry-bidteam {
    padding: 72px 0 120px;
    /* the illustration's transparent glow margin is wider than a phone
       screen; clip it here so it cannot cause a sideways scroll. "clip"
       (not "hidden") so the section does not become a scroll container. */
    overflow-x: hidden;
    overflow-x: clip;
}
.industry-bidteam .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-bidteam h2 {
    max-width: 900px;
    margin: 0 auto 60px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
    text-align: center;
}
/* Three columns: text pinned to the top, the illustration, text pinned to
   the bottom, so each paragraph lines up with its connector line. */
.industry-bidteam .bidteam-row {
    display: flex;
    gap: 8px;
}
.industry-bidteam .bidteam-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #51525C;                      /* Primary Colors/Gray/600 */
    font: 500 16px / 24px var(--font);   /* Body/MD/Medium */
    letter-spacing: -0.16px;
}
.industry-bidteam .bidteam-text--top { padding-top: 64px; }
.industry-bidteam .bidteam-text--bottom { align-self: flex-end; padding-bottom: 72px; }
/* The box is Figma's 490x402 illustration frame. The supplied 2x export
   (1403x1185) carries extra transparent room for the white glow: 105px
   left, 190.5px above, in CSS px. The image is offset by that much so the
   artwork and its connector lines land exactly on the frame. Percentages
   keep that alignment when the box shrinks on small screens. */
.industry-bidteam .bidteam-art {
    flex: 0 0 auto;
    position: relative;
    width: min(490px, 100%);
    aspect-ratio: 490 / 402;
}
.industry-bidteam .bidteam-art img {
    position: absolute;
    left: -21.43%;                       /* 105 / 490 */
    top: -47.39%;                        /* 190.5 / 402 */
    width: 143.16%;                      /* 701.5 / 490 */
    height: auto;
    max-width: none;
    pointer-events: none;
}

/* ------------------------------------------------------------- challenges */
.industry-challenges .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
/* A rounded photo panel: the photo fills it (Figma crops it from the top,
   keeping the bottom edge, hence object-position bottom), under a black
   fade that keeps the white heading readable. */
.industry-challenges .challenges-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    padding: 72px 40px 40px;
    background: #291944;                 /* shows only if the photo fails */
}
.industry-challenges .challenges-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.industry-challenges .challenges-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6) 34.52%, rgba(0, 0, 0, .54) 40.81%, rgba(0, 0, 0, 0) 79.24%);
}
.industry-challenges .challenges-intro {
    max-width: 900px;
    margin: 0 auto 60px;
    color: #FFFFFF;
    text-align: center;
}
.industry-challenges h2 {
    margin: 0 0 24px;
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
}
.industry-challenges .challenges-intro p {
    max-width: 560px;
    margin: 0 auto;
    font: 400 16px / 24px var(--font);   /* Body/MD/Regular */
    letter-spacing: -0.16px;
}
.industry-challenges .challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.industry-challenges .challenge-card {
    padding: 24px 16px;
    border-radius: 16px;
    background: #FFFFFF;
}
.industry-challenges .challenge-card h3 {
    margin: 0 0 10px;
    color: var(--in-ink);
    font: 600 16px / 24px var(--font);   /* Body/MD/Semibold */
    letter-spacing: -0.16px;
}
.industry-challenges .challenge-card p {
    margin: 0;
    color: #51525C;                      /* Primary Colors/Gray/600 */
    font: 400 14px / 20px var(--font);   /* Body/SM/Regular */
    letter-spacing: -0.14px;
}

/* ------------------------------------------------------------- how it works */
.industry-how {
    padding: 120px 0;
}
.industry-how .wrap {
    max-width: min(1248px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    gap: 88px;
}
.industry-how .how-head {
    max-width: 900px;
}
.industry-how h2 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
}
.industry-how .how-head p,
.industry-how .step-text p {
    margin: 0;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);   /* Body/MD/Regular */
    letter-spacing: -0.16px;
}
.industry-how .how-intro {
    display: flex;
}
/* Figma paints the brand gradient across the whole 624px half, so the
   title box is that half and the text clips the gradient. */
.industry-how .how-intro-title {
    flex: 1;
    margin: 0;
    font: 600 36px / 48px var(--font);   /* Headlines/H3/Semibold */
    letter-spacing: -1.08px;
    background: var(--in-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.industry-how ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* main.css gives every "main ul li" a disc marker; these lists draw their own */
.industry-how ul li {
    list-style: none;
}
.industry-how .how-checks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.industry-how .how-checks li {
    position: relative;
    padding-left: 32px;
    color: var(--in-ink);
    font: 500 16px / 24px var(--font);   /* Body/MD/Medium */
    letter-spacing: -0.16px;
}
.industry-how .how-checks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    background: url(../img/industry-check.svg) center / 16px 16px no-repeat;
}

/* One step: 624px text + 634px illustration in Figma; flex-basis keeps that
   ratio while letting both shrink to fit the 1248 content width. */
.industry-how .step {
    display: flex;
    align-items: center;
}
.industry-how .step--reverse {
    flex-direction: row-reverse;
}
.industry-how .step-text {
    flex: 1 1 624px;
    min-width: 0;
}
.industry-how .step-art {
    flex: 1 1 634px;
    min-width: 0;
}
.industry-how .step-art img {
    display: block;
    width: 100%;
    height: auto;
}
.industry-how h3 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 36px / 48px var(--font);   /* Headlines/H3/Semibold */
    letter-spacing: -1.08px;
}
.industry-how .step-text p,
.industry-how .step-text ul {
    max-width: 560px;
}
.industry-how .step-text > * + * {
    margin-top: 16px;
}
.industry-how .step-text h3 + p {
    margin-top: 0;
}
.industry-how .step-bullets {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.industry-how .step-bullets li {
    position: relative;
    padding-left: 14px;
    color: #51525C;                      /* Primary Colors/Gray/600 */
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-how .step-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 25px;
    background: url(../img/industry-bullet.svg) center / 6px 25px no-repeat;
}
.industry-how .step-text .step-close {
    margin-top: 16px;                    /* beats ".step-text p { margin: 0 }" */
    font-weight: 500;                    /* Body/MD/Medium */
}

/* --------------------------------------------------------------- CTA banner */
.industry-cta .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-cta .cta-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    padding: 88px 80px;
    background: #291944;                 /* shows only if the photo fails */
}
/* Figma's crop of the photo, as percentages of the banner box */
.industry-cta .cta-bg {
    position: absolute;
    z-index: -2;
    left: -0.01%;
    top: -39.43%;
    width: 105.83%;
    height: 202.83%;
    max-width: none;
}
/* dark fade on the left keeps the white headline readable */
.industry-cta .cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .56) 42.07%, rgba(0, 0, 0, .33) 54.08%, rgba(0, 0, 0, .183) 59.63%, rgba(0, 0, 0, .117) 61.73%, rgba(0, 0, 0, 0) 65.47%);
}
.industry-cta .cta-content {
    max-width: 720px;
    min-height: 312px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}
.industry-cta .cta-title {
    max-width: 656px;
    margin: 0;
    color: #FFFFFF;
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
    text-shadow: 0 .2px 1px #000;
}
/* Figma "Button / Secondary color" */
.industry-page .btn-light,
.industry-page .btn-light:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--in-purple-bg);
    color: var(--in-brand);
    font: 600 16px / 24px var(--font);
    text-decoration: none;
    transition: background .15s;
}
.industry-page .btn-light:hover,
.industry-page .btn-light:focus-visible {
    background: #FFFFFF;
    color: var(--in-brand);
}
.industry-page .btn-light:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- security */
.industry-security {
    padding: 120px 0 64px;
}
.industry-security .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-security .security-head {
    max-width: 900px;
    margin-bottom: 60px;
}
.industry-security h2 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
}
.industry-security .security-head p {
    margin: 0;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-security .security-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.industry-security .security-card {
    padding: 24px;
    border-radius: 16px;
    background: #F8F6FE;                 /* Primary Colors/Primary/50 */
}
.industry-security .security-icon {
    display: block;
    width: 62px;
    height: 64px;
    margin-bottom: 16px;
}
.industry-security .security-icon--composite {
    position: relative;
    width: 64px;
    overflow: hidden;
}
.industry-security .security-icon--composite img,
.industry-security .security-icon--composite .db {
    position: absolute;
    display: block;
    max-width: none;
}
.industry-security .security-icon--composite .db { left: 0; top: 4px; width: 32px; height: 32px; }
.industry-security .security-icon--composite .db > img:first-child { inset: 0; width: 100%; height: 100%; }
.industry-security .security-icon--composite .keyhole { left: 22.62px; top: 24.5px; width: 1.875px; height: 3.75px; }
.industry-security .security-icon--composite .spark-lg { right: 0; top: 10.14px; width: 38px; height: 38px; }
.industry-security .security-icon--composite .spark-sm { right: 23px; top: 42.14px; width: 20px; height: 20px; }
.industry-security .security-stat {
    display: inline-block;
    margin: 0 0 8px;
    font: 600 36px / 48px var(--font);   /* Headlines/H3/Semibold */
    letter-spacing: -1.08px;
    background: var(--in-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.industry-security .security-label {
    margin: 0;
    color: var(--in-ink);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-security .security-points {
    max-width: 900px;
}
.industry-security .security-points > p {
    margin: 0 0 16px;
    color: var(--in-ink);
    font: 600 16px / 24px var(--font);   /* Body/MD/Semibold */
    letter-spacing: -0.16px;
}
.industry-security .industry-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.industry-security .industry-checks li {
    position: relative;
    padding-left: 32px;
    list-style: none;                    /* beats main.css "main ul li" disc */
    color: #51525C;
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-security .industry-checks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    background: url(../img/industry-check.svg) center / 16px 16px no-repeat;
}

/* ------------------------------------------------------------- how it works */
.industry-works {
    padding: 0 0 80px;
}
.industry-works .wrap {
    max-width: min(1248px, calc(100% - 32px));
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.industry-works .works-text {
    flex: 0 1 624px;
    min-width: 0;
}
.industry-works h2 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
}
.industry-works .works-text p {
    max-width: 560px;
    margin: 0 0 8px;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-works .works-text p:first-of-type {
    max-width: none;
}
/* reuses the hero's button row; here it is left-aligned, 40px below the copy */
.industry-works .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}
.industry-works .works-art {
    flex: 0 1 624px;
    min-width: 0;
}
.industry-works .works-art img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------- old vs new */
.industry-compare {
    padding: 120px 0 48px;
    background: #FAEADD;                 /* Secondary/Cream/Cream */
}
.industry-compare .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-compare .compare-head {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}
.industry-compare h2 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
}
.industry-compare .compare-head p {
    margin: 0;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
/* A real table (rows x two ways), styled as Figma's card: label column 616,
   two value columns 316 each, 88px rows, rounded outer corners. */
.industry-compare .compare-table {
    width: 100%;
    margin-bottom: 24px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.industry-compare .compare-table thead td { width: 49.36%; }       /* 616 / 1248 */
.industry-compare .compare-table th,
.industry-compare .compare-table td {
    height: 88px;
    padding: 20px 32px;
    text-align: left;
    vertical-align: middle;
    font: 600 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-compare .compare-table thead th {
    padding: 22px 16px;
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
    border-radius: 16px 16px 0 0;
}
.industry-compare thead .col-old { background: #FFFFFF; color: var(--in-ink); }
.industry-compare thead .col-bp { background: var(--in-brand); color: #FFFFFF; }
.industry-compare tbody th,
.industry-compare tbody .col-old {
    background: #FFFFFF;
    border-left: 1px solid #E4E4E7;
    border-bottom: 1px solid #E4E4E7;
}
.industry-compare tbody tr:first-child th,
.industry-compare tbody tr:first-child .col-old { border-top: 1px solid #E4E4E7; }
.industry-compare tbody .col-old { color: var(--in-body); }
.industry-compare tbody .col-bp {
    background: var(--in-brand);
    color: #FFFFFF;
    border-bottom: 1px solid #5F4195;    /* Primary Colors/Primary/700 */
}
.industry-compare tbody tr:first-child .col-bp { border-top: 1px solid #5F4195; }
.industry-compare tbody tr:first-child th { border-top-left-radius: 16px; }
.industry-compare tbody tr:last-child th { border-bottom-left-radius: 16px; }
.industry-compare tbody tr:last-child .col-bp { border-bottom: 0; border-bottom-right-radius: 16px; }
.industry-compare tbody th {
    color: var(--in-ink);
    font-weight: 500;                    /* Body/MD/Medium */
}
/* Tighter vertical padding so two-line labels fit inside the fixed 88px:
   every row, with or without a sub-line or top border, is the same height. */
@media (min-width: 901px) {
    .industry-compare .compare-table tbody th,
    .industry-compare .compare-table tbody td {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}
.industry-compare tbody th span {
    display: block;
    margin-top: 4px;
    color: var(--in-body);
    font: 400 14px / 20px var(--font);
    letter-spacing: -0.14px;
}
.industry-compare tbody .total th,
.industry-compare tbody .total td { font-weight: 700; padding-top: 24px; padding-bottom: 24px; }
.industry-compare tbody .total .col-old { color: var(--in-ink); }

/* result strip */
.industry-compare .compare-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-left: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: #FCF1E8;                 /* Secondary/Cream/Cream Lighter */
    box-shadow: inset 0 -4px 16px rgba(255, 255, 255, .88);
}
.industry-compare .compare-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--in-ink);
    font: 600 36px / 48px var(--font);
    letter-spacing: -1.08px;
}
.industry-compare .compare-result img { flex: none; }
.industry-compare .compare-result span { color: #5F4195; }
.industry-compare .compare-art {
    flex: none;
    display: block;
    width: 355px;
    height: auto;
}

/* closing CTA over the big faint star (Figma: 620px tall, mark 590 wide) */
.industry-compare .compare-cta {
    position: relative;
    isolation: isolate;
    min-height: 620px;
    margin-top: 32px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    text-align: center;
}
.industry-compare .compare-mark {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: 590px;
    max-width: 100%;
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
}
.industry-compare .compare-cta-title {
    max-width: 900px;
    margin: 0;
    color: var(--in-ink);
    font: 500 48px / 54px var(--font);   /* Headlines/H2/Medium */
    letter-spacing: -1.44px;
}
.industry-compare .compare-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ------------------------------------------------------------------ results */
.industry-results {
    padding: 120px 0;
    background: var(--in-brand-hover);   /* Primary Colors/Primary/900 */
    color: #FFFFFF;
}
.industry-results .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-results .results-head {
    max-width: 900px;
    margin-bottom: 60px;
}
.industry-results h2 {
    margin: 0 0 24px;
    color: #FFFFFF;
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
}
.industry-results .results-head p {
    margin: 0;
    color: #E4E4E7;
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
/* Figma's 1248x390 box crops the photo to its middle band (image 213% tall,
   shifted up 56.6%) under a 20% brand tint */
.industry-results .results-photo {
    position: relative;
    aspect-ratio: 1248 / 390;
    margin-bottom: 60px;
    border-radius: 24px;
    overflow: hidden;
}
.industry-results .results-photo img {
    position: absolute;
    left: 0;
    top: -56.61%;
    width: 100%;
    height: 213.28%;
    max-width: none;
}
.industry-results .results-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(72, 43, 123, .2);
}
.industry-results .results-lead {
    margin: 0 0 32px;
    font: 600 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-results .results-stats {
    display: flex;
    gap: 0;
}
.industry-results .results-stat {
    flex: 1;
    min-width: 0;
}
.industry-results .results-stat--mid {
    flex: 0 0 370px;
}
.industry-results .results-stat p {
    margin: 0;
    max-width: 440px;
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-results .results-stat .results-num {
    display: inline-block;
    margin-bottom: 8px;
    font: 600 36px / 48px var(--font);
    letter-spacing: -1.08px;
    background: linear-gradient(90deg, #FBCF4F 2.55%, #BF7CBB 60.44%, #995F9C 103.47%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* -------------------------------------------------------------------- FAQ */
/* faq.css supplies the accordion (grey items, plus/minus); this only adds
   Figma's section padding. The "Read All FAQs" button was dropped 2026-10-06. */
.industry-faq.section-faq {
    padding: 120px 0;
}
.industry-faq h2 {
    max-width: 900px;                    /* Figma wraps the title in a 900 column */
    margin-left: auto;
    margin-right: auto;
}
.industry-faq .faq-heading .faq-question {
    width: 100%;
    background: transparent;
    font-family: var(--font);
}

/* -------------------------------------------------------------- final CTA */
.industry-final {
    padding: 0 0 56px;
}
.industry-final .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
/* Figma "Gradients/Radial/Bottom": centre just below the bottom edge at
   53% across, radii 1931 x 502 px on the 1248 x 448 banner */
.industry-final .final-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 80px;
    border-radius: 24px;
    background: radial-gradient(154.74% 112.11% at 53.04% 112.11%, #FBCF4F 0%, #D6A46C 9.4%, #B0798A 18.8%, #995F9C 28.98%, #6D4580 50.95%, #533565 66.64%, #3A254A 82.32%, #242026 100%);
}
.industry-final .final-content {
    position: relative;
    z-index: 2;
}
.industry-final h2 {
    margin: 0 0 16px;
    color: #FFFFFF;
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
    text-shadow: 0 .2px 1px rgba(0, 0, 0, .7);
}
.industry-final h2 span {
    background: linear-gradient(90deg, #FBCF4F 0%, #C3A8FF 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.industry-final .final-content p {
    margin: 0 0 48px;
    color: #FFFFFF;
    font: 400 18px / 26px var(--font);   /* Body/LG/Regular */
    letter-spacing: -0.18px;
}
.industry-final .final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* decoration box: Figma's 465 x 448 frame flush to the banner's right edge;
   every offset inside is Figma's */
.industry-final .final-deco {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 465px;
    height: 448px;
    overflow: hidden;
    pointer-events: none;
}
.industry-final .final-star {
    position: absolute;
    left: 7.29px;                         /* 711.945 box at -124.75 -> centre 231.2 */
    top: -56.33px;                        /* centre 223.18 */
    width: 447.863px;
    height: 559.016px;
    max-width: none;
    transform: rotate(45deg);
}
.industry-final .final-tile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) rotate(var(--rot));
}
.industry-final .final-tile img { display: block; max-width: none; }
.industry-final .final-tile--spark {
    --rot: -17.53deg;
    left: 306.5px; top: 333.41px;
    width: 57.36px; height: 57.36px;
    border: .9px solid #996DA7;
    border-radius: 8.96px;
    background: #865594;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 9.86px 12.55px rgba(41, 27, 35, .15), inset 3.1px 5.38px 13.44px rgba(255, 255, 255, .07);
}
.industry-final .final-tile--spark img { width: 32.7px; height: 32.54px; }
.industry-final .final-tile--doc {
    --rot: 5deg;                          /* Figma nests 2deg + 3deg */
    left: 191.6px; top: 197.9px;
    width: 50.19px; height: 50.19px;
    border: .9px solid #775D86;
    border-radius: 8.96px;
    background: #67427D;
    box-shadow: 2.69px 6.27px 8.07px rgba(43, 24, 48, .13), inset 2.69px 5.38px 12.55px rgba(98, 70, 111, .54);
}
.industry-final .final-tile--doc img { width: 19.72px; height: 25.1px; }
.industry-final .final-tile--pen {
    --rot: 10.45deg;
    left: 333.51px; top: 87.07px;
    width: 35.85px; height: 35.85px;
    border: .9px solid #554165;
    border-radius: 7.17px;
    background: #453452;
    box-shadow: 0 7.17px 14.34px rgba(58, 35, 75, .61), inset 2.69px 7.17px 8.96px rgba(103, 57, 114, .23);
}
.industry-final .final-tile--pen img { width: 21.51px; height: 21.51px; }

/* -------------------------------------- construction: challenges variant */
/* Figma 13867-16430: photo cropped near its middle (134% tall, shifted up
   23% -> 67.5% down), a darker fade at the top, and no intro sentence. */
.industry-challenges .challenges-panel--construction .challenges-bg,
.industry-challenges .challenges-panel--cleaning .challenges-bg {
    object-position: center 67.5%;
}
.industry-challenges .challenges-panel--construction::before,
.industry-challenges .challenges-panel--cleaning::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .56) 28.37%, rgba(0, 0, 0, .48) 60.04%, rgba(0, 0, 0, 0) 94.66%);
}
.industry-challenges .challenges-panel--construction h2,
.industry-challenges .challenges-panel--cleaning h2 {
    margin-bottom: 0;
}
/* Cleaning has 5 cards: every row takes the tallest card's height so the
   lone/last cards match their neighbours (designer request 2026-10-12). */
.industry-challenges .challenges-panel--cleaning .challenges-grid {
    grid-auto-rows: 1fr;
}

/* ------------------------------------------- construction: how it helps */
/* Figma 13877-49261: centred H2 with no subline; steps 3-4 have 624px art. */
.industry-how--construction .how-head,
.industry-how--cleaning .how-head {
    margin: 0 auto;
    text-align: center;
}
.industry-how--construction h2,
.industry-how--cleaning h2 {
    margin-bottom: 0;
}
.industry-how .step-art--narrow {
    flex-basis: 624px;
}
.industry-how .step-text .step-note {
    margin-top: 8px;
}

/* ------------------------------------------------ construction: CTA banner */
/* Figma 13884-49626: photo covers the banner (no offset crop) and the fade
   runs further right than on the IT banner. */
.industry-cta .cta-banner--construction .cta-bg,
.industry-cta .cta-banner--cleaning .cta-bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.industry-cta .cta-banner--construction::before,
.industry-cta .cta-banner--cleaning::before {
    background: linear-gradient(90.74deg, rgba(0, 0, 0, .64) 42.23%, rgba(0, 0, 0, 0) 99.88%);
}
.industry-cta .cta-banner--construction .cta-title,
.industry-cta .cta-banner--cleaning .cta-title {
    max-width: 720px;
}

/* Cleaning CTA photo: keep the cleaner's face in frame on the wide banner. */
.industry-cta .cta-banner--cleaning .cta-bg {
    object-position: center 18%;
}

/* ---------------------------------------------- construction: dark security */
/* Figma 13884-49638: Primary/900 band, Primary/800 cards, white text.
   The lines are Figma's 644x804 group rotated 45deg inside a 1025px square
   whose right edge sits 181px past a 1440 frame; anchored to the centred
   content on wider screens, clipped by the section. */
.industry-security--dark {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: var(--in-brand-hover);   /* #291944 */
}
.industry-security--dark .security-lines {
    position: absolute;
    top: -192px;
    right: max(-181.2px, calc(50% - 901.2px));
    width: 1024.65px;
    height: 1024.65px;
    background: url(../img/industry-security-lines.svg) center / 644.578px 804.513px no-repeat;
    transform: rotate(45deg);
    pointer-events: none;
}
.industry-security--dark .wrap {
    position: relative;
}
.industry-security--dark h2 {
    color: #FFFFFF;
}
.industry-security--dark .security-head p,
.industry-security--dark .industry-checks li {
    color: #E4E4E7;                      /* Primary Colors/Gray/200 */
}
.industry-security--dark .security-card {
    background: var(--in-brand);         /* #482B7B */
}
.industry-security--dark .security-title {
    margin: 0;
    color: #FFFFFF;
    font: 600 24px / 31px var(--font);   /* Headlines/H5/Semibold */
    letter-spacing: -0.72px;
}
.industry-security--dark .security-points > p {
    color: #FFFFFF;
}

/* After the dark security band "How it Works" needs Figma's own 80px top. */
.industry-security--dark + .industry-works {
    padding-top: 80px;
}

/* -------------------------------------------- construction: case study */
/* Figma 13893-45951: three Gray/100 cards, Primary/900 icon tiles. */
.industry-case {
    padding: 120px 0 0;
}
.industry-case .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-case h2 {
    margin: 0 0 60px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
    text-align: center;
}
.industry-case .case-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.industry-case .case-card {
    padding: 32px;
    border-radius: 16px;
    background: #F4F4F5;
}
.industry-case .case-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 48px;
    border-radius: 12px;
    background: var(--in-brand-hover);   /* #291944 */
}
.industry-case .case-icon img {
    display: block;
    width: 32px;
    height: 32px;
}
.industry-case h3 {
    margin: 0 0 12px;
    color: var(--in-ink);
    font: 600 24px / 31px var(--font);   /* Headlines/H5/Semibold */
    letter-spacing: -0.72px;
}
.industry-case .case-card p {
    margin: 0;
    color: var(--in-ink);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}

/* ------------------------------------------ construction: process steps */
/* Figma 13908-45982. Rows are 332px (last 160px) with a 4px rail and a
   24px dot centred 60px down (timeline.css sizes all of it). */
.industry-process {
    padding: 120px 0;
}
.industry-process .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.industry-process .process-head {
    max-width: 900px;
    margin-bottom: 60px;
}
.industry-process h2 {
    margin: 0 0 24px;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);
    letter-spacing: -1.44px;
}
.industry-process .process-head p {
    margin: 0;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-process .process-photo {
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
    border-radius: 24px;
}
.industry-process .process-photo::after {    /* Figma's 8% brand tint */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(72, 43, 123, .08);
}
.industry-process .process-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1248 / 390;
    object-fit: cover;
}
.industry-process .process-title {
    margin: 0 0 60px;
    color: var(--in-ink);
    font: 500 24px / 31px var(--font);   /* Headlines/H5/Medium */
    letter-spacing: -0.72px;
}
/* Steps use the shared timeline.css (as /tutorials/); only fit it in here. */
.industry-process .process-timeline {
    position: relative;
    margin-bottom: 60px;
    padding: 0;                          /* timeline.css pads ".timeline" */
}
.industry-process .timeline_wrap {
    margin: 0;
    padding: 0;
    list-style: none;
}
.industry-process .timeline-step {
    list-style: none;                    /* beats main.css "main ul li" disc */
}
.industry-process .process-actions {
    display: flex;
    justify-content: center;
}

/* "Read All FAQs" (industry-faq-more.js): 32px under the list, centred. */
.industry-faq .faq-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.industry-faq .faq-item[hidden],
.industry-faq .faq-more[hidden] {
    display: none;
}

/* Construction final banner (Figma 13932-38960): 650px text block, the
   gradient phrase on its own line. */
.industry-final .final-banner--stacked .final-content {
    max-width: 650px;
}
.industry-final .final-banner--stacked h2 span {
    display: block;
    width: fit-content;
}

/* Construction CTA banner is followed by the dark security band, so it
   carries Figma's own 120px bottom space (the IT page gets it from the
   white section below). */
.industry-cta--spaced {
    padding-bottom: 120px;
}

/* ------------------------------------------------- construction: market */
.industry-market {
    padding: 72px 0 120px;
}
.industry-market .wrap {
    max-width: min(1248px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.industry-market h2 {
    max-width: 900px;
    margin: 0;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
}
.industry-market .market-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.industry-market .market-stat p {
    max-width: 372px;
    margin: 0;
    color: #51525C;                      /* Primary Colors/Gray/600 */
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
/* Bold label between an outcome figure and its description (Cleaning page). */
.industry-market .market-stat .market-label {
    margin-bottom: 4px;
    color: var(--in-ink);
    font: 600 18px / 28px var(--font);   /* Body/LG/Semibold */
    letter-spacing: -0.18px;
}
/* Source line under a market figure (Cleaning page): small, muted, linked. */
.industry-market .market-stat .market-source {
    margin-top: 8px;
    color: #70707B;                      /* Primary Colors/Gray/500 */
    font: 400 13px / 18px var(--font);
    letter-spacing: 0;
}
.industry-market .market-stat .market-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.industry-market .market-stat .market-source a:hover,
.industry-market .market-stat .market-source a:focus-visible {
    color: #482B7B;
}
/* Figma "Gradients/Radial/Top Right" */
.industry-market .market-stat .market-num {
    display: inline-block;
    margin-bottom: 8px;
    font: 600 36px / 48px var(--font);   /* Headlines/H3/Semibold */
    letter-spacing: -1.08px;
    background: radial-gradient(120% 120% at 100% 0%, #FBCF4F 0%, #DDA685 11%, #BF7CBB 22%, #995F9C 36%, #784580 51%, #693B79 58%, #5D3274 65%, #512A6F 74%, #46285D 83%, #3A254A 89%, #242026 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.industry-market .market-pain {
    max-width: 900px;
}
.industry-market .market-lead {
    margin: 0 0 16px;
    color: var(--in-ink);
    font: 600 16px / 24px var(--font);   /* Body/MD/Semibold */
    letter-spacing: -0.16px;
}
/* reuse the purple-dot bullets of the steps section */
.industry-market .step-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.industry-market .step-bullets li {
    position: relative;
    padding-left: 14px;
    list-style: none;                    /* beats main.css "main ul li" disc */
    color: #51525C;
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.industry-market .step-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 25px;
    background: url(../img/industry-bullet.svg) center / 6px 25px no-repeat;
}
.industry-market .market-close {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: -48px;                   /* Figma: 12px under the list, not 60 */
}
.industry-market .market-close-text {
    max-width: 720px;
}
.industry-market h3 {
    margin: 0 0 16px;
    color: var(--in-ink);
    font: 600 24px / 31px var(--font);   /* Headlines/H5/Semibold */
    letter-spacing: -0.72px;
}
.industry-market .market-close-text p {
    margin: 0;
    color: #51525C;
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
/* Growing bar chart: four 100px bars, Figma colours Purple 100/200/300/400.
   Each grows from --from to --h over 1.5s (75% of a 2s loop), then holds. */
.industry-market .market-bars {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 436px;
    height: 204px;
}
.industry-market .market-bars span {
    flex: 1;
    height: var(--h);
    border-radius: 12px 12px 0 0;
    animation: market-bar 2s ease-in-out infinite;
}
.industry-market .market-bars span:nth-child(1) { background: #F3EEFF; }
.industry-market .market-bars span:nth-child(2) { background: #E3DCF7; }
.industry-market .market-bars span:nth-child(3) { background: #CDBEF4; }
.industry-market .market-bars span:nth-child(4) { background: #AF94EC; }
@keyframes market-bar {
    0%   { height: var(--from); }
    75%  { height: var(--h); }
    100% { height: var(--h); }
}
@media (prefers-reduced-motion: reduce) {
    .industry-market .market-bars span { animation: none; }
}

/* -------------------------------------------------------------- hub page */
/* /industries/ is assembled from the same design-system pieces as the
   industry pages: hero intro, two-column intro (as on the homepage and
   /partners/), photo cards, the testimonials carousel, a cream panel
   (Secondary/Cream/Cream Lighter, as the compare strip), FAQ, final banner. */
.industry-hero.hub-hero {
    padding-bottom: 88px;
}
/* One heading scale for the whole hub: H1 60px, every section H2 48px,
   every H3 24px (FAQ questions keep the accordion's own 20px, as on /faq/). */
.hub-industries h2,
.hub-beyond h2 {
    margin: 0;
    color: var(--in-ink);
    font: 600 48px / 54px var(--font);   /* Headlines/H2/Semibold */
    letter-spacing: -1.44px;
}

.hub-industries {
    padding: 0 0 120px;
}
.hub-industries .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
/* Cards sit straight under the hero; the section H2 is kept for screen readers
   and heading order but hidden on screen (standard visually-hidden pattern). */
.hub-industries .hub-industries-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.hub-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
/* The whole card is the link, so the hit area is generous; the visible
   "Learn More →" line is what screen readers announce last. */
.hub-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E4E4E7;           /* Primary Colors/Gray/200 */
    border-radius: 16px;
    background: #FFFFFF;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
a.hub-card:hover,
a.hub-card:focus-visible {
    box-shadow: 0 12px 24px rgba(41, 25, 68, .10);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
a.hub-card:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}
.hub-card-photo {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--in-purple-bg);
}
.hub-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* stand-in until the cleaning page has a photo: the brand gradient with the
   sparkle tile icon from the final banner */
.hub-card-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(154.74% 112.11% at 53.04% 112.11%, #FBCF4F 0%, #B0798A 18.8%, #995F9C 28.98%, #6D4580 50.95%, #3A254A 82.32%, #242026 100%);
}
.hub-card-photo--placeholder img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: .9;
}
.hub-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}
.hub-card h3 {
    margin: 0;
    color: var(--in-ink);
    font: 600 24px / 32px var(--font);
    letter-spacing: -0.48px;
}
.hub-card-text {
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.hub-card-link {
    margin-top: auto;
    padding-top: 8px;
    color: var(--in-brand);
    font: 600 16px / 24px var(--font);
}
/* Figma "Badge" (Primary, sm), as in the hero stat cards */
.hub-card-soon {
    align-self: flex-start;
    margin-top: auto;
    padding: 2px 8px;
    border-radius: 16px;
    background: var(--in-purple-bg);
    color: var(--in-brand);
    font: 500 12px / 18px var(--font);
}

.hub-beyond {
    padding: 120px 0 0;
}
.hub-beyond .wrap {
    max-width: min(1248px, calc(100% - 32px));
}
.hub-beyond-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 56px;
    border-radius: 24px;
    background: #FCF1E8;                 /* Secondary/Cream/Cream Lighter */
}
.hub-beyond h2 {
    margin-bottom: 16px;
}
.hub-beyond-text p {
    margin: 0 0 16px;
    color: var(--in-body);
    font: 400 16px / 24px var(--font);
    letter-spacing: -0.16px;
}
.hub-beyond-text .btn-primary {
    margin-top: 8px;
}
/* Right side of the panel: a white card holding a 2x2 grid of equal tiles,
   plus a full-width dashed "your industry?" tile that leads to the design
   partner application, so the list has the same structure as the left. */
.hub-beyond-list {
    padding: 24px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}
.hub-beyond-label {
    margin: 0 0 16px;
    color: var(--in-ink);
    font: 600 24px / 32px var(--font);   /* H3: same size as the card titles */
    letter-spacing: -0.48px;
}
.hub-beyond-list ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hub-beyond-list li {
    list-style: none;                    /* beats main.css "main ul li" disc */
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid #E4E4E7;           /* Primary Colors/Gray/200 */
    border-radius: 12px;
    color: var(--in-ink);
    font: 600 15px / 20px var(--font);
}
.hub-tile-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--in-purple-bg);
}
.hub-tile-icon svg {
    fill: none;
    stroke: var(--in-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hub-beyond-list li.hub-tile-more {
    grid-column: 1 / -1;
    padding: 0;
    border: 1.5px dashed #CDBEF4;        /* Primary Colors/Primary/300 */
    background: #FAF8FF;
}
.hub-tile-more a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    color: var(--in-body);
    font: 400 15px / 20px var(--font);
    text-decoration: none;
    transition: background .15s;
}
.hub-tile-more a:hover,
.hub-tile-more a:focus-visible {
    background: var(--in-purple-bg);
    color: var(--in-body);
    text-decoration: none;
}
.hub-tile-more a:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}
.hub-tile-more strong {
    color: var(--in-brand);
    font-weight: 600;
}

/* the reused homepage carousel sits right under the IT page's dark results
   band, so it drops most of its top padding there (and only there) */
.industry-results + .section-testimonials {
    padding-top: 24px;
}

/* ------------------------------------------------------------- responsive */
/* Figma has no tablet/mobile frames for this page yet; these are judgment
   calls in line with the other redesigned pages. */
@media (max-width: 1100px) {
    .industry-hero .hero-grid { flex-direction: column; }
    .industry-hero .hero-photo { flex: none; aspect-ratio: 790 / 520; }
    .industry-hero .hero-stats { flex-direction: row; }
}
/* Side columns get too narrow to read next to a 490px illustration, so the
   row stacks: intro text, illustration, problem text. */
@media (max-width: 1000px) {
    .industry-bidteam .bidteam-row { flex-direction: column; align-items: center; gap: 32px; }
    .industry-bidteam .bidteam-text { max-width: 600px; padding: 0; text-align: center; }
    .industry-bidteam .bidteam-text--bottom { align-self: center; }
    .industry-challenges .challenges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .industry-challenges .challenges-grid { grid-template-columns: 1fr; }
    /* single column: let each card hug its own text again */
    .industry-challenges .challenges-panel--cleaning .challenges-grid { grid-auto-rows: auto; }
}
/* Steps stack text-then-image (markup order) once side by side gets cramped. */
@media (max-width: 1000px) {
    .industry-how .how-intro { flex-direction: column; gap: 24px; }
    .industry-how .step,
    .industry-how .step--reverse { flex-direction: column; align-items: stretch; gap: 24px; }
    .industry-how .step-text,
    .industry-how .step-art { flex: none; }
    .industry-how .step-art { max-width: 634px; }
    .industry-works .wrap { flex-direction: column; align-items: stretch; gap: 16px; }
    .industry-works .works-text,
    .industry-works .works-art { flex: none; }
    /* explicit width: with auto margins a flex item shrinks to its content,
       and a lazy image has no content width until it loads */
    .industry-works .works-art { width: 100%; max-width: 520px; margin: 0 auto; }
    .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-beyond-panel { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
}
@media (max-width: 900px) {
    .industry-how { padding: 72px 0; }
    .industry-how .wrap { gap: 56px; }
    .industry-how h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-how h3,
    .industry-how .how-intro-title { font-size: 26px; line-height: 34px; letter-spacing: -0.78px; }
    .industry-how h3 { margin-bottom: 16px; }
    /* banner gets taller than wide: switch the fixed Figma crop to a cover
       crop centred on the person, and darken evenly so text stays legible */
    .industry-cta .cta-banner { padding: 48px 24px; }
    .industry-cta .cta-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
    .industry-cta .cta-banner::before { background: rgba(0, 0, 0, .5); }
    .industry-cta .cta-content { min-height: 0; gap: 32px; }
    .industry-cta .cta-title { font-size: 30px; line-height: 38px; letter-spacing: -0.9px; }
    .industry-security { padding: 72px 0 48px; }
    .industry-security .security-head { margin-bottom: 32px; }
    .industry-security h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-security .security-cards { grid-template-columns: 1fr; }
    .industry-works { padding-bottom: 48px; }
    .industry-market { padding: 48px 0 72px; }
    .industry-market .wrap { gap: 40px; }
    .industry-market h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-market .market-stats { grid-template-columns: 1fr; gap: 24px; }
    .industry-market .market-close { flex-direction: column; align-items: stretch; margin-top: -16px; }
    .industry-market .market-bars { width: 100%; max-width: 436px; }
    .industry-works h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-works .hero-actions { margin-top: 32px; }
    .industry-compare { padding: 72px 0 32px; }
    .industry-compare .compare-head { margin-bottom: 32px; }
    .industry-compare h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    /* table keeps its three columns on a phone; it just gets tighter */
    .industry-compare .compare-table thead td { width: 40%; }
    .industry-compare .compare-table th,
    .industry-compare .compare-table td { height: auto; padding: 14px 12px; font-size: 14px; line-height: 20px; }
    .industry-compare .compare-table thead th { padding: 14px 8px; font-size: 15px; line-height: 22px; border-radius: 12px 12px 0 0; }
    .industry-compare tbody th span { font-size: 12px; line-height: 16px; }
    .industry-compare tbody tr:first-child th { border-top-left-radius: 12px; }
    .industry-compare tbody tr:last-child th { border-bottom-left-radius: 12px; }
    .industry-compare tbody tr:last-child .col-bp { border-bottom-right-radius: 12px; }
    .industry-compare .compare-summary { flex-direction: column; align-items: flex-start; padding: 32px 24px 0; }
    .industry-compare .compare-result { font-size: 26px; line-height: 34px; letter-spacing: -0.78px; }
    .industry-compare .compare-result img { width: 40px; height: auto; }
    .industry-compare .compare-art { align-self: center; width: min(355px, 100%); }
    .industry-compare .compare-cta { min-height: 420px; gap: 32px; }
    .industry-compare .compare-mark { top: 50%; width: 400px; transform: translate(-50%, -50%); }
    .industry-compare .compare-cta-title { font-size: 30px; line-height: 38px; letter-spacing: -0.9px; }
    .industry-results { padding: 72px 0; }
    .industry-results .results-head { margin-bottom: 32px; }
    .industry-results h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    /* photo box gets taller than the Figma band; switch to a centred cover crop */
    .industry-results .results-photo { aspect-ratio: 4 / 3; margin-bottom: 32px; }
    .industry-results .results-photo img { top: 0; height: 100%; object-fit: cover; }
    .industry-results .results-stats { flex-direction: column; gap: 24px; }
    .industry-results .results-stat--mid { flex: 1; }
    .industry-results .results-stat .results-num { font-size: 30px; line-height: 40px; }
    .industry-faq.section-faq { padding: 72px 0; margin: 0; }
    .industry-final { padding-bottom: 40px; }
    .industry-final .final-banner { padding: 56px 24px 220px; }
    /* decoration drops below the text on phones instead of behind it */
    .industry-final .final-deco { top: auto; bottom: -40px; right: 50%; transform: translateX(50%) scale(.6); transform-origin: bottom center; }
    .industry-final h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-final .final-content p { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
    .industry-hero.hub-hero { padding-bottom: 56px; }
    .hub-industries h2, .hub-beyond h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    /* the reused testimonials and FAQ headings come from main.css/faq.css at
       36px on phones; match the other section H2s on industry pages */
    .industry-page .section-testimonials h2,
    .industry-page .section-faq h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .hub-industries { padding-bottom: 72px; }
    .hub-beyond { padding-top: 72px; }
}
@media (max-width: 900px) {
    .industry-bidteam { padding: 48px 0 72px; }
    .industry-bidteam h2 { margin-bottom: 40px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-challenges .challenges-panel { padding: 48px 16px 16px; }
    .industry-challenges .challenges-intro { margin-bottom: 32px; }
    .industry-challenges h2 { margin-bottom: 16px; font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-hero { padding: 130px 0 48px; }
    .industry-hero h1 { font-size: 40px; line-height: 46px; letter-spacing: -1.2px; }
    .industry-hero .br-desktop { display: none; }
    .industry-hero .hero-actions { margin-top: 32px; }
    .industry-hero .hero-proof { margin-top: 56px; }
    .industry-hero .hero-kicker { font-size: 16px; line-height: 24px; align-items: flex-start; text-align: left; }
    .industry-hero .hero-kicker img { margin-top: 2px; }
    .industry-hero .hero-stats { flex-direction: column; }
    .industry-hero .stat-title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 560px) {
    .industry-hero h1 { font-size: 34px; line-height: 40px; }
    .industry-hero .hero-actions { flex-direction: column; align-items: stretch; }
    .industry-hero .hero-photo { aspect-ratio: 4 / 3; }
}

/* Hub phone layout. Kept last: the 1000px block above (two-column cards)
   comes later in the file than the 640px block, so a phone rule placed
   there would lose to it. */
@media (max-width: 640px) {
    .hub-cards { grid-template-columns: 1fr; }
    .hub-beyond-panel { padding: 32px 20px; }
    .hub-beyond-list { padding: 16px; }
    .hub-beyond-list ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .industry-security--dark { padding: 72px 0; }
    .industry-cta--spaced { padding-bottom: 72px; }
    .industry-security--dark .security-title { font-size: 22px; line-height: 29px; }
    .industry-security--dark + .industry-works { padding-top: 56px; }
}

@media (max-width: 1000px) {
    .industry-case .case-cards { grid-template-columns: 1fr; gap: 16px; }
    .industry-case .case-icon { margin-bottom: 24px; }
}
@media (max-width: 640px) {
    .industry-case { padding-top: 72px; }
    .industry-case h2,
    .industry-process h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.96px; }
    .industry-case h2 { margin-bottom: 32px; }
    .industry-process { padding: 72px 0; }
    .industry-process .process-head,
    .industry-process .process-photo,
    .industry-process .process-title { margin-bottom: 32px; }
    .industry-process .process-timeline { margin-bottom: 40px; }
    .industry-process .process-photo { border-radius: 16px; }
    .industry-process .process-photo img { aspect-ratio: 16 / 9; }
    .industry-process .process-title { font-size: 20px; line-height: 28px; }
}