/* SOURCE STYLE BLOCK 1 */
/* =========================================================
   STAGE 1 HEADER — V0.1
========================================================= */

#ss-stage1-head-v01 {

  --ss-gold: #B7874C;
  --ss-dark: #4E4B4A;
  --ss-text: #746E69;
  --ss-muted: #938C86;
  --ss-line: #E8DFD5;
  --ss-soft: #FCFAF7;

  width: 100%;
  max-width: 1120px;

  margin: 0 auto 20px;

  color: var(--ss-dark);

  background: #FFFFFF;

  border: 1px solid var(--ss-line);
  border-radius: 16px;

  overflow: hidden;

  font-family: inherit;

  animation:
    ssS1HeaderEnter
    380ms
    cubic-bezier(.22,.8,.3,1)
    both;
}


#ss-stage1-head-v01 *,
#ss-stage1-head-v01 *::before,
#ss-stage1-head-v01 *::after {
  box-sizing: border-box;
}


/* =========================================================
   INTRO
========================================================= */

#ss-stage1-head-v01 .ss-s1-intro {

  padding: 20px 26px 18px;
}


#ss-stage1-head-v01 .ss-s1-copy {

  max-width: 760px;
}


#ss-stage1-head-v01 .ss-s1-stage-label {

  display: block;

  margin-bottom: 5px;

  color: var(--ss-gold);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
}


/* =========================================================
   TITLE + PNG
========================================================= */

#ss-stage1-head-v01 .ss-s1-title-row {

  display: flex;
  align-items: center;

  gap: 12px;
}


#ss-stage1-head-v01 .ss-s1-icon {

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  object-fit: contain;

  opacity: 0;

  animation:
    ssS1IconEnter
    420ms
    cubic-bezier(.22,.8,.3,1)
    120ms
    forwards;
}


#ss-stage1-head-v01 h2 {

  margin: 0;

  color: var(--ss-dark);

  font-size: clamp(23px, 2.5vw, 29px);
  font-weight: 800;
  line-height: 1.55;
}


#ss-stage1-head-v01 .ss-s1-copy p {

  max-width: 710px;

  margin: 8px 64px 0 0;

  color: var(--ss-text);

  font-size: 13px;
  font-weight: 450;
  line-height: 2;
}


/* =========================================================
   NAVIGATION
========================================================= */

#ss-stage1-head-v01 .ss-s1-nav {

  border-top: 1px solid var(--ss-line);

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


#ss-stage1-head-v01 .ss-s1-steps {

  display: grid;

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

  margin: 0;
  padding: 0;

  list-style: none;
}


/* =========================================================
   STEP
========================================================= */

#ss-stage1-head-v01 .ss-s1-step {

  min-height: 84px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 14px 20px;

  border-left: 1px solid var(--ss-line);

  transition:
    background-color 160ms ease;
}


#ss-stage1-head-v01 .ss-s1-step:last-child {
  border-left: 0;
}


#ss-stage1-head-v01 .ss-s1-step.is-active {

  background:
    rgba(183,135,76,.045);
}


/* =========================================================
   NUMBER
========================================================= */

#ss-stage1-head-v01 .ss-s1-number {

  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  display: flex;

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

  border-radius: 50%;

  background: #EEEAE5;

  color: var(--ss-gold);

  font-size: 16px;
  font-weight: 800;

  line-height: 1;
}


#ss-stage1-head-v01
.ss-s1-step.is-active
.ss-s1-number {

  background: #D4A65D;

  color: #FFFFFF;

  animation:
    ssS1ActiveStep
    360ms
    cubic-bezier(.22,.8,.3,1)
    180ms
    both;
}


/* =========================================================
   STEP TEXT
========================================================= */

#ss-stage1-head-v01 .ss-s1-step-copy {

  min-width: 0;
}


#ss-stage1-head-v01 .ss-s1-step-copy strong {

  display: block;

  margin-bottom: 3px;

  color: #373330;

  font-size: 15px;
  font-weight: 750;

  line-height: 1.65;
}


#ss-stage1-head-v01 .ss-s1-step-copy span {

  display: block;

  color: var(--ss-muted);

  font-size: 11.5px;
  font-weight: 450;

  line-height: 1.7;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (hover:hover) {

  #ss-stage1-head-v01
  .ss-s1-step:hover {

    background:
      rgba(183,135,76,.035);
  }

}


/* =========================================================
   MOTION
========================================================= */

