/* Added Origin hero spacing and background so the new top section blends with the existing Why page visual rhythm. */
.why-origin-hero {
  /* источник цвета — только global.css palette */
  --why-color-stream: var(--color-primary);
  --why-color-capture: var(--color-foreground);
  --why-color-arrow: var(--color-primary);
  --why-color-orbit: var(--color-foreground);
  --why-color-center: var(--color-primary);
  background-color: var(--color-background);
  padding: 100px 20px 40px;
  /* Lifted hero content above the page-level decoration layer so the infographic always renders in the intended foreground stack. */
  position: relative;
  z-index: 1;
}

/* Updated the hero grid so intro/title sits above while the orbit aligns to the paragraph block center, not to the heading line. */
.why-origin-hero__layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  grid-template-areas:
    'intro .'
    'copy symbol';
  gap: 32px;
  align-items: start;
  /* Added entrance transition properties so Why hero can softly fade/raise in once JS confirms first paint is complete. */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

/* Added pre-enter state class so Why hero can start from subtle offset/opacity only when JS explicitly opts into entrance flow. */
.why-origin-hero__layout.is-enter-prepare {
  opacity: 0;
  transform: translateY(18px);
}

/* Added entered state class so Why hero returns to its final resting position after the lightweight rAF trigger. */
.why-origin-hero__layout.is-entered {
  opacity: 1;
  transform: translateY(0);
}

/* Added per-column start state so the Why hero mirrors front-page staggered entrance and the movement is visible beyond the wrapper transition. */
.why-origin-hero__layout.is-enter-prepare .why-origin-hero__intro,
.why-origin-hero__layout.is-enter-prepare .why-origin-hero__copy,
.why-origin-hero__layout.is-enter-prepare .why-origin-hero__visual {
  opacity: 0;
  transform: translateY(22px);
}

/* Added staggered keyframe trigger for Why hero columns so intro, copy, and visual fade in sequentially like front-page hero content. */
.why-origin-hero__layout.is-entered .why-origin-hero__intro,
.why-origin-hero__layout.is-entered .why-origin-hero__copy,
.why-origin-hero__layout.is-entered .why-origin-hero__visual {
  animation: whyHeroFadeInUp 0.72s ease-out forwards;
}

/* Delayed copy block slightly after intro so reading flow enters in natural top-to-bottom order in Why hero. */
.why-origin-hero__layout.is-entered .why-origin-hero__copy {
  animation-delay: 0.14s;
}

/* Delayed infographic column after text so visual context appears once headline and lead paragraphs are already readable. */
.why-origin-hero__layout.is-entered .why-origin-hero__visual {
  animation-delay: 0.28s;
}

