@layer cs142-base, cs142-r13, cs142-r132, cs142-r141;
@import url("/assets/css/homepage-connected-system-r142-base.css?v=ce1afdd") layer(cs142-base);
@import url("/assets/css/homepage-connected-system-r142-r13.css?v=ce1afdd") layer(cs142-r13);
@import url("/assets/css/homepage-connected-system-r142-r132.css?v=ce1afdd") layer(cs142-r132);
@import url("/assets/css/homepage-connected-system-r142-r141.css?v=ce1afdd") layer(cs142-r141);

/* Production integration shell for approved Connected System R1.4.2.
   Prototype CSS is imported in cascade layers so its review/global reset rules
   cannot override the existing Homepage's unlayered global authorities. */
.connected-next.connected-next--production {
  --bg:#060708;
  --bg-deep:#030405;
  --pearl:#f2efe8;
  --pearl-soft:#d8d4cb;
  --silver:#b4babd;
  --silver-soft:#899195;
  --graphite-silver:#737d82;
  --muted:#72797c;
  --champagne:#d3b37f;
  --champagne-soft:#ab8e65;
  --line:rgba(240,236,227,.12);
  --line-soft:rgba(240,236,227,.06);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-material:cubic-bezier(.2,.72,.18,1);
  width:min(100% - 80px,1440px);
  margin:0 auto;
  padding-top:clamp(44px,5vw,72px);
  padding-bottom:clamp(64px,7vw,104px);
}

.connected-next.connected-next--production button { font:inherit; }

/* Hero -> Connected: keep the first state calm and visually separate without
   inserting another bridge component. */
#hero + .connected-next.connected-next--production {
  margin-top:0;
}

/* Connected -> Two Worlds: the sticky composition must fully release before
   the next approved block becomes the visual authority. */
.connected-next.connected-next--production + .tw-r2 {
  position:relative;
  z-index:1;
}

.connected-next--production .connected-next__footer {
  padding-bottom:0;
}
.connected-next--production .connected-next__footer > p {
  max-width:760px;
}

/* Production has fixed-language pages; review controls/registers never render. */
.connected-next--production .review-language,
.connected-next--production .connected-next__register { display:none !important; }

/* Progressive fallback local to this component. JS removes this class at init. */
.connected-next--production.connected-next--nojs .connected-next__experience {
  min-height:auto !important;
  padding-top:28px;
}
.connected-next--production.connected-next--nojs .connected-next__sticky-stage {
  position:static !important;
  min-height:0 !important;
  align-items:start;
}
.connected-next--production.connected-next--nojs .ledger-plate {
  min-height:auto !important;
  height:auto !important;
  opacity:1 !important;
  transform:none !important;
  overflow:visible !important;
}
.connected-next--production.connected-next--nojs .ledger-detail {
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  max-height:none !important;
  height:auto !important;
}
.connected-next--production.connected-next--nojs .state-ledger {
  gap:10px;
}

@media (max-width:700px) {
  .connected-next.connected-next--production {
    width:min(100% - 28px,640px);
    padding-top:34px;
    padding-bottom:58px;
  }
  .connected-next--production.connected-next--nojs .connected-next__sticky-stage {
    display:block !important;
  }
  .connected-next--production.connected-next--nojs .ledger-zone {
    margin-top:22px;
  }
}

@media (max-height:520px) and (min-width:701px) {
  .connected-next.connected-next--production {
    width:min(100% - 34px,1440px);
    padding-top:22px;
    padding-bottom:36px;
  }
}

/* =========================================================
   R1.4.3 — MOBILE STATE / TYPOGRAPHY FINALIZATION
   Stability is governed in JS. This layer only widens mobile reading runway,
   protects long EN/RU labels, and tightens material hierarchy.
   ========================================================= */

/* Slightly denser active graphite with a precise directional material edge. */
.ledger-plate.is-active{
  background:
    linear-gradient(104deg,rgba(255,255,255,.030) 0%,rgba(255,255,255,.009) 27%,transparent 44%),
    radial-gradient(118% 94% at 5% 0%,rgba(246,242,233,.062),transparent 44%),
    linear-gradient(111deg,#1d1f20 0%,#161819 53%,#0e1011 100%);
}
.ledger-plate.is-active .ledger-plate__edge{
  width:1px;
  background:linear-gradient(180deg,rgba(247,243,234,.78),rgba(226,222,214,.38) 58%,rgba(142,147,148,.08));
}
.ledger-plate.is-past .ledger-detail,
.ledger-plate.is-future .ledger-detail{opacity:0!important}

/* Existing component grids keep their geometry, but every cell owns a real safe box. */
.customer-components,
.assistive-components,
.resolution-components{min-width:0}
.customer-components span,
.assistive-components span,
.resolution-components span{
  min-width:0;
  max-width:100%;
  overflow:visible;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

@media (max-width:700px){
  /* Wider physical runway makes stage 01 and each following semantic state stoppable. */
  .connected-next__experience{min-height:235svh}

  .ledger-plate.is-active{
    min-height:240px;
    padding-bottom:24px;
  }
  .ledger-plate.is-active .ledger-detail{max-height:238px}
  .ledger-plate.is-active .ledger-components{
    max-width:100%;
    overflow:visible;
    line-height:1.4;
  }

  /* Preserve geometry while preventing historical wording from reading beneath authority. */
  .context-artifact[data-state="3"] .customer-components{opacity:.14!important}
  .context-artifact[data-state="4"] .assistive-components{opacity:.10!important}

  .assistive-components,
  .resolution-components{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .resolution-components{left:13%;right:5%;column-gap:10px}
  .assistive-components{right:8%;column-gap:10px}
}

@media (max-width:390px){
  .resolution-components{left:12%;right:4%;column-gap:8px}
  .assistive-components{left:14%;right:7%;column-gap:8px}
  .connected-next[data-language="ru"] .resolution-components span,
  .connected-next[data-language="ru"] .assistive-components span{letter-spacing:.045em}
}

/* Low landscape: safe text boxes without shrinking the semantic typography globally. */
@media (max-height:520px) and (min-width:701px){
  .ledger-plate.is-active{
    min-height:164px;
    padding-bottom:16px;
  }
  .ledger-plate.is-active .ledger-detail{max-height:138px}
  .ledger-plate.is-active .ledger-components{line-height:1.22}

  .assistive-components,
  .resolution-components{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .assistive-components{left:14%;right:7%;gap:7px 10px}
  .resolution-components{left:12%;right:4%;gap:6px 10px}
  .assistive-components span,
  .resolution-components span{letter-spacing:.045em;line-height:1.14}
}

/* RESULT stays restrained champagne; improve separation, not brightness. */
.connected-next[data-active-stage="4"] .ledger-plate[data-stage-button="4"]{
  background:
    linear-gradient(104deg,rgba(240,218,183,.040) 0%,rgba(240,218,183,.009) 28%,transparent 45%),
    radial-gradient(120% 96% at 6% 0%,rgba(233,207,167,.12),transparent 45%),
    linear-gradient(109deg,#221e19 0%,#191612 49%,#101110 100%);
}

@media (prefers-reduced-motion:reduce){
  .ledger-plate,.ledger-plate__edge{transition:none!important}
}