@keyframes ssS1HeaderEnter {

  from {

    opacity: 0;

    transform:
      translateY(6px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssS1IconEnter {

  from {

    opacity: 0;

    transform:
      translateY(-5px)
      scale(.97);
  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes ssS1ActiveStep {

  from {

    transform:
      scale(.96);
  }

  to {

    transform:
      scale(1);
  }

}


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

@media (max-width: 850px) {

  #ss-stage1-head-v01 .ss-s1-intro {

    padding:
      18px 20px 17px;
  }


  #ss-stage1-head-v01 .ss-s1-step {

    padding:
      13px 14px;
  }


  #ss-stage1-head-v01 .ss-s1-step-copy strong {

    font-size: 14px;
  }

}


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

@media (max-width: 650px) {

  #ss-stage1-head-v01 {

    margin-bottom: 16px;

    border-radius: 14px;
  }


  /* INTRO */

  #ss-stage1-head-v01 .ss-s1-intro {

    padding:
      16px 15px 15px;
  }


  #ss-stage1-head-v01 .ss-s1-stage-label {

    font-size: 10px;
  }


  #ss-stage1-head-v01 .ss-s1-title-row {

    gap: 9px;
  }


  #ss-stage1-head-v01 .ss-s1-icon {

    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  #ss-stage1-head-v01 h2 {

    font-size: 21px;
  }


  #ss-stage1-head-v01 .ss-s1-copy p {

    margin:
      7px 0 0;

    font-size: 12px;

    line-height: 1.95;
  }


  /* STEPS — VERTICAL */

  #ss-stage1-head-v01 .ss-s1-steps {

    grid-template-columns: 1fr;
  }


  #ss-stage1-head-v01 .ss-s1-step {

    min-height: 68px;

    padding:
      11px 15px;

    border-left: 0;

    border-bottom:
      1px solid var(--ss-line);
  }


  #ss-stage1-head-v01 .ss-s1-step:last-child {

    border-bottom: 0;
  }


  #ss-stage1-head-v01 .ss-s1-number {

    width: 37px;
    height: 37px;

    flex-basis: 37px;

    font-size: 14px;
  }


  #ss-stage1-head-v01 .ss-s1-step-copy strong {

    font-size: 13.5px;
  }


  #ss-stage1-head-v01 .ss-s1-step-copy span {

    font-size: 11px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #ss-stage1-head-v01,
  #ss-stage1-head-v01 *,
  #ss-stage1-head-v01 *::before,
  #ss-stage1-head-v01 *::after {

    animation: none !important;
    transition: none !important;
  }


  #ss-stage1-head-v01 .ss-s1-icon {

    opacity: 1;
  }

}

/* SOURCE STYLE BLOCK 2 */
/* =========================================================
   SS-01B — STAGE 1 CORE INPUTS
========================================================= */

#ss-free-core-inputs {

  --ss-gold: #B7874C;
  --ss-gold-dark: #976A38;

  --ss-dark: #4E4B4A;
  --ss-text: #706A66;
  --ss-muted: #918984;

  --ss-line: #E6DDD4;
  --ss-line-gold: rgba(183,135,76,.42);

  --ss-soft: #FBF8F4;
  --ss-white: #FFFFFF;

  --ss-danger: #A4574F;

  width: 100%;

  margin:
    14px auto 0;

  font-family: inherit;
}


#ss-free-core-inputs *,
#ss-free-core-inputs *::before,
#ss-free-core-inputs *::after {

  box-sizing: border-box;
}



/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

#ss-free-core-inputs
.ss-free-input-grid {

  display: grid;

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

  gap:
    14px;

  align-items:
    stretch;
}



/* =========================================================
   PANEL
========================================================= */

#ss-free-core-inputs
.ss-free-input-panel {

  position: relative;

  min-width: 0;

  padding:
    20px;

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

  border-radius:
    15px;

  background:
    var(--ss-white);

  opacity: 0;

  transform:
    translateY(5px);

  animation:
    ssStage1PanelEnter
    340ms
    cubic-bezier(.22,.8,.3,1)
    forwards;
}


#ss-free-core-inputs
.ss-free-input-panel:nth-child(2) {

  animation-delay:
    70ms;
}



/* SMALL ARCHITECTURAL ACCENT */

#ss-free-core-inputs
.ss-free-input-panel::before {

  content: "";

  position: absolute;

  top: -1px;
  right: 20px;

  width:
    42px;

  height:
    2px;

  border-radius:
    0 0 2px 2px;

  background:
    var(--ss-gold);
}



/* =========================================================
   PANEL HEADER
========================================================= */

#ss-free-core-inputs
.ss-free-panel-head {

  margin-bottom:
    17px;
}


#ss-free-core-inputs
.ss-free-panel-head h3 {

  margin:
    0 0 4px;

  color:
    var(--ss-dark);

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.7;
}


#ss-free-core-inputs
.ss-free-panel-head p {

  margin: 0;

  color:
    var(--ss-muted);

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.8;
}



/* =========================================================
   FIELD STACK
========================================================= */

#ss-free-core-inputs
.ss-free-fields {

  display: grid;

  grid-template-columns:
    1fr;

  gap:
    14px;
}


#ss-free-core-inputs
.ss-field {

  min-width: 0;
}



/* =========================================================
   LABEL
========================================================= */

#ss-free-core-inputs
.ss-field-label {

  display: block;

  margin-bottom:
    6px;

  color:
    var(--ss-dark);

  font-size:
    13.5px;

  font-weight:
    700;

  line-height:
    1.7;
}



/* =========================================================
   INPUT WRAP
========================================================= */

