@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #191C1D;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* ——— Onboarding ——— */
.onboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Top bar */
.onboard-top {
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 50;
}
.onboard-top__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.onboard-top__logo {
    display: flex;
    align-items: center;
}
.onboard-top__logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1350%) hue-rotate(143deg) brightness(93%) contrast(101%);
}
.onboard-top__steps {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.onboard-top__steps::-webkit-scrollbar { display: none; }
.onboard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.onboard-step__num {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #EDEEEF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(59, 74, 70, 0.40);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.onboard-step.is-active .onboard-step__num {
    background: #006B5E;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 107, 94, 0.10);
}
.onboard-step.is-done .onboard-step__num {
    background: #006B5E;
    color: #fff;
}
.onboard-step__label {
    display: none;
    color: #006B5E;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 15px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.onboard-step.is-active .onboard-step__label {
    display: block;
}
.onboard-step__connector {
    width: 48px;
    height: 2px;
    background: #E1E3E4;
    flex-shrink: 0;
    margin: 0 8px;
}
.onboard-top__progress {
    height: 4px;
    background: #EDEEEF;
}
.onboard-top__progress-bar {
    height: 100%;
    background: #006B5E;
    transition: width 0.3s;
}

/* Main content area */
.onboard-main {
    flex: 1;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 64px 48px 120px;
}
.onboard-main--wide {
    max-width: 1100px;
}
.onboard-main__head {
    margin-bottom: 32px;
}
.onboard-main__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #191C1D;
    margin: 0 0 8px;
}
.onboard-main__sub {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #3B4A46;
    margin: 0;
}

/* Purpose cards */
.onboard-main__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.purpose-card {
    position: relative;
    display: block;
    cursor: pointer;
    height: 100%;
}
.purpose-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.purpose-card__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    height: 100%;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid #C5C5D7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s, background 0.2s;
}
.purpose-card__radio:checked ~ .purpose-card__body {
    border-color: #00D9C0;
    background: #F7FFFD;
}
.purpose-card__icon {
    width: 40px;
    height: 40px;
    background: rgba(9, 108, 82, 0.16);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.purpose-card__icon img {
    width: 20px;
    height: 20px;
    display: block;
}
.purpose-card__text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.purpose-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #191C1D;
}
.purpose-card__desc {
    font-size: 12px;
    font-weight: 500;
    line-height: 19.5px;
    color: #3B4A46;
}
.purpose-card__title--other {
    font-weight: 400;
    line-height: 30px;
}
.purpose-other-input {
    display: none;
    max-width: 900px;
    margin: 16px auto 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid #C5C5D7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.onboard-main:has(.purpose-card__radio--other:checked) .purpose-other-input {
    display: block;
}
.purpose-other-input__field {
    width: 100%;
    padding: 17px 24px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    color: #191C1D;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    outline: none;
}
.purpose-other-input__field::placeholder {
    color: #6B7280;
}
.purpose-other-input__field:focus {
    border-color: #00D9C0;
}
.purpose-card__check {
    position: absolute;
    top: 17px;
    right: 17px;
    opacity: 0;
    transition: opacity 0.2s;
}
.purpose-card__radio:checked ~ .purpose-card__check {
    opacity: 1;
}

/* Bottom bar */
.onboard-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.50);
    border-top: 1px solid #BACAC5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 50;
}
.onboard-bottom__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.onboard-bottom__back {
    padding: 16px 64px;
    border-radius: 8px;
    border: 1px solid #6B7A76;
    color: #191C1D;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.6px;
    transition: background 0.2s;
}
.onboard-bottom__back:hover {
    background: rgba(0, 0, 0, 0.04);
}
.onboard-bottom__next {
    padding: 16px 64px;
    background: #006B5E;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
}
.onboard-bottom__next:hover {
    background: #005a4e;
}

