/* ============================================================
   INDUSTRIES AND TEAMS (home page, 24 Oct 2026; rebuilt simple,
   Dom: the name must stand out, too much in each box). Six cards, 3 a
   row. A card is three things: a big icon tile, the industry or team in
   large type, and at the foot the tools it works with (a small stack of
   logos) plus Explore more on the three that link (Estate agents, IVA
   firms, Post-call admin). Two columns on tablets, one on phones.
   Since 26 Oct 2026 a LIGHT section (Dom: "add light background but add
   some well fitting pattern to highlight that section"; it was a plum
   band, and Lower costs stays the page's one dark band). Plain since it
   moved above the setup section, which took its colour clouds (below).
   ============================================================ */
.in {
    position: relative; isolation: isolate; overflow: hidden; padding: 112px 0;
    background: var(--cream, #FCF9F7); color: var(--ink, #16121A); border-top: 1px solid var(--line, #EAE3E1);
}
.in .sec-head { margin-bottom: 56px; }

.in-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.in-card {
    display: flex; flex-direction: column; min-width: 0; min-height: 232px; padding: 28px 28px 24px; border-radius: 24px;
    background: #fff; border: 1px solid #E8E0E4; color: inherit; text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .05), 0 18px 40px -28px rgba(20, 17, 26, .28);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.in-card:hover {
    transform: translateY(-3px); border-color: #E7B2E7;
    box-shadow: 0 1px 2px rgba(20, 17, 26, .05), 0 26px 50px -28px rgba(213, 59, 213, .4);
}
a.in-card:focus-visible { outline: 2px solid #4C6BEE; outline-offset: 3px; }

/* the icon (Dom, 26 Oct 2026: "icon boxes look very bad"): one calm style
   for all six, a soft tinted tile with a thin ring of its own colour and the
   glyph in that colour, no gradient or shadow; each card its own colour, so
   the six read as six worlds: estate magenta, IVA violet, call-heavy blue,
   sales and support orange, operations green, any workflow neutral */
.in-grid > .in-card:nth-child(1) { --h: #C42EC4; --hb: #FCEFFC; }
.in-grid > .in-card:nth-child(2) { --h: #7444E0; --hb: #F3EEFF; }
.in-grid > .in-card:nth-child(3) { --h: #3F5EE0; --hb: #EDF1FF; }
.in-grid > .in-card:nth-child(4) { --h: #DD6516; --hb: #FFF2E8; }
.in-grid > .in-card:nth-child(5) { --h: #1E8C5C; --hb: #E9F7F0; }
.in-grid > .in-card:nth-child(6) { --h: #5B5462; --hb: #F4F1F3; }
.in-ico {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
    background: var(--hb, #FCEFFC); color: var(--h, #C42EC4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h, #C42EC4) 18%, transparent);
    transition: background-color .25s ease, color .25s ease;
}
.in-ico svg { width: 24px; height: 24px; }
.in-card--team .in-ico { background: var(--hb, #FCEFFC); color: var(--h, #C42EC4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h, #C42EC4) 18%, transparent); }
.in-grid > .in-card:nth-child(6) .in-ico { box-shadow: none; outline: 1.5px dashed #CFC6CC; outline-offset: -1.5px; }
/* hovered, the tile fills with its colour */
a.in-card:hover .in-ico { background: var(--h, #C42EC4); color: #fff; }

/* the name: the point of the card */
.in-card h3 { margin: 22px 0 0; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--ink, #16121A); text-wrap: balance; }

/* the foot: the tools, and Explore more */
.in-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; }
.in-logos { display: flex; align-items: center; }
.in-logos > span {
    display: grid; place-items: center; width: 30px; height: 30px; margin-left: -7px;
    border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ECE5E8;
}
.in-logos > span:first-child { margin-left: 0; }
.in-logos img { width: 16px; height: 16px; display: block; }
.in-logos--any {
    padding: 5px 12px; border-radius: 999px; border: 1px dashed #E7B2E7;
    font-size: .8125rem; font-weight: 700; color: var(--brand-magenta, #D53BD5);
}
.in-go { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--ink, #16121A); white-space: nowrap; }
.in-go svg { width: 14px; height: 14px; color: var(--brand-magenta, #D53BD5); transition: transform .2s ease; }
a.in-card:hover .in-go svg { transform: translateX(3px); }

@media (max-width: 1023px) { .in-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 640px) {
    .in { padding: 80px 0; }
    .in .sec-head { margin-bottom: 36px; }
    .in-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .in-card { min-height: 0; padding: 22px 20px 20px; }
    .in-ico { width: 44px; height: 44px; border-radius: 13px; }
    .in-ico svg { width: 22px; height: 22px; }
    .in-card h3 { margin-top: 16px; font-size: 1.375rem; }
    .in-foot { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .in-card, .in-go svg { transition: none; } }