/* intro v21 — Loewe fold: vertical heading, watercolor blob, sketch figure, load rise */

/* Rotated 90° vertical heading */
.intro-fold__vtitle {
    writing-mode: vertical-rl;
    white-space: nowrap;
    line-height: 1;
}
@media (max-width: 767.98px) {
    .intro-fold__vtitle { writing-mode: horizontal-tb; }
}

/* Wax-seal / watercolor blob */
.intro-fold__blob {
    width: 24rem;
    height: 24rem;
    filter: blur(56px);
    opacity: 0.4;
    border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%;
}

/* Drop-cap lead (framework-agnostic ::first-letter, no TW variant dependency) */
.intro-fold__lead::first-letter {
    font-size: 3rem;
    font-weight: 900;
    float: left;
    line-height: 0.9;
    margin-right: 0.75rem;
}

/* Like button fixed size (no BS w-N/h-N utility) */
.intro-fold__like {
    width: 2.25rem;
    height: 2.25rem;
}

/* Hand-drawn sketch treatment on the figure */
.intro-fold [data-figure] { aspect-ratio: 16 / 9; }
.intro-fold__img {
    object-fit: cover;
    filter: grayscale(0.35) contrast(1.12) saturate(0.9);
}

/* Subtle scale-up on load (0.92 → 1) */
.intro-fold__rise {
    opacity: 0;
    transform: scale(0.92);
    animation: intro-fold-rise 620ms ease forwards;
}
@keyframes intro-fold-rise {
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-fold__rise { opacity: 1; transform: none; animation: none; }
}

/* Steps v29 — Split-Screen Steps with Sticky Icon Panel and Scrollable List */

/* Shared split-screen grid: sticky rail (narrow) + scrollable list (wide).
   No Bootstrap equivalent for an arbitrary grid-template-columns split,
   so this single custom class drives the layout in both TW and BS renders. */
.twin-pane__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .twin-pane__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

/* Sticky icon/intro rail — position:sticky is standard CSS, framework-agnostic */
@media (min-width: 992px) {
    .twin-pane__rail {
        position: sticky;
        top: 6rem;
        align-self: flex-start;
    }
}

/* Fixed-size icon badge — no Bootstrap utility matches this exact box size */
.twin-pane__icon-box {
    width: 3rem;
    height: 3rem;
}

/* Remove trailing divider/spacing on the last step item (no BS :last-child utility) */
.twin-pane__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.content-col-grow {
    flex: 1 1 0%;
    min-width: 0;
}

.content-img-fill {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    min-width: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.manuscript-bodycopy__text-panel-inset {
    padding: 4rem;
}

/* integrations — unified hover (layout; shadow + lift; respect reduced motion) */
.integrations-card-hover {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.integrations-card-hover:hover {
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translateY(-2px) scale(1.03);
}

.integrations-card-hover--shadow-only {
    transition: box-shadow 0.35s ease;
}

.integrations-card-hover--shadow-only:hover {
    transform: none;
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .integrations-card-hover:hover {
        transform: none;
    }
}

/* Primary tile: wpg-preview --tw-primary-* | --bs-primary-scale-*; inherited --bs-primary hex */
.integrations__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    color: #fff;
    --_ie-from: rgb(var(--tw-primary-500, var(--bs-primary-scale-500, 99 102 241)) / 1);
    --_ie-to: rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1);
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    background-image: linear-gradient(to bottom right, var(--_ie-from), var(--_ie-to));
}
.integrations__icon-tile i {
    color: inherit;
}
.integrations__icon-tile svg,
.integrations__icon-tile :is(path, circle, rect, polygon) {
    fill: currentColor;
}

/* Softer card hover shadow (avoids muddy stack with shadow-lg / BS cards) */
.integrations-card-hover:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}
.integrations-card-hover--shadow-only:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}

.spotlight-carousel-timeline__radial {
    background: radial-gradient(ellipse at 50% 50%, currentColor 0%, transparent 70%);
    opacity: 0.05;
}

@keyframes spotlight-carousel-timeline__slide-in {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

.spotlight-carousel-timeline__slide--hidden {
    display: none;
}

.spotlight-carousel-timeline__slide--visible {
    animation: spotlight-carousel-timeline__slide-in 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.spotlight-carousel-timeline__dot--active {
    width: 24px;
    height: 0.5rem;
    filter: brightness(1.05);
}

.spotlight-carousel-timeline__dot--idle {
    width: 8px;
    height: 0.5rem;
    filter: brightness(0.55);
}

.spotlight-carousel-timeline__accent {
    height: 4px;
    width: 3rem;
}

.spotlight-carousel-timeline__btn {
    width: 2.5rem;
    height: 2.5rem;
}

/* cta slice — diagonal bottom edge + cover image */
.cta-slice__section {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 93%);
  padding-bottom: 5rem;
}

.cta-slice__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-slice__title-track {
  letter-spacing: 0.28em;
}

.cta-slice__tagline-track {
  letter-spacing: 0.14em;
}

.cta-slice__signature-track {
  letter-spacing: 0.22em;
}

@media (max-width: 767px) {
  .cta-slice__section {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
    padding-bottom: 3rem;
  }

  .cta-slice__title-track {
    letter-spacing: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-slice__section {
    clip-path: none;
    padding-bottom: 0;
  }
}