/* ——— Background form (Step 3) ——— */
.bg-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.bg-card {
    padding: 24px;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    border: 1px solid #F1F5F9;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bg-label {
    display: block;
    color: #3B4A46;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}
.bg-textarea-wrap {
    background: #F3F4F5;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    overflow: hidden;
}
.bg-textarea {
    width: 100%;
    display: block;
    padding: 24px;
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    min-height: 120px;
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 24px;
}
.bg-textarea::placeholder {
    color: #6B7280;
}
.bg-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.bg-row-main {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: stretch;
}
.bg-col-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.bg-col-right {
    display: flex;
}
.bg-card--fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bg-input-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: #F3F4F5;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    overflow: hidden;
    height: 58px;
    padding: 0 24px 0 40px;
}
.bg-input-icon svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}
.bg-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #191C1D;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
}
.bg-input::placeholder {
    color: #6B7280;
}
.bg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
.bg-pills--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bg-pill {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.bg-pill__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bg-pill__text {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 24px;
    background: #F3F4F5;
    border-radius: 9999px;
    border: 1px solid #BACAC5;
    color: #3B4A46;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.6px;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.bg-pill.is-active .bg-pill__text,
.bg-pill__radio:checked ~ .bg-pill__text {
    background: rgba(9, 108, 82, 0.16);
    border-color: rgba(9, 108, 82, 0.16);
    color: #006B5E;
}
.bg-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.bg-type {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #BACAC5;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.bg-type__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bg-type__border {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s;
}
.bg-type__radio:checked ~ .bg-type__border {
    border-color: #006B5E;
}
.bg-type__icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    background: #F3F4F5;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #3B4A46;
    transition: background 0.2s, color 0.2s;
}
.bg-type__radio:checked ~ .bg-type__icon {
    background: rgba(9, 108, 82, 0.16);
    color: #006B5E;
}
.bg-type__label {
    position: relative;
    z-index: 1;
    color: #191C1D;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.6px;
}
/* ——— Integrations (Step 4) ——— */
.onboard-main--integrations {
    max-width: 1200px;
}
.onboard-main--integrations .onboard-main__head {
    text-align: center;
}
.int-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-bottom: 8px;
}
.int-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    padding-bottom: 44px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid rgba(197, 197, 215, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.int-card__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.int-card__border {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s;
}
.int-card__check:checked ~ .int-card__border {
    border-color: #00D9C0;
}
.int-card:has(.int-card__check:checked) {
    background: #F7FFFD;
}
.int-card__check:checked ~ .int-card__icon {
    background: rgba(9, 108, 82, 0.16);
    color: #006B5E;
}
.int-card__icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    background: rgba(9, 108, 82, 0.16);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #006B5E;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.int-card__title {
    position: relative;
    z-index: 1;
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 8px;
}
.int-card__desc {
    position: relative;
    z-index: 1;
    color: #3B4A46;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 20px;
}
.int-card--unsure {
    padding-top: 55px;
    padding-bottom: 55px;
    justify-content: center;
    align-items: center;
    border: 2px solid #BACAC5;
}
.int-card--unsure .int-card__icon,
.int-card__icon--plain {
    background: transparent;
    color: #3B4A46;
    margin-bottom: 16px;
}
.int-card--unsure .int-card__check:checked ~ .int-card__icon,
.int-card__check:checked ~ .int-card__icon--plain {
    background: transparent;
    color: #3B4A46;
}
.int-card__unsure-label {
    position: relative;
    z-index: 1;
    color: #3B4A46;
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: lowercase;
}
/* ——— Problem (Step 5) ——— */
.onboard-main--problem {
    max-width: 1000px;
}
.onboard-main__head--center {
    text-align: center;
}
.onboard-main__head--center .onboard-main__sub {
    max-width: 672px;
    margin-inline: auto;
}
.prob-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.prob-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.prob-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.prob-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid #C5C5D7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.prob-card__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.prob-card__border {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s;
    z-index: 1;
}
.prob-card__check:checked ~ .prob-card__border {
    border-color: #00D9C0;
}
.prob-card__check:checked ~ .prob-card__top .prob-card__check-dot::after {
    opacity: 1;
}
.prob-card:has(.prob-card__check:checked) {
    background: #F7FFFD;
}
.prob-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.prob-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prob-card__icon img {
    display: block;
}
.prob-card__check-dot {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 2px solid #BACAC5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.prob-card__check-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #006B5E;
    border-radius: 9999px;
    opacity: 0;
    transition: opacity 0.2s;
}
.prob-card__check-dot--lg {
    width: 24px;
    height: 24px;
}
.prob-card__check-dot--lg::after {
    width: 12px;
    height: 12px;
}
.prob-card__title {
    color: #191C1D;
    font-size: 20px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.prob-card__desc {
    color: #3B4A46;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 20px;
    position: relative;
    z-index: 2;
}
/* Selected description color */
.prob-card:has(.prob-card__check:checked) .prob-card__desc {
    color: #096C52;
}
/* Wide card (Missed leads) */
.prob-card--wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
    padding: 3px 24px 24px 24px;
    background: white;
}
.prob-card--wide .prob-card__body {
    flex: 1;
    height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}
.prob-card--wide .prob-card__top {
    margin-bottom: 0;
}
.prob-card--wide .prob-card__title {
    line-height: 36px;
    margin-bottom: 0;
}
.prob-card__image {
    flex-shrink: 0;
    width: 192px;
    height: 128px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.prob-card__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, white 0%, white 100%);
    mix-blend-mode: saturation;
}
.prob-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
/* Accent card (Scaling without headcount) */
.prob-card--accent {
    padding: 40px;
}
.prob-card--accent .prob-card__title {
    color: #005A4E;
    line-height: 36px;
    margin-bottom: 0;
}
.prob-card--accent .prob-card__desc {
    color: rgba(0, 90, 78, 0.80);
    line-height: 24px;
}
.prob-card__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.prob-card__accent-body {
    max-width: 576px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prob-card__accent-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.prob-card__icon--sm {
    width: auto;
    height: auto;
}
/* Other card */
.prob-other {
    display: flex;
    flex-direction: column;
}
.prob-card--other {
    border-radius: 12px 12px 0 0;
}
.prob-card--other .prob-card__top {
    margin-bottom: 0;
}
.prob-card--other .prob-card__title {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}
.prob-other__input-wrap {
    background: rgba(255, 255, 255, 0.70);
    border-radius: 0 0 12px 12px;
    border: 1px solid #C5C5D7;
    border-top: none;
    padding: 8px 24px 24px;
    display: none;
}
.prob-card--other:has(.prob-card__check:checked) {
    border-radius: 12px 12px 0 0;
}
.prob-card--other:has(.prob-card__check:checked) + .prob-other__input-wrap {
    display: block;
}
.prob-other__input {
    width: 100%;
    padding: 17px 24px;
    background: white;
    border: 1px solid #BACAC5;
    border-radius: 8px;
    color: #191C1D;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    outline: none;
}
.prob-other__input::placeholder {
    color: #6B7280;
}
/* ——— Step 6: Tools ——— */
.onboard-main--tools {
    max-width: 1000px;
}
.onboard-main--tools .onboard-main__head {
    text-align: center;
    margin-bottom: 40px;
}

/* Primary row: 2-col (card + image) */
.tools-primary-row {
    display: grid;
    grid-template-columns: 1fr 293px;
    gap: 24px;
    margin-bottom: 24px;
}

/* Primary Channels card */
.tools-primary-card {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid #C5C5D7;
    border-radius: 16px;
    padding: 32px;
}

.tools-section-label {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #191C1D;
    margin: 0 0 24px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 3×2 grid for primary tools */
.tools-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Image column */
.tools-primary-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 293px;
}
.tools-primary-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.tools-primary-image__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 107, 94, 0.50) 0%, rgba(0, 90, 78, 0.80) 100%);
}
.tools-primary-image__caption {
    position: relative;
    z-index: 2;
    padding: 24px;
    color: white;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

/* Tool chip (primary & specialized) */
.tool-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid #BACAC5;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.tool-chip__border {
    display: none;
}
.tool-chip__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tool-chip__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.tool-chip__icon img {
    width: 24px;
    height: 24px;
}
.tool-chip__label {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #3B4A46;
    text-align: center;
    position: relative;
    z-index: 2;
    line-height: 16px;
    word-break: break-word;
}

