/* ============================================================
   Apparent 2026 Rebrand v2 — Flat Layout
   Layers on top of index.css
   ============================================================ */

/* ----- Body ----- */
body {
  background: #242322;
  color: #F7F4F2;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  text-align: left;
  padding: 2rem;
}

.page-container {
  max-width: 1440px;
}

/* ----- Site mark — top of article column ----- */
.site-mark {
  width: 80px;
  height: 80px;
  display: block;
  flex-shrink: 0;
  margin-bottom: 2.5rem;
}

/* ----- Main layout ----- */
main {
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: stretch !important;
  gap: 40px;
}

article {
  display: flex;
  flex-direction: column;
  flex: 0 0 400px;
  width: 400px;
}

aside {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Stack below 1060px */
@media (max-width: 1059px) {
  main {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2rem;
  }
  article {
    width: 100%;
    flex: unset;
    max-width: 40em;
    min-height: 32rem;
  }
  aside {
    width: 100%;
    flex: unset;
    max-width: 40em;
  }
}

/* ----- Form — fills full column height, no card ----- */
.pure-steps {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
}

.pure-steps_group {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-height: unset !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Content ol grows to fill available space, pushing trigger to bottom */
.pure-steps_group > ol:first-child {
  flex: 1;
}

/* Step 0 active: relative so ol height = content height,
   trigger bar then flows naturally below */
.pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(1) {
  position: relative !important;
  width: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ----- Step headings ----- */

/* Step 0: hero heading */
.pure-steps_group-step:first-child .pure-steps_group-step_legend {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  font-size: 2.375rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  color: #F7F4F2 !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
}

/* Hide headings on steps 1–3 */
.pure-steps_group-step:not(:first-child) .pure-steps_group-step_legend {
  display: none !important;
}

/* Body copy */
.pure-steps .pure-steps_group-step p,
.pure-steps .pure-steps_group-step .pure-steps_group-step_item {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  color: #E2DFD8;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-top: 0.75rem;
}

/* Step content — no padding, sits flush with column */
.pure-steps_group-step {
  padding: 0 !important;
}

.pure-steps .pure-steps_group-step .pure-steps_group-step_item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pure-steps .pure-steps_group .pure-steps_group-step .icon-holder {
  padding: 0 !important;
}

.pure-steps .pure-steps_group-step .icon-holder label {
  padding-left: 0 !important;
}

.pure-steps_group-step header {
  margin: 0 !important;
  padding: 0 !important;
}

.pure-steps_group-step header > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ----- Inputs ----- */
.pure-steps .pure-steps_group-step .pure-steps_group-step_item input {
  color: #F7F4F2;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  background-image: linear-gradient(0deg, transparent 0, rgba(247, 244, 242, 0.2) 1px),
                    linear-gradient(0deg, transparent 0, #E2DFD8 1px) !important;
}

.pure-steps .pure-steps_group-step .pure-steps_group-step_item input:focus {
  color: #F7F4F2;
  background-image: linear-gradient(0deg, transparent 0, rgba(247, 244, 242, 0.2) 1px),
                    linear-gradient(0deg, transparent 0, #E2DFD8 1px) !important;
}

.pure-steps .pure-steps_group-step .pure-steps_group-step_item input:focus + label {
  opacity: 1;
  color: #E2DFD8 !important;
}

.pure-steps .pure-steps_group-step .pure-steps_group-step_item input::-webkit-input-placeholder { color: rgba(247, 244, 242, 0.35); }
.pure-steps .pure-steps_group-step .pure-steps_group-step_item input:-moz-placeholder           { color: rgba(247, 244, 242, 0.35); }
.pure-steps .pure-steps_group-step .pure-steps_group-step_item input::-moz-placeholder          { color: rgba(247, 244, 242, 0.35); }
.pure-steps .pure-steps_group-step .pure-steps_group-step_item input:-ms-input-placeholder      { color: rgba(247, 244, 242, 0.35); }

/* Field labels */
.pure-steps .pure-steps_group-step .pure-steps_group-step_item label,
.pure-steps .pure-steps_group-step .icon-holder label {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 300;
  color: rgba(226, 223, 216, 0.55);
}

/* ----- Trigger bar — flows naturally below step content ----- */
.pure-steps_group-triggers {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  height: auto !important;
  padding: 2rem 0 0 !important;
}

/* Progress bar — red, sits above buttons */
.pure-steps_group-triggers::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0.75rem !important;
  left: 0 !important;
  height: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #FA0500 !important;
  transition: width 0.4s ease !important;
}

/* Primary buttons — filled red pill */
.pure-steps .pure-steps_group-triggers_item:nth-child(2) label,
.pure-steps .pure-steps_group-triggers_item:nth-child(3) label,
.pure-steps .pure-steps_group-triggers_item:nth-child(4) label {
  display: inline-block !important;
  background: #FA0500 !important;
  color: #F7F4F2 !important;
  border-radius: 50px !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
}

.pure-steps .pure-steps_group-triggers_item:nth-child(2) label:hover,
.pure-steps .pure-steps_group-triggers_item:nth-child(3) label:hover,
.pure-steps .pure-steps_group-triggers_item:nth-child(4) label:hover {
  background: #cc0000 !important;
}

/* Secondary button — outline pill (Start again) */
.pure-steps .pure-steps_group-triggers_item:nth-child(1) {
  display: none;
}

.pure-steps .pure-steps_group-triggers_item:nth-child(1) label {
  display: inline-block !important;
  background: transparent !important;
  color: rgba(247, 244, 242, 0.65) !important;
  border: 1px solid rgba(247, 244, 242, 0.3) !important;
  border-top: 1px solid rgba(247, 244, 242, 0.3) !important;
  border-radius: 50px !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.pure-steps .pure-steps_group-triggers_item:nth-child(1) label:hover {
  background: rgba(247, 244, 242, 0.07) !important;
  color: #F7F4F2 !important;
  border-color: rgba(247, 244, 242, 0.55) !important;
}

/* Show restart on steps 1–4, not step 0 */
.pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(1),
.pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(1),
.pure-steps_radio:nth-child(4):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(1) {
  display: inline-block !important;
}

/* index.css fades out the entire trigger bar on step 4 — keep it visible */
.pure-steps_radio:nth-child(4):checked ~ .pure-steps_group .pure-steps_group-triggers {
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* ----- Strong spans (kept for any remaining usage) ----- */
.strong {
  color: #F7F4F2;
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}

/* ----- Preview card — white, large radius ----- */
.preview {
  flex: 1;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 1.75rem !important;
}

/* ----- Toolbar buttons — dark (on white card) ----- */
.buttons-container {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

.cpbutton {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  border-radius: 50px;
  border: 1px solid rgba(36, 35, 34, 0.2);
  color: #242322;
  background-color: transparent;
  padding-right: 1rem;
  font-size: 0.85rem;
}

.cpbutton:hover,
.cpbutton:focus {
  background-color: rgba(36, 35, 34, 0.06);
}

.cpbutton:active {
  background-color: rgba(36, 35, 34, 0.1);
}

/* Confirmation toast */
#windowconfirmed {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  background-color: #242322;
  color: #F7F4F2;
}

/* Dev note */
.dev_note {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: rgba(247, 244, 242, 0.4);
}

/* ----- Footer — hidden ----- */
footer {
  display: none !important;
}