:root {

  --forest: #123f32;

  --forest-deep: #0b2d24;

  --orange: #f36b16;

  --orange-dark: #d9570b;

  --cream: #fffaf0;

  --cream-soft: #f7ead5;

  --white: #ffffff;

  --text: #20352e;

  --muted: #68766f;

  --border: rgba(18, 63, 50, 0.13);

  --shadow: 0 24px 60px rgba(30, 53, 45, 0.14);

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  min-height: 100vh;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text);

  background:

    radial-gradient(

      circle at top left,

      rgba(255, 255, 255, 0.98),

      transparent 36%

    ),

    linear-gradient(

      180deg,

      #fffdf7 0%,

      #f4ead7 100%

    );

}

button {

  font: inherit;

}

.host-onboarding-page {

  min-height: auto;

}

/* WELCOME HERO */

.onboarding-hero {

  position: relative;

  min-height: 650px;

  overflow: hidden;

  background:

    radial-gradient(

      circle at top left,

      rgba(255, 255, 255, 1),

      rgba(255, 250, 240, 0.96) 54%,

      rgba(244, 234, 215, 0.82) 100%

    );

}

.onboarding-copy {

  position: relative;

  z-index: 2;

  width: min(1120px, calc(100% - 48px));

  margin: 0 auto;

  padding: 52px 0 135px;

}

.onboarding-logo {

  display: block;

  width: min(310px, 72vw);

  height: auto;

  margin-bottom: 54px;

}

.onboarding-greeting {

  margin: 0 0 10px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(27px, 3vw, 39px);

  font-weight: 700;

  color: var(--forest);

}

.onboarding-copy h1 {

  max-width: 860px;

  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(56px, 7vw, 94px);

  line-height: 0.96;

  letter-spacing: -0.04em;

  color: var(--forest);

}

.onboarding-copy h1 span {

  display: block;

}

.orange-accent {

  width: 66px;

  height: 5px;

  margin: 30px 0;

  border-radius: 999px;

  background: var(--orange);

}

.onboarding-copy h2 {

  max-width: 650px;

  margin: 0 0 13px;

  font-size: clamp(23px, 2.5vw, 32px);

  line-height: 1.25;

  color: #17271f;

}

.onboarding-intro {

  max-width: 650px;

  margin: 0;

  font-size: clamp(18px, 1.8vw, 23px);

  line-height: 1.62;

}

.onboarding-intro strong {

  white-space: nowrap;

}

/* LIGHT BRAND WATERMARK */

.onboarding-photo {

  position: absolute;

  z-index: 1;

  top: 10px;

  right: -190px;

  bottom: 0;

  width: 118%;

  min-height: 0;

  background:

    url("image copy 4.png")

    center / contain

    no-repeat;

  opacity: 0.055;

  filter: grayscale(1);

  pointer-events: none;

}

/* JOURNEY PANEL */

.journey-panel {

  position: relative;

  z-index: 4;

  width: min(1120px, calc(100% - 32px));

  margin: -74px auto 48px;

  padding: 30px;

  border: 1px solid rgba(18, 63, 50, 0.09);

  border-radius: 34px;

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

  box-shadow: var(--shadow);

  backdrop-filter: blur(14px);

}

.journey-heading {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 28px;

}

.journey-heading span {

  flex: 1;

  height: 1px;

  background: rgba(18, 63, 50, 0.17);

}

.journey-heading h2 {

  margin: 0;

  white-space: nowrap;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(28px, 3vw, 39px);

  color: var(--forest);

}

/* JOURNEY STEPS */

.journey-steps {

  position: relative;

  display: grid;

  grid-template-columns: repeat(7, minmax(82px, 1fr));

  gap: 12px;

  margin-bottom: 32px;

}

.journey-steps::before {

  content: "";

  position: absolute;

  top: 28px;

  left: 7%;

  right: 7%;

  height: 3px;

  border-radius: 999px;

  background:

    repeating-linear-gradient(

      90deg,

      rgba(18, 63, 50, 0.18) 0 18px,

      transparent 18px 25px

    );

}

.journey-step {

  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 10px;

  text-align: center;

  color: #344941;

}