#ss-free-core-inputs
.ss-input-wrap {

  position: relative;

  min-height:
    52px;

  display: flex;

  align-items:
    stretch;

  overflow:
    hidden;

  border:
    1px solid var(--ss-line-gold);

  border-radius:
    12px;

  background:
    var(--ss-white);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}



/* =========================================================
   INPUT
========================================================= */

#ss-free-core-inputs
.ss-input {

  min-width: 0;

  width: 100%;

  height:
    50px;

  flex:
    1 1 auto;

  padding:
    0 14px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ss-dark);

  font-family:
    inherit;

  font-size:
    16px;

  font-weight:
    650;

  line-height:
    1.5;

  direction:
    ltr;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;
}


#ss-free-core-inputs
.ss-input::placeholder {

  color:
    #B5ADA7;

  font-size:
    12px;

  font-weight:
    400;
}



/* =========================================================
   UNIT
========================================================= */

#ss-free-core-inputs
.ss-input-unit {

  min-width:
    74px;

  flex:
    0 0 auto;

  display: flex;

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

  padding:
    0 12px;

  border-right:
    1px solid var(--ss-line);

  background:
    var(--ss-soft);

  color:
    var(--ss-muted);

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.5;

  white-space:
    nowrap;
}



/* =========================================================
   INPUT INTERACTION
========================================================= */

@media (hover:hover) {

  #ss-free-core-inputs
  .ss-input-wrap:hover {

    border-color:
      rgba(183,135,76,.7);
  }

}


#ss-free-core-inputs
.ss-input-wrap:focus-within {

  border-color:
    var(--ss-gold);

  box-shadow:
    0 0 0 3px
    rgba(183,135,76,.11);
}



/* =========================================================
   ERROR
========================================================= */

#ss-free-core-inputs
.ss-field-error {

  display: none;

  margin-top:
    5px;

  color:
    var(--ss-danger);

  font-size:
    10.5px;

  font-weight:
    500;

  line-height:
    1.7;
}


/*
  Existing validation scripts may use one of these states.
*/

#ss-free-core-inputs
.ss-field.is-error
.ss-field-error,

#ss-free-core-inputs
.ss-field.has-error
.ss-field-error,

#ss-free-core-inputs
.ss-field.is-invalid
.ss-field-error {

  display: block;
}


#ss-free-core-inputs
.ss-field.is-error
.ss-input-wrap,

#ss-free-core-inputs
.ss-field.has-error
.ss-input-wrap,

#ss-free-core-inputs
.ss-field.is-invalid
.ss-input-wrap {

  border-color:
    rgba(164,87,79,.65);

  box-shadow:
    0 0 0 3px
    rgba(164,87,79,.07);
}



/* =========================================================
   MOTION
========================================================= */

@keyframes ssStage1PanelEnter {

  from {

    opacity: 0;

    transform:
      translateY(5px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}



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

@media (max-width: 650px) {

  #ss-free-core-inputs {

    margin-top:
      10px;
  }


  #ss-free-core-inputs
  .ss-free-input-grid {

    grid-template-columns:
      1fr;

    gap:
      11px;
  }


  #ss-free-core-inputs
  .ss-free-input-panel {

    padding:
      16px 14px;

    border-radius:
      14px;
  }


  #ss-free-core-inputs
  .ss-free-panel-head {

    margin-bottom:
      14px;
  }


  #ss-free-core-inputs
  .ss-free-panel-head h3 {

    font-size:
      15px;
  }


  #ss-free-core-inputs
  .ss-free-panel-head p {

    font-size:
      11px;
  }


  #ss-free-core-inputs
  .ss-field-label {

    font-size:
      13px;
  }


  #ss-free-core-inputs
  .ss-input-wrap {

    min-height:
      54px;
  }


  #ss-free-core-inputs
  .ss-input {

    height:
      52px;

    padding:
      0 12px;

    font-size:
      16px;
  }


  #ss-free-core-inputs
  .ss-input-unit {

    min-width:
      72px;

    padding:
      0 9px;

    font-size:
      10px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #ss-free-core-inputs
  .ss-free-input-panel {

    opacity:
      1;

    transform:
      none;

    animation:
      none !important;
  }


  #ss-free-core-inputs
  .ss-input-wrap {

    transition:
      none !important;
  }

}

/* SOURCE STYLE BLOCK 3 */
/* =========================================================
   SS-01C — STAGE 1 ACTION
========================================================= */

#ss-free-action-v01 {

  --ss-gold: #B7874C;
  --ss-gold-dark: #986B38;

  --ss-dark: #4E4B4A;
  --ss-text: #716B67;

  --ss-line: #E6DDD4;
  --ss-soft: #FBF8F4;

  --ss-danger: #A4574F;
  --ss-danger-soft: #FCF6F5;

  width: 100%;

  margin:
    14px auto 0;

  font-family: inherit;
}


#ss-free-action-v01 *,
#ss-free-action-v01 *::before,
#ss-free-action-v01 *::after {

  box-sizing: border-box;
}



/* =========================================================
   ERROR SUMMARY
========================================================= */

