:root{
  --header-offset-desktop:138px;
  --header-offset-tablet:120px;
  --header-offset-mobile:102px;
  --brand:#C8102E;
  --brand-dark:#8F0B22;
  --brand-soft:#fff1f3;
  --brand-soft-2:#ffe4e6;
  --ink:#0f1a28;
  --muted:#64748b;
  --line:#e6ebf2;
}
body.howitworks-body{
  margin:0;
  background:#f6f7fb;
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding-top:var(--header-offset-desktop);
  padding-bottom:72px;
  overflow-y:scroll;
}
@media(max-width:1023px){
  body.howitworks-body{padding-top:var(--header-offset-tablet);}
}
@media(max-width:767px){
  body.howitworks-body{padding-top:var(--header-offset-mobile);padding-bottom:96px;}
}
.howitworks-main{padding:24px 16px 40px;}
.howitworks-hero{
  background:linear-gradient(135deg,#29000b 0%,#8a0022 38%,#c8102e 72%,#540025 100%);
  border-radius:8px;
  box-shadow:0 24px 50px rgba(15,26,40,0.18);
}
.howitworks-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0.7rem 1.3rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-weight:600;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.howitworks-tab.is-active{
  background:#fff;
  color:var(--brand);
  border-color:#fff;
}
.icon{
  width:20px;
  height:20px;
  stroke:currentColor;
}
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:24px; height:24px; }
.icon-chip{
  width:48px;
  height:48px;
  border-radius:8px;
  background:var(--brand-soft);
  border:1px solid rgba(200,16,46,0.18);
  color:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.icon-spot{
  width:48px;
  height:48px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(200,16,46,0.2);
  color:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.icon-spot--sm{
  width:32px;
  height:32px;
  border-radius:8px;
}
.icon-spot--sm .icon{
  width:16px;
  height:16px;
}
.howitworks-card,
.howitworks-panel,
.howitworks-faq,
.howitworks-mini-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:none;
}
.howitworks-panel--soft{
  background:var(--brand-soft);
  border-color:rgba(200,16,46,0.2);
}
.howitworks-panel--soft-alt{
  background:var(--brand-soft-2);
  border-color:rgba(200,16,46,0.16);
}
.howitworks-panel--soft .text-blue-900,
.howitworks-panel--soft-alt .text-green-900{
  color:var(--ink);
}
.howitworks-panel--soft .text-blue-800,
.howitworks-panel--soft .text-blue-700,
.howitworks-panel--soft-alt .text-green-700{
  color:var(--muted);
}
.howitworks-btn{
  border-radius:8px;
  padding:0.7rem 1.3rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
  text-decoration:none;
}
.howitworks-btn--primary{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
}
.howitworks-btn--primary:hover{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
}
.howitworks-btn--outline{
  background:transparent;
  color:var(--brand);
  border:1px solid var(--brand);
}
.howitworks-btn--outline:hover{
  background:var(--brand);
  color:#fff;
}
.howitworks-rule-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.howitworks-faq{
  overflow:hidden;
}
.howitworks-faq button:hover{
  background:#fff1f3;
}
.faq-icon{
  width:16px;
  height:16px;
  stroke:currentColor;
}
.howitworks-body .text-primary{ color:var(--brand); }

@media(min-width:768px){
  .py-8{
    padding-top:2rem;
    padding-bottom:2rem;
  }
}
@media(max-width:767px){
  .py-8{
    padding-top:0rem;
    padding-bottom:2rem;
    margin-top:-14px;
  }
}