/* The FDE page uses the shared hero, sections, feature grids, editorial blocks,
   and bottom CTA. The development cycle, native FAQ, and section alignment are
   page-specific. */

.fde-page .hero-sub .lead {
  margin-bottom: 0;
}

.fde-ownership h2 {
  white-space: pre-line;
}

/* Grid introductions belong on the same outer edge as their columns. */
.fde-page .development-partnership .measure {
  margin-inline: 0;
}

/* --- Ownership section: a rounded isometric product cycle ---------------- */
.fde-ownership {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

/* The grid surrounds the cycle; white fades beneath the intro and process
   points keep their copy clear. All background layers stay below the text. */
.fde-ownership::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0) var(--space-lg), rgba(255, 255, 255, 0) 55%, #fff 96%),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, #fff),
    radial-gradient(ellipse 40% 45% at var(--fde-glow-at, 72% 32%), rgba(250, 215, 215, .28), rgba(250, 215, 215, 0)),
    linear-gradient(rgba(201, 197, 203, .2) 1px, transparent 1px) 50% 0 / 32px 32px,
    linear-gradient(90deg, rgba(201, 197, 203, .2) 1px, transparent 1px) 50% 0 / 32px 32px;
  pointer-events: none;
}

.fde-ownership > .container > .measure {
  position: relative;
}

/* On stacked layouts, fade from the white intro into the diagram below. */
.fde-ownership > .container > .measure::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100vh;
  right: -100vw;
  bottom: calc(-1 * var(--space-lg));
  left: -100vw;
  background: linear-gradient(#fff calc(100% - var(--space-lg)), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.fde-cycle {
  --fde-cycle-leg: 2s;
  --fde-face-left: #efedf0;
  --fde-face-right: #ded9df;
  --fde-face-top-active: #fdf1f1;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: var(--space-lg) 0 0;
}

.fde-cycle__stage {
  position: relative;
  height: 336px;
}

