/* DIFWEB-262 / DIFWEB-340 — landing pages v2 (Figma YHP2SMNoNGEJZJGN16fI3Z,
   page 22781:29241 "Landing Pages 092026"; desktop 1790 only, 1024/768/375
   derived as on the v2 service pages).

   Rendered by components/landing/v2/LandingPageV2.tsx, which links, in order,
   cases-carousel.css (only with a cases section) → sv2-blocks.css →
   service-v2.css → this file. Every rule is scoped under `.page.-landing-v2`
   (wrapper `page -service-v4 -service-team -service-v5 -landing-v2 -<slug>`),
   so no other page can be affected — the kit extensions added for these pages
   (ServiceCardGridV2 `calloutPanel` + card `bestFor`, CtaBannerV2 `eyebrow`,
   MethodologySection `variant="loop"`, EngagementModelsV2 card `cta`) are
   styled here too, because only these pages render them.

   Not part of styles.min.css, so the PurgeCSS postbuild never touches it.
   Served unversioned at max-age=86400: a CSS-only fix can look unshipped for
   24h in a browser that already has the file (DIFWEB-228).

   Layout: shared rules first; per-page tweaks go at the END of the file,
   one block per page between `/* ==== <slug> ==== *\/` and
   `/* ==== end <slug> ==== *\/` markers, scoped `.page.-landing-v2.-<slug>`. */

/* ---- Hero: the landing comps' copy column and type ----------------------- */
/* Comp (all seven pages): a 702px copy column, Text/L intro (Inter 16/24,
   −0.32), one pill, then the client-logo strip 80 under the copy with its own
   44px bottom padding. Same hero rhythm as the solution heroes (DIFWEB-261):
   ≥1280 the strip's 44 ends the hero; below, the hero's padding carries it. */
.page.-landing-v2 .sv2-hero__copy { max-width: 702px; }
.page.-landing-v2 .sv2-hero__intro {
  font-family: var(--sv2-font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}
/* A multi-paragraph intro (ServiceHeroV2 `intro: string[]`, the FAI/FDE
   comps): the paragraphs 16 apart. */
.page.-landing-v2 .sv2-hero__intros { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1280px) {
  .page.-landing-v2 .sv2-hero { padding-bottom: 0; }
  .page.-landing-v2 .sv2-hero__inner { gap: 80px; }
}
@media (max-width: 1279px) {
  .page.-landing-v2 .sv2-hero { padding-bottom: 44px; }
}
@media (max-width: 767px) {
  .page.-landing-v2 .sv2-hero { padding-bottom: 32px; }
}

/* ---- Awards + review band ------------------------------------------------ */
/* The comp's 120px band. The comps draw a FULL 120 + 120 to the first block,
   but Vadim's staging QA on these pages (5 Oct: "too much space between
   elements") gives them the solution pages' halved gap (solution-v2.css, his
   1 Oct QA there): half the section rhythm on each side, so the pair reads as
   one section gap — 128 at ≥1280, 96 below, 64 at <768. */
@media (min-width: 1280px) {
  .page.-landing-v2 .sv2-proof { padding: 120px 0; }
}
.page.-landing-v2 .middle > .sv2-proof { padding-bottom: calc(var(--sv2-section-y) / 2); }
.page.-landing-v2 .middle > .sv2-proof + .sv2-section { padding-top: calc(var(--sv2-section-y) / 2); }

/* ---- Consecutive light blocks (Vadim's staging QA, 5 Oct) ----------------- */
/* Two light sections back to back — card grids, the comparison table,
   engagement models, the tech stack — each carried the full rhythm, so the
   pair read as a double gap (240–260 at 1440). Same treatment as the awards
   band: half the rhythm on each side where one of them meets another. Dark
   bands (banner, methodology, featured case) keep their own rhythm. Scoped
   through `.middle >` so it outweighs the comparison's own 120 above. */
.page.-landing-v2 .middle > :is(.sv2-cards, .lv2-compare, .sv2-models, .sv2-tech):has(+ :is(.sv2-cards, .lv2-compare, .sv2-models, .sv2-tech)) {
  padding-bottom: calc(var(--sv2-section-y) / 2);
}
.page.-landing-v2 .middle > :is(.sv2-cards, .lv2-compare, .sv2-models, .sv2-tech) + :is(.sv2-cards, .lv2-compare, .sv2-models, .sv2-tech) {
  padding-top: calc(var(--sv2-section-y) / 2);
}

/* ---- Card "Best for:" footer (V2Card `bestFor`) ---------------------------- */
/* Comp: 24 under the body, a Text/S label over a Gilroy Bold 14/18 value, 4
   apart. The comp's label is the ink at 64% (3.9:1 on white for 12px); the
   kit's AA label grey is used instead (--sv2-label, 5.3:1). */
.page.-landing-v2 .sv2-card__best { display: flex; flex-direction: column; gap: 4px; }
.page.-landing-v2 .sv2-card__best-label {
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--sv2-label);
}
.page.-landing-v2 .sv2-card__best-value {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--sv2-ink);
}

