/* The pitch's editorial rhythm, scoped away from the standalone comparison pages. */
.mangrove-story {
  --story-ink: rgb(var(--mg-color-blue-900));
  --story-accent: rgb(var(--mg-color-interactive));
}

.mangrove-story > .mg-container {
  inline-size: 100%;
  max-inline-size: 88rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  box-sizing: border-box;
}

/* Keep the normal centered content box; only Mangrove's background bleeds out.
   Anchor the absolute pseudo-element at the border edge, not its padded static
   position, and keep its negative z-index inside this section's paint stack. */
.mangrove-story > .mg-container.mg-container-full-width {
  isolation: isolate;
}

.mangrove-story > .mg-container.mg-container-full-width::before {
  inset-inline-start: 0;
}

.mangrove-story > :is(.pitch-section, .brand-toggle-demo) {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.mangrove-story .pitch-hero-followup {
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}

.mangrove-story > section > h2 {
  max-inline-size: 24ch;
  margin-block: 0 1.25rem;
  color: var(--story-ink);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.mangrove-story
  > :is(.pitch-section, .brand-toggle-demo, .pitch-hero-followup)
  > p:not(.story-eyebrow):not(.story-instruction):not(.pitch-footnote):not(.story-actions):not(.story-intro) {
  max-inline-size: 85ch;
  margin-block: 0 1.5rem;
  font-size: var(--mg-font-size-400, 1.125rem);
  line-height: 1.65;
}

.mangrove-story h1,
.mangrove-story h2,
.mangrove-story h3,
.mangrove-story .story-intro {
  text-wrap: balance;
}

.mangrove-story p {
  text-wrap: pretty;
}

.mangrove-story [id] {
  scroll-margin-block-start: 6rem;
}

.mangrove-story .story-intro {
  max-inline-size: 36ch;
  margin-block: 0 1.5rem;
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--story-ink);
}

.mangrove-story .story-eyebrow {
  color: var(--story-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-block: 0 0.75rem;
}

.mangrove-story .story-instruction {
  margin-block: 1.5rem;
  max-inline-size: 75ch;
  color: var(--story-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.mangrove-story .story-takeaway {
  text-align: center;
  margin-block-start: 1.5rem;
}

.mangrove-story .story-takeaway a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  min-inline-size: 2.5rem;
  justify-content: center;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: 400;
}

.mangrove-story .story-evidence-heading {
  margin-block-start: 3.5rem;
}

.mangrove-story .story-evidence-heading h3 {
  font-size: 1.5rem;
  margin-block-end: 0.5rem;
}

.mangrove-story .story-details {
  margin-block: 1rem;
}

.mangrove-story .story-details > summary span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: var(--mg-font-size-250, 0.875rem);
  font-weight: 400;
}

.mangrove-story .story-details__body {
  padding: 1.25rem 0.625rem 0.625rem;
}

.mangrove-story .pitch-pillars {
  align-items: start;
}

.mangrove-story .story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.25rem 0.75rem;
}

/* index */
.pitch-comparisons {
  display: grid;
  gap: 2.5rem;
  margin-block-start: 1.5rem;
}

.component-catalogue {
  columns: 3 16rem;
  column-gap: 3rem;
  padding: 1.5rem 1.5rem 1.5rem 2.75rem;
}
.component-catalogue > li {
  break-inside: avoid;
  margin-block-end: 1.5rem;
}
.component-catalogue ul {
  padding-inline-start: 1.25rem;
  margin-block-start: 0.5rem;
}
.component-catalogue li li {
  margin-block-end: 0.25rem;
}
.pitch-scope-list {
  margin-block: 0.75rem 1.5rem;
  padding-inline-start: 1.25rem;
}

.pitch-scope-list li + li {
  margin-block-start: 0.35rem;
}

.pitch-agent-context {
  margin-block-start: 2rem;
  max-inline-size: 56rem;
}

.pitch-agent-context__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

.pitch-agent-context__title {
  margin-block: 0 0.25rem;
  font-size: 1.125rem;
}

.pitch-agent-context__subtitle {
  margin-block: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

.pitch-agent-context__code {
  margin: 0;
}

/* _BrandToggleDemo */
.brand-toggle-demo__picker {
  margin-block: 1.25rem;
}

/* .mg-tabs__link is styled for <a>; reset the <button> defaults we use instead
   (no per-brand panel to link to, so a real anchor href would go nowhere). */
.brand-toggle-demo__pick {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.brand-toggle-demo__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-end: 1.25rem;
  padding: 1rem;
  border: 1px dashed rgb(0 0 0 / 0.2);
  border-radius: 0.5rem;
}

.brand-toggle-demo__custom[hidden] {
  display: none;
}

.brand-toggle-demo__custom-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

.brand-toggle-demo__custom-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--mg-font-size-250, 0.875rem);
  font-weight: 700;
}