/* Added dedicated fade-up keyframes for Why hero columns to align entrance behavior with front-page hero motion language. */
@keyframes whyHeroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disabled Why hero entrance transition for reduced-motion users so content appears immediately without movement. */
  .why-origin-hero__layout,
  .why-origin-hero__layout.is-enter-prepare,
  .why-origin-hero__layout.is-entered {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disabled staggered keyframe motion for reduced-motion users so Why hero content renders immediately in final state. */
  .why-origin-hero__layout.is-enter-prepare .why-origin-hero__intro,
  .why-origin-hero__layout.is-enter-prepare .why-origin-hero__copy,
  .why-origin-hero__layout.is-enter-prepare .why-origin-hero__visual,
  .why-origin-hero__layout.is-entered .why-origin-hero__intro,
  .why-origin-hero__layout.is-entered .why-origin-hero__copy,
  .why-origin-hero__layout.is-entered .why-origin-hero__visual {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Assigned the intro block to its own top row so heading height no longer shifts the right visual upward. */
.why-origin-hero__intro {
  grid-area: intro;
}

/* Added compact uppercase eyebrow styling to visually separate the Origin label from the hero heading. */
.why-origin-hero__eyebrow {
  margin: 0 0 10px;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Added the Hungry Team headline style using existing type families and color variables from the theme. */
.why-origin-hero__title {
  margin: 0 0 24px;
  font-family: 'Roboto Thin', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-foreground);
}

/* Added paragraph spacing and readable line-height for the new hero narrative copy block. */
.why-origin-hero__copy {
  grid-area: copy;
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-foreground);
}

/* Added spacing only between hero paragraphs so the exact supplied copy stays legible without extra wrappers. */
.why-origin-hero__copy p + p {
  margin-top: 18px;
}

/* Added a dedicated right-column wrapper so the symbol and legend can be controlled as one local vertical stack in the hero grid. */
.why-origin-hero__visual {
  /* Added one horizontal axis token for the right Hero group so page-why.php keeps a single source of truth for the center-of-mass animation alignment. */
  --why-orbit-axis-x: 50%;
  grid-area: symbol;
  justify-self: center;
  /* Bound the whole right Hero group to the axis token so symbol + legend shift together if the center-of-mass axis is retuned later. */
  transform: translateX(calc(var(--why-orbit-axis-x) - 50%));
}

/* Removed orbit/pass-star/orbit-star/impulse/transfer animation rules and keyframes from Why hero to prevent legacy visuals during the rebuild phase. */
.why-hero__symbol {
  width: clamp(260px, 28vw, 340px);
  min-height: clamp(260px, 28vw, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centered the symbol block from the shared axis token container so the Hero center mass does not drift relative to the copy column. */
  margin-inline: auto;
  justify-self: center;
  /* Keep right-column block vertically centered relative to Why hero copy while the new animation is being rebuilt. */
  align-self: center;
}

/* Removed background/frame/shadow to integrate the infographic directly into the Why hero on page-why.php without a separate card surface. */
.why-orbit-infographic {
  width: clamp(190px, 22vw, 260px);
  height: clamp(190px, 22vw, 260px);
  /* Centered the infographic frame from the same Hero axis so the visual center matches the animation center-of-mass in page-why.php. */
  margin-inline: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

/* Added block-level SVG sizing so the orbit scene always fills the allocated hero zone without layout shifts. */
.why-orbit-infographic__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Styled the center mass as a fixed brand/product anchor that never moves during the cycle. */
.why-center-mass {
  /* Replaced hardcoded RGBA center colors with palette-derived alpha mixes so Why hero center stays bound to global tokens. */
  fill: color-mix(in srgb, var(--why-color-center) 35%, transparent);
  stroke: color-mix(in srgb, var(--why-color-center) 85%, transparent);
  stroke-width: 2;
}

/* Kept stroke contrast consistent after switching from <circle> to inline path so ring readability is unchanged across responsive hero sizes. */
.why-center-mass path {
  vector-effect: non-scaling-stroke;
}

/* Started the orbit ring in a near-invisible state so it visually "emerges" only after first successful capture. */
.why-orbit-ring {
  fill: none;
  /* Replaced legacy white RGBA with orbit token alpha so ring transparency always derives from official foreground color. */
  stroke: color-mix(in srgb, var(--why-color-orbit) 75%, transparent);
  stroke-width: 1.6;
  opacity: 0.14;
  transition: opacity 0.45s ease;
}

/* Added explicit revealed state for the orbit ring to communicate that a system has formed from captured flow. */
.why-orbit-ring.is-visible {
  opacity: 0.62;
}

/* Styled stream stars as orange pass-through traffic to reinforce that not all incoming audience becomes retained. */
.why-stream-star,
.why-capture-star.is-stream {
  /* Bound stream-phase stars to the semantic stream class so runtime state uses only palette tokens from global.css. */
  fill: var(--why-color-stream);
  opacity: 0;
}

.why-capture-star.is-capture {
  /* Added dedicated capture-state class so JS can switch semantic states without inline fill colors while using the foreground token. */
  fill: var(--why-color-capture);
}

/* Styled orbit stars in white so converted leads are clearly distinguishable from the orange background stream. */
.why-orbit-star {
  fill: var(--why-color-orbit);
  opacity: 0;
}

/* Styled intervention arrows in brand orange and hid them by default so they appear only at strike moments. */
.why-capture-arrow {
  fill: var(--why-color-arrow);
  opacity: 0;
}

/* Re-scoped the legend to the right infographic wrapper so it no longer behaves as a full-width row under the hero. */
.why-orbit-legend {
  /* Added a dedicated legend scale coefficient so the Why hero legend is reduced by exactly 25% as one controlled block. */
  --why-legend-scale: 0.75;
  /* Added legend-only glyph scale tokens so icon sizing is controlled in CSS and stays independent from runtime animation logic in assets/js/positioning.js. */
  /* Reduced star marker size by 25% for the Why hero legend so visual markers no longer dominate the hero copy column. */
  --why-legend-star-size: calc(26px * var(--why-legend-scale));
  /* Reduced arrow marker size by 25% to keep intervention glyphs proportional to the smaller legend text. */
  --why-legend-arrow-size: calc(24px * var(--why-legend-scale));
  /* Reduced orbit marker width by 25% so the wide ring icon remains balanced against neighboring legend items. */
  --why-legend-orbit-width: calc(30px * var(--why-legend-scale));
  /* Reduced orbit marker height by 25% to preserve the same icon aspect at the smaller legend scale. */
  --why-legend-orbit-height: calc(24px * var(--why-legend-scale));
  /* Reduced center marker size by 25% so the "You" node matches the new compact legend hierarchy. */
  --why-legend-center-size: calc(30px * var(--why-legend-scale));
  /* Fixed legend block width window and centered it so its geometric midpoint stays on the same Hero center-of-mass axis used by the infographic. */
  width: min(100%, 300px);
  margin-inline: auto;
  margin-block: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Centered content inside each legend grid cell so left and right columns mirror each other relative to the shared hero center-of-mass axis on page-why.php. */
  justify-items: center;
  /* Reduced row/column spacing by 25% to keep marker-label pairs visually grouped after downscaling legend glyphs. */
  gap: 9px 10.5px;
}

/* Added compact two-axis alignment so each legend unit keeps a stable marker + label rhythm across breakpoints. */
.why-orbit-legend__item {
  display: inline-flex;
  align-items: center;
  /* Centered each icon+label pair within its own two-column cell so pairs no longer visually drift to the left of the vertical center axis. */
  justify-content: center;
  /* Expanded each legend item to full cell width so justify-content centers the pair by cell geometry, not by intrinsic content width. */
  width: 100%;
  /* Reduced marker-to-label spacing by 25% so each legend item remains compact in the Why hero right column. */
  gap: 7.5px;
}

/* Added a fixed glyph frame height to balance mixed SVG proportions while keeping visual scanning predictable. */
.why-orbit-legend__glyph {
  width: var(--why-legend-center-size);
  /* Reduced shared glyph frame height by 25% so all legend icons keep consistent optical size at the new scale. */
  height: calc(30px * var(--why-legend-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--why-legend-center-size);
}

/* Kept legend SVGs constrained to the shared frame so icon sizes remain balanced and readable in one baseline row. */
.why-orbit-legend__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Applied semantic color mapping to each legend glyph so it mirrors the hero infographic without adding animation states. */
.why-orbit-legend__item--stream .why-orbit-legend__glyph svg {
  /* Applied legend-only star size so pass-through marker stays the baseline reference for other legend icons. */
  width: var(--why-legend-star-size);
  height: var(--why-legend-star-size);
  /* Switched stream legend marker to the shared primary token so legend and hero use one palette source. */
  fill: var(--color-primary);
}

.why-orbit-legend__item--capture .why-orbit-legend__glyph svg {
  /* Kept capture star dimensions tied to the shared star token and switched color to foreground for strict CAC palette mapping. */
  width: var(--why-legend-star-size);
  height: var(--why-legend-star-size);
  fill: var(--color-foreground);
}

.why-orbit-legend__item--arrow .why-orbit-legend__glyph svg {
  /* Kept intervention arrow compact and mapped it to the primary token so "We" uses the same palette source as stream. */
  width: var(--why-legend-arrow-size);
  height: var(--why-legend-arrow-size);
  fill: var(--color-primary);
}

/* Kept the orbit marker wider than stars and removed nth-child dependency by targeting the dedicated orbit modifier. */
.why-orbit-legend__item--orbit .why-orbit-legend__glyph svg {
  /* Applied legend-only orbit dimensions and softened stroke so the wider orbit glyph does not dominate adjacent legend items. */
  width: var(--why-legend-orbit-width);
  height: var(--why-legend-orbit-height);
  fill: none;
  /* Switched orbit ring color to foreground with alpha to preserve LTV hierarchy while staying within the approved palette. */
  stroke: color-mix(in srgb, var(--color-foreground) 64%, transparent);
  stroke-width: 2;
}

.why-orbit-legend__item--center .why-orbit-legend__glyph {
  /* Preserved dedicated center frame size via modifier selector so icon proportions no longer depend on DOM order. */
  width: var(--why-legend-center-size);
  height: var(--why-legend-center-size);
  flex-basis: var(--why-legend-center-size);
}

.why-orbit-legend__item--center .why-orbit-legend__glyph svg {
  /* Kept center node stroke thickness and moved both fill/stroke to primary with alpha for strict "You" palette mapping. */
  fill: color-mix(in srgb, var(--color-primary) 45%, transparent);
  stroke: color-mix(in srgb, var(--color-primary) 90%, transparent);
  stroke-width: 4;
}

/* Added text styling for concise legend values so labels stay legible under the hero without stealing focus from body copy. */
.why-orbit-legend__label {
  font-family: 'Raleway Regular', sans-serif;
  /* Reduced legend label font-size by 25% so text hierarchy matches the smaller Why hero legend markers. */
  font-size: calc(0.98rem * 0.75);
  /* Reduced legend label line-height by 25% to keep text rhythm proportional to the reduced label size. */
  line-height: 0.9;
  color: var(--color-foreground);
}



/* Added an explicit mobile zone (<=768px) so all narrow-screen behavior is isolated and easier to maintain during future Why-page iterations. */
@media (max-width: 768px) {
  /* Tuned legend-only glyph scale for mobile so icon hierarchy stays readable within the two-column legend layout. */
  .why-orbit-legend {
    /* Reduced mobile star marker baseline by 25% so the compact two-column legend keeps equal density across breakpoints. */
    --why-legend-star-size: 18px;
    /* Reduced mobile arrow marker baseline by 25% to preserve icon balance after legend compaction on narrow screens. */
    --why-legend-arrow-size: 16.5px;
    /* Reduced mobile orbit width by 25% so LTV marker stays proportionate to other smaller mobile legend glyphs. */
    --why-legend-orbit-width: 21px;
    /* Reduced mobile orbit height by 25% to keep ring proportions aligned with reduced orbit width. */
    --why-legend-orbit-height: 16.5px;
    /* Reduced mobile center marker baseline by 25% so the "You" marker does not visually overpower short labels. */
    --why-legend-center-size: 21px;
  }

  .why-origin-hero {
    padding: 80px 20px 24px;
  }

  .why-origin-hero__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'intro'
      'copy'
      'symbol';
    gap: 24px;
  }

  /* Kept the right visual wrapper centered on mobile so the legend stays attached under the symbol after moving into the same markup block. */
  .why-origin-hero__visual {
    justify-self: center;
    width: clamp(190px, 60vw, 240px);
  }

  /* Reduced Why hero placeholder wrapper size on mobile so the right-column block remains proportionate to the copy column. */
  .why-hero__symbol {
    width: 100%;
    min-height: clamp(190px, 60vw, 240px);
  }

  /* Scaled down the neutral infographic container on mobile to keep the orbit fully visible without squeezing the copy column. */
  .why-orbit-infographic {
    width: clamp(150px, 48vw, 210px);
    height: clamp(150px, 48vw, 210px);
  }

  /* Switched the legend to two columns on small screens so markers and labels remain readable without horizontal overflow. */
  .why-orbit-legend {
    /* Replaced fixed 120px minimum tracks with fluid tracks so two mobile legend columns can shrink within .why-origin-hero__visual on page-why.php. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Explicitly kept horizontal auto-centering for the mobile legend block so its visual center stays aligned with the orbit axis in page-why.php hero. */
    margin-inline: auto;
    /* Explicitly kept centered content inside both mobile legend columns so icon+label pairs remain mirrored around the orbit centerline. */
    justify-items: center;
    /* Reduced the mobile inter-column gap so the two-column legend geometry stays inside the narrow hero visual container without overflow. */
    gap: 9px 8px;
  }
}

/* Added an explicit tablet zone (769-1024px) and selected the "legend under symbol in right zone" pattern as the compromise for this breakpoint. */
/* This pattern keeps the legend visually attached to the right infographic block and prevents it from reading like a global footer under the whole section. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Kept the right column as a local vertical stack so the symbol remains first and the legend remains second specifically on tablet widths. */
  .why-origin-hero__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: clamp(250px, 32vw, 320px);
    align-self: center;
  }

  /* Limited legend width to the right column and split it into two compact columns, which balances readability and avoids overlap with the left copy block. */
  .why-orbit-legend {
    /* Kept tablet legend centered as one block so its midpoint remains locked to the shared Hero axis under the symbol. */
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

/* Added an explicit desktop zone (>=1025px) so large-screen alignment rules are separated from tablet compromises. */
@media (min-width: 1025px) {
  /* Preserved right-column grouping on desktop to keep symbol and legend perceived as one explanatory unit beside the hero text. */
  .why-origin-hero__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: clamp(260px, 28vw, 340px);
    align-self: center;
  }

  /* Kept desktop legend in the same centered block model so large-screen alignment still follows the shared Hero axis. */
  .why-orbit-legend {
    /* Kept desktop legend centered to preserve one visual axis between labels, orbit SVG, and the center-mass animation on page-why.php. */
    margin-inline: auto;
  }
}


/* Cleanup after positioning section removal: deleted obsolete .positioning-* and related intro/frame selectors that no longer exist in page-why markup. */

/* Added Top 10 Reasons layout styles so Why page renders a two-column desktop grid with card-level expand interactions. */
.top-reasons-section {
  margin-top: 60px;
  padding: 0 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.top-reasons-grid {
  display: grid;
  /* Switched Top 10 Reasons on page-why.php to a single desktop column and constrained grid width so expanded cards keep a tile-like shape and avoid empty stretch beside a neighboring card. */
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
  gap: 20px;
  margin-top: 40px;
}

.top-reason-card {
  background-color: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 24px;
  /* Restored visible overflow on Why reason cards so focus outlines/shadows from in-card controls are never clipped by the card container. */
  overflow: visible;
  font-family: 'Raleway Regular', sans-serif;
  color: var(--color-foreground);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.top-reason-card:hover,
.top-reason-card.is-open {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}

.top-reason-card__title {
  font-family: 'Roboto Regular', sans-serif;
  color: var(--color-primary);
  font-size: 1.12rem;
  margin: 0 0 12px;
}

.top-reason-card__subtitle {
  margin: 0 0 16px;
  line-height: 1.5;
  opacity: 0.9;
}

.top-reasons-grid .top-reason-card__toggle.cta-button,
.additional-reasons-grid .top-reason-card__toggle.cta-button {
  /* Локальная геометрическая надстройка для кнопок Read full reason в Top 10 и Additional Reasons на page-why.php: делаем компактный карточный ритм, не трогая глобальный hover transform из global.css. */
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.25;
  border-radius: 5px;
}

.top-reason-card__content {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
  /* Kept content overflow visible so keyboard focus ring and hover shadow of Pin/Pinned controls can render fully inside expanded card content. */
  overflow: visible;
  line-height: 1.65;
}

.top-reason-card__content p,
.top-reason-card__content ol {
  margin: 0 0 12px;
}

.top-reason-card__content ol {
  padding-left: 20px;
}

/* Added a local action row inside expanded reason content so pin controls stay scoped to Why cards and do not affect global button layouts. */
.reason-pin-action {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--color-foreground) 28%, transparent);
  /* Switched Why card pin action area to inline flex layout so button + toast align in one row in both Top Reasons and Additional Reasons cards. */
  display: flex;
  /* Kept vertical centering inside the action row so the toast baseline stays visually aligned with the pin button across both reason grids. */
  align-items: center;
  /* Added controlled spacing between pin button and toast to avoid manual margins and keep one reusable action-row rule for both sections. */
  gap: 10px;
  /* Enabled wrapping fallback so narrow cards can move toast below the button without overlap or horizontal overflow. */
  flex-wrap: wrap;
}

/* Added a card-level toast style so pin/unpin feedback appears directly near the pressed button in Why reason cards. */
.reason-pin-toast {
  /* Removed absolute placement so toast participates in normal flow inside .reason-pin-action and follows the shared inline row behavior. */
  position: static;
  /* Fixed toast box model to border-box so padding and border stay inside the card-level width budget. */
  box-sizing: border-box;
  /* Kept toast in card width budget while allowing button focus visuals to stay unaffected by parent overflow rules. */
  inline-size: 100%;
  /* Kept full-width max constraint using logical sizing to prevent locale-dependent overflow in narrow card states. */
  max-inline-size: 100%;
  /* Allowed inline shrink to zero so flex-wrap can move toast under the button without overflow artifacts. */
  min-inline-size: 0;
  /* Forced toast flex item to consume a full wrapped row so long localized text does not squeeze the pin button on narrow cards. */
  flex: 1 0 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 48%, transparent);
  background: color-mix(in srgb, var(--color-dark) 88%, var(--color-primary) 12%);
  color: var(--color-foreground);
  font-family: 'Raleway Regular', sans-serif;
  font-size: 0.84rem;
  line-height: 1.35;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--color-dark) 65%, transparent);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  /* Changed hidden-state motion to a subtle horizontal offset so inline toast reveal does not create a vertical jump inside card flow. */
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Added a dedicated toast text wrapper so long pin feedback is wrapped locally inside toast without introducing card-level overflow clipping. */
.reason-pin-toast__text {
  display: block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Reused the same visibility API as the section toast so JS can reveal/hide card toasts through one class switch. */
.reason-pin-toast.is-visible {
  opacity: 1;
  /* Preserved the existing is-visible API while resetting inline-motion offset for smooth in-row appearance. */
  transform: translateX(0);
}

/* Updated Why-only pin control sizing to layer on .scenario-button-base so Pin/Pinned stays compact while using non-CTA scenario styling in Why cards. */
.reason-pin-action__button.scenario-button-base {
  min-width: 104px;
  padding: 9px 14px;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Added Why-local hover/focus state reinforcement so card pin controls keep visible border/shadow/outline when card overflow is fully visible. */
.reason-pin-action__button.scenario-button-base:hover,
.reason-pin-action__button.scenario-button-base:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* Kept explicit pinned-state contrast so saved cards remain clearly marked while the control now uses the shared scenario button system. */
.reason-pin-action__button.scenario-button-base[aria-pressed='true'] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* Added section-local toast surface so pin/unpin feedback appears near Top and Additional Why sections instead of a global notification layer. */
.why-pin-toast {
  margin: 16px auto 0;
  max-width: 760px;
  /* Slightly reduced toast paddings so the feedback reads as inline microcopy instead of a wide banner in Why sections. */
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 48%, transparent);
  background: color-mix(in srgb, var(--color-dark) 84%, var(--color-primary) 16%);
  color: var(--color-foreground);
  font-family: 'Raleway Regular', sans-serif;
  /* Trimmed base type size to keep pin/unpin feedback subtle and secondary to reason-card and CTA copy. */
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Added visible toast modifier so JS can reveal short feedback transitions without manipulating inline style attributes. */
.why-pin-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shared scenario/chapter control pattern for Services + Front Page + Why: Additional Reasons section keeps a dedicated content frame under Top 10 cards. */
.additional-reasons-section {
  margin-top: 56px;
  padding: 0 20px;
  max-width: 1200px;
  margin-inline: auto;
}

/* Shared scenario/chapter control pattern for Services + Front Page + Why: chapter selector uses the same base control row while Why keeps denser wrapping for 6 chapters. */
.additional-reasons-tabs {
  margin-top: 30px;
  justify-content: center;
}

/* Shared scenario/chapter control pattern for Services + Front Page + Why: chapter buttons get flexible widths so desktop can keep one readable row with natural wrapping. */
.additional-reasons-tab {
  flex: 1 1 180px;
  max-width: 260px;
}

/* Shared scenario/chapter control pattern for Services + Front Page + Why: explicit selected state keeps chapter choice visible alongside .is-active API. */
.additional-reasons-tab[aria-selected='true'],
.additional-reasons-tab.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

@media (max-width: 768px) {
  /* Зафиксировали fallback-геометрию action-строки именно для Why cards на мобильных: сохраняем flex-контейнер и явный wrap, чтобы toast мог безопасно уйти на новую строку при узкой карточке. */
  .reason-pin-action {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
  }

  /* Shared scenario/chapter control pattern for Services + Front Page + Why: mobile chapter selector keeps full-width readable buttons with stable spacing. */
  .additional-reasons-tab {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Добавили mobile fallback для toast в Why cards: при нехватке ширины блок занимает новую строку под Pin/Pinned и остаётся визуально связан с кнопкой внутри той же карточки. */
  .reason-pin-toast {
    /* Removed mobile clamp width so toast fully follows the card width and always wraps onto the next line under the button. */
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.8rem;
  }
}

/* Added chapter result surface so hint and selected chapter cards share one framed container with predictable spacing. */
.additional-reasons-result {
  margin-top: 24px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.015);
  padding: 22px;
}

.additional-reasons-result__hint {
  margin: 0;
  text-align: center;
  font-family: 'Raleway Regular', sans-serif;
  color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}

.additional-reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Added a Why-specific bridge CTA surface so the transition from Additional Reasons to MVV feels native to this template, not imported from another page. */
.why-bridge-cta {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--color-dark) 90%, transparent),
    color-mix(in srgb, var(--color-dark) 78%, var(--color-primary) 22%)
  );
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 24%, transparent);
  position: relative;
  z-index: 1;
}