/* An inline link in a card body (V2Card `link`, Vadim's QA 5 Oct: Claude
   Code's "→ Vibe Code Rescue"): the body's own ink, underlined like the FAQ
   links (service-v2.css). */
.page.-landing-v2 .sv2-card__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Dark statement panel under a card grid (ServiceCardGridV2
   `calloutPanel`, "The honest version") ------------------------------------- */
/* Comp: 64 under the cards, full width, r24, p48, 48 between a 120px r16
   image tile and the copy; 90° #131426 → #5E2767 (52.88%) → #B14C28; white
   eyebrow 12 above a Gilroy Bold 24/28 statement. White on the gradient's
   lightest stop (#B14C28) is 5.4:1. */
.page.-landing-v2 .sv2-cards__panel {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  padding: 48px;
  border-radius: var(--sv2-radius);
  background: linear-gradient(90deg, #131426 0%, #5e2767 52.88%, #b14c28 100%);
  color: var(--sv2-white);
}
.page.-landing-v2 .sv2-cards__panel-img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
}
.page.-landing-v2 .sv2-cards__panel-text { display: flex; flex-direction: column; gap: 12px; }
.page.-landing-v2 .sv2-cards__panel .sv2-eyebrow { color: var(--sv2-white); }
.page.-landing-v2 .sv2-cards__panel-statement {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  color: var(--sv2-white);
}
@media (max-width: 1279px) {
  .page.-landing-v2 .sv2-cards__panel { gap: 32px; margin-top: 48px; padding: 40px; }
}
@media (max-width: 767px) {
  /* Stacked: the gradient runs top → bottom so the copy keeps the dark end. */
  .page.-landing-v2 .sv2-cards__panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(160deg, #131426 0%, #5e2767 60%, #8a3a34 100%);
  }
  .page.-landing-v2 .sv2-cards__panel-img { flex-basis: 96px; width: 96px; height: 96px; }
  .page.-landing-v2 .sv2-cards__panel-statement { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
}

/* ---- Photo CTA banner eyebrow (CtaBannerV2 `eyebrow`) ------------------- */
.page.-landing-v2 .sv2-banner__eyebrow { color: var(--sv2-white); }
/* Below 1280 the panel crops the streak photo onto its bright orange band and
   the 12px eyebrow measured 4.37:1 (768) / 4.16:1 (375) under the kit's 20%
   overlay; 32% keeps every glyph ≥4.5:1 (per-glyph, real pixels). */
@media (max-width: 1279px) {
  .page.-landing-v2 .sv2-banner__panel:has(.sv2-banner__eyebrow)::after { background: rgba(0, 0, 0, 0.32); }
}

/* ---- Comparison table (ComparisonTableV2) ------------------------------- */
/* Comp (React 23139:10113): 120px section, 64 head → table; a label column
   and N equal option columns across the 1300 column; 24px of card padding
   above the header row and under the last row (grid rows 1 and n+3), a 64px
   header row; label cells Gilroy Bold 16/22, values Text/M, header cells
   Gilroy Bold 16/22; every cell ruled #E3E3F5 except the highlight card's last
   row; the highlight card #FAFAFF with the BuyVsBuild gradient border (3px),
   its cells inset 32 with a 24px green check 16 before each value. Comp rule
   #E3E3F5 on #F5F5FB is decorative (no text contrast requirement). */
.page.-landing-v2 .lv2-compare { padding: 120px 0; }
.page.-landing-v2 .lv2-compare .sv2-head { margin-bottom: 64px; }
.page.-landing-v2 .lv2-compare__table {
  display: grid;
  grid-template-columns: repeat(calc(var(--cols) + 1), minmax(0, 1fr));
  grid-template-rows: 24px 64px repeat(var(--n), auto) 24px;
}
.page.-landing-v2 .lv2-compare__row { display: contents; }
.page.-landing-v2 .lv2-compare__card {
  grid-column: var(--c);
  grid-row: 1 / -1;
  border: 3px solid transparent;
  border-radius: var(--sv2-radius);
  background:
    linear-gradient(#fafaff, #fafaff) padding-box,
    linear-gradient(90deg, #ffbd12 0%, #e03d3d 53.125%, #cd21e9 100%) border-box;
}
.page.-landing-v2 .lv2-compare__corner,
.page.-landing-v2 .lv2-compare__label,
.page.-landing-v2 .lv2-compare__cell {
  position: relative;
  z-index: 1;
  grid-column: var(--c);
  grid-row: var(--r);
  border-bottom: 1px solid #e3e3f5;
  color: var(--sv2-ink);
}
.page.-landing-v2 .lv2-compare__label,
.page.-landing-v2 .lv2-compare__cell.-head {
  padding: 16px 12px;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}
.page.-landing-v2 .lv2-compare__cell.-head { padding-top: 20px; padding-bottom: 20px; }
.page.-landing-v2 .lv2-compare__cell {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 12px;
  font-family: var(--sv2-font-text);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
}
.page.-landing-v2 .lv2-compare__cell.-highlight { margin: 0 3px; padding-left: 29px; padding-right: 29px; }
.page.-landing-v2 .lv2-compare__cell.-highlight.-last { border-bottom: 0; }
.page.-landing-v2 .lv2-compare__check { flex: 0 0 24px; width: 24px; height: 24px; }
.page.-landing-v2 .lv2-compare__col-name { display: none; }
.page.-landing-v2 .lv2-compare__note {
  margin-top: 64px;
  text-align: center;
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--sv2-label); /* comp: ink at 64% (3.9:1 for 12px) → the kit's AA grey */
}
@media (max-width: 1279px) {
  .page.-landing-v2 .lv2-compare { padding: var(--sv2-section-y) 0; }
  .page.-landing-v2 .lv2-compare .sv2-head { margin-bottom: var(--sv2-head-gap); }
  .page.-landing-v2 .lv2-compare__table { grid-template-columns: minmax(0, 0.8fr) repeat(var(--cols), minmax(0, 1fr)); }
  .page.-landing-v2 .lv2-compare__cell.-highlight { padding-left: 21px; padding-right: 17px; gap: 12px; }
  .page.-landing-v2 .lv2-compare__check { flex-basis: 20px; width: 20px; height: 20px; margin-top: 1px; }
  .page.-landing-v2 .lv2-compare__note { margin-top: 48px; }
}
/* Stacked <768: row by row — the label as a heading, then one line per option
   carrying the option's name; the recommended option's lines on its card
   colour with a yellow rule. The header row stays in the accessibility tree
   (visually hidden), so the table semantics are unchanged. */
@media (max-width: 767px) {
  .page.-landing-v2 .lv2-compare__table { display: block; }
  .page.-landing-v2 .lv2-compare__card { display: none; }
  .page.-landing-v2 .lv2-compare__row.-head {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .page.-landing-v2 .lv2-compare__row { display: block; margin-bottom: 24px; }
  .page.-landing-v2 .lv2-compare__label { display: block; padding: 0 0 8px; border-bottom: 0; }
  .page.-landing-v2 .lv2-compare__cell,
  .page.-landing-v2 .lv2-compare__cell.-highlight {
    margin: 0;
    padding: 12px 12px;
    border-bottom: 1px solid #e3e3f5;
  }
  .page.-landing-v2 .lv2-compare__cell.-highlight {
    border-left: 3px solid #f8b000;
    border-radius: 0 12px 12px 0;
    background: #fafaff;
  }
  .page.-landing-v2 .lv2-compare__col-name {
    display: block;
    margin-bottom: 2px;
    font-family: var(--sv2-font-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--sv2-label);
  }
  .page.-landing-v2 .lv2-compare__note { margin-top: 32px; }
}

/* ---- Methodology, landing variant (MethodologySection variant="loop") ---- */
/* Comp (React 23122:9673): the kit panel (90/80 padding, the same photo and
   fades), then 64 → "The loop, …" (Gilroy Bold 16/22) 32 above five 374×124
   frosted tiles (3 + 2, gap 8), 64 → four bordered figure tiles in one row
   (2px white 12%, r24, padding 30/24, value Gilroy Bold 20/24 over a Text/S
   label at 80%, 8 apart), 64 → the pill on its own row. The orange glow sits
   134px below the panel's bottom edge (the kit's Default sits 228 below). */
.page.-landing-v2 .sv2-method.-loop .sv2-method__panel::after { bottom: -134px; }
.page.-landing-v2 .sv2-method__loop { display: flex; flex-direction: column; }
.page.-landing-v2 .sv2-method__loop-title {
  margin-bottom: 32px;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--sv2-white);
}
.page.-landing-v2 .sv2-method.-loop .sv2-method__tiles { list-style: none; }
.page.-landing-v2 .sv2-method__stats {
  display: flex;
  gap: 8px;
  margin-top: 64px;
}
.page.-landing-v2 .sv2-method__stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 24px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sv2-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.page.-landing-v2 .sv2-method__stat-value {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--sv2-white);
}
.page.-landing-v2 .sv2-method__stat-label {
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.8);
}
/* The kit's Default CTA cell right-aligns its pill in the tile grid; here it
   is its own row, left-aligned as drawn. */
