/* Start a project. Uses the theme's tokens where they exist and plain values where they do not. */

.hp-journey { --c-ink: var(--wp--preset--color--ink, #1D1D1F); --c-body: var(--wp--preset--color--body, #3A3A3E); --c-quiet: var(--wp--preset--color--quiet, #6E6E73); --c-line: var(--wp--preset--color--line, #E8E8ED); --c-tile: var(--wp--preset--color--tile, #F5F5F7); --c-surface: var(--wp--preset--color--surface, #fff); --c-brand: var(--wp--preset--color--brand-deep, #5B46C7); --c-soft: var(--wp--preset--color--brand-soft, #EDE9FC); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); max-width: 62rem; margin: 0 auto; }
.hp-journey__card { animation: hp-journey-in 360ms var(--ease) both; }
@keyframes hp-journey-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-journey__card { animation: none; } }

.hp-journey__head { margin-bottom: 2rem; }
.hp-journey__progress { height: 3px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.hp-journey__progress span { display: block; height: 100%; background: var(--c-ink); border-radius: 999px; transition: width 400ms var(--ease); }
.hp-journey__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; font-size: 0.85rem; color: var(--c-quiet); }
.hp-journey__back { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--c-ink); cursor: pointer; }
.hp-journey__back:hover { color: var(--c-brand); }

.hp-journey__q { text-align: center; margin-bottom: 2rem; }
.hp-journey__question { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--c-ink); margin: 0; outline: none; }
.hp-journey__hint { color: var(--c-quiet); font-size: 1.05rem; max-width: 36rem; margin: 0.75rem auto 0; }
.hp-journey__hint a { color: var(--c-brand); text-decoration: none; font-weight: 500; }

.hp-journey__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.hp-journey__tiles:has(> :nth-child(2):last-child), .hp-journey__tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .hp-journey__tiles { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .hp-journey__tiles { grid-template-columns: 1fr !important; } }
.hp-journey__tile { display: grid; gap: 0.3rem; align-content: start; text-align: left; cursor: pointer; font: inherit; background: var(--c-tile); color: var(--c-ink); border: 2px solid transparent; border-radius: 20px; padding: 1.25rem; min-height: 8rem; transition: transform 200ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease); }
.hp-journey__tile:hover { transform: translateY(-2px); background: #EFEFF3; }
.hp-journey__tile:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.hp-journey__tile.is-chosen { border-color: var(--c-ink); background: var(--c-surface); }
.hp-journey__swatch { display: block; width: 2.75rem; aspect-ratio: 1; border-radius: 12px; margin-bottom: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.hp-journey__tile-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.hp-journey__tile-text { font-size: 0.92rem; color: var(--c-quiet); line-height: 1.45; }

.hp-journey__form { max-width: 34rem; margin: 0 auto; display: grid; gap: 1rem; }
.hp-journey__contact { max-width: 40rem; }
.hp-journey__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .hp-journey__row { grid-template-columns: 1fr; } }
.hp-journey__field { display: grid; gap: 0.35rem; }
.hp-journey__label { font-size: 0.85rem; font-weight: 500; color: var(--c-ink); }
.hp-journey__field.is-required .hp-journey__label::after { content: " *"; color: var(--c-quiet); }
.hp-journey__input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.85rem 1rem; }
.hp-journey__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
textarea.hp-journey__input { min-height: 7rem; resize: vertical; }
input[type=number].hp-journey__input { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; padding: 1rem; }
.hp-journey__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-journey__error { color: #C54E60; font-size: 0.9rem; min-height: 1.2em; margin: 0; text-align: center; }
.hp-journey__button { display: inline-block; font: inherit; font-size: 1rem; font-weight: 500; color: #fff; background: var(--c-ink); border: 0; border-radius: 999px; padding: 0.85rem 1.6rem; cursor: pointer; text-decoration: none; text-align: center; justify-self: center; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.hp-journey__button:hover { background: var(--c-brand); color: #fff; transform: translateY(-1px); text-decoration: none; }
.hp-journey__button:disabled { opacity: 0.5; transform: none; }
.hp-journey__link { font-weight: 500; color: var(--c-brand); text-decoration: none; }
.hp-journey__link:hover { text-decoration: underline; }

.hp-journey__summary { text-align: center; }
.hp-journey__choices { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; text-align: left; max-width: 34rem; margin: 2rem auto; background: var(--c-tile); border-radius: 20px; padding: 1.25rem 1.5rem; }
.hp-journey__choices dt { color: var(--c-quiet); }
.hp-journey__choices dd { margin: 0; color: var(--c-ink); font-weight: 500; }
.hp-journey__change { background: none; border: 0; padding: 0; margin-left: 0.4rem; font: inherit; font-size: 0.85rem; font-weight: 500; color: var(--c-brand); cursor: pointer; }
.hp-journey__price { margin: 1.5rem 0; }
.hp-journey__total { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--c-ink); }
.hp-journey__each { color: var(--c-quiet); font-size: 1.05rem; }
.hp-journey__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; margin-top: 1rem; }
.hp-journey__card--done { text-align: center; }
.hp-journey__tile .hp-journey__swatch { width: 2.75rem; max-width: none; margin: 0 0 0.5rem; }