/* Removed the pre-init top-state hide so page-why server render always exposes the default CTA copy when JS is unavailable. */

/* Added compact heading hierarchy for the bridge CTA so it reads as a strategic transition before the denser MVV block. */
.why-bridge-cta h2 {
  margin: 0 0 14px;
  font-family: 'Roboto Thin', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.2;
  text-align: center; /* Added explicit bridge CTA heading centering so this transition headline stays centered before the MVV block. */
}

/* Added a top-state stack container so default and pinned CTA narratives share one rhythm while JS toggles state visibility in-place. */
.why-bridge-cta__top-state {
  display: grid;
  gap: 14px;
}

/* Защищаем native hidden в Why CTA от переопределения явным display у state-блоков, чтобы в каждый момент оставалось только активное состояние. */
.why-bridge-cta [hidden] {
  display: none !important;
}

/* Added controlled paragraph rhythm to separate value and process statements while keeping the section concise. */
.why-bridge-cta p {
  margin: 0;
  font-family: 'Raleway Regular', sans-serif;
  line-height: 1.7;
  text-align: center; /* Центрируем value/process copy в блоке why-bridge-cta на page-why.php, чтобы текстовый ритм совпадал с центрированной CTA-композицией. */
}

/* Added value paragraph emphasis to keep the audit offer readable as a continuation of Why-page argumentation. */
.why-bridge-cta__value {
  color: color-mix(in srgb, var(--color-foreground) 95%, transparent);
}

