.how-page { padding:52px 0 54px; }
.how-page__inner { width:min(var(--container-max), calc(100% - (var(--page-gutter) * 2))); margin:0 auto; }
.how-page__breadcrumbs { display:flex; align-items:center; gap:10px; margin-bottom:34px; color:#75847d; font-size:12px; font-weight:600; }
.how-page__breadcrumbs a { color:inherit; text-decoration:none; }.how-page__breadcrumbs a:hover { color:var(--color-brand); }
.how-page__hero { position:relative; min-height:355px; overflow:hidden; display:flex; align-items:center; margin-bottom:42px; padding:32px 50% 32px 2px; }
.how-page__hero-copy { position:relative; z-index:1; }.how-page h1,.how-section h2,.how-contact h2 { margin:0; color:var(--color-text); font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:.95; }
.how-page h1 { font-size:clamp(46px, 4.4vw, 70px); }.how-page__hero-copy p { max-width:470px; margin:22px 0 26px; color:#50675d; font-size:16px; font-weight:500; line-height:1.55; }
.how-page__hero-image { position:absolute; right:-1%; bottom:-9%; width:58%; pointer-events:none; }.how-page__hero-image img { display:block; width:100%; }
.how-page__button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:14px 18px; border-radius:10px; background:var(--color-brand); box-shadow:0 9px 20px rgba(20,83,63,.18); color:#fff; font-size:13px; font-weight:800; text-decoration:none; transition:transform .18s ease,background .18s ease; }.how-page__button:hover { background:#0e4634; transform:translateY(-2px); }.how-page__button span { font-size:20px; font-weight:400; line-height:.8; }
.how-section { margin-top:38px; }.how-section h2,.how-contact h2 { font-size:clamp(31px, 2.6vw, 42px); }.how-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:19px 0 0; padding:0; list-style:none; }.how-steps li { position:relative; min-height:201px; padding:21px 18px; border:1px solid rgba(67,52,35,.09); border-radius:14px; background:rgba(255,253,249,.78); }.how-steps li:not(:last-child)::after { position:absolute; top:40px; left:calc(100% + 1px); z-index:2; width:12px; height:1px; background:#bba792; content:""; }.how-steps__number { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#f3e7d4; font-family:var(--font-display); font-size:24px; }.how-steps__icon { float:right; color:var(--color-brand); }.how-steps svg,.how-requirements svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65; }.how-steps h3,.how-requirements h3 { margin:27px 0 9px; color:var(--color-text); font-size:14px; font-weight:800; }.how-steps p,.how-requirements p { margin:0; color:#687970; font-size:12px; font-weight:500; line-height:1.5; }
.how-requirements { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px; }.how-requirements article { display:flex; gap:17px; min-height:128px; padding:20px; border:1px solid rgba(67,52,35,.09); border-radius:13px; background:rgba(255,253,249,.75); }.how-requirements__icon { flex:0 0 auto; display:grid; place-items:center; width:49px; height:49px; border-radius:50%; background:#f3e7d4; color:var(--color-brand); }.how-requirements__icon svg { width:27px; height:27px; }.how-requirements h3 { margin:1px 0 8px; }
.how-faq__list { margin-top:16px; border:1px solid rgba(67,52,35,.09); border-radius:13px; overflow:hidden; background:rgba(255,253,249,.78); }.how-faq details { overflow:hidden; }.how-faq details + details { border-top:1px solid rgba(67,52,35,.1); }.how-faq summary { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; cursor:pointer; color:var(--color-text); font-size:13px; font-weight:800; list-style:none; }.how-faq summary::-webkit-details-marker { display:none; }.how-faq__chevron { flex:0 0 auto; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--color-brand); border-bottom:2px solid var(--color-brand); transform:rotate(45deg) translateY(-2px); transition:transform .24s ease; }.how-faq details[open]:not(.is-closing) .how-faq__chevron { transform:rotate(225deg) translateY(-2px); }.how-faq__answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.2,.75,.3,1); }.how-faq__answer > p { min-height:0; overflow:hidden; }.how-faq details[open]:not(.is-closing) .how-faq__answer { grid-template-rows:1fr; }.how-faq details p { max-width:780px; margin:0; padding:0 20px 17px; color:#687970; font-size:12px; line-height:1.55; }
.how-contact { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:34px; padding:23px 26px; border:1px solid rgba(160,121,78,.2); border-radius:13px; background:linear-gradient(100deg, rgba(253,244,231,.92), rgba(248,234,213,.72)); }.how-contact p { margin:7px 0 0; color:#50675d; font-size:13px; font-weight:600; }.how-contact__actions { display:flex; align-items:center; gap:14px; }.how-contact__link { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:0 20px; border:1px solid rgba(20,83,63,.7); border-radius:10px; color:var(--color-brand); font-size:13px; font-weight:800; text-decoration:none; }.how-contact__link:hover { background:rgba(20,83,63,.06); }
@media (max-width:900px) { .how-page__hero { min-height:320px; padding-right:46%; }.how-page__hero-image { width:60%; }.how-steps { grid-template-columns:repeat(2, 1fr); }.how-steps li:not(:last-child)::after { display:none; }.how-requirements { grid-template-columns:1fr; }.how-requirements article { min-height:0; }.how-contact { align-items:flex-start; flex-direction:column; } }
@media (max-width:640px) { .how-page { padding:27px 0 38px; }.how-page__breadcrumbs { margin-bottom:18px; font-size:10px; }.how-page__hero { min-height:405px; align-items:flex-start; padding:10px 32% 0 0; margin-bottom:30px; }.how-page h1 { font-size:47px; }.how-page__hero-copy p { margin:14px 0 18px; font-size:12px; line-height:1.48; }.how-page__hero-image { right:-17%; bottom:0; width:110%; }.how-page__button { gap:17px; padding:12px 14px; font-size:11px; }.how-section { margin-top:30px; }.how-section h2,.how-contact h2 { font-size:31px; }.how-steps { grid-template-columns:1fr; gap:10px; margin-top:14px; }.how-steps li { min-height:0; padding:17px; }.how-steps h3 { margin-top:20px; }.how-requirements { gap:10px; margin-top:14px; }.how-requirements article { padding:16px; gap:13px; }.how-faq__list { margin-top:13px; }.how-faq summary { padding:13px 15px; font-size:11px; }.how-faq details p { padding:0 15px 14px; font-size:11px; }.how-contact { gap:18px; padding:20px; }.how-contact__actions { width:100%; flex-wrap:wrap; }.how-contact__link { min-height:43px; padding:0 15px; font-size:11px; } }
.how-page__hero{min-height:0;padding:24px 0}.how-page__hero-image{display:none}@media(max-width:900px){.how-page__hero{min-height:0;padding-right:0}}@media(max-width:640px){.how-page__hero{min-height:0;padding:18px;margin-bottom:30px;border:1px solid rgba(67,52,35,.09);border-radius:18px;background:linear-gradient(135deg,rgba(255,253,249,.96),rgba(247,239,225,.88))}}
.how-faq__answer{display:block!important;height:0;overflow:hidden;transition:height .22s cubic-bezier(.2,.72,.28,1)!important}.how-faq__answer>p{overflow:visible}.how-faq details[open]:not(.is-animating) .how-faq__answer{height:auto}

.how-faq__answer{display:block!important;height:auto;overflow:visible;transition:none!important}.how-faq details:not(.is-expanded) .how-faq__chevron{transform:rotate(45deg) translateY(-2px)}.how-faq details.is-expanded .how-faq__chevron{transform:rotate(225deg) translate(-1px,-1px)}
.how-faq summary{font-size:15px}.how-faq details p{font-size:14px}.how-faq details[open]:not(.is-expanded) .how-faq__chevron{transform:rotate(45deg) translateY(-2px)}
@media(max-width:640px){.how-faq summary{font-size:12px}.how-faq details p{font-size:12px}}