/* ==========================================================================
   Phase 2 Rebrand — section component classes.
   Workflow: the user builds structure + copy in Elementor and applies these
   BEM classes (Advanced -> CSS Classes); this file owns all the styling.
   Enqueued automatically on every v2 page (same opt-in as header-v2).
   Values extracted 1:1 from the PHASE 2 REBRAND Figma. Grows section by
   section — keep each block commented with its Figma node.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens (Phase 2 brand palette / type). Scoped to :root — these load
   only on v2 pages. p2p-showcase.css stays self-contained on purpose (the
   widget can appear on non-v2 pages where this file is absent).
   -------------------------------------------------------------------------- */
:root {
  --p2-font: 'Aeonik', 'Lato', sans-serif;
  --p2-navy: #1e3c74;        /* Brand navy: body + headings */
  --p2-slate: #7c9ec5;       /* Blue grey: accents + muted text */
  --p2-border-blue: #badffb; /* Card borders */
  --p2-baby-blue: #c0dcfb;   /* Guide lines / connectors */
  --p2-bg-light: #eff5fc;    /* Light section surface */
}

/* --------------------------------------------------------------------------
   Layout utilities. Official Phase 2 breakpoints: tablet <=1024, mobile <=768.
   Design frame 1440; content grid 1248 (guide rails sit 24px outside it).
     p2-w-content -> capped content container (1248, centered, side padding)
     p2-w-full    -> full-bleed container
     p2-section   -> standard vertical section rhythm
   -------------------------------------------------------------------------- */
/* Content cap tracks the guide rails: rails at max(72px, 50% - 648px), content
   always 24px inside them -> width = min(1248, 100% - 192px) on desktop. */