.page.-landing-v2 .sv2-method.-loop .sv2-method__cta { display: flex; justify-content: flex-start; }
.page.-landing-v2 .sv2-method.-loop .sv2-method__cta .sv2-pill { align-self: flex-start; }
@media (max-width: 1279px) {
  .page.-landing-v2 .sv2-method__stats { margin-top: 48px; }
}
@media (max-width: 1023px) {
  .page.-landing-v2 .sv2-method__stats { flex-wrap: wrap; }
  .page.-landing-v2 .sv2-method__stat { flex-basis: calc(50% - 4px); }
}
@media (max-width: 767px) {
  .page.-landing-v2 .sv2-method__loop-title { margin-bottom: 20px; }
  .page.-landing-v2 .sv2-method__stats { flex-direction: column; margin-top: 40px; }
  .page.-landing-v2 .sv2-method__stat { flex-basis: auto; padding: 20px; }
  .page.-landing-v2 .sv2-method.-loop .sv2-method__panel::after { bottom: -200px; }
}

/* ---- Featured case study (FeaturedCaseV2) -------------------------------- */
/* Comp (React 23139:10216): a full-bleed band with a 40px side gutter and
   80px above and below, the panel #131426 under a purple radial glow from its
   top-right corner (90% opacity, #281843 → #1F152A → #151111), r24; inside, a
   1300 column at 128 top/bottom: the yellow eyebrow, 40, then a 541px copy
   column 80 from a square media panel (r24, padding 24). Copy: the 56px logo
   (16 above and below), 48, the h2 at 32/36 + Text/L body at 80% + outline
   tags, 24 apart, 48, the amber figure box, 48, the small pill. */
