/* SIMORA — How it works page */
.how-page{padding:12px 0 26px;background:#fff}
.how-page>.shell{width:min(var(--shell),calc(100% - 48px))}
.how-page__head{text-align:center;margin-bottom:18px}
.how-page__head h2{margin:0;color:#071642;font-size:31px;line-height:1.08;font-weight:900;letter-spacing:-.025em}
.how-page__head p{margin:6px 0 0;color:#7b8dac;font-size:13px;line-height:1.45}
.how-card{min-width:0;background:#fff;border:1px solid #dce9f7;border-radius:18px}

.how-page__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:14px}
.how-step{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:18px;min-height:140px;padding:20px 22px}
.how-step:first-child{grid-template-columns:132px minmax(0,1fr)}
.how-step__number{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#0b73f6;color:#fff;font-size:13px;font-weight:900;line-height:1}
.how-step__art{display:flex;align-items:center;justify-content:center;width:108px;height:102px;overflow:hidden}
.how-step:first-child .how-step__art{width:122px;height:108px}
.how-step__art img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.how-step:first-child .how-step__art img{width:122px;height:108px;max-width:none;max-height:none}
.how-step__copy{min-width:0;text-align:start}
.how-step__copy h3{margin:0 0 8px;color:#071642;font-size:17px;line-height:1.18;font-weight:900;letter-spacing:-.015em}
.how-step__copy p{margin:0;color:#617595;font-size:12px;line-height:1.58;overflow-wrap:anywhere}

.how-page__benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.how-benefit{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:8px 14px;border-radius:12px}
.how-benefit__art{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
.how-benefit__art img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.how-benefit__copy{min-width:0;text-align:start}
.how-benefit__copy strong{display:block;color:#071642;font-size:12px;line-height:1.2;font-weight:900;white-space:nowrap}
.how-benefit__copy span{display:block;margin-top:2px;color:#617595;font-size:9.5px;line-height:1.3;white-space:nowrap}

.how-page__lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch}
.how-panel{min-height:178px;padding:17px 18px;border-radius:15px}
.how-needs{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:18px}
.how-needs__art{display:flex;align-items:center;justify-content:center;height:136px}
.how-needs__art img{display:block;width:155px;height:auto;object-fit:contain}
.how-needs__copy{min-width:0;text-align:start}
.how-needs__copy h3,.how-faq h3{margin:0 0 12px;color:#071642;font-size:18px;line-height:1.15;font-weight:900;text-align:start}
.how-needs__copy ul{list-style:none;margin:0;padding:0}
.how-needs__copy li{position:relative;padding-inline-start:27px;color:#22345d;font-size:11.5px;line-height:1.45;text-align:start}
.how-needs__copy li+li{margin-top:9px}
.how-needs__copy li::before{content:'✓';position:absolute;inset-inline-start:0;inset-block-start:-1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#0b73f6;color:#fff;font-size:11px;font-weight:900}

.how-faq{display:flex;flex-direction:column;padding:14px 18px}
.how-faq h3{margin-bottom:9px}
.how-faq__list{display:grid;gap:6px;align-content:start}
.how-faq__list details{min-width:0;padding:0 11px;border:1px solid #dce9f7;border-radius:7px;background:#fff}
.how-faq__list summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;list-style:none;cursor:pointer;color:#071642;font-size:10.5px;line-height:1.3;font-weight:900;text-align:start}
.how-faq__list summary::-webkit-details-marker{display:none}
.how-faq__list p{margin:0;padding:0 0 9px;color:#617595;font-size:9.5px;line-height:1.45;text-align:start;overflow-wrap:anywhere}
.how-faq__chevron{flex:0 0 auto;color:#0b73f6;font-size:14px;transition:transform .15s ease}
.how-faq__list details[open] .how-faq__chevron{transform:rotate(180deg)}

.how-cta{display:grid;grid-template-columns:186px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:84px;padding:8px 18px 8px 16px;border:1px solid #d7e7f8;border-radius:14px;background:linear-gradient(90deg,#f3f9ff 0%,#ecf6ff 100%);overflow:hidden}
.how-cta__art{display:flex;align-items:flex-end;justify-content:flex-start;width:176px;height:76px;overflow:hidden}
.how-cta__art img{display:block;width:176px;height:76px;max-width:none;object-fit:cover;object-position:left bottom}
.how-cta__copy{min-width:0;text-align:start}
.how-cta__copy h3{margin:0 0 2px;color:#071642;font-size:16px;line-height:1.2;font-weight:900}
.how-cta__copy p{margin:0;color:#617595;font-size:10.5px;line-height:1.35;overflow-wrap:anywhere}
.how-cta__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.how-cta__actions .button{min-width:152px;min-height:42px;padding:0 19px;border-radius:8px;font-size:10.5px;justify-content:center}

/* Direction is inherited from <html dir>. Logical properties mirror cards automatically. */
[dir=rtl] .how-cta{background:linear-gradient(270deg,#f3f9ff 0%,#ecf6ff 100%)}
[dir=rtl] .how-cta__art img{object-position:right bottom}

@media(max-width:1000px){
  .how-page__steps{grid-template-columns:1fr}
  .how-page__benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-page__lower{grid-template-columns:1fr}
  .how-panel{min-height:0}
  .how-cta{grid-template-columns:166px minmax(0,1fr);padding:8px 14px}
  .how-cta__art{width:156px;height:68px}
  .how-cta__art img{width:156px;height:68px}
  .how-cta__actions{grid-column:1/-1;justify-content:flex-end}
  [dir=rtl] .how-cta__actions{justify-content:flex-start}
}

@media(max-width:650px){
  .how-page>.shell{width:calc(100% - 24px)}
  .how-page__head h2{font-size:27px}
  .how-step,.how-step:first-child{grid-template-columns:92px minmax(0,1fr);padding:18px 14px;gap:14px}
  .how-step__art,.how-step:first-child .how-step__art{width:84px;height:82px}
  .how-step:first-child .how-step__art img{width:84px;height:82px}
  .how-step__copy h3{font-size:15px}
  .how-step__copy p{font-size:11px}
  .how-page__benefits{grid-template-columns:1fr}
  .how-benefit__copy strong,.how-benefit__copy span{white-space:normal}
  .how-needs{grid-template-columns:1fr}
  .how-needs__art{justify-content:flex-start}
  [dir=rtl] .how-needs__art{justify-content:flex-end}
  .how-cta{grid-template-columns:1fr;padding:14px;gap:10px}
  .how-cta__art{width:176px;height:76px;justify-self:start}
  .how-cta__art img{width:176px;height:76px}
  .how-cta__actions{width:100%;display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
  .how-cta__actions .button{min-width:0;width:100%}
}