/* Point Wild-style rotating arc for the Controls-for-your-family cards.
   Everything is scoped under .arc-on, which arc-cards.js adds ONLY when
   it actually initialises - so with JavaScript off, with reduced motion
   on, or if a vendor script fails, the section keeps its normal grid. */

.arc-on.parent-features {
  /* height is set inline by arc-cards.js: stage height + travel */
  padding-top: 0;
  padding-bottom: 0;
}

.arc-on .arc-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  box-sizing: border-box;
  /* clear the floating header, keep the heading stationary below it */
  padding-top: 120px;
}

.arc-on .parent-features-heading {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.arc-on .arc-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
}

.arc-on .parent-feature-grid {
  display: block;
  max-width: none;
  margin: 0;
  position: absolute;
  inset: 0;
}

.arc-on .parent-feature-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--arc-card-w, 340px);
  margin: 0;
  will-change: transform, opacity;
}

@media (max-width: 700px) {
  .arc-on .arc-stage { padding-top: 96px; }
}

/* Mobile: when the arc is live it replaces the tile-grid mobile features -
   the section un-hides and the tiles stand down. With no JS or reduced
   motion, .arc-on never appears and the tile design stays in charge. */
@media (max-width: 700px) {
  .parents-landing > .parent-features.arc-on { display: block; }
  main:has(.parent-features.arc-on) .parents-mobile-features { display: none; }
}

/* Per-card crayon app art and a soft matching colour tint. Decorative:
   works identically in the arc and in the plain-grid fallback. */
.parent-feature-card > .card-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120% 95% at 86% 88%, var(--tint), transparent 62%);
  opacity: .14;
  pointer-events: none;
}
html[data-theme=light] .parent-feature-card > .card-tint { opacity: .18; }
.parent-feature-card > .card-art {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 16px;
  width: 36%;
  max-width: 150px;
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}
html[data-theme=light] .parent-feature-card > .card-art[data-app=x] { filter: brightness(.55); }
.parent-feature-card.is-revealed > .card-art { opacity: .22; transition: opacity .3s ease; }
.parent-feature-card > .card-art { transition: opacity .3s ease; }

/* The stage breaks out of the page's max-width column so wide windows
   get the full arc; cards also positionally fade before the edges. */
.arc-on .arc-stage { width: 100vw; margin-left: calc(50% - 50vw); }