/* Added pinned-state headline hook so the dynamic "You've found X reasons..." title keeps the same hierarchy as the default bridge headline. */
.why-bridge-cta__pinned-title {
  margin: 0;
}

/* Added pinned-state narrative paragraph style so both provided explanatory lines read as one coherent CTA preface before shortlist controls. */
.why-bridge-cta__state-copy {
  color: color-mix(in srgb, var(--color-foreground) 88%, transparent);
}

/* Added process paragraph spacing so response-time and lead-form flow are visible as the practical next step. */
.why-bridge-cta__process {
  margin-top: 14px;
  color: color-mix(in srgb, var(--color-foreground) 84%, transparent);
}

/* Kept only bridge CTA layout rules in the actions container so button visuals come from shared global button styles. */
.why-bridge-cta__actions {
  margin-top: 24px;
  display: flex;
  justify-content: center; /* Центрируем группу кнопок в why-bridge-cta на page-why.php по шаблону front-page/services CTA-групп. */
  gap: 14px;
  align-items: center;
  flex-wrap: wrap; /* Сохраняем перенос кнопок в why-bridge-cta, чтобы при сужении ширины ряды оставались центрированными без принудительного столбца. */
}

/* Softened shortlist block styling so pinned reasons read as part of the bridge CTA narrative instead of a separate heavy panel. */
.why-bridge-cta__shortlist {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 24%, transparent);
}