.page.-landing-v2 .lv2-featured { padding: 80px 40px; background: var(--sv2-bg-light); }
.page.-landing-v2 .lv2-featured__panel {
  border-radius: var(--sv2-radius);
  background:
    radial-gradient(ellipse 1020px 995px at 100% 1%, rgba(40, 24, 67, 0.9) 0%, rgba(31, 21, 42, 0.9) 50%, rgba(21, 17, 17, 0.9) 100%),
    #131426;
  color: var(--sv2-white);
  overflow: hidden;
}
.page.-landing-v2 .lv2-featured__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 128px;
  padding-bottom: 128px;
}
.page.-landing-v2 .lv2-featured__eyebrow { color: var(--sv2-primary); }
.page.-landing-v2 .lv2-featured__row { display: flex; align-items: center; gap: 80px; }
/* No pill (a case with no page): a short copy column would float mid-panel; the comps top-align it with the media. */
.page.-landing-v2 .lv2-featured__row.-top { align-items: flex-start; }
.page.-landing-v2 .lv2-featured__copy {
  flex: 0 0 541px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.page.-landing-v2 .lv2-featured__logo { display: flex; align-items: center; height: 56px; margin: 16px 0; }
/* The mark keeps its data width x height (attributes) and is scaled down
   to fit the row without distortion (object-fit), e.g. 142x56 -> 40px <768. */
.page.-landing-v2 .lv2-featured__logo img { display: block; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; object-position: left center; }
.page.-landing-v2 .lv2-featured__text { display: flex; flex-direction: column; gap: 24px; }
.page.-landing-v2 .lv2-featured__title { color: var(--sv2-white); }
.page.-landing-v2 .lv2-featured__body { color: rgba(255, 255, 255, 0.8); }
.page.-landing-v2 .lv2-featured__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.page.-landing-v2 .lv2-featured__tags li {
  padding: 3px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 40px;
  font-family: var(--sv2-font-text);
  font-size: 11px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--sv2-white);
  white-space: nowrap;
}
.page.-landing-v2 .lv2-featured__metrics {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  border-radius: 16px;
  background: rgba(248, 176, 0, 0.08);
}
.page.-landing-v2 .lv2-featured__metrics-label {
  font-family: var(--sv2-font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #f89717;
}
.page.-landing-v2 .lv2-featured__metric-list { display: flex; flex-direction: column; gap: 12px; }
.page.-landing-v2 .lv2-featured__metric { display: flex; flex-direction: column; gap: 2px; }
.page.-landing-v2 .lv2-featured__metric-value {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  color: var(--sv2-white);
}
.page.-landing-v2 .lv2-featured__metric-label {
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.72); /* comp 64%; 72% keeps 12px ≥4.5:1 on the amber tint */
}
.page.-landing-v2 .lv2-featured__media {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--sv2-radius);
  overflow: hidden;
}
.page.-landing-v2 .lv2-featured__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page.-landing-v2 .lv2-featured__media.-contain { display: flex; align-items: center; justify-content: center; padding: 24px; }
.page.-landing-v2 .lv2-featured__media.-contain img { object-fit: contain; }
@media (max-width: 1279px) {
  .page.-landing-v2 .lv2-featured { padding: 64px 15px; }
  .page.-landing-v2 .lv2-featured__inner { padding-top: 80px; padding-bottom: 80px; }
  .page.-landing-v2 .lv2-featured__row { flex-direction: column; align-items: stretch; gap: 56px; }
  .page.-landing-v2 .lv2-featured__copy { flex-basis: auto; max-width: 680px; }
  .page.-landing-v2 .lv2-featured__media { width: 100%; max-width: 680px; }
}
@media (max-width: 767px) {
  .page.-landing-v2 .lv2-featured { padding: 40px 8px; }
  .page.-landing-v2 .lv2-featured__inner { gap: 24px; padding-top: 48px; padding-bottom: 48px; }
  .page.-landing-v2 .lv2-featured__copy { gap: 32px; }
  .page.-landing-v2 .lv2-featured__logo { height: 40px; }
  .page.-landing-v2 .lv2-featured__row { gap: 40px; }
  .page.-landing-v2 .lv2-featured__media.-contain { padding: 12px; }
}