.p2-w-content {
  width: 100% !important;
  max-width: min(1248px, calc(100% - 192px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* neutralize Elementor container defaults: 10px padding on ALL sides +
     20px gap between children — spacing is owned by the element classes */
  padding: 0 !important;
  gap: 0 !important;
}
.p2-w-full {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* if the container was created as "Boxed", neutralize Elementor's inner cap
   so p2-w-full behaves as full width regardless of the container preset */
.p2-w-full > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
/* standard light-blue section surface */
.p2-bg-light {
  background-color: var(--p2-bg-light) !important;
}
/* 60/60: consecutive sections meet at the Figma rhythm of 120px between
   contents (the page surface is one continuous light blue) */
.p2-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
@media (max-width: 1024px) {
  /* Figma 768 frame: rails at 16px, content at 32px margins (16 inside rails) */
  .p2-w-content {
    max-width: calc(100% - 64px) !important;
  }
  .p2-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
@media (max-width: 767px) {
  /* Figma 375 frame: rails hidden, content at 16px margins */
  .p2-w-content {
    max-width: calc(100% - 32px) !important;
  }
  .p2-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   Hero (Figma 6014-6345 content, 6012-11711 gradient overlay).
     p2-hero-bg       -> the container holding the clouds background image:
                         paints the top blue gradient overlay over it
     p2-hero__title   -> Heading widget (Display XL 64/66 -1.5, white, centered)
     p2-hero__subtitle-> Heading/Text widget (Subhead 22/30, white, max 820)
     p2-hero__btn     -> Button widget (white bg, #C0DCFB border, navy text)
   -------------------------------------------------------------------------- */
.p2-hero-bg {
  position: relative;
  /* hero content -> showcase card gap (Figma: 46/52/48 -> constant 48);
     otherwise it falls back to Elementor's default 20px child gap */
  gap: 48px !important;
}
.p2-hero-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 362px;
  background: linear-gradient(180deg, #4983be 33.8%, rgba(73, 131, 190, 0) 91.7%);
  pointer-events: none;
  z-index: 0;
}
.p2-hero-bg > .e-con {
  position: relative;
  z-index: 1;
}
.elementor-widget.p2-hero__title,
.p2-hero__title {
  max-width: 824px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* vertical rhythm is owned here (constant across all Figma frames):
     title -> 24 -> subtitle -> 32 -> button. Manual Elementor margins are
     desktop-only and vanish on tablet/mobile. */
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
/* !important: the class owns typography — beats stray per-widget settings */
.p2-hero__title .elementor-heading-title {
  font-family: var(--p2-font) !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  line-height: 66px !important;
  letter-spacing: -1.5px !important;
  color: #fff !important;
  text-align: center;
}
/* 660px: the Figma text box is 820 but manual line breaks keep the lines at
   ~650px (3 lines) — this cap reproduces that wrap without hard <br>s */
.elementor-widget.p2-hero__subtitle,
.p2-hero__subtitle {
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}
.p2-hero__subtitle .elementor-heading-title,
.p2-hero__subtitle p,
.p2-hero__subtitle {
  font-family: var(--p2-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
  text-align: center;
}
/* an old theme rule adds margin-top: 16px to the button's widget container,
   inflating the subtitle -> button gap to 48 (Figma: 32) */
.p2-hero__btn .elementor-widget-container {
  margin-top: 0 !important;
}
.p2-hero__btn .elementor-button {
  background-color: #fff !important;
  border: 1px solid var(--p2-baby-blue) !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  color: var(--p2-navy) !important;
  font-family: var(--p2-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  transition: background-color 0.2s ease;
}
/* Figma Primary Button variants (2981:480/481): hover #E6F2FF, active #D6E9FF */
.p2-hero__btn .elementor-button:hover {
  background-color: #e6f2ff !important;
}
.p2-hero__btn .elementor-button:active {
  background-color: #d6e9ff !important;
}
/* Figma tablet frame (6025-9139): title keeps Display XL 64/66, subtitle
   drops to 18/28 (mobile frame 6045-14150 then goes 32/34 + 16/24). */
@media (max-width: 1024px) {
  .p2-hero__subtitle .elementor-heading-title,
  .p2-hero__subtitle p,
  .p2-hero__subtitle {
    font-size: 18px !important;
    line-height: 28px !important;
  }
}
@media (max-width: 767px) {
  .p2-hero__title .elementor-heading-title {
    font-size: 32px !important;
    line-height: 33px !important;
    letter-spacing: -0.5px !important;
  }
  .p2-hero__subtitle .elementor-heading-title,
  .p2-hero__subtitle p,
  .p2-hero__subtitle {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   Section heading (Figma 6014-6354) — "Display L" two-tone.
   Usage: class p2-h2 on the Heading widget; wrap the accent part of the
   title in <span class="p2-accent">...</span>.
   -------------------------------------------------------------------------- */
.p2-h2,
.p2-h2 .elementor-heading-title {
  font-family: var(--p2-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: var(--p2-navy);
}
.p2-h2 .p2-accent {
  color: var(--p2-slate);
}

/* --------------------------------------------------------------------------
   Section subtitle line ("Each module extends the same..."): Body L under a
   p2-h2 heading. Usage: class p2-sub on the Heading/Text widget.
   -------------------------------------------------------------------------- */
.p2-sub,
.p2-sub .elementor-heading-title,
.p2-sub p {
  font-family: var(--p2-font) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: var(--p2-navy) !important;
}
.elementor-widget.p2-sub {
  margin-top: 24px !important;
  margin-bottom: 64px !important;
}
/* standard rhythm: heading -> content 64px; 24px when a p2-sub follows
   (the subtitle then carries the 64px down to the content) */
.elementor-widget.p2-h2 {
  margin-bottom: 64px !important;
}
.elementor-widget.p2-h2:has(+ .elementor-widget.p2-sub) {
  margin-bottom: 0 !important;
}
/* Figma 768 frame: headings drop to 32/33, heading gaps tighten to 48 */
@media (max-width: 1024px) {
  .p2-h2,
  .p2-h2 .elementor-heading-title {
    font-size: 32px;
    line-height: 33px;
  }
  .elementor-widget.p2-h2 {
    margin-bottom: 48px !important;
  }
  .elementor-widget.p2-h2:has(+ .elementor-widget.p2-sub) {
    margin-bottom: 0 !important;
  }
  .elementor-widget.p2-sub {
    margin-bottom: 48px !important;
  }
}
/* Figma 375 frame: headings 24/28, heading gap 32; subtitle 16/24, gaps 16/24 */
@media (max-width: 767px) {
  .p2-h2,
  .p2-h2 .elementor-heading-title {
    font-size: 24px;
    line-height: 28px;
  }
  .elementor-widget.p2-h2 {
    margin-bottom: 32px !important;
  }
  .elementor-widget.p2-h2:has(+ .elementor-widget.p2-sub) {
    margin-bottom: 0 !important;
  }
  .p2-sub,
  .p2-sub .elementor-heading-title,
  .p2-sub p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .elementor-widget.p2-sub {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   P2P modules grid (Figma 6025-6463 / 6025-6489, "Get total visibility...").
   3-column grid; Accounts Payable spans 2 columns.
   Usage:
     p2-mods              -> inner container holding the 5 cards
     p2-mod-card          -> each card container (give the container a LINK in
                             Elementor if the card should be clickable)
     p2-mod-card--wide    -> ADD on Accounts Payable (spans 2 columns)
     p2-mod-card__icon    -> Image widget (SVG glyph; the box is drawn by CSS)
     p2-mod-card__title   -> Heading widget
     p2-mod-card__desc    -> Text Editor widget
   The diagonal arrow is drawn automatically (dist/images/p2-arrow-link.svg).
   -------------------------------------------------------------------------- */
.p2-mods {
  display: grid !important;
  /* !important: Elementor's per-element grid settings out-rank the class */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
}
.p2-mod-card--wide {
  grid-column: span 2;
}
.p2-mod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important;
  padding: 40px 40px 104px !important;
  background: rgba(192, 220, 251, 0.2) !important;
  border: 1px solid var(--p2-border-blue) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
/* diagonal link arrow, bottom-right (asset points right; rotated 45deg) */
.p2-mod-card::after {
  content: '';
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 30px;
  height: 30px;
  background: url('../images/p2-arrow-link.svg') no-repeat center / contain;
  transform: rotate(45deg);
  pointer-events: none;
}
/* The icon assets are the COMPLETE Figma box+glyph (48x48, 1px #66A5F1 border
   baked in) — no CSS box drawing needed */
.p2-mod-card .p2-mod-card__icon {
  margin: 0 0 32px !important;
  width: 48px !important;
}
.p2-mod-card .p2-mod-card__icon img,
.p2-mod-card .p2-mod-card__icon svg {
  display: block;
  width: 48px;
  height: 48px;
}
.p2-mod-card .p2-mod-card__title {
  margin: 0 !important;
  width: auto !important;
}
.p2-mod-card .p2-mod-card__title .elementor-heading-title {
  font-family: var(--p2-font) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 33px !important;
  letter-spacing: -0.5px !important;
  color: var(--p2-navy) !important;
}
.p2-mod-card .p2-mod-card__desc {
  margin: 16px 0 0 !important;
  width: auto !important;
}
.p2-mod-card .p2-mod-card__desc,
.p2-mod-card .p2-mod-card__desc p {
  font-family: var(--p2-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--p2-navy);
}
.p2-mod-card .p2-mod-card__desc p {
  margin: 0;
}
/* Tablet (Figma 768 frame): 2-up — the wide card becomes a normal cell and
   only the LAST card (Stampli Cards) spans both columns */
@media (max-width: 1024px) {
  .p2-mods {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .p2-mod-card--wide {
    grid-column: auto !important;
  }
  .p2-mod-card:last-child {
    grid-column: span 2 !important;
  }
}
@media (max-width: 767px) {
  .p2-mods {
    grid-template-columns: 1fr !important;
  }
  .p2-mod-card,
  .p2-mod-card--wide,
  .p2-mod-card:last-child {
    grid-column: auto !important;
  }
  .p2-mod-card {
    padding: 24px 24px 92px !important;
  }
  .p2-mod-card::after {
    right: 24px;
    bottom: 24px;
  }
  .p2-mod-card .p2-mod-card__icon {
    margin-bottom: 24px !important;
  }
  .p2-mod-card .p2-mod-card__title .elementor-heading-title {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   87% radial section (Figma group 6025-8535 + pills 6025-8812 / 6025-8804 +
   note card 6025-8820). No heading: chart with floating pills, a vertical
   connector line, and a white note card below.
   Usage:
     p2-radial                -> container holding the 4 elements
     p2-radial__chart         -> Image widget (radial graphic, 902px)
     p2-radial__pill--human   -> Image widget (HUMAN 13% pill)
     p2-radial__pill--ai      -> Image widget (STAMPLI AI 87% pill)
     p2-radial__note          -> Text Editor widget (paragraph; card is drawn
                                 by CSS, connector line segments included)
   -------------------------------------------------------------------------- */
.p2-radial {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
  --p2-chart: min(902px, calc(100vw - 192px));
}
.elementor-widget.p2-radial__chart,
.p2-radial .p2-radial__chart {
  margin: 0 !important;
  width: 100% !important;
  max-width: 902px !important;
}
.p2-radial .p2-radial__chart img {
  display: block;
  width: 100%;
  height: auto;
}
.p2-radial .p2-radial__pill--human,
.p2-radial .p2-radial__pill--ai {
  position: absolute !important;
  margin: 0 !important;
  z-index: 2;
}
/* Pill geometry tracks the RENDERED chart size (the chart scales down when
   the content cap bites below ~1360px, so fixed px offsets would drift).
   Ratios measured on the 902px chart: human 104/902 top, 336/902 wide,
   centerline offset -0.5588; ai 721/902 top, 407/902 wide, +0.1495. */
.p2-radial .p2-radial__pill--human {
  /* clamped at the container edge when the chart fills the whole cap */
  left: max(0px, calc(50% - var(--p2-chart) * 0.5588));
  top: calc(var(--p2-chart) * 0.1153);
  width: calc(var(--p2-chart) * 0.3725) !important;
}
.p2-radial .p2-radial__pill--ai {
  left: min(calc(100% - var(--p2-chart) * 0.4512), calc(50% + var(--p2-chart) * 0.1495));
  top: calc(var(--p2-chart) * 0.7993);
  width: calc(var(--p2-chart) * 0.4512) !important;
}
.p2-radial .p2-radial__pill--human img,
.p2-radial .p2-radial__pill--ai img {
  display: block;
  width: 100%;
  height: auto;
}
/* white note card; Figma: text 603 wide inside a 772 card, 96px below chart */
.elementor-widget.p2-radial__note,
.p2-radial .p2-radial__note {
  position: relative;
  margin: 96px 0 0 !important;
  width: 100% !important;
  max-width: 772px !important;
  padding: 40px 84px;
  background: #fff;
  border: 1px solid var(--p2-baby-blue);
  border-radius: 16px;
  z-index: 1;
}
.p2-radial .p2-radial__note,
.p2-radial .p2-radial__note p {
  font-family: var(--p2-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--p2-navy);
  text-align: center;
}
.p2-radial .p2-radial__note p {
  margin: 0;
}
/* vertical connector (Figma Vector 5216): a 2px segment above the card and
   one below it ending in a dot, same treatment as the other spine lines */
.p2-radial .p2-radial__note::before,
.p2-radial .p2-radial__note::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.p2-radial .p2-radial__note::before {
  left: calc(50% - 1px);
  width: 2px;
  top: -64px;
  height: 64px;
  background: var(--p2-baby-blue);
}
.p2-radial .p2-radial__note::after {
  left: calc(50% - 4.5px);
  width: 9px;
  bottom: -235px;
  height: 235px;
  background:
    linear-gradient(var(--p2-baby-blue), var(--p2-baby-blue)) 50% 0 / 2px calc(100% - 9px) no-repeat,
    radial-gradient(circle, var(--p2-baby-blue) 4px, rgba(192, 220, 251, 0) 5px) 50% 100% / 9px 9px no-repeat;
}
/* Tablet (Figma 768 frame): chart 656 inside a 704 content (24px inset each
   side); the pills touch the content edges. Ratios measured on that frame. */
@media (max-width: 1024px) {
  .p2-radial {
    --p2-chart: calc(100vw - 112px);
  }
  .elementor-widget.p2-radial__chart,
  .p2-radial .p2-radial__chart {
    max-width: calc(100% - 48px) !important;
  }
  .p2-radial .p2-radial__pill--human {
    left: 0;
    top: calc(var(--p2-chart) * 0.047);
    width: calc(var(--p2-chart) * 0.486) !important;
  }
  .p2-radial .p2-radial__pill--ai {
    left: auto;
    right: 0;
    top: calc(var(--p2-chart) * 0.838);
    width: calc(var(--p2-chart) * 0.595) !important;
  }
  .p2-radial .p2-radial__note {
    margin-top: 88px !important;
    padding: 40px 50px;
  }
  .p2-radial .p2-radial__note::after {
    bottom: -145px;
    height: 145px;
  }
}
/* Mobile (Figma 375 frame): chart 311 (16px inset), pills leave the overlay
   and stack full-width below the chart (24 / 16 gaps), note follows at 48 */
@media (max-width: 767px) {
  .p2-radial .p2-radial__chart {
    max-width: calc(100% - 32px) !important;
  }
  .p2-radial .p2-radial__pill--human,
  .p2-radial .p2-radial__pill--ai {
    position: static !important;
    /* full width on the 375 frame, but capped so the raster doesn't blow up
       on wider mobile viewports (450-767) */
    width: min(100%, 400px) !important;
  }
  .p2-radial .p2-radial__pill--human {
    margin-top: 24px !important;
  }
  .p2-radial .p2-radial__pill--ai {
    margin-top: 16px !important;
  }
  .p2-radial .p2-radial__note {
    margin-top: 48px !important;
    padding: 24px;
  }
  .p2-radial .p2-radial__note,
  .p2-radial .p2-radial__note p {
    font-size: 18px;
    line-height: 24px;
  }
  .p2-radial .p2-radial__note::before {
    top: -48px;
    height: 48px;
  }
  .p2-radial .p2-radial__note::after {
    bottom: -150px;
    height: 150px;
  }
}

/* --------------------------------------------------------------------------
   ERP orbit section (Figma headline 6025-8824 + orbit group 6025-8825):
   Display XL headline floating over the ERP logo spheres.
   Usage:
     p2-erp          -> container (relative)
     p2-erp__orbit   -> Image widget (orbit graphic 1164x783)
     p2-erp__title   -> Heading widget, absolute over the graphic. Title HTML:
        Stampli works directly<br>within your <span class="p2-accent">ERP structure</span>
   -------------------------------------------------------------------------- */
.p2-erp {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
}
.elementor-widget.p2-erp__orbit,
.p2-erp .p2-erp__orbit {
  margin: 0 !important;
  width: 100% !important;
  max-width: 1164px !important;
}
.p2-erp .p2-erp__orbit img {
  display: block;
  width: 100%;
  height: auto;
}
.elementor-widget.p2-erp__title,
.p2-erp .p2-erp__title {
  position: absolute !important;
  top: 29.5%;
  left: 0;
  right: 0;
  margin: 0 !important;
  z-index: 1;
}
.p2-erp .p2-erp__title .elementor-heading-title {
  font-family: var(--p2-font) !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  line-height: 66px !important;
  letter-spacing: -1.5px !important;
  color: var(--p2-navy) !important;
  text-align: center;
}
.p2-erp .p2-erp__title .p2-accent {
  color: var(--p2-slate);
}
/* Decorative connector (Figma Vector 5215, upper portion): dot at the page
   center line 405px below the orbit top, elbow left, then a vertical drop at
   x = center - 495 that runs through the section's bottom edge and continues
   into the footer as .footer-v2__cta::before (same x, same 2px/#C0DCFB line).
   Anchored to the outer section (its padded bottom edge touches the footer);
   z-index -1 keeps it behind the orbit image, whose alpha occludes the line
   where the logo spheres cross it, exactly like the design. */
.p2-section:has(.p2-erp) {
  position: relative;
  /* stacking context so the z:-1 pseudo paints above this section's own
     background instead of being buried under it */
  z-index: 0;
  /* last section before the footer: no adjacent section adds its share of
     the rhythm, so the bottom padding doubles (Figma: 121 / 97 / 96) */
  padding-bottom: 120px !important;
}
@media (max-width: 1024px) {
  .p2-section:has(.p2-erp) {
    padding-bottom: 96px !important;
  }
}
.p2-section:has(.p2-erp)::after {
  content: '';
  position: absolute;
  bottom: 0;
  /* left edge clamped at the content rail (same 1182px pin threshold as the
     footer tick); right edge pinned to the page center so the top dot stays
     collinear with the radial-note spine. Below ~1230px the shape compresses
     horizontally (100% 100% + preserveAspectRatio none) instead of shifting. */
  left: max(91.5px, calc(50% - 499.5px));
  right: calc(50% - 4.5px);
  height: 442.5px;
  background: url('../images/p2-erp-connector.svg') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 1024px) {
  .p2-erp .p2-erp__title .elementor-heading-title {
    font-size: 40px !important;
    line-height: 42px !important;
    letter-spacing: -0.5px !important;
  }
  .elementor-widget.p2-erp__title,
  .p2-erp .p2-erp__title {
    top: 25%;
  }
  /* Figma 768 frame keeps a smaller connector (Vector 5215 tablet variant):
     right vertical still at the page center, drop at 50% - 291px, spanning
     262px above the footer boundary (the footer tick continues 70px below) */
  .p2-section:has(.p2-erp)::after {
    left: calc(50% - 295.5px);
    right: calc(50% - 4.5px);
    height: 262px;
  }
}
@media (max-width: 767px) {
  /* Figma 375 frame keeps a small connector: drop at 50% - 95px, 173px above
     the footer boundary (footer tick continues 45px below) */
  .p2-section:has(.p2-erp)::after {
    left: calc(50% - 100px);
    right: calc(50% - 4.5px);
    height: 173px;
  }
}
@media (max-width: 767px) {
  .p2-erp .p2-erp__title .elementor-heading-title {
    font-size: 24px !important;
    line-height: 28px !important;
    letter-spacing: -0.5px !important;
  }
  .elementor-widget.p2-erp__title,
  .p2-erp .p2-erp__title {
    top: 28%;
  }
}

/* --------------------------------------------------------------------------
   2-card comparison row (Figma 6014-6355 / 6014-6365, "Finance breaks..." vs
   "Everything runs...").
   Usage:
     p2-cards2                 -> inner container holding both cards
     p2-compare-card           -> each card container (transparent variant)
     p2-compare-card--white    -> ADD on the right card (white background)
     p2-compare-card__icon     -> Image widget (40px icon)
     p2-compare-card__title    -> Heading widget
     p2-compare-card__list     -> Text Editor widget containing:
        <p class="card-label">Before</p>
        <ul class="card-items"><li>...</li></ul>
   -------------------------------------------------------------------------- */
.p2-cards2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 0 !important;
}
.p2-compare-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Elementor containers add a default 20px gap between widgets — the
     spacing here is owned by the element margins */
  gap: 0 !important;
  padding: 40px 40px 64px !important;
  background: transparent;
  border: 1px solid var(--p2-border-blue) !important;
  border-radius: 16px !important;
}
.p2-compare-card--white {
  background: #fff !important;
}
.p2-compare-card .p2-compare-card__icon {
  margin: 0 0 48px !important;
  width: auto !important;
}
.p2-compare-card .p2-compare-card__icon img {
  width: 40px;
  height: 40px;
  display: block;
}
.p2-compare-card .p2-compare-card__title {
  margin: 0 0 48px !important;
  width: auto !important;
}
.p2-compare-card .p2-compare-card__title .elementor-heading-title {
  font-family: var(--p2-font) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 33px !important;
  letter-spacing: -0.5px !important;
  color: var(--p2-navy) !important;
}
.p2-compare-card .p2-compare-card__list {
  margin: 0 !important;
  width: auto !important;
}
.p2-compare-card .card-label {
  margin: 0 0 16px;
  font-family: var(--p2-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--p2-navy);
}
.p2-compare-card .card-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p2-compare-card .card-items li {
  margin: 0 0 16px;
  font-family: var(--p2-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--p2-navy);
}
.p2-compare-card .card-items li:last-child {
  margin-bottom: 0;
}
/* Figma 768 frame: inner gaps tighten (icon/title 32, list items 8),
   bottom padding drops to 40 */
@media (max-width: 1024px) {
  .p2-compare-card {
    padding-bottom: 40px !important;
  }
  .p2-compare-card .p2-compare-card__icon,
  .p2-compare-card .p2-compare-card__title {
    margin-bottom: 32px !important;
  }
  .p2-compare-card .card-items li {
    margin-bottom: 8px;
  }
}
@media (max-width: 767px) {
  .p2-cards2 {
    grid-template-columns: 1fr;
    gap: 16px !important;
  }
  .p2-compare-card {
    padding: 40px 24px !important;
  }
  .p2-compare-card .p2-compare-card__icon img {
    width: 32px;
    height: 32px;
  }
  .p2-compare-card .p2-compare-card__icon,
  .p2-compare-card .p2-compare-card__title {
    margin-bottom: 24px !important;
  }
  .p2-compare-card .p2-compare-card__title .elementor-heading-title {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   3-card feature row (Figma 6012-11339 "From reactive finance..." cards).
   Usage:
     p2-cards3        -> inner container holding the 3 cards
     p2-card          -> each card container
     p2-card__visual  -> Image widget (400x368 visual, first element)
     p2-card__title   -> Heading widget
     p2-card__desc    -> Text Editor widget
   -------------------------------------------------------------------------- */
.p2-cards3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 !important;
}
.p2-card {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  background: linear-gradient(189.29deg, #66a5f1 5.16%, #dfefff 87.95%) !important;
  border: 1px solid var(--p2-border-blue) !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.p2-card .p2-card__visual {
  margin: 0 !important;
  width: 100%;
}
.p2-card .p2-card__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.p2-card .p2-card__title {
  margin: 32px 32px 0 !important;
  width: auto !important;
}
.p2-card .p2-card__title .elementor-heading-title {
  font-family: var(--p2-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--p2-navy);
}
.p2-card .p2-card__desc {
  margin: 16px 32px 40px !important;
  width: auto !important;
}
.p2-card .p2-card__desc,
.p2-card .p2-card__desc p {
  font-family: var(--p2-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--p2-navy);
}
.p2-card .p2-card__desc p {
  margin: 0;
}

/* Tablet (Figma 768 frame): horizontal swipe strip — cards keep their 400px
   desktop size and overflow past the content edge */
@media (max-width: 1024px) {
  .p2-cards3 {
    display: flex !important;
    /* Elementor e-con defaults to column direction and wraps on mobile */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p2-cards3::-webkit-scrollbar {
    display: none;
  }
  .p2-cards3 .p2-card {
    flex: 0 0 400px;
  }
}
/* Mobile (Figma 375 frame): 280px cards, gap 16, visual cropped to 280:204 */
@media (max-width: 767px) {
  .p2-cards3 {
    gap: 16px !important;
  }
  .p2-cards3 .p2-card {
    flex: 0 0 280px;
  }
  .p2-card .p2-card__visual img {
    aspect-ratio: 280 / 204;
    object-fit: cover;
  }
  .p2-card .p2-card__title {
    margin: 24px 24px 0 !important;
  }
  .p2-card .p2-card__title .elementor-heading-title {
    font-size: 24px;
    line-height: 28px;
  }
  .p2-card .p2-card__desc {
    margin: 14px 24px 32px !important;
  }
}

/* --------------------------------------------------------------------------
   Self-cap safety net: keep section pieces inside the guide rails even when
   their Elementor parent container lacks p2-w-content. 100vw (not %) keeps
   the formula correct whether or not the parent is already capped, so this
   never double-shrinks. Appended last so the margin longhands win.
   -------------------------------------------------------------------------- */
.elementor-widget.p2-h2,
.elementor-widget.p2-sub,
.p2-cards2,
.p2-cards3,
.p2-mods {
  width: 100%;
  max-width: min(1248px, calc(100vw - 192px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1024px) {
  .elementor-widget.p2-h2,
  .elementor-widget.p2-sub,
  .p2-cards2,
  .p2-cards3,
  .p2-mods {
    max-width: calc(100vw - 64px) !important;
  }
}
@media (max-width: 767px) {
  .elementor-widget.p2-h2,
  .elementor-widget.p2-sub,
  .p2-cards2,
  .p2-cards3,
  .p2-mods {
    max-width: calc(100vw - 32px) !important;
  }
}

/* --------------------------------------------------------------------------
   Armor: a leftover per-widget Custom CSS from the pre-class workflow (e.g.
   element 9cabdd9 pins its h2 at 40px !important) out-ranks the class rules.
   These selectors out-rank it back so the class owns responsive type.
   TODO: delete that widget Custom CSS in Elementor, then this block can go.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-widget.p2-h2.p2-h2 .elementor-heading-title,
  .elementor-widget.p2-h2.p2-h2 .elementor-heading-title .p2-accent {
    font-size: 32px !important;
    line-height: 33px !important;
  }
}
@media (max-width: 767px) {
  .elementor-widget.p2-h2.p2-h2 .elementor-heading-title,
  .elementor-widget.p2-h2.p2-h2 .elementor-heading-title .p2-accent {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   Elementor-native spacing neutralizer (Phase 2 pages only — this stylesheet
   is enqueued only there). Kills the DEFAULT container padding (10px), child
   gap (20px) and widget spacing so the p2- classes own all rhythm.
   Values set EXPLICITLY in Elementor still win: per-element settings write
   these same custom properties from post-CSS with element-level selectors,
   which beat this low-specificity reset.
   -------------------------------------------------------------------------- */
/* Only the SOURCE variables are zeroed (physical sides + gap): Elementor
   derives the logical ones from these (--padding-block-start:
   var(--padding-top)), and per-element settings write these same source
   variables from post-CSS at (0,3,0) — beating this (0,2,1) reset. Zeroing
   the derived variables instead would sever user-set values from the chain. */
body .elementor .e-con,
body .elementor .e-con-inner {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --gap: 0px;
  --widgets-spacing: 0px 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}