/* Removed obsolete shortlist-intro typography hooks because pinned narrative now lives in dedicated CTA top-state blocks. */
/* Tightened shortlist list spacing so list content sits closer to intro copy and mirrors bridge CTA paragraph rhythm. */
.why-bridge-cta__shortlist-list {
  margin: 16px auto 0;
  max-width: min(680px, 100%);
  width: fit-content;
  padding-left: 30px;
  text-align: left;
  display: grid;
  justify-content: center;
  gap: 10px;
}

/* Added shortlist toggle row spacing so the expand/collapse control sits between list content and export actions with a calm vertical rhythm. */
.why-bridge-cta__shortlist-toggle-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* Added shortlist toggle button polish so See full/Collapse control follows the existing scenario-button utility language. */
.why-bridge-cta__shortlist-toggle.scenario-button-base {
  min-width: 220px;
}

/* Tightened shortlist action spacing so controls feel connected to the shortlist list instead of detached as a utility panel. */
.why-bridge-cta__shortlist-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Added shortlist copy status styling so users get clear feedback after short/full copy actions in bridge CTA. */
.why-bridge-cta__shortlist-copy-status {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.95rem;
  min-height: 1.3em;
}

/* Added success status color hook so copy confirmation remains readable against the bridge CTA dark surface. */
.why-bridge-cta__shortlist-copy-status[data-copy-status="success"] {
  color: color-mix(in srgb, #7be495 90%, white 10%);
}

/* Added error status color hook so copy fallback failures are visually distinguishable from success states. */
.why-bridge-cta__shortlist-copy-status[data-copy-status="error"] {
  color: color-mix(in srgb, #ff8e8e 92%, white 8%);
}

/* Added a compact spacing override so chapter cards remain visually tied to the chapter panel and not to global card rhythm. */
.additional-reason-card {
  /* Added one shared stagger index token so assets/js/positioning.js can control chapter card enter order without touching read-more disclosure animation. */
  --stagger-index: 0;
  margin: 0;
  /* Added chapter-card enter transition baseline (opacity + vertical lift) so only chapter activation animates, while card text disclosure stays on existing logic. */
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: 420ms;
  transition-timing-function: ease;
}

/* Added pre-enter state for chapter card stagger so inactive/newly selected chapter cards start hidden and slightly shifted downward before activation. */
.additional-reason-card.is-pre-enter {
  opacity: 0;
  transform: translateY(18px);
}

/* Added enter state with per-card delay token to reveal only active chapter cards in sequence during panel activation. */
.additional-reason-card.is-enter {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--stagger-index) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  /* Disabled chapter card stagger motion in reduced-motion mode so cards appear immediately and remain fully readable without delays. */
  .additional-reason-card,
  .additional-reason-card.is-pre-enter,
  .additional-reason-card.is-enter {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
}

/* Updated pain-point emphasis color to the primary token so local accents stay aligned with global strong styling in Top 10 reason cards. */
.pain-point {
  color: var(--color-primary);
  font-family: 'Roboto Bold', sans-serif;
}

/* Mission Vision Values блок */
.mvv-section {
  text-align: center;
  margin: 60px auto;
  max-width: 800px;
  padding: 30px;
  background-color: var(--color-dark);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 0 10px rgba(255, 72, 0, 0.3);
}

.mvv-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(255, 72, 0, 0.5);
}

.mvv-section h2 {
  font-size: 2rem;
  font-family: 'Roboto Thin', sans-serif;
  margin-bottom: 20px;
}

.mvv-disclaimer {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 30px;
  line-height: 1.6;
}

.mvv-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1rem;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.mvv-button:hover {
  background-color: var(--color-hover);
}

.mvv-block p {
  margin-bottom: 1em;
}

.mvv-blocks {
  display: none;
  max-width: 800px;
  margin: 40px auto;
}

/* Added a dedicated MVV-to-CTA action row so the new "So shall we?" button sits between Values and P.S. with centered layout and consistent spacing. */
.mvv-return-cta {
  display: flex;
  justify-content: center;
  margin: 8px 0 30px;
}

.mvv-block {
  background-color: var(--color-dark);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 0 12px rgba(255, 72, 0, 0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.mvv-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.mvv-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(255, 72, 0, 0.7);
}

.mvv-block h3 {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.mvv-block h4 {
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.2rem;
  margin-top: 15px;
}

.mvv-block p, .mvv-block blockquote {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.mvv-block blockquote {
  font-style: italic;
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  padding-left: 15px;
  margin: 15px 0;
}

.mvv-image {
  /* Bugfix guard (Why page, MVV P.S. block): фиксируем естественные пропорции изображения и запрещаем принудительную высоту через каскад, чтобы исключить повтор искажения при смене источника. */
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 15px;
}

/* Для мобилки уточняем, если нужно визуально больше воздуха */
@media (max-width: 768px) {
  /* Added mobile bridge CTA spacing so the section breathes before MVV on narrow viewports. */
  .why-bridge-cta {
    margin-top: 44px;
    padding: 24px 20px;
  }

  /* Kept bridge CTA heading centered on mobile to prevent inherited/template overrides from shifting it left. */
  .why-bridge-cta h2 {
    text-align: center;
  }

  /* Added mobile shortlist padding/indent adjustments so the new bridge CTA list keeps comfortable tap targets without horizontal overflow. */
  .why-bridge-cta__shortlist {
    padding-top: 16px;
  }

  .why-bridge-cta__shortlist-list {
    max-width: min(100%, 420px);
    padding-left: 24px;
    gap: 9px;
  }

  /* Kept mobile shortlist toggle centered and full-width friendly so the control remains easy to tap near the CTA actions. */
  .why-bridge-cta__shortlist-toggle.scenario-button-base {
    width: min(100%, 320px);
  }

  /* Tuned mobile toast rhythm so short pin/unpin messages stay readable without taking on full-width banner weight. */
  .why-pin-toast {
    margin-top: 14px;
    padding: 8px 11px;
    font-size: 0.86rem;
    line-height: 1.35;
  }

   #mvv-button {
    margin-bottom: 32px ;
  }
}

/* SVG-DECOR */
.why-decor-scope {
  /* Added a Why page wrapper to clip SVG decorations within the page content area. */
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.svg-decor-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Allow the layer height to follow the Why scope for JS recalculation. */
  pointer-events: none;
  overflow: visible; /* Keep SVG decorations visible inside the clipped scope. */
  z-index: 0;
}

.svg-decor-layer .decor {
  position: absolute;
  opacity: 0.4;
  transition: transform 0.5s ease;
}

.svg-decor-layer .decor:hover {
  opacity: 0.7;
  transform: scale(1.2) rotate(15deg);
}