.journey-icon {

  width: 56px;

  height: 56px;

  display: grid;

  place-items: center;

  border: 2px solid rgba(18, 63, 50, 0.17);

  border-radius: 50%;

  background: #fffdf8;

  font-size: 24px;

  filter: grayscale(1);

  opacity: 0.62;

}

.journey-step strong {

  font-size: 14px;

}

.journey-step.active {

  color: var(--orange-dark);

}

.journey-step.active .journey-icon {

  border-color: var(--orange);

  background: #fff7ee;

  filter: none;

  opacity: 1;

  box-shadow: 0 10px 22px rgba(243, 107, 22, 0.16);

}

/* CURRENT STEP CARD */

.current-step-card {

  max-width: 860px;

  margin: 0 auto;

  padding: 38px 36px 30px;

  text-align: center;

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

  border-radius: 28px;

  background:

    radial-gradient(

      circle at top,

      rgba(255, 246, 231, 0.92),

      rgba(255, 255, 255, 0.98) 56%

    );

  box-shadow: 0 15px 38px rgba(31, 55, 46, 0.09);

}

.step-count {

  margin: 0;

  font-size: 18px;

  font-weight: 800;

  color: var(--forest);

}

.step-accent {

  width: 54px;

  height: 3px;

  margin: 12px auto 20px;

  border-radius: 999px;

  background: var(--orange);

}

