/* DIFWEB-261 — the redesigned solution pages (Figma file
   YHP2SMNoNGEJZJGN16fI3Z, page 22375:15904; desktop 1790 only, 1024/768/375
   derived). The pages are built on the v2 service kit and link, in order,
   cases-carousel.css → sv2-blocks.css → service-v2.css → this file. Every
   rule here is scoped under `.page.-solution-v2` (the wrapper is
   `page -service-v4 -service-team -service-v5 -solution-v2`), so no service
   page can be affected. Kit extensions any page may use (the hero ghost pill
   and wide copy, the 'tile' / 'mini' grids, the 4-column stacked grid, the
   pill under a grid) live in service-v2.css instead; this file holds only
   what the solution comps draw differently from the service comps.

   Not part of styles.min.css, so the PurgeCSS postbuild never touches it. */

/* ---- Awards + review band: the comp's 120px padding (the kit's section
   rhythm is 128). ---------------------------------------------------------- */
@media (min-width: 1280px) {
  .page.-solution-v2 .sv2-proof { padding: 120px 0; }
}

/* ---- Hero logo strip → section end: the home page's gap at every width
   (Vadim's staging QA, 1 Oct: "the same as main page"). Home measures 44px
   from the logos' bottom to the hero's end at ≥768 and 32 at 375; the comps'
   85 / 64 / 48 read as a dark band. ≥1280 the strip's own 44 does it (each
   page's hero rule sets padding-bottom 0); below 1280 the strip has none, so
   the hero's padding carries it. --------------------------------------------- */
@media (max-width: 1279px) {
  .page.-solution-v2 .sv2-hero { padding-bottom: 44px; }
}
@media (max-width: 767px) {
  .page.-solution-v2 .sv2-hero { padding-bottom: 32px; }
}

/* ---- 'feature' grids ("Project Approaches"): the solution comps draw
   646 × 288 cards (kit 256), 32px between text and art (kit 48), a 358px text
   column (kit 342) and 20px title → body (kit 24), in a 128px section with
   80px head → grid (kit 120 / 64). Same metrics on Enterprise and Healthcare. */
@media (min-width: 1280px) {
  .page.-solution-v2 .sv2-cards.-feature { padding: 128px 0; }
  .page.-solution-v2 .sv2-cards.-feature .sv2-head { margin-bottom: 80px; }
  .page.-solution-v2 .sv2-cards.-feature .sv2-card { min-height: 288px; gap: 32px; }
  .page.-solution-v2 .sv2-cards.-feature .sv2-card__text { gap: 20px; max-width: 358px; }
  /* 'stacked' ("Enterprise Essentials"): the comp's 128px section (kit 120). */
  .page.-solution-v2 .sv2-cards.-stacked { padding: 128px 0; }
}

/* ---- Hero: this page's photo (a man at a laptop, warm window light).
   Its own scrim, as every v2 hero photo has: the comp's 197.27° fade plus a
   left shade ≥1280 (the H1 and intro run over the bright wall and the
   laptop screen); below 1280 the kit's top-down scrims apply. AA measured per glyph on real
   pixels after the page fade-in. ------------------------------------------ */
@media (min-width: 1280px) {
  .page.-solution-v2 .sv2-hero.-custom .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.27deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
  /* The logo row sits 80 under the pills (kit 64, comp 22379:9929). The comp's
     extra 41 under the strip is gone: see "Hero logo strip → section end". */
  .page.-solution-v2 .sv2-hero.-custom { padding-bottom: 0; }
  .page.-solution-v2 .sv2-hero.-custom .sv2-hero__inner { gap: 80px; }
}

/* ---- Hero: the Enterprise photo (a team at a whiteboard and a wall
   screen, warm window light). Its own scrim: the comp's 197.27° fade plus a
   left shade ≥1280 (the H1 runs over the bright window and the lit wall);
   below 1280 the kit's top-down scrims apply. Same hero rhythm as Custom
   (comp 22377:49797: the same 907px hero). AA measured per glyph on real
   pixels after the page fade-in. The copy column is the comp's 718px
   (1300 − 72 − an empty 510 column; the kit's 614 would wrap the H1 to three
   lines, Custom's 747 the intro after "business,"). ---------------------- */