#ss-free-action-v01
#ss-free-error-summary {

  display: none;

  align-items: center;

  gap: 10px;

  margin-bottom:
    10px;

  padding:
    11px 14px;

  border:
    1px solid rgba(164,87,79,.28);

  border-radius:
    11px;

  background:
    var(--ss-danger-soft);

  color:
    var(--ss-danger);
}


/*
  Compatibility with possible existing validation states
*/

#ss-free-action-v01
#ss-free-error-summary.is-visible,

#ss-free-action-v01
#ss-free-error-summary.is-active,

#ss-free-action-v01
#ss-free-error-summary.has-error {

  display: flex;

  animation:
    ssActionErrorEnter
    200ms
    ease
    both;
}



#ss-free-action-v01
.ss-action-error-mark {

  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  display: flex;

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

  border-radius:
    50%;

  background:
    rgba(164,87,79,.10);

  font-size:
    13px;

  font-weight:
    800;
}



#ss-free-action-v01
.ss-action-error-text {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}



#ss-free-action-v01
.ss-action-error-text strong {

  font-size:
    11.5px;

  font-weight:
    700;

  line-height:
    1.8;
}



#ss-free-action-v01
#ss-free-error-count {

  font-size:
    10.5px;

  font-weight:
    600;

  opacity:
    .75;
}



/* =========================================================
   ACTION PANEL
========================================================= */

#ss-free-action-v01
.ss-action-panel {

  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(250px,330px);

  gap:
    18px;

  align-items: center;

  padding:
    17px 18px;

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

  border-radius:
    14px;

  background:
    var(--ss-soft);

  opacity: 0;

  transform:
    translateY(5px);

  animation:
    ssActionEnter
    340ms
    cubic-bezier(.22,.8,.3,1)
    forwards;
}



/* architectural accent */

#ss-free-action-v01
.ss-action-panel::before {

  content: "";

  position: absolute;

  top: -1px;
  right: 18px;

  width:
    42px;

  height:
    2px;

  background:
    var(--ss-gold);
}



/* =========================================================
   COPY
========================================================= */

#ss-free-action-v01
.ss-action-copy {

  min-width: 0;
}


#ss-free-action-v01
.ss-action-copy strong {

  display: block;

  margin-bottom:
    3px;

  color:
    var(--ss-dark);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.7;
}


#ss-free-action-v01
.ss-action-copy p {

  margin: 0;

  color:
    var(--ss-text);

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.8;
}



/* =========================================================
   BUTTON
========================================================= */

#ss-free-action-v01
.ss-action-button {

  width: 100%;

  min-height:
    56px;

  display: flex;

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

  gap:
    9px;

  padding:
    12px 18px;

  border:
    1px solid var(--ss-gold-dark);

  border-radius:
    12px;

  background:
    var(--ss-gold);

  color:
    #FFFFFF;

  font-family:
    inherit;

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.5;

  cursor:
    pointer;

  box-shadow:
    none;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}



#ss-free-action-v01
.ss-action-button svg {

  width:
    20px;

  height:
    20px;

  flex:
    0 0 20px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}



@media (hover:hover) {

  #ss-free-action-v01
  .ss-action-button:hover {

    background:
      #AA7B44;

    border-color:
      #916638;

    transform:
      translateY(-1px);
  }

}



#ss-free-action-v01
.ss-action-button:active {

  transform:
    translateY(0);
}



#ss-free-action-v01
.ss-action-button:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 4px
    rgba(183,135,76,.15);
}



/* =========================================================
   MOTION
========================================================= */

@keyframes ssActionEnter {

  from {

    opacity: 0;

    transform:
      translateY(5px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}



@keyframes ssActionErrorEnter {

  from {

    opacity: 0;

    transform:
      translateY(-3px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}



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

@media (max-width: 650px) {

  #ss-free-action-v01 {

    margin-top:
      11px;
  }


  #ss-free-action-v01
  .ss-action-panel {

    grid-template-columns:
      1fr;

    gap:
      12px;

    padding:
      15px 14px;

    border-radius:
      14px;
  }


  #ss-free-action-v01
  .ss-action-copy strong {

    font-size:
      13.5px;
  }


  #ss-free-action-v01
  .ss-action-copy p {

    font-size:
      11px;
  }


  #ss-free-action-v01
  .ss-action-button {

    min-height:
      58px;

    font-size:
      14px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #ss-free-action-v01
  .ss-action-panel {

    opacity:
      1;

    transform:
      none;

    animation:
      none !important;
  }


  #ss-free-action-v01
  #ss-free-error-summary {

    animation:
      none !important;
  }


  #ss-free-action-v01
  .ss-action-button {

    transition:
      none !important;
  }

}

/* SOURCE STYLE BLOCK 4 */
/* =========================================================
   SS-02 — STAGE 1 RESULT
========================================================= */

#ss-stage1-result-v01 {

  --ss-gold: #B7874C;
  --ss-gold-dark: #956A3A;

  --ss-dark: #4E4B4A;
  --ss-text: #706A66;
  --ss-muted: #918984;

  --ss-line: #E6DDD4;
  --ss-soft: #FBF8F4;
  --ss-white: #FFFFFF;

  --ss-danger: #A4574F;
  --ss-danger-soft: #FCF6F5;

  width: 100%;

  margin:
    16px auto 0;

  font-family: inherit;
}


#ss-stage1-result-v01[hidden] {

  display:
    none !important;
}


#ss-stage1-result-v01 *,
#ss-stage1-result-v01 *::before,
#ss-stage1-result-v01 *::after {

  box-sizing:
    border-box;
}



