/* =========================================
   FRAMEMOGM RECOMMENDATIONS
========================================= */

.recommendations-page {
  min-height: 100vh;
}


/* =========================================
   TOP BAR
========================================= */

.recommendations-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  position: relative;
  z-index: 20;
}

.recommendations-brand {
  text-decoration: none;
}

.recommendations-back,
.guide-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 10px 15px;

  border-radius: 12px;

  border:
    1px
    solid
    var(--border);

  background:
    rgba(5, 8, 14, 0.43);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color: #d9e2ec;

  font-family: inherit;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.1em;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.recommendations-back:hover,
.guide-return:hover {
  transform: translateY(-2px);

  border-color:
    var(--accent-border);

  background:
    var(--accent-soft);
}


/* =========================================
   SCREEN SYSTEM
========================================= */

.recommendations-screen {
  display: none;

  opacity: 0;

  transform: translateX(26px);
}

.recommendations-screen.active-screen {
  display: block;

  animation:
    screenEnter
    0.45s
    ease
    forwards;
}

@keyframes screenEnter {

  from {
    opacity: 0;
    transform: translateX(26px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* =========================================
   HOME HERO
========================================= */

.recommendations-hero {
  max-width: 1040px;

  margin: 0 auto;

  padding:
    76px
    20px
    54px;

  text-align: center;
}

.recommendations-kicker {
  display: inline-flex;

  padding:
    9px
    16px;

  border-radius: 999px;

  border:
    1px
    solid
    var(--accent-border);

  background:
    rgba(7, 19, 31, 0.48);

  color:
    var(--accent);

  font-size: 10px;
  font-weight: 950;

  letter-spacing: 0.19em;
}

.recommendations-hero h1 {
  margin:
    26px
    0
    0;

  color: #f4f7fb;

  font-size:
    clamp(
      54px,
      8vw,
      102px
    );

  line-height: 0.9;

  font-weight: 950;

  letter-spacing: -0.055em;
}

.recommendations-hero h1 span {
  display: block;
}

.hero-accent {
  margin-top: 12px;

  color:
    var(--accent);

  text-shadow:
    0
    0
    28px
    rgba(69, 167, 255, 0.12);
}

.recommendations-hero p {
  max-width: 820px;

  margin:
    29px
    auto
    0;

  color: #b9c1ca;

  font-size: 15.5px;

  line-height: 1.75;
}


/* =========================================
   GUIDE SELECTION
========================================= */

.guide-selection {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}

.guide-choice {
  min-height: 430px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 32px;

  text-align: left;

  border-radius: 28px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.11);

  background:
    linear-gradient(
      145deg,
      rgba(10, 16, 24, 0.76),
      rgba(5, 10, 17, 0.59)
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  color: inherit;

  font: inherit;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.guide-choice:hover {
  transform: translateY(-5px);

  border-color:
    var(--accent-border);

  background:
    linear-gradient(
      145deg,
      rgba(11, 25, 39, 0.83),
      rgba(5, 11, 19, 0.70)
    );

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.22);
}

.guide-choice-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.guide-code {
  color:
    var(--accent);

  font-size: 10px;
  font-weight: 950;

  letter-spacing: 0.16em;
}

.guide-index {
  color:
    rgba(255, 255, 255, 0.15);

  font-size: 50px;

  font-weight: 950;

  line-height: 1;
}

.guide-choice h2 {
  margin:
    30px
    0
    13px;

  color: #ffffff;

  font-size:
    clamp(
      34px,
      5vw,
      55px
    );

  line-height: 0.97;

  letter-spacing: -0.04em;
}

.guide-choice p {
  max-width: 540px;

  margin: 0;

  color: #afb8c2;

  font-size: 14.5px;

  line-height: 1.65;
}

.guide-metadata {
  display: grid;

  gap: 9px;

  margin-top: 32px;
}

.guide-metadata div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    10px
    0;

  border-bottom:
    1px
    solid
    rgba(255, 255, 255, 0.07);
}

.guide-metadata span {
  color: #697584;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.13em;
}

.guide-metadata strong {
  color: #d9e3ed;

  font-size: 11px;

  letter-spacing: 0.06em;
}

.guide-open {
  display: flex;

  justify-content: space-between;

  margin-top: 27px;

  color: #eef5fb;

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.09em;
}

.guide-open span:last-child {
  color:
    var(--accent);

  font-size: 22px;
}


/* =========================================
   APP HEADER
========================================= */

.guide-app-top {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-top: 51px;
}

.guide-current {
  color: #7c8793;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.14em;
}

.guide-current span {
  color:
    var(--accent);
}


/* =========================================
   PROGRESS
========================================= */

.progress-shell {
  margin:
    42px
    auto
    34px;

  padding:
    23px
    25px;

  border-radius: 20px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(6, 10, 16, 0.52);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.progress-track {
  display: flex;

  align-items: center;

  width: 100%;
}

.progress-step {
  flex: 0 0 auto;

  min-width: 72px;

  border: 0;

  background: transparent;

  color: #596572;

  font: inherit;

  cursor: default;

  padding: 0;
}

.progress-number {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.12em;
}

.progress-name {
  display: block;

  font-size: 11px;

  font-weight: 950;

  letter-spacing: 0.11em;
}

.progress-step.active,
.progress-step.complete {
  color:
    var(--accent);
}

.progress-step.active .progress-name {
  color: #ffffff;
}

.progress-line {
  flex: 1;

  height: 1px;

  margin:
    0
    16px;

  background:
    rgba(255, 255, 255, 0.11);
}

.progress-line.complete {
  background:
    var(--accent-border);
}


/* =========================================
   GUIDE FLOWS
========================================= */

.guide-flow {
  display: none;
}

.guide-flow.active-flow {
  display: block;
}

.flow-step {
  display: none;
}

.flow-step.active-step {
  display: block;

  animation:
    flowIn
    0.46s
    ease;
}

@keyframes flowIn {

  from {
    opacity: 0;
    transform: translateX(35px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* =========================================
   BLUEPRINT CARD
========================================= */

.blueprint-card {
  position: relative;

  overflow: hidden;

  padding:
    39px
    42px;

  border-radius: 29px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.11);

  background:
    linear-gradient(
      145deg,
      rgba(8, 14, 22, 0.76),
      rgba(6, 10, 16, 0.61)
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.24);
}

.blueprint-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.65;
}

.blueprint-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: #65717e;

  font-size: 9px;

  font-weight: 950;

  letter-spacing: 0.16em;
}

.blueprint-top span:first-child {
  color:
    var(--accent);
}

.blueprint-heading {
  margin-top: 39px;
}

.blueprint-eyebrow {
  margin-top: 40px;

  color:
    var(--accent);

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.18em;
}

.blueprint-card h2,
.stage-main-title,
.plan-main-title {
  max-width: 920px;

  margin:
    11px
    0
    0;

  color: #ffffff;

  font-size:
    clamp(
      33px,
      5vw,
      57px
    );

  line-height: 1.04;

  letter-spacing: -0.042em;
}

.blueprint-summary {
  max-width: 900px;

  margin:
    25px
    0
    0;

  color: #c0c9d2;

  font-size: 15px;

  line-height: 1.78;
}

.blueprint-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 28px;
}

.blueprint-tags span {
  padding:
    8px
    11px;

  border-radius: 9px;

  border:
    1px
    solid
    rgba(69, 167, 255, 0.20);

  background:
    rgba(69, 167, 255, 0.06);

  color: #a8cdec;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.11em;
}


/* =========================================
   FULL INFORMATION
========================================= */

.expand-information {
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 31px;

  padding:
    17px
    18px;

  border-radius: 14px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(4, 8, 13, 0.44);

  color: #dce5ed;

  font: inherit;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.11em;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.expand-information:hover {
  border-color:
    var(--accent-border);

  background:
    rgba(8, 20, 33, 0.56);
}

.expand-arrow {
  color:
    var(--accent);

  font-size: 18px;

  transition:
    transform 0.25s ease;
}

.expand-information.open .expand-arrow {
  transform: rotate(180deg);
}

.full-information {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows 0.42s ease,
    opacity 0.32s ease;
}

.full-information.open {
  grid-template-rows: 1fr;

  opacity: 1;
}

.full-information-inner {
  overflow: hidden;
}

.full-information-inner {
  padding-top: 0;

  transition:
    padding-top 0.35s ease;
}

.full-information.open .full-information-inner {
  padding-top: 28px;
}

.full-information p {
  margin:
    0
    0
    19px;

  color: #c1c9d2;

  font-size: 15px;

  line-height: 1.8;
}

.full-information p:last-child {
  margin-bottom: 0;
}


/* =========================================
   ACTION BUTTONS
========================================= */

.step-actions {
  display: flex;

  justify-content: flex-end;

  margin-top: 38px;
}

.dual-actions {
  justify-content: space-between;

  gap: 15px;
}

.primary-next,
.secondary-step {
  min-height: 47px;

  padding:
    12px
    19px;

  border-radius: 13px;

  font: inherit;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.09em;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.primary-next {
  border:
    1px
    solid
    var(--accent-border);

  background:
    var(--accent);

  color: #071019;
}

.primary-next:hover {
  transform: translateY(-2px);
}

.secondary-step {
  border:
    1px
    solid
    rgba(255, 255, 255, 0.10);

  background:
    rgba(255, 255, 255, 0.04);

  color: #b9c4cf;
}

.secondary-step:hover {
  border-color:
    var(--accent-border);

  color: #ffffff;
}


/* =========================================
   DECISION INFO
========================================= */

.decision-info {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 20px;

  margin-top: 30px;

  padding: 22px;

  border-radius: 19px;

  border:
    1px
    solid
    rgba(69, 167, 255, 0.23);

  background:
    rgba(8, 23, 37, 0.49);
}

.decision-info-icon {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size: 20px;

  font-weight: 950;
}

.decision-info h3 {
  margin:
    1px
    0
    7px;

  color: #edf3f8;

  font-size: 16px;
}

.decision-info p {
  margin: 0;

  color: #adb7c2;

  font-size: 13.5px;

  line-height: 1.65;
}


/* =========================================
   DECISION CARDS
========================================= */

.decision-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 19px;

  margin-top: 22px;
}

.decision-card {
  min-height: 285px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 27px;

  text-align: left;

  border-radius: 23px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.10);

  background:
    rgba(8, 12, 18, 0.68);

  color: inherit;

  font: inherit;

  cursor: pointer;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.decision-card:hover {
  transform: translateY(-4px);

  border-color:
    var(--accent-border);

  background:
    rgba(9, 22, 35, 0.72);
}

.decision-card.selected {
  border-color:
    var(--accent);

  background:
    linear-gradient(
      145deg,
      rgba(10, 32, 50, 0.87),
      rgba(6, 13, 21, 0.76)
    );
}

.decision-code,
.recommendation-code {
  color:
    var(--accent);

  font-size: 9px;

  font-weight: 950;

  letter-spacing: 0.14em;
}

.decision-status {
  margin-top: 26px;

  color: #74808c;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.10em;
}

.decision-card h3 {
  margin:
    10px
    0
    10px;

  color: #ffffff;

  font-size: 29px;

  letter-spacing: -0.025em;
}

.decision-card p {
  margin: 0;

  color: #afb8c2;

  font-size: 14px;

  line-height: 1.65;
}

.decision-card > span:last-child {
  margin-top: auto;

  padding-top: 25px;

  color: #dce7ef;

  font-size: 10px;

  font-weight: 950;

  letter-spacing: 0.08em;
}


/* =========================================
   PLAN PATHS
========================================= */

.plan-path {
  display: none;
}

.plan-path.active-plan {
  display: block;
}


/* =========================================
   RECOMMENDATION CARDS
========================================= */

.recommendation-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 17px;

  margin-top: 33px;
}

.recommendation-card {
  min-height: 250px;

  padding: 27px;

  border-radius: 22px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(7, 12, 18, 0.70);
}

.recommendation-card h3 {
  margin:
    19px
    0
    11px;

  color: #f4f7fa;

  font-size: 26px;

  letter-spacing: -0.025em;
}

.recommendation-card p {
  margin: 0;

  color: #aeb8c3;

  font-size: 14px;

  line-height: 1.72;
}

.recommendation-card strong {
  display: block;

  margin-top: 19px;

  padding-top: 15px;

  border-top:
    1px
    solid
    rgba(255, 255, 255, 0.07);

  color: #9fcdf0;

  font-size: 12.5px;

  line-height: 1.55;
}


/* =========================================
   SUBSYSTEM
========================================= */

.subsystem-heading {
  margin-top: 55px;
}

.subsystem-heading > span {
  color:
    var(--accent);

  font-size: 9px;

  font-weight: 950;

  letter-spacing: 0.16em;
}

.subsystem-heading h3 {
  margin:
    9px
    0
    0;

  color: #ffffff;

  font-size:
    clamp(
      27px,
      4vw,
      40px
    );

  letter-spacing: -0.03em;
}

.subsystem-heading p {
  max-width: 800px;

  margin:
    14px
    0
    0;

  color: #aeb7c0;

  font-size: 14px;

  line-height: 1.7;
}


/* =========================================
   SUPPORT CARDS
========================================= */

.support-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 17px;

  margin-top: 24px;
}

.support-card {
  min-height: 245px;

  padding: 26px;

  border-radius: 21px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(217, 227, 236, 0.94);
}

.support-card h4 {
  margin: 0;

  color: #10151b;

  font-size: 22px;

  letter-spacing: -0.02em;
}

.support-card p {
  margin:
    16px
    0
    0;

  color: #4f5964;

  font-size: 13.5px;

  line-height: 1.68;
}

.support-card strong {
  display: block;

  margin-top: 18px;

  color: #145d91;

  font-size: 12px;

  line-height: 1.55;
}


/* =========================================
   HEIGHT VARIATION
========================================= */

.height-variation-card {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  gap: 30px;

  margin-top: 32px;

  padding: 29px;

  border-radius: 23px;

  background:
    rgba(217, 227, 236, 0.94);

  border:
    1px
    solid
    rgba(255, 255, 255, 0.20);
}

.height-variation-card h3 {
  margin:
    14px
    0
    8px;

  color: #11161c;

  font-size: 28px;

  letter-spacing: -0.025em;
}

.height-variation-card p {
  max-width: 760px;

  margin: 0;

  color: #505a64;

  font-size: 13.5px;

  line-height: 1.67;
}

.height-variation-number {
  color: #145d91;

  font-size:
    clamp(
      42px,
      6vw,
      72px
    );

  font-weight: 950;

  white-space: nowrap;

  letter-spacing: -0.04em;
}


/* =========================================
   EXERCISES
========================================= */

.exercise-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;

  margin-top: 25px;
}