.page.-solution-v2 .sv2-hero.-enterprise .sv2-hero__copy { max-width: 718px; }
@media (min-width: 1280px) {
  .page.-solution-v2 .sv2-hero.-enterprise .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.5) 0%, rgba(4, 2, 16, 0.35) 35%, rgba(4, 2, 16, 0) 55%),
      linear-gradient(197.27deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
  .page.-solution-v2 .sv2-hero.-enterprise { padding-bottom: 0; }
  .page.-solution-v2 .sv2-hero.-enterprise .sv2-hero__inner { gap: 80px; }
}

/* ---- Cases → contact form (comp 22379:10219 / 22379:10337): the form band
   sits on the light ground, not white, and at ≥1280 the rhythm is the comp's
   80 + 80 (carousel bottom 80, form 80 above and below: the 860px band)
   instead of the service pages' 32 + 128. Below 1280 the kit's adjacency
   rhythm stays. ------------------------------------------------------------ */
.page.-solution-v2 .get-started-v5 { background: var(--sv2-bg-light); }
@media (min-width: 1280px) {
  .page.-solution-v2 .cases-carousel-v4 { padding-bottom: 80px; }
  .page.-solution-v2 .cases-carousel-v4 + .get-started-v5 { padding-top: 80px; padding-bottom: 80px; }
}

/* ==== healthcare (DIFWEB-261) ==== */
/* /solutions/custom-healthcare-software-development-company/ (frame
   22381:12508). Hero: the comp's 718px copy column (1300 − 72 gap − a 510
   empty column) and this photo's own scrim (a woman at a laptop with a bright
   clinical UI on screen, warm window light): the comp's 197.27° fade plus a
   left shade ≥1280 deep enough for the H1 and intro where they cross the
   laptop screen; below 1280 the kit's top-down scrims apply. AA measured per
   glyph on real pixels after the page fade-in. The 13 'feature' cards and the
   rest of the page use the shared solution rules above. */
.page.-solution-v2 .sv2-hero.-healthcare .sv2-hero__copy { max-width: 718px; }
@media (min-width: 1280px) {
  .page.-solution-v2 .sv2-hero.-healthcare .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.6) 0%, rgba(4, 2, 16, 0.5) 40%, rgba(4, 2, 16, 0) 62%),
      linear-gradient(197.27deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
  /* The comp breaks the H1 after "Software" (Figma's Gilroy runs a few px
     wider than the browser's, so at 718 the browser keeps "and" on line 1). */
  .page.-solution-v2 .sv2-hero.-healthcare .sv2-hero__title { max-width: 660px; }
  /* As Custom's: the logo row 80 under the pills, the home page's 44 below it. */
  .page.-solution-v2 .sv2-hero.-healthcare { padding-bottom: 0; }
  .page.-solution-v2 .sv2-hero.-healthcare .sv2-hero__inner { gap: 80px; }
}
/* ==== end healthcare ==== */

/* ==== ai-integration (DIFWEB-261) ==== */
/* /solutions/ai-driven-software/ (frame 22376:20525). Every rule is scoped
   `.page.-solution-v2.-ai-integration`: the hero scrim for this photo (the
   kit's Methodology photo) and the two page-only blocks, AiHelpGridV2
   ("How can AI help your business?", .sol-ai-help) and AiUseCasesV2
   ("Example of implementation", .sol-ai-cases, components/solutions/v2/). */

/* ---- Hero: the comp's 197.27° fade + the left shade ≥1280 (the H1 runs
   over the bright whiteboard); below 1280 the kit's top-down scrims. AA
   measured per glyph on real pixels after the page fade-in. Rhythm as the
   Custom comp: logo row 80 under the pills, the home page's 44 below it. */
@media (min-width: 1280px) {
  .page.-solution-v2.-ai-integration .sv2-hero.-ai-integration .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.55) 0%, rgba(4, 2, 16, 0.4) 35%, rgba(4, 2, 16, 0) 60%),
      linear-gradient(197.27deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
  .page.-solution-v2.-ai-integration .sv2-hero.-ai-integration { padding-bottom: 0; }
  .page.-solution-v2.-ai-integration .sv2-hero.-ai-integration .sv2-hero__inner { gap: 80px; }
}