.fde-cycle__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fde-cycle__track {
  stroke: var(--light-slate);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.fde-cycle__arrow { stroke: var(--mulberry); stroke-width: 1; }
/* One short dash per leg, parked off the path's ends between passes. */
.fde-cycle__accent {
  stroke: var(--crimson);
  stroke-width: 1.5;
  stroke-dasharray: 28 400;
  stroke-dashoffset: 30;
}

.fde-cycle__steps { margin: 0; padding: 0; list-style: none; }
.fde-cycle__step {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}
.fde-cycle__step:nth-child(2) { top: 100px; left: 84%; }
.fde-cycle__step:nth-child(3) { top: 200px; }
.fde-cycle__step:nth-child(4) { top: 100px; left: 16%; }
.fde-cycle__module {
  position: relative;
  width: 100%;
}
/* A soft contact shadow that appears as the active slab lifts. */
.fde-cycle__shadow {
  position: absolute;
  top: 80%;
  left: 18%;
  width: 64%;
  height: 14%;
  background: radial-gradient(closest-side, rgba(99, 47, 62, .2), rgba(99, 47, 62, 0));
  opacity: 0;
}
.fde-cycle__cube {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fde-cycle__face { stroke: none; }
.fde-cycle__edge,
.fde-cycle__face--top { stroke: var(--mulberry); stroke-width: 1; }
.fde-cycle__edge { fill: none; }
.fde-cycle__face--top { fill: var(--white); }
.fde-cycle__face--left { fill: var(--fde-face-left); }
.fde-cycle__face--right { fill: var(--fde-face-right); }
.fde-cycle__glyph { fill: none; stroke: var(--mulberry); }
/* Every glyph shape draws at one weight; colour still inherits from the group. */
.fde-cycle__glyph > * {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fde-cycle__label {
  color: var(--dark-slate);
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: var(--leading-label);
  white-space: nowrap;
}
.fde-cycle__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The active module: lifted a few units, crimson and blush faces, a warm top,
   and its outline, glyph, and label in crimson. Deploy holds this state as
   the still frame; the loop below animates the same values. */
.fde-cycle__step:last-child .fde-cycle__slab { transform: translateY(-3px); }
.fde-cycle__step:last-child .fde-cycle__shadow { opacity: 1; }
.fde-cycle__step:last-child .fde-cycle__face--left { fill: var(--crimson); }
.fde-cycle__step:last-child .fde-cycle__face--right { fill: var(--light-crimson); }
.fde-cycle__step:last-child .fde-cycle__face--top { fill: var(--fde-face-top-active); }
.fde-cycle__step:last-child :is(.fde-cycle__edge, .fde-cycle__face--top, .fde-cycle__glyph) {
  stroke: var(--crimson-dark);
}
.fde-cycle__step:last-child .fde-cycle__label { color: var(--crimson-dark); }

/* An endless relay, one leg every 2s: each module lights as the dash arrives,
   holds while it leaves, and settles as the next module warms. Delays are
   offset so the loop opens on the still frame, with Deploy lit. */
.fde-cycle--animate :is(.fde-cycle__accent, .fde-cycle__slab, .fde-cycle__shadow,
  .fde-cycle__face, .fde-cycle__edge, .fde-cycle__glyph, .fde-cycle__label) {
  animation-duration: calc(4 * var(--fde-cycle-leg));
  animation-timing-function: ease-in-out;
  animation-delay: calc((var(--i) - 3) * var(--fde-cycle-leg));
  animation-iteration-count: infinite;
}
.fde-cycle--animate .fde-cycle__accent { animation-name: fde-cycle-travel; }
.fde-cycle--animate .fde-cycle__slab { animation-name: fde-cycle-lift; }
.fde-cycle--animate .fde-cycle__shadow { animation-name: fde-cycle-shadow; }
.fde-cycle--animate .fde-cycle__face--left { animation-name: fde-cycle-face; }
.fde-cycle--animate .fde-cycle__face--right { animation-name: fde-cycle-side; }
.fde-cycle--animate .fde-cycle__face--top { animation-name: fde-cycle-top; }
.fde-cycle--animate :is(.fde-cycle__edge, .fde-cycle__glyph) { animation-name: fde-cycle-line; }
.fde-cycle--animate .fde-cycle__label { animation-name: fde-cycle-label; }
.fde-cycle--paused .fde-cycle__stage * { animation-play-state: paused; }

@keyframes fde-cycle-travel {
  0%, 5% { stroke-dashoffset: 30; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  25%, 100% { stroke-dashoffset: -224; }
}
@keyframes fde-cycle-lift {
  0%, 12%, 100% { transform: translateY(-3px); }
  26%, 90% { transform: translateY(0); }
}
@keyframes fde-cycle-shadow {
  0%, 12%, 100% { opacity: 1; }
  26%, 90% { opacity: 0; }
}
@keyframes fde-cycle-face {
  0%, 12%, 100% { fill: var(--crimson); }
  26%, 90% { fill: var(--fde-face-left); }
}
@keyframes fde-cycle-side {
  0%, 12%, 100% { fill: var(--light-crimson); }
  26%, 90% { fill: var(--fde-face-right); }
}
@keyframes fde-cycle-top {
  0%, 12%, 100% { fill: var(--fde-face-top-active); stroke: var(--crimson-dark); }
  26%, 90% { fill: var(--white); stroke: var(--mulberry); }
}
@keyframes fde-cycle-line {
  0%, 12%, 100% { stroke: var(--crimson-dark); }
  26%, 90% { stroke: var(--mulberry); }
}
@keyframes fde-cycle-label {
  0%, 12%, 100% { color: var(--crimson-dark); }
  26%, 90% { color: var(--dark-slate); }
}

.fde-ownership .feature-grid--4 {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The points sit on plain white: a band anchored to their grid fades the
   section grid out across the margin above them, then stays white to the
   section's end. It paints above the grid but under all copy, and the
   section clips its full-bleed width and height. */
.fde-ownership .feature-grid--4::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-lg));
  right: -100vw;
  bottom: -100vh;
  left: -100vw;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff var(--space-lg));
  pointer-events: none;
}

@media screen and (min-width: 992px) {
  /* Keep the entire reading column white, fading across the column gutter. */
  .fde-ownership > .container > .measure::before {
    right: calc(-1 * var(--space-lg));
    bottom: -100vh;
    background: linear-gradient(to right, #fff calc(100% - var(--space-lg)), rgba(255, 255, 255, 0));
  }
  .fde-ownership > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(25rem, 1fr);
    column-gap: var(--space-lg);
    align-items: center;
  }
  .fde-ownership .feature-grid { grid-column: 1 / -1; }
  .fde-ownership .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fde-cycle { justify-self: end; margin-top: 0; }
}
/* Stacked layouts centre the blush on the cycle beneath the intro. */
@media screen and (max-width: 991px) {
  .fde-ownership { --fde-glow-at: 38% 50%; }
}
@media screen and (max-width: 599px) {
  .fde-ownership { --fde-glow-at: 50% 45%; }
  .fde-cycle { max-width: 400px; }
  .fde-cycle__stage { height: 310px; }
  .fde-cycle__step { width: 120px; }
  .fde-cycle__step:nth-child(2),
  .fde-cycle__step:nth-child(4) { top: 93px; }
  .fde-cycle__step:nth-child(3) { top: 186px; }
  .fde-ownership .feature-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.fde-faq {
  margin-top: var(--space-lg);
}

.fde-faq__item {
  border-top: 1px solid var(--gray);
}

.fde-faq__item:last-child {
  border-bottom: 1px solid var(--gray);
}

.fde-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: var(--leading-h4);
}

.fde-faq__item summary::-webkit-details-marker {
  display: none;
}

.fde-faq__item summary:hover {
  color: var(--crimson-dark);
}

.fde-faq__item .ui-icon {
  flex: none;
  color: var(--crimson-dark);
  transition: transform var(--transition-base) var(--ease-emphasized);
}

.fde-faq__item[open] .ui-icon {
  transform: rotate(180deg);
}

.fde-faq__item p {
  margin-bottom: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .fde-faq__item .ui-icon { transition: none; }
  .fde-cycle .fde-cycle__stage * { animation: none; }
}