.brand-toggle-demo__custom-field input[type='color'] {
  inline-size: 2.5rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.2);
  border-radius: 0.25rem;
  cursor: pointer;
}

.brand-toggle-demo__custom-field input[type='range'] {
  inline-size: 7rem;
}
.brand-toggle-demo__custom-field output {
  min-inline-size: 3ch;
  font-variant-numeric: tabular-nums;
}
.brand-toggle-demo__iframe {
  display: block;
  inline-size: 100%;
  block-size: 58rem;
  transition: none;
  border: 0;
  overflow: hidden;
}

/* _ComparisonSlider */
.comparison-slider {
  margin: 0;
}

.comparison-slider__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.comparison-slider__title {
  font-weight: 700;
}

.comparison-slider__play[hidden] {
  display: none;
}

.comparison-slider__play {
  font-size: 0.8rem;
  min-block-size: 2.75rem;
}

.comparison-slider__stage {
  --position: 50;
  position: relative;
  inline-size: 100%;
  block-size: var(--comparison-slider-height);
  transition: none;
  overflow: hidden;
  border-radius: 0.5rem;
  outline: 1px solid rgb(0 0 0 / 0.12);
  background: #fff;
}

.comparison-slider__frame,
.comparison-slider__frame-wrap {
  position: absolute;
  inset: 0;
}

.comparison-slider__frame {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: #fff;
  /* Backs up the scrolling="no" attribute — these boxes size to their content via
     height/autoHeight, not an internal scrollbar. */
  overflow: hidden;
  /*
    Interactive on purpose — visitors should be able to click buttons, focus
    the form-check radio, hover cards, and open the mega menu inside these
    demos. The drag handle still works while hovering the iframe because it
    captures the pointer on pointerdown (setPointerCapture), so subsequent
    pointermove events keep routing to the handle regardless of what's
    underneath. Each comparisons/*.html file blocks real link navigation
    itself (see its own inline script) so clicking a nav item can't carry a
    visitor away from the demo.
  */
}

/* Horizontal (default): "new" occupies the right of the handle. */
.comparison-slider__frame-wrap--new {
  /* The clipped layer must mask the old page even where its document is transparent. */
  background: #fff;
  clip-path: inset(0 0 0 calc(var(--position) * 1%));
}

/* Vertical: "new" occupies the top, revealed downward as the handle moves down. */
.comparison-slider__stage[data-orientation='vertical'] .comparison-slider__frame-wrap--new {
  clip-path: inset(0 0 calc(100% - var(--position) * 1%) 0);
}

.comparison-slider__badge {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.comparison-slider__badge--old {
  top: 0.5rem;
  left: 0.5rem;
}

.comparison-slider__badge--new {
  top: 0.5rem;
  right: 0.5rem;
}

.comparison-slider__stage[data-orientation='vertical'] .comparison-slider__badge--old {
  top: auto;
  bottom: 0.5rem;
  right: auto;
}

.comparison-slider__stage[data-orientation='vertical'] .comparison-slider__badge--new {
  right: auto;
}

/* Horizontal handle: a full-height bar that moves left/right. */
.comparison-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--position) * 1%);
  width: 2.5rem;
  margin-left: -1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  z-index: 3;
}

.comparison-slider__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  transform: translateX(-50%);
}

/* Vertical handle: a full-width bar that moves up/down instead. */
.comparison-slider__stage[data-orientation='vertical'] .comparison-slider__handle {
  top: calc(var(--position) * 1%);
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 2.5rem;
  margin-left: 0;
  margin-top: -1.25rem;
  cursor: ns-resize;
}

.comparison-slider__stage[data-orientation='vertical'] .comparison-slider__handle::before {
  top: 50%;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 2px;
  transform: translateY(-50%);
}

.comparison-slider__handle-grip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  font-size: 0.7rem;
  line-height: 1;
}

.comparison-slider__handle:focus-visible .comparison-slider__handle-grip {
  outline: 2px solid #004f91;
  outline-offset: 2px;
}

.comparison-slider__caption {
  margin-block-start: 0.75rem;
  font-size: var(--mg-font-size-250, 0.875rem);
  opacity: 0.75;
}

/* _ContentContract */
.contract-choices {
  margin-block: 2rem;
}

.contract-code {
  min-inline-size: 0;
}

.contract-code h3 {
  margin-block: 2rem 0.75rem;
  font-size: 1.25rem;
}

.contract-code h3:first-child {
  margin-block-start: 0;
}

.contract-code p {
  max-inline-size: 75ch;
}

.contract-pillars-block {
  margin-block-start: 2.5rem;
}

.pitch-pillars {
  margin-block-start: 1.5rem;
}

.pitch-pillar ul {
  padding-inline-start: 1.25rem;
}

.pitch-pillar ul li {
  margin-block-end: 0.5rem;
}