/* ---- "How can AI help your business?" (22376:20613): 100px band, a 32/40
   h2 64 above a 3 × 3 grid (8 gaps) of white r24 cards, padding 32: a 48px
   icon slot (32px glyph), 16, then the 20/24 title, 12, Text/M at 80%. -- */
.page.-solution-v2.-ai-integration .sol-ai-help .sv2-head { margin-bottom: 64px; }
.page.-solution-v2.-ai-integration .sol-ai-help .sv2-h2 { font-size: 32px; line-height: 40px; letter-spacing: 0; }
.page.-solution-v2.-ai-integration .sol-ai-help__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sv2-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-solution-v2.-ai-integration .sol-ai-help__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-solution-v2.-ai-integration .sol-ai-help__icon { flex: none; width: 48px; height: 48px; }
.page.-solution-v2.-ai-integration .sol-ai-help__text { display: flex; flex-direction: column; gap: 12px; }
.page.-solution-v2.-ai-integration .sol-ai-help .sv2-h4,
.page.-solution-v2.-ai-integration .sol-ai-cases .sv2-h4 { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
.page.-solution-v2.-ai-integration .sol-ai-help .sv2-text-m,
.page.-solution-v2.-ai-integration .sol-ai-cases__card .sv2-text-m { opacity: 0.8; }
@media (min-width: 1280px) {
  .page.-solution-v2.-ai-integration .sol-ai-help { padding: 100px 0; }
  /* The comp's grid is 724.4 tall: three 236px rows (content needs 208–230). */
  .page.-solution-v2.-ai-integration .sol-ai-help__grid { grid-auto-rows: minmax(236px, auto); }
}
@media (max-width: 1279px) {
  .page.-solution-v2.-ai-integration .sol-ai-help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page.-solution-v2.-ai-integration .sol-ai-help .sv2-head { margin-bottom: var(--sv2-head-gap); }
}
@media (max-width: 767px) {
  .page.-solution-v2.-ai-integration .sol-ai-help__grid { grid-template-columns: 1fr; }
  .page.-solution-v2.-ai-integration .sol-ai-help__card { padding: 24px; }
  .page.-solution-v2.-ai-integration .sol-ai-help .sv2-h2 { font-size: 28px; line-height: 32px; letter-spacing: -0.56px; }
}

/* ---- "Example of implementation" (22376:20831): 80 top; head (H2 + a
   Text/L line, 15 apart) 64 above a strip of seven equal tabs on a 1px
   #e2e2f3 rule — padding 32/24/24, a 40px glyph, 16, Gilroy Bold 16/22; the
   active tab on a white fade (from 50%) with a 2px purple→red underline —
   then 40 to the cards (three 428px across ≥1280, 8 gaps, white r24, padding
   32, title 16 above the Text/M body) and 40 + 80 below. The inactive label
   is the comp's #7e80a2 darkened to --sv2-label: #7e80a2 on the #f5f5fb ground
   is 3.6:1, under AA for 16px text. Below 1280 the tabs share the row down
   to 132px each (labels wrap), then the strip scrolls sideways. */
.page.-solution-v2.-ai-integration .sol-ai-cases .sv2-head { gap: 15px; margin-bottom: 64px; }
.page.-solution-v2.-ai-integration .sol-ai-cases .sv2-head__intro {
  margin-top: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.page.-solution-v2.-ai-integration .sol-ai-cases__tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e2e2f3;
  overflow-x: auto;
  scrollbar-width: none;
}
.page.-solution-v2.-ai-integration .sol-ai-cases__tabs::-webkit-scrollbar { display: none; }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px 24px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--sv2-label);
  transition: color 0.2s ease;
}
.page.-solution-v2.-ai-integration .sol-ai-cases__tab svg { flex: none; width: 40px; height: 40px; }
/* Tab glyphs (the comp's exports, inline): inactive = the comp's #2E186A ink
   on a #D9D1ED tint; active = the comp's purple→orange (`#sol-ai-tab-ink`,
   defined in the component) on its #FBD7E6 tint, Healthcare's pulse #FE7624. */