.current-step-icon {

  width: 84px;

  height: 84px;

  display: grid;

  place-items: center;

  margin: 0 auto 16px;

  border-radius: 50%;

  background: linear-gradient(180deg, #fff9ef, #f7ead5);

  box-shadow: 0 13px 26px rgba(243, 107, 22, 0.12);

  font-size: 43px;

}

.current-step-card h2 {

  margin: 0 0 12px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(40px, 5vw, 60px);

  line-height: 1;

  color: var(--forest);

}

.step-lead {

  margin: 0;

  font-size: 20px;

  line-height: 1.5;

}

.step-divider {

  display: flex;

  align-items: center;

  gap: 14px;

  width: min(440px, 90%);

  margin: 22px auto;

  color: var(--forest);

}

.step-divider span:first-child,

.step-divider span:last-child {

  flex: 1;

  height: 1px;

  background: rgba(18, 63, 50, 0.18);

}

.step-description {

  max-width: 570px;

  margin: 0 auto 28px;

  font-size: 19px;

  line-height: 1.58;

}

.continue-button {

  width: min(520px, 100%);

  min-height: 66px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border: 0;

  border-radius: 15px;

  color: var(--white);

  background:

    linear-gradient(

      135deg,

      var(--orange),

      var(--orange-dark)

    );

  box-shadow: 0 15px 30px rgba(225, 86, 10, 0.26);

  font-size: 23px;

  font-weight: 800;

  cursor: pointer;

  transition:

    transform 180ms ease,

    box-shadow 180ms ease;

}

.continue-button:hover {

  transform: translateY(-2px);

  box-shadow: 0 19px 36px rgba(225, 86, 10, 0.31);

}

.continue-button:active {

  transform: translateY(0);

}

.save-message {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

  margin: 22px 0 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.45;

}

.save-message strong {

  color: var(--forest);

}

/* MOBILE */

@media (max-width: 760px) {

  .onboarding-hero {

    min-height: 650px;

  }

  .onboarding-copy {

    width: 100%;

    padding: 34px 22px 105px;

  }

  .onboarding-logo {

    width: 230px;

    margin-bottom: 54px;

  }

  .onboarding-greeting {

    font-size: 25px;

  }

  .onboarding-copy h1 {

    max-width: 620px;

    font-size: clamp(48px, 13vw, 66px);

    line-height: 0.98;

  }

  .onboarding-copy h2 {

    max-width: 540px;

    font-size: 23px;

  }

  .onboarding-intro {

    max-width: 540px;

    font-size: 18px;

  }

  .onboarding-photo {

  top: 20px;

  left: 50%;

  right: auto;

  width: 112%;

  opacity: 0.15;

  background-position: center;

  transform: translateX(-50%);

}

  .journey-panel {

    width: calc(100% - 22px);

    margin-top: -36px;
margin-bottom: 20px;
    padding: 24px 14px;

    border-radius: 25px;
  

  }

  .journey-heading {

    margin-bottom: 22px;

  }

  .journey-heading h2 {

    font-size: 31px;

  }

  .journey-steps {

    grid-template-columns: repeat(7, 72px);

    justify-content: start;

    gap: 8px;

    overflow-x: auto;

    padding: 4px 4px 14px;

    scrollbar-width: none;

  }

  .journey-steps::-webkit-scrollbar {

    display: none;

  }

  .journey-steps::before {

    left: 36px;

    right: auto;

    width: 440px;

  }

  .journey-icon {

    width: 50px;

    height: 50px;

    font-size: 21px;

  }

  .journey-step strong {

    font-size: 12px;

  }

  .current-step-card {

    padding: 30px 18px 24px;

    border-radius: 23px;

  }

  .current-step-card h2 {

    font-size: 42px;

  }

  .step-lead,

  .step-description {

    font-size: 17px;

  }

  .continue-button {

    min-height: 61px;

    font-size: 21px;

  }

  .save-message {

    align-items: flex-start;

    font-size: 13px;

  }

}

@media (max-width: 390px) {

  .onboarding-copy h1 {

    font-size: 43px;

  }

  .current-step-card h2 {

    font-size: 37px;

  }

}
/* ==========================================

   PAGE 2 - PHOTO UPLOAD

========================================== */

.journey-step.completed {

  color: var(--forest);

}

.journey-step.completed .journey-icon {

  background: rgba(18,63,50,.08);

  border-color: rgba(18,63,50,.18);

  color: var(--forest);

  opacity: 1;

  filter: none;

}

.photo-upload {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  margin: 34px 0;

  padding: 42px 24px;
min-height: 320px;
  border: 2px dashed rgba(18,63,50,.18);

  border-radius: 24px;

  background:

    linear-gradient(

      180deg,

      rgba(255,255,255,.95),

      rgba(247,234,213,.45)

    );

  cursor: pointer;

  transition: .25s ease;

}

.photo-upload:hover {

  border-color: var(--orange);

  transform: translateY(-2px);

}

.upload-icon {

  font-size: 56px;

  margin-bottom: 18px;

}

.photo-upload h3{

  margin:0;

  font-size:30px;

  color:var(--forest);

}

.photo-upload p{

  margin:0;

  color:var(--muted);

  text-align:center;

}

.upload-button{

  margin-top:8px;

  padding:14px 30px;

  border-radius:999px;

  background:var(--orange);

  color:white;

  font-weight:700;

}

.photo-preview{

  display:grid;

  grid-template-columns:

    repeat(auto-fill,minmax(170px,1fr));

  gap:18px;

  margin-top:28px;

}

.photo-preview-card{

  position:relative;

  overflow:hidden;

  border-radius:18px;

  background:white;

  box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.photo-preview-card img{

  width:100%;

  aspect-ratio:1;

  object-fit:cover;

  display:block;

}

.photo-badge{

  display:block;

  padding:10px;

  font-weight:700;

  text-align:center;

}

.remove-photo{

  position:absolute;

  top:10px;

  right:10px;

  width:34px;

  height:34px;

  border:none;

  border-radius:50%;

  background:white;

  cursor:pointer;

  font-size:18px;

}

.photo-tips{

  margin-top:36px;

  text-align:left;

}

.photo-tips h3{

  margin-bottom:20px;

  color:var(--forest);

}

.photo-tip{

  display:flex;

  gap:12px;

  align-items:flex-start;

  margin-bottom:14px;

}

.photo-tip span{

  color:var(--orange);

  font-weight:700;

}

.photo-actions{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:18px;

  margin-top:40px;

}

.back-button{

  text-decoration:none;

  color:var(--forest);

  font-weight:700;

  padding:16px 24px;

  border-radius:14px;

  border:1px solid rgba(18,63,50,.12);

  background:white;

}

.back-button:hover{

  background:#f8f8f8;

}