/* _PatternComparison */
.pattern-comparison {
  margin: 0;
}

.pattern-comparison__title {
  font-weight: 700;
  margin-block-end: 0.75rem;
}

.pattern-comparison__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .pattern-comparison__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pattern-comparison__panel {
  min-inline-size: 0;
}

.pattern-comparison__viewport--scaled {
  position: relative;
  block-size: var(--pattern-comparison-height);
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5rem;
  background: #fff;
}

.pattern-comparison__viewport--scaled .pattern-comparison__frame {
  position: absolute;
  inset: 0;
  inline-size: calc(100% * var(--pattern-comparison-inverse-scale));
  max-inline-size: none;
  block-size: calc(100% * var(--pattern-comparison-inverse-scale));
  border: 0;
  border-radius: 0;
  transform: scale(var(--pattern-comparison-scale));
  transform-origin: top left;
}

.pattern-comparison__panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

.pattern-comparison__badge {
  margin: 0;
}

.pattern-comparison__open {
  font-size: 0.8rem;
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pattern-comparison__frame {
  display: block;
  inline-size: var(--pattern-comparison-frame-width, 100%);
  max-inline-size: 100%;
  block-size: var(--pattern-comparison-height);
  box-sizing: border-box;
  transition: none;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5rem;
  /* Backs up the scrolling="no" attribute — these boxes are meant to show their whole
     content via autoHeight, not scroll internally. Overridden below for scroll-sync mode,
     where the box stays a fixed height and scrolls internally instead. */
  overflow: hidden;
}

[data-pattern-comparison='scroll-sync'] .pattern-comparison__frame {
  overflow: auto;
}

.pattern-comparison__panel-caption {
  margin-block-start: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

.pattern-comparison__caption {
  margin-block-start: 1rem;
  font-size: var(--mg-font-size-250, 0.875rem);
  opacity: 0.75;
}

/* _ScratchComparison */
.scratch-comparison {
  margin: 0;
}
.scratch-comparison__header,
.scratch-comparison__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.scratch-comparison__header {
  justify-content: space-between;
  margin-block-end: 0.75rem;
}
.scratch-comparison__controls {
  margin-block-end: 0.75rem;
}
.scratch-comparison__tabs {
  flex: 1 1 auto;
  margin: 0;
}
.scratch-comparison__compare[hidden],
.scratch-comparison__stage[hidden] {
  display: none;
}
.scratch-comparison__compare:focus-visible {
  outline: 2px solid rgb(var(--mg-color-interactive));
  outline-offset: 4px;
}
.scratch-comparison__reset {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
}
.scratch-comparison__reset[hidden] {
  display: none;
}
[data-scratch-toggle-wrap][hidden] {
  display: none;
}
.scratch-comparison__toggle {
  margin: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.scratch-comparison > figcaption {
  font-weight: 700;
}
.scratch-comparison button {
  min-height: 44px;
}
.scratch-comparison button:active {
  transform: scale(0.96);
}
.scratch-comparison__stage {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border-radius: 0.5rem;
  outline: 1px solid rgb(0 0 0 / 0.12);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.08);
  background: white;
}
.scratch-comparison__stage iframe,
.scratch-comparison__cover,
.scratch-comparison__surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.scratch-comparison__stage iframe,
.scratch-comparison__cover {
  background: white;
  border-radius: inherit;
}
.scratch-comparison__cover {
  overflow: hidden;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.scratch-comparison__cover iframe {
  filter: grayscale(1) contrast(0.22) brightness(1.14);
}
.scratch-comparison__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--scratch-coating);
  background-size: 128px 128px;
  mix-blend-mode: multiply;
  opacity: 0.25;
}
.scratch-comparison__stage[data-mode='old'] .scratch-comparison__cover iframe {
  filter: none;
}
.scratch-comparison__stage[data-mode='old'] .scratch-comparison__cover::after {
  display: none;
}

.scratch-comparison__relief {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.scratch-comparison__stage:not([data-view='scratch']) .scratch-comparison__relief {
  visibility: hidden;
}
.scratch-comparison__surface {
  cursor: pointer;
  touch-action: pan-y;
}
.scratch-comparison__surface[hidden] {
  display: none;
}
.scratch-comparison__surface[data-coin-visible] {
  cursor: none;
}
.scratch-comparison__badge {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  color: white;
  background: rgb(0 0 0 / 0.75);
  font-size: 0.75rem;
  pointer-events: none;
}
.scratch-comparison__status {
  font-size: var(--mg-font-size-250, 0.875rem);
  margin-block: 0.75rem 0;
  color: rgb(var(--mg-color-interactive));
}

/* full-page-comparison-article */
.full-page-comparison {
  padding: 1rem;
}

.full-page-comparison__nav,
.full-page-comparison__back {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.full-page-comparison__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}