.page.-solution-v2.-ai-integration .sol-ai-cases__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.page.-solution-v2.-ai-integration .sol-ai-cases__icon .-ink,
.page.-solution-v2.-ai-integration .sol-ai-cases__icon .-accent { fill: #2e186a; }
.page.-solution-v2.-ai-integration .sol-ai-cases__icon .-tint { fill: #d9d1ed; }
.page.-solution-v2.-ai-integration .sol-ai-cases__icon .-hole { fill: #fff; }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab.-active .sol-ai-cases__icon .-ink { fill: url(#sol-ai-tab-ink); }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab.-active .sol-ai-cases__icon .-tint { fill: #fbd7e6; }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab.-active .sol-ai-cases__icon .-accent { fill: #fe7624; }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab:hover { color: var(--sv2-ink); }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab:focus-visible { outline: 2px solid var(--sv2-ink); outline-offset: -2px; border-radius: 4px; }
.page.-solution-v2.-ai-integration .sol-ai-cases__tab.-active {
  color: var(--sv2-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #fff 100%);
}
.page.-solution-v2.-ai-integration .sol-ai-cases__tab.-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sv2-number);
}
.page.-solution-v2.-ai-integration .sol-ai-cases__panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv2-gap);
  padding-top: 40px;
}
.page.-solution-v2.-ai-integration .sol-ai-cases__panel[hidden] { display: none; }
.page.-solution-v2.-ai-integration .sol-ai-cases__panel:focus-visible { outline: 2px solid var(--sv2-ink); outline-offset: 4px; border-radius: var(--sv2-radius); }
.page.-solution-v2.-ai-integration .sol-ai-cases__card {
  flex: 0 1 calc((100% - 2 * var(--sv2-gap)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
@media (min-width: 1280px) {
  .page.-solution-v2.-ai-integration .sol-ai-cases { padding: 80px 0 120px; }
  /* The comp's cards are 192 (two are drawn 214, one hugs at 148: the frame
     is inconsistent); 192 as the floor, rows share the tallest card. */
  .page.-solution-v2.-ai-integration .sol-ai-cases__card { min-height: 192px; }
}
@media (max-width: 1279px) {
  .page.-solution-v2.-ai-integration .sol-ai-cases .sv2-head { margin-bottom: var(--sv2-head-gap); }
  .page.-solution-v2.-ai-integration .sol-ai-cases__tab { min-width: 132px; padding: 32px 12px 24px; }
  /* Overflow made visible: the strip bleeds to the viewport edge (the wrap's
     40px) so a cut-off tab always shows, and fades out on the side(s) with
     more tabs (classes set by the component from the scroll position). */
  .page.-solution-v2.-ai-integration .sol-ai-cases__tabs {
    margin: 0 -40px;
    padding: 0 40px;
    scroll-padding-inline: 40px;
  }
  .page.-solution-v2.-ai-integration .sol-ai-cases__tabs.-more-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  }
  .page.-solution-v2.-ai-integration .sol-ai-cases__tabs.-more-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
    mask-image: linear-gradient(90deg, transparent, #000 72px);
  }
  .page.-solution-v2.-ai-integration .sol-ai-cases__tabs.-more-start.-more-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  }
  .page.-solution-v2.-ai-integration .sol-ai-cases__card { flex-basis: calc((100% - var(--sv2-gap)) / 2); }
}
@media (max-width: 767px) {
  /* 15 + 2 × 136 = 287: the third tab is always cut at 375 (≈65% shown). */
  .page.-solution-v2.-ai-integration .sol-ai-cases__tab { min-width: 136px; padding: 24px 8px 20px; font-size: 14px; line-height: 20px; }
  .page.-solution-v2.-ai-integration .sol-ai-cases__tabs { margin: 0 -15px; padding: 0 15px; scroll-padding-inline: 15px; }
  .page.-solution-v2.-ai-integration .sol-ai-cases__panel { padding-top: 32px; }
  .page.-solution-v2.-ai-integration .sol-ai-cases__card { flex-basis: 100%; padding: 24px; }
}
/* ==== end ai-integration ==== */

/* ==== mvp (DIFWEB-261) ==== */
/* /solutions/mvp-development/ (frame 22384:12626). Wrapper adds `-mvp`. */

/* ---- Hero: this page's photo (a team at a whiteboard). Its own scrim ≥1280:
   the comp's 197.27° fade plus a left shade, and a left-of-centre crop. The
   fade alone clears AA at 1440 (H1 4.73:1) but not at 1280, where "can" runs
   onto the lit whiteboard (2.37:1); with the shade and the crop the per-glyph
   minimum (real pixels, after the fade-in) is ≥5.6:1 on the H1 and ≥4.5:1 on
   the rest at every width ≥1280. Below 1280 the kit's top-down scrims apply.
   Geometry as Custom's (comp 22384:15622: logo strip pb 44, 80 under the
   pills), with the comp's 718px copy column (1300 − 72 − a 510 right column:
   the intro breaks after "and" as drawn, the H1 keeps its three lines). */
@media (min-width: 1280px) {
  .page.-solution-v2.-mvp .sv2-hero.-mvp .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.55) 0%, rgba(4, 2, 16, 0.4) 35%, rgba(4, 2, 16, 0) 60%),
      linear-gradient(197.27deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
  .page.-solution-v2.-mvp .sv2-hero.-mvp .sv2-hero__bg img { object-position: 20% 50%; }
  .page.-solution-v2.-mvp .sv2-hero.-mvp { padding-bottom: 0; }
  .page.-solution-v2.-mvp .sv2-hero.-mvp .sv2-hero__inner { gap: 80px; }
  .page.-solution-v2.-mvp .sv2-hero.-wide-copy .sv2-hero__copy { max-width: 718px; }
}

