/* how I work: stacked depth cards */
.how{position:relative;padding-top:96px;padding-bottom:96px}
.how-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(35% 45% at 75% 50%,color-mix(in srgb,var(--brand-b,#7c5cff) 20%,transparent),transparent 70%),radial-gradient(30% 40% at 15% 30%,color-mix(in srgb,var(--brand-a,#3040c8) 10%,transparent),transparent 70%)}
.how-layout{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.25fr;gap:80px;align-items:center}
.how-copy h2{margin:0 0 20px}
.how-copy h2 span{color:var(--t-muted,#5b6170)}
.how-intro{font-size:17px;line-height:1.6;color:var(--t-muted,#5b6170);max-width:34ch;margin:0}
.how-spread{position:relative;margin-top:30px;display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 12px;border-radius:100px;cursor:pointer;font:inherit;font-size:14px;color:var(--t-ink,#111318);
  background:var(--glass,rgba(255,255,255,.55));border:1px solid var(--glass-line,rgba(255,255,255,.95));box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(30,30,90,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .25s,transform .25s}
.how-spread:hover{transform:translateY(-1px)}
.how-spread[aria-pressed="true"]{background:var(--glass,rgba(255,255,255,.9))}
.how-spread-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand-a,#3040c8),var(--brand-b,#7c5cff));transition:transform .35s}
.how-spread[aria-pressed="true"] .how-spread-ic{transform:rotate(90deg)}

.how-shell{position:relative;padding:10px 28px 20px 0}
.how-stack{display:flex;flex-direction:column;isolation:isolate}
.how-layer{position:relative;z-index:var(--i);margin-top:-14px;transform:translateX(calc(var(--i)*6px)) rotate(var(--angle));transform-origin:20% 50%;border-radius:22px;
  background:var(--glass,linear-gradient(125deg,rgba(255,255,255,.92),rgba(246,244,255,.7)));border:1px solid var(--glass-line,rgba(255,255,255,.95));
  box-shadow:inset 0 2px 0 #fff,0 16px 30px -12px rgba(36,41,69,.28),0 2px 4px rgba(36,41,69,.05);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .5s cubic-bezier(.2,.8,.2,1),margin .5s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.how-layer:first-child{margin-top:0}
.how-layer[aria-current="step"]{background:var(--glass,linear-gradient(120deg,#fff,rgba(240,237,255,.95)));border-color:rgba(196,189,236,.9);box-shadow:inset 0 2px 0 #fff,0 26px 44px -14px color-mix(in srgb,var(--brand-a,#3040c8) 32%,transparent),0 2px 4px rgba(36,41,69,.05)}
.how-stack.is-fanned .how-layer,.how-shell:hover .how-layer{transform:translateX(calc(var(--i)*10px)) rotate(0);margin-top:10px}
.how-stack.is-fanned .how-layer:first-child,.how-shell:hover .how-layer:first-child{margin-top:0}
.how-layer h3{margin:0;font:inherit}
.how-toggle{display:grid;grid-template-columns:40px 1fr 28px;column-gap:18px;align-items:start;width:100%;padding:24px 26px 26px;border:0;background:none;border-radius:22px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.how-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--t-muted,#5b6170);background:var(--glass,rgba(255,255,255,.8));border:1px solid var(--glass-line,rgba(255,255,255,.95));box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(30,30,90,.08);transition:background .3s,color .3s,box-shadow .3s}
.how-layer[aria-current="step"] .how-ic{color:#fff;background:linear-gradient(135deg,var(--brand-a,#3040c8),var(--brand-b,#7c5cff));border-color:transparent;box-shadow:0 8px 18px color-mix(in srgb,var(--brand-a,#3040c8) 35%,transparent)}
.how-text{display:block}
.how-n{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--brand-b,#7c5cff);font-variant-numeric:tabular-nums;margin-bottom:2px}
.how-title{display:block;font-size:24px;line-height:1.2;font-weight:550;letter-spacing:-.03em;color:var(--t-ink,#111318)}
.how-get{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--t-muted,#5b6170)}
.how-get b{display:inline-block;margin-right:9px;font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-a,#3040c8)}
.how-plus{position:relative;width:28px;height:28px;margin-top:6px;border-radius:50%;border:1px solid #d8d8e5;transition:background .3s,border-color .3s,transform .3s}
.how-plus::before,.how-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;background:var(--t-muted,#5b6170);border-radius:2px;transition:transform .3s,background .3s}
.how-plus::after{transform:rotate(90deg)}
.how-toggle[aria-expanded="true"] .how-plus{background:linear-gradient(135deg,var(--brand-a,#3040c8),var(--brand-b,#7c5cff));border-color:transparent}
.how-toggle[aria-expanded="true"] .how-plus::before,.how-toggle[aria-expanded="true"] .how-plus::after{background:#fff}
.how-toggle[aria-expanded="true"] .how-plus::after{transform:rotate(0)}
.how-detail{padding:0 26px 26px 84px;animation:howIn .4s ease}
.how-detail[hidden]{display:none}
.how-detail p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--t-body,#2b3140);max-width:42ch}
.how-mini{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--brand-a,#3040c8)}
.how-mini::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-b,#7c5cff)}
@keyframes howIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* balance: smaller cards, sticky copy */
.how-layout{align-items:start;grid-template-columns:1fr 1.1fr;gap:72px}
.how-copy{position:sticky;top:120px;padding-top:12px}
.how-shell{max-width:560px;justify-self:end;width:100%}
.how-toggle{grid-template-columns:34px 1fr 24px;column-gap:14px;padding:18px 20px 20px}
.how-ic{width:34px;height:34px;border-radius:11px}
.how-ic svg{width:16px;height:16px}
.how-title{font-size:20px}
.how-get{font-size:13px;margin-top:6px}
.how-plus{width:24px;height:24px;margin-top:4px}
.how-plus::before,.how-plus::after{width:10px;margin-left:-5px}
.how-detail{padding:0 20px 20px 68px}
.how-detail p{font-size:14px;margin-bottom:10px}

@media(max-width:1000px){.how-layout{gap:40px;grid-template-columns:.8fr 1.2fr}.how-toggle{column-gap:12px;padding:22px 20px 24px}.how-detail{padding-left:72px}.how-get b{display:block;margin-bottom:2px}}
@media(max-width:800px){
  .how-layout{grid-template-columns:1fr;gap:32px}
  .how-copy{position:static;padding-top:0}
  .how-shell{max-width:none}
  .how-shell{padding:4px 12px 4px 0}
  .how-layer{transform:translateX(calc(var(--i)*2px)) rotate(calc(var(--angle)*.5));border-radius:18px}
  .how-stack.is-fanned .how-layer,.how-shell:hover .how-layer{transform:translateX(calc(var(--i)*3px)) rotate(0)}
  .how-toggle{grid-template-columns:36px 1fr 26px;padding:20px 16px 22px}
  .how-ic{width:36px;height:36px}
  .how-title{font-size:21px}
  .how-detail{padding:0 18px 22px 64px}
}
/* phone cards stay inside the shell in both stacked and fanned states */
@media(max-width:640px){.how-layout{grid-template-columns:minmax(0,1fr)}.how-shell,.how-text{min-width:0}.how-toggle{grid-template-columns:36px minmax(0,1fr) 26px;column-gap:10px}.how-title,.how-detail{overflow-wrap:anywhere}.how-layer,.how-stack.is-fanned .how-layer,.how-shell:hover .how-layer{transform:none}.how-spread{max-width:100%}}
@media (prefers-reduced-motion: reduce){.how-layer,.how-detail,.how-spread,.how-spread-ic,.how-plus{animation:none!important;transition:none!important}}

/* neo-brutal */
body[data-theme="neo"] .how-glow{display:none}
body[data-theme="neo"] .how-layer{background:#fff!important;border:3px solid #000!important;border-radius:16px;box-shadow:5px 5px 0 #000!important;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-theme="neo"] .how-layer[aria-current="step"]{background:#ffd84d!important}
body[data-theme="neo"] .how-ic,body[data-theme="neo"] .how-plus{background:#fff;border:2px solid #000;box-shadow:none;color:#000}
body[data-theme="neo"] .how-layer[aria-current="step"] .how-ic,body[data-theme="neo"] .how-toggle[aria-expanded="true"] .how-plus{background:#000;color:#fff;border-color:#000}
body[data-theme="neo"] .how-plus::before,body[data-theme="neo"] .how-plus::after{background:#000}
body[data-theme="neo"] .how-n,body[data-theme="neo"] .how-get b,body[data-theme="neo"] .how-mini{color:#000}
body[data-theme="neo"] .how-title,body[data-theme="neo"] .how-detail p{color:#000;font-weight:700}
body[data-theme="neo"] .how-detail p{font-weight:500}
body[data-theme="neo"] .how-get,body[data-theme="neo"] .how-intro,body[data-theme="neo"] .how-copy h2 span{color:#222}
body[data-theme="neo"] .how-spread{background:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-theme="neo"] .how-spread-ic{background:#000}
body[data-theme="neo"] .how-mini::before{background:#000}

/* dark */
body[data-theme="dark"] .how-glow{opacity:.6}
body[data-theme="dark"] .how-layer{background:var(--glass-d,linear-gradient(125deg,rgba(255,255,255,.1),rgba(255,255,255,.04)));border-color:var(--glass-line-d,rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 34px -12px rgba(0,0,0,.6)}
body[data-theme="dark"] .how-layer[aria-current="step"]{background:linear-gradient(120deg,color-mix(in srgb,var(--brand-b,#7c5cff) 22%,transparent),color-mix(in srgb,var(--brand-a,#3040c8) 10%,transparent));border-color:color-mix(in srgb,var(--brand-l,#a08cff) 40%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 44px -14px rgba(0,0,0,.7)}
body[data-theme="dark"] .how-ic{background:var(--glass-d,rgba(255,255,255,.08));border-color:var(--glass-line-d,rgba(255,255,255,.14));color:var(--t-body-d,#aab3c7);box-shadow:none}
body[data-theme="dark"] .how-plus{border-color:var(--glass-line-d,rgba(255,255,255,.22))}
body[data-theme="dark"] .how-plus::before,body[data-theme="dark"] .how-plus::after{background:var(--t-body-d,#aab3c7)}
body[data-theme="dark"] .how-title{color:var(--t-ink-d,#eef1f7)}
body[data-theme="dark"] .how-n,body[data-theme="dark"] .how-get b,body[data-theme="dark"] .how-mini{color:var(--brand-l,#a99bff)}
body[data-theme="dark"] .how-get,body[data-theme="dark"] .how-copy h2 span{color:var(--t-body-d,#aab3c7)}
body[data-theme="dark"] .how .how-intro,body[data-theme="dark"] .how .how-detail p{color:var(--t-body-d,#aab3c7)!important}
body[data-theme="dark"] .how-spread{background:var(--glass-d,rgba(255,255,255,.08));border-color:var(--glass-line-d,rgba(255,255,255,.16));color:var(--t-ink-d,#eef1f7);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
body[data-theme="dark"] .how-spread[aria-pressed="true"]{background:var(--glass-d,rgba(255,255,255,.14))}