.cob-wizard { --cob-bg: #FDF8F4;
--cob-surface: #fbf8f2;
--cob-surface-2: #ffffff;
--cob-gold: #c9955e;
--cob-gold-dark: #a87f34;
--cob-gold-soft: rgba(180, 134, 60, 0.14);
--cob-line: rgba(180, 134, 60, 0.28);
--cob-line-soft: rgba(120, 96, 60, 0.16);
--cob-text: #3b2f25;
--cob-text-soft: #6f6152;
--cob-text-mut: #9a8c7b;
--cob-shadow: 0 18px 50px -30px rgba(90, 66, 30, 0.55);
--cob-radius: 16px;
--cob-radius-sm: 12px;
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding: 22px;
background: var(--cob-bg);
color: var(--cob-text);
font-family: var(--cob-font-sans);
font-size: 16px;
line-height: 1.55;
border-radius: 22px;
} .cob-wizard--step1 {
position: relative;
isolation: isolate;
background-image: var(--cob-hero-image);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
min-height: min(980px, 92vh);
display: flex;
flex-direction: column;
} .cob-wizard--step1::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(253, 248, 244, 0.96) 0%,
rgba(253, 248, 244, 0.88) 26%,
rgba(253, 248, 244, 0.55) 52%,
rgba(253, 248, 244, 0.72) 78%,
rgba(253, 248, 244, 0.94) 100%
);
}
.cob-wizard--step1 .cob-footer {
margin-top: auto;
}
.cob-wizard *,
.cob-wizard *::before,
.cob-wizard *::after {
box-sizing: border-box;
}
.cob-wizard[x-cloak],
.cob-wizard [x-cloak] {
display: none !important;
} .cob-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 26px;
}
.cob-back,
.cob-tolink {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
padding: 6px 4px;
cursor: pointer;
font-family: inherit;
font-size: 0.9rem;
color: var(--cob-text)!important;
text-decoration: none;
transition: color 0.18s ease;
}
.cob-tolink {
color: var(--cob-text-soft);
margin-left: auto;
}
.cob-back:hover,
.cob-tolink:hover {
color: var(--cob-gold);
}
.cob-back svg,
.cob-tolink svg {
width: 16px;
height: 16px;
}
.cob-brand {
width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.cob-brand img{
width: 170px;
height: auto;
}
.cob-brand__mark {
width: 46px;
height: auto;
margin: 0 auto 6px;
color: var(--cob-gold);
display: block;
}
.cob-brand__name {
font-family: var(--cob-font-serif);
font-size: 1.9rem;
letter-spacing: 0.22em;
font-weight: 500;
line-height: 1;
margin: 0;
}
.cob-brand__name em {
display: block;
font-style: italic;
font-size: 1.15rem;
letter-spacing: 0.06em;
margin-top: 2px;
}
.cob-brand__tag {
color: var(--cob-gold);
font-size: 0.74rem;
letter-spacing: 0.14em;
margin-top: 6px;
}
.cob-brand__rule {
width: 34px;
height: 1px;
background: var(--cob-gold);
margin: 12px auto 0;
opacity: 0.7;
} .cob-pill {
display: inline-block;
margin: 16px auto 0;
padding: 5px 14px;
border: 1px solid var(--cob-line);
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--cob-text-soft);
background: var(--cob-surface);
}
.cob-center {
text-align: center;
} .cob-h2 {
color:black!important;
font-weight: 400!important;
padding: 0!important;
margin: 0!important;
}
.cob-sub {
color: black;
max-width: 330px;
margin: 14px auto;
}
.cob-hrule {
width: 42px;
height: 1px;
background: var(--cob-gold);
margin: 16px auto;
opacity: 0.8;
} .cob-step {
padding: 8px 0 4px;
} .cob-hero {
margin-top: 4px;
text-align: center;
}
.cob-hero__inner {
max-width: 460px;
margin: 0 auto;
text-align: center;
} .cob-wizard--step1 .cob-hero__inner {
padding: 30px 26px 34px;
border-radius: 20px;
background: rgba(253, 248, 244, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 24px 60px -40px rgba(90, 66, 30, 0.5);
}
.cob-hero__photo img {
display: block;
width: 100%;
height: auto;
} .cob-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
padding: 16px 30px;
border-radius: var(--cob-radius-sm);
transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease;
text-decoration: none;
}
.cob-btn svg {
width: 20px;
height: 20px;
}
.cob-btn--primary {
background: var(--cob-gold);
color: #fff;
width: 280px;
}
.cob-btn--primary[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.cob-btn--ghost {
background: transparent;
color: var(--cob-gold);
border: 1px solid var(--cob-line);
}
.cob-btn--ghost:hover {
background: var(--cob-gold-soft);
}
.cob-btn--block {
width: 100%;
} .cob-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 24px;
}
.cob-tile {
position: relative;
border: 1px solid var(--cob-line-soft);
background: var(--cob-surface);
border-radius: var(--cob-radius-sm);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 14px 20px;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cob-tile:hover {
transform: translateY(-3px);
box-shadow: var(--cob-shadow);
border-color: var(--cob-line);
}
.cob-tile__band {
position: absolute;
inset: 0 0 auto 0;
height: 110px;
background: linear-gradient(135deg, #f0e6d3, #d9bd90);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.cob-tile__ico {
position: relative;
z-index: 1;
width: 54px;
height: 54px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--cob-surface-2);
display: grid;
place-items: center;
box-shadow: 0 6px 16px -8px rgba(90, 66, 30, 0.5);
color: var(--cob-gold);
}
.cob-tile__ico svg {
width: 24px;
height: 24px;
}
.cob-tile__title {
display: block;
position: relative;
z-index: 1;
font-family: var(--cob-font-serif);
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 6px;
}
.cob-tile__desc {
display: block;
position: relative;
z-index: 1;
font-size: 0.82rem;
color: var(--cob-text-soft);
line-height: 1.4;
max-width:200px;
} .cob-tile--framed {
padding: 21px 0 20px;
}
.cob-tile--framed .cob-tile__band {
height: 120px;
}
.cob-tile--framed .cob-tile__ico {
width: 76px;
height: 76px;
margin-bottom: 0;
background: #fff;
color: var(--tile-accent);
box-shadow: 0 8px 20px -10px rgba(60, 45, 20, 0.55);
}
.cob-tile--framed .cob-tile__ico svg {
width: 40px;
height: 40px;
}
.cob-tile--framed .cob-tile__title {
width: 100%;
margin: 22px 0 12px;
padding: 9px 14px;
color: #fff;
background: var(--tile-accent);
font-size: 1.08rem;
}
.cob-tile--framed .cob-tile__desc {
padding: 0 16px;
} .cob-prompt {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
text-align: left;
margin-top: 16px;
padding: 20px 22px;
border: 1px solid var(--cob-line-soft);
border-radius: var(--cob-radius-sm);
background: var(--cob-surface);
cursor: pointer;
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.cob-prompt:hover {
box-shadow: var(--cob-shadow);
border-color: var(--cob-line);
}
.cob-prompt__ico {
flex: 0 0 auto;
color: var(--cob-gold);
}
.cob-prompt__ico svg {
width: 30px;
height: 30px;
}
.cob-prompt__title {
display: block;
font-family: var(--cob-font-serif);
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 2px;
}
.cob-prompt__desc {
display: block;
font-size: 0.85rem;
color: var(--cob-text-soft);
}
.cob-prompt__arrow {
margin-left: auto;
color: var(--cob-gold);
} .cob-concern-label {
color: var(--cob-gold);
font-family: var(--cob-font-serif);
font-size: 1.8rem;
text-align: center;
margin: 16px 0 4px;
font-weight: 300;
}
.cob-concern-label__text {
text-transform: uppercase;
}
.cob-experts {
display: grid;
grid-template-columns: repeat(3, 300px);
justify-content: center;
gap: 16px;
margin-top: 22px;
}
.cob-expert {
border: 1px solid var(--cob-line-soft);
border-radius: var(--cob-radius-sm);
background: var(--cob-surface);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cob-expert__photo {
min-height: 300px;
background: linear-gradient(160deg, #e9ddc9, #cdb489);
display: grid;
place-items: center;
color: rgba(59, 47, 37, 0.55);
font-family: var(--cob-font-serif);
font-size: 2.4rem;
letter-spacing: 0.05em;
}
.cob-expert__photo img {
width: 100%;
height: 100%;
min-height: 300px;
max-height: 300px;
object-fit: cover;
object-position: top;
display: block;
}
.cob-expert__body {
padding: 16px 16px 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.cob-expert__name {
font-family: var(--cob-font-serif);
font-size: 30px!important;
font-weight: 600;
line-height: 1.15;
text-align: left;
margin: 0;
color: #3b2f25!important;
}
.cob-expert__role {
font-size: 0.82rem;
color: var(--cob-text-soft);
margin: 6px 0 12px;
text-align: left;
}
.cob-expert__reco {
color: var(--cob-gold);
font-size: 0.82rem;
margin: 4px 0 8px;
text-align: left;
}
.cob-expert__list {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: grid;
gap: 7px;
}
.cob-expert__list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
color: var(--cob-text);
}
.cob-expert__list svg {
width: 16px;
height: 16px;
color: var(--cob-gold);
flex: 0 0 auto;
}
.cob-expert__cta {
margin-top: auto;
width: 100%;
padding: 11px 14px;
border: 1px solid var(--cob-line);
border-radius: 10px;
background: transparent;
color: var(--cob-gold);
font-family: inherit;
font-size: 0.92rem;
cursor: pointer;
transition: background 0.18s ease;
}
.cob-expert__cta:hover {
background: var(--cob-gold-soft);
}
.cob-changelink {
margin: 22px auto 0;
max-width: 420px;
} .cob-form {
max-width: 520px;
margin: 26px auto 0;
display: grid;
gap: 18px;
text-align: left;
}
.cob-field label {
display: block;
font-size: 0.92rem;
margin-bottom: 7px;
color: var(--cob-text);
}
.cob-field input,
.cob-field textarea {
width: 100%;
font-family: inherit;
font-size: 0.95rem;
color: var(--cob-text);
padding: 13px 15px;
border: 1px solid var(--cob-line-soft);
border-radius: var(--cob-radius-sm);
background: var(--cob-surface);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.cob-field input::placeholder,
.cob-field textarea::placeholder {
color: var(--cob-text-mut);
}
.cob-field input:focus,
.cob-field textarea:focus {
outline: none;
border-color: var(--cob-gold);
box-shadow: 0 0 0 3px var(--cob-gold-soft);
}
.cob-field textarea {
min-height: 118px;
resize: vertical;
}
.cob-field--invalid input,
.cob-field--invalid textarea {
border-color: #c0563f;
box-shadow: 0 0 0 3px rgba(192, 86, 63, 0.14);
}
.cob-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.86rem;
color: var(--cob-text-soft);
}
.cob-check input {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--cob-gold);
flex: 0 0 auto;
}
.cob-check a {
color: var(--cob-gold);
}
.cob-formnote {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
font-size: 0.8rem;
color: var(--cob-text-mut);
margin-top: 4px;
}
.cob-formnote svg {
width: 14px;
height: 14px;
}
.cob-error {
color: #b0472f;
font-size: 0.85rem;
text-align: center;
} .cob-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
} .cob-check-ring {
width: 116px;
height: 116px;
border-radius: 50%;
border: 2px solid var(--cob-gold);
display: grid;
place-items: center;
margin: 22px auto 4px;
color: var(--cob-gold);
}
.cob-check-ring svg {
width: 52px;
height: 52px;
}
.cob-summary {
max-width: 430px;
margin: 26px auto 0;
border: 1px solid var(--cob-line-soft);
border-radius: var(--cob-radius);
background: var(--cob-surface);
padding: 22px 26px;
}
.cob-summary__title {
font-family: var(--cob-font-serif);
font-size: 1.3rem;
text-align: center;
margin: 0 0 14px;
}
.cob-summary__row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 0;
}
.cob-summary__row + .cob-summary__row {
border-top: 1px solid var(--cob-line-soft);
}
.cob-summary__ico {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--cob-line);
display: grid;
place-items: center;
color: var(--cob-gold);
flex: 0 0 auto;
}
.cob-summary__ico svg {
width: 20px;
height: 20px;
}
.cob-summary__k {
display: block;
text-align: left;
color: var(--cob-gold);
font-size: 0.78rem;
}
.cob-summary__v {
display: block;
font-family: var(--cob-font-serif);
font-size: 1.15rem;
} .cob-footer {
margin-top: 34px;
padding-top: 22px;
}
.cob-badges {
display: flex!important;
flex-wrap: nowrap;
flex-flow: row;
justify-content: space-between;
}
.cob-badge {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1 1 25%;
padding: 0 18px;
}
.cob-badge + .cob-badge::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 56px;
background: var(--cob-gold);
transform: translateY(-50%);
}
.cob-badge__ico {
color: var(--cob-gold);
flex: 0 0 auto;
}
.cob-badge__ico svg {
width: 50px;
height: 50px;;
}
.cob-badge__txt {
font-size: 16px;
text-transform: uppercase;
color: black;
}
.cob-monogram {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 22px;
color: var(--cob-gold);
}
.cob-monogram::before,
.cob-monogram::after {
content: "";
height: 2px;
width: 90px;
background: var(--cob-line);
}
.cob-monogram span {
font-family: var(--cob-font-serif);
font-size: 1.5rem;
letter-spacing: 0.04em;
} .cob-fade-enter-active {
transition: opacity 0.35s ease, transform 0.35s ease;
}
.cob-fade-enter-start {
opacity: 0;
transform: translateY(8px);
}
.cob-fade-enter-end {
opacity: 1;
transform: translateY(0);
} @media (max-width: 720px) {
.cob-wizard {
padding: 14px;
border-radius: 0;
font-size: 15px;
overflow: hidden;
}
.cob-wizard--step1 {
min-height: 100svh;
background-position: center bottom;
}
.cob-topbar {
min-height: 44px;
align-items: flex-start;
}
.cob-back,
.cob-tolink {
min-height: 44px;
padding: 10px 4px;
font-size: 0.84rem;
}
.cob-brand img {
width: min(150px, 48vw);
}
.cob-step {
padding-top: 4px;
}
.cob-pill {
margin-top: 10px;
}
.cob-h2 {
font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
line-height: 1.12 !important;
}
.cob-sub {
max-width: 100%;
margin: 12px auto;
line-height: 1.5;
}
.cob-hero__inner {
width: 100%;
padding-top: 3vh;
}
.cob-wizard--step1 .cob-hero__inner {
padding: 22px 16px 26px;
border-radius: 16px;
}
.cob-btn {
min-height: 50px;
padding: 13px 18px;
}
.cob-btn--primary {
width: min(100%, 320px);
}
.cob-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 18px;
}
.cob-tile {
min-height: 250px;
padding: 74px 10px 16px;
}
.cob-tile__band {
height: 100px;
}
.cob-tile__ico {
width: 50px;
height: 50px;
margin-bottom: 11px;
}
.cob-tile__title {
font-size: 1rem;
overflow-wrap: anywhere;
}
.cob-tile__desc {
font-size: 0.78rem;
}
.cob-tile--framed {
padding: 18px 0 16px;
}
.cob-tile--framed .cob-tile__ico {
width: 68px;
height: 68px;
}
.cob-tile--framed .cob-tile__title {
margin: 18px 0 10px;
padding: 8px;
font-size: 0.96rem;
}
.cob-prompt {
align-items: flex-start;
gap: 12px;
padding: 16px 14px;
}
.cob-prompt__title {
font-size: 1.05rem;
}
.cob-prompt__arrow {
align-self: center;
}
.cob-concern-label {
font-size: 1.35rem;
line-height: 1.3;
margin-top: 12px;
}
.cob-experts {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 18px;
}
.cob-expert {
width: 100%;
max-width: 420px;
margin-inline: auto;
}
.cob-expert__photo,
.cob-expert__photo img {
min-height: 0;
height: auto;
max-height: none;
aspect-ratio: 1 / 1;
}
.cob-expert__name {
font-size: 1.65rem !important;
overflow-wrap: anywhere;
}
.cob-expert__cta {
min-height: 46px;
}
.cob-form {
gap: 15px;
margin-top: 20px;
}
.cob-field input,
.cob-field textarea {
min-height: 48px;
font-size: 16px;
}
.cob-check {
line-height: 1.45;
}
.cob-check input {
width: 20px;
height: 20px;
}
.cob-check-ring {
width: 92px;
height: 92px;
}
.cob-check-ring svg {
width: 42px;
height: 42px;
}
.cob-summary {
width: 100%;
margin-top: 20px;
padding: 18px;
}
.cob-summary__row {
gap: 12px;
}
.cob-summary__v {
overflow-wrap: anywhere;
}
.cob-footer {
margin-top: 28px;
padding-top: 18px;
}
.cob-badge {
flex: 0 0 50%;
justify-content: flex-start;
gap: 8px;
min-height: 68px;
padding: 8px;
}
.cob-badges {
flex-wrap: wrap;
}
.cob-badge__ico svg {
width: 38px;
height: 38px;
}
.cob-badge__txt {
font-size: 0.72rem;
line-height: 1.35;
}
.cob-badge + .cob-badge::before {
display: none;
}
.cob-monogram {
margin-top: 16px;
}
.cob-monogram img {
max-width: 72px;
height: auto;
}
}
@media (max-width: 440px) {
.cob-wizard {
padding: 12px;
}
.cob-topbar {
gap: 6px;
}
.cob-grid {
grid-template-columns: 1fr;
}
.cob-tile {
min-height: 230px;
}
.cob-prompt__ico {
display: none;
}
.cob-summary__ico {
width: 38px;
height: 38px;
}
.cob-badge {
flex-basis: 50%;
}
.cob-monogram::before,
.cob-monogram::after {
width: min(50px, 16vw);
}
}
@media (max-width: 340px) {
.cob-back,
.cob-tolink {
font-size: 0.76rem;
}
.cob-badge {
flex-basis: 100%;
justify-content: center;
}
.cob-badge__txt {
min-width: 130px;
}
}