/* ---- "MVP development approaches" (22384:13251): the comp's 646 × 260
   cards (Custom's 288), padding 48, 24 between text and a 164px illustration,
   in an 80px section with 80 head → grid (Custom's 128 / 80). */
@media (min-width: 1280px) {
  .page.-solution-v2.-mvp .sv2-cards.-feature { padding: 80px 0; }
  .page.-solution-v2.-mvp .sv2-cards.-feature .sv2-card { min-height: 260px; gap: 24px; }
  .page.-solution-v2.-mvp .sv2-cards.-feature .sv2-card__img { flex-basis: 164px; width: 164px; height: 164px; }
}

/* ---- "Integrations & technology" ('mini', 22384:13302): 80px section,
   80 head → grid. */
@media (min-width: 1280px) {
  .page.-solution-v2.-mvp .sv2-cards.-mini { padding: 80px 0; }
  .page.-solution-v2.-mvp .sv2-cards.-mini .sv2-head { margin-bottom: 80px; }
}

/* ---- Contact form: the MVP comp draws it on white (Custom's is on the
   light ground); the 80 + 80 rhythm after the cases carousel stays. */
.page.-solution-v2.-mvp .get-started-v5 { background: #fff; }

/* ---- Banner pill: "Book a free conversation" fits one line at ≥360 (the
   kit lets a banner label wrap <768 for longer labels). */
@media (min-width: 360px) and (max-width: 767px) {
  .page.-solution-v2.-mvp .sv2-banner .sv2-pill__label { white-space: nowrap; }
}
/* ==== end mvp ==== */

/* ---- Awards band → first block (Vadim's staging QA, 1 Oct: the gap was too
   large — 248px at 1440 on Custom / Enterprise / Healthcare, 200 on MVP). Half
   the section rhythm on each side, so the pair reads as one section gap: 128
   at ≥1280, 96 below, 64 at <768. Last in the file and scoped through
   `.middle >` so it outweighs the per-page 'feature' paddings above (MVP's 80);
   the next block is Project Approaches, Healthcare's grid, or AI's tech stack. */
.page.-solution-v2 .middle > .sv2-proof { padding-bottom: calc(var(--sv2-section-y) / 2); }
.page.-solution-v2 .middle > .sv2-proof + .sv2-section { padding-top: calc(var(--sv2-section-y) / 2); }

/* ---- First card grid → Tech stack (Custom, Healthcare; Vadim's staging QA,
   1 Oct, round 2: "a lot of space" — 256 at ≥1280, the full section rhythm
   on both sides). Same treatment as the awards band above: half the rhythm
   each side, 128 / 96 / 64. MVP's tech stack follows a banner, not a grid,
   so it is untouched. */
.page.-solution-v2 .middle > .sv2-cards.-feature:has(+ .sv2-tech) { padding-bottom: calc(var(--sv2-section-y) / 2); }
.page.-solution-v2 .middle > .sv2-cards.-feature + .sv2-tech { padding-top: calc(var(--sv2-section-y) / 2); }