/* Selected state */
.tool-chip:has(.tool-chip__check:checked) {
    background: #F7FFFD;
    border-color: #00D9C0;
}
.tool-chip:has(.tool-chip__check:checked) .tool-chip__label {
    color: #006B5E;
    font-weight: 600;
}

/* Specialized & Enterprise Tools card */
.tools-specialized-card {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid #C5C5D7;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.tools-specialized-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.tool-chip--specialized {
    flex: 0 0 calc(20% - 13px);
    min-width: 140px;
}
/* Accounting Software and Mekari/Jurnal/Accurate — each half the full row width */
.tool-chip--specialized:nth-child(6),
.tool-chip--specialized:nth-child(7) {
    flex: 0 0 calc(50% - 8px);
}

/* Other Tools */
.tools-other {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tools-other__label {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #191C1D;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tools-other__input {
    width: 100%;
    padding: 17px 24px;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid #C5C5D7;
    border-radius: 12px;
    color: #191C1D;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    outline: none;
}
.tools-other__input::placeholder {
    color: #6B7280;
}

@media (max-width: 768px) {
    .bg-row-2,
    .bg-row-main {
        grid-template-columns: 1fr;
    }
    .bg-types {
        grid-template-columns: repeat(2, 1fr);
    }
    .bg-pills--grid {
        grid-template-columns: 1fr 1fr;
    }
    .int-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .prob-grid-3 {
        grid-template-columns: 1fr;
    }
    .prob-grid-2 {
        grid-template-columns: 1fr;
    }
    .prob-card--wide {
        grid-column: span 1;
        flex-direction: column;
    }
    .prob-card__image {
        width: 100%;
    }
    .prob-card__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .tools-primary-row {
        grid-template-columns: 1fr;
    }
    .tools-primary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tool-chip--specialized {
        flex: 0 0 calc(50% - 8px);
    }
    .tool-chip--specialized:nth-child(6),
    .tool-chip--specialized:nth-child(7) {
        flex: 0 0 calc(50% - 8px);
    }
}
@media (max-width: 480px) {
    .int-grid {
        grid-template-columns: 1fr;
    }
    .tools-primary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .tool-chip--specialized {
        flex: 0 0 100%;
    }
    .tool-chip--specialized:nth-child(6),
    .tool-chip--specialized:nth-child(7) {
        flex: 0 0 100%;
    }
}

@media (max-width: 900px) {
    .onboard-main__title {
        font-size: 32px;
        line-height: 40px;
    }
}
@media (max-width: 768px) {
    /* Top bar */
    .onboard-top__inner {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }
    .onboard-top__steps {
        width: 100%;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .onboard-step__label {
        display: none;
    }
    .onboard-step__connector {
        width: 12px;
    }
    .onboard-top__progress {
        display: none;
    }
    .onboard-main {
        padding: 32px 16px 140px;
    }
    .onboard-main__title {
        font-size: 24px !important;
        line-height: 32px !important;
        text-align: center;
    }
    .onboard-main__sub {
        font-size: 13px !important;
        line-height: 18px !important;
        text-align: center;
    }

    /* Step 1 — Purpose cards */
    .onboard-main__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .purpose-card {
        padding: 12px 8px;
    }
    .purpose-card__icon {
        width: 36px;
        height: 36px;
    }
    .purpose-card__icon img {
        width: 20px;
        height: 20px;
    }
    .purpose-card__title {
        font-size: 11px;
        line-height: 14px;
    }
    .purpose-card__desc {
        font-size: 9px;
        line-height: 12px;
    }

    /* Step 2 & 3 — Identity & Background forms */
    .identity-card {
        padding: 24px 16px;
        border-radius: 8px;
    }
    .identity-card__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .identity-card__col {
        gap: 16px;
    }
    .identity-input {
        font-size: 15px;
        padding: 16px 12px;
    }
    .identity-select__field {
        font-size: 15px;
        padding: 16px 12px;
    }
    .identity-phone__prefix {
        width: 65px;
        padding: 16px 4px;
        font-size: 13px;
    }

    /* Step 4 — Integrations */
    .onboard-main--integrations {
        padding: 32px 16px 140px;
    }
    .integration-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Step 5 — Problem */
    .prob-grid-3 {
        grid-template-columns: 1fr;
    }
    .prob-grid-2 {
        grid-template-columns: 1fr;
    }
    .prob-card--wide {
        flex-direction: column;
    }
    .prob-card__image {
        width: 100%;
        max-height: 120px;
    }
    .prob-card {
        padding: 16px;
    }
    .prob-card__title {
        font-size: 14px;
    }
    .prob-card__desc {
        font-size: 11px;
    }

    /* Step 6 — Tools */
    .tools-primary-row {
        flex-direction: column;
        gap: 16px;
    }
    .tools-primary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tools-specialized-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tool-chip {
        padding: 10px 12px;
    }
    .tool-chip__label {
        font-size: 12px;
    }

    /* Step 7 — Readiness */
    .readiness-timeline-grid {
        gap: 8px;
    }
    .readiness-card--timeline {
        padding: 16px 10px;
        min-width: 60px;
    }
    .readiness-card__label {
        font-size: 11px;
    }
    .readiness-support-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .readiness-card--support {
        padding: 20px;
    }
    .readiness-section--timeline {
        margin-bottom: 48px;
    }
    .readiness-section--support-head {
        text-align: center;
    }

    /* Step 8 — Budget */
    .budget-card {
        padding: 16px;
    }
    .budget-card__usd {
        font-size: 16px;
        line-height: 22px;
    }
    .budget-card__idr {
        font-size: 13px;
        line-height: 18px;
    }

    /* Step 9 — Booking */
    .booking-card {
        padding: 20px;
    }
    .booking-contact-row {
        flex-direction: column;
        gap: 8px;
    }
    .booking-nda {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .booking-card iframe {
        height: 400px;
    }

    /* Bottom bar */
    .onboard-bottom__inner {
        padding: 12px 16px;
        gap: 8px;
    }
    .onboard-bottom__back,
    .onboard-bottom__next {
        padding: 12px 24px;
        font-size: 11px;
    }
}

/* ——— Identity form (Step 2) ——— */
.identity-card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(241, 245, 249, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.identity-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.identity-card__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.identity-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.identity-field__label {
    color: #3B4A46;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 16px;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.identity-field__input {
    display: flex;
    flex-direction: column;
}
.identity-input {
    width: 100%;
    padding: 26px 16px 27px;
    background: #F8F9FA;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s;
}
.identity-input::placeholder {
    color: #6B7280;
}
.identity-input:focus {
    border-color: #00D9C0;
}
.identity-phone {
    display: flex;
    gap: 0;
}
.identity-phone__prefix {
    position: relative;
    width: 90px;
    flex-shrink: 0;
    padding: 24px 8px;
    background: #F8F9FA;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.identity-phone__country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
}
.identity-phone__code {
    color: #191C1D;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.identity-phone__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #BACAC5;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 100%;
}
.identity-phone__dropdown.is-open {
    display: block;
}
.identity-phone__dropdown-inner {
    max-height: 210px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #BACAC5 transparent;
}
.identity-phone__dropdown-inner::-webkit-scrollbar {
    width: 4px;
}
.identity-phone__dropdown-inner::-webkit-scrollbar-thumb {
    background: #BACAC5;
    border-radius: 2px;
}
.identity-phone__option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    border: none;
    color: #191C1D;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.identity-phone__option:hover {
    background: #F7FFFD;
}
.identity-phone__option.is-selected {
    background: #F7FFFD;
    color: #006B5E;
    font-weight: 600;
}
.identity-phone__number {
    flex: 1;
    padding-left: 8px;
}
.identity-phone__number .identity-input {
    height: 100%;
}
.identity-select {
    position: relative;
}
.identity-select__field {
    width: 100%;
    padding: 24px 16px;
    background: #F8F9FA;
    border-radius: 8px;
    border: 1px solid #BACAC5;
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 24px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.identity-select__field:focus {
    border-color: #00D9C0;
}
.identity-select::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.identity-privacy {
    margin-top: 16px;
    padding: 16px;
    background: #F7FFFD;
    border-radius: 8px;
    border: 1px solid #096C52;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.identity-privacy__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.identity-privacy__text {
    color: #3B4A46;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
@media (max-width: 768px) {
    .identity-card {
        padding: 24px;
    }
    .identity-card__row {
        grid-template-columns: 1fr;
    }
    .identity-phone__prefix {
        width: 70px;
        padding: 20px 4px;
    }
}

/* =============================================
   Step 7 — Readiness
   ============================================= */
.onboard-main--readiness {
    max-width: 1152px;
    margin: 0 auto;
    padding: 64px 32px 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sections */
.readiness-section {
    width: 100%;
}
.readiness-section--timeline {
    margin-bottom: 96px;
}
.readiness-section--support-head {
    margin-bottom: 48px;
    text-align: center;
}

.readiness-support-title {
    color: #191C1D;
    font-size: 32px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 40px;
    margin: 0 0 12px;
    letter-spacing: -0.32px;
}
.readiness-support-sub {
    max-width: 512px;
    margin: 0 auto;
    color: #3B4A46;
    font-size: 16px;
    font-family: Geist, sans-serif;
    font-weight: 400;
    line-height: 24px;
}

/* Timeline Grid */
.readiness-timeline-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Support Grid (Bento) — 3x2 */
.readiness-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1152px;
}

/* Card base */
.readiness-card {
    position: relative;
    cursor: pointer;
    display: flex;
    transition: all 0.2s ease;
}
.readiness-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Timeline Cards ── */
.readiness-card--timeline {
    flex-direction: column;
    align-items: center;
    padding: 24px 55px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.readiness-card--timeline:hover {
    background: rgba(255, 255, 255, 0.90);
}
.readiness-card--timeline:has(.readiness-card__radio:checked) {
    background: #F5FBF9;
    border-color: #096C52;
}

.readiness-card__icon-circle {
    width: 48px;
    height: 48px;
    background: #EDEEEF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background 0.2s;
}
.readiness-card--timeline:has(.readiness-card__radio:checked) .readiness-card__icon-circle {
    background: rgba(9, 108, 82, 0.16);
}

.readiness-card__label {
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
}

/* ── Support Cards ── */
.readiness-card--support {
    padding: 32px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-wrap: wrap;
    overflow: hidden;
}
.readiness-card--support:hover {
    background: rgba(255, 255, 255, 0.90);
}
.readiness-card--support:has(.readiness-card__radio:checked) {
    background: #F5FBF9;
    border-color: #096C52;
}

.readiness-card__icon-circle--sm {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
}
.readiness-card--support:has(.readiness-card__radio:checked) .readiness-card__icon-circle--sm {
    background: #FFFFFF;
}

.readiness-card__support-title {
    width: 100%;
    color: #191C1D;
    font-size: 18px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 8px;
}
.readiness-card--support:has(.readiness-card__radio:checked) .readiness-card__support-title {
    color: #096C52;
}

.readiness-card__support-desc {
    width: 100%;
    color: #3B4A46;
    font-size: 14px;
    font-family: Geist, sans-serif;
    font-weight: 400;
    line-height: 20px;
}

/* Ghost icon decoration */
.readiness-card__ghost {
    position: absolute;
    right: -15px;
    top: -15px;
    opacity: 0.05;
    pointer-events: none;
}

/* ── SVG Icon placeholders (inline via CSS background) ── */
.readiness-card__icon-svg {
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Timeline icons */
.readiness-card__icon-svg--tl-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20' fill='none'%3E%3Cpath d='M6.55 16.2L11.725 10H7.725L8.45 4.325L3.825 11H7.3L6.55 16.2ZM4 20L5 13H0L9 0H11L10 8H16L6 20H4Z' fill='%2300201B'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--tl-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20' fill='none'%3E%3Cpath d='M2 20C1.45 20 0.979 19.804 0.588 19.413C0.196 19.021 0 18.55 0 18V4C0 3.45 0.196 2.979 0.588 2.588C0.979 2.196 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.021 2.196 17.413 2.588C17.804 2.979 18 3.45 18 4V18C18 18.55 17.804 19.021 17.413 19.413C17.021 19.804 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6Z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--tl-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22' fill='none'%3E%3Cpath d='M14 20V18H18V8H4V12H2V4C2 3.45 2.196 2.979 2.588 2.588C2.979 2.196 3.45 2 4 2H5V0H7V2H15V0H17V2H18C18.55 2 19.021 2.196 19.413 2.588C19.804 2.979 20 3.45 20 4V18C20 18.55 19.804 19.021 19.413 19.413C19.021 19.804 18.55 20 18 20H14ZM7 22L5.6 20.6L8.175 18H0V16H8.175L5.6 13.4L7 12L12 17L7 22ZM4 6H18V4H4V6Z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--tl-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20' fill='none'%3E%3Cpath d='M5 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM2 20a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1V0h2v2h8V0h2v2h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2zm0-2h14V8H2v10zm0-12h14V4H2v2z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--tl-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 14.5l7-2 2-7-7 2-2 7zm4.5-3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z' fill='%23191C1D'/%3E%3C/svg%3E"); }

/* Support icons */
.readiness-card__icon-svg--sp-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M20 20l-4-4H6a2 2 0 0 1-2-2v-1h11a2 2 0 0 0 2-2V4h1a2 2 0 0 1 2 2v14zM2 10.175L3.175 9H13V2H2v8.175zM0 15V2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4L0 15z' fill='%2300201B'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--sp-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M2 18a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2zm0-2h16V2H2v14zm1-4h5v-2H3v2zm9.55-2l4.95-4.95-1.425-1.425-3.525 3.525-1.4-1.425-1.4 1.425L12.55 12zM3 10h5V8H3v2zm0-4h5V4H3v2z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--sp-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M3.6 7.996l1.95.825a13.5 13.5 0 0 1 1.55-2.65l-1.4-.275-2.1 2.1zm3.55 2.075L10 12.896a17 17 0 0 0 4.5-3.1 10.3 10.3 0 0 0 3.6-5.826 8 8 0 0 0-3.95.862 11.3 11.3 0 0 0-3.9 2.738 20 20 0 0 0-3.1 4.5zm4.45-1.625a2.5 2.5 0 0 1-1.425-1.412 2.5 2.5 0 1 1 1.425 1.412zm.475 8.025l2.1-2.1-.275-1.4a8 8 0 0 1-2.65 1.525l.825 1.975zM19.9.146a11.45 11.45 0 0 1-4.25 11.35l.5 2.475a2 2 0 0 1-.55 1.8l-4.2 4.2-2.1-4.925-4.275-4.275L.1 8.67l4.175-4.2a2 2 0 0 1 1.825-.55l2.475.5A11.45 11.45 0 0 1 19.9.146zM1.875 13.946a4.25 4.25 0 0 1 4.275 4.25l-2.112 1.075C.233 18.354.5 17.008.8 16.033s.658-1.671 1.075-2.087zm1.425 1.4a3 3 0 0 0 1.4 1.425 3 3 0 0 0-.7-1.425 2.75 2.75 0 0 0-.7 0z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--sp-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' fill='none'%3E%3Cpath d='M.25 18L0 15.8l2.85-7.85a2.6 2.6 0 0 0 1.75.95L1.85 16.45.25 18zm10.5 0l-1.6-1.55-2.75-7.55a2.6 2.6 0 0 1 1.75-.95L11 15.8l-.25 2.2zM5.5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--sp-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'%3E%3Cpath d='M3 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0-6V5a2 2 0 0 1 2-2h3a2 2 0 0 1 3-3 2 2 0 0 1 3 3h3a2 2 0 0 1 2 2v2a2 2 0 1 1 0 4v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4zm5-2a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zm6 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zM7 15h8v-2H7v2zm-2 2h12V5H5v12z' fill='%23191C1D'/%3E%3C/svg%3E"); }
.readiness-card__icon-svg--sp-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='20' viewBox='0 0 23 20' fill='none'%3E%3Cpath d='M10.885 18l.35-.15 8.2-8.2a2.6 2.6 0 0 0 .775-1.875 2.6 2.6 0 0 0-.775-1.875l-4.25-4.25a2.6 2.6 0 0 0-1.875-.775 2.6 2.6 0 0 0-1.875.775l-.275.275 1.85 1.875a2.6 2.6 0 0 1 .725 1.75 2.6 2.6 0 0 1-.712 1.762 2.6 2.6 0 0 1-1.763.713 2.6 2.6 0 0 1-1.775-.7l-1.875-1.85-4.375 4.375-.15.35.15.362.275.263 3.75-3.4 1.4 1.4-3.375 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.375 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.4 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.4 3.4a.74.74 0 0 0-.15.35.74.74 0 0 0 .162.35.74.74 0 0 0 .363.15.74.74 0 0 0 .362-.15zM10.86 20a3.5 3.5 0 0 1-2.475-2.15 3.5 3.5 0 0 1-2.575-.7 3.5 3.5 0 0 1-.7-1.425 3.5 3.5 0 0 1-2.112-1.125 3.5 3.5 0 0 1-.55-1.65 3.5 3.5 0 0 1-1.823-1.775v-2.375a4.5 4.5 0 0 1 .725-1.575l3.525-3.525L9.285 4.15l.025.037.125-.113.175.088.175-.088 1.875-1.85 3.275 3.25-2.375 2.425-.025-.037-.125.113-.175-.088-.175.088-.15-.15-3.575 3.425L8.535 6.4l-4.375 4.375a.35.35 0 0 0-.112.35.35.35 0 0 0 .15.362l.275.263 3.75-3.4 1.4 1.4-3.375 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.375 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.4 3.4-.15.35.15.362.275.263 3.4-3.375 1.4 1.4-3.4 3.4a.74.74 0 0 0-.15.35.74.74 0 0 0 .162.35.74.74 0 0 0 .363.15.74.74 0 0 0 .362-.15z' fill='%23191C1D'/%3E%3C/svg%3E"); }

/* =============================================
   Step 8 — Budget
   ============================================= */
.onboard-main--budget {
    max-width: 740px;
    margin: 0 auto;
    padding: 64px 32px 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.budget-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 740px;
}

.budget-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 12px;
    border: 1px solid #C5C5D7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.budget-card:hover {
    background: rgba(255, 255, 255, 0.90);
}
.budget-card:has(.budget-card__radio:checked) {
    background: #F5FBF9;
    border-color: #096C52;
}

.budget-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.budget-card__body {
    display: flex;
    flex-direction: column;
}

.budget-card__usd {
    color: #191C1D;
    font-size: 24px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    line-height: 30px;
}

.budget-card__idr {
    color: #000000;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 30px;
}

.budget-card__radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #BACAC5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.budget-card:has(.budget-card__radio:checked) .budget-card__radio-dot {
    border-color: #096C52;
}

.budget-card__radio-dot-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #006B5E;
    opacity: 0;
    transition: opacity 0.2s;
}
.budget-card:has(.budget-card__radio:checked) .budget-card__radio-dot-inner {
    opacity: 1;
}

/* =============================================
   Step 9 — Booking
   ============================================= */
.onboard-main--booking {
    max-width: 896px;
    margin: 0 auto;
    padding: 64px 32px 120px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.booking-card {
    padding: 32px;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    outline: 1px #F1F5F9 solid;
    outline-offset: -1px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.booking-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-card__title {
    color: #191C1D;
    font-size: 20px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
}

.booking-card__placeholder {
    color: #3B4A46;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* Contact method cards */
.booking-contact-row {
    display: flex;
    gap: 24px;
}

.booking-contact-card {
    flex: 1;
    padding: 16px;
    border-radius: 12px;
    outline: 1px rgba(186, 202, 197, 0.50) solid;
    outline-offset: -1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.booking-contact-card:has(.booking-contact-card__radio:checked),
.booking-contact-card.is-selected {
    background: rgba(0, 107, 94, 0.05);
    outline-color: #006B5E;
}

.booking-contact-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-contact-card__icon {
    flex-shrink: 0;
    margin-right: 0;
}

.booking-contact-card__text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.booking-contact-card__label {
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 24px;
}

.booking-contact-card__desc {
    color: #3B4A46;
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 16px;
}

.booking-contact-card__check {
    position: absolute;
    top: 13px;
    right: 16px;
    display: none;
}
.booking-contact-card:has(.booking-contact-card__radio:checked) .booking-contact-card__check {
    display: block;
}

/* NDA Toggle */
.booking-nda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #F3F4F5;
    border-radius: 8px;
}

.booking-nda__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.booking-nda__title {
    color: #191C1D;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 24px;
}

.booking-nda__desc {
    color: #3B4A46;
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 16px;
}

/* Toggle switch */
.booking-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.booking-toggle__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.booking-toggle__track {
    display: block;
}
.booking-toggle__track--on {
    display: none;
}
.booking-toggle:has(.booking-toggle__check:checked) .booking-toggle__track {
    display: none;
}
.booking-toggle:has(.booking-toggle__check:checked) .booking-toggle__track--on {
    display: block;
}

/* Consent checkboxes */
.booking-consent {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px;
    cursor: pointer;
}
.booking-consent__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.booking-consent__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}
.booking-consent__icon--unchecked {
    display: block;
}
.booking-consent__icon--checked {
    display: none;
}
.booking-consent:has(.booking-consent__check:checked) .booking-consent__icon--unchecked {
    display: none;
}
.booking-consent:has(.booking-consent__check:checked) .booking-consent__icon--checked {
    display: block;
}
.booking-consent__text {
    color: #3B4A46;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 22.75px;
}
.booking-consent__link {
    color: #006B5E;
    text-decoration: underline;
}

/* ── Thank You Popup ── */
.booking-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.booking-popup.is-open {
    display: flex;
}

.booking-popup__card {
    background: white;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 420px;
    width: 90%;
    animation: popup-in 0.3s ease;
}
@keyframes popup-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.booking-popup__icon {
    margin-bottom: 24px;
}

.booking-popup__title {
    color: #191C1D;
    font-size: 28px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    margin: 0 0 12px;
}

.booking-popup__text {
    color: #3B4A46;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 8px;
}

.booking-popup__sub {
    color: #006B5E;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .onboard-main--readiness {
        padding: 40px 16px 80px;
    }
    .readiness-timeline-grid {
        gap: 12px;
    }
    .readiness-card--timeline {
        padding: 20px 24px;
        flex: 1 1 calc(33.33% - 12px);
        min-width: 100px;
    }
    .readiness-card--support {
        padding: 24px;
    }
    .readiness-support-grid {
        grid-template-columns: 1fr;
    }
    .readiness-card__label {
        font-size: 14px;
    }
    .onboard-main--budget {
        padding: 40px 16px 80px;
    }
    .budget-card {
        padding: 20px;
    }
    .budget-card__usd {
        font-size: 18px;
        line-height: 24px;
    }
    .budget-card__idr {
        font-size: 13px;
        line-height: 20px;
    }
    .budget-list {
        max-width: 100%;
    }
    .onboard-main--booking {
        padding: 40px 16px 80px;
    }
    .booking-card {
        padding: 24px;
    }
    .booking-contact-row {
        flex-direction: column;
        gap: 12px;
    }
    .booking-nda {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

/* ── Onboarding responsive scaling (design base: 1440px) ── */
@media (max-width: 1200px) {
    .onboard-top__inner {
        padding: 20px 24px;
    }
    .onboard-top__steps {
        gap: 4px;
    }
    .onboard-step__label {
        font-size: 9px;
    }
    .onboard-step__num {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .onboard-main {
        padding-left: 24px;
        padding-right: 24px;
    }
    .onboard-main__title {
        font-size: 36px;
        line-height: 44px;
    }
    .onboard-main__sub {
        font-size: 14px;
        line-height: 20px;
    }
    .onboard-bottom__inner {
        padding: 16px 24px;
    }
}

@media (max-width: 900px) {
    .onboard-top__inner {
        padding: 16px 16px;
        gap: 16px;
    }
    .onboard-top__logo {
        width: 34px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .onboard-top__logo img {
        height: 26px;
        max-width: none;
    }
    .onboard-top__steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px;
    }
    .onboard-top__steps::-webkit-scrollbar { display: none; }
    .onboard-step {
        flex-shrink: 0;
    }
    .onboard-step__label {
        display: none;
    }
    .onboard-step__connector {
        width: 16px;
    }
    .onboard-main__title {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }
    .onboard-main__sub {
        font-size: 13px;
        line-height: 18px;
    }
    .onboard-bottom__back,
    .onboard-bottom__next {
        padding: 14px 32px;
        font-size: 11px;
    }
}

/* =============================================
   Site-wide responsive overrides
   ============================================= */

/* ── 1200px: compact desktop ── */
@media (max-width: 1200px) {
    .container {
        padding-inline: clamp(1rem, 3vw, 2rem);
    }

    /* Hero text */
    .hero__title,
    .service-hero__title,
    .insights-hero__title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    .hero__subtitle {
        font-size: 0.9375rem !important;
    }

    /* Service page */
    .service-hero {
        min-height: auto;
        padding-bottom: 3rem;
    }
    .service-hero__inner {
        padding: 2rem;
    }
    .service-carousel__track {
        gap: 24px;
    }

    /* Industries */
    .industries__tab {
        font-size: 0.85rem;
        padding: 10px 16px;
    }

    /* Insights */
    .insights-hero__card {
        flex-direction: column;
    }
    .insights-hero__image {
        width: 100%;
        max-height: 300px;
    }

    /* About */
    .about-story__inner {
        gap: 2rem;
    }
}

/* ── 1024px: tablet landscape ── */
@media (max-width: 1024px) {
    .hero {
        min-height: auto;
        max-height: none;
        padding-top: calc(var(--nav-h) + 1.5rem);
        padding-bottom: 2.5rem;
    }

    /* Grids → 2 columns */
    .about-values__grid,
    .about-values__list,
    .industries__specializations-grid,
    .specializations__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .insights-cards,
    .playbooks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Two-column splits → stack */
    .about-vm__split,
    .about-faq__inner,
    .about-story__inner,
    .insights-hero__card,
    .saas-layout {
        flex-direction: column !important;
    }
    .about-story__image,
    .about-story__text,
    .about-story__sidebar,
    .about-story__content,
    .about-faq__left,
    .about-faq__right {
        width: 100% !important;
        flex: auto !important;
    }

    /* Insights section head → wrap */
    .insights-section__head {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* How-we-work pyramid → stack */
    .how-we-work__pyramid {
        flex-direction: column;
        align-items: center;
    }
    .how-we-work__row--4,
    .how-we-work__row--3 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .hw-step {
        flex: 1 1 200px;
        max-width: 280px;
    }

    /* Service carousel */
    .service-carousel__card {
        min-width: 320px;
    }

    /* Newsletter form → stack */
    .newsletter-cta__form {
        flex-direction: column;
        gap: 0.75rem;
    }
    .newsletter-cta__input,
    .newsletter-cta__btn {
        width: 100%;
    }
}

/* ── 768px: tablet portrait ── */
@media (max-width: 768px) {
    /* Global typography (exclude onboarding which has its own rules) */
    main h1,
    .hero h1,
    .about-hero h1,
    .service-hero h1,
    .insights-hero h1,
    .how-we-work h1,
    .specializations h1,
    .about-vm h1,
    .about-values h1,
    .about-faq h1,
    .about-story h1,
    .newsletter-cta h1,
    .saas-layout h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    main h2,
    .site-footer h2,
    .about-hero h2,
    .about-vm h2,
    .about-values h2,
    .about-faq h2,
    .how-we-work h2,
    .industries h2,
    .insights h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    main h3 { font-size: 1.2rem !important; }

    /* Hero sections */
    .hero {
        padding: calc(var(--nav-h) + 1rem) 1rem 2rem;
        text-align: center;
    }
    .hero__title,
    .service-hero__title,
    .insights-hero__title {
        font-size: 1.75rem !important;
    }
    .hero__subtitle,
    .hero__sub,
    .service-hero__sub,
    .insights-hero__sub {
        font-size: 0.875rem !important;
    }

    /* All grids → single column */
    .about-values__grid,
    .about-values__list,
    .industries__specializations-grid,
    .specializations__grid,
    .insights-cards,
    .saas-list,
    .playbooks-grid {
        grid-template-columns: 1fr !important;
    }

    /* Spec cards → full width internal stack */
    .spec-card__body {
        flex-direction: column;
        gap: 1rem;
    }
    .spec-card__pain,
    .spec-card__workflow {
        width: 100%;
    }

    /* How-we-work → full stack */
    .how-we-work__row--4,
    .how-we-work__row--3 {
        flex-direction: column;
        align-items: center;
    }
    .hw-step {
        max-width: 100%;
        flex: auto;
    }
    .hw-step__line {
        display: none;
    }

    /* About facts → wrap */
    .about-story__facts {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .about-fact {
        flex: 1 1 45%;
        min-width: 140px;
    }

    /* SaaS layout */
    .saas-list__item {
        flex-direction: column;
    }
    .saas-featured__overlay {
        padding: 1.5rem;
    }
    .saas-featured__title {
        font-size: 1.25rem !important;
    }

    /* Carousel */
    .service-carousel__head {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    /* Service page */
    .service-hero {
        min-height: auto !important;
    }
    .service-hero__inner {
        padding: 1.5rem;
    }
    .service-carousel__card {
        min-width: 280px;
    }

    /* Industries tabs */
    .industries__tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .industries__tab {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    /* About page */
    .about-hero,
    .about-story,
    .about-vision,
    .about-values,
    .about-faq {
        padding: 2rem 1rem;
    }
    .about-story__inner {
        gap: 1.5rem;
    }

    /* Insights */
    .insights-hero__card {
        padding: 1.5rem;
    }
    .insights-hero__image {
        max-height: 200px;
    }
    .insights-hero__btn {
        width: 100%;
        text-align: center;
    }

    /* Global padding */
    section,
    .service-carousel,
    .industries__how-we-work,
    .insights-newsletter {
        padding: 2rem 1rem;
    }

    /* Footer */
    .site-footer {
        padding: 3rem 0 2rem;
    }
    .site-footer__bar {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    .site-footer__legal {
        gap: 1rem;
    }
    .site-footer h4 {
        font-size: 1rem;
    }
    .site-footer ul a {
        font-size: 0.875rem;
    }
}

/* ── 480px: mobile ── */
@media (max-width: 480px) {
    .container {
        padding-inline: 1rem;
    }

    .site-nav__inner {
        padding: 0 1rem;
    }
    .site-nav__logo {
        width: 34px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .site-nav__logo img {
        height: 26px;
        max-width: none;
        width: auto;
    }

    .btn-consult {
        font-size: 0.7rem;
        padding: 6px 16px;
    }
    .lang-switch {
        font-size: 0.75rem;
        padding: 5px;
    }

    /* Service cards */
    .service-carousel__card {
        min-width: 260px;
    }

    /* Industries tabs */
    .industries__tab {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    /* Hero */
    .hero__title,
    .service-hero__title {
        font-size: 1.5rem !important;
    }

    /* Footer */
    .site-footer {
        padding: 2rem 0 1.5rem;
    }
    .site-footer__grid {
        gap: 2rem;
    }
}

/* Spacer for fixed nav */
main { padding-top: 0; }