/* AdminCMS V4.0 - Premium How-To / Preparation section */
:root{
  --howto-bg:#ffffff;
  --howto-panel:#fff;
  --howto-border:#e9edf4;
  --howto-shadow:0 20px 48px rgba(16,24,40,.08);
  --howto-text:#1b2430;
  --howto-muted:#5f6b7a;
  --howto-accent:#d80a1a;
  --howto-accent-soft:#fff5f6;
}
main section#howto{padding-top:clamp(26px,3.2vw,42px)!important;padding-bottom:clamp(16px,2.1vw,28px)!important}
main section#howto>.wrap.split{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(350px,.95fr);
  gap:clamp(20px,2.2vw,28px)!important;
  align-items:stretch!important;
}
main section#howto .panel,
main section#howto .imageFrame{
  border-radius:30px!important;
  background:var(--howto-panel)!important;
  border:1px solid var(--howto-border)!important;
  box-shadow:var(--howto-shadow)!important;
  overflow:hidden;
}
main section#howto .panel{
  padding:clamp(26px,3vw,36px)!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
main section#howto .panel .eyebrow{
  align-self:flex-start;
  margin:0 0 16px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  background:var(--howto-accent-soft)!important;
  color:#b31221!important;
  border:1px solid #f2d9dd!important;
  font-size:14px!important;
  font-weight:850!important;
}
main section#howto .panel h2{
  margin:0 0 12px!important;
  color:var(--howto-text)!important;
  font-size:clamp(2rem,3.6vw,3.6rem)!important;
  line-height:1.12!important;
  letter-spacing:-.045em;
  max-width:12ch;
  text-wrap:balance;
}
main section#howto .panel>p{
  margin:0 0 18px!important;
  color:var(--howto-muted)!important;
  font-size:clamp(16px,1.2vw,19px)!important;
  line-height:1.78!important;
  font-weight:600!important;
  max-width:56ch;
}
main section#howto .featureList{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  gap:10px!important;
}
main section#howto .featureList li{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px!important;
  align-items:flex-start!important;
  padding:14px 16px!important;
  margin:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#ffffff 0,#fbfcfe 100%)!important;
  border:1px solid #e7ebf2!important;
  box-shadow:0 8px 18px rgba(17,24,39,.045)!important;
  color:#273242!important;
  font-size:16px!important;
  line-height:1.72!important;
  font-weight:700!important;
}
main section#howto .featureList .check{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,#ef2332 0,#d90416 100%)!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:900!important;
  box-shadow:0 10px 18px rgba(217,4,22,.24)!important;
}
main section#howto .imageFrame{
  padding:14px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff 0,#fffafb 100%)!important;
}
main section#howto .imageFrame img{
  width:100%!important;
  height:auto!important;
  border-radius:22px!important;
  box-shadow:0 12px 30px rgba(15,23,42,.08)!important;
}
/* step cards below */
main section#howto .processGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px!important;
}
main section#howto .stepCard{
  position:relative;
  padding:22px 18px 18px!important;
  border-radius:20px!important;
  background:#fff!important;
  border:1px solid var(--howto-border)!important;
  box-shadow:0 14px 30px rgba(16,24,40,.06)!important;
  overflow:hidden;
}
main section#howto .stepCard::before{
  content:""!important;
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#ef2332 0,#ff8089 100%);
  border-radius:999px;
}
main section#howto .stepCard h3{
  margin:0 0 8px!important;
  color:#1d2734!important;
  font-size:1.15rem!important;
  line-height:1.35!important;
}
main section#howto .stepCard p{
  margin:0!important;
  color:#5c6876!important;
  font-size:15px!important;
  line-height:1.72!important;
  font-weight:600!important;
}
@media (max-width:1120px){
  main section#howto>.wrap.split{grid-template-columns:1fr!important}
  main section#howto .panel h2{max-width:none}
  main section#howto .processGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:760px){
  main section#howto{padding-top:18px!important;padding-bottom:10px!important}
  main section#howto>.wrap.split{gap:14px!important}
  main section#howto .panel,
  main section#howto .imageFrame{border-radius:22px!important}
  main section#howto .panel{padding:18px!important}
  main section#howto .panel .eyebrow{font-size:12px!important;padding:8px 12px!important;margin-bottom:12px!important}
  main section#howto .panel h2{font-size:clamp(1.7rem,8.4vw,2.35rem)!important;line-height:1.14!important;margin-bottom:10px!important}
  main section#howto .panel>p{font-size:15px!important;line-height:1.68!important;margin-bottom:14px!important}
  main section#howto .featureList{gap:8px!important}
  main section#howto .featureList li{grid-template-columns:30px minmax(0,1fr);gap:10px!important;padding:12px 12px!important;border-radius:14px!important;font-size:14.5px!important;line-height:1.65!important}
  main section#howto .featureList .check{width:30px!important;height:30px!important;min-width:30px!important;font-size:14px!important}
  main section#howto .imageFrame{padding:10px!important}
  main section#howto .imageFrame img{border-radius:16px!important}
  main section#howto .processGrid{grid-template-columns:1fr!important;gap:10px!important}
  main section#howto .stepCard{padding:18px 15px 16px!important;border-radius:16px!important}
  main section#howto .stepCard p{font-size:14px!important}
}