/* ---- Small pill (the comps' 14px label + 28px arrow): featured case and
   engagement-card CTAs. ------------------------------------------------------ */
.page.-landing-v2 :is(.lv2-featured__cta, .sv2-model__cta) .sv2-pill__label {
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
}
.page.-landing-v2 :is(.lv2-featured__cta, .sv2-model__cta) .sv2-pill__arrow { width: 28px; height: 28px; }

/* ---- Engagement card CTA (EngagementModelsV2 model `cta`) --------------- */
/* Comp: the pill 24 under the checklist (inner gap 10 + pt 24 ≈ the copy's 32). */
.page.-landing-v2 .sv2-model__cta { display: flex; margin-top: 2px; }

/* ==== react-development (DIFWEB-340) ==== */
/* /services/react-development/ (frame 23122:9314). Wrapper adds
   `-react-development`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (a team at a React whiteboard and a dashboard
   screen). The comp's two fades — 263.6° (a light left-to-right shade) and
   197.98° (into the panel ink at 71%) — at ≥1280, plus a left shade: with
   the comp's fades alone the H1's "that" sits on the lit whiteboard at 2.96:1
   (1440). Below 1280 the kit's top-down scrims apply. AA measured per glyph
   on real pixels after the fade-in. */
@media (min-width: 1280px) {
  .page.-landing-v2.-react-development .sv2-hero.-react-development .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.55) 0%, rgba(4, 2, 16, 0.42) 40%, rgba(4, 2, 16, 0) 62%),
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* ==== end react-development ==== */