.exercise-grid-three {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.exercise-card {
  overflow: hidden;

  border-radius: 23px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.10);

  background:
    rgba(7, 11, 17, 0.75);
}

.exercise-card-wide {
  grid-column:
    1 / -1;
}


/* IMPORTANT:
   PNG IS NEVER CROPPED.
*/

.exercise-image {
  width: 100%;

  min-height: 280px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 18, 27, 0.92),
      rgba(5, 9, 14, 0.95)
    );
}

.exercise-image img {
  width: 100%;
  height: auto;

  max-height: 430px;

  display: block;

  object-fit: contain;

  object-position: center;

  border-radius: 12px;
}

.exercise-copy {
  padding: 25px;
}

.exercise-copy h3 {
  margin:
    13px
    0
    7px;

  color: #ffffff;

  font-size: 24px;

  letter-spacing: -0.025em;
}

.exercise-copy > strong {
  display: block;

  color: #84909d;

  font-size: 12.5px;
}

.exercise-copy p {
  margin:
    16px
    0
    0;

  color: #aeb7c1;

  font-size: 13.5px;

  line-height: 1.7;
}


/* =========================================
   REALITY
========================================= */

.reality-final {
  text-align: left;
}

.reality-symbol {
  width: 70px;
  height: 70px;

  display: grid;

  place-items: center;

  margin-top: 40px;

  border-radius: 18px;

  border:
    1px
    solid
    var(--accent-border);

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size: 31px;

  font-weight: 950;
}