/* =========================================================
   SHELL
========================================================= */

#ss-stage1-result-v01
.ss-result-shell {

  overflow: hidden;

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

  border-radius:
    16px;

  background:
    var(--ss-white);

  animation:
    ssResultShellEnter
    420ms
    cubic-bezier(.22,.8,.3,1)
    both;
}



/* =========================================================
   INTRO
========================================================= */

#ss-stage1-result-v01
.ss-result-intro {

  position: relative;

  display: flex;

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

  gap:
    24px;

  padding:
    21px 23px 19px;

  border-bottom:
    1px solid var(--ss-line);

  background:
    #FFFFFF;
}



/* GOLD ACCENT */

#ss-stage1-result-v01
.ss-result-intro::after {

  content: "";

  position: absolute;

  right: 23px;
  bottom: -1px;

  width:
    72px;

  height:
    2px;

  background:
    var(--ss-gold);

  transform-origin:
    right center;

  animation:
    ssResultLineEnter
    500ms
    ease
    150ms
    both;
}



/* =========================================================
   INTRO MAIN
========================================================= */

#ss-stage1-result-v01
.ss-result-intro-main {

  min-width: 0;

  display: flex;

  align-items: center;

  gap:
    13px;
}



/* ICON */

#ss-stage1-result-v01
.ss-result-icon {

  width:
    58px;

  height:
    58px;

  flex:
    0 0 58px;

  display: flex;

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


#ss-stage1-result-v01
.ss-result-icon img {

  display: block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}



/* COPY */

#ss-stage1-result-v01
.ss-result-intro-copy {

  min-width: 0;
}


#ss-stage1-result-v01
.ss-result-intro-copy h3 {

  margin:
    0 0 4px;

  color:
    var(--ss-dark);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.7;
}


#ss-stage1-result-v01
.ss-result-intro-copy p {

  max-width:
    720px;

  margin: 0;

  color:
    var(--ss-text);

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.9;
}



/* =========================================================
   BRAND
========================================================= */

#ss-stage1-result-v01
.ss-result-brand {

  flex:
    0 0 auto;

  display: flex;

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

  opacity:
    .88;
}


#ss-stage1-result-v01
.ss-result-brand img {

  display: block;

  width: auto;

  max-width:
    118px;

  max-height:
    38px;

  object-fit:
    contain;
}



/* =========================================================
   MAIN GRID
========================================================= */

#ss-stage1-result-v01
.ss-result-main-grid {

  display: grid;

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

  gap:
    11px;

  padding:
    20px 23px 17px;
}



/* =========================================================
   MAIN CARD
========================================================= */

#ss-stage1-result-v01
.ss-result-main-card {

  position: relative;

  min-width: 0;

  min-height:
    122px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap:
    18px;

  padding:
    14px;

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

  border-radius:
    13px;

  background:
    var(--ss-soft);

  opacity: 0;

  transform:
    translateY(5px);

  animation:
    ssResultCardEnter
    330ms
    cubic-bezier(.22,.8,.3,1)
    forwards;
}


#ss-stage1-result-v01
.ss-result-main-card:nth-child(1) {

  animation-delay:
    100ms;
}


#ss-stage1-result-v01
.ss-result-main-card:nth-child(2) {

  animation-delay:
    145ms;
}


#ss-stage1-result-v01
.ss-result-main-card:nth-child(3) {

  animation-delay:
    190ms;
}


#ss-stage1-result-v01
.ss-result-main-card:nth-child(4) {

  animation-delay:
    235ms;
}



/* =========================================================
   PROFIT EMPHASIS
========================================================= */

#ss-stage1-result-v01
.ss-result-profit-card {

  border-color:
    rgba(183,135,76,.48);

  background:
    #FCF8F1;
}


#ss-stage1-result-v01
.ss-result-profit-card::before {

  content: "";

  position: absolute;

  top: -1px;
  right: 14px;

  width:
    34px;

  height:
    2px;

  background:
    var(--ss-gold);
}



/* NEGATIVE PROFIT */

#ss-stage1-result-v01
.ss-result-profit-card.is-negative {

  border-color:
    rgba(164,87,79,.36);

  background:
    var(--ss-danger-soft);
}


#ss-stage1-result-v01
.ss-result-profit-card.is-negative
.ss-result-value strong {

  color:
    var(--ss-danger);
}



/* =========================================================
   LABEL
========================================================= */

#ss-stage1-result-v01
.ss-result-label {

  display: block;

  color:
    var(--ss-text);

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.8;
}



/* =========================================================
   MAIN VALUE
========================================================= */

#ss-stage1-result-v01
.ss-result-value {

  min-width: 0;
}


#ss-stage1-result-v01
.ss-result-value strong {

  display: block;

  color:
    var(--ss-dark);

  font-size:
    clamp(17px,1.5vw,22px);

  font-weight:
    850;

  line-height:
    1.45;

  direction:
    ltr;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


#ss-stage1-result-v01
.ss-result-profit-card
.ss-result-value strong {

  color:
    var(--ss-gold-dark);
}


#ss-stage1-result-v01
.ss-result-value span {

  display: block;

  margin-top:
    3px;

  color:
    var(--ss-muted);

  font-size:
    9.5px;

  font-weight:
    500;

  line-height:
    1.7;
}



/* =========================================================
   COMPLEMENTARY SECTION
========================================================= */

#ss-stage1-result-v01
.ss-result-more {

  padding:
    0 23px 23px;
}


#ss-stage1-result-v01
.ss-result-more > h4 {

  margin:
    0;

  padding:
    7px 1px 11px;

  color:
    var(--ss-dark);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.7;
}



/* =========================================================
   COMPLEMENTARY GRID
========================================================= */

#ss-stage1-result-v01
.ss-result-more-grid {

  display: grid;

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

  gap:
    10px;
}



/* =========================================================
   COMPLEMENTARY CARD
========================================================= */

#ss-stage1-result-v01
.ss-result-more-card {

  min-width: 0;

  min-height:
    101px;

  display: flex;

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

  gap:
    14px;

  padding:
    14px;

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

  border-radius:
    12px;

  background:
    #FFFFFF;

  opacity: 0;

  transform:
    translateY(5px);

  animation:
    ssResultCardEnter
    320ms
    cubic-bezier(.22,.8,.3,1)
    forwards;
}


#ss-stage1-result-v01
.ss-result-more-card:nth-child(1) {

  animation-delay:
    290ms;
}


#ss-stage1-result-v01
.ss-result-more-card:nth-child(2) {

  animation-delay:
    335ms;
}


#ss-stage1-result-v01
.ss-result-more-card:nth-child(3) {

  animation-delay:
    380ms;
}



/* COPY */

#ss-stage1-result-v01
.ss-result-more-copy {

  min-width: 0;
}


#ss-stage1-result-v01
.ss-result-more-copy strong {

  display: block;

  margin-bottom:
    4px;

  color:
    var(--ss-dark);

  font-size:
    12.5px;

  font-weight:
    750;

  line-height:
    1.7;
}


#ss-stage1-result-v01
.ss-result-more-copy p {

  margin: 0;

  color:
    var(--ss-muted);

  font-size:
    10.3px;

  font-weight:
    400;

  line-height:
    1.8;
}



/* =========================================================
   PERCENT
========================================================= */

#ss-stage1-result-v01
.ss-result-percent {

  flex:
    0 0 auto;

  display: flex;

  align-items: baseline;

  gap:
    2px;

  direction:
    ltr;

  color:
    var(--ss-gold-dark);

  white-space:
    nowrap;
}


#ss-stage1-result-v01
.ss-result-percent strong {

  font-size:
    22px;

  font-weight:
    850;

  line-height:
    1.3;

  font-variant-numeric:
    tabular-nums;
}


#ss-stage1-result-v01
.ss-result-percent span {

  font-size:
    11px;

  font-weight:
    700;
}



/* =========================================================
   MOTION
========================================================= */

@keyframes ssResultShellEnter {

  from {

    opacity: 0;

    transform:
      translateY(8px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssResultCardEnter {

  from {

    opacity: 0;

    transform:
      translateY(5px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssResultLineEnter {

  from {

    opacity: 0;

    transform:
      scaleX(.2);
  }

  to {

    opacity: 1;

    transform:
      scaleX(1);
  }

}



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

@media (max-width: 950px) {

  #ss-stage1-result-v01
  .ss-result-main-grid {

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


  #ss-stage1-result-v01
  .ss-result-more-grid {

    grid-template-columns:
      1fr;
  }

}



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

@media (max-width: 650px) {

  #ss-stage1-result-v01 {

    margin-top:
      12px;
  }


  #ss-stage1-result-v01
  .ss-result-shell {

    border-radius:
      14px;
  }


  #ss-stage1-result-v01
  .ss-result-intro {

    align-items:
      flex-start;

    gap:
      10px;

    padding:
      16px 14px;
  }


  #ss-stage1-result-v01
  .ss-result-intro-main {

    align-items:
      flex-start;

    gap:
      9px;
  }


  #ss-stage1-result-v01
  .ss-result-icon {

    width:
      45px;

    height:
      45px;

    flex-basis:
      45px;
  }


  #ss-stage1-result-v01
  .ss-result-intro-copy h3 {

    font-size:
      16.5px;
  }


  #ss-stage1-result-v01
  .ss-result-intro-copy p {

    font-size:
      10.5px;

    line-height:
      1.85;
  }


  #ss-stage1-result-v01
  .ss-result-brand img {

    max-width:
      72px;

    max-height:
      27px;
  }


  #ss-stage1-result-v01
  .ss-result-main-grid {

    grid-template-columns:
      1fr;

    gap:
      9px;

    padding:
      14px;
  }


  #ss-stage1-result-v01
  .ss-result-main-card {

    min-height:
      103px;
  }


  #ss-stage1-result-v01
  .ss-result-value strong {

    font-size:
      20px;
  }


  #ss-stage1-result-v01
  .ss-result-more {

    padding:
      0 14px 14px;
  }


  #ss-stage1-result-v01
  .ss-result-more-card {

    min-height:
      91px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #ss-stage1-result-v01
  .ss-result-shell,

  #ss-stage1-result-v01
  .ss-result-main-card,

  #ss-stage1-result-v01
  .ss-result-more-card,

  #ss-stage1-result-v01
  .ss-result-intro::after {

    animation:
      none !important;

    opacity:
      1;

    transform:
      none;
  }

}

/* SOURCE STYLE BLOCK 5 */
/* =========================================================
   SS-02A — STAGE 2 ENTRY
========================================================= */

#ss-stage2-entry-v01 {

  --ss-gold: #B7874C;
  --ss-gold-dark: #976A38;

  --ss-dark: #4E4B4A;
  --ss-text: #706A66;
  --ss-muted: #918984;

  --ss-line: #E6DDD4;
  --ss-soft: #FBF8F4;
  --ss-white: #FFFFFF;

  /*
     Badge family:
     same visual language as global header
  */
  --ss-badge-bg: #F0E7D7;
  --ss-badge-text: #9B713F;
  --ss-badge-line: rgba(183,135,76,.20);

  width: 100%;

  margin:
    13px auto 0;

  font-family: inherit;
}


#ss-stage2-entry-v01[hidden] {

  display:
    none !important;
}


#ss-stage2-entry-v01 *,
#ss-stage2-entry-v01 *::before,
#ss-stage2-entry-v01 *::after {

  box-sizing:
    border-box;
}



/* =========================================================
   SHELL
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-shell {

  position: relative;

  overflow: hidden;

  padding:
    22px;

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

  border-radius:
    16px;

  background:
    var(--ss-white);

  animation:
    ssS2EntryEnter
    400ms
    cubic-bezier(.22,.8,.3,1)
    both;
}



/* ARCHITECTURAL ACCENT */

#ss-stage2-entry-v01
.ss-s2-entry-shell::before {

  content: "";

  position: absolute;

  top: -1px;
  right: 22px;

  width:
    72px;

  height:
    2px;

  background:
    var(--ss-gold);

  transform-origin:
    right center;

  animation:
    ssS2EntryLine
    500ms
    ease
    140ms
    both;
}



/* =========================================================
   HEADING
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-head {

  max-width:
    840px;

  margin-bottom:
    18px;
}


#ss-stage2-entry-v01
.ss-s2-entry-title-row {

  display: flex;

  align-items: center;

  gap:
    9px;

  flex-wrap: wrap;

  margin-bottom:
    5px;
}


#ss-stage2-entry-v01
.ss-s2-entry-title-row h3 {

  margin: 0;

  color:
    var(--ss-dark);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.7;
}


#ss-stage2-entry-v01
.ss-s2-entry-head > p {

  margin: 0;

  color:
    var(--ss-text);

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.9;
}



/* =========================================================
   BADGE
   Same family as header badge
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-badge {

  display: inline-flex;

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

  min-height:
    24px;

  padding:
    3px 10px;

  border:
    1px solid var(--ss-badge-line);

  border-radius:
    999px;

  background:
    var(--ss-badge-bg);

  color:
    var(--ss-badge-text);

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.4;

  white-space:
    nowrap;
}



/* =========================================================
   VALUE GRID
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-values {

  display: grid;

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

  gap:
    10px;

  margin-bottom:
    18px;
}



/* =========================================================
   VALUE CARD
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-value {

  min-width: 0;

  min-height:
    104px;

  display: grid;

  grid-template-columns:
    34px minmax(0,1fr);

  gap:
    10px;

  align-items:
    flex-start;

  padding:
    14px;

  border:
    1px solid rgba(183,135,76,.18);

  border-radius:
    12px;

  background:
    var(--ss-soft);

  opacity: 0;

  transform:
    translateY(5px);

  animation:
    ssS2EntryValue
    320ms
    cubic-bezier(.22,.8,.3,1)
    forwards;
}


#ss-stage2-entry-v01
.ss-s2-entry-value:nth-child(1) {

  animation-delay:
    130ms;
}


#ss-stage2-entry-v01
.ss-s2-entry-value:nth-child(2) {

  animation-delay:
    180ms;
}


#ss-stage2-entry-v01
.ss-s2-entry-value:nth-child(3) {

  animation-delay:
    230ms;
}



/* =========================================================
   VALUE NUMBER
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-number {

  width:
    32px;

  height:
    32px;

  display: flex;

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

  border:
    1px solid rgba(183,135,76,.26);

  border-radius:
    9px;

  background:
    #FFFFFF;

  color:
    var(--ss-gold);

  font-size:
    9px;

  font-weight:
    800;

  direction:
    ltr;
}



/* =========================================================
   VALUE COPY
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-value-copy {

  min-width: 0;
}


#ss-stage2-entry-v01
.ss-s2-entry-value-copy strong {

  display: block;

  margin-bottom:
    4px;

  color:
    var(--ss-dark);

  font-size:
    12.5px;

  font-weight:
    750;

  line-height:
    1.7;
}


#ss-stage2-entry-v01
.ss-s2-entry-value-copy p {

  margin: 0;

  color:
    var(--ss-muted);

  font-size:
    10.5px;

  font-weight:
    400;

  line-height:
    1.8;
}



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

#ss-stage2-entry-v01
.ss-s2-entry-action {

  display: flex;

  justify-content:
    flex-start;

  opacity: 0;

  transform:
    translateY(4px);

  animation:
    ssS2EntryAction
    350ms
    cubic-bezier(.22,.8,.3,1)
    300ms
    forwards;
}



/* =========================================================
   CTA
========================================================= */

#ss-stage2-entry-v01
.ss-s2-entry-button {

  position: relative;

  min-width:
    285px;

  min-height:
    56px;

  display: inline-flex;

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

  gap:
    10px;

  padding:
    12px 22px;

  border:
    1px solid var(--ss-gold-dark);

  border-radius:
    12px;

  background:
    var(--ss-gold);

  color:
    #FFFFFF;

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.5;

  cursor:
    pointer;

  box-shadow:
    0 7px 20px
    rgba(183,135,76,.13);

  transition:
    transform 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}



/* ONE-TIME CTA EMPHASIS */

#ss-stage2-entry-v01
.ss-s2-entry-button::after {

  content: "";

  position: absolute;

  inset:
    -3px;

  border:
    1px solid rgba(183,135,76,.46);

  border-radius:
    14px;

  opacity: 0;

  pointer-events: none;

  animation:
    ssS2EntryCTA
    580ms
    ease
    700ms
    1;
}



/* ARROW */

#ss-stage2-entry-v01
.ss-s2-entry-arrow {

  font-size:
    17px;

  line-height:
    1;

  transition:
    transform 160ms ease;
}



/* =========================================================
   INTERACTION
========================================================= */

@media (hover:hover) {

  #ss-stage2-entry-v01
  .ss-s2-entry-button:hover {

    background:
      #AA7B44;

    transform:
      translateY(-1px);

    box-shadow:
      0 9px 24px
      rgba(183,135,76,.17);
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-button:hover
  .ss-s2-entry-arrow {

    transform:
      translateX(-2px);
  }

}


#ss-stage2-entry-v01
.ss-s2-entry-button:active {

  transform:
    translateY(0);
}


#ss-stage2-entry-v01
.ss-s2-entry-button:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 4px
    rgba(183,135,76,.15);
}



/* =========================================================
   MOTION
========================================================= */

@keyframes ssS2EntryEnter {

  from {

    opacity: 0;

    transform:
      translateY(8px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssS2EntryLine {

  from {

    opacity: 0;

    transform:
      scaleX(.2);
  }

  to {

    opacity: 1;

    transform:
      scaleX(1);
  }

}


@keyframes ssS2EntryValue {

  from {

    opacity: 0;

    transform:
      translateY(5px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssS2EntryAction {

  from {

    opacity: 0;

    transform:
      translateY(4px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ssS2EntryCTA {

  0% {

    opacity: 0;
  }

  35% {

    opacity: 1;
  }

  100% {

    opacity: 0;
  }

}



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

@media (max-width: 850px) {

  #ss-stage2-entry-v01
  .ss-s2-entry-values {

    grid-template-columns:
      1fr;
  }

}



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

@media (max-width: 650px) {

  #ss-stage2-entry-v01 {

    margin-top:
      10px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-shell {

    padding:
      17px 14px;

    border-radius:
      14px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-title-row h3 {

    font-size:
      17px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-head > p {

    font-size:
      10.8px;

    line-height:
      1.85;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-values {

    gap:
      8px;

    margin-bottom:
      14px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-value {

    min-height:
      92px;

    padding:
      12px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-value-copy strong {

    font-size:
      12px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-value-copy p {

    font-size:
      10.3px;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-action {

    display:
      block;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-button {

    width:
      100%;

    min-width:
      0;

    min-height:
      58px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #ss-stage2-entry-v01
  .ss-s2-entry-shell,

  #ss-stage2-entry-v01
  .ss-s2-entry-value,

  #ss-stage2-entry-v01
  .ss-s2-entry-action,

  #ss-stage2-entry-v01
  .ss-s2-entry-shell::before,

  #ss-stage2-entry-v01
  .ss-s2-entry-button::after {

    animation:
      none !important;

    opacity:
      1;

    transform:
      none;
  }


  #ss-stage2-entry-v01
  .ss-s2-entry-button,

  #ss-stage2-entry-v01
  .ss-s2-entry-arrow {

    transition:
      none !important;
  }

}