/* ==== forward-deployed-engineer (DIFWEB-342) ==== */
/* /services/forward-deployed-engineer/ (frame 23078:57044). Wrapper adds
   `-forward-deployed-engineer`; the hero takes the same modifier. */

/* ---- Hero scrim: the comp's two fades — 263.6° and 197.98° — at ≥1280,
   plus a left shade: with the comp's fades alone the H1's line ends sit on
   the lit window and the lamp-lit faces (glyph min 3.36:1 at 1440, 2.88:1 at
   1280). Below 1280 the kit's top-down scrims apply. AA measured per glyph
   on real pixels, header hidden. */
@media (min-width: 1280px) {
  .page.-landing-v2.-forward-deployed-engineer .sv2-hero.-forward-deployed-engineer .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(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* ==== end forward-deployed-engineer ==== */

/* ==== fractional-ai-partner (DIFWEB-342) ==== */
/* /services/fractional-ai-partner/ (frame 23078:54997). Wrapper adds
   `-fractional-ai-partner`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (an architect at a glass wall drawing the AI
   orchestration layer, a team at the table). The comp's two fades at ≥1280;
   below 1280 the kit's top-down scrims apply. */
@media (min-width: 1280px) {
  .page.-landing-v2.-fractional-ai-partner .sv2-hero.-fractional-ai-partner .sv2-hero__bg::after {
    background:
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* ==== end fractional-ai-partner ==== */

/* ==== vibe-code-rescue (DIFWEB-262) ==== */
/* /solutions/vibe-code-rescue/ (frame 22875:12412). Wrapper adds
   `-vibe-code-rescue`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (two engineers at a laptop and a phone,
   whiteboard behind). The comp's two fades at ≥1280; below 1280 the kit's
   top-down scrims apply. */
@media (min-width: 1280px) {
  .page.-landing-v2.-vibe-code-rescue .sv2-hero.-vibe-code-rescue .sv2-hero__bg::after {
    background:
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}

/* ---- Tech stack: the comp draws "Where production usually lands" as ONE
   row of eight 167px tiles (1392, wider than the 1300 column); at ≥1280 the
   rows don't wrap and the tiles may shrink, so the eight share the row
   instead of AWS wrapping alone. Rows of seven (1217) keep the kit's 167. */
@media (min-width: 1280px) {
  .page.-landing-v2.-vibe-code-rescue .sv2-tech__row { flex-wrap: nowrap; }
  .page.-landing-v2.-vibe-code-rescue .sv2-tech__cell { flex-shrink: 1; min-width: 0; }
}
/* ==== end vibe-code-rescue ==== */

/* ==== claude-code-development ==== */
/* /solutions/claude-code-development/ (frame 22871:47518). Wrapper adds
   `-claude-code-development`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (a team at a wall screen of agent flows). The
   comp's two fades at ≥1280 (AA per glyph: H1 ≥3.69 at 1440, 3.87 at 1280);
   below, the kit's top-down scrims. */
@media (min-width: 1280px) {
  .page.-landing-v2.-claude-code-development .sv2-hero.-claude-code-development .sv2-hero__bg::after {
    background:
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* The comp breaks the H1 after "agents." (a '\n' in the data). Its last line,
   "We make them one team.", sets 733px wide in the shipped Gilroy against the
   comp's 702 column, so ≥1280 the column takes 740 to hold it on one line.
   Below 1280 the break is dropped (the '\n' collapses to a space): at 768 it
   would leave "agents." alone on a line. */
@media (min-width: 1280px) {
  .page.-landing-v2.-claude-code-development .sv2-hero__title { white-space: pre-line; }
  .page.-landing-v2.-claude-code-development .sv2-hero__copy { max-width: 740px; }
}

/* ---- "Why AI rollouts stall" head: the comp breaks its intro after
   "…a quality dip." — that line sets 820px wide, so the intro takes 840. */
.page.-landing-v2.-claude-code-development .sv2-cards .sv2-head__intro { max-width: 840px; }
/* ==== end claude-code-development ==== */

/* ==== fintech-software-development (DIFWEB-262) ==== */
/* /solutions/fintech-software-development/ (frame 22781:29242). Wrapper adds
   `-fintech-software-development`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (an architect at a whiteboard of payment flows,
   the team at a table). The comp's two fades — 263.6° (a light right-to-left
   shade) and 197.98° (into the panel ink at 71%) — at >=1280, plus a left
   shade: with the comp's fades alone the H1's "software" sits on the lit
   whiteboard at 2.96:1 (1440) / 2.88:1 (1280). Below 1280 the kit's top-down
   scrims apply. AA measured per glyph on real pixels. */
@media (min-width: 1280px) {
  .page.-landing-v2.-fintech-software-development .sv2-hero.-fintech-software-development .sv2-hero__bg::after {
    background:
      linear-gradient(90deg, rgba(4, 2, 16, 0.55) 0%, rgba(4, 2, 16, 0.42) 40%, rgba(4, 2, 16, 0) 62%),
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* ==== end fintech-software-development ==== */

/* ==== fractional-cto (DIFWEB-262) ==== */
/* /services/fractional-cto/ (frame 22865:13107). Wrapper adds
   `-fractional-cto`; the hero takes the same modifier. */

/* ---- Hero: this page's photo (a CTO at a whiteboard, a team at the table).
   The comp's two fades — 263.6° (a light left-to-right shade) and 197.98°
   (into the panel ink at 71%) — at ≥1280. Below 1280 the kit's top-down
   scrims apply. AA measured per glyph on real pixels (header hidden). */
@media (min-width: 1280px) {
  .page.-landing-v2.-fractional-cto .sv2-hero.-fractional-cto .sv2-hero__bg::after {
    background:
      linear-gradient(263.62deg, rgba(0, 0, 0, 0.032) 35.72%, rgba(4, 2, 16, 0.4) 69.31%),
      linear-gradient(197.98deg, rgba(0, 0, 0, 0.08) 34.24%, #040210 71.49%);
  }
}
/* ---- "Between first funding and Series B" intro: the comp sets it on one
   line across the 1300 column; the kit's 740px intro measure left "most." as a
   lone widow at 1440. Full column width, and `pretty` wrapping where it does
   wrap (≤1279). The first card grid is the one right after the awards band. */
.page.-landing-v2.-fractional-cto .sv2-proof + .sv2-cards .sv2-head__intro {
  max-width: none;
  text-wrap: pretty;
}
/* ==== end fractional-cto ==== */