.reality-final p {
  max-width: 880px;

  margin:
    22px
    0
    0;

  color: #c3ccd4;

  font-size: 15px;

  line-height: 1.78;
}

.reality-statement {
  margin-top: 30px;

  padding:
    23px
    25px;

  border-left:
    3px
    solid
    var(--accent);

  border-radius:
    0
    15px
    15px
    0;

  background:
    rgba(69, 167, 255, 0.07);

  color: #eef4f8;

  font-size:
    clamp(
      17px,
      2vw,
      21px
    );

  font-weight: 800;

  line-height: 1.6;
}


/* =========================================
   DISCLAIMER
========================================= */

.guide-disclaimer {
  margin-top: 40px;

  padding:
    20px
    23px;

  border-radius: 17px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.07);

  background:
    rgba(4, 8, 12, 0.49);

  color: #7d8792;

  text-align: center;

  font-size: 11.5px;

  line-height: 1.65;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .exercise-grid-three {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .recommendations-topbar {
    align-items: flex-start;
  }

  .recommendations-back {
    font-size: 8px;

    padding:
      9px
      10px;
  }

  .recommendations-hero {
    padding:
      56px
      8px
      42px;
  }

  .recommendations-hero h1 {
    font-size:
      clamp(
        42px,
        13vw,
        66px
      );
  }

  .guide-selection {
    grid-template-columns: 1fr;
  }

  .guide-choice {
    min-height: 385px;

    padding: 26px;
  }

  .guide-app-top {
    align-items: flex-start;

    flex-direction: column;
  }

  .progress-shell {
    padding:
      19px
      14px;
  }

  .progress-step {
    min-width: 52px;
  }

  .progress-line {
    margin:
      0
      7px;
  }

  .progress-name {
    font-size: 9px;
  }

  .blueprint-card {
    padding:
      28px
      22px;

    border-radius: 23px;
  }

  .blueprint-top {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }

  .decision-info {
    grid-template-columns: 1fr;
  }

  .decision-grid,
  .recommendation-grid,
  .support-grid,
  .exercise-grid,
  .exercise-grid-three {
    grid-template-columns: 1fr;
  }

  .exercise-card-wide {
    grid-column: auto;
  }

  .height-variation-card {
    grid-template-columns: 1fr;
  }

  .exercise-image {
    min-height: 220px;
  }

  .exercise-image img {
    max-height: 360px;
  }

  .dual-actions {
    flex-direction: column-reverse;
  }

  .dual-actions button {
    width: 100%;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 470px) {

  .recommendations-kicker {
    font-size: 8px;
  }

  .recommendations-hero p {
    font-size: 14px;
  }

  .guide-choice {
    min-height: 360px;
  }

  .progress-shell {
    overflow-x: auto;
  }

  .progress-track {
    min-width: 430px;
  }

  .blueprint-card h2,
  .stage-main-title,
  .plan-main-title {
    font-size: 33px;
  }

  .exercise-image {
